@simplysm/solid 13.0.42 → 13.0.43

package/docs/helpers.md

@@ -14,18 +14,41 @@ const style = mergeStyles("color: red", { fontSize: "14px" }, props.style);
 
 ## splitSlots
 
-Utility for splitting children into named slots based on component type.
+Utility for splitting resolved children into named slots based on `data-*` attributes. Returns a tuple of `[slots accessor, content accessor]`.
+
+Slot keys are matched against the element's `dataset` (camelCase). Sub-components that set a matching data attribute (e.g., `data-select-header`) are separated into the named slot; all other children remain in `content`.
 
 ```typescript
 import { splitSlots } from "@simplysm/solid";
+import { children } from "solid-js";
+
+// Inside a component:
+const resolved = children(() => props.children);
+const [slots, content] = splitSlots(resolved, ["selectHeader", "selectAction"] as const);
+
+// Access inside JSX (within a reactive context)
+<div>{slots().selectHeader}</div>   // HTMLElement[] matching data-select-header
+<div>{content()}</div>             // JSX.Element[] – remaining children
+```
 
-const slots = splitSlots(props.children, {
-  header: HeaderComponent,
-  footer: FooterComponent,
-});
-// slots.header, slots.footer, slots.rest
+**Signature:**
+
+```typescript
+function splitSlots<K extends string>(
+  resolved: { toArray: () => unknown[] },
+  keys: readonly K[],
+): [Accessor<Record<K, HTMLElement[]>>, Accessor<JSX.Element[]>]
 ```
 
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `resolved` | `{ toArray: () => unknown[] }` | Resolved children from SolidJS `children()` |
+| `keys` | `readonly K[]` | Slot key names (camelCase, matched against `element.dataset`) |
+
+Returns a tuple:
+- `slots` — `Accessor<Record<K, HTMLElement[]>>` — named slot elements per key
+- `content` — `Accessor<JSX.Element[]>` — remaining children not matched by any key
+
 ---
 
 ## ripple directive

package/docs/hooks.md

@@ -238,13 +238,14 @@ const items: AppStructureItem<string>[] = [
 const structure = createAppStructure({
   items,
   usableModules: () => activeModules(),  // optional: filter by active modules
-  permRecord: () => userPermissions(),   // optional: user permission state
+  permRecord: () => userPermissions(),   // optional: Record<string, boolean> permission state
 });
 
-// structure.routes         -- Route array (pass to @solidjs/router)
-// structure.usableMenus()  -- SidebarMenuItem[] for Sidebar.Menu
-// structure.usableFlatMenus() -- Flat menu list
-// structure.permRecord()   -- Record<string, boolean> permission state
+// structure.usableRoutes()    -- Accessor<AppRoute[]> - filtered route array (pass to @solidjs/router)
+// structure.usableMenus()     -- Accessor<AppMenu[]> - filtered menu array for Sidebar.Menu
+// structure.usableFlatMenus() -- Accessor<AppFlatMenu[]> - flat filtered menu list
+// structure.usablePerms()     -- Accessor<AppPerm[]> - filtered permission tree
+// structure.flatPerms          -- AppFlatPerm[] - all flat perm entries (static, not reactive)
 ```
 
 **Routing integration with `@solidjs/router`:**
@@ -261,7 +262,7 @@ render(
       <Route path="/" component={App}>
         <Route path="/home" component={Home}>
           <Route path="/" component={() => <Navigate href="/home/main" />} />
-          <For each={appStructure.routes}>
+          <For each={appStructure.usableRoutes()}>
             {(r) => <Route path={r.path} component={r.component} />}
           </For>
           <Route path="/*" component={NotFoundPage} />
@@ -274,7 +275,52 @@ render(
 );
 ```
 
-Each route object in `structure.routes` has `path` (derived from nested `code` values) and `component` properties, ready to pass directly to `<Route>`.
+Each route object in `structure.usableRoutes()` has `path` (derived from nested `code` values) and `component` properties, ready to pass directly to `<Route>`. Note that `usableRoutes` is a reactive accessor — it re-evaluates when `usableModules` or `permRecord` signals change.
+
+**AppStructure return type:**
+
+```typescript
+interface AppStructure<TModule> {
+  items: AppStructureItem<TModule>[];
+  usableRoutes: Accessor<AppRoute[]>;           // reactive, filtered by modules + permRecord
+  usableMenus: Accessor<AppMenu[]>;             // reactive, filtered by modules + permRecord
+  usableFlatMenus: Accessor<AppFlatMenu[]>;     // reactive, flat version of usableMenus
+  usablePerms: Accessor<AppPerm<TModule>[]>;    // reactive, filtered permission tree
+  flatPerms: AppFlatPerm<TModule>[];            // static, all perm entries (not reactive)
+  getTitleChainByHref(href: string): string[];
+}
+
+interface AppRoute {
+  path: string;
+  component: Component;
+}
+
+interface AppMenu {
+  title: string;
+  href?: string;
+  icon?: Component<IconProps>;
+  children?: AppMenu[];
+}
+
+interface AppFlatMenu {
+  titleChain: string[];
+  href: string;
+}
+
+interface AppPerm<TModule = string> {
+  title: string;
+  href?: string;
+  modules?: TModule[];
+  perms?: string[];
+  children?: AppPerm<TModule>[];
+}
+
+interface AppFlatPerm<TModule = string> {
+  titleChain: string[];
+  code: string;
+  modulesChain: TModule[][];
+}
+```
 
 **AppStructureItem types:**
 
@@ -302,6 +348,15 @@ interface AppStructureLeafItem<TModule> {
   isNotMenu?: boolean;  // exclude from menu but include in routing
 }
 
+// Sub-permission item
+interface AppStructureSubPerm<TModule> {
+  code: string;
+  title: string;
+  modules?: TModule[];
+  requiredModules?: TModule[];
+  perms: ("use" | "edit")[];
+}
+
 type AppStructureItem<TModule> = AppStructureGroupItem<TModule> | AppStructureLeafItem<TModule>;
 ```
 

package/docs/styling.md

@@ -110,26 +110,45 @@ import {
 
 ```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)
