wip

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./app/globals.css"
+}

app/api/auth/[...nextauth]/route.ts

@@ -1,2 +0,0 @@
-import { handlers } from "@/auth"
-export const { GET, POST } = handlers

app/page.tsx

@@ -1,20 +1,64 @@
+"use client";
+import { useState } from "react";
 import DraggablePanel from "@/components/DraggablePanel";
-import DraggableWidget from "@/components/DraggableWidget";
 import Logo from "@/components/Logo";
+import Preview from "@/components/Draggable/Preview";
+import Draggable from "@/components/Draggable/Draggable";
+import { useComponentsStore } from "@/hooks/useComponentsStore";
 
 export default function Home() {
+  const [isChangeSize, setIsSizeChangeSize] = useState(false);
+  const [isDraggable, setIsDraggable] = useState(false);
+  const [units, setUnit] = useComponentsStore([
+    {
+      id: "1",
+      x: 0,
+      y: 0,
+      width: 320,
+      height: 160,
+      component: ()=> <Logo />
+    },
+    {
+      id: "2",
+      x: 336,
+      y: 0,
+      width: 160,
+      height: 320,
+      component: ()=> <Logo />
+    },
+  ]);
+
   return (
-    <div className="w-screen h-screen p-4">
+    <div className="h-screen w-screen p-4">
-      <DraggablePanel draggable={true}>
+      <Preview x={400} y={234} width={234} height={234} />
-        <DraggableWidget draggable={false} x={0} y={0} w={10} h={10}>
+      <label className="swap">
-          <Logo />
+        <input
-        </DraggableWidget>
+          type="checkbox"
-        <DraggableWidget draggable={false} x={10} y={0} w={10} h={10}>
+          onChange={(e) => setIsSizeChangeSize(e.target.checked)}
-          <Logo />
+        />
-        </DraggableWidget>
+        <div className="swap-on">编辑</div>
-        <DraggableWidget draggable={false} x={0} y={10} w={10} h={10}>
+        <div className="swap-off">锁定</div>
-          <Logo />
+      </label>
-        </DraggableWidget>
+      <label className="swap">
+        <input
+          type="checkbox"
+          onChange={(e) => setIsDraggable(e.target.checked)}
+        />
+        <div className="swap-on">拖拽</div>
+        <div className="swap-off">锁定</div>
+      </label>
+      <DraggablePanel draggable={isDraggable}>
+        {units.map((item) => (
+          <Draggable
+            key={item.id}
+            id={item.id}
+            x={item.x}
+            y={item.y}
+            width={item.width}
+            height={item.height}
+            component={() => <Logo />}
+          />
+        ))}
       </DraggablePanel>
     </div>
   );

auth.ts

@@ -1,20 +0,0 @@
-import NextAuth, { CredentialsSignin } from "next-auth"
-import Credentials from "next-auth/providers/credentials"
- 
-class InvalidLoginError extends CredentialsSignin {
-  code = "Invalid identifier or password"
-}
-
-export const { handlers, signIn, signOut, auth } = NextAuth({
-    providers: [
-        Credentials({
-            credentials: {
-                username: { label: "Username" },
-                password: { label: "Password", type: "password" },
-            },
-            async authorize(credentials) {
-                throw new InvalidLoginError()
-            },
-        }),
-    ],
-})

components/Draggable/Draggable.tsx

@@ -0,0 +1,104 @@
+"use client";
+import "@/app/globals.css";
+import { useDraggable } from "@dnd-kit/core";
+import { ReactElement, useEffect, useRef, useState } from "react";
+import { nearestMultiple } from "./utils";
+
+export default function Draggable(props: DraggablePropsType) {
+  const targetRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 16, height: 16 });
+  const { id, component, data, x, y, width, height } = props;
+  const { attributes, listeners, setNodeRef, transform } = useDraggable({
+    id,
+  });
+
+  const style = transform
+    ? {
+        top: y,
+        left: x,
+        width: width,
+        height: height,
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: 0.6,
+      }
+    : {
+        top: y,
+        left: x,
+        width: width,
+        height: height,
+      };
+  useEffect(() => {
+    const element = targetRef.current;
+    if (!element) return;
+
+    // 创建 ResizeObserver 实例
+    let timer: any;
+    const observer = new ResizeObserver(
+      _.throttle((entries: any) => {
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          setSize({
+            width: nearestMultiple(width),
+            height: nearestMultiple(height),
+          });
+          if (timer) {
+            clearTimeout(timer);
+          }
+          // setIsResize(true);
+          timer = setTimeout(() => {
+            entry.target.style.width = nearestMultiple(width) + "px";
+            entry.target.style.height = nearestMultiple(height) + "px";
+            // syncSize(entry.contentRect, containerRef.current);
+            // setIsResize(false);
+          }, 150);
+        }
+      }, 30),
+    );
+
+    // 开始观察元素
+    observer.observe(element);
+
+    // 组件卸载时断开连接
+    return () => {
+      observer.disconnect();
+    };
+  }, []); // 空依赖数组确保只运行一次
+
+  const className = transform ? "shadow-xl absolute w-min min-w-[128px] min-h-[128px]" : "absolute w-min resize overflow-hidden min-w-[128px] min-h-[128px]";
+
+  return (
+    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+      <button
+        className="btn absolute top-1 right-1 z-50 btn-square btn-soft"
+        {...listeners}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 9h16.5m-16.5 6.75h16.5"
+          />
+        </svg>
+      </button>
+      {component && component(data??{})}
+    </div>
+  );
+}
+
+export type DraggablePropsType = {
+  id: string;
+  component: (data: Record<string, unknown>) => ReactElement;
+  data?: Record<string, unknown>;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

components/Draggable/Droppable.tsx

@@ -0,0 +1,14 @@
+"use client";
+import "@/app/globals.css";
+
+export default function Droppable() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gray-300 text-5xl font-bold text-gray-900">
+      <span className="whitespace-nowrap md:whitespace-normal">NEXUSHUB</span>
+    </div>
+  );
+}
+
+export type DroppablePropsType = {
+  
+}

