@exxatdesignux/ui 0.2.19 → 0.4.0

package/dist/components/data-views/list-page-connected-view-body.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/lib/data-list-view.ts
+var DATA_LIST_VIEW_TILES = [
+  { value: "table", icon: "fa-table", label: "Table view" },
+  { value: "list", icon: "fa-list", label: "List view" },
+  { value: "board", icon: "fa-table-columns", label: "Board view" },
+  { value: "dashboard", icon: "fa-chart-mixed", label: "Dashboard view" },
+  { value: "calendar", icon: "fa-calendar-days", label: "Calendar view" },
+  { value: "folder", icon: "fa-grid-2", label: "Folder view" },
+  { value: "panel", icon: "fa-sidebar", label: "List & details" },
+  { value: "tree-panel", icon: "fa-sitemap", label: "Tree & details" }
+];
+function dataListViewLabel(view) {
+  return DATA_LIST_VIEW_TILES.find((t) => t.value === view)?.label ?? view;
+}
+
+// src/lib/data-list-view-surface.ts
+function getDataListViewRenderKind(view) {
+  switch (view) {
+    case "table":
+      return "data-table";
+    case "list":
+      return "list-with-toolbar";
+    case "board":
+      return "board-with-toolbar";
+    case "dashboard":
+      return "dashboard-with-toolbar";
+    case "calendar":
+      return "calendar-with-toolbar";
+    case "folder":
+      return "folder-with-toolbar";
+    case "panel":
+      return "panel-with-toolbar";
+    case "tree-panel":
+      return "tree-panel-with-toolbar";
+    default: {
+      const _x = view;
+      return _x;
+    }
+  }
+}
+
+// src/lib/data-list-view-registry.ts
+var DEFINITIONS = DATA_LIST_VIEW_TILES.map((tile) => {
+  const renderKind = getDataListViewRenderKind(tile.value);
+  const hubMetricsStrip = renderKind !== "calendar-with-toolbar" && renderKind !== "dashboard-with-toolbar";
+  return {
+    value: tile.value,
+    label: tile.label,
+    icon: tile.icon,
+    renderKind,
+    hubMetricsStrip
+  };
+});
+var BY_VALUE = new Map(
+  DEFINITIONS.map((d) => [d.value, d])
+);
+var DATA_LIST_VIEW_REGISTRY = DEFINITIONS;
+function dataListViewDefinition(view) {
+  const def = BY_VALUE.get(view);
+  if (!def) {
+    throw new Error(`Unknown DataListViewType: ${view}`);
+  }
+  return def;
+}
+new Set(
+  DATA_LIST_VIEW_REGISTRY.map((d) => d.value)
+);
+function resolveRenderer(node) {
+  if (node == null) return null;
+  return typeof node === "function" ? node() : node;
+}
+function ListPageViewNotConfigured({
+  view,
+  hubLabel = "This hub"
+}) {
+  const label = dataListViewLabel(view);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-1 items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground",
+      role: "status",
+      children: [
+        hubLabel,
+        " does not implement ",
+        label,
+        ". Add a renderer for",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: dataListViewDefinition(view).renderKind }),
+        " ",
+        "in this hub's table component, or remove the view from",
+        " ",
+        /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-xs", children: "supportedViewTypes" }),
+        "."
+      ]
+    }
+  );
+}
+function ListPageConnectedViewBody({
+  view,
+  hubLabel,
+  renderers
+}) {
+  const kind = getDataListViewRenderKind(view);
+  const body = resolveRenderer(renderers[kind]);
+  if (body == null) {
+    return /* @__PURE__ */ jsx(ListPageViewNotConfigured, { view, hubLabel });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: body });
+}
+
+export { ListPageConnectedViewBody, ListPageViewNotConfigured };
+//# sourceMappingURL=list-page-connected-view-body.js.map
+//# sourceMappingURL=list-page-connected-view-body.js.map