+  type FieldSize,                    // "sm" | "lg" | "xl"
+  fieldBaseClass,                    // Base wrapper classes (inline-flex, field surface, h-field)
+  fieldSizeClasses,                  // Size variant classes per FieldSize
+  fieldInsetClass,                   // Inset mode wrapper classes
+  fieldInsetHeightClass,             // Inset height class (h-field-inset, excludes border)
+  fieldInsetSizeHeightClasses,       // Inset height classes per size
+  fieldDisabledClass,                // Disabled state classes
+  textAreaBaseClass,                 // Base textarea wrapper classes
+  textAreaSizeClasses,               // Textarea size classes per FieldSize
+  fieldInputClass,                   // Base classes for field <input> element
+  fieldGapClasses,                   // Gap classes per size (with prefix icon)
+  getFieldWrapperClass,              // Utility to build field wrapper class string
+  getTextareaWrapperClass,           // Utility to build textarea wrapper class string
 } from "@simplysm/solid";
 ```
 
+**`getFieldWrapperClass` options:**
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `size` | `FieldSize` | Size variant |
+| `disabled` | `boolean` | Apply disabled styles |
+| `inset` | `boolean` | Apply inset styles |
+| `includeCustomClass` | `string \| false` | Additional CSS class (or `false` to skip) |
+| `extra` | `string \| false` | Extra classes inserted before size/disabled/inset |
+
 ### 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
+  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
+  checkboxInsetSizeHeightClasses,  // Inset height classes per size (excludes border)
+  checkboxInlineClass,             // Inline display classes
+  checkboxDisabledClass,           // Disabled state classes
 } from "@simplysm/solid";
 ```
 
@@ -142,8 +161,11 @@ import {
   sortableThClass, sortIconClass, toolbarClass, fixedClass, fixedLastClass,
   resizerClass, resizeIndicatorClass, featureThClass, featureTdClass,
   expandIndentGuideClass, expandIndentGuideLineClass, expandToggleClass,
+  selectSingleClass, selectSingleSelectedClass, selectSingleUnselectedClass,
   reorderHandleClass, reorderIndicatorClass, configButtonClass,
-  // etc.
+  featureCellWrapperClass, featureCellBodyWrapperClass,
+  featureCellClickableClass, featureCellBodyClickableClass,
+  reorderCellWrapperClass,
 } from "@simplysm/solid";
 ```
 

package/package.json

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