components/Draggable/Preview.tsx

@@ -0,0 +1,35 @@
+"use client";
+import "@/app/globals.css";
+import { CSSProperties, useEffect, useState } from "react";
+
+export default function Preview(props: PreviewPropsType) {
+  const {x, y, width, height} = props;
+  const [style, setStyle] = useState<CSSProperties>({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    setStyle({
+      top: x,
+      left: y,
+      width: width,
+      height: height,
+    });
+  }, [height, props, width, x, y])
+  return (
+    <div
+      className="absolute border-2 border-emerald-500 bg-gradient-to-br from-emerald-100/30 to-cyan-100/30 backdrop-blur-[2px] rounded-lg shadow-lg shadow-emerald-200/50 animate-pulse"
+      style={style}
+    ></div>
+  );
+}
+
+export type PreviewPropsType = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};

components/Draggable/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 计算最接近的 x 的倍数
+ * @param n 输入的数字
+ * @param [x=16] 推荐使用偶数
+ * @returns 最近的 x 的倍数
+ */
+export function nearestMultiple(n: number, x: number = 16): number {
+  return Math.floor((n + x/2) / x) * x;
+}

components/DraggableOld.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+
+export function Draggable(props) {
+  const { id } = props;
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({
+      id,
+    });
+  const style = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: 0.6,
+      }
+    : undefined;
+  const className = transform ? "z-30 shadow-xl relative w-min " : "z-10 relative w-min";
+
+  return (
+    <div className={className} ref={setNodeRef} style={style} {...attributes}>
+      <button
+        className="btn absolute top-1 right-1 z-20 btn-square btn-soft"
+        {...listeners}
+        onMouseDown={(e) => e.stopPropagation()} // 阻止事件冒泡
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3.75 9h16.5m-16.5 6.75h16.5"
+          />
+        </svg>
+      </button>
+      {props.children}
+    </div>
+  );
+}

components/DraggablePanel.tsx

@@ -1,25 +1,26 @@
 "use client";