package/dist/components/data-views/list-page-connected-view-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/data-list-view.ts","../../../src/lib/data-list-view-surface.ts","../../../src/lib/data-list-view-registry.ts","../../../src/components/data-views/list-page-connected-view-body.tsx"],"names":[],"mappings":"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","file":"list-page-connected-view-body.js","sourcesContent":["/**\n * Data list “view type” — shared by Properties drawer, ListPageTemplate tabs, and client state.\n *\n * **Single source of truth** for view labels/icons: use `DATA_LIST_VIEW_TILES` and\n * `dataListViewLabel` / `dataListViewIcon` on every page so Table / List / Board / Dashboard\n * stay consistent and stay wired to the same `useTableState` dataset (see `docs/data-views-pattern.md`).\n */\nexport type DataListViewType =\n  | \"table\"\n  | \"list\"\n  | \"board\"\n  | \"dashboard\"\n  | \"calendar\"\n  | \"folder\"\n  | \"panel\"\n  | \"tree-panel\"\n\nexport const DATA_LIST_VIEW_TILES: readonly {\n  value: DataListViewType\n  label: string\n  icon: string\n}[] = [\n  { value: \"table\",     icon: \"fa-table\",         label: \"Table view\" },\n  { value: \"list\",      icon: \"fa-list\",          label: \"List view\" },\n  { value: \"board\",     icon: \"fa-table-columns\", label: \"Board view\" },\n  { value: \"dashboard\", icon: \"fa-chart-mixed\",   label: \"Dashboard view\" },\n  { value: \"calendar\",  icon: \"fa-calendar-days\", label: \"Calendar view\" },\n  { value: \"folder\",    icon: \"fa-grid-2\",        label: \"Folder view\" },\n  { value: \"panel\",      icon: \"fa-sidebar\",      label: \"List & details\" },\n  { value: \"tree-panel\", icon: \"fa-sitemap\",      label: \"Tree & details\" },\n]\n\n/** User-facing name for tabs, Properties summary rows, and tooltips (not entity-specific). */\nexport function dataListViewLabel(view: DataListViewType): string {\n  return DATA_LIST_VIEW_TILES.find(t => t.value === view)?.label ?? view\n}\n\n/** Font Awesome icon class (no prefix) for tab / toolbar state when view changes. */\nexport function dataListViewIcon(view: DataListViewType): string {\n  return DATA_LIST_VIEW_TILES.find(t => t.value === view)?.icon ?? \"fa-table\"\n}\n\n/** Add-view menu hint + `<Shortcut>` keys (1–9). Skipped in inputs via `useShortcut`. */\nexport function dataListViewAddShortcut(index: number): string | undefined {\n  if (index < 0 || index > 8) return undefined\n  return String(index + 1)\n}\n","/**\n * Maps `DataListViewType` to the UI surface pattern for list pages.\n *\n * **Data:** One `useTableState(fullRows, columns, …)` per tab; **filtered/sorted rows**\n * (`tableState.rows`) are the single source of truth for List, Board, and Dashboard.\n * Table view renders the same state via `DataTable`.\n *\n * | View        | Surface |\n * |------------|---------|\n * | `table`    | `DataTable` |\n * | `list`     | `DataTableToolbar` + list layout |\n * | `board`    | `DataTableToolbar` + board / kanban |\n * | `dashboard`| `DataTableToolbar` + KPI (`KeyMetrics`) + optional charts (`ChartCard`, Recharts, etc.) |\n * | `calendar` | `DataTableToolbar` + `ListPageCalendarView` (month grid + day detail) |\n * | `folder`   | `DataTableToolbar` + icon grid (macOS-Finder-style) |\n * | `panel`    | `DataTableToolbar` + resizable split (list / tree column + detail inspector) |\n */\n\nimport type { DataListViewType } from \"./data-list-view\"\n\nexport { showsListPageHubMetricsStrip } from \"./data-list-view-registry\"\n\n/** What to render for the active view tab (routing / branching). */\nexport type DataListViewRenderKind =\n  | \"data-table\"\n  | \"list-with-toolbar\"\n  | \"board-with-toolbar\"\n  | \"dashboard-with-toolbar\"\n  | \"calendar-with-toolbar\"\n  | \"folder-with-toolbar\"\n  | \"panel-with-toolbar\"\n  | \"tree-panel-with-toolbar\"\n\n/**\n * Stable classification for switch/if chains. **Every** `DataListViewType` maps to exactly one kind.\n * Use this so `dashboard` is never mistaken for `board` (a common bug when only `list` is special-cased).\n */\nexport function getDataListViewRenderKind(view: DataListViewType): DataListViewRenderKind {\n  switch (view) {\n    case \"table\":\n      return \"data-table\"\n    case \"list\":\n      return \"list-with-toolbar\"\n    case \"board\":\n      return \"board-with-toolbar\"\n    case \"dashboard\":\n      return \"dashboard-with-toolbar\"\n    case \"calendar\":\n      return \"calendar-with-toolbar\"\n    case \"folder\":\n      return \"folder-with-toolbar\"\n    case \"panel\":\n      return \"panel-with-toolbar\"\n    case \"tree-panel\":\n      return \"tree-panel-with-toolbar\"\n    default: {\n      const _x: never = view\n      return _x\n    }\n  }\n}\n\nexport function usesDataTableComponent(view: DataListViewType): boolean {\n  return view === \"table\"\n}\n\n/** KPI band + optional charts — not the kanban board. */\nexport function usesDashboardSurface(view: DataListViewType): boolean {\n  return view === \"dashboard\"\n}\n\n/** Shared toolbar (search, filters, properties); body differs by view. */\nexport function usesToolbarWithFilteredRows(view: DataListViewType): boolean {\n  return (\n    view === \"list\" ||\n    view === \"board\" ||\n    view === \"dashboard\" ||\n    view === \"calendar\" ||\n    view === \"folder\" ||\n    view === \"panel\" ||\n    view === \"tree-panel\"\n  )\n}\n","/**\n * Central registry for list-page view types — labels, render kinds, and hub chrome rules.\n *\n * **Add a new view once here** (plus a body in `components/data-views/`). Hubs declare\n * `supportedViewTypes` on `ListPageTemplate`; table components branch with\n * `getDataListViewRenderKind` + `ListPageConnectedViewBody` (never a dashboard fallback).\n *\n * @see `docs/data-views-pattern.md` — \"View registry and connected bodies\"\n */\n\nimport {\n  DATA_LIST_VIEW_TILES,\n  type DataListViewType,\n  dataListViewAddShortcut,\n  dataListViewIcon,\n  dataListViewLabel,\n} from \"./data-list-view\"\nimport {\n  getDataListViewRenderKind,\n  type DataListViewRenderKind,\n} from \"./data-list-view-surface\"\n\nexport interface DataListViewDefinition {\n  value: DataListViewType\n  label: string\n  icon: string\n  renderKind: DataListViewRenderKind\n  /** `ListPageTemplate` metrics slot above the views toolbar. */\n  hubMetricsStrip: boolean\n}\n\nconst DEFINITIONS: DataListViewDefinition[] = DATA_LIST_VIEW_TILES.map(tile => {\n  const renderKind = getDataListViewRenderKind(tile.value)\n  const hubMetricsStrip = renderKind !== \"calendar-with-toolbar\" && renderKind !== \"dashboard-with-toolbar\"\n  return {\n    value: tile.value,\n    label: tile.label,\n    icon: tile.icon,\n    renderKind,\n    hubMetricsStrip,\n  }\n})\n\nconst BY_VALUE = new Map<DataListViewType, DataListViewDefinition>(\n  DEFINITIONS.map(d => [d.value, d]),\n)\n\nexport const DATA_LIST_VIEW_REGISTRY: readonly DataListViewDefinition[] = DEFINITIONS\n\nexport function dataListViewDefinition(view: DataListViewType): DataListViewDefinition {\n  const def = BY_VALUE.get(view)\n  if (!def) {\n    throw new Error(`Unknown DataListViewType: ${view}`)\n  }\n  return def\n}\n\n/** `ListPageTemplate` hub KPI strip — false for calendar and dashboard (inline KPIs). */\nexport function showsListPageHubMetricsStrip(view: DataListViewType): boolean {\n  return dataListViewDefinition(view).hubMetricsStrip\n}\n\n/** Tiles for Add view + Properties when a hub only supports a subset of views. */\nexport function dataListViewTilesForHub(supported: readonly DataListViewType[]) {\n  const allowed = new Set(supported)\n  return DATA_LIST_VIEW_REGISTRY.filter(d => allowed.has(d.value)).map(d => ({\n    type: d.value,\n    label: d.label,\n    icon: d.icon,\n  }))\n}\n\n/** `SelectionTileGrid` options for Properties when a hub supports a subset of views. */\nexport function dataListViewSelectionTilesForHub(supported: readonly DataListViewType[]) {\n  return dataListViewTilesForHub(supported).map(t => ({\n    value: t.type,\n    label: t.label,\n    icon: t.icon,\n  }))\n}\n\n/** View types that expose Table Properties (all registered `DataListViewType` values). */\nexport const DATA_LIST_SURFACE_VIEW_TYPES: ReadonlySet<DataListViewType> = new Set(\n  DATA_LIST_VIEW_REGISTRY.map(d => d.value),\n)\n\nexport function isDataListSurfaceViewType(viewType: string): viewType is DataListViewType {\n  return DATA_LIST_SURFACE_VIEW_TYPES.has(viewType as DataListViewType)\n}\n\nexport function isDataListViewTypeSupported(\n  view: DataListViewType,\n  supported: readonly DataListViewType[],\n): boolean {\n  return supported.includes(view)\n}\n\nexport {\n  dataListViewAddShortcut,\n  dataListViewIcon,\n  dataListViewLabel,\n  getDataListViewRenderKind,\n  type DataListViewRenderKind,\n}\n","\"use client\"\n\n/**\n * Switches list-hub view bodies by `DataListViewRenderKind`.\n * Hubs pass one renderer per kind they support; missing kinds show a clear empty state\n * (never silently fall through to dashboard).\n */\n\nimport * as React from \"react\"\nimport type { DataListViewType } from \"../../lib/data-list-view\"\nimport {\n  dataListViewDefinition,\n  dataListViewLabel,\n  getDataListViewRenderKind,\n  type DataListViewRenderKind,\n} from \"../../lib/data-list-view-registry\"\n\nexport type ListPageConnectedViewRenderers = Partial<\n  Record<DataListViewRenderKind, React.ReactNode | (() => React.ReactNode)>\n>\n\nexport interface ListPageConnectedViewBodyProps {\n  view: DataListViewType\n  /** Human-readable hub name for the not-configured state. */\n  hubLabel?: string\n  renderers: ListPageConnectedViewRenderers\n}\n\nfunction resolveRenderer(node: React.ReactNode | (() => React.ReactNode) | undefined) {\n  if (node == null) return null\n  return typeof node === \"function\" ? node() : node\n}\n\nexport function ListPageViewNotConfigured({\n  view,\n  hubLabel = \"This hub\",\n}: {\n  view: DataListViewType\n  hubLabel?: string\n}) {\n  const label = dataListViewLabel(view)\n  return (\n    <div\n      className=\"flex flex-1 items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground\"\n      role=\"status\"\n    >\n      {hubLabel} does not implement {label}. Add a renderer for{\" \"}\n      <span className=\"font-medium text-foreground\">{dataListViewDefinition(view).renderKind}</span>{\" \"}\n      in this hub&apos;s table component, or remove the view from{\" \"}\n      <code className=\"rounded bg-muted px-1 py-0.5 text-xs\">supportedViewTypes</code>.\n    </div>\n  )\n}\n\nexport function ListPageConnectedViewBody({\n  view,\n  hubLabel,\n  renderers,\n}: ListPageConnectedViewBodyProps) {\n  const kind = getDataListViewRenderKind(view)\n  const body = resolveRenderer(renderers[kind])\n  if (body == null) {\n    return <ListPageViewNotConfigured view={view} hubLabel={hubLabel} />\n  }\n  return <>{body}</>\n}\n"]}

