@exxatdesignux/ui 0.3.0 → 0.4.1

package/dist/components/data-views/list-page-split-hub-tokens.d.ts

@@ -1,8 +1,8 @@
 /**
  * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).
- * Keeps Question bank panel / tree and generic `FinderPanelView` visually aligned.
+ * Keeps Library panel / tree and generic `FinderPanelView` visually aligned.
  */
-/** `ResizableHandle` between miller / tree columns — matches Question bank panel. */
+/** `ResizableHandle` between miller / tree columns — matches Library panel. */
 declare const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS = "w-1 bg-border/40 hover:bg-brand/20 transition-colors";
 /** Primary column stack (scope list, folder list, record list, …). */
 declare const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";

package/dist/components/data-views/list-page-split-hub-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-views/list-page-split-hub-tokens.ts"],"names":[],"mappings":";AAMO,IAAM,sCAAA,GACX;AAGK,IAAM,yCAAA,GACX;AAGK,IAAM,yCAAA,GACX","file":"list-page-split-hub-tokens.js","sourcesContent":["/**\n * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).\n * Keeps Question bank panel / tree and generic `FinderPanelView` visually aligned.\n */\n\n/** `ResizableHandle` between miller / tree columns — matches Question bank panel. */\nexport const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =\n  \"w-1 bg-border/40 hover:bg-brand/20 transition-colors\"\n\n/** Primary column stack (scope list, folder list, record list, …). */\nexport const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n\n/** Right-hand inspector / detail column shell. */\nexport const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n"]}
+{"version":3,"sources":["../../../src/components/data-views/list-page-split-hub-tokens.ts"],"names":[],"mappings":";AAMO,IAAM,sCAAA,GACX;AAGK,IAAM,yCAAA,GACX;AAGK,IAAM,yCAAA,GACX","file":"list-page-split-hub-tokens.js","sourcesContent":["/**\n * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).\n * Keeps Library panel / tree and generic `FinderPanelView` visually aligned.\n */\n\n/** `ResizableHandle` between miller / tree columns — matches Library panel. */\nexport const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =\n  \"w-1 bg-border/40 hover:bg-brand/20 transition-colors\"\n\n/** Primary column stack (scope list, folder list, record list, …). */\nexport const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n\n/** Right-hand inspector / detail column shell. */\nexport const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n"]}

package/dist/components/data-views/list-page-tree-column-header.d.ts

