@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/dist/providers/shared-data/SharedDataChangeEvent.d.ts

@@ -0,0 +1,5 @@
+export declare const SharedDataChangeEvent: import("@simplysm/service-common").ServiceEventDef<{
+    name: string;
+    filter: unknown;
+}, (string | number)[] | undefined>;
+//# sourceMappingURL=SharedDataChangeEvent.d.ts.map

package/dist/providers/shared-data/SharedDataChangeEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedDataChangeEvent.d.ts","sourceRoot":"","sources":["../../../src/providers/shared-data/SharedDataChangeEvent.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;UAAuB,MAAM;YAAU,OAAO;mCAE/E,CAAC"}

package/dist/providers/shared-data/SharedDataChangeEvent.js

@@ -1,7 +1,7 @@
-import { ServiceEventListener } from "@simplysm/service-common";
-class SharedDataChangeEvent extends ServiceEventListener {
-  eventName = "SharedDataChangeEvent";
-}
+import { defineEvent } from "@simplysm/service-common";
+const SharedDataChangeEvent = defineEvent(
+  "SharedDataChangeEvent"
+);
 export {
   SharedDataChangeEvent
 };

package/dist/providers/shared-data/SharedDataChangeEvent.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/providers/shared-data/SharedDataChangeEvent.ts"],
-  "sourcesContent": ["import { ServiceEventListener } from \"@simplysm/service-common\";\n\nexport class SharedDataChangeEvent extends ServiceEventListener<\n  { name: string; filter: unknown },\n  (string | number)[] | undefined\n> {\n  readonly eventName = \"SharedDataChangeEvent\";\n}\n"],
-  "mappings": "AAAA,SAAS,4BAA4B;AAE9B,MAAM,8BAA8B,qBAGzC;AAAA,EACS,YAAY;AACvB;",
+  "mappings": "AAAA,SAAS,mBAAmB;AAErB,MAAM,wBAAwB;AAAA,EACnC;AACF;",
   "names": []
 }

package/dist/providers/shared-data/SharedDataContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedDataContext.d.ts","sourceRoot":"","sources":["../../../src/providers/shared-data/SharedDataContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAA6B,MAAM,UAAU,CAAC;AAEpE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;IACrB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,CAAC,GAAG,SAAS,CAAC;IACzD,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;KAC9D,CAAC,IAAI,MAAM,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACzC,GAAG;IACF,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,kFAA4D,CAAC;AAE3F,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,eAAe,CAAC,CAAC,CAAC,CAQ/G"}

package/dist/providers/shared-data/SharedDataContext.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/providers/shared-data/SharedDataContext.ts"],
-  "sourcesContent": ["import { type Accessor, createContext, useContext } from \"solid-js\";\n\nexport interface SharedDataDefinition<T> {\n  serviceKey: string;\n  fetch: (changeKeys?: Array<string | number>) => Promise<T[]>;\n  getKey: (item: T) => string | number;\n  orderBy: [(item: T) => unknown, \"asc\" | \"desc\"][];\n  filter?: unknown;\n}\n\nexport interface SharedDataAccessor<T> {\n  items: Accessor<T[]>;\n  get: (key: string | number | undefined) => T | undefined;\n  emit: (changeKeys?: Array<string | number>) => Promise<void>;\n}\n\nexport type SharedDataValue<T extends Record<string, unknown>> = {\n  [K in keyof T]: SharedDataAccessor<T[K]>;\n} & {\n  wait: () => Promise<void>;\n  loading: Accessor<boolean>;\n};\n\nexport const SharedDataContext = createContext<SharedDataValue<Record<string, unknown>>>();\n\nexport function useSharedData<T extends Record<string, unknown> = Record<string, unknown>>(): SharedDataValue<T> {\n  const context = useContext(SharedDataContext);\n  if (!context) {\n    throw new Error(\n      \"useSharedData\uB294 SharedDataProvider \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. SharedDataProvider\uB294 ServiceClientProvider \uC544\uB798\uC5D0 \uC704\uCE58\uD574\uC57C \uD569\uB2C8\uB2E4\",\n    );\n  }\n  return context as unknown as SharedDataValue<T>;\n}\n"],
   "mappings": "AAAA,SAAwB,eAAe,kBAAkB;AAuBlD,MAAM,oBAAoB,cAAwD;AAElF,SAAS,gBAAiG;AAC/G,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/providers/shared-data/SharedDataProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedDataProvider.d.ts","sourceRoot":"","sources":["../../../src/providers/shared-data/SharedDataProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAuC,MAAM,UAAU,CAAC;AAExF,OAAO,EAGL,KAAK,oBAAoB,EAE1B,MAAM,qBAAqB,CAAC;AAM7B,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE;IAC3E,WAAW,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAAE,CAAC;IAC5D,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAuId"}