package/dist/components/data-views/list-page-split-details-placeholder.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ListPageSplitDetailsPlaceholderProps {
+    title?: string;
+    description?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.
+ */
+declare function ListPageSplitDetailsPlaceholder({ title, description, className, }: ListPageSplitDetailsPlaceholderProps): react_jsx_runtime.JSX.Element;
+
+export { ListPageSplitDetailsPlaceholder, type ListPageSplitDetailsPlaceholderProps };

package/dist/components/data-views/list-page-split-details-placeholder.js

@@ -0,0 +1,38 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ListPageSplitDetailsPlaceholder({
+  title = "Nothing selected",
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card", children: /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: "fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70",
+            "aria-hidden": "true"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground", children: description }) : null
+      ]
+    }
+  );
+}
+
+export { ListPageSplitDetailsPlaceholder };
+//# sourceMappingURL=list-page-split-details-placeholder.js.map
+//# sourceMappingURL=list-page-split-details-placeholder.js.map

package/dist/components/data-views/list-page-split-details-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/list-page-split-details-placeholder.tsx"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACSO,SAAS,+BAAA,CAAgC;AAAA,EAC9C,KAAA,GAAQ,kBAAA;AAAA,EACR,WAAA;AAAA,EACA;AACF,CAAA,EAAyC;AACvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yFAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yGAAA,EACb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,0EAAA;AAAA,YACV,aAAA,EAAY;AAAA;AAAA,SACd,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qCAAA,EAAuC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACzD,8BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oEAAA,EAAsE,uBAAY,CAAA,GAC/F;AAAA;AAAA;AAAA,GACN;AAEJ","file":"list-page-split-details-placeholder.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 ListPageSplitDetailsPlaceholderProps {\n  title?: string\n  description?: React.ReactNode\n  className?: string\n}\n\n/**\n * Empty right pane for split hubs — flat `bg-card` to match Miller / tree columns.\n */\nexport function ListPageSplitDetailsPlaceholder({\n  title = \"Nothing selected\",\n  description,\n  className,\n}: ListPageSplitDetailsPlaceholderProps) {\n  return (\n    <div\n      className={cn(\n        \"flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center\",\n        className,\n      )}\n    >\n      <div className=\"mb-4 flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card\">\n        <i\n          className=\"fa-light fa-sidebar text-[1.65rem] leading-none text-muted-foreground/70\"\n          aria-hidden=\"true\"\n        />\n      </div>\n      <p className=\"text-sm font-medium text-foreground\">{title}</p>\n      {description ? (\n        <div className=\"mt-1.5 max-w-[16rem] text-xs leading-relaxed text-muted-foreground\">{description}</div>\n      ) : null}\n    </div>\n  )\n}\n"]}

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/** Default height band for split views under `ListPageTemplate` + toolbar. */
+declare const LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE: React.CSSProperties;
+interface ListPageSplitHubChromeProps {
+    children: React.ReactNode;
+    "aria-label"?: string;
+    gutterClassName?: string;
+    maxWidthClassName?: string;
+    /** Override default split viewport height / min-height */
+    surfaceStyle?: React.CSSProperties;
+    surfaceClassName?: string;
+}
+declare function ListPageSplitHubChrome({ children, "aria-label": ariaLabel, gutterClassName, maxWidthClassName, surfaceStyle, surfaceClassName, }: ListPageSplitHubChromeProps): react_jsx_runtime.JSX.Element;
+
+export { LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ListPageSplitHubChrome, type ListPageSplitHubChromeProps };

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

