@simplysm/solid 13.0.29 → 13.0.31

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), busy 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.29",
+  "version": "13.0.31",
   "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.29",
-    "@simplysm/core-common": "13.0.29"
+    "@simplysm/core-browser": "13.0.31",
+    "@simplysm/core-common": "13.0.31"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"

package/src/components/data/Pagination.tsx

@@ -9,22 +9,21 @@ import {
 } 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",
@@ -33,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",
@@ -43,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);
 
@@ -65,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>
@@ -75,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>
@@ -83,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>
@@ -98,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>
@@ -108,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

@@ -28,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",

package/src/components/data/kanban/Kanban.tsx

@@ -20,6 +20,7 @@ import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { splitSlots } from "../../../helpers/splitSlots";
 import "./Kanban.css";
+import { iconButtonBase } from "../../../styles/patterns.styles";
 import {
   KanbanContext,
   KanbanLaneContext,
@@ -46,11 +47,11 @@ const KanbanLaneTools: ParentComponent = (props) => (
 
 // ─── KanbanCard ──────────────────────────────────────────────────
 
-export interface KanbanCardProps extends Omit<
+export interface KanbanCardProps<TCardValue = unknown> extends Omit<
   JSX.HTMLAttributes<HTMLDivElement>,
   "children" | "draggable"
 > {
-  value?: unknown;
+  value?: TCardValue;
   draggable?: boolean;
   selectable?: boolean;
   contentClass?: string;
@@ -225,8 +226,11 @@ const KanbanCard: ParentComponent<KanbanCardProps> = (props) => {
 
 // ─── KanbanLane ──────────────────────────────────────────────────
 
-export interface KanbanLaneProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
-  value?: unknown;
+export interface KanbanLaneProps<TLaneValue = unknown> extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children"
+> {
+  value?: TLaneValue;
   busy?: boolean;
   collapsible?: boolean;
   collapsed?: boolean;
@@ -248,20 +252,12 @@ const laneDragOverClass = clsx("bg-primary-50 dark:bg-primary-950");
 const laneHeaderBaseClass = clsx(
   "flex items-center gap-2",
   "px-3 py-2",
-  "font-semibold",
+  "font-bold",
   "text-base-700 dark:text-base-200",
   "select-none",
 );
 
-const collapseButtonClass = clsx(
-  "flex items-center justify-center",
-  "size-6 rounded",
-  "text-base-500",
-  "hover:bg-base-200 hover:text-primary-500",
-  "dark:hover:bg-base-800",
-  "transition-colors duration-150",
-  "cursor-pointer",
-);
+const collapseButtonClass = twMerge(iconButtonBase, "size-6", "hover:text-primary-500");
 
 const laneToolsClass = clsx("flex items-center", "gap-1");
 
@@ -462,12 +458,7 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
                 </button>
               </Show>
               <Show when={hasSelectableCards()}>
-                <Checkbox
-                  value={isAllSelected()}
-                  onValueChange={handleSelectAll}
-                  inline
-                  theme="primary"
-                />
+                <Checkbox value={isAllSelected()} onValueChange={handleSelectAll} inline />
               </Show>
               <div class="flex-1">{slots().kanbanLaneTitle}</div>
               <Show when={slots().kanbanLaneTools.length > 0}>
@@ -494,20 +485,22 @@ const KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {
 
 // ─── Kanban (Board) ──────────────────────────────────────────────
 
-export interface KanbanProps extends Omit<
+export interface KanbanProps<TCardValue = unknown, TLaneValue = unknown> extends Omit<
   JSX.HTMLAttributes<HTMLDivElement>,
   "children" | "onDrop"
 > {
-  onDrop?: (info: KanbanDropInfo) => void;
-  selectedValues?: unknown[];
-  onSelectedValuesChange?: (values: unknown[]) => void;
+  onDrop?: (info: KanbanDropInfo<TLaneValue, TCardValue>) => void;
+  selectedValues?: TCardValue[];
+  onSelectedValuesChange?: (values: TCardValue[]) => void;
   children?: JSX.Element;
 }
 
 const boardBaseClass = clsx("inline-flex flex-nowrap", "h-full", "gap-4");
 
 interface KanbanComponent {
-  (props: KanbanProps): JSX.Element;
+  <TCardValue = unknown, TLaneValue = unknown>(
+    props: KanbanProps<TCardValue, TLaneValue>,
+  ): JSX.Element;
   Lane: typeof KanbanLane;
   Card: typeof KanbanCard;
   LaneTitle: typeof KanbanLaneTitle;

package/src/components/data/sheet/DataSheet.styles.ts

@@ -15,7 +15,7 @@ export const thClass = clsx(
   "border-b border-r border-base-300 dark:border-base-800",
   "overflow-hidden whitespace-nowrap",
   "p-0",
-  "text-left font-semibold",
+  "text-left font-bold",
   "align-middle",
 );