package/dist/providers/shared-data/SharedDataProvider.js

@@ -1,14 +1,15 @@
+import { createComponent as _$createComponent } from "solid-js/web";
 import { createMemo, createSignal, onCleanup } from "solid-js";
 import { objEqual, waitUntil } from "@simplysm/core-common";
-import {
-  SharedDataContext
-} from "./SharedDataContext";
-import { SharedDataChangeEvent } from "./SharedDataChangeEvent";
-import { useServiceClient } from "../ServiceClientContext";
-import { useNotification } from "../../components/feedback/notification/NotificationContext";
+import { SharedDataContext } from "./SharedDataContext.js";
+import { SharedDataChangeEvent } from "./SharedDataChangeEvent.js";
+import { useServiceClient } from "../ServiceClientContext.js";
+import { useNotification } from "../../components/feedback/notification/NotificationContext.js";
+import { useLogger } from "../../hooks/useLogger.js";
 function SharedDataProvider(props) {
   const serviceClient = useServiceClient();
   const notification = useNotification();
+  const logger = useLogger();
   const [loadingCount, setLoadingCount] = createSignal(0);
   const loading = () => loadingCount() > 0;
   const signalMap = /* @__PURE__ */ new Map();
@@ -47,10 +48,8 @@ function SharedDataProvider(props) {
         });
       }
     } catch (err) {
-      notification.danger(
-        "\uACF5\uC720 \uB370\uC774\uD130 \uB85C\uB4DC \uC2E4\uD328",
-        err instanceof Error ? err.message : `'${name}' \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.`
-      );
+      logger.error(`SharedData '${name}' fetch failed:`, err);
+      notification.danger("\uACF5\uC720 \uB370\uC774\uD130 \uB85C\uB4DC \uC2E4\uD328", err instanceof Error ? err.message : `'${name}' \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.`);
     } finally {
       setLoadingCount((c) => c - 1);
     }
@@ -71,7 +70,10 @@ function SharedDataProvider(props) {
     });
     memoMap.set(name, itemMap);
     const client = serviceClient.get(def.serviceKey);