@@ -0,0 +1,54 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LIST_PAGE_VIEW_FRAME_GUTTER = "mx-4 mb-6 lg:mx-6";
+var LIST_PAGE_VIEW_FRAME_MAX_WIDE = "max-w-7xl";
+function ListPageViewFrame({
+  children,
+  className,
+  maxWidthClassName,
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(gutterClassName, className), ...rest, children: maxWidthClassName ? /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full min-w-0", maxWidthClassName), children }) : children });
+}
+var LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE = {
+  height: "calc(100vh - 280px)",
+  minHeight: 420
+};
+var SURFACE_CLASS = "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card";
+function ListPageSplitHubChrome({
+  children,
+  "aria-label": ariaLabel,
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,
+  surfaceStyle,
+  surfaceClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    ListPageViewFrame,
+    {
+      gutterClassName,
+      maxWidthClassName,
+      className: "flex min-h-0 flex-1 flex-col",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(SURFACE_CLASS, surfaceClassName),
+          style: { ...LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ...surfaceStyle },
+          "aria-label": ariaLabel,
+          children
+        }
+      )
+    }
+  );
+}
+
+export { LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ListPageSplitHubChrome };
+//# sourceMappingURL=list-page-split-hub-chrome.js.map
+//# sourceMappingURL=list-page-split-hub-chrome.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/list-page-view-frame.tsx","../../../src/components/data-views/list-page-split-hub-chrome.tsx"],"names":["jsx"],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACuBO,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,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,eAAA,EAAiB,SAAS,GAAI,GAAG,IAAA,EACjD,8CACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,EAAA,CAAG,wBAAA,EAA0B,iBAAiB,CAAA,EAAI,QAAA,EAAS,IAE3E,QAAA,EAEJ,CAAA;AAEJ;AC7CO,IAAM,gCAAA,GAAwD;AAAA,EACnE,MAAA,EAAQ,qBAAA;AAAA,EACR,SAAA,EAAW;AACb;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","file":"list-page-split-hub-chrome.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 * 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"]}

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