-import { ReactElement } from 'react';
+import classnames from "classnames";
-import classnames from 'classnames';
+import { DndContext } from "@dnd-kit/core";
+import { Droppable } from "./Droppable";
 
 export default function DraggablePanel(props: DraggablePanelType) {
-  const { draggable, wdith = 'full', height = 'full', children } = props;
+  const { draggable, wdith = "full", height = "full", children } = props;
 
   const draggablePanelClass = classnames(
-  'p-8 grid gap-[16px]', 
+    `relative h-${height} w-${wdith}`,
-  `h-${height} w-${wdith}`,  
+    {
-  {
+      "h-full": height === "full" || height === "100%",
-    'h-full': height === 'full' || height === '100%',
+      "w-full": wdith === "full" || wdith === "100%",
-    'w-full': wdith === 'full' || wdith === '100%',
+      "base-200": draggable, // 当 active 为 true 时添加
-    'base-200': draggable,     // 当 active 为 true 时添加
+      "base-100": !draggable, // 当 disabled 为 true 时添加
-    'base-100': !draggable, // 当 disabled 为 true 时添加
+    },
-  });
+  );
   return (
-    <div className={draggablePanelClass}>
+    <DndContext >
-      {
+      <Droppable>
-        children
+        <div className={draggablePanelClass}>{children}</div>
-      }
+      </Droppable>
-    </div>
+    </DndContext>
   );
 }
 
@@ -29,4 +30,4 @@ export type DraggablePanelType = {
   height?: number | string;
   children: any;
   // grid: boolean;
-}
+};

components/DraggableWidget.tsx

@@ -1,11 +1,11 @@
 "use client";
-import { CSSProperties, ReactElement, useEffect, useRef, useState } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
-import classnames from 'classnames';
+import classnames from "classnames";
-import _ from 'lodash';
+import _ from "lodash";
-
+import { Draggable } from "./Draggable";
 
 export default function DraggableWidget(props: DraggableWidgetType) {
-  const { children, x, y, w, h } = props;
+  const { id, draggable, children, x, y, w, h } = props;
   const targetRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -17,38 +17,39 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     if (!element) return;
 
     // 创建 ResizeObserver 实例
-    let timer:any;
+    let timer: any;
-    const observer = new ResizeObserver(_.throttle((entries: any) => {
+    const observer = new ResizeObserver(
-      for (const entry of entries) {
+      _.throttle((entries: any) => {
-        const { width, height } = entry.contentRect;
+        for (const entry of entries) {
-        setSize({
+          const { width, height } = entry.contentRect;
-          width: nearestMultipleOf16(width),
+          setSize({
-          height: nearestMultipleOf16(height)
+            width: nearestMultipleOf16(width),
-        });
+            height: nearestMultipleOf16(height),
-        if (timer) {
+          });
-          clearTimeout(timer);
+          if (timer) {
+            clearTimeout(timer);
+          }
+          setIsResize(true);
+          timer = setTimeout(() => {
+            entry.target.style.width = nearestMultipleOf16(width) + "px";
+            entry.target.style.height = nearestMultipleOf16(height) + "px";
+            // syncSize(entry.contentRect, containerRef.current);
+            setIsResize(false);
+          }, 150);
         }
-        setIsResize(true);
+      }, 30),
-        timer = setTimeout(() => {
+    );
-          entry.target.style.width = nearestMultipleOf16(width) + 'px';
-          entry.target.style.height = nearestMultipleOf16(height) + 'px';
-          // syncSize(entry.contentRect, containerRef.current);
-          setIsResize(false);
-        }, 150)
-      }
-    }, 30));
-
 
     const syncSize = (contentRect, containerNode) => {
       const { x, y, height, width } = contentRect;
       const area = {
-        rowStart: x/16 + 1,
+        rowStart: x / 16 + 1,
-        columnStart: y/16 + 1,
+        columnStart: y / 16 + 1,
-        rowEnd: width/16+x/16 + 1,
+        rowEnd: width / 16 + x / 16 + 1,
-        columnEnd: height/16+y/16 + 1
+        columnEnd: height / 16 + y / 16 + 1,
-      }
+      };
       containerNode.style.gridArea = `${area.rowStart} / ${area.columnStart} / ${area.rowEnd} / ${area.columnEnd}`;
-    }
+    };
 
     // 开始观察元素
     observer.observe(element);
@@ -59,36 +60,50 @@ export default function DraggableWidget(props: DraggableWidgetType) {
     };
   }, []); // 空依赖数组确保只运行一次
 