-    void client.addEventListener(SharedDataChangeEvent, { name, filter: def.filter }, async (changeKeys) => {
+    void client.addEventListener(SharedDataChangeEvent, {
+      name,
+      filter: def.filter
+    }, async (changeKeys) => {
       await loadData(name, def, changeKeys);
     }).then((key) => {
       listenerKeyMap.set(name, key);
@@ -84,11 +86,7 @@ function SharedDataProvider(props) {
         return itemMap().get(key);
       },
       emit: async (changeKeys) => {
-        await client.emitToServer(
-          SharedDataChangeEvent,
-          (info) => info.name === name && objEqual(info.filter, def.filter),
-          changeKeys
-        );
+        await client.emitToServer(SharedDataChangeEvent, (info) => info.name === name && objEqual(info.filter, def.filter), changeKeys);
       }
     };
   }
@@ -107,7 +105,12 @@ function SharedDataProvider(props) {
     wait,
     loading
   };
-  return /* @__PURE__ */ React.createElement(SharedDataContext.Provider, { value: contextValue }, props.children);
+  return _$createComponent(SharedDataContext.Provider, {
+    value: contextValue,
+    get children() {
+      return props.children;
+    }
+  });
 }
 export {
   SharedDataProvider

package/dist/providers/shared-data/SharedDataProvider.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/providers/shared-data/SharedDataProvider.tsx"],
-  "sourcesContent": ["import { type Accessor, type JSX, createMemo, createSignal, onCleanup } from \"solid-js\";\nimport { objEqual, waitUntil } from \"@simplysm/core-common\";\nimport {\n  SharedDataContext,\n  type SharedDataAccessor,\n  type SharedDataDefinition,\n  type SharedDataValue,\n} from \"./SharedDataContext\";\nimport { SharedDataChangeEvent } from \"./SharedDataChangeEvent\";\nimport { useServiceClient } from \"../ServiceClientContext\";\nimport { useNotification } from \"../../components/feedback/notification/NotificationContext\";\n\nexport function SharedDataProvider<T extends Record<string, unknown>>(props: {\n  definitions: { [K in keyof T]: SharedDataDefinition<T[K]> };\n  children: JSX.Element;\n}): JSX.Element {\n  const serviceClient = useServiceClient();\n  const notification = useNotification();\n\n  const [loadingCount, setLoadingCount] = createSignal(0);\n  const loading: Accessor<boolean> = () => loadingCount() > 0;\n\n  const signalMap = new Map<string, ReturnType<typeof createSignal<unknown[]>>>();\n  const memoMap = new Map<string, Accessor<Map<string | number, unknown>>>();\n  const listenerKeyMap = new Map<string, string>();\n  const versionMap = new Map<string, number>();\n\n  function ordering<TT>(data: TT[], orderByList: [(item: TT) => unknown, \"asc\" | \"desc\"][]): TT[] {\n    let result = [...data];\n    for (const orderBy of [...orderByList].reverse()) {\n      const selector = (item: TT) => orderBy[0](item) as string | number | undefined;\n      if (orderBy[1] === \"desc\") {\n        result = result.orderByDesc(selector);\n      } else {\n        result = result.orderBy(selector);\n      }\n    }\n    return result;\n  }\n\n  async function loadData(\n    name: string,\n    def: SharedDataDefinition<unknown>,\n    changeKeys?: Array<string | number>,\n  ): Promise<void> {\n    // CR-1: version counter\uB85C \uB3D9\uC2DC \uD638\uCD9C \uC2DC \uB370\uC774\uD130 \uC5ED\uC804 \uBC29\uC9C0\n    const currentVersion = (versionMap.get(name) ?? 0) + 1;\n    versionMap.set(name, currentVersion);\n\n    setLoadingCount((c) => c + 1);\n    try {\n      const signal = signalMap.get(name);\n      if (!signal) throw new Error(`'${name}'\uC5D0 \uB300\uD55C \uACF5\uC720\uB370\uC774\uD130 \uC800\uC7A5\uC18C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.`);\n\n      const [, setItems] = signal;\n      const resData = await def.fetch(changeKeys);\n\n      // CR-1: \uC624\uB798\uB41C \uC751\uB2F5\uC740 \uBB34\uC2DC\n      if (versionMap.get(name) !== currentVersion) return;\n\n      if (!changeKeys) {\n        setItems(ordering(resData, def.orderBy));\n      } else {\n        setItems((prev) => {\n          const filtered = prev.filter((item) => !changeKeys.includes(def.getKey(item as never)));\n          filtered.push(...resData);\n          return ordering(filtered, def.orderBy);\n        });\n      }\n    } catch (err) {\n      // CR-2: fetch \uC2E4\uD328 \uC2DC \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC54C\uB9BC\n      notification.danger(\n        \"\uACF5\uC720 \uB370\uC774\uD130 \uB85C\uB4DC \uC2E4\uD328\",\n        err instanceof Error ? err.message : `'${name}' \uB370\uC774\uD130\uB97C \uBD88\uB7EC\uC624\uB294 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.`,\n      );\n    } finally {\n      setLoadingCount((c) => c - 1);\n    }\n  }\n\n  async function wait(): Promise<void> {\n    // eslint-disable-next-line solid/reactivity -- waitUntil\uC740 \uD3F4\uB9C1 \uAE30\uBC18\uC774\uBBC0\uB85C tracked scope \uBD88\uD544\uC694\n    await waitUntil(() => loadingCount() <= 0);\n  }\n\n  const accessors: Record<string, SharedDataAccessor<unknown>> = {};\n\n  // eslint-disable-next-line solid/reactivity -- definitions\uB294 \uCD08\uAE30 \uC124\uC815\uC6A9\uC73C\uB85C \uB9C8\uC6B4\uD2B8 \uC2DC 1\uD68C\uB9CC \uC77D\uC74C\n  for (const [name, def] of Object.entries(props.definitions) as [string, SharedDataDefinition<unknown>][]) {\n    const [items, setItems] = createSignal<unknown[]>([]);\n    // eslint-disable-next-line solid/reactivity -- signal \uCC38\uC870\uB97C Map\uC5D0 \uC800\uC7A5\uD558\uB294 \uAC83\uC740 \uBC18\uC751\uC131 \uC811\uADFC\uC774 \uC544\uB2D8\n    signalMap.set(name, [items, setItems]);\n\n    const itemMap = createMemo(() => {\n      const map = new Map<string | number, unknown>();\n      for (const item of items()) {\n        map.set(def.getKey(item as never), item);\n      }\n      return map;\n    });\n    // eslint-disable-next-line solid/reactivity -- memo \uCC38\uC870\uB97C Map\uC5D0 \uC800\uC7A5\uD558\uB294 \uAC83\uC740 \uBC18\uC751\uC131 \uC811\uADFC\uC774 \uC544\uB2D8\n    memoMap.set(name, itemMap);\n\n    const client = serviceClient.get(def.serviceKey);\n    void client\n      .addEventListener(SharedDataChangeEvent, { name, filter: def.filter }, async (changeKeys) => {\n        await loadData(name, def, changeKeys);\n      })\n      .then((key) => {\n        listenerKeyMap.set(name, key);\n      });\n\n    void loadData(name, def);\n\n    accessors[name] = {\n      items,\n      get: (key: string | number | undefined) => {\n        if (key === undefined) return undefined;\n        return itemMap().get(key);\n      },\n      emit: async (changeKeys?: Array<string | number>) => {\n        await client.emitToServer(\n          SharedDataChangeEvent,\n          (info) => info.name === name && objEqual(info.filter, def.filter),\n          changeKeys,\n        );\n      },\n    };\n  }\n\n  onCleanup(() => {\n    for (const [name] of Object.entries(props.definitions)) {\n      const listenerKey = listenerKeyMap.get(name);\n      if (listenerKey != null) {\n        const def = (props.definitions as Record<string, SharedDataDefinition<unknown>>)[name];\n        const client = serviceClient.get(def.serviceKey);\n        void client.removeEventListener(listenerKey);\n      }\n    }\n  });\n\n  const contextValue = {\n    ...accessors,\n    wait,\n    loading,\n  } as SharedDataValue<Record<string, unknown>>;\n\n  return <SharedDataContext.Provider value={contextValue}>{props.children}</SharedDataContext.Provider>;\n}\n"],
-  "mappings": "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",
-  "names": []
+  "mappings": "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",
+  "names": ["createMemo", "createSignal", "onCleanup", "objEqual", "waitUntil", "SharedDataContext", "SharedDataChangeEvent", "useServiceClient", "useNotification", "useLogger", "SharedDataProvider", "props", "serviceClient", "notification", "logger", "loadingCount", "setLoadingCount", "loading", "signalMap", "Map", "memoMap", "listenerKeyMap", "versionMap", "ordering", "data", "orderByList", "result", "orderBy", "reverse", "selector", "item", "orderByDesc", "loadData", "name", "def", "changeKeys", "currentVersion", "get", "set", "c", "signal", "Error", "setItems", "resData", "fetch", "prev", "filtered", "filter", "includes", "getKey", "push", "err", "error", "danger", "message", "wait", "accessors", "Object", "entries", "definitions", "items", "itemMap", "map", "client", "serviceKey", "addEventListener", "then", "key", "undefined", "emit", "emitToServer", "info", "listenerKey", "removeEventListener", "contextValue", "_$createComponent", "Provider", "value", "children"]
 }

package/dist/styles/patterns.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patterns.styles.d.ts","sourceRoot":"","sources":["../../src/styles/patterns.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,QAI7B,CAAC;AAGF,eAAO,MAAM,qBAAqB,QAIjC,CAAC;AAGF,eAAO,MAAM,SAAS,oCAAoC,CAAC;AAG3D,eAAO,MAAM,YAAY,QAOxB,CAAC;AAGF,eAAO,MAAM,SAAS,QAA4E,CAAC"}

package/dist/styles/patterns.styles.js

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { bgSurface, borderDefault, textDefault, textPlaceholder } from "./tokens.styles";
+import { bgSurface, borderDefault, textDefault, textPlaceholder } from "./tokens.styles.js";
 const insetFocusOutline = clsx(
   "focus-within:[outline-style:solid]",
   "focus-within:outline-1 focus-within:-outline-offset-1",

package/dist/styles/patterns.styles.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/styles/patterns.styles.ts"],
-  "sourcesContent": ["import clsx from \"clsx\";\nimport { bgSurface, borderDefault, textDefault, textPlaceholder } from \"./tokens.styles\";\n\n// \u2500\u2500 inset \uD3EC\uCEE4\uC2A4 \uC544\uC6C3\uB77C\uC778 (focus-within \uBC84\uC804: Field, TextArea) \u2500\u2500\nexport const insetFocusOutline = clsx(\n  \"focus-within:[outline-style:solid]\",\n  \"focus-within:outline-1 focus-within:-outline-offset-1\",\n  \"focus-within:outline-primary-400 dark:focus-within:outline-primary-400\",\n);\n\n// \u2500\u2500 inset \uD3EC\uCEE4\uC2A4 \uC544\uC6C3\uB77C\uC778 (focus \uBC84\uC804: Checkbox, Select trigger) \u2500\u2500\nexport const insetFocusOutlineSelf = clsx(\n  \"focus:[outline-style:solid]\",\n  \"focus:outline-1 focus:-outline-offset-1\",\n  \"focus:outline-primary-400 dark:focus:outline-primary-400\",\n);\n\n// \u2500\u2500 inset \uAE30\uBCF8 \uB808\uC774\uC544\uC6C3 \u2500\u2500\nexport const insetBase = \"w-full rounded-none border-none\";\n\n// \u2500\u2500 \uD3FC \uD544\uB4DC \uACF5\uD1B5 \uD45C\uBA74 (\uBC30\uACBD + \uD14D\uC2A4\uD2B8 + \uD14C\uB450\uB9AC + \uD3EC\uCEE4\uC2A4) \u2500\u2500\nexport const fieldSurface = clsx(\n  bgSurface,\n  textDefault,\n  \"border\",\n  borderDefault,\n  \"rounded\",\n  \"focus-within:border-primary-500\",\n);\n\n// \u2500\u2500 \uC785\uB825 \uC694\uC18C \uACF5\uD1B5 \u2500\u2500\nexport const inputBase = clsx(\"min-w-0 flex-1\", \"bg-transparent\", \"outline-none\", textPlaceholder);\n"],
   "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,WAAW,eAAe,aAAa,uBAAuB;AAGhE,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,YAAY;AAGlB,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,YAAY,KAAK,kBAAkB,kBAAkB,gBAAgB,eAAe;",
   "names": []
 }

package/dist/styles/tokens.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.styles.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.styles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa,yCAAyC,CAAC;AACpE,eAAO,MAAM,YAAY,yCAAyC,CAAC;AAGnE,eAAO,MAAM,SAAS,8BAA8B,CAAC;AAGrD,eAAO,MAAM,WAAW,qCAAqC,CAAC;AAC9D,eAAO,MAAM,SAAS,qCAAqC,CAAC;AAC5D,eAAO,MAAM,eAAe,6DAA6D,CAAC;AAG1F,eAAO,MAAM,eAAe,kDAAkD,CAAC;AAG/E,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AACxC,eAAO,MAAM,SAAS,kBAAkB,CAAC;AACzC,eAAO,MAAM,SAAS,cAAc,CAAC;AAGrC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3F,eAAO,MAAM,WAAW,EAAE,MAAM,CAC9B,aAAa,EACb;IACE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAkDF,CAAC"}

package/dist/styles/tokens.styles.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/styles/tokens.styles.ts"],
-  "sourcesContent": ["// \u2500\u2500 \uD14C\uB450\uB9AC \u2500\u2500\nexport const borderDefault = \"border-base-300 dark:border-base-700\";\nexport const borderSubtle = \"border-base-200 dark:border-base-800\";\n\n// \u2500\u2500 \uD45C\uBA74 \uBC30\uACBD \u2500\u2500\nexport const bgSurface = \"bg-white dark:bg-base-900\";\n\n// \u2500\u2500 \uD14D\uC2A4\uD2B8 \u2500\u2500\nexport const textDefault = \"text-base-900 dark:text-base-100\";\nexport const textMuted = \"text-base-400 dark:text-base-500\";\nexport const textPlaceholder = \"placeholder:text-base-400 dark:placeholder:text-base-500\";\n\n// \u2500\u2500 disabled \u2500\u2500\nexport const disabledOpacity = \"cursor-default opacity-50 pointer-events-none\";\n\n// \u2500\u2500 \uC0AC\uC774\uC988 \u2500\u2500\nexport type ComponentSize = \"sm\" | \"lg\";\nexport const paddingSm = \"px-1.5 py-0.5\";\nexport const paddingLg = \"px-3 py-2\";\n\n// \u2500\u2500 \uD14C\uB9C8 \u2500\u2500\nexport type SemanticTheme = \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"base\";\n\nexport const themeTokens: Record<\n  SemanticTheme,\n  {\n    solid: string;\n    solidHover: string;\n    light: string;\n    text: string;\n    hoverBg: string;\n    border: string;\n  }\n> = {\n  primary: {\n    solid: \"bg-primary-500 text-white\",\n    solidHover: \"hover:bg-primary-600 dark:hover:bg-primary-400\",\n    light: \"bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100\",\n    text: \"text-primary-600 dark:text-primary-400\",\n    hoverBg: \"hover:bg-primary-100 dark:hover:bg-primary-800/30\",\n    border: \"border-primary-300 dark:border-primary-600\",\n  },\n  info: {\n    solid: \"bg-info-500 text-white\",\n    solidHover: \"hover:bg-info-600 dark:hover:bg-info-400\",\n    light: \"bg-info-100 text-info-900 dark:bg-info-900/40 dark:text-info-100\",\n    text: \"text-info-600 dark:text-info-400\",\n    hoverBg: \"hover:bg-info-100 dark:hover:bg-info-800/30\",\n    border: \"border-info-300 dark:border-info-600\",\n  },\n  success: {\n    solid: \"bg-success-500 text-white\",\n    solidHover: \"hover:bg-success-600 dark:hover:bg-success-400\",\n    light: \"bg-success-100 text-success-900 dark:bg-success-900/40 dark:text-success-100\",\n    text: \"text-success-600 dark:text-success-400\",\n    hoverBg: \"hover:bg-success-100 dark:hover:bg-success-800/30\",\n    border: \"border-success-300 dark:border-success-600\",\n  },\n  warning: {\n    solid: \"bg-warning-500 text-white\",\n    solidHover: \"hover:bg-warning-600 dark:hover:bg-warning-400\",\n    light: \"bg-warning-100 text-warning-900 dark:bg-warning-900/40 dark:text-warning-100\",\n    text: \"text-warning-600 dark:text-warning-400\",\n    hoverBg: \"hover:bg-warning-100 dark:hover:bg-warning-800/30\",\n    border: \"border-warning-300 dark:border-warning-600\",\n  },\n  danger: {\n    solid: \"bg-danger-500 text-white\",\n    solidHover: \"hover:bg-danger-600 dark:hover:bg-danger-400\",\n    light: \"bg-danger-100 text-danger-900 dark:bg-danger-900/40 dark:text-danger-100\",\n    text: \"text-danger-600 dark:text-danger-400\",\n    hoverBg: \"hover:bg-danger-100 dark:hover:bg-danger-800/30\",\n    border: \"border-danger-300 dark:border-danger-600\",\n  },\n  base: {\n    solid: \"bg-base-500 text-white\",\n    solidHover: \"hover:bg-base-600 dark:hover:bg-base-400\",\n    light: \"bg-base-100 text-base-900 dark:bg-base-800 dark:text-base-100\",\n    text: \"text-base-600 dark:text-base-300\",\n    hoverBg: \"hover:bg-base-100 dark:hover:bg-base-800/30\",\n    border: \"border-base-300 dark:border-base-700\",\n  },\n};\n"],
   "mappings": "AACO,MAAM,gBAAgB;AACtB,MAAM,eAAe;AAGrB,MAAM,YAAY;AAGlB,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAIxB,MAAM,YAAY;AAClB,MAAM,YAAY;AAKlB,MAAM,cAUT;AAAA,EACF,SAAS;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AACF;",
   "names": []
 }

package/docs/data-components.md

@@ -0,0 +1,304 @@
+# Data Components
+
+## Table
+
+Basic HTML table wrapper. Provides consistent styling for borders, header backgrounds, etc.
+
+```tsx
+import { Table } from "@simplysm/solid";
+
+<Table>
+  <thead>
+    <tr><th>Name</th><th>Age</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>John Doe</td><td>30</td></tr>
+    <tr><td>Jane Smith</td><td>25</td></tr>
+  </tbody>
+</Table>
+
+// Inset style (removes outer border, fits parent container)
+<Table inset>...</Table>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `inset` | `boolean` | - | Inset style |
+
+---
+
+## DataSheet
+
+Advanced data table component. Supports sorting, pagination, row selection, tree expansion, column resize, column configuration, drag-and-drop reordering, and persistent column settings.
+
+```tsx
+import { DataSheet } from "@simplysm/solid";
+
+// Basic usage
+<DataSheet items={users()} persistKey="user-table">
+  <DataSheet.Column key="name" header="Name" sortable class="px-2 py-1">
+    {({ item }) => <>{item.name}</>}
+  </DataSheet.Column>
+  <DataSheet.Column key="age" header="Age" sortable width="80px" class="px-2 py-1">
+    {({ item }) => <>{item.age}</>}
+  </DataSheet.Column>
+  <DataSheet.Column key="email" header="Email" class="px-2 py-1">
+    {({ item }) => <>{item.email}</>}
+  </DataSheet.Column>
+</DataSheet>
+
+// With pagination + sorting + selection
+<DataSheet
+  items={data()}
+  persistKey="data-table"
+  pageIndex={pageIndex()}
+  onPageIndexChange={setPageIndex}
+  itemsPerPage={20}
+  totalPageCount={totalPages()}
+  sorts={sorts()}
+  onSortsChange={setSorts}
+  selectMode="multiple"
+  selectedItems={selectedItems()}
+  onSelectedItemsChange={setSelectedItems}
+>
+  {/* columns */}
+</DataSheet>
+
+// Tree structure with expansion
+<DataSheet
+  items={treeData()}
+  persistKey="tree-table"
+  getChildren={(item) => item.children}
+  expandedItems={expanded()}
+  onExpandedItemsChange={setExpanded}
+>
+  {/* columns */}
+</DataSheet>
+
+// Auto-select on row click + drag reorder
+<DataSheet
+  items={items()}
+  persistKey="reorder-table"
+  autoSelect="click"
+  selectMode="single"
+  selectedItems={selected()}
+  onSelectedItemsChange={setSelected}
+  onItemsReorder={(e) => {
+    // e: { item: T, targetItem: T, position: "before" | "after" | "inside" }
+    reorderItems(e);
+  }}
+>
+  {/* columns */}
+</DataSheet>
+```
+
+**DataSheet Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | - | Data array |
+| `persistKey` | `string` | - | Column configuration localStorage key |
+| `class` | `string` | - | CSS class |
+| `contentStyle` | `JSX.CSSProperties \| string` | - | Scroll area style |
+| `inset` | `boolean` | - | Inset style |
+| `hideConfigBar` | `boolean` | - | Hide config bar and pagination |
+| `sorts` | `SortingDef[]` | - | Sort state (`{ key: string; desc: boolean }[]`) |
+| `onSortsChange` | `(sorts: SortingDef[]) => void` | - | Sort change callback |
+| `autoSort` | `boolean` | - | Client-side auto-sorting |
+| `pageIndex` | `number` | - | Current page index (0-based) |
+| `onPageIndexChange` | `(pageIndex: number) => void` | - | Page change callback |
+| `totalPageCount` | `number` | - | Total page count |
+| `itemsPerPage` | `number` | - | Items per page |
+| `displayPageCount` | `number` | - | Number of page buttons to display |
+| `selectMode` | `"single" \| "multiple"` | - | Selection mode |
+| `selectedItems` | `T[]` | - | Selected items |
+| `onSelectedItemsChange` | `(items: T[]) => void` | - | Selection change callback |
+| `autoSelect` | `"click"` | - | Auto-select row on click |
+| `isItemSelectable` | `(item: T) => boolean \| string` | - | Item selectability (string returns tooltip) |
+| `getChildren` | `(item: T, index: number) => T[] \| undefined` | - | Tree structure children getter |
+| `expandedItems` | `T[]` | - | Expanded tree items |
+| `onExpandedItemsChange` | `(items: T[]) => void` | - | Expansion state change callback |
+| `cellClass` | `(item: T, colKey: string) => string \| undefined` | - | Dynamic cell class function |
+| `cellStyle` | `(item: T, colKey: string) => string \| undefined` | - | Dynamic cell style function |
+| `onItemsReorder` | `(event: DataSheetReorderEvent<T>) => void` | - | Drag reorder handler (shows drag handle when set) |
+
+`DataSheetReorderEvent<T>`: `{ item: T; targetItem: T; position: "before" | "after" | "inside" }`
+
+**DataSheet.Column Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `key` | `string` | **(required)** | Column identifier key |
+| `header` | `string \| string[]` | - | Header text (array for multi-level headers) |
+| `headerContent` | `() => JSX.Element` | - | Custom header rendering |
+| `headerStyle` | `string` | - | Header style |
+| `summary` | `() => JSX.Element` | - | Summary row rendering |
+| `tooltip` | `string` | - | Header tooltip |
+| `width` | `string` | - | Column width (e.g., `"100px"`, `"10rem"`) |
+| `class` | `string` | - | Cell CSS class |
+| `fixed` | `boolean` | `false` | Fixed column |
+| `hidden` | `boolean` | `false` | Hidden column |
+| `collapse` | `boolean` | `false` | Hidden in config modal |
+| `sortable` | `boolean` | `true` | Sortable |
+| `resizable` | `boolean` | `true` | Resizable |
+| `children` | `(ctx: { item: T, index: number, depth: number }) => JSX.Element` | **(required)** | Cell rendering function |
+
+---
+
+## List
+
+Tree-view style list component. Supports keyboard navigation.
+
+```tsx
+import { List } from "@simplysm/solid";
+
+<List>
+  <List.Item>Item 1</List.Item>
+  <List.Item>Item 2</List.Item>
+  <List.Item>
+    Parent item
+    <List.Item.Children>
+      <List.Item>Child item 1</List.Item>
+      <List.Item>Child item 2</List.Item>
+    </List.Item.Children>
+  </List.Item>
+</List>
+
+// Inset style
+<List inset>
+  <List.Item>Inset item</List.Item>
+</List>
+```
+
+**Keyboard navigation:**
+- `ArrowUp` / `ArrowDown` -- Move focus to previous/next item
+- `Space` / `Enter` -- Click current item
+- `ArrowRight` -- Expand if collapsed, focus first child if expanded
+- `ArrowLeft` -- Collapse if expanded, focus parent if collapsed
+- `Home` / `End` -- Focus first/last item
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `inset` | `boolean` | - | Transparent background style |
+
+---
+
+## Pagination
+
+Page navigation component.
+
+```tsx
+import { Pagination } from "@simplysm/solid";
+
+<Pagination
+  page={currentPage()}
+  onPageChange={setCurrentPage}
+  totalPageCount={20}
+  displayPageCount={10}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `page` | `number` | **(required)** | Current page (0-based) |
+| `onPageChange` | `(page: number) => void` | - | Page change callback |
+| `totalPageCount` | `number` | **(required)** | Total page count |
+| `displayPageCount` | `number` | `10` | Number of pages to display at once |
+| `size` | `"sm" \| "lg"` | - | Size |
+
+---
+
+## Calendar
+
+Calendar-style data display component.
+
+```tsx
+import { Calendar } from "@simplysm/solid";
+
+<Calendar
+  items={events()}
+  getItemDate={(event) => event.date}
+  renderItem={(event) => <div>{event.title}</div>}
+  yearMonth={yearMonth()}
+  onYearMonthChange={setYearMonth}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | **(required)** | Data array |
+| `getItemDate` | `(item: T, index: number) => DateOnly` | **(required)** | Item date extraction function |
+| `renderItem` | `(item: T, index: number) => JSX.Element` | **(required)** | Item rendering function |
+| `yearMonth` | `DateOnly` | - | Year-month to display |
+| `onYearMonthChange` | `(value: DateOnly) => void` | - | Year-month change callback |
+| `weekStartDay` | `number` | `0` (Sunday) | Week start day |
+
+---
+
+## PermissionTable
+
+Hierarchical permission management table. Displays a tree of permission items with per-item checkboxes for each permission type. Supports cascading checks (parent toggles children) and permission dependencies (disabling the first permission disables the rest).
+
+```tsx
+import { createSignal } from "solid-js";
+import { type PermissionItem, PermissionTable } from "@simplysm/solid";
+
+const items: PermissionItem[] = [
+  {
+    title: "User Management",
+    href: "/user",
+    perms: ["use", "edit"],
+    children: [
+      { title: "Permission Settings", href: "/user/permission", perms: ["use", "edit", "approve"] },
+      { title: "User List", href: "/user/list", perms: ["use", "edit"] },
+    ],
+  },
+  {
+    title: "Board",
+    href: "/board",
+    perms: ["use", "edit"],
+    modules: ["community"],  // only shown when "community" module is active
+    children: [
+      { title: "Notice", href: "/board/notice", perms: ["use", "edit"] },
+      { title: "Free Board", href: "/board/free", perms: ["use"] },
+    ],
+  },
+];
+
+const [value, setValue] = createSignal<Record<string, boolean>>({});
+
+// Basic usage
+<PermissionTable items={items} value={value()} onValueChange={setValue} />
+
+// Filtered by module
+<PermissionTable items={items} value={value()} onValueChange={setValue} modules={["community"]} />
+
+// Disabled
+<PermissionTable items={items} value={value()} disabled />
+```
+
+The `value` record uses keys in `"{href}/{perm}"` format (e.g., `{ "/user/use": true, "/user/edit": false }`).
+
+**PermissionTable Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `PermissionItem<TModule>[]` | - | Permission tree structure |
+| `value` | `Record<string, boolean>` | - | Permission state record |
+| `onValueChange` | `(value: Record<string, boolean>) => void` | - | State change callback |
+| `modules` | `TModule[]` | - | Module filter (show only matching items) |
+| `disabled` | `boolean` | - | Disable all checkboxes |
+
+**PermissionItem type:**
+
+```typescript
+interface PermissionItem<TModule = string> {
+  title: string;                       // Display text
+  href?: string;                       // Permission path (used as value key prefix)
+  modules?: TModule[];                 // Modules this item belongs to
+  perms?: string[];                    // Permission types (e.g., ["use", "edit", "approve"])
+  children?: PermissionItem<TModule>[]; // Child items
+}
+```
+
+**Cascading behavior:** Checking a parent checks all children. Unchecking `perms[0]` (base permission) automatically unchecks all other permissions for that item.