@@ -0,0 +1,12 @@
+/**
+ * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).
+ * Keeps Library panel / tree and generic `FinderPanelView` visually aligned.
+ */
+/** `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";
+/** Right-hand inspector / detail column shell. */
+declare const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+
+export { LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS, LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS, LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS };

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

@@ -0,0 +1,8 @@
+// src/components/data-views/list-page-split-hub-tokens.ts
+var LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS = "w-1 bg-border/40 hover:bg-brand/20 transition-colors";
+var LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+var LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+
+export { LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS, LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS, LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS };
+//# sourceMappingURL=list-page-split-hub-tokens.js.map
+//# sourceMappingURL=list-page-split-hub-tokens.js.map

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

@@ -0,0 +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 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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ListPageTreeColumnHeaderProps {
+    title: string;
+    /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */
+    trailing?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Shared left-column header for tree / outline surfaces — matches Library “Questions” bar.
+ */
+declare function ListPageTreeColumnHeader({ title, trailing, className, }: ListPageTreeColumnHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { ListPageTreeColumnHeader, type ListPageTreeColumnHeaderProps };

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

@@ -0,0 +1,22 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ListPageTreeColumnHeader({
+  title,
+  trailing,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("shrink-0 border-b border-border/50 bg-card px-3 py-2", className), children: /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("h3", { className: "min-w-0 flex-1 truncate text-sm font-medium text-foreground", children: title }),
+    trailing ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: trailing }) : null
+  ] }) });
+}
+
+export { ListPageTreeColumnHeader };
+//# sourceMappingURL=list-page-tree-column-header.js.map
+//# sourceMappingURL=list-page-tree-column-header.js.map

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

