@devslab/dds-solid 0.28.0 → 0.29.0

package/README.ko.md

@@ -66,6 +66,26 @@ const reload = (key: "search" | "page") => list.run(key, async (signal) => {
 }, { replace: true });
 ```
 
+## ConsoleShell 탐색 그룹
+
+기존 그룹은 기본으로 펼쳐집니다. 그룹에 `collapsible: true`를 지정하면 기본 HTML 버튼으로 접고 펼칠 수 있습니다. 펼침 상태에 사용할 안정적인 `id`를 지정하세요. 생략하면 `group-${index}`가 키가 됩니다. 초기에는 현재 경로에 해당하는 접이식 그룹만 열리며, 탐색 링크와 같은 경로 판정 및 항목의 `active` 재정의를 사용합니다.
+
+`LeftNav`는 별도로 내보내므로 직접 만든 레이아웃에도 메뉴를 조합할 수 있습니다. `surface`, `activePath`, `nav`, `labels`의 `nav`·`badge`, 아래 펼침 상태 속성, 선택적인 `onNavigate`를 받습니다. `ConsoleShell` 안에 조합하려면 `navigation={<LeftNav ... />}`로 전달하세요. 이 슬롯이 기본 메뉴를 대체하므로 셸의 `nav`는 생략할 수 있습니다. 브랜드, 헤더, 본문과 모바일 서랍은 셸이 담당합니다. 사용자 정의 메뉴의 `onNavigate`에는 앱에서 필요한 서랍 동작을 연결하세요.
+
+```tsx
+const [expandedGroups, setExpandedGroups] = createSignal<readonly string[]>(["build"]);
+<ConsoleShell
+  {...shellProps}
+  nav={[{ id: "build", label: "Build", collapsible: true, items: [
+    { id: "projects", href: "/dashboard/projects", label: "Projects", icon: <svg viewBox="0 0 16 16"><path d="M2 3h5l2 2h5v8H2z" /></svg> },
+  ] }]}
+  expandedGroups={expandedGroups()}
+  onExpandedGroupsChange={setExpandedGroups}
+>Content</ConsoleShell>
+```
+
+비제어 초기 상태는 `defaultExpandedGroups`로 지정합니다. `[]`를 전달하면 모든 접이식 그룹이 닫힙니다. 제어 상태는 `expandedGroups`와 `onExpandedGroupsChange`를 사용하세요. 이후 경로 변경에 따른 펼침과 상태 저장은 앱이 담당합니다. 항목의 `icon`은 장식이며, 링크 이름은 `label`이 제공하고 배지는 접근성 라벨을 유지합니다.
+
 ## DatePicker
 
 ```tsx
