@simplysm/solid 13.0.74 → 13.0.76

package/src/hooks/createControllableStore.ts

@@ -1,7 +1,7 @@
 import { createEffect } from "solid-js";
 import { createStore, reconcile, unwrap } from "solid-js/store";
 import type { SetStoreFunction } from "solid-js/store";
-import { objClone } from "@simplysm/core-common";
+import { objClone, objEqual } from "@simplysm/core-common";
 
 /**
  * Store hook that supports the controlled/uncontrolled pattern.
@@ -39,10 +39,9 @@ export function createControllableStore<TValue extends object>(options: {
 
   // Wrap setter with a function wrapper to add onChange notification
   const wrappedSet = ((...args: any[]) => {
-    const before = JSON.stringify(unwrap(store));
+    const before = objClone(unwrap(store));
     (rawSet as any)(...args);
-    const after = JSON.stringify(unwrap(store));
-    if (before !== after) {
+    if (!objEqual(before, unwrap(store))) {
       options.onChange()?.(objClone(unwrap(store)));
     }
   }) as SetStoreFunction<TValue>;

package/src/hooks/useLogger.ts

@@ -1,6 +1,6 @@
 import { useContext } from "solid-js";
 import { consola } from "consola";
-import { LoggerContext, type LogAdapter } from "../providers/LoggerContext";
+import { LoggerContext, type LogAdapter } from "../providers/LoggerProvider";
 
 type LogLevel = Parameters<LogAdapter["write"]>[0];
 

package/src/hooks/useSyncConfig.ts

@@ -1,6 +1,6 @@
 import { type Accessor, type Setter, createEffect, createSignal, untrack } from "solid-js";
 import { useConfig } from "../providers/ConfigContext";
-import { useSyncStorage } from "../providers/SyncStorageContext";
+import { useSyncStorage } from "../providers/SyncStorageProvider";
 
 /**
  * Creates a reactive signal that syncs configuration data to storage.

package/src/index.ts

@@ -41,9 +41,7 @@ export * from "./components/form-control/Invalid";
 export * from "./components/layout/FormGroup";
 export * from "./components/layout/FormTable";
 export * from "./components/layout/sidebar/Sidebar";
-export * from "./components/layout/sidebar/SidebarContext";
 export * from "./components/layout/topbar/Topbar";
-export * from "./components/layout/topbar/TopbarContext";
 
 //#endregion
 
@@ -59,7 +57,6 @@ export * from "./components/data/sheet/DataSheet.styles";
 export * from "./components/data/sheet/types";
 export * from "./components/data/calendar/Calendar";
 export * from "./components/data/kanban/Kanban";
-export * from "./components/data/kanban/KanbanContext";
 
 //#endregion
 
@@ -80,9 +77,6 @@ export * from "./components/display/Alert";
 export * from "./components/disclosure/Collapse";
 export * from "./components/disclosure/Dropdown";
 export * from "./components/disclosure/Dialog";
-export * from "./components/disclosure/DialogContext";
-export * from "./components/disclosure/DialogInstanceContext";
-export * from "./components/disclosure/DialogProvider";
 export * from "./components/disclosure/Tabs";
 
 //#endregion
@@ -90,19 +84,17 @@ export * from "./components/disclosure/Tabs";
 //#region ========== Feedback ==========
 
 // Notification
-export * from "./components/feedback/notification/NotificationContext";
+export * from "./components/feedback/notification/NotificationProvider";
 export * from "./components/feedback/notification/NotificationBell";
 export * from "./components/feedback/notification/NotificationBanner";
 
 // Busy
-export * from "./components/feedback/busy/BusyContext";
+export * from "./components/feedback/busy/BusyProvider";
 export * from "./components/feedback/busy/BusyContainer";
 
 // Print
-export * from "./components/feedback/print/PrintContext";
 export * from "./components/feedback/print/PrintProvider";
 export * from "./components/feedback/print/Print";
-export * from "./components/feedback/print/PrintInstanceContext";
 export * from "./components/feedback/Progress";
 
 //#endregion
@@ -113,27 +105,27 @@ export * from "./components/feedback/Progress";
 export * from "./providers/ConfigContext";
 
 // SyncStorage
-export * from "./providers/SyncStorageContext";
+export * from "./providers/SyncStorageProvider";
 
 // Logger
-export * from "./providers/LoggerContext";
+export * from "./providers/LoggerProvider";
 
 // Theme
 export * from "./providers/ThemeContext";
 
 // ServiceClient
-export * from "./providers/ServiceClientContext";
+export * from "./providers/ServiceClientProvider";
 
 // SharedData
-export * from "./providers/shared-data/SharedDataContext";
+export * from "./providers/shared-data/SharedDataProvider";
 export * from "./providers/shared-data/SharedDataChangeEvent";
 
 // SystemProvider
 export * from "./providers/SystemProvider";
 
 // I18n
-export * from "./providers/i18n/I18nContext";
-export * from "./providers/i18n/I18nContext.types";
+export * from "./providers/i18n/I18nProvider";
+export * from "./providers/i18n/I18nProvider.types";
 
 //#endregion
 
@@ -146,15 +138,16 @@ export * from "./hooks/createControllableSignal";
 export * from "./hooks/createControllableStore";
 export * from "./hooks/createIMEHandler";
 export * from "./hooks/createMountTransition";
-export * from "./hooks/createSlotSignal";
 export * from "./hooks/useRouterLink";
 
 //#endregion
 
 //#region ========== Styles ==========
 
-export * from "./styles/tokens.styles";
-export * from "./styles/patterns.styles";
+export * from "./styles/base.styles";
+export * from "./styles/control.styles";
+export * from "./styles/theme.styles";
+
 
 //#endregion
 
@@ -168,7 +161,8 @@ export * from "./directives/ripple";
 
 export * from "./helpers/mergeStyles";
 export * from "./helpers/createAppStructure";
-export * from "./helpers/createSlotComponent";
+export * from "./helpers/createSlot";
+export * from "./helpers/createSlots";
 
 //#endregion
 

package/src/providers/ConfigContext.tsx

@@ -40,7 +40,6 @@ export function useConfig(): AppConfig {
  */
 export const ConfigProvider: ParentComponent<{ clientName: string }> = (props) => {
   return (
-    // eslint-disable-next-line solid/reactivity -- clientName is an initial config value that does not change
     <ConfigContext.Provider value={{ clientName: props.clientName }}>
       {props.children}
     </ConfigContext.Provider>

package/src/providers/PwaUpdateProvider.tsx

@@ -1,5 +1,5 @@
 import { onCleanup, type ParentComponent } from "solid-js";
-import { useNotification } from "../components/feedback/notification/NotificationContext";
+import { useNotification } from "../components/feedback/notification/NotificationProvider";
 
 const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes
 

package/src/providers/ServiceClientProvider.tsx

@@ -1,12 +1,41 @@
-import { type ParentComponent, onCleanup } from "solid-js";
+import { createContext, type ParentComponent, onCleanup, useContext } from "solid-js";
 import {
   createServiceClient,
   type ServiceClient,
   type ServiceConnectionConfig,
 } from "@simplysm/service-client";
-import { ServiceClientContext, type ServiceClientContextValue } from "./ServiceClientContext";
 import { useConfig } from "./ConfigContext";
-import { useNotification } from "../components/feedback/notification/NotificationContext";
+import { useNotification } from "../components/feedback/notification/NotificationProvider";
+
+/**
+ * WebSocket service client context value.
+ */
+export interface ServiceClientContextValue {
+  /** Open a WebSocket connection (defaults to "default" if key is omitted) */
+  connect: (key?: string, options?: Partial<ServiceConnectionConfig>) => Promise<void>;
+  /** Close a connection */
+  close: (key?: string) => Promise<void>;
+  /** Get a connected client instance (throws if the key is not connected) */
+  get: (key?: string) => ServiceClient;
+  /** Check connection status */
+  isConnected: (key?: string) => boolean;
+}
+
+/** WebSocket service client Context */
+export const ServiceClientContext = createContext<ServiceClientContextValue>();
+
+/**
+ * Hook to access the WebSocket service client.
+ *
+ * @throws Throws an error if ServiceClientProvider is not present
+ */
+export function useServiceClient(): ServiceClientContextValue {
+  const context = useContext(ServiceClientContext);
+  if (!context) {
+    throw new Error("useServiceClient can only be used inside ServiceClientProvider");
+  }
+  return context;
+}
 
 /**
  * WebSocket service client Provider.
@@ -37,6 +66,31 @@ export const ServiceClientProvider: ParentComponent = (props) => {
   const reqProgressMap = new Map<string, string>();
   const resProgressMap = new Map<string, string>();
 
+  function handleProgress(
+    progressMap: Map<string, string>,
+    state: { uuid: string; completedSize: number; totalSize: number },
+    startTitle: string,
+    completeTitle: string,
+  ) {
+    const existing = progressMap.get(state.uuid);
+
+    if (existing == null) {
+      const id = notification.info(startTitle, "0%");
+      progressMap.set(state.uuid, id);
+    } else {
+      const percent = Math.round((state.completedSize / state.totalSize) * 100);
+      notification.update(existing, { message: `${percent}%` });
+    }
+
+    if (state.completedSize === state.totalSize) {
+      const id = progressMap.get(state.uuid);
+      if (id != null) {
+        notification.update(id, { title: completeTitle, message: "100%" }, { renotify: true });
+        progressMap.delete(state.uuid);
+      }
+    }
+  }
+
   onCleanup(() => {
     for (const client of clientMap.values()) {
       void client.close();
@@ -70,60 +124,12 @@ export const ServiceClientProvider: ParentComponent = (props) => {
       ...options,
     });
 
-    // Request progress event
     client.on("request-progress", (state) => {
-      const existing = reqProgressMap.get(state.uuid);
-
-      if (existing == null) {
-        const id = notification.info("Sending request", "0%");
-        reqProgressMap.set(state.uuid, id);
-      } else {
-        const percent = Math.round((state.completedSize / state.totalSize) * 100);
-        notification.update(existing, { message: `${percent}%` });
-      }
-
-      if (state.completedSize === state.totalSize) {
-        const id = reqProgressMap.get(state.uuid);
-        if (id != null) {
-          notification.update(
-            id,
-            {
-              title: "Request transmission completed",
-              message: "100%",
-            },
-            { renotify: true },
-          );
-          reqProgressMap.delete(state.uuid);
-        }
-      }
+      handleProgress(reqProgressMap, state, "Sending request", "Request transmission completed");
     });
 
-    // Response progress event
     client.on("response-progress", (state) => {
-      const existing = resProgressMap.get(state.uuid);
-
-      if (existing == null) {
-        const id = notification.info("Receiving response", "0%");
-        resProgressMap.set(state.uuid, id);
-      } else {
-        const percent = Math.round((state.completedSize / state.totalSize) * 100);
-        notification.update(existing, { message: `${percent}%` });
-      }
-
-      if (state.completedSize === state.totalSize) {
-        const id = resProgressMap.get(state.uuid);
-        if (id != null) {
-          notification.update(
-            id,
-            {
-              title: "Response reception completed",
-              message: "100%",
-            },
-            { renotify: true },
-          );
-          resProgressMap.delete(state.uuid);
-        }
-      }
+      handleProgress(resProgressMap, state, "Receiving response", "Response reception completed");
     });
 
     await client.connect();

package/src/providers/SystemProvider.tsx

@@ -1,8 +1,8 @@
 import { type ParentComponent } from "solid-js";
 import { ConfigProvider } from "./ConfigContext";
-import { I18nProvider } from "./i18n/I18nContext";
-import { SyncStorageProvider } from "./SyncStorageContext";
-import { LoggerProvider } from "./LoggerContext";
+import { I18nProvider } from "./i18n/I18nProvider";
+import { SyncStorageProvider } from "./SyncStorageProvider";
+import { LoggerProvider } from "./LoggerProvider";
 import { NotificationProvider } from "../components/feedback/notification/NotificationProvider";
 import { NotificationBanner } from "../components/feedback/notification/NotificationBanner";
 import { ErrorLoggerProvider } from "./ErrorLoggerProvider";
@@ -11,8 +11,7 @@ import { ClipboardProvider } from "./ClipboardProvider";
 import { ThemeProvider } from "./ThemeContext";
 import { ServiceClientProvider } from "./ServiceClientProvider";
 import { SharedDataProvider } from "./shared-data/SharedDataProvider";
-import { BusyProvider } from "../components/feedback/busy/BusyProvider";
-import type { BusyVariant } from "../components/feedback/busy/BusyContext";
+import { BusyProvider, type BusyVariant } from "../components/feedback/busy/BusyProvider";
 
 export type { BusyVariant };
 

package/src/providers/i18n/{I18nContext.tsx → I18nProvider.tsx}

@@ -5,7 +5,7 @@ import {
   createSignal,
   createMemo,
 } from "solid-js";
-import type { I18nContextValue, I18nConfigureOptions, FlatDict } from "./I18nContext.types";
+import type { I18nContextValue, I18nConfigureOptions, FlatDict } from "./I18nProvider.types";
 import { flattenDict, mergeDict, interpolate } from "./i18nUtils";
 import enDict from "./locales/en";
 import koDict from "./locales/ko";

package/src/providers/shared-data/SharedDataProvider.tsx

@@ -1,16 +1,100 @@
-import { type Accessor, type JSX, createMemo, createSignal, onCleanup } from "solid-js";
+import { type Accessor, type JSX, createContext, createMemo, createSignal, onCleanup, useContext } from "solid-js";
 import { objEqual, waitUntil } from "@simplysm/core-common";
-import {
-  SharedDataContext,
-  type SharedDataAccessor,
-  type SharedDataDefinition,
-  type SharedDataValue,
-} from "./SharedDataContext";
 import { SharedDataChangeEvent } from "./SharedDataChangeEvent";
-import { useServiceClient } from "../ServiceClientContext";
-import { useNotification } from "../../components/feedback/notification/NotificationContext";
+import { useServiceClient } from "../ServiceClientProvider";
+import { useNotification } from "../../components/feedback/notification/NotificationProvider";
 import { useLogger } from "../../hooks/useLogger";
 
+/**
+ * Shared data definition.
+ *
+ * @remarks
+ * Passed to SharedDataProvider to set up server data subscriptions.
+ */
+export interface SharedDataDefinition<TData> {
+  /** Service connection key (defaults to "default" if omitted) */
+  serviceKey?: string;
+  /** Data fetch function (partial refresh for specified changeKeys only) */
+  fetch: (changeKeys?: Array<string | number>) => Promise<TData[]>;
+  /** Function to extract the unique key from an item */
+  getKey: (item: TData) => string | number;
+  /** Sort criteria array (multiple criteria supported) */
+  orderBy: [(item: TData) => unknown, "asc" | "desc"][];
+  /** Server event filter (receives only events with matching filter among same-name events) */
+  filter?: unknown;
+  /** Function to extract search text from an item */
+  itemSearchText?: (item: TData) => string;
+  /** Function to determine if an item is hidden */
+  isItemHidden?: (item: TData) => boolean;
+  /** Function to extract parent key from an item (tree structure support) */
+  getParentKey?: (item: TData) => string | number | undefined;
+}
+
+/**
+ * Shared data accessor.
+ *
+ * @remarks
+ * Provides reactive access and change notifications for each data key.
+ */
+export interface SharedDataAccessor<TData> {
+  /** Reactive items array */
+  items: Accessor<TData[]>;
+  /** Get a single item by key */
+  get: (key: string | number | undefined) => TData | undefined;
+  /** Propagate change event to server (triggers refetch for all subscribers) */
+  emit: (changeKeys?: Array<string | number>) => Promise<void>;
+  /** Function to extract the unique key from an item */
+  getKey: (item: TData) => string | number;
+  /** Function to extract search text from an item */
+  itemSearchText?: (item: TData) => string;
+  /** Function to determine if an item is hidden */
+  isItemHidden?: (item: TData) => boolean;
+  /** Function to extract parent key from an item (tree structure support) */
+  getParentKey?: (item: TData) => string | number | undefined;
+}
+
+/**
+ * Shared data context value.
+ *
+ * @remarks
+ * - Before configure: only wait, busy, configure are accessible. Data access throws
+ * - After configure: includes SharedDataAccessor per data key and overall state management methods
+ */
+export type SharedDataValue<TSharedData extends Record<string, unknown>> = {
+  [K in keyof TSharedData]: SharedDataAccessor<TSharedData[K]>;
+} & {
+  /** Wait until all initial fetches complete */
+  wait: () => Promise<void>;
+  /** Whether a fetch is in progress */
+  busy: Accessor<boolean>;
+  /** Set definitions to start data subscriptions (decorator pattern) */
+  configure: (
+    fn: (origin: {
+      [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]>;
+    }) => {
+      [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]>;
+    },
+  ) => void;
+};
+
+/** Shared data Context */
+const SharedDataContext = createContext<SharedDataValue<Record<string, unknown>>>();
+
+/**
+ * Hook to access shared data.
+ *
+ * @throws Throws an error if SharedDataProvider is not present
+ */
+export function useSharedData<
+  TSharedData extends Record<string, unknown> = Record<string, unknown>,
+>(): SharedDataValue<TSharedData> {
+  const context = useContext(SharedDataContext);
+  if (!context) {
+    throw new Error("useSharedData can only be used inside SharedDataProvider");
+  }
+  return context as unknown as SharedDataValue<TSharedData>;
+}
+
 /**
  * Shared data Provider.
  *
@@ -110,7 +194,6 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
   }
 
   async function wait(): Promise<void> {
-    // eslint-disable-next-line solid/reactivity -- waitUntil is polling-based, so tracked scope is unnecessary
     await waitUntil(() => busyCount() <= 0);
   }
 
@@ -129,7 +212,6 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
 
     for (const [name, def] of Object.entries(definitions)) {
       const [items, setItems] = createSignal<unknown[]>([]);
-      // eslint-disable-next-line solid/reactivity -- Storing signal references in a Map is not a reactive access
       signalMap.set(name, [items, setItems]);
 
       const itemMap = createMemo(() => {
@@ -139,7 +221,6 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
         }
         return map;
       });
-      // eslint-disable-next-line solid/reactivity -- Storing memo references in a Map is not a reactive access
       memoMap.set(name, itemMap);
 
       const client = serviceClient.get(def.serviceKey ?? "default");
@@ -187,8 +268,8 @@ export function SharedDataProvider(props: { children: JSX.Element }): JSX.Elemen
           );
         },
         getKey: def.getKey,
-        getSearchText: def.getSearchText,
-        getIsHidden: def.getIsHidden,
+        itemSearchText: def.itemSearchText,
+        isItemHidden: def.isItemHidden,
         getParentKey: def.getParentKey,
       };
     }

package/src/styles/base.styles.ts

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+// ── Border ──
+export const border = {
+  default: clsx`border-base-200 dark:border-base-700`,
+  subtle: clsx`border-base-200 dark:border-base-700`,
+};
+
+// ── Background ──
+export const bg = {
+  surface: clsx`bg-white dark:bg-base-900`,
+  muted: clsx`bg-base-100 dark:bg-base-800`,
+  subtle: clsx`bg-base-200 dark:bg-base-700`,
+};
+
+// ── Text ──
+export const text = {
+  default: clsx`text-base-900 dark:text-base-100`,
+  muted: clsx`text-base-400 dark:text-base-500`,
+  placeholder: clsx`placeholder:text-base-400 dark:placeholder:text-base-500`,
+};

package/src/styles/control.styles.ts

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+
+// ── State ──
+export const state = {
+  disabled: clsx`pointer-events-none cursor-default opacity-30`,
+};
+
+// ── Size ──
+export type ComponentSize = "default" | "xs" | "sm" | "lg" | "xl";
+
+export const pad = {
+  default: clsx`px-2 py-1`,
+  xs: clsx`px-1 py-0`,
+  sm: clsx`px-1.5 py-0.5`,
+  lg: clsx`px-3 py-2`,
+  xl: clsx`px-4 py-3`,
+};
+
+export const gap = {
+  default: clsx`gap-1`,
+  xs: clsx`gap-0`,
+  sm: clsx`gap-0.5`,
+  lg: clsx`gap-1.5`,
+  xl: clsx`gap-2`,
+};

package/src/styles/theme.styles.ts

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+
+export const themeTokens = {
+  primary: {
+    solid: clsx`bg-primary-500 text-white`,
+    solidHover: clsx`hover:bg-primary-600 dark:hover:bg-primary-400`,
+    light: clsx`bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100`,
+    text: clsx`text-primary-600 dark:text-primary-400`,
+    hoverBg: clsx`hover:bg-primary-100 dark:hover:bg-primary-800/30`,
+    border: clsx`border-primary-300 dark:border-primary-600`,
+  },
+  info: {
+    solid: clsx`bg-info-500 text-white`,
+    solidHover: clsx`hover:bg-info-600 dark:hover:bg-info-400`,
+    light: clsx`bg-info-100 text-info-900 dark:bg-info-900/40 dark:text-info-100`,
+    text: clsx`text-info-600 dark:text-info-400`,
+    hoverBg: clsx`hover:bg-info-100 dark:hover:bg-info-800/30`,
+    border: clsx`border-info-300 dark:border-info-600`,
+  },
+  success: {
+    solid: clsx`bg-success-500 text-white`,
+    solidHover: clsx`hover:bg-success-600 dark:hover:bg-success-400`,
+    light: clsx`bg-success-100 text-success-900 dark:bg-success-900/40 dark:text-success-100`,
+    text: clsx`text-success-600 dark:text-success-400`,
+    hoverBg: clsx`hover:bg-success-100 dark:hover:bg-success-800/30`,
+    border: clsx`border-success-300 dark:border-success-600`,
+  },
+  warning: {
+    solid: clsx`bg-warning-500 text-white`,
+    solidHover: clsx`hover:bg-warning-600 dark:hover:bg-warning-400`,
+    light: clsx`bg-warning-100 text-warning-900 dark:bg-warning-900/40 dark:text-warning-100`,
+    text: clsx`text-warning-600 dark:text-warning-400`,
+    hoverBg: clsx`hover:bg-warning-100 dark:hover:bg-warning-800/30`,
+    border: clsx`border-warning-300 dark:border-warning-600`,
+  },
+  danger: {
+    solid: clsx`bg-danger-500 text-white`,
+    solidHover: clsx`hover:bg-danger-600 dark:hover:bg-danger-400`,
+    light: clsx`bg-danger-100 text-danger-900 dark:bg-danger-900/40 dark:text-danger-100`,
+    text: clsx`text-danger-600 dark:text-danger-400`,
+    hoverBg: clsx`hover:bg-danger-100 dark:hover:bg-danger-800/30`,
+    border: clsx`border-danger-300 dark:border-danger-600`,
+  },
+  base: {
+    solid: clsx`bg-base-500 text-white`,
+    solidHover: clsx`hover:bg-base-600 dark:hover:bg-base-400`,
+    light: clsx`bg-base-100 text-base-900 dark:bg-base-800 dark:text-base-100`,
+    text: clsx`text-base-600 dark:text-base-300`,
+    hoverBg: clsx`hover:bg-base-100 dark:hover:bg-base-800/30`,
+    border: clsx`border-base-300 dark:border-base-700`,
+  },
+};
+
+export type SemanticTheme = keyof typeof themeTokens;

package/tailwind.config.ts

@@ -7,8 +7,6 @@ const sp = defaultTheme.spacing;
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
-// export const tailwindContent = [`${__dirname}**/*.tsx`];
-
 const fieldSizes = {
   "field": `calc(${lh}rem + ${sp["1"]} + ${sp["1"]} + 2px)`,
   "field-xs": `calc(${lh}rem + 2px)`,
@@ -36,15 +34,6 @@ export default {
       },
       height: fieldSizes,
       size: fieldSizes,
-      keyframes: {
-        "fade-in": {
-          from: { opacity: "0", transform: "translateY(-1rem)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
-      },
-      animation: {
-        "fade-in": "fade-in 0.6s ease-out both",
-      },
       zIndex: {
         "sidebar": "100",
         "sidebar-backdrop": "99",