-
   const draggableWidgetClass = classnames(
-    'hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize block rounded-lg w-64 h-64 max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden ', {
+    "block w-full h-full max-h-[1048px] max-w-[1888px] cursor-pointer overflow-hidden",
-  }
+    {
+      "hover:bg-red-200 hover:outline-2 hover:outline-dashed hover:outline-gray-300 hover:opacity-30 resize":
+        draggable,
+    },
   );
 
   const draggableWidgetIndicatorBoxClass = classnames(
-    'absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none',
+    "absolute top-0 left-0 outline-2 outline-dashed outline-red-500 z-50 pointer-events-none",
     {
-      'invisible': !isResize
+      invisible: !isResize,
-    }
+    },
   );
 
   return (
-    <div className="relative" ref={containerRef} style={{ gridArea: `${x} \ ${w+x} \ ${y} \ ${h+y}`}}>
+    <Draggable id={id}>
-      <div className={draggableWidgetClass} ref={targetRef}>
+      <div
-        {
+        className="relative w-min"
-          children
+        ref={containerRef}
-        }
+        style={{ 
+          width: w,
+          height: h,
+          top: y,
+          left: x
+         }}
+      >
+        <div className={draggableWidgetClass} ref={targetRef}>
+          {children}
+        </div>
+        <div
+          className={draggableWidgetIndicatorBoxClass}
+          style={{
+            width: size.width,
+            height: size.height,
+          }}
+        >{`${size.width}x${size.height}`}</div>
       </div>
-      <div className={draggableWidgetIndicatorBoxClass} style={{
+    </Draggable>
-        width: size.width,
-        height: size.height,
-      }
-      }>{`${size.width}x${size.height}`}</div>
-    </div>
   );
 }
 
 export type DraggableWidgetType = {
+  id: string;
   draggable: boolean;
   wdith?: number | string;
   height?: number | string;
@@ -97,7 +112,7 @@ export type DraggableWidgetType = {
   y: number;
   w: number;
   h: number;
-}
+};
 
 /**
  * 计算最接近的 16 的倍数

components/Droppable.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {useDroppable} from '@dnd-kit/core';
+
+export function Droppable(props) {
+  const {isOver, setNodeRef} = useDroppable({
+    id: 'droppable',
+  });
+  const style = {
+    color: isOver ? 'green' : undefined,
+  };
+  
+  
+  return (
+    <div ref={setNodeRef} style={style}>
+      {props.children}
+    </div>
+  );
+}

components/Logo.tsx

@@ -1,9 +0,0 @@
-import "@/app/globals.css";
-export default function Home() {
-    return (
-      <div className="w-full h-full text-5xl font-bold text-gray-900 flex items-center justify-center">
-        NEXUSHUB
-      </div>
-    );
-  }
-  

components/Logo/index.tsx

@@ -0,0 +1,12 @@
+"use client";
+import "@/app/globals.css";
+
+export default function Logo() {
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-gray-300 text-5xl font-bold text-gray-900">
+      <span className="whitespace-nowrap md:whitespace-normal">
+        NEXUSHUB
+      </span>
+    </div>
+  );
+}

middleware.ts

@@ -1 +0,0 @@
-export { auth as middleware } from "@/auth"

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@heroicons/react": "^2.2.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "next": "15.2.3",
@@ -26,6 +27,8 @@
     "daisyui": "^5.0.6",
     "eslint": "^9",
     "eslint-config-next": "15.2.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.0.14",
     "typescript": "^5"
   }

pnpm-lock.yaml

@@ -11,12 +11,21 @@ importers:
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@heroicons/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react@19.0.0)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      mobx:
+        specifier: ^6.13.7
+        version: 6.13.7
+      mobx-react-lite:
+        specifier: ^4.1.0
+        version: 4.1.0(mobx@6.13.7)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       next:
         specifier: 15.2.3
         version: 15.2.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -54,6 +63,12 @@ importers:
       eslint-config-next:
         specifier: 15.2.3
         version: 15.2.3(eslint@9.22.0(jiti@2.4.2))(typescript@5.8.2)
+      prettier:
+        specifier: ^3.5.3
+        version: 3.5.3
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.11
+        version: 0.6.11(prettier@3.5.3)
       tailwindcss:
         specifier: ^4.0.14
         version: 4.0.14
@@ -144,6 +159,11 @@ packages:
     resolution: {integrity: sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@heroicons/react@2.2.0':
+    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    peerDependencies:
+      react: '>= 16 || ^19.0.0-rc'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -190,67 +210,79 @@ packages:
     resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.0.5':
     resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.0.4':
     resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.0.4':
     resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.33.5':
     resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.33.5':
     resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.33.5':
     resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.33.5':
     resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
     resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.33.5':
     resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.33.5':
     resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -295,24 +327,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@15.2.3':
     resolution: {integrity: sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-linux-x64-gnu@15.2.3':
     resolution: {integrity: sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-x64-musl@15.2.3':
     resolution: {integrity: sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@15.2.3':
     resolution: {integrity: sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==}
@@ -395,24 +431,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.0.14':
     resolution: {integrity: sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.0.14':
     resolution: {integrity: sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.0.14':
     resolution: {integrity: sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-win32-arm64-msvc@4.0.14':
     resolution: {integrity: sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg==}
@@ -530,21 +570,25 @@ packages:
     resolution: {integrity: sha512-RfYtlCtJrv5i6TO4dSlpbyOJX9Zbhmkqrr9hjDfr6YyE5KD0ywLRzw8UjXsohxG1XWgRpb2tvPuRYtURJwbqWg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/rspack-resolver-binding-linux-arm64-musl@1.1.2':
     resolution: {integrity: sha512-MaITzkoqsn1Rm3+YnplubgAQEfOt+2jHfFvuFhXseUfcfbxe8Zyc3TM7LKwgv7mRVjIl+/yYN5JqL0cjbnhAnQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/rspack-resolver-binding-linux-x64-gnu@1.1.2':
     resolution: {integrity: sha512-Nu981XmzQqis/uB3j4Gi3p5BYCd/zReU5zbJmjMrEH7IIRH0dxZpdOmS/+KwEk6ao7Xd8P2D2gDHpHD/QTp0aQ==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/rspack-resolver-binding-linux-x64-musl@1.1.2':
     resolution: {integrity: sha512-xJupeDvaRpV0ADMuG1dY9jkOjhUzTqtykvchiU2NldSD+nafSUcMWnoqzNUx7HGiqbTMOw9d9xT8ZiFs+6ZFyQ==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/rspack-resolver-binding-wasm32-wasi@1.1.2':
     resolution: {integrity: sha512-un6X/xInks+KEgGpIHFV8BdoODHRohaDRvOwtjq+FXuoI4Ga0P6sLRvf4rPSZDvoMnqUhZtVNG0jG9oxOnrrLQ==}
@@ -1258,24 +1302,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.29.2:
     resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.29.2:
     resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.29.2:
     resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.29.2:
     resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
@@ -1329,6 +1377,22 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  mobx-react-lite@4.1.0:
+    resolution: {integrity: sha512-QEP10dpHHBeQNv1pks3WnHRCem2Zp636lq54M2nKO2Sarr13pL4u6diQXf65yzXUn0mkk18SyIDCm9UOJYTi1w==}
+    peerDependencies:
+      mobx: ^6.9.0
+      react: ^16.8.0 || ^17 || ^18 || ^19
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
+  mobx@6.13.7:
+    resolution: {integrity: sha512-aChaVU/DO5aRPmk1GX8L+whocagUUpBQqoPtJk+cm7UOXUk87J4PeWCh6nNmTTIfEhiR9DI/+FnA8dln/hTK7g==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1478,6 +1542,66 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.11:
+    resolution: {integrity: sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.5.3:
+    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@3.8.0:
     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
 
@@ -1729,6 +1853,11 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-sync-external-store@1.4.0:
+    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -1850,6 +1979,10 @@ snapshots:
       '@eslint/core': 0.12.0
       levn: 0.4.1
 
+  '@heroicons/react@2.2.0(react@19.0.0)':
+    dependencies:
+      react: 19.0.0
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -3133,6 +3266,16 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  mobx-react-lite@4.1.0(mobx@6.13.7)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      mobx: 6.13.7
+      react: 19.0.0
+      use-sync-external-store: 1.4.0(react@19.0.0)
+    optionalDependencies:
+      react-dom: 19.0.0(react@19.0.0)
+
+  mobx@6.13.7: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.10: {}
@@ -3276,6 +3419,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.11(prettier@3.5.3):
+    dependencies:
+      prettier: 3.5.3
+
+  prettier@3.5.3: {}
+
   pretty-format@3.8.0: {}
 
   prop-types@15.8.1:
@@ -3615,6 +3764,10 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-sync-external-store@1.4.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0