@@ -93,3 +113,8 @@ Input/InputGroup은 검색 전용이 아닌 일반 입력 기반이며 라벨
 상세 import: `@devslab/dds-solid/input`, `/combobox`, `/select-picker`, `/dropdown-menu`, `/popover`, `/calendar`, `/date-picker`, `/time-picker`, `/segmented-control`, `/number-input`, `/date-range-picker`, `/month-picker`. 기존 루트 import와 `styles.css`는 유지합니다. [공통 사용 가이드](https://github.com/devslab-kr/dds/blob/main/docs/components-input-choice-calendar.ko.md)를 참고하세요.
 Input/InputGroup은 검색 전용이 아닌 일반 입력 기반이며 라벨 배치·내용 지우기를 지원합니다. Combobox/SelectPicker는 가상화를, DropdownMenu/Popover는 접근 가능한 팝업을, Calendar/DatePicker는 공유 달력을 제공합니다. DateRangePicker(시작일~종료일 기간)와 MonthPicker(YYYY-MM 월)도 같은 달력을 씁니다.
 
+
+
+## 공통 업무 화면
+
+Layout·LeftNav·TopNav는 공통 간격과 타이포 규격을 사용합니다. [조립 방법과 수치](../../docs/layouts.ko.md)를 참고하세요.

package/README.md

@@ -63,6 +63,26 @@ const reload = (key: "search" | "page") => list.run(key, async (signal) => {
 }, { replace: true });
 ```
 
+## ConsoleShell navigation groups
+
+Groups remain open by default. Set `collapsible: true` on a group to render a native disclosure button, and give it a stable `id` for expansion state (otherwise the key is `group-${index}`). Only active collapsible groups open initially, using the same route matching and item `active` override as the navigation links.
+
+`LeftNav` is also exported separately for composing a menu in your own layout. It takes `surface`, `activePath`, `nav`, `labels` (`nav` and `badge`), the expansion props below, and optional `onNavigate`. To compose it inside `ConsoleShell`, pass it as `navigation={<LeftNav ... />}`; the slot replaces the built-in menu and the shell's `nav` can be omitted. The shell continues to own branding, the header, content and mobile drawer. For a custom menu, connect `onNavigate` to any application-specific drawer handling.
+
+```tsx
+const [expandedGroups, setExpandedGroups] = createSignal<readonly string[]>(["build"]);
+<ConsoleShell
+  {...shellProps}
+  nav={[{ id: "build", label: "Build", collapsible: true, items: [
+    { id: "projects", href: "/dashboard/projects", label: "Projects", icon: <svg viewBox="0 0 16 16"><path d="M2 3h5l2 2h5v8H2z" /></svg> },
+  ] }]}
+  expandedGroups={expandedGroups()}
+  onExpandedGroupsChange={setExpandedGroups}
+>Content</ConsoleShell>
+```
+
+Use `defaultExpandedGroups` for uncontrolled initial state; `[]` explicitly closes every collapsible group. Use `expandedGroups` and `onExpandedGroupsChange` for controlled state. Later route-driven expansion and persistence belong to the application. Item `icon` is decorative; `label` still supplies the link name and badges keep their accessible labels.
+
 ## DatePicker
 
 ```tsx
@@ -90,3 +110,8 @@ Input/InputGroup are general-purpose native inputs, not search-only, with label
 Use explicit subpaths `@devslab/dds-solid/input`, `/combobox`, `/select-picker`, `/dropdown-menu`, `/popover`, `/calendar`, `/date-picker`, `/time-picker`, `/segmented-control`, `/number-input`, `/date-range-picker`, `/month-picker`, or the existing root exports. Keep importing `styles.css` once. See the [common usage guide](https://github.com/devslab-kr/dds/blob/main/docs/components-input-choice-calendar.md).
 Input/InputGroup are general-purpose native inputs, not search-only, with label placement and clear actions. Combobox/SelectPicker support fixed-row virtualization; DropdownMenu/Popover provide accessible overlays; Calendar/DatePicker share a calendar view, which DateRangePicker (start ~ end period) and MonthPicker (YYYY-MM) also use.
 
+
+
+## Shared application layouts
+
+Layout, LeftNav and TopNav use the common geometry and typography rules. See [composition and exact dimensions](../../docs/layouts.md).

package/dist/console-shell.d.ts

@@ -9,10 +9,16 @@ export interface ConsoleNavItem {
     id: string;
     href: string;
     label: string;
+    /** Decorative icon; the label supplies the accessible name. */
+    icon?: JSX.Element;
     badge?: number;
     active?: boolean;
 }
 export interface ConsoleNavGroup {
+    /** Stable key for expansion state. Falls back to `group-${index}`. */
+    id?: string;
+    /** Opt in to a disclosure button; legacy groups remain expanded. */
+    collapsible?: boolean;
     label: string;
     items: readonly ConsoleNavItem[];
 }
@@ -50,7 +56,12 @@ export interface ConsoleShellProps {
         label: string;
         value: string;
     }[];
-    nav: readonly ConsoleNavGroup[];
+    nav?: readonly ConsoleNavGroup[];
+    /** Custom menu content, such as a separately composed LeftNav. */
+    navigation?: JSX.Element;
+    expandedGroups?: readonly string[] | undefined;
+    defaultExpandedGroups?: readonly string[] | undefined;
+    onExpandedGroupsChange?: ((groupIds: string[]) => void) | undefined;
     labels: ConsoleShellLabels;
     header: ConsoleHeader;
     /** Slot for the rail's bottom — DDS must not depend on site-kit, so a

package/dist/console-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"console-shell.d.ts","sourceRoot":"","sources":["../src/console-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+D,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEjG;;;;;2CAK2C;AAC3C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;qDAKiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ;kEAC8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD;0BACsB;IACtB,OAAO,CAAC,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,GAAG,EAAE,SAAS,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB;;qCAEiC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAsBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA8FlE"}
+{"version":3,"file":"console-shell.d.ts","sourceRoot":"","sources":["../src/console-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAG/C;;;;;2CAK2C;AAC3C,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;qDAKiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ;kEAC8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD;0BACsB;IACtB,OAAO,CAAC,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACtD,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,kEAAkE;IAClE,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/C,qBAAqB,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACtD,sBAAsB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpE,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB;;qCAEiC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA4DlE"}

package/dist/index.d.ts

@@ -22,4 +22,7 @@ export * from "./popover";
 export * from "./calendar";
 export { SegmentedControl, validateSegmentedItems, type SegmentedControlItem, type SegmentedControlProps, } from "./segmented-control";
 export { NumberInput, normalizeNumberText, numberInputMessages, type NumberInputMessages, type NumberInputProps, } from "./number-input";
+export { LeftNav, type LeftNavProps } from "./left-nav";
+export { Layout, type LayoutProps } from "./layout";
+export { TopNav, type TopNavProps } from "./top-nav";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,KAAK,aAAa,EAAE,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACpF,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACpF,OAAO,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,KAAK,kBAAkB,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC/J,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,KAAK,aAAa,EAAE,KAAK,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3H,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEjF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACpF,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}