diff --git a/.npmrc b/.npmrc
index eaf6f94..fa286b7 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
-@abearxiong:registry=https://npm.pkg.github.com
\ No newline at end of file
+@abearxiong:registry=https://npm.pkg.github.com
+@kevisual:registry=https://npm.xiongxiao.me
\ No newline at end of file
diff --git a/package.json b/package.json
index 54f15ae..e35d656 100644
--- a/package.json
+++ b/package.json
@@ -8,5 +8,9 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
 }
diff --git a/packages/tailwind/extends/theme.js b/packages/tailwind/extends/theme.js
index 1c5c141..b44d0b8 100644
--- a/packages/tailwind/extends/theme.js
+++ b/packages/tailwind/extends/theme.js
@@ -1,11 +1,9 @@
 export const extend = {
-  extend: {
-    fontFamily: {
-      mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
-      rob: ['Roboto', 'sans-serif'],
-      int: ['Inter', 'sans-serif'],
-      orb: ['Orbitron', 'sans-serif'],
-      din: ['DIN', 'sans-serif'],
-    },
+  fontFamily: {
+    mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
+    rob: ['Roboto', 'sans-serif'],
+    int: ['Inter', 'sans-serif'],
+    orb: ['Orbitron', 'sans-serif'],
+    din: ['DIN', 'sans-serif'],
   },
 };
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index 3c74638..6ebf000 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -10,7 +10,10 @@
   "files": [
     "plugins",
     "css",
-    "extends"
+    "extends",
+    "tailwind.config.js",
+    "src",
+    "dist"
   ],
   "keywords": [],
   "author": "abearxiong",
diff --git a/packages/theme-preview/src/App.tsx b/packages/theme-preview/src/App.tsx
index 78ccc84..a5140e1 100644
--- a/packages/theme-preview/src/App.tsx
+++ b/packages/theme-preview/src/App.tsx
@@ -13,7 +13,7 @@ export const App = () => {
         }}>
         <Router>
           <Routes>
-            <Route path='/' element={<Navigate to='/model/' />} />
+            <Route path='/' element={<Navigate to='/modal/' />} />
             <Route path='/modal/*' element={<FlowApps />} />
             <Route path='/codemirror/*' element={<CodeMirrorApp />} />
             <Route path='/404' element={<div>404</div>} />
diff --git a/packages/theme-preview/src/pages/model/create-dom.ts b/packages/theme-preview/src/pages/model/create-dom.ts
index a06efeb..4dbf834 100644
--- a/packages/theme-preview/src/pages/model/create-dom.ts
+++ b/packages/theme-preview/src/pages/model/create-dom.ts
@@ -29,7 +29,7 @@ export function createDOMElement(jsxElement: JSX.Element) {
   }
 
   const domElement = document.createElement(type);
-
+  if (!props) return domElement;
   // 处理 props
   Object.keys(props).forEach((prop) => {
     if (prop === 'children') {
diff --git a/packages/theme-preview/src/pages/model/index.tsx b/packages/theme-preview/src/pages/model/index.tsx
index 8a8132d..127bed4 100644
--- a/packages/theme-preview/src/pages/model/index.tsx
+++ b/packages/theme-preview/src/pages/model/index.tsx
@@ -78,6 +78,7 @@ const ModelTwo = () => {
 const ModelTwo2 = () => {
   const ref = useRef<HTMLDivElement>(null);
   const showModel = () => {
+    console.log('refHide', refHide);
     const div = createDOMElement(refHide);
     const model = DialogModal.render(ref.current! || div, {
       dialogTitle: 'Dialog Modal',
@@ -101,7 +102,7 @@ const ModelTwo2 = () => {
   return (
     <div>
       <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
-        model two -假入ref的模块没有真实渲染到节点，如何处理。createDOMElement
+        model two -假入ref的模块没有真实渲染到节点，如何处理。 createDOMElement
         <div className='cursor-pointer p-2 border' onClick={showModel}>
           show
         </div>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 94edd16..104428a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -21,24 +21,25 @@
   "keywords": [],
   "author": "abearxiong",
   "devDependencies": {
-    "@emotion/serialize": "^1.3.1",
+    "@emotion/serialize": "^1.3.2",
     "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/postcss-import": "^14.0.3",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.12",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "cssnano": "^7.0.6",
     "immer": "^10.1.1",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.8",
     "postcss-import": "^16.1.0",
-    "rollup": "^4.22.2",
+    "rollup": "^4.24.3",
     "rollup-plugin-postcss": "^4.0.2",
     "ts-lib": "^0.0.5",
-    "typescript": "^5.6.2",
-    "zustand": "5.0.0-rc.2"
+    "typescript": "^5.6.3",
+    "zustand": "5.0.1",
+    "@kevisual/system-ui": "^0.0.2"
   },
   "dependencies": {
     "dayjs": "^1.11.13",
diff --git a/packages/ui/src/components/card/CardBlank.tsx b/packages/ui/src/components/card/CardBlank.tsx
new file mode 100644
index 0000000..4875686
--- /dev/null
+++ b/packages/ui/src/components/card/CardBlank.tsx
@@ -0,0 +1,15 @@
+type CardBlankProps = {
+  number?: number;
+  className?: string;
+};
+export const CardBlank = (props: CardBlankProps) => {
+  const { number = 4, className } = props;
+  const _className = 'card-blank w-[300px] flex-shrink-0' + (className ? ' ' + className : '');
+  return (
+    <>
+      {new Array(number).fill(0).map((_, index) => {
+        return <div key={index} className={_className}></div>;
+      })}
+    </>
+  );
+};
diff --git a/packages/ui/src/components/card/index.ts b/packages/ui/src/components/card/index.ts
new file mode 100644
index 0000000..a06f684
--- /dev/null
+++ b/packages/ui/src/components/card/index.ts
@@ -0,0 +1 @@
+export { CardBlank } from './CardBlank'
diff --git a/packages/ui/src/components/modal/blank-modal.ts b/packages/ui/src/components/modal/blank-modal.ts
deleted file mode 100644
index ebbdfe1..0000000
--- a/packages/ui/src/components/modal/blank-modal.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { Modal, ModalOpts, KV } from './modal';
-import { SelectEl, querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
-import { ObjCss } from '../../utils/css';
-
-export class BlankModal extends Modal {
-  constructor(opts: ModalOpts) {
-    super(opts);
-  }
-}
-type DialogModalOpts = {
-  dialogTitle?: string;
-  dialogTitleClassName?: string;
-  dialogTitleStyle?: ElStyle;
-  dialogTitleEl?: HTMLElement;
-  dialogTitleCloseIcon?: boolean;
-
-  dialogContentClassName?: string;
-  dialogContentStyle?: ElStyle;
-
-  dialogFooterClassName?: string;
-  dialogFooterStyle?: ElStyle;
-} & ModalOpts<KV, DialogDefaultStyle>;
-
-type DialogDefaultStyle = {
-  defaultDialogTitleStyle?: ObjCss;
-  defaultDialogContentStyle?: ObjCss;
-  defaultDialogFooterStyle?: ObjCss;
-};
-
-export class DialogModal extends Modal<DialogModalOpts, DialogDefaultStyle> {
-  dialogTitle?: string;
-  dialogTitleClassName?: string;
-  dialogTitleStyle?: ElStyle;
-  dialogTitleEl?: HTMLElement;
-  dialogTitleCloseIcon?: boolean;
-
-  dialogContentClassName?: string;
-  dialogContentStyle?: ElStyle;
-
-  dialogFooterShow?: boolean;
-  dialogFooterClassName?: string;
-  dialogFooterStyle?: ElStyle;
-
-  constructor(opts: ModalOpts<DialogModalOpts, DialogDefaultStyle>) {
-    super(opts);
-
-    this.dialogTitle = opts.dialogTitle;
-    this.dialogTitleClassName = opts.dialogTitleClassName;
-    this.dialogTitleStyle = opts.dialogTitleStyle;
-    this.dialogTitleEl = opts.dialogTitleEl;
-    this.dialogTitleCloseIcon = opts.dialogTitleCloseIcon;
-
-    this.dialogContentClassName = opts.dialogContentClassName;
-    this.dialogContentStyle = opts.dialogContentStyle;
-
-    this.dialogFooterClassName = opts.dialogFooterClassName;
-    this.dialogFooterStyle = opts.dialogFooterStyle;
-    this.dialogFooterShow = opts.dialogFooterShow ?? false;
-
-    this.setDefaultStyle('defaultContentStyle', {
-      position: 'absolute',
-      padding: '0px',
-      left: '50%',
-      top: '20%',
-      width: '600px',
-      background: '#fff',
-      borderRadius: '5px',
-      boxShadow: '0 0 10px rgba(0,0,0,.1)',
-      transform: 'translate(-50%, -50%)',
-      maxHeight: '80vh',
-      overflow: 'auto',
-      ...opts?.defaultStyle?.defaultContentStyle,
-    });
-
-    this.setDefaultStyle('defaultDialogTitleStyle', {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      position: 'sticky',
-      padding: '10px 20px',
-      top: '0',
-      fontSize: '16px',
-      background: '#fff',
-      marginTop: '-10px',
-      borderBottom: '1px solid #f0f0f0',
-      marginBottom: '5px',
-      ...opts?.defaultStyle?.defaultDialogTitleStyle,
-    });
-    this.setDefaultStyle('defaultDialogContentStyle', {
-      padding: '20px',
-      ...opts?.defaultStyle?.defaultDialogContentStyle,
-    });
-    this.setDefaultStyle('defaultDialogFooterStyle', {
-      display: 'flex',
-      justifyItems: 'end',
-      borderTop: '1px solid #f0f0f0',
-      padding: '10px 20px',
-      ...opts?.defaultStyle?.defaultDialogFooterStyle,
-    });
-  }
-  // static render(el: string | HTMLDivElement, id: string, opts?: DialogModalOpts): DialogModal;
-  // static render(el: string | HTMLDivElement, opts?: DialogModalOpts): DialogModal;
-  // static render(...args: any[]) {
-  //   const [el, id, opts] = args;
-  //   return super.render(el, id, opts);
-  // }
-  appendRoot(documentFragment: DocumentFragment): void {
-    const cacheFragment = document.createDocumentFragment();
-    // 拿出来
-    cacheFragment.appendChild(this.Element);
-    const DialogBox = documentFragment.querySelector('.ui-modal-content');
-    DialogBox.classList.add('ui-modal-dialog');
-
-    // 创建title
-    const title = document.createElement('div');
-    title.classList.add('ui-modal-dialog-title');
-    elAddCS2(title, this.dialogTitleClassName, this.dialogTitleStyle, this.defaultStyle.defaultDialogTitleStyle);
-    if (this.dialogTitleEl) {
-      title.appendChild(this.dialogTitleEl);
-    } else {
-      title.innerText = this.dialogTitle;
-    }
-    if (this.dialogTitleCloseIcon) {
-      const closeIcon = document.createElement('span');
-      closeIcon.className = 'ui-modal-dialog-close';
-      closeIcon.innerHTML = '&times;';
-      closeIcon.style.cssText = `
-        cursor: pointer;
-        font-size: 24px;
-        margin: -5px 10px 0 0;
-      `;
-      closeIcon.onclick = (e) => {
-        this.setOpen(false);
-      };
-      title.appendChild(closeIcon);
-    }
-
-    DialogBox.appendChild(title);
-    // 创建content
-    const content = document.createElement('div');
-    content.className = 'ui-modal-dialog-content';
-    elAddCS2(content, this.dialogContentClassName, this.dialogContentStyle, this.defaultStyle.defaultDialogContentStyle);
-
-    content.appendChild(cacheFragment);
-
-    if (this.dialogFooterShow) {
-      const footer = document.createElement('div');
-      footer.className = 'ui-modal-dialog-footer';
-      elAddCS2(footer, this.dialogFooterClassName, this.dialogFooterStyle, this.defaultStyle.defaultDialogFooterStyle);
-      DialogBox.appendChild(footer);
-    }
-
-    DialogBox.appendChild(content);
-
-    super.appendRoot(documentFragment);
-  }
-  renderEl(el: HTMLDivElement): this {
-    return super.renderEl(el);
-  }
-  renderFooter(el?: SelectEl): void {
-    const _el = querySelector(el);
-    if (!_el) return;
-    const footer = this.Element.querySelector('.ui-modal-dialog-footer');
-    if (!footer) return;
-    footer.innerHTML = '';
-    footer.appendChild(_el);
-  }
-  renerContent(el?: SelectEl): void {
-    const _el = querySelector(el);
-    if (!_el) return;
-    const content = this.Element.querySelector('.ui-modal-dialog-content');
-    if (!content) return;
-    content.innerHTML = '';
-    content.appendChild(_el);
-  }
-}
diff --git a/packages/ui/src/components/modal/event.ts b/packages/ui/src/components/modal/event.ts
deleted file mode 100644
index b9bb983..0000000
--- a/packages/ui/src/components/modal/event.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { modalStore } from './store';
-// modal 事件实现
-const ModalEvent = {
-  //
-};
-const onClick = (e: MouseEvent) => {
-  const target = e.target as HTMLElement;
-  if (!target) {
-    console.log('target is null');
-    return;
-  }
-  if (target.classList.contains('ui-modal-mask')) {
-    const modalState = modalStore.getState();
-    const modal = modalState.modals.find((modal) => modal.id === target.dataset.id);
-    if (modal && modal.open) {
-      modal.onMaskClose(e);
-    }
-    e.preventDefault();
-    return;
-  }
-  // const parentModalRoot = target.closest('.ui-modal-root');
-  // if (!parentModalRoot) {
-  //   return;
-  // }
-};
-
-export const InitModalEvent = (el: HTMLDivElement) => {
-  const id = el.id;
-  if (ModalEvent[id] && el === ModalEvent[id]) {
-    return;
-  }
-  // Remove previous event listener to prevent memory leak
-  if (ModalEvent[id]) {
-    ModalEvent[id].removeEventListener('click', onClick);
-  }
-  ModalEvent[id] = null;
-  el.addEventListener('click', onClick);
-  ModalEvent[id] = el;
-};
diff --git a/packages/ui/src/components/modal/index.ts b/packages/ui/src/components/modal/index.ts
index b8e0056..7fdbc1c 100644
--- a/packages/ui/src/components/modal/index.ts
+++ b/packages/ui/src/components/modal/index.ts
@@ -1,5 +1,3 @@
-export * from './modal';
+import { Modal, modalStore, DialogModal, BlankModal } from '@kevisual/system-ui';
 
-export * from './store';
-
-export * from './blank-modal';
+export { Modal, modalStore, DialogModal, BlankModal };
diff --git a/packages/ui/src/components/modal/modal.ts b/packages/ui/src/components/modal/modal.ts
deleted file mode 100644
index 29410ff..0000000
--- a/packages/ui/src/components/modal/modal.ts
+++ /dev/null
@@ -1,272 +0,0 @@
-import { querySelector, elAddCS, ElStyle, elAddCS2 } from '../../utils/query-el';
-import { generateId } from '../../utils/nanoid';
-import { modalStore } from './store';
-import { InitModalEvent } from './event';
-import { ObjCss } from '../../utils/css';
-export type KV = {
-  [key: string]: any;
-};
-export type ModalOpts<
-  T = {
-    [key: string]: any;
-  },
-  U = {
-    [key: string]: any;
-  },
-> = {
-  root?: HTMLDivElement | string;
-  id?: string;
-  mask?: boolean;
-  maskClassName?: string;
-  maskStyle?: ElStyle;
-  maskClose?: boolean;
-
-  contentClassName?: string;
-  contentStyle?: ElStyle;
-  destroyOnClose?: boolean; // 关闭，把Element移动到cacheFragment中
-  hideOnClose?: boolean; // 关闭后是否销毁，设置display:none
-  open?: boolean;
-
-  onClose?: () => void;
-  defaultStyle?: DefaultStyle<U>;
-} & T;
-export type DefaultStyle<T> = {
-  defaultContentStyle?: ObjCss;
-  defaultMaskStyle?: ObjCss;
-} & T;
-
-export class Modal<T = any, U = KV> {
-  static rootClassName = '#ui-modal-list';
-  root: HTMLDivElement;
-  id: string;
-  modalElement?: HTMLDivElement;
-  Element?: HTMLDivElement;
-  mask?: boolean;
-  maskClassName?: string;
-  maskStyle?: ElStyle;
-  // 点击mask是否关闭
-  maskClose?: boolean;
-
-  contentClassName?: string;
-  contentStyle?: ElStyle;
-
-  destroyOnClose?: boolean;
-  hideOnClose?: boolean;
-
-  open?: boolean;
-  isUse = true;
-  // 通知关闭
-  onClose?: (e: any) => void;
-  cacheFragment?: DocumentFragment;
-
-  defaultStyle?: DefaultStyle<U>;
-  constructor(opts: ModalOpts<T, U>) {
-    this.root = this.initRoot(opts.root);
-    InitModalEvent(this.root);
-    this.id = opts.id || generateId();
-    this.mask = opts.mask ?? true;
-    this.maskClassName = opts.maskClassName;
-    this.maskStyle = opts.maskStyle;
-    this.maskClose = opts.maskClose ?? true;
-    this.contentClassName = opts.contentClassName;
-    this.contentStyle = opts.contentStyle;
-    this.destroyOnClose = opts.destroyOnClose ?? true;
-    this.hideOnClose = opts.hideOnClose ?? true;
-    if (!this.destroyOnClose && !this.hideOnClose) {
-      this.destroyOnClose = true; // 必须要有一个为true
-      console.warn('destroyOnClose Or hideOnClose must one is true');
-    }
-    this.cacheFragment = new DocumentFragment();
-    this.defaultStyle = opts.defaultStyle || ({} as DefaultStyle<U>);
-    this.open = opts.open ?? true;
-    this.onClose = opts.onClose;
-  }
-  protected initRoot(root: ModalOpts['root']) {
-    let _root = querySelector(root);
-    if (!_root) {
-      // 查询ui-modal元素,不存在则创建一个ui-modal元素并添加到body上
-      const queryRoot = document.querySelector('#ui-modal-list') as HTMLDivElement;
-      if (queryRoot) {
-        _root = queryRoot;
-        _root.classList.add('ui-modal-root');
-        return _root;
-      }
-      _root = document.createElement('div');
-      _root.id = 'ui-modal-list';
-      _root.classList.add('ui-modal-root');
-      document.body.appendChild(_root);
-      return _root;
-    }
-    _root.classList.add('ui-custom-modal', 'ui-modal-root');
-
-    if (!_root.id) {
-      _root.id = 'ui-modal' + generateId();
-    }
-
-    return _root;
-  }
-  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, id: string, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
-  static render<T extends new (...args: any[]) => any>(this: T,el: string | HTMLDivElement, opts?: ConstructorParameters<T>[0]): InstanceType<T>;
-  static render(...args: any[]) {
-    let [el, id, opts] = args;
-    const _el = querySelector(el);
-    if (!_el) {
-      console.warn('el is not exist', el);
-      return;
-    }
-    let _id: string = '';
-    if (typeof id === 'string' && id) {
-      // 如果id是字符串
-      _id = id;
-    } else if (typeof id === 'object') {
-      // 如果id是对象
-      _id = id.id;
-      opts = id;
-      id = id.id;
-    }
-    let _modal: Modal | undefined;
-    const modalState = modalStore.getState();
-    if (_id) {
-      // 如果存在id,则判断是否已经存在该id的modal
-      _modal = modalStore.getState().getModal(_id);
-    }
-    if (!_modal) {
-      // 不存在modal,则创建一个modal
-      // console.log('create modal', id, opts);
-      const newModal = new this({ id, ...opts });
-      _modal = newModal;
-      modalStore.setState({
-        modals: [...modalState.modals, newModal],
-      });
-    }
-    _modal.renderEl(_el);
-    return _modal;
-  }
-  static create<T extends new (...args: any[]) => any>(this:T, opts: ModalOpts):InstanceType<T> {
-    let _id = opts.id;
-    let _modal: Modal | undefined;
-    const modalState = modalStore.getState();
-    if (_id) {
-      // 如果存在id,则判断是否已经存在该id的modal
-      _modal = modalStore.getState().getModal(_id);
-    }
-    if (!_modal) {
-      // 不存在modal,则创建一个modal
-      // console.log('create modal', id, opts);
-      const newModal = new this({ ...opts, id: _id });
-      _modal = newModal;
-      modalStore.setState({
-        modals: [...modalState.modals, newModal],
-      });
-    }
-    return _modal as InstanceType<T>;
-  }
-  createMask() {
-    const mask = document.createElement('div');
-    mask.classList.add('ui-modal-mask');
-    mask.dataset.id = this.id;
-    elAddCS2(mask, this.maskClassName, this.maskStyle, this.defaultStyle?.defaultMaskStyle);
-    return mask;
-  }
-  renderEl(el: HTMLDivElement) {
-    const defaultContentStyle = this.defaultStyle?.defaultContentStyle || {
-      position: 'absolute',
-      padding: '20px',
-      left: '50%',
-      top: '20%',
-      width: '600px',
-      background: '#fff',
-      borderRadius: '5px',
-      boxShadow: '0 0 10px rgba(0,0,0,.1)',
-      transform: 'translate(-50%, -50%)',
-      maxHeight: '80vh',
-      overflow: 'auto',
-    };
-
-    const fragment = document.createDocumentFragment();
-    const _modalEl = document.createElement('div');
-    _modalEl.classList.add('ui-modal-wrapper');
-    _modalEl.id = this.id;
-    _modalEl.dataset.mid = this.id;
-    if (this.mask) {
-      const mask = this.createMask();
-      _modalEl.appendChild(mask);
-    }
-    const modalContent = document.createElement('div');
-    modalContent.classList.add('ui-modal-content');
-    elAddCS2(modalContent, this.contentClassName, this.contentStyle, defaultContentStyle);
-    modalContent.appendChild(el);
-    _modalEl.appendChild(modalContent);
-    fragment.appendChild(_modalEl);
-
-    this.modalElement = _modalEl;
-    this.Element = el;
-    this.appendRoot(fragment);
-
-    return this;
-  }
-  appendRoot(document: DocumentFragment) {
-    this.root.appendChild(document);
-    // 第一次渲染，open为true，显示弹窗
-    this.setOpen(this.open);
-  }
-  setOpen(open: boolean) {
-    this.open = open;
-    if (this.destroyOnClose) {
-      if (open) {
-        this.root.appendChild(this.modalElement);
-      } else {
-        this.cacheFragment.appendChild(this.modalElement);
-      }
-      return;
-    }
-    if (this.hideOnClose) {
-      if (open) {
-        this.modalElement.classList.remove('ui-modal-close');
-      } else {
-        this.modalElement.classList.add('ui-modal-close');
-      }
-    }
-  }
-  unMount() {
-    // 返回渲染的的Element, 然后删除modalElement
-    const fragment = document.createDocumentFragment();
-    fragment.appendChild(this.Element);
-    this.modalElement?.remove();
-
-    const modalState = modalStore.getState();
-    modalStore.setState({
-      modals: modalState.modals.filter((modal) => modal.id !== this.id),
-    });
-    this.isUse = false;
-    this.cacheFragment = new DocumentFragment();
-    return fragment;
-  }
-  /**
-   * 保留，暂时不用
-   * // TODO: 研究
-   * @param force
-   * @param opts
-   * @returns
-   */
-  reRender(force?: boolean, opts?: ModalOpts) {
-    if (force) {
-      this.modalElement?.remove?.();
-      this.modalElement = undefined;
-      if (!this.Element) return;
-      this.renderEl(this.Element);
-    }
-  }
-  async onMaskClose(e?: any) {
-    if (this.maskClose) {
-      this.setOpen(false);
-      this.onClose?.(e);
-    }
-  }
-  setDefaultStyle(key: keyof DefaultStyle<U>, style: ObjCss) {
-    this.defaultStyle[key] = style as any;
-  }
-}
-
-// modal.render('#abc'||document.querySelector('#abc'));
-// modal.unmount();
diff --git a/packages/ui/src/components/modal/store.ts b/packages/ui/src/components/modal/store.ts
deleted file mode 100644
index 5db4ade..0000000
--- a/packages/ui/src/components/modal/store.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createStore } from '../../utils';
-import { Modal } from './modal';
-
-type ModeStore = {
-  modals: Modal[];
-  getModal: (id: string) => Modal | undefined;
-};
-
-export const modalStore = createStore<ModeStore>((set, get) => {
-  return {
-    modals: [],
-    getModal: (id: string) => {
-      return get().modals.find((model) => model.id === id) as Modal;
-    },
-  };
-});
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e8f0492..80341d1 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,8 +2,4 @@ import { Modal, modalStore, BlankModal, DialogModal } from './components/modal';
 
 export { Modal, modalStore, BlankModal, DialogModal };
 
-import { createDOMElement } from './utils/dom/create-dom-element';
-
-export { createDOMElement };
-
-export * from './utils';
+export * from './components/card';
diff --git a/packages/ui/src/utils/css.ts b/packages/ui/src/utils/css.ts
deleted file mode 100644
index 98d2492..0000000
--- a/packages/ui/src/utils/css.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { serializeStyles } from '@emotion/serialize';
-
-export const getCssText = (obj?: ObjCss) => {
-  if (!obj) return '';
-  const serialized = serializeStyles([obj]);
-  return serialized.styles;
-};
-export const getCssTextObjs = (objs?: ObjCss[]) => {
-  if (!objs) return '';
-  const serialized = serializeStyles(objs);
-  return serialized.styles;
-};
-export type ObjCss = { [key: string]: number | string } & React.CSSProperties;
-export const obj2css = (el?: HTMLDivElement, obj?: ObjCss) => {
-  if (!el) return;
-  if (!obj) return;
-  const serialized = serializeStyles([obj as unknown as Record<string, string>]);
-  el.style.cssText = serialized.styles;
-};
diff --git a/packages/ui/src/utils/dom/create-dom-element.ts b/packages/ui/src/utils/dom/create-dom-element.ts
deleted file mode 100644
index 908f873..0000000
--- a/packages/ui/src/utils/dom/create-dom-element.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-type JSXElement = {
-  type: string | symbol;
-  props: Record<string, any>;
-  key?: string | number;
-};
-export function createDOMElement(jsxElement: JSXElement) {
-  // 如果 jsxElement 是 null, undefined 或者是布尔值，则直接跳过处理
-  if (jsxElement == null || typeof jsxElement === 'boolean') {
-    console.warn('Invalid JSX element:', jsxElement);
-    return null;
-  }
-  const { type, props } = jsxElement;
-  // React Fragment 的处理
-  if (type === Symbol.for('react.fragment')) {
-    const fragment = document.createDocumentFragment();
-    if (props.children) {
-      if (Array.isArray(props.children)) {
-        props.children.forEach((child) => {
-          const childElement = createDOMElement(child);
-          if (childElement) {
-            fragment.appendChild(childElement);
-          }
-        });
-      } else {
-        const childElement = createDOMElement(props.children);
-        if (childElement) {
-          fragment.appendChild(childElement);
-        }
-      }
-    }
-    return fragment;
-  }
-
-  const domElement = document.createElement(type as string);
-
-  // 处理 props
-  Object.keys(props).forEach((prop) => {
-    if (prop === 'children') {
-      // 递归处理 children
-      if (Array.isArray(props.children)) {
-        props.children.forEach((child) => {
-          const childElement = createDOMElement(child);
-          if (childElement) {
-            domElement.appendChild(childElement);
-          }
-        });
-      } else if (typeof props.children === 'string') {
-        domElement.appendChild(document.createTextNode(props.children));
-      } else if (typeof props.children === 'object' && props.children !== null) {
-        const childElement = createDOMElement(props.children);
-        if (childElement) {
-          domElement.appendChild(childElement);
-        }
-      }
-    } else if (prop.startsWith('on')) {
-      // 处理事件监听器
-      const eventType = prop.slice(2).toLowerCase(); // 提取事件类型（如 onClick -> click）
-      domElement.addEventListener(eventType, props[prop]);
-    } else if (prop === 'style' && typeof props[prop] === 'object') {
-      // 处理 style 属性
-      Object.assign(domElement.style, props[prop]);
-    } else if (prop === 'dangerouslySetInnerHTML') {
-      // 处理 dangerouslySetInnerHTML
-      if (props[prop] && typeof props[prop].__html === 'string') {
-        domElement.innerHTML = props[prop].__html;
-      } else {
-        console.warn('Invalid dangerouslySetInnerHTML content:', props[prop]);
-      }
-    } else if (prop === 'ref') {
-      // React 的 ref 在手动创建 DOM 时没有用处
-      console.warn('Ref prop is not supported in manual DOM creation');
-    } else if (prop === 'key') {
-      // React 的 key 属性是用于虚拟 DOM 的，不影响实际 DOM
-      console.warn('Key prop is not applicable in manual DOM creation');
-    } else {
-      // 处理其他普通属性
-      domElement.setAttribute(prop, props[prop]);
-    }
-  });
-
-  return domElement;
-}
diff --git a/packages/ui/src/utils/extra.ts b/packages/ui/src/utils/extra.ts
deleted file mode 100644
index 70727c0..0000000
--- a/packages/ui/src/utils/extra.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function extractKeysFromBraces(text: string) {
-  const regex = /\{\{\s*(.*?)\s*\}\}/g;
-  const keys: string[] = [];
-  let matches: RegExpExecArray | null;
-
-  while ((matches = regex.exec(text)) !== null) {
-    keys.push(matches[1]); // 获取{{}}中间的key
-  }
-
-  return keys;
-}
diff --git a/packages/ui/src/utils/history.ts b/packages/ui/src/utils/history.ts
deleted file mode 100644
index d5edef5..0000000
--- a/packages/ui/src/utils/history.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-type To = string | Location;
-type State<T> = {
-  [key: string]: any;
-} & T;
-export const push = <T = any>(to: To, state?: State<T>, refresh = true) => {
-  const _history = window.history;
-  if (typeof to === 'string') {
-    // must key is default, so react navigate can work
-    _history.pushState({ key: 'default', usr: state }, '', to);
-  } else {
-    // const path = to.pathname;
-    _history.pushState({ key: 'default', usr: state }, '', to.pathname);
-  }
-  // must dispatch popstate event, so react navigate can work
-  refresh && window.dispatchEvent(new Event('popstate'));
-};
-export const history = {
-  push,
-};
-
-// import { createBrowserHistory } from 'history';
-// export const history = createBrowserHistory();
\ No newline at end of file
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
deleted file mode 100644
index 66907db..0000000
--- a/packages/ui/src/utils/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './css';
-export * from './extra';
-export * from './history';
-export * from './is-null';
-export * from './nanoid';
-export * from './store';
-export * from './query-el';
diff --git a/packages/ui/src/utils/is-null.ts b/packages/ui/src/utils/is-null.ts
deleted file mode 100644
index 39d63f5..0000000
--- a/packages/ui/src/utils/is-null.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const isObjectNull = (value: any) => {
-  if (value === null || value === undefined) {
-    return true;
-  }
-  if (JSON.stringify(value) === '{}') {
-    return true;
-  }
-  return false;
-};
diff --git a/packages/ui/src/utils/nanoid.ts b/packages/ui/src/utils/nanoid.ts
deleted file mode 100644
index 28b3002..0000000
--- a/packages/ui/src/utils/nanoid.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { customAlphabet } from 'nanoid';
-// 全小写的字母和数字
-const alphabetLetter = 'abcdefghijklmnopqrstuvwxyz';
-const alphabet = '0123456789abcdefghijklmnopqrstuvwxyz';
-export const alphabetLetterAll = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-
-export const generateId6 = customAlphabet(alphabet, 6);
-export const customNanoid = customAlphabet(alphabetLetterAll, 12);
-export const generateId = (size = 6) => {
-  return 'b-' + generateId6(size);
-};
-export const generate = (size = 6) => {
-  return customNanoid(size);
-};
diff --git a/packages/ui/src/utils/query-el.ts b/packages/ui/src/utils/query-el.ts
deleted file mode 100644
index 4c73595..0000000
--- a/packages/ui/src/utils/query-el.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { obj2css, ObjCss } from './css';
-import parse from 'style-to-object';
-export type SelectEl = string | HTMLDivElement;
-export const querySelector = (el?: string | HTMLDivElement): HTMLDivElement | null => {
-  if (!el) {
-    return null;
-  }
-  if (typeof el === 'string') {
-    return document.querySelector(el) as HTMLDivElement;
-  }
-  return el;
-};
-
-export type ElStyle = ObjCss | string;
-/**
- * el add class and style
- * @param el
- * @param className
- * @param style
- * @returns
- */
-export const elAddCS = (el: HTMLDivElement, className?: string, style?: ElStyle) => {
-  if (!el) return;
-  if (className) {
-    el.classList.add(className);
-  }
-  if (style && typeof style === 'string') {
-    el.style.cssText = style;
-  } else if (style) {
-    obj2css(el, style as ObjCss);
-  }
-};
-
-/**
- * 添加style的同时保留默认的的style
- * @param el
- * @param className
- * @param style
- * @param defaultStyle
- * @returns
- */
-export const elAddCS2 = (el: HTMLDivElement, className?: string, style?: ElStyle, defaultStyle?: ObjCss) => {
-  if (!el) return;
-  if (className) {
-    el.classList.add(className);
-  }
-  let _style: ObjCss = { ...defaultStyle };
-  if (style && typeof style === 'string') {
-    _style = { ...defaultStyle, ...parse(style) };
-  } else if (style && typeof style === 'object') {
-    _style = { ...defaultStyle, ...style };
-  }
-  obj2css(el, _style);
-};
diff --git a/packages/ui/src/utils/store.ts b/packages/ui/src/utils/store.ts
deleted file mode 100644
index 2bf6460..0000000
--- a/packages/ui/src/utils/store.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createStore } from 'zustand/vanilla';
-
-export { createStore };
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index cea3ee7..df92285 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,23 +1,36 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": [
+      "ES2020",
       "DOM",
-      "ESNext"
+      "DOM.Iterable"
     ],
-    "moduleResolution": "Node",
-    "declaration": true,
-    "esModuleInterop": true,
+    "module": "ESNext",
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src"
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
+    "src",
   ]
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32d4335..ad1295c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,7 +6,14 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    devDependencies:
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
 
   packages/codemirror:
     devDependencies:
@@ -152,26 +159,29 @@ importers:
         version: 1.0.8
     devDependencies:
       '@emotion/serialize':
-        specifier: ^1.3.1
-        version: 1.3.1
+        specifier: ^1.3.2
+        version: 1.3.2
+      '@kevisual/system-ui':
+        specifier: ^0.0.2
+        version: 0.0.2(rollup@4.24.3)(typescript@5.6.3)
       '@rollup/plugin-commonjs':
         specifier: ^28.0.1
-        version: 28.0.1(rollup@4.22.2)
+        version: 28.0.1(rollup@4.24.3)
       '@rollup/plugin-node-resolve':
-        specifier: ^15.2.3
-        version: 15.2.3(rollup@4.22.2)
+        specifier: ^15.3.0
+        version: 15.3.0(rollup@4.24.3)
       '@rollup/plugin-terser':
         specifier: ^0.4.4
-        version: 0.4.4(rollup@4.22.2)
+        version: 0.4.4(rollup@4.24.3)
       '@rollup/plugin-typescript':
-        specifier: ^11.1.6
-        version: 11.1.6(rollup@4.22.2)(tslib@2.7.0)(typescript@5.6.2)
+        specifier: ^12.1.1
+        version: 12.1.1(rollup@4.24.3)(tslib@2.7.0)(typescript@5.6.3)
       '@types/postcss-import':
         specifier: ^14.0.3
         version: 14.0.3
       '@types/react':
-        specifier: ^18.3.8
-        version: 18.3.8
+        specifier: ^18.3.12
+        version: 18.3.12
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.47)
@@ -185,14 +195,14 @@ importers:
         specifier: ^10.1.1
         version: 10.1.1
       nanoid:
-        specifier: ^5.0.7
-        version: 5.0.7
+        specifier: ^5.0.8
+        version: 5.0.8
       postcss-import:
         specifier: ^16.1.0
         version: 16.1.0(postcss@8.4.47)
       rollup:
-        specifier: ^4.22.2
-        version: 4.22.2
+        specifier: ^4.24.3
+        version: 4.24.3
       rollup-plugin-postcss:
         specifier: ^4.0.2
         version: 4.0.2(postcss@8.4.47)
@@ -200,11 +210,11 @@ importers:
         specifier: ^0.0.5
         version: 0.0.5
       typescript:
-        specifier: ^5.6.2
-        version: 5.6.2
+        specifier: ^5.6.3
+        version: 5.6.3
       zustand:
-        specifier: 5.0.0-rc.2
-        version: 5.0.0-rc.2(@types/react@18.3.8)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1))
+        specifier: 5.0.1
+        version: 5.0.1(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1))
 
 packages:
 
@@ -389,8 +399,8 @@ packages:
   '@emotion/memoize@0.9.0':
     resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/serialize@1.3.1':
-    resolution: {integrity: sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==}
+  '@emotion/serialize@1.3.2':
+    resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
 
   '@emotion/unitless@0.10.0':
     resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
@@ -398,8 +408,8 @@ packages:
   '@emotion/unitless@0.7.5':
     resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
 
-  '@emotion/utils@1.4.0':
-    resolution: {integrity: sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==}
+  '@emotion/utils@1.4.1':
+    resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
 
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
@@ -602,6 +612,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@kevisual/system-ui@0.0.2':
+    resolution: {integrity: sha512-frKAb/JSkIrLIAco0YqcmKn3tDsnp7J98jlyCymgY7ZMUY2nEw8EUGRutWG4SZhhARgmT0yFwvaf0cAUPGIz9Q==}
+
   '@lezer/common@1.2.1':
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
 
@@ -710,6 +723,15 @@ packages:
       rollup:
         optional: true
 
+  '@rollup/plugin-node-resolve@15.3.0':
+    resolution: {integrity: sha512-9eO5McEICxMzJpDW9OnMYSv4Sta3hmt7VtBFz5zR9273suNOydOyq/FrGeGy+KsTRFm8w0SLVhzig2ILFT63Ag==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/plugin-terser@0.4.4':
     resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==}
     engines: {node: '>=14.0.0'}
@@ -732,6 +754,19 @@ packages:
       tslib:
         optional: true
 
+  '@rollup/plugin-typescript@12.1.1':
+    resolution: {integrity: sha512-t7O653DpfB5MbFrqPe/VcKFFkvRuFNp9qId3xq4Eth5xlyymzxNpye2z8Hrl0RIMuXTSr5GGcFpkdlMeacUiFQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^2.14.0||^3.0.0||^4.0.0
+      tslib: '*'
+      typescript: '>=3.7.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      tslib:
+        optional: true
+
   '@rollup/pluginutils@5.1.0':
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -746,90 +781,189 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@rollup/rollup-android-arm-eabi@4.24.3':
+    resolution: {integrity: sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==}
+    cpu: [arm]
+    os: [android]
+
   '@rollup/rollup-android-arm64@4.22.2':
     resolution: {integrity: sha512-I+B1v0a4iqdS9DvYt1RJZ3W+Oh9EVWjbY6gp79aAYipIbxSLEoQtFQlZEnUuwhDXCqMxJ3hluxKAdPD+GiluFQ==}
     cpu: [arm64]
     os: [android]
 
+  '@rollup/rollup-android-arm64@4.24.3':
+    resolution: {integrity: sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==}
+    cpu: [arm64]
+    os: [android]
+
   '@rollup/rollup-darwin-arm64@4.22.2':
     resolution: {integrity: sha512-BTHO7rR+LC67OP7I8N8GvdvnQqzFujJYWo7qCQ8fGdQcb8Gn6EQY+K1P+daQLnDCuWKbZ+gHAQZuKiQkXkqIYg==}
     cpu: [arm64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-arm64@4.24.3':
+    resolution: {integrity: sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rollup/rollup-darwin-x64@4.22.2':
     resolution: {integrity: sha512-1esGwDNFe2lov4I6GsEeYaAMHwkqk0IbuGH7gXGdBmd/EP9QddJJvTtTF/jv+7R8ZTYPqwcdLpMTxK8ytP6k6Q==}
     cpu: [x64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-x64@4.24.3':
+    resolution: {integrity: sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.24.3':
+    resolution: {integrity: sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.24.3':
+    resolution: {integrity: sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rollup/rollup-linux-arm-gnueabihf@4.22.2':
     resolution: {integrity: sha512-GBHuY07x96OTEM3OQLNaUSUwrOhdMea/LDmlFHi/HMonrgF6jcFrrFFwJhhe84XtA1oK/Qh4yFS+VMREf6dobg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.3':
+    resolution: {integrity: sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-arm-musleabihf@4.22.2':
     resolution: {integrity: sha512-Dbfa9Sc1G1lWxop0gNguXOfGhaXQWAGhZUcqA0Vs6CnJq8JW/YOw/KvyGtQFmz4yDr0H4v9X248SM7bizYj4yQ==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-arm-musleabihf@4.24.3':
+    resolution: {integrity: sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-arm64-gnu@4.22.2':
     resolution: {integrity: sha512-Z1YpgBvFYhZIyBW5BoopwSg+t7yqEhs5HCei4JbsaXnhz/eZehT18DaXl957aaE9QK7TRGFryCAtStZywcQe1A==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-arm64-gnu@4.24.3':
+    resolution: {integrity: sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-arm64-musl@4.22.2':
     resolution: {integrity: sha512-66Zszr7i/JaQ0u/lefcfaAw16wh3oT72vSqubIMQqWzOg85bGCPhoeykG/cC5uvMzH80DQa2L539IqKht6twVA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-arm64-musl@4.24.3':
+    resolution: {integrity: sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.22.2':
     resolution: {integrity: sha512-HpJCMnlMTfEhwo19bajvdraQMcAq3FX08QDx3OfQgb+414xZhKNf3jNvLFYKbbDSGBBrQh5yNwWZrdK0g0pokg==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.3':
+    resolution: {integrity: sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-riscv64-gnu@4.22.2':
     resolution: {integrity: sha512-/egzQzbOSRef2vYCINKITGrlwkzP7uXRnL+xU2j75kDVp3iPdcF0TIlfwTRF8woBZllhk3QaxNOEj2Ogh3t9hg==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-riscv64-gnu@4.24.3':
+    resolution: {integrity: sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-s390x-gnu@4.22.2':
     resolution: {integrity: sha512-qgYbOEbrPfEkH/OnUJd1/q4s89FvNJQIUldx8X2F/UM5sEbtkqZpf2s0yly2jSCKr1zUUOY1hnTP2J1WOzMAdA==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-s390x-gnu@4.24.3':
+    resolution: {integrity: sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-x64-gnu@4.22.2':
     resolution: {integrity: sha512-a0lkvNhFLhf+w7A95XeBqGQaG0KfS3hPFJnz1uraSdUe/XImkp/Psq0Ca0/UdD5IEAGoENVmnYrzSC9Y2a2uKQ==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
+  '@rollup/rollup-linux-x64-gnu@4.24.3':
+    resolution: {integrity: sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@rollup/rollup-linux-x64-musl@4.22.2':
     resolution: {integrity: sha512-sSWBVZgzwtsuG9Dxi9kjYOUu/wKW+jrbzj4Cclabqnfkot8Z3VEHcIgyenA3lLn/Fu11uDviWjhctulkhEO60g==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
+  '@rollup/rollup-linux-x64-musl@4.24.3':
+    resolution: {integrity: sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@rollup/rollup-win32-arm64-msvc@4.22.2':
     resolution: {integrity: sha512-t/YgCbZ638R/r7IKb9yCM6nAek1RUvyNdfU0SHMDLOf6GFe/VG1wdiUAsxTWHKqjyzkRGg897ZfCpdo1bsCSsA==}
     cpu: [arm64]
     os: [win32]
 
+  '@rollup/rollup-win32-arm64-msvc@4.24.3':
+    resolution: {integrity: sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==}
+    cpu: [arm64]
+    os: [win32]
+
   '@rollup/rollup-win32-ia32-msvc@4.22.2':
     resolution: {integrity: sha512-kTmX5uGs3WYOA+gYDgI6ITkZng9SP71FEMoHNkn+cnmb9Zuyyay8pf0oO5twtTwSjNGy1jlaWooTIr+Dw4tIbw==}
     cpu: [ia32]
     os: [win32]
 
+  '@rollup/rollup-win32-ia32-msvc@4.24.3':
+    resolution: {integrity: sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==}
+    cpu: [ia32]
+    os: [win32]
+
   '@rollup/rollup-win32-x64-msvc@4.22.2':
     resolution: {integrity: sha512-Yy8So+SoRz8I3NS4Bjh91BICPOSVgdompTIPYTByUqU66AXSIOgmW3Lv1ke3NORPqxdF+RdrZET+8vYai6f4aA==}
     cpu: [x64]
     os: [win32]
 
+  '@rollup/rollup-win32-x64-msvc@4.24.3':
+    resolution: {integrity: sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==}
+    cpu: [x64]
+    os: [win32]
+
   '@tailwindcss/aspect-ratio@0.4.2':
     resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
     peerDependencies:
@@ -859,6 +993,9 @@ packages:
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+
   '@types/node@22.5.5':
     resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==}
 
@@ -871,6 +1008,9 @@ packages:
   '@types/react-dom@18.3.0':
     resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
 
+  '@types/react@18.3.12':
+    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
+
   '@types/react@18.3.8':
     resolution: {integrity: sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==}
 
@@ -1436,6 +1576,11 @@ packages:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
+  glob@11.0.0:
+    resolution: {integrity: sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -1542,6 +1687,10 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jackspeak@4.0.2:
+    resolution: {integrity: sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==}
+    engines: {node: 20 || >=22}
+
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -1629,6 +1778,10 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lru-cache@11.0.2:
+    resolution: {integrity: sha512-123qHRfJBmo2jXDbo/a5YOQrJoHF/GNQTLzQ5+IdK5pWpceK17yRc6ozlWd25FxvGKQbIUs91fDFkXmDHTKcyA==}
+    engines: {node: 20 || >=22}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1652,6 +1805,10 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1679,6 +1836,11 @@ packages:
     engines: {node: ^18 || >=20}
     hasBin: true
 
+  nanoid@5.0.8:
+    resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -1754,6 +1916,10 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+
   picocolors@1.1.0:
     resolution: {integrity: sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==}
 
@@ -2502,6 +2668,13 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  rollup-plugin-dts@6.1.1:
+    resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      rollup: ^3.29.4 || ^4
+      typescript: ^4.5 || ^5.0
+
   rollup-plugin-postcss@4.0.2:
     resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
     engines: {node: '>=10'}
@@ -2516,6 +2689,11 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rollup@4.24.3:
+    resolution: {integrity: sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
@@ -2726,6 +2904,11 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@5.6.3:
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -2828,8 +3011,8 @@ packages:
       react:
         optional: true
 
-  zustand@5.0.0-rc.2:
-    resolution: {integrity: sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==}
+  zustand@5.0.1:
+    resolution: {integrity: sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==}
     engines: {node: '>=12.20.0'}
     peerDependencies:
       '@types/react': '>=18.0.0'
@@ -3100,19 +3283,19 @@ snapshots:
 
   '@emotion/memoize@0.9.0': {}
 
-  '@emotion/serialize@1.3.1':
+  '@emotion/serialize@1.3.2':
     dependencies:
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
       '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.0
+      '@emotion/utils': 1.4.1
       csstype: 3.1.3
 
   '@emotion/unitless@0.10.0': {}
 
   '@emotion/unitless@0.7.5': {}
 
-  '@emotion/utils@1.4.0': {}
+  '@emotion/utils@1.4.1': {}
 
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
@@ -3255,6 +3438,17 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@kevisual/system-ui@0.0.2(rollup@4.24.3)(typescript@5.6.3)':
+    dependencies:
+      dayjs: 1.11.13
+      glob: 11.0.0
+      lodash-es: 4.17.21
+      rollup-plugin-dts: 6.1.1(rollup@4.24.3)(typescript@5.6.3)
+      style-to-object: 1.0.8
+    transitivePeerDependencies:
+      - rollup
+      - typescript
+
   '@lezer/common@1.2.1': {}
 
   '@lezer/highlight@1.2.1':
@@ -3363,9 +3557,9 @@ snapshots:
 
   '@remix-run/router@1.19.2': {}
 
-  '@rollup/plugin-commonjs@28.0.1(rollup@4.22.2)':
+  '@rollup/plugin-commonjs@28.0.1(rollup@4.24.3)':
     dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.2)
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.3)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.4.2(picomatch@4.0.2)
@@ -3373,7 +3567,7 @@ snapshots:
       magic-string: 0.30.12
       picomatch: 4.0.2
     optionalDependencies:
-      rollup: 4.22.2
+      rollup: 4.24.3
 
   '@rollup/plugin-node-resolve@15.2.3(rollup@4.22.2)':
     dependencies:
@@ -3386,13 +3580,23 @@ snapshots:
     optionalDependencies:
       rollup: 4.22.2
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.22.2)':
+  '@rollup/plugin-node-resolve@15.3.0(rollup@4.24.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.3)
+      '@types/resolve': 1.20.2
+      deepmerge: 4.3.1
+      is-module: 1.0.0
+      resolve: 1.22.8
+    optionalDependencies:
+      rollup: 4.24.3
+
+  '@rollup/plugin-terser@0.4.4(rollup@4.24.3)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.36.0
     optionalDependencies:
-      rollup: 4.22.2
+      rollup: 4.24.3
 
   '@rollup/plugin-typescript@11.1.6(rollup@4.22.2)(tslib@2.7.0)(typescript@5.6.2)':
     dependencies:
@@ -3403,6 +3607,15 @@ snapshots:
       rollup: 4.22.2
       tslib: 2.7.0
 
+  '@rollup/plugin-typescript@12.1.1(rollup@4.24.3)(tslib@2.7.0)(typescript@5.6.3)':
+    dependencies:
+      '@rollup/pluginutils': 5.1.0(rollup@4.24.3)
+      resolve: 1.22.8
+      typescript: 5.6.3
+    optionalDependencies:
+      rollup: 4.24.3
+      tslib: 2.7.0
+
   '@rollup/pluginutils@5.1.0(rollup@4.22.2)':
     dependencies:
       '@types/estree': 1.0.5
@@ -3411,54 +3624,116 @@ snapshots:
     optionalDependencies:
       rollup: 4.22.2
 
+  '@rollup/pluginutils@5.1.0(rollup@4.24.3)':
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 4.24.3
+
   '@rollup/rollup-android-arm-eabi@4.22.2':
     optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.24.3':
+    optional: true
+
   '@rollup/rollup-android-arm64@4.22.2':
     optional: true
 
+  '@rollup/rollup-android-arm64@4.24.3':
+    optional: true
+
   '@rollup/rollup-darwin-arm64@4.22.2':
     optional: true
 
+  '@rollup/rollup-darwin-arm64@4.24.3':
+    optional: true
+
   '@rollup/rollup-darwin-x64@4.22.2':
     optional: true
 
+  '@rollup/rollup-darwin-x64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.24.3':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-arm-gnueabihf@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-arm-musleabihf@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-arm-musleabihf@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-arm64-gnu@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-arm64-gnu@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-arm64-musl@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-arm64-musl@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-powerpc64le-gnu@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-gnu@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-gnu@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-s390x-gnu@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-s390x-gnu@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-x64-gnu@4.24.3':
+    optional: true
+
   '@rollup/rollup-linux-x64-musl@4.22.2':
     optional: true
 
+  '@rollup/rollup-linux-x64-musl@4.24.3':
+    optional: true
+
   '@rollup/rollup-win32-arm64-msvc@4.22.2':
     optional: true
 
+  '@rollup/rollup-win32-arm64-msvc@4.24.3':
+    optional: true
+
   '@rollup/rollup-win32-ia32-msvc@4.22.2':
     optional: true
 
+  '@rollup/rollup-win32-ia32-msvc@4.24.3':
+    optional: true
+
   '@rollup/rollup-win32-x64-msvc@4.22.2':
     optional: true
 
+  '@rollup/rollup-win32-x64-msvc@4.24.3':
+    optional: true
+
   '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.12)':
     dependencies:
       tailwindcss: 3.4.12
@@ -3496,6 +3771,8 @@ snapshots:
 
   '@types/estree@1.0.5': {}
 
+  '@types/estree@1.0.6': {}
+
   '@types/node@22.5.5':
     dependencies:
       undici-types: 6.19.8
@@ -3510,6 +3787,11 @@ snapshots:
     dependencies:
       '@types/react': 18.3.8
 
+  '@types/react@18.3.12':
+    dependencies:
+      '@types/prop-types': 15.7.13
+      csstype: 3.1.3
+
   '@types/react@18.3.8':
     dependencies:
       '@types/prop-types': 15.7.13
@@ -4239,6 +4521,15 @@ snapshots:
       package-json-from-dist: 1.0.0
       path-scurry: 1.11.1
 
+  glob@11.0.0:
+    dependencies:
+      foreground-child: 3.3.0
+      jackspeak: 4.0.2
+      minimatch: 10.0.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.0
+      path-scurry: 2.0.0
+
   globals@11.12.0: {}
 
   globals@14.0.0: {}
@@ -4320,6 +4611,10 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jackspeak@4.0.2:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+
   jiti@1.21.6: {}
 
   js-tokens@4.0.0: {}
@@ -4383,6 +4678,8 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@11.0.2: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -4404,6 +4701,10 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  minimatch@10.0.1:
+    dependencies:
+      brace-expansion: 2.0.1
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.11
@@ -4426,6 +4727,8 @@ snapshots:
 
   nanoid@5.0.7: {}
 
+  nanoid@5.0.8: {}
+
   natural-compare@1.4.0: {}
 
   node-releases@2.0.18: {}
@@ -4489,6 +4792,11 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-scurry@2.0.0:
+    dependencies:
+      lru-cache: 11.0.2
+      minipass: 7.1.2
+
   picocolors@1.1.0: {}
 
   picomatch@2.3.1: {}
@@ -5274,6 +5582,14 @@ snapshots:
 
   reusify@1.0.4: {}
 
+  rollup-plugin-dts@6.1.1(rollup@4.24.3)(typescript@5.6.3):
+    dependencies:
+      magic-string: 0.30.12
+      rollup: 4.24.3
+      typescript: 5.6.3
+    optionalDependencies:
+      '@babel/code-frame': 7.24.7
+
   rollup-plugin-postcss@4.0.2(postcss@8.4.47):
     dependencies:
       chalk: 4.1.2
@@ -5319,6 +5635,30 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.22.2
       fsevents: 2.3.3
 
+  rollup@4.24.3:
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.24.3
+      '@rollup/rollup-android-arm64': 4.24.3
+      '@rollup/rollup-darwin-arm64': 4.24.3
+      '@rollup/rollup-darwin-x64': 4.24.3
+      '@rollup/rollup-freebsd-arm64': 4.24.3
+      '@rollup/rollup-freebsd-x64': 4.24.3
+      '@rollup/rollup-linux-arm-gnueabihf': 4.24.3
+      '@rollup/rollup-linux-arm-musleabihf': 4.24.3
+      '@rollup/rollup-linux-arm64-gnu': 4.24.3
+      '@rollup/rollup-linux-arm64-musl': 4.24.3
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.24.3
+      '@rollup/rollup-linux-riscv64-gnu': 4.24.3
+      '@rollup/rollup-linux-s390x-gnu': 4.24.3
+      '@rollup/rollup-linux-x64-gnu': 4.24.3
+      '@rollup/rollup-linux-x64-musl': 4.24.3
+      '@rollup/rollup-win32-arm64-msvc': 4.24.3
+      '@rollup/rollup-win32-ia32-msvc': 4.24.3
+      '@rollup/rollup-win32-x64-msvc': 4.24.3
+      fsevents: 2.3.3
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
@@ -5539,6 +5879,8 @@ snapshots:
 
   typescript@5.6.2: {}
 
+  typescript@5.6.3: {}
+
   undici-types@6.19.8: {}
 
   update-browserslist-db@1.1.0(browserslist@4.23.3):
@@ -5603,9 +5945,9 @@ snapshots:
       immer: 10.1.1
       react: 18.3.1
 
-  zustand@5.0.0-rc.2(@types/react@18.3.8)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1)):
+  zustand@5.0.1(@types/react@18.3.12)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.2(react@18.3.1)):
     optionalDependencies:
-      '@types/react': 18.3.8
+      '@types/react': 18.3.12
       immer: 10.1.1
       react: 18.3.1
       use-sync-external-store: 1.2.2(react@18.3.1)
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..df92285
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": "./",
+    "types": [],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    /* Linting */
+    "strict": true,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+  ]
+}
\ No newline at end of file