@@ -8,7 +8,7 @@ interface ListPageTreeColumnHeaderProps {
     className?: string;
 }
 /**
- * Shared left-column header for tree / outline surfaces — matches Question bank “Questions” bar.
+ * Shared left-column header for tree / outline surfaces — matches Library “Questions” bar.
  */
 declare function ListPageTreeColumnHeader({ title, trailing, className, }: ListPageTreeColumnHeaderProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/data-views/list-page-tree-column-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/list-page-tree-column-header.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,wBAAA,CAAyB;AAAA,EACvC,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAkC;AAChC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA,EAClF,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DAAA,EAA+D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAClF,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EAAsC,oBAAS,CAAA,GAC5D;AAAA,GAAA,EACN,CAAA,EACF,CAAA;AAEJ","file":"list-page-tree-column-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface ListPageTreeColumnHeaderProps {\n  title: string\n  /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */\n  trailing?: React.ReactNode\n  className?: string\n}\n\n/**\n * Shared left-column header for tree / outline surfaces — matches Question bank “Questions” bar.\n */\nexport function ListPageTreeColumnHeader({\n  title,\n  trailing,\n  className,\n}: ListPageTreeColumnHeaderProps) {\n  return (\n    <div className={cn(\"shrink-0 border-b border-border/50 bg-card px-3 py-2\", className)}>\n      <div className=\"flex h-9 items-center justify-between gap-2\">\n        <h3 className=\"min-w-0 flex-1 truncate text-sm font-medium text-foreground\">{title}</h3>\n        {trailing ? (\n          <div className=\"flex shrink-0 items-center gap-0.5\">{trailing}</div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/list-page-tree-column-header.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,wBAAA,CAAyB;AAAA,EACvC,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAkC;AAChC,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,sDAAA,EAAwD,SAAS,CAAA,EAClF,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6DAAA,EAA+D,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAClF,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAA,EAAsC,oBAAS,CAAA,GAC5D;AAAA,GAAA,EACN,CAAA,EACF,CAAA;AAEJ","file":"list-page-tree-column-header.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\nexport interface ListPageTreeColumnHeaderProps {\n  title: string\n  /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */\n  trailing?: React.ReactNode\n  className?: string\n}\n\n/**\n * Shared left-column header for tree / outline surfaces — matches Library “Questions” bar.\n */\nexport function ListPageTreeColumnHeader({\n  title,\n  trailing,\n  className,\n}: ListPageTreeColumnHeaderProps) {\n  return (\n    <div className={cn(\"shrink-0 border-b border-border/50 bg-card px-3 py-2\", className)}>\n      <div className=\"flex h-9 items-center justify-between gap-2\">\n        <h3 className=\"min-w-0 flex-1 truncate text-sm font-medium text-foreground\">{title}</h3>\n        {trailing ? (\n          <div className=\"flex shrink-0 items-center gap-0.5\">{trailing}</div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/components/data-views/list-page-tree-panel-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/resizable.tsx","../../../src/components/ui/list-page-view-frame.tsx","../../../src/components/data-views/list-page-split-hub-chrome.tsx","../../../src/components/data-views/list-page-split-hub-tokens.ts","../../../src/components/data-views/list-page-tree-panel-shell.tsx"],"names":["jsx"],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACUO,SAAS,mBAAA,CAAoB;AAAA,EAClC,SAAA,GAAY,YAAA;AAAA,EACZ,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAa,SAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,cAAc,UAAA,IAAc,UAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAMO,IAAM,cAAA,GAAiB,KAAA;AASvB,SAAS,gBAAgB,EAAE,UAAA,EAAY,SAAA,EAAW,GAAG,OAAM,EAAyB;AACzF,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA;AAAA,QAET,uFAAA;AAAA,QACA,wDAAA;AAAA,QACA,qGAAA;AAAA;AAAA,QAEA,uJAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,UAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAU,2GACb,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,+BAAA,EAAgC,CAAA,EAC1D;AAAA;AAAA,GAEJ;AAEJ;ACvCO,IAAM,2BAAA,GAA8B,mBAAA;AAMpC,IAAM,6BAAA,GAAgC,WAAA;AAatC,SAAS,iBAAA,CAAkB;AAAA,EAChC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA,GAAkB,2BAAA;AAAA,EAClB,GAAG;AACL,CAAA,EAA2B;AACzB,EAAA,uBACEA,IAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,eAAA,EAAiB,SAAS,GAAI,GAAG,IAAA,EACjD,8CACCA,GAAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,0BAA0B,iBAAiB,CAAA,EAAI,QAAA,EAAS,CAAA,GAE3E,QAAA,EAEJ,CAAA;AAEJ;AC7CO,IAAM,gCAAA,GAAwD;AAAA,EACnE,MAAA,EAAQ,qBAAA;AAAA,EACR,SAAA,EAAW;AACb,CAAA;AAEA,IAAM,aAAA,GACJ,sFAAA;AAYK,SAAS,sBAAA,CAAuB;AAAA,EACrC,QAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,eAAA,GAAkB,2BAAA;AAAA,EAClB,iBAAA,GAAoB,6BAAA;AAAA,EACpB,YAAA;AAAA,EACA;AACF,CAAA,EAAgC;AAC9B,EAAA,uBACEA,GAAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,SAAA,EAAU,8BAAA;AAAA,MAEV,QAAA,kBAAAA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,gBAAgB,CAAA;AAAA,UAC7C,KAAA,EAAO,EAAE,GAAG,gCAAA,EAAkC,GAAG,YAAA,EAAa;AAAA,UAC9D,YAAA,EAAY,SAAA;AAAA,UAEX;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;;;ACrDO,IAAM,sCAAA,GACX,sDAAA;AAGK,IAAM,yCAAA,GACX,uCAAA;AAGK,IAAM,yCAAA,GACX,uCAAA;ACgCK,SAAS,sBAAA,CAAuB;AAAA,EACrC,gBAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc,MAAA;AAAA,EACd,cAAA,GAAiB,SAAA;AAAA,EACjB,eAAA,GAAkB,KAAA;AAAA,EAClB,WAAA,GAAc,KAAA;AAAA,EACd,WAAA,GAAc,KAAA;AAAA,EACd,kBAAA,GAAqB,KAAA;AAAA,EACrB,cAAA,GAAiB,KAAA;AAAA,EACjB,eAAA,GAAkB,2BAAA;AAAA,EAClB,iBAAA,GAAoB;AACtB,CAAA,EAAgC;AAC9B,EAAA,uBACEA,GAAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,eAAA;AAAA,MACA,iBAAA;AAAA,MAEA,+BAAC,mBAAA,EAAA,EAAoB,EAAA,EAAI,kBAAkB,SAAA,EAAU,YAAA,EAAa,WAAU,8BAAA,EAC1E,QAAA,EAAA;AAAA,wBAAAA,GAAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,WAAA;AAAA,YACJ,WAAA,EAAa,eAAA;AAAA,YACb,OAAA,EAAS,WAAA;AAAA,YACT,OAAA,EAAS,WAAA;AAAA,YACT,SAAA,EAAW,yCAAA;AAAA,YAEV,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACAA,GAAAA,CAAC,eAAA,EAAA,EAAgB,UAAA,EAAU,IAAA,EAAC,WAAW,sCAAA,EAAwC,CAAA;AAAA,wBAC/EA,GAAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,cAAA;AAAA,YACJ,WAAA,EAAa,kBAAA;AAAA,YACb,OAAA,EAAS,cAAA;AAAA,YACT,SAAA,EAAW,yCAAA;AAAA,YAEV,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"list-page-tree-panel-shell.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { GripVertical } from \"lucide-react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport type { GroupProps, PanelProps, SeparatorProps } from \"react-resizable-panels\"\n\nimport { cn } from \"../../lib/utils\"\n\n// ─── ResizablePanelGroup ──────────────────────────────────────────────────────\n\nexport type ResizablePanelGroupProps = Omit<GroupProps, \"orientation\"> & {\n  direction?: \"horizontal\" | \"vertical\"\n}\n\nexport function ResizablePanelGroup({\n  direction = \"horizontal\",\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <Group\n      orientation={direction}\n      className={cn(\n        \"flex h-full w-full\",\n        direction === \"vertical\" && \"flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// ─── ResizablePanel ───────────────────────────────────────────────────────────\n\nexport type ResizablePanelProps = PanelProps\n\nexport const ResizablePanel = Panel\n\n// ─── ResizableHandle ──────────────────────────────────────────────────────────\n\nexport type ResizableHandleProps = Omit<SeparatorProps, \"children\"> & {\n  /** Render a visible grip icon on the handle. */\n  withHandle?: boolean\n}\n\nexport function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {\n  return (\n    <Separator\n      className={cn(\n        // Base — horizontal handle (between side-by-side panels)\n        \"relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60\",\n        \"transition-colors hover:bg-border active:bg-primary/30\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n        // Vertical handle (between stacked panels)\n        \"data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm\">\n          <GripVertical className=\"h-3 w-3 text-muted-foreground\" />\n        </div>\n      )}\n    </Separator>\n  )\n}\n","\"use client\"\n\n/**\n * ListPageViewFrame — shared horizontal gutter + optional centered max-width\n * for list-hub **view bodies** (folder icon grid, finder panel chrome,\n * OS-style folder explorer, dashboard slices, etc.).\n *\n * MUST be used instead of ad-hoc `mx-4 lg:mx-6` + `mx-auto max-w-*` pairs on\n * each page — see `apps/web/AGENTS.md` §4.5 and\n * `.cursor/rules/exxat-list-page-view-shells.mdc`.\n *\n * MUST NOT wrap `DataTable` when its toolbar already applies the same inset\n * (avoid double gutter); use this for **non-table** view branches or\n * **sections below** the shared toolbar.\n *\n * Promotion note: this file lived at\n * `apps/web/components/data-views/list-page-view-frame.tsx` until\n * 2026-05-20. It moved into `@exxatdesignux/ui` because the gutter / max-\n * width contract is entity-agnostic and other consumers (a future docs\n * site, partner apps) need the same rhythm without dragging in the whole\n * `data-views/` family.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/** Default horizontal rhythm for view bodies under `ListPageTemplate` (matches `FolderGridView`). */\nexport const LIST_PAGE_VIEW_FRAME_GUTTER = \"mx-4 mb-6 lg:mx-6\"\n\n/** Typical max width for icon grids / dense tile views on ultra-wide monitors. */\nexport const LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID = \"max-w-6xl\"\n\n/** Slightly wider shell when a view includes toolbar + breadcrumbs + grid (e.g. OS folder explorer). */\nexport const LIST_PAGE_VIEW_FRAME_MAX_WIDE = \"max-w-7xl\"\n\nexport interface ListPageViewFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /**\n   * When set, children are wrapped in `mx-auto w-full min-w-0` + this\n   * max-width so the block stays centered inside the primary page column.\n   */\n  maxWidthClassName?: string\n  /** Override outer gutter; default `LIST_PAGE_VIEW_FRAME_GUTTER`. */\n  gutterClassName?: string\n}\n\nexport function ListPageViewFrame({\n  children,\n  className,\n  maxWidthClassName,\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  ...rest\n}: ListPageViewFrameProps) {\n  return (\n    <div className={cn(gutterClassName, className)} {...rest}>\n      {maxWidthClassName ? (\n        <div className={cn(\"mx-auto w-full min-w-0\", maxWidthClassName)}>{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n","\"use client\"\n\n/**\n * Shared **centered** chrome for list-hub split surfaces (finder / tree / multi-column explorers).\n *\n * Composes `ListPageViewFrame` (gutter + max width) with a single bordered card + fixed viewport\n * height so panel and tree views match across routes (`AGENTS.md` §4.5).\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport {\n  ListPageViewFrame,\n  LIST_PAGE_VIEW_FRAME_GUTTER,\n  LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n} from \"../ui/list-page-view-frame\"\n\n/** Default height band for split views under `ListPageTemplate` + toolbar. */\nexport const LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE: React.CSSProperties = {\n  height: \"calc(100vh - 280px)\",\n  minHeight: 420,\n}\n\nconst SURFACE_CLASS =\n  \"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card\"\n\nexport interface ListPageSplitHubChromeProps {\n  children: React.ReactNode\n  \"aria-label\"?: string\n  gutterClassName?: string\n  maxWidthClassName?: string\n  /** Override default split viewport height / min-height */\n  surfaceStyle?: React.CSSProperties\n  surfaceClassName?: string\n}\n\nexport function ListPageSplitHubChrome({\n  children,\n  \"aria-label\": ariaLabel,\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n  surfaceStyle,\n  surfaceClassName,\n}: ListPageSplitHubChromeProps) {\n  return (\n    <ListPageViewFrame\n      gutterClassName={gutterClassName}\n      maxWidthClassName={maxWidthClassName}\n      className=\"flex min-h-0 flex-1 flex-col\"\n    >\n      <div\n        className={cn(SURFACE_CLASS, surfaceClassName)}\n        style={{ ...LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ...surfaceStyle }}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </div>\n    </ListPageViewFrame>\n  )\n}\n","/**\n * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).\n * Keeps Question bank panel / tree and generic `FinderPanelView` visually aligned.\n */\n\n/** `ResizableHandle` between miller / tree columns — matches Question bank panel. */\nexport const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =\n  \"w-1 bg-border/40 hover:bg-brand/20 transition-colors\"\n\n/** Primary column stack (scope list, folder list, record list, …). */\nexport const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n\n/** Right-hand inspector / detail column shell. */\nexport const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n","\"use client\"\n\n/**\n * Generic two-pane layout: scrollable **tree / outline** column + **details** column,\n * with persisted split sizes (`ResizablePanelGroup` `id`) and shared **split hub chrome**\n * (`ListPageSplitHubChrome`) so tree views match finder / folder panels across the app.\n *\n * Domain hubs pass `tree` and `details` nodes; this module stays entity-agnostic.\n */\n\nimport * as React from \"react\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"../ui/resizable\"\nimport { ListPageSplitHubChrome } from \"./list-page-split-hub-chrome\"\nimport {\n  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,\n  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,\n  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,\n} from \"./list-page-split-hub-tokens\"\nimport {\n  LIST_PAGE_VIEW_FRAME_GUTTER,\n  LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n} from \"../ui/list-page-view-frame\"\n\nexport interface ListPageTreePanelShellProps {\n  /** Stable id for `react-resizable-panels` layout persistence (per hub / route). */\n  resizableGroupId: string\n  /** Left column (tree chrome + body). */\n  tree: React.ReactNode\n  /** Right column (detail / inspector). */\n  details: React.ReactNode\n  /** Accessible name for the split surface, e.g. “Curriculum tree and details”. */\n  ariaLabel: string\n  treePanelId?: string\n  detailsPanelId?: string\n  treeDefaultSize?: string\n  treeMinSize?: string\n  treeMaxSize?: string\n  detailsDefaultSize?: string\n  detailsMinSize?: string\n  gutterClassName?: string\n  maxWidthClassName?: string\n}\n\nexport function ListPageTreePanelShell({\n  resizableGroupId,\n  tree,\n  details,\n  ariaLabel,\n  treePanelId = \"tree\",\n  detailsPanelId = \"details\",\n  treeDefaultSize = \"40%\",\n  treeMinSize = \"20%\",\n  treeMaxSize = \"60%\",\n  detailsDefaultSize = \"60%\",\n  detailsMinSize = \"30%\",\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n}: ListPageTreePanelShellProps) {\n  return (\n    <ListPageSplitHubChrome\n      aria-label={ariaLabel}\n      gutterClassName={gutterClassName}\n      maxWidthClassName={maxWidthClassName}\n    >\n      <ResizablePanelGroup id={resizableGroupId} direction=\"horizontal\" className=\"h-full min-h-0 w-full flex-1\">\n        <ResizablePanel\n          id={treePanelId}\n          defaultSize={treeDefaultSize}\n          minSize={treeMinSize}\n          maxSize={treeMaxSize}\n          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}\n        >\n          {tree}\n        </ResizablePanel>\n        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />\n        <ResizablePanel\n          id={detailsPanelId}\n          defaultSize={detailsDefaultSize}\n          minSize={detailsMinSize}\n          className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}\n        >\n          {details}\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ListPageSplitHubChrome>\n  )\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/resizable.tsx","../../../src/components/ui/list-page-view-frame.tsx","../../../src/components/data-views/list-page-split-hub-chrome.tsx","../../../src/components/data-views/list-page-split-hub-tokens.ts","../../../src/components/data-views/list-page-tree-panel-shell.tsx"],"names":["jsx"],"mappings":"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","file":"list-page-tree-panel-shell.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { GripVertical } from \"lucide-react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport type { GroupProps, PanelProps, SeparatorProps } from \"react-resizable-panels\"\n\nimport { cn } from \"../../lib/utils\"\n\n// ─── ResizablePanelGroup ──────────────────────────────────────────────────────\n\nexport type ResizablePanelGroupProps = Omit<GroupProps, \"orientation\"> & {\n  direction?: \"horizontal\" | \"vertical\"\n}\n\nexport function ResizablePanelGroup({\n  direction = \"horizontal\",\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <Group\n      orientation={direction}\n      className={cn(\n        \"flex h-full w-full\",\n        direction === \"vertical\" && \"flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// ─── ResizablePanel ───────────────────────────────────────────────────────────\n\nexport type ResizablePanelProps = PanelProps\n\nexport const ResizablePanel = Panel\n\n// ─── ResizableHandle ──────────────────────────────────────────────────────────\n\nexport type ResizableHandleProps = Omit<SeparatorProps, \"children\"> & {\n  /** Render a visible grip icon on the handle. */\n  withHandle?: boolean\n}\n\nexport function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {\n  return (\n    <Separator\n      className={cn(\n        // Base — horizontal handle (between side-by-side panels)\n        \"relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60\",\n        \"transition-colors hover:bg-border active:bg-primary/30\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n        // Vertical handle (between stacked panels)\n        \"data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm\">\n          <GripVertical className=\"h-3 w-3 text-muted-foreground\" />\n        </div>\n      )}\n    </Separator>\n  )\n}\n","\"use client\"\n\n/**\n * ListPageViewFrame — shared horizontal gutter + optional centered max-width\n * for list-hub **view bodies** (folder icon grid, finder panel chrome,\n * OS-style folder explorer, dashboard slices, etc.).\n *\n * MUST be used instead of ad-hoc `mx-4 lg:mx-6` + `mx-auto max-w-*` pairs on\n * each page — see `apps/web/AGENTS.md` §4.5 and\n * `.cursor/rules/exxat-list-page-view-shells.mdc`.\n *\n * MUST NOT wrap `DataTable` when its toolbar already applies the same inset\n * (avoid double gutter); use this for **non-table** view branches or\n * **sections below** the shared toolbar.\n *\n * Promotion note: this file lived at\n * `apps/web/components/data-views/list-page-view-frame.tsx` until\n * 2026-05-20. It moved into `@exxatdesignux/ui` because the gutter / max-\n * width contract is entity-agnostic and other consumers (a future docs\n * site, partner apps) need the same rhythm without dragging in the whole\n * `data-views/` family.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/** Default horizontal rhythm for view bodies under `ListPageTemplate` (matches `FolderGridView`). */\nexport const LIST_PAGE_VIEW_FRAME_GUTTER = \"mx-4 mb-6 lg:mx-6\"\n\n/** Typical max width for icon grids / dense tile views on ultra-wide monitors. */\nexport const LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID = \"max-w-6xl\"\n\n/** Slightly wider shell when a view includes toolbar + breadcrumbs + grid (e.g. OS folder explorer). */\nexport const LIST_PAGE_VIEW_FRAME_MAX_WIDE = \"max-w-7xl\"\n\nexport interface ListPageViewFrameProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /**\n   * When set, children are wrapped in `mx-auto w-full min-w-0` + this\n   * max-width so the block stays centered inside the primary page column.\n   */\n  maxWidthClassName?: string\n  /** Override outer gutter; default `LIST_PAGE_VIEW_FRAME_GUTTER`. */\n  gutterClassName?: string\n}\n\nexport function ListPageViewFrame({\n  children,\n  className,\n  maxWidthClassName,\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  ...rest\n}: ListPageViewFrameProps) {\n  return (\n    <div className={cn(gutterClassName, className)} {...rest}>\n      {maxWidthClassName ? (\n        <div className={cn(\"mx-auto w-full min-w-0\", maxWidthClassName)}>{children}</div>\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n","\"use client\"\n\n/**\n * Shared **centered** chrome for list-hub split surfaces (finder / tree / multi-column explorers).\n *\n * Composes `ListPageViewFrame` (gutter + max width) with a single bordered card + fixed viewport\n * height so panel and tree views match across routes (`AGENTS.md` §4.5).\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport {\n  ListPageViewFrame,\n  LIST_PAGE_VIEW_FRAME_GUTTER,\n  LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n} from \"../ui/list-page-view-frame\"\n\n/** Default height band for split views under `ListPageTemplate` + toolbar. */\nexport const LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE: React.CSSProperties = {\n  height: \"calc(100vh - 280px)\",\n  minHeight: 420,\n}\n\nconst SURFACE_CLASS =\n  \"flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card\"\n\nexport interface ListPageSplitHubChromeProps {\n  children: React.ReactNode\n  \"aria-label\"?: string\n  gutterClassName?: string\n  maxWidthClassName?: string\n  /** Override default split viewport height / min-height */\n  surfaceStyle?: React.CSSProperties\n  surfaceClassName?: string\n}\n\nexport function ListPageSplitHubChrome({\n  children,\n  \"aria-label\": ariaLabel,\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n  surfaceStyle,\n  surfaceClassName,\n}: ListPageSplitHubChromeProps) {\n  return (\n    <ListPageViewFrame\n      gutterClassName={gutterClassName}\n      maxWidthClassName={maxWidthClassName}\n      className=\"flex min-h-0 flex-1 flex-col\"\n    >\n      <div\n        className={cn(SURFACE_CLASS, surfaceClassName)}\n        style={{ ...LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ...surfaceStyle }}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </div>\n    </ListPageViewFrame>\n  )\n}\n","/**\n * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).\n * Keeps Library panel / tree and generic `FinderPanelView` visually aligned.\n */\n\n/** `ResizableHandle` between miller / tree columns — matches Library panel. */\nexport const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =\n  \"w-1 bg-border/40 hover:bg-brand/20 transition-colors\"\n\n/** Primary column stack (scope list, folder list, record list, …). */\nexport const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n\n/** Right-hand inspector / detail column shell. */\nexport const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =\n  \"flex min-h-0 min-w-0 flex-col bg-card\"\n","\"use client\"\n\n/**\n * Generic two-pane layout: scrollable **tree / outline** column + **details** column,\n * with persisted split sizes (`ResizablePanelGroup` `id`) and shared **split hub chrome**\n * (`ListPageSplitHubChrome`) so tree views match finder / folder panels across the app.\n *\n * Domain hubs pass `tree` and `details` nodes; this module stays entity-agnostic.\n */\n\nimport * as React from \"react\"\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"../ui/resizable\"\nimport { ListPageSplitHubChrome } from \"./list-page-split-hub-chrome\"\nimport {\n  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,\n  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,\n  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,\n} from \"./list-page-split-hub-tokens\"\nimport {\n  LIST_PAGE_VIEW_FRAME_GUTTER,\n  LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n} from \"../ui/list-page-view-frame\"\n\nexport interface ListPageTreePanelShellProps {\n  /** Stable id for `react-resizable-panels` layout persistence (per hub / route). */\n  resizableGroupId: string\n  /** Left column (tree chrome + body). */\n  tree: React.ReactNode\n  /** Right column (detail / inspector). */\n  details: React.ReactNode\n  /** Accessible name for the split surface, e.g. “Curriculum tree and details”. */\n  ariaLabel: string\n  treePanelId?: string\n  detailsPanelId?: string\n  treeDefaultSize?: string\n  treeMinSize?: string\n  treeMaxSize?: string\n  detailsDefaultSize?: string\n  detailsMinSize?: string\n  gutterClassName?: string\n  maxWidthClassName?: string\n}\n\nexport function ListPageTreePanelShell({\n  resizableGroupId,\n  tree,\n  details,\n  ariaLabel,\n  treePanelId = \"tree\",\n  detailsPanelId = \"details\",\n  treeDefaultSize = \"40%\",\n  treeMinSize = \"20%\",\n  treeMaxSize = \"60%\",\n  detailsDefaultSize = \"60%\",\n  detailsMinSize = \"30%\",\n  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,\n  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,\n}: ListPageTreePanelShellProps) {\n  return (\n    <ListPageSplitHubChrome\n      aria-label={ariaLabel}\n      gutterClassName={gutterClassName}\n      maxWidthClassName={maxWidthClassName}\n    >\n      <ResizablePanelGroup id={resizableGroupId} direction=\"horizontal\" className=\"h-full min-h-0 w-full flex-1\">\n        <ResizablePanel\n          id={treePanelId}\n          defaultSize={treeDefaultSize}\n          minSize={treeMinSize}\n          maxSize={treeMaxSize}\n          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}\n        >\n          {tree}\n        </ResizablePanel>\n        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />\n        <ResizablePanel\n          id={detailsPanelId}\n          defaultSize={detailsDefaultSize}\n          minSize={detailsMinSize}\n          className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}\n        >\n          {details}\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ListPageSplitHubChrome>\n  )\n}\n"]}

package/dist/components/data-views/os-folder-glyph.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Color palette tones shared across folder hubs. Domain-specific palette
- * names (e.g. `QuestionBankFolderColorKey`) are structurally identical to
+ * names (e.g. `LibraryFolderColorKey`) are structurally identical to
  * this union and pass through without conversion.
  */
 type FolderGlyphColorKey = "brand" | "success" | "warning" | "destructive" | "muted" | "chart1" | "chart2" | "chart3";

package/dist/components/data-views/os-folder-glyph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/os-folder-glyph.tsx"],"names":[],"mappings":"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","file":"os-folder-glyph.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.\n * Static asset: `public/folders/icons8-folder-windows-11.svg`\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\n/**\n * Color palette tones shared across folder hubs. Domain-specific palette\n * names (e.g. `QuestionBankFolderColorKey`) are structurally identical to\n * this union and pass through without conversion.\n */\nexport type FolderGlyphColorKey =\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"destructive\"\n  | \"muted\"\n  | \"chart1\"\n  | \"chart2\"\n  | \"chart3\"\n\n/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */\nexport const OS_FOLDER_GLYPH_SRC = \"/folders/icons8-folder-windows-11.svg\"\n\n/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */\nconst COLOR_TINT_FILTER: Record<FolderGlyphColorKey, string> = {\n  brand: \"hue-rotate(-42deg) saturate(1.25) brightness(0.97)\",\n  success: \"hue-rotate(82deg) saturate(1.2) brightness(0.95)\",\n  warning: \"hue-rotate(-5deg) saturate(1.35) brightness(1.02)\",\n  destructive: \"hue-rotate(300deg) saturate(1.15) brightness(0.92)\",\n  muted: \"saturate(0.15) brightness(1.08)\",\n  chart1: \"hue-rotate(200deg) saturate(1.2) brightness(0.96)\",\n  chart2: \"hue-rotate(95deg) saturate(1.15) brightness(0.96)\",\n  chart3: \"hue-rotate(265deg) saturate(1.2) brightness(0.96)\",\n}\n\nconst SIZE_MAP = {\n  /** Compact — folder inspector / column headers (matches ~36px row height). */\n  xs: \"h-9 w-[2.6rem]\",\n  sm: \"h-[3.35rem] w-[3.85rem]\",\n  md: \"h-[4.6rem] w-[5.25rem]\",\n  lg: \"h-[6.5rem] w-[7.25rem]\",\n}\n\nconst ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {\n  xs: \"text-[13px] leading-none\",\n  sm: \"text-lg\",\n  md: \"text-2xl\",\n  lg: \"text-4xl\",\n}\n\n/** Darker version of each folder color for punched icon appearance. */\nconst ICON_COLOR: Record<FolderGlyphColorKey, string> = {\n  brand: \"text-orange-800 dark:text-orange-600\",\n  success: \"text-emerald-800 dark:text-emerald-600\",\n  warning: \"text-amber-800 dark:text-amber-600\",\n  destructive: \"text-red-800 dark:text-red-600\",\n  muted: \"text-slate-600 dark:text-slate-400\",\n  chart1: \"text-blue-800 dark:text-blue-600\",\n  chart2: \"text-lime-800 dark:text-lime-600\",\n  chart3: \"text-purple-800 dark:text-purple-600\",\n}\n\nexport interface OsFolderGlyphProps {\n  colorKey: FolderGlyphColorKey\n  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */\n  icon: string\n  size?: keyof typeof SIZE_MAP\n  className?: string\n  variant?: \"solid\" | \"outline\"\n  /**\n   * When false, exposes `role=\"img\"` + `aria-label` (use with a short label, e.g. sheet preview).\n   * When true (default), hides the glyph from AT — parent control should name the action.\n   */\n  decorative?: boolean\n  /** Required when `decorative={false}` */\n  label?: string\n}\n\nexport function OsFolderGlyph({\n  colorKey,\n  icon,\n  size = \"md\",\n  className,\n  variant = \"solid\",\n  decorative = true,\n  label,\n}: OsFolderGlyphProps) {\n  const outline = variant === \"outline\"\n  const tint = COLOR_TINT_FILTER[colorKey]\n\n  return (\n    <div\n      className={cn(\n        \"group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out\",\n        \"hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100\",\n        SIZE_MAP[size],\n        className,\n      )}\n      role={!decorative && label ? \"img\" : undefined}\n      aria-label={!decorative ? label : undefined}\n      aria-hidden={decorative ? true : undefined}\n    >\n      {/* Static SVG — design-system ships an HTML `<img>` so non-Next consumers\n          (Vite, Remix, plain CRA) can use it without `next/image`. Folder\n          grids render many of these at once; lazy-loading lets the browser\n          skip off-screen glyphs until they scroll near the viewport. */}\n      <img\n        src={OS_FOLDER_GLYPH_SRC}\n        alt=\"\"\n        width={240}\n        height={240}\n        draggable={false}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className={cn(\n          \"h-full w-full object-contain\",\n          \"transition-[filter] duration-200\",\n          outline && \"opacity-75 saturate-[0.65]\",\n        )}\n        style={outline ? undefined : { filter: tint }}\n      />\n      <span\n        className={cn(\n          \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n          size === \"xs\" ? \"translate-y-[0.18rem]\" : \"translate-y-[0.35rem]\",\n          ICON_TEXT[size],\n          outline\n            ? \"text-muted-foreground\"\n            : cn(ICON_COLOR[colorKey], \"opacity-100\"),\n        )}\n      >\n        <i className={cn(\"fa-solid\", icon)} aria-hidden=\"true\" />\n      </span>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/os-folder-glyph.tsx"],"names":[],"mappings":"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","file":"os-folder-glyph.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.\n * Static asset: `public/folders/icons8-folder-windows-11.svg`\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\n/**\n * Color palette tones shared across folder hubs. Domain-specific palette\n * names (e.g. `LibraryFolderColorKey`) are structurally identical to\n * this union and pass through without conversion.\n */\nexport type FolderGlyphColorKey =\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"destructive\"\n  | \"muted\"\n  | \"chart1\"\n  | \"chart2\"\n  | \"chart3\"\n\n/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */\nexport const OS_FOLDER_GLYPH_SRC = \"/folders/icons8-folder-windows-11.svg\"\n\n/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */\nconst COLOR_TINT_FILTER: Record<FolderGlyphColorKey, string> = {\n  brand: \"hue-rotate(-42deg) saturate(1.25) brightness(0.97)\",\n  success: \"hue-rotate(82deg) saturate(1.2) brightness(0.95)\",\n  warning: \"hue-rotate(-5deg) saturate(1.35) brightness(1.02)\",\n  destructive: \"hue-rotate(300deg) saturate(1.15) brightness(0.92)\",\n  muted: \"saturate(0.15) brightness(1.08)\",\n  chart1: \"hue-rotate(200deg) saturate(1.2) brightness(0.96)\",\n  chart2: \"hue-rotate(95deg) saturate(1.15) brightness(0.96)\",\n  chart3: \"hue-rotate(265deg) saturate(1.2) brightness(0.96)\",\n}\n\nconst SIZE_MAP = {\n  /** Compact — folder inspector / column headers (matches ~36px row height). */\n  xs: \"h-9 w-[2.6rem]\",\n  sm: \"h-[3.35rem] w-[3.85rem]\",\n  md: \"h-[4.6rem] w-[5.25rem]\",\n  lg: \"h-[6.5rem] w-[7.25rem]\",\n}\n\nconst ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {\n  xs: \"text-[13px] leading-none\",\n  sm: \"text-lg\",\n  md: \"text-2xl\",\n  lg: \"text-4xl\",\n}\n\n/** Darker version of each folder color for punched icon appearance. */\nconst ICON_COLOR: Record<FolderGlyphColorKey, string> = {\n  brand: \"text-orange-800 dark:text-orange-600\",\n  success: \"text-emerald-800 dark:text-emerald-600\",\n  warning: \"text-amber-800 dark:text-amber-600\",\n  destructive: \"text-red-800 dark:text-red-600\",\n  muted: \"text-slate-600 dark:text-slate-400\",\n  chart1: \"text-blue-800 dark:text-blue-600\",\n  chart2: \"text-lime-800 dark:text-lime-600\",\n  chart3: \"text-purple-800 dark:text-purple-600\",\n}\n\nexport interface OsFolderGlyphProps {\n  colorKey: FolderGlyphColorKey\n  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */\n  icon: string\n  size?: keyof typeof SIZE_MAP\n  className?: string\n  variant?: \"solid\" | \"outline\"\n  /**\n   * When false, exposes `role=\"img\"` + `aria-label` (use with a short label, e.g. sheet preview).\n   * When true (default), hides the glyph from AT — parent control should name the action.\n   */\n  decorative?: boolean\n  /** Required when `decorative={false}` */\n  label?: string\n}\n\nexport function OsFolderGlyph({\n  colorKey,\n  icon,\n  size = \"md\",\n  className,\n  variant = \"solid\",\n  decorative = true,\n  label,\n}: OsFolderGlyphProps) {\n  const outline = variant === \"outline\"\n  const tint = COLOR_TINT_FILTER[colorKey]\n\n  return (\n    <div\n      className={cn(\n        \"group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out\",\n        \"hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100\",\n        SIZE_MAP[size],\n        className,\n      )}\n      role={!decorative && label ? \"img\" : undefined}\n      aria-label={!decorative ? label : undefined}\n      aria-hidden={decorative ? true : undefined}\n    >\n      {/* Static SVG — design-system ships an HTML `<img>` so non-Next consumers\n          (Vite, Remix, plain CRA) can use it without `next/image`. Folder\n          grids render many of these at once; lazy-loading lets the browser\n          skip off-screen glyphs until they scroll near the viewport. */}\n      <img\n        src={OS_FOLDER_GLYPH_SRC}\n        alt=\"\"\n        width={240}\n        height={240}\n        draggable={false}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className={cn(\n          \"h-full w-full object-contain\",\n          \"transition-[filter] duration-200\",\n          outline && \"opacity-75 saturate-[0.65]\",\n        )}\n        style={outline ? undefined : { filter: tint }}\n      />\n      <span\n        className={cn(\n          \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n          size === \"xs\" ? \"translate-y-[0.18rem]\" : \"translate-y-[0.35rem]\",\n          ICON_TEXT[size],\n          outline\n            ? \"text-muted-foreground\"\n            : cn(ICON_COLOR[colorKey], \"opacity-100\"),\n        )}\n      >\n        <i className={cn(\"fa-solid\", icon)} aria-hidden=\"true\" />\n      </span>\n    </div>\n  )\n}\n"]}

package/dist/components/ui/avatar.d.ts

@@ -7,7 +7,7 @@ import { VariantProps } from 'class-variance-authority';
 /** Maps to Shadcn Studio avatar demos (shape / ring / stack). Uses theme tokens only. */
 declare const avatarRootVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
-    shape?: "circle" | "square" | "rounded-lg" | "rounded-sm" | "rounded-md" | "rounded-xl" | null | undefined;
+    shape?: "circle" | "square" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xl" | null | undefined;
     variant?: "default" | "group" | "ring" | "ring-offset" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AvatarProps = React.ComponentProps<typeof Avatar$1.Root> & VariantProps<typeof avatarRootVariants> & {