@@ -0,0 +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 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.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ListPageTreePanelShellProps {
+    /** Stable id for `react-resizable-panels` layout persistence (per hub / route). */
+    resizableGroupId: string;
+    /** Left column (tree chrome + body). */
+    tree: React.ReactNode;
+    /** Right column (detail / inspector). */
+    details: React.ReactNode;
+    /** Accessible name for the split surface, e.g. “Curriculum tree and details”. */
+    ariaLabel: string;
+    treePanelId?: string;
+    detailsPanelId?: string;
+    treeDefaultSize?: string;
+    treeMinSize?: string;
+    treeMaxSize?: string;
+    detailsDefaultSize?: string;
+    detailsMinSize?: string;
+    gutterClassName?: string;
+    maxWidthClassName?: string;
+}
+declare function ListPageTreePanelShell({ resizableGroupId, tree, details, ariaLabel, treePanelId, detailsPanelId, treeDefaultSize, treeMinSize, treeMaxSize, detailsDefaultSize, detailsMinSize, gutterClassName, maxWidthClassName, }: ListPageTreePanelShellProps): react_jsx_runtime.JSX.Element;
+
+export { ListPageTreePanelShell, type ListPageTreePanelShellProps };

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

@@ -0,0 +1,146 @@
+"use client";
+import { GripVertical } from 'lucide-react';
+import { Panel, Group, Separator } from 'react-resizable-panels';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ResizablePanelGroup({
+  direction = "horizontal",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      orientation: direction,
+      className: cn(
+        "flex h-full w-full",
+        direction === "vertical" && "flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var ResizablePanel = Panel;
+function ResizableHandle({ withHandle, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      className: cn(
+        // Base — horizontal handle (between side-by-side panels)
+        "relative flex w-1 shrink-0 cursor-col-resize items-center justify-center bg-border/60",
+        "transition-colors hover:bg-border active:bg-primary/30",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        // Vertical handle (between stacked panels)
+        "data-[orientation=vertical]:h-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:flex-row",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3 text-muted-foreground" }) })
+    }
+  );
+}
+var LIST_PAGE_VIEW_FRAME_GUTTER = "mx-4 mb-6 lg:mx-6";
+var LIST_PAGE_VIEW_FRAME_MAX_WIDE = "max-w-7xl";
+function ListPageViewFrame({
+  children,
+  className,
+  maxWidthClassName,
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(gutterClassName, className), ...rest, children: maxWidthClassName ? /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full min-w-0", maxWidthClassName), children }) : children });
+}
+var LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE = {
+  height: "calc(100vh - 280px)",
+  minHeight: 420
+};
+var SURFACE_CLASS = "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card";
+function ListPageSplitHubChrome({
+  children,
+  "aria-label": ariaLabel,
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,
+  surfaceStyle,
+  surfaceClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    ListPageViewFrame,
+    {
+      gutterClassName,
+      maxWidthClassName,
+      className: "flex min-h-0 flex-1 flex-col",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(SURFACE_CLASS, surfaceClassName),
+          style: { ...LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ...surfaceStyle },
+          "aria-label": ariaLabel,
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/data-views/list-page-split-hub-tokens.ts
+var LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS = "w-1 bg-border/40 hover:bg-brand/20 transition-colors";
+var LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+var LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS = "flex min-h-0 min-w-0 flex-col bg-card";
+function ListPageTreePanelShell({
+  resizableGroupId,
+  tree,
+  details,
+  ariaLabel,
+  treePanelId = "tree",
+  detailsPanelId = "details",
+  treeDefaultSize = "40%",
+  treeMinSize = "20%",
+  treeMaxSize = "60%",
+  detailsDefaultSize = "60%",
+  detailsMinSize = "30%",
+  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
+  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE
+}) {
+  return /* @__PURE__ */ jsx(
+    ListPageSplitHubChrome,
+    {
+      "aria-label": ariaLabel,
+      gutterClassName,
+      maxWidthClassName,
+      children: /* @__PURE__ */ jsxs(ResizablePanelGroup, { id: resizableGroupId, direction: "horizontal", className: "h-full min-h-0 w-full flex-1", children: [
+        /* @__PURE__ */ jsx(
+          ResizablePanel,
+          {
+            id: treePanelId,
+            defaultSize: treeDefaultSize,
+            minSize: treeMinSize,
+            maxSize: treeMaxSize,
+            className: LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+            children: tree
+          }
+        ),
+        /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true, className: LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS }),
+        /* @__PURE__ */ jsx(
+          ResizablePanel,
+          {
+            id: detailsPanelId,
+            defaultSize: detailsDefaultSize,
+            minSize: detailsMinSize,
+            className: LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
+            children: details
+          }
+        )
+      ] })
+    }
+  );
+}
+
+export { ListPageTreePanelShell };
+//# sourceMappingURL=list-page-tree-panel-shell.js.map
+//# sourceMappingURL=list-page-tree-panel-shell.js.map

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

@@ -0,0 +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 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

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Color palette tones shared across folder hubs. Domain-specific palette
+ * 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";
+/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */
+declare const OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg";
+declare const SIZE_MAP: {
+    /** Compact — folder inspector / column headers (matches ~36px row height). */
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+interface OsFolderGlyphProps {
+    colorKey: FolderGlyphColorKey;
+    /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */
+    icon: string;
+    size?: keyof typeof SIZE_MAP;
+    className?: string;
+    variant?: "solid" | "outline";
+    /**
+     * When false, exposes `role="img"` + `aria-label` (use with a short label, e.g. sheet preview).
+     * When true (default), hides the glyph from AT — parent control should name the action.
+     */
+    decorative?: boolean;
+    /** Required when `decorative={false}` */
+    label?: string;
+}
+declare function OsFolderGlyph({ colorKey, icon, size, className, variant, decorative, label, }: OsFolderGlyphProps): react_jsx_runtime.JSX.Element;
+
+export { type FolderGlyphColorKey, OS_FOLDER_GLYPH_SRC, OsFolderGlyph, type OsFolderGlyphProps };