@simplysm/solid 13.0.28 → 13.0.30

package/docs/providers.md

@@ -2,34 +2,146 @@
 
 ## InitializeProvider
 
-Root provider that wraps the entire application. Automatically sets up all required providers: configuration context, theme (dark/light/system), notification system with banner, global error capturing (window.onerror, unhandledrejection), loading overlay, and programmatic dialog support.
+Root provider that wraps the entire application. Automatically sets up all required providers: configuration context, theme (dark/light/system), notification system with banner, global error capturing (window.onerror, unhandledrejection), busy overlay, programmatic dialog support, and form control clipboard value copy.
 
-See [Getting Started](getting-started.md#provider-setup) for setup instructions and `AppConfig` options.
+See the [Configuration](../README.md#configuration) section in the main README for setup instructions and `AppConfig` options.
 
 ---
 
 ## ServiceClientProvider
 
-WebSocket client provider for RPC communication with `@simplysm/service-server`. Wraps `ServiceClient` from `@simplysm/service-client`.
+WebSocket client provider for RPC communication with `@simplysm/service-server`. Wraps `ServiceClient` from `@simplysm/service-client`. Provides `useServiceClient` hook to components.
+
+`ServiceClientProvider` takes no props. After mounting, use `useServiceClient()` to connect, close, and access client instances by key.
 
 ```tsx
-import { ServiceClientProvider } from "@simplysm/solid";
+import { ServiceClientProvider, useServiceClient } from "@simplysm/solid";
 
-<ServiceClientProvider url="ws://localhost:3000">
+// Wrap your app
+<ServiceClientProvider>
   <App />
 </ServiceClientProvider>
+
+// In a component
+function App() {
+  const client = useServiceClient();
+
+  onMount(async () => {
+    await client.connect("main", { host: "localhost", port: 3000, ssl: false });
+  });
+
+  onCleanup(async () => {
+    await client.close("main");
+  });
+
+  const handleCall = async () => {
+    const svc = client.get("main");
+    const result = await svc.call("MyService", "myMethod", [arg1, arg2]);
+  };
+}
 ```
 
+**useServiceClient API:**
+
+| Method | Signature | Description |
+|--------|-----------|-------------|
+| `connect` | `(key: string, options?: Partial<ServiceConnectionConfig>) => Promise<void>` | Open WebSocket connection |
+| `close` | `(key: string) => Promise<void>` | Close connection by key |
+| `get` | `(key: string) => ServiceClient` | Get connected client by key (throws if not connected) |
+| `isConnected` | `(key: string) => boolean` | Check connection state |
+
+`ServiceConnectionConfig`: `{ host: string; port: number; ssl: boolean }`
+
+Defaults for `host`, `port`, and `ssl` are derived from `window.location` when omitted.
+
 ---
 
 ## SharedDataProvider
 
-Shared data provider for managing server-side data subscriptions. Works with `ServiceClientProvider` to provide reactive shared data across components.
+Shared data provider for managing server-side data subscriptions. Works with `ServiceClientProvider` to provide reactive shared data across components via `useSharedData`.
 
 ```tsx
-import { SharedDataProvider, SharedDataChangeEvent } from "@simplysm/solid";
+import { SharedDataProvider, type SharedDataDefinition } from "@simplysm/solid";
+
+interface MySharedData {
+  users: UserRecord;
+  products: ProductRecord;
+}
 
-<SharedDataProvider>
+const definitions: { [K in keyof MySharedData]: SharedDataDefinition<MySharedData[K]> } = {
+  users: {
+    serviceKey: "main",
+    fetch: async (changeKeys) => fetchUsers(changeKeys),
+    getKey: (item) => item.id,
+    orderBy: [(item) => item.name, "asc"],
+  },
+  products: {
+    serviceKey: "main",
+    fetch: async (changeKeys) => fetchProducts(changeKeys),
+    getKey: (item) => item.id,
+    orderBy: [(item) => item.name, "asc"],
+  },
+};
+
+<SharedDataProvider definitions={definitions}>
   <App />
 </SharedDataProvider>
 ```
+
+**SharedDataProvider Props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `definitions` | `{ [K in keyof TSharedData]: SharedDataDefinition<TSharedData[K]> }` | Map of data key to fetch definition |
+
+**SharedDataDefinition type:**
+
+```typescript
+interface SharedDataDefinition<TData> {
+  serviceKey: string;                                           // Connection key (matches useServiceClient key)
+  fetch: (changeKeys?: Array<string | number>) => Promise<TData[]>; // Data fetch function
+  getKey: (item: TData) => string | number;                    // Primary key extractor
+  orderBy: [(item: TData) => unknown, "asc" | "desc"][];       // Sort order
+  filter?: unknown;                                             // Optional filter for change events
+}
+```
+
+**useSharedData API:**
+
+```tsx
+import { useSharedData } from "@simplysm/solid";
+
+function MyComponent() {
+  const sharedData = useSharedData<MySharedData>();
+
+  const users = () => sharedData.users.items();           // Accessor<TData[]>
+  const user = () => sharedData.users.get(userId());      // TData | undefined
+
+  const handleUpdate = async () => {
+    await sharedData.users.emit([updatedUserId]);          // trigger refetch for keys
+  };
+}
+```
+
+**SharedDataAccessor API:**
+
+| Property/Method | Type | Description |
+|-----------------|------|-------------|
+| `items` | `Accessor<TData[]>` | Reactive item array |
+| `get` | `(key: string \| number \| undefined) => TData \| undefined` | Get item by key |
+| `emit` | `(changeKeys?: Array<string \| number>) => Promise<void>` | Emit change event to server (triggers refetch in all subscribers) |
+
+**SharedDataValue extras:**
+
+| Property/Method | Type | Description |
+|-----------------|------|-------------|
+| `wait` | `() => Promise<void>` | Wait until all initial fetches complete |
+| `busy` | `Accessor<boolean>` | True while any fetch is in progress |
+
+**SharedDataChangeEvent:**
+
+`SharedDataChangeEvent` is the event definition used internally by `SharedDataProvider` to communicate data changes between server and clients. Export it if you need to emit changes from the server side.
+
+```typescript
+import { SharedDataChangeEvent } from "@simplysm/solid";
+```

package/docs/styling.md

@@ -22,9 +22,11 @@
 | `h-field` / `size-field` | Default field height (based on `py-1`) |
 | `h-field-sm` / `size-field-sm` | Small field height (based on `py-0.5`) |
 | `h-field-lg` / `size-field-lg` | Large field height (based on `py-2`) |
+| `h-field-xl` / `size-field-xl` | Extra-large field height (based on `py-3`) |
 | `h-field-inset` / `size-field-inset` | Inset field height (excludes border) |
 | `h-field-inset-sm` / `size-field-inset-sm` | Small inset field height |
 | `h-field-inset-lg` / `size-field-inset-lg` | Large inset field height |
+| `h-field-inset-xl` / `size-field-inset-xl` | Extra-large inset field height |
 
 ## z-index Layers
 
@@ -65,3 +67,91 @@ const baseClass = clsx(
 
 const className = twMerge(baseClass, props.class);
 ```
+
+## Exported Style Tokens
+
+`@simplysm/solid` exports TypeScript style constants and type definitions for use when building custom components that integrate with the library's design system.
+
+### tokens.styles
+
+```typescript
+import {
+  type ComponentSize,    // "sm" | "lg" | "xl"
+  type SemanticTheme,    // "primary" | "info" | "success" | "warning" | "danger" | "base"
+  borderDefault,         // Tailwind classes for default border color
+  borderSubtle,          // Tailwind classes for subtle border color
+  bgSurface,             // Tailwind classes for surface background
+  textDefault,           // Tailwind classes for default text color
+  textMuted,             // Tailwind classes for muted text color
+  textPlaceholder,       // Tailwind classes for placeholder text color
+  disabledOpacity,       // Tailwind classes for disabled state opacity
+  paddingSm,             // Tailwind classes for small padding (px-1.5 py-0.5)
+  paddingLg,             // Tailwind classes for large padding (px-3 py-2)
+  paddingXl,             // Tailwind classes for extra-large padding (px-4 py-3)
+  themeTokens,           // Record<SemanticTheme, { solid, solidHover, light, text, hoverBg, border }>
+} from "@simplysm/solid";
+```
+
+### patterns.styles
+
+```typescript
+import {
+  iconButtonBase,         // Base classes for icon-only buttons
+  insetFocusOutline,      // Focus outline (focus-within) for inset fields
+  insetFocusOutlineSelf,  // Focus outline (focus) for inset trigger elements
+  insetBase,              // Base layout classes for inset mode
+  fieldSurface,           // Field surface (background, border, focus ring)
+  inputBase,              // Base classes for <input> elements
+} from "@simplysm/solid";
+```
+
+### Field.styles
+
+```typescript
+import {
+  type FieldSize,              // "sm" | "lg" | "xl"
+  getFieldWrapperClass,        // Utility to build field wrapper class string
+  getTextareaWrapperClass,     // Utility to build textarea wrapper class string
+  fieldInputClass,             // Base classes for field <input> element
+  fieldGapClasses,             // Gap classes per size (with prefix icon)
+} from "@simplysm/solid";
+```
+
+### Checkbox.styles
+
+```typescript
+import {
+  type CheckboxSize,           // "sm" | "lg" | "xl"
+  checkboxBaseClass,           // Base wrapper classes
+  indicatorBaseClass,          // Base indicator (box) classes
+  checkedClass,                // Checked state classes (primary color)
+  checkboxSizeClasses,         // Size variant classes
+  checkboxInsetClass,          // Inset mode classes
+  checkboxInlineClass,         // Inline display classes
+  checkboxDisabledClass,       // Disabled state classes
+} from "@simplysm/solid";
+```
+
+### DataSheet.styles
+
+```typescript
+import {
+  dataSheetContainerClass, tableClass, thClass, thContentClass, tdClass,
+  summaryThClass, insetContainerClass, insetTableClass, defaultContainerClass,
+  sortableThClass, sortIconClass, toolbarClass, fixedClass, fixedLastClass,
+  resizerClass, resizeIndicatorClass, featureThClass, featureTdClass,
+  expandIndentGuideClass, expandIndentGuideLineClass, expandToggleClass,
+  reorderHandleClass, reorderIndicatorClass, configButtonClass,
+  // etc.
+} from "@simplysm/solid";
+```
+
+### ListItem.styles
+
+```typescript
+import {
+  listItemBaseClass, listItemSizeClasses, listItemSelectedClass,
+  listItemDisabledClass, listItemReadonlyClass, listItemIndentGuideClass,
+  listItemContentClass, getListItemSelectedIconClass,
+} from "@simplysm/solid";
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.28",
+  "version": "13.0.30",
   "description": "심플리즘 패키지 - SolidJS 라이브러리",
   "author": "김석래",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "solid-tiptap": "^0.8.0",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.28",
-    "@simplysm/core-common": "13.0.28"
+    "@simplysm/core-browser": "13.0.30",
+    "@simplysm/core-common": "13.0.30"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/Pagination.tsx

@@ -1,25 +1,29 @@
 import { type Component, For, type JSX, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from "@tabler/icons-solidjs";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronsLeft,
+  IconChevronsRight,
+} from "@tabler/icons-solidjs";
 import { Button } from "../form-control/Button";
 import { Icon } from "../display/Icon";
-
-type PaginationSize = "sm" | "lg";
+import { type ComponentSizeCompact } from "../../styles/tokens.styles";
 
 export interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
-  pageIndex: number;
-  onPageIndexChange?: (pageIndex: number) => void;
+  page: number;
+  onPageChange?: (page: number) => void;
   totalPageCount: number;
   displayPageCount?: number;
-  size?: PaginationSize;
+  size?: ComponentSizeCompact;
 }
 
 const baseClass = clsx("inline-flex items-center");
 
 const btnClass = clsx("border-none font-normal");
 
-const gapClasses: Record<PaginationSize | "default", string> = {
+const gapClasses: Record<ComponentSizeCompact | "default", string> = {
   default: "gap-1",
   sm: "gap-0.5",
   lg: "gap-1.5",
@@ -28,8 +32,8 @@ const gapClasses: Record<PaginationSize | "default", string> = {
 export const Pagination: Component<PaginationProps> = (props) => {
   const [local, rest] = splitProps(props, [
     "class",
-    "pageIndex",
-    "onPageIndexChange",
+    "page",
+    "onPageChange",
     "totalPageCount",
     "displayPageCount",
     "size",
@@ -38,17 +42,17 @@ export const Pagination: Component<PaginationProps> = (props) => {
   const visibleCount = () => local.displayPageCount ?? 10;
 
   const pages = () => {
-    const from = Math.floor(local.pageIndex / visibleCount()) * visibleCount();
-    const to = Math.min(from + visibleCount(), local.totalPageCount);
+    const from = Math.floor((local.page - 1) / visibleCount()) * visibleCount() + 1;
+    const to = Math.min(from + visibleCount() - 1, local.totalPageCount);
     const result: number[] = [];
-    for (let i = from; i < to; i++) {
+    for (let i = from; i <= to; i++) {
       result.push(i);
     }
     return result;
   };
 
-  const hasPrev = () => (pages()[0] ?? 0) > 0;
-  const hasNext = () => (pages()[pages().length - 1] ?? 0) < local.totalPageCount - 1;
+  const hasPrev = () => (pages()[0] ?? 1) > 1;
+  const hasNext = () => (pages()[pages().length - 1] ?? 1) < local.totalPageCount;
 
   const getClassName = () => twMerge(baseClass, gapClasses[local.size ?? "default"], local.class);
 
@@ -60,7 +64,7 @@ export const Pagination: Component<PaginationProps> = (props) => {
         variant="ghost"
         size={local.size}
         disabled={!hasPrev()}
-        onClick={() => local.onPageIndexChange?.(0)}
+        onClick={() => local.onPageChange?.(1)}
       >
         <Icon icon={IconChevronsLeft} size="1em" />
       </Button>
@@ -70,7 +74,7 @@ export const Pagination: Component<PaginationProps> = (props) => {
         variant="ghost"
         size={local.size}
         disabled={!hasPrev()}
-        onClick={() => local.onPageIndexChange?.((pages()[0] ?? 1) - 1)}
+        onClick={() => local.onPageChange?.((pages()[0] ?? 2) - 1)}
       >
         <Icon icon={IconChevronLeft} size="1em" />
       </Button>
@@ -78,12 +82,12 @@ export const Pagination: Component<PaginationProps> = (props) => {
         {(p) => (
           <Button
             class={btnClass}
-            theme={p === local.pageIndex ? "primary" : "base"}
-            variant={p === local.pageIndex ? "solid" : "ghost"}
+            theme={p === local.page ? "primary" : "base"}
+            variant={p === local.page ? "solid" : "ghost"}
             size={local.size}
-            onClick={() => local.onPageIndexChange?.(p)}
+            onClick={() => local.onPageChange?.(p)}
           >
-            {p + 1}
+            {p}
           </Button>
         )}
       </For>
@@ -93,7 +97,7 @@ export const Pagination: Component<PaginationProps> = (props) => {
         variant="ghost"
         size={local.size}
         disabled={!hasNext()}
-        onClick={() => local.onPageIndexChange?.((pages()[pages().length - 1] ?? 0) + 1)}
+        onClick={() => local.onPageChange?.((pages()[pages().length - 1] ?? 0) + 1)}
       >
         <Icon icon={IconChevronRight} size="1em" />
       </Button>
@@ -103,7 +107,7 @@ export const Pagination: Component<PaginationProps> = (props) => {
         variant="ghost"
         size={local.size}
         disabled={!hasNext()}
-        onClick={() => local.onPageIndexChange?.(local.totalPageCount - 1)}
+        onClick={() => local.onPageChange?.(local.totalPageCount)}
       >
         <Icon icon={IconChevronsRight} size="1em" />
       </Button>

package/src/components/data/Table.tsx

@@ -15,7 +15,7 @@ const baseClass = clsx(
   // th
   "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
   "[&_th]:px-2 [&_th]:py-1",
-  "[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-semibold",
+  "[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-bold",
   "[&_th]:dark:bg-base-800",
   // td
   "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",

package/src/components/data/calendar/Calendar.tsx

@@ -4,7 +4,10 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 
-export interface CalendarProps<TValue> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, "children"> {
+export interface CalendarProps<TValue> extends Omit<
+  JSX.HTMLAttributes<HTMLTableElement>,
+  "children"
+> {
   items: TValue[];
   getItemDate: (item: TValue, index: number) => DateOnly;
   renderItem: (item: TValue, index: number) => JSX.Element;
@@ -25,7 +28,7 @@ const baseClass = clsx(
   // th
   "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
   "[&_th]:px-2 [&_th]:py-1",
-  "[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-semibold",
+  "[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-bold",
   "[&_th]:dark:bg-base-800",
   // td
   "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
@@ -116,14 +119,25 @@ function CalendarBase<TValue>(props: CalendarProps<TValue>) {
             <tr>
               <For each={row}>
                 {(cell) => (
-                  <td class={twMerge(notCurrentClass, cell.date.month !== yearMonth().month && "not-current")}>
+                  <td
+                    class={twMerge(
+                      notCurrentClass,
+                      cell.date.month !== yearMonth().month && "not-current",
+                    )}
+                  >
                     <div
-                      class={cell.date.month !== yearMonth().month ? twMerge(dayClass, notCurrentDayClass) : dayClass}
+                      class={
+                        cell.date.month !== yearMonth().month
+                          ? twMerge(dayClass, notCurrentDayClass)
+                          : dayClass
+                      }
                     >
                       {cell.date.day}
                     </div>
                     <div class={contentClass}>
-                      <For each={cell.items}>{(entry) => local.renderItem(entry.item, entry.index)}</For>
+                      <For each={cell.items}>
+                        {(entry) => local.renderItem(entry.item, entry.index)}
+                      </For>
                     </div>
                   </td>
                 )}