@exxatdesignux/ui 0.2.6 → 0.2.7

package/template/components/ui/popover.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/popover.tsx"
+export * from "../../../../packages/ui/src/components/ui/popover"

package/template/components/ui/radio-group.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/radio-group.tsx"
+export * from "../../../../packages/ui/src/components/ui/radio-group"

package/template/components/ui/resizable.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { GripVertical } from "lucide-react"
+import { Group, Panel, Separator } from "react-resizable-panels"
+import type { GroupProps, PanelProps, SeparatorProps } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+// ─── ResizablePanelGroup ──────────────────────────────────────────────────────
+
+export type ResizablePanelGroupProps = Omit<GroupProps, "orientation"> & {
+  direction?: "horizontal" | "vertical"
+}
+
+export function ResizablePanelGroup({
+  direction = "horizontal",
+  className,
+  ...props
+}: ResizablePanelGroupProps) {
+  return (
+    <Group
+      orientation={direction}
+      className={cn(
+        "flex h-full w-full",
+        direction === "vertical" && "flex-col",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+// ─── ResizablePanel ───────────────────────────────────────────────────────────
+
+export type ResizablePanelProps = PanelProps
+
+export const ResizablePanel = Panel
+
+// ─── ResizableHandle ──────────────────────────────────────────────────────────
+
+export type ResizableHandleProps = Omit<SeparatorProps, "children"> & {
+  /** Render a visible grip icon on the handle. */
+  withHandle?: boolean
+}
+
+export function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {
+  return (
+    <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}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border border-border bg-background shadow-sm">
+          <GripVertical className="h-3 w-3 text-muted-foreground" />
+        </div>
+      )}
+    </Separator>
+  )
+}

package/template/components/ui/select.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/select.tsx"
+export * from "../../../../packages/ui/src/components/ui/select"

package/template/components/ui/selection-tile-grid.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/selection-tile-grid.tsx"
+export * from "../../../../packages/ui/src/components/ui/selection-tile-grid"

package/template/components/ui/separator.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/separator.tsx"
+export * from "../../../../packages/ui/src/components/ui/separator"

package/template/components/ui/sheet.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/sheet.tsx"
+export * from "../../../../packages/ui/src/components/ui/sheet"

package/template/components/ui/sidebar.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/sidebar.tsx"
+export * from "../../../../packages/ui/src/components/ui/sidebar"

package/template/components/ui/skeleton.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/skeleton.tsx"
+export * from "../../../../packages/ui/src/components/ui/skeleton"

package/template/components/ui/sonner.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/sonner.tsx"
+export * from "../../../../packages/ui/src/components/ui/sonner"

package/template/components/ui/status-badge.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/status-badge.tsx"
+export * from "../../../../packages/ui/src/components/ui/status-badge"

package/template/components/ui/table.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/table.tsx"
+export * from "../../../../packages/ui/src/components/ui/table"

package/template/components/ui/tabs.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/tabs.tsx"
+export * from "../../../../packages/ui/src/components/ui/tabs"

package/template/components/ui/textarea.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/textarea.tsx"
+export * from "../../../../packages/ui/src/components/ui/textarea"

package/template/components/ui/tip.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/tip.tsx"
+export * from "../../../../packages/ui/src/components/ui/tip"

package/template/components/ui/toggle-group.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/toggle-group.tsx"
+export * from "../../../../packages/ui/src/components/ui/toggle-group"

package/template/components/ui/toggle-switch.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/toggle-switch.tsx"
+export * from "../../../../packages/ui/src/components/ui/toggle-switch"

package/template/components/ui/toggle.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/toggle.tsx"
+export * from "../../../../packages/ui/src/components/ui/toggle"

package/template/components/ui/tooltip.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/tooltip.tsx"
+export * from "../../../../packages/ui/src/components/ui/tooltip"

package/template/components/ui/view-segmented-control.tsx

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/components/view-segmented-control.tsx"
+export * from "../../../../packages/ui/src/components/ui/view-segmented-control"

package/template/docs/data-views-pattern.md

@@ -19,6 +19,7 @@ This document describes how list pages combine **views**, **toolbar** behavior,
 | **Team roster** | `TeamTable` — `DataTable` + `useTableState` + `TablePropertiesDrawer`; list/board/dashboard read **`tableState.rows`** | `components/team-table.tsx` |
 | **Dashboard view (list tab)** | **`KeyMetrics`** (`variant="flat"` or `"card"`) — same KPI system as the template metrics strip; **do not** add ad-hoc `Card` grids for entity summaries | `TeamTable` dashboard branch, `lib/mock/team-kpi.ts` |
 | **Export** | `ExportDrawer` | `ListPageTemplate` export props; `DataListClient` |
+| **View body layout** (gutter + centered max-width for folder / icon / panel-style content) | **`ListPageViewFrame`** (`components/data-views/list-page-view-frame.tsx`, re-exported from `components/data-views`) | **`FolderGridView`** (uses the frame); **`QuestionBankOsFolderView`** — see **`AGENTS.md` §4.5** |
 
 **Rules:** (1) Import and compose these components; pass **props** and **column defs** for your entity. (2) If something is missing, **extend the shared component** under `components/` (e.g. a new optional slot on `DataTableToolbar`) rather than copying markup into a single page. (3) Card-only or lightweight pages may use a smaller **Properties** sheet only when there is **no** table—otherwise use `TablePropertiesDrawer` with `DataTable` (see Team).
 
@@ -29,6 +30,12 @@ If the page uses a **`DataTable`** (or equivalent data grid) as the main surface
 - **Reference:** `DataListClient` (Placements) and `TeamClient` (Team).
 - **Rationale:** Consistent navigation, saved views, per-tab view type (table / list / board), and export at the template level.
 
+## View layout frame (centered, reusable)
+
+Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style folder explorer) **should** use **`ListPageViewFrame`** for the same horizontal gutter and optional **`max-w-*`** centering as other hubs — **not** hand-copied `mx-4 lg:mx-6` + `mx-auto max-w-6xl` in each `*-table.tsx`. New view types belong in **`components/data-views/`** as **generic** components with render props; hub tables only wire **`tableState.rows`** and callbacks.
+
+**Handbook:** **`AGENTS.md` §4.5**. **Cursor:** **`.cursor/rules/exxat-list-page-view-shells.mdc`**. **Skill:** **`.cursor/skills/exxat-list-page-view-shells/SKILL.md`**. **Do not** wrap **`DataTable`** in the frame if that stacks padding with the table toolbar (**`AGENTS.md` §5**).
+
 ## Architecture
 
 - **Page shell** — `ListPageTemplate` owns the views toolbar (tabs), optional metrics, and export drawer. Content for the active tab is rendered via `renderContent`.

package/template/hooks/use-app-theme.ts

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/hooks/use-app-theme"
+export * from "../../../packages/ui/src/hooks/use-app-theme"

package/template/hooks/use-coach-mark.ts

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/hooks/use-coach-mark"
+export * from "../../../packages/ui/src/hooks/use-coach-mark"

package/template/hooks/use-location-hash.ts

@@ -0,0 +1,15 @@
+"use client"
+
+import * as React from "react"
+
+/** Current `window.location.hash` (including `#`), updated on `hashchange`. */
+export function useLocationHash(): string {
+  const [hash, setHash] = React.useState("")
+  React.useEffect(() => {
+    const read = () => setHash(typeof window !== "undefined" ? window.location.hash : "")
+    read()
+    window.addEventListener("hashchange", read)
+    return () => window.removeEventListener("hashchange", read)
+  }, [])
+  return hash
+}

package/template/hooks/use-mobile.ts

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/hooks/use-mobile"
+export * from "../../../packages/ui/src/hooks/use-mobile"

package/template/hooks/use-mod-key-label.ts

@@ -1 +1 @@
-export * from "@exxatdesignux/ui/hooks/use-mod-key-label"
+export * from "../../../packages/ui/src/hooks/use-mod-key-label"

package/template/hooks/use-sidebar-reflow-zoom.ts

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+
+/**
+ * When true, the sidebar should **not** pin utilities + profile to the bottom — the whole
+ * rail becomes one scroll surface (WCAG 1.4.10 reflow at high zoom / very short viewports).
+ *
+ * Uses `visualViewport.scale` where available (pinch / some browser zoom) and falls back to
+ * short viewport height.
+ */
+export function useSidebarReflowZoom(): boolean {
+  const [reflow, setReflow] = React.useState(false)
+
+  React.useEffect(() => {
+    const vv = window.visualViewport
+
+    function compute() {
+      const scale = vv?.scale ?? 1
+      const short = window.matchMedia("(max-height: 640px)").matches
+      const veryShort = window.innerHeight <= 420
+      setReflow(scale >= 1.99 || short || veryShort)
+    }
+
+    compute()
+    vv?.addEventListener("resize", compute)
+    vv?.addEventListener("scroll", compute)
+    window.addEventListener("resize", compute)
+    const mql = window.matchMedia("(max-height: 640px)")
+    mql.addEventListener("change", compute)
+    return () => {
+      vv?.removeEventListener("resize", compute)
+      vv?.removeEventListener("scroll", compute)
+      window.removeEventListener("resize", compute)
+      mql.removeEventListener("change", compute)
+    }
+  }, [])
+
+  return reflow
+}

package/template/lib/ask-leo-route-context.ts

@@ -1,6 +1,6 @@
 /**
  * Route-derived defaults for Ask Leo when no page calls `useAskLeoPageContext`.
- * Keeps titles and starters aligned with primary nav (not raw URL segments).
+ * Copy stays generic for the design-system shell.
  */
 
 export interface AskLeoRouteContextPayload {
@@ -12,21 +12,21 @@ export interface AskLeoRouteContextPayload {
 
 /** Fallback starters when a page provides no `suggestions`. */
 export const ASK_LEO_GENERIC_SUGGESTIONS = [
-  "Which students are at risk of non-compliance?",
-  "Show me placements ending this month",
-  "Summarize placement progress",
-  "Compare this cycle vs. last cycle",
+  "How do I meet WCAG 2.1 AA for tables and dialogs?",
+  "Explain how semantic tokens map to components",
+  "What belongs on a ListPageTemplate hub?",
+  "How should charts expose keyboard exploration?",
 ]
 
 export function getAskLeoRouteContext(pathname: string | null): AskLeoRouteContextPayload {
   if (!pathname || pathname === "/") {
     return {
       title: "Dashboard",
-      description: "Overview of metrics, charts, and AI insights.",
+      description: "Overview of metrics, charts, and layout patterns.",
       suggestions: [
-        "What changed in my key metrics this week?",
-        "Summarize tasks and insights I should act on",
-        "Explain the trend on the main placement chart",
+        "What changed in the headline metrics this week?",
+        "Summarize the dashboard layout for a stakeholder",
+        "Which chart should I inspect first for anomalies?",
       ],
     }
   }
@@ -34,67 +34,35 @@ export function getAskLeoRouteContext(pathname: string | null): AskLeoRouteConte
   if (pathname.startsWith("/dashboard")) {
     return {
       title: "Dashboard",
-      description: "Overview of metrics, charts, and AI insights.",
+      description: "Overview of metrics, charts, and layout patterns.",
       suggestions: [
-        "What changed in my key metrics this week?",
-        "Summarize tasks and insights I should act on",
-        "Which chart should I look at first for placement health?",
+        "What changed in the headline metrics this week?",
+        "Summarize the dashboard layout for a stakeholder",
+        "Which chart should I inspect first for anomalies?",
       ],
     }
   }
 
   if (pathname.startsWith("/data-list")) {
     return {
-      title: "Placements",
-      description: "List, filter, and export placement records — table, board, and dashboard views.",
+      title: "List hub",
+      description: "Demo list with table, list, board, and dashboard views sharing one table state.",
       suggestions: [
-        "Which placements end in the next 30 days?",
-        "Summarize placements by site for this lifecycle tab",
-        "What filters would narrow this list to at-risk students?",
+        "How do filters and search interact with board and dashboard tabs?",
+        "Summarize what is shown in the active view",
+        "What columns are useful for a dense data grid?",
       ],
     }
   }
 
-  if (pathname.startsWith("/team")) {
+  if (pathname.startsWith("/examples")) {
     return {
-      title: "Team",
-      description: "Directory and workload for coordinators and faculty.",
+      title: "Patterns",
+      description: "Entry points for reusable shells and demos.",
       suggestions: [
-        "Who owns the most active placements?",
-        "Summarize team workload by program",
-      ],
-    }
-  }
-
-  if (pathname.startsWith("/compliance")) {
-    return {
-      title: "Compliance",
-      description: "Compliance tracking and outstanding requirements.",
-      suggestions: [
-        "List items due this week",
-        "Which students have outstanding compliance tasks?",
-      ],
-    }
-  }
-
-  if (pathname.startsWith("/question-bank")) {
-    return {
-      title: "Question bank",
-      description: "Assessment and question library.",
-      suggestions: [
-        "Suggest questions for a clinical reasoning quiz",
-        "How do I filter by difficulty or topic?",
-      ],
-    }
-  }
-
-  if (pathname.startsWith("/rotations")) {
-    return {
-      title: "Rotations",
-      description: "Rotation schedules and capacity.",
-      suggestions: [
-        "Summarize rotation blocks for this term",
-        "Which sites have open capacity?",
+        "Where is the list hub implemented?",
+        "How is the command palette wired?",
+        "What is the sidebar + content layout pattern?",
       ],
     }
   }
@@ -113,7 +81,7 @@ export function getAskLeoRouteContext(pathname: string | null): AskLeoRouteConte
   if (pathname.startsWith("/help")) {
     return {
       title: "Get help",
-      description: "Exxat Help Center and support resources.",
+      description: "Support and documentation entry points.",
       suggestions: [
         "Where do I find training articles?",
         "How do I contact support?",

package/template/lib/coach-mark-registry.ts

@@ -32,37 +32,37 @@ export const COACH_MARK_FLOWS: CoachMarkFlowDef[] = [
     stepCount: 4,
   },
   {
-    id: "placements-views-tour",
+    id: "data-list-views-tour",
     name: "Views & Properties Tour",
     description:
       "Walks through view tabs, customisation, adding views, search, filters, and the Properties panel.",
-    page: "Placements",
+    page: "List hub",
     pageUrl: "/data-list",
     stepCount: 6,
   },
   {
-    id: "placements-dashboard-customize",
-    name: "Customize dashboard (Placements)",
+    id: "data-list-dashboard-customize",
+    name: "Customize dashboard (List hub)",
     description:
       "Highlights Edit layout on the Data view dashboard toolbar — drag widgets, chart types, and width.",
-    page: "Placements",
+    page: "List hub",
     pageUrl: "/data-list",
     stepCount: 1,
   },
   {
     id: "team-dashboard-customize",
-    name: "Customize dashboard (Team)",
-    description: "Same as Placements — Edit layout for the Team Data dashboard.",
-    page: "Team",
-    pageUrl: "/team",
+    name: "Customize dashboard (Team pattern)",
+    description: "Same toolbar pattern as the list hub — Edit layout for a Data dashboard tab.",
+    page: "Examples",
+    pageUrl: "/examples",
     stepCount: 1,
   },
   {
     id: "compliance-dashboard-customize",
-    name: "Customize dashboard (Compliance)",
-    description: "Same as Placements — Edit layout for the Compliance Data dashboard.",
-    page: "Compliance",
-    pageUrl: "/compliance",
+    name: "Customize dashboard (Compliance pattern)",
+    description: "Same toolbar pattern as the list hub — Edit layout for a Data dashboard tab.",
+    page: "Examples",
+    pageUrl: "/examples",
     stepCount: 1,
   },
 ]

package/template/lib/command-menu-config.ts

@@ -44,8 +44,8 @@ const COMMAND_MENU_SHELL: Omit<CommandMenuConfig, "groups"> = {
   dialogTitle: "Search",
   dialogDescription:
     "Search pages and components, or use AI suggestions. Use arrow keys to move through results, Enter to open, Escape to close.",
-  inputPlaceholder: "Search or ask Leo anything…",
-  inputAriaLabel: "Search pages, components, or ask Leo",
+  inputPlaceholder: "Search routes, patterns, and demo rows…",
+  inputAriaLabel: "Search routes, patterns, or demo data",
   emptyMessage: "No results found.",
   closeMenuAriaLabel: "Close command menu",
 }
@@ -57,28 +57,28 @@ const STATIC_COMMAND_GROUPS: CommandMenuGroup[] = [
     heading: "AI suggestions",
     items: [
       {
-        id: "ai-compliance",
-        label: "Which students are at risk of non-compliance?",
-        keywords: "leo ai assistant compliance students risk",
-        askLeoPrompt: "Which students are at risk of non-compliance?",
+        id: "ai-a11y",
+        label: "How do I meet WCAG 2.1 AA for tables and dialogs?",
+        keywords: "leo ai accessibility wcag aria keyboard",
+        askLeoPrompt: "How do I meet WCAG 2.1 AA for tables and dialogs in this design system?",
       },
       {
-        id: "ai-placements-month",
-        label: "Show me placements ending this month",
-        keywords: "leo ai placements calendar month",
-        askLeoPrompt: "Show me placements ending this month",
+        id: "ai-tokens",
+        label: "Explain how semantic tokens map to components",
+        keywords: "leo ai theme tokens css variables tailwind",
+        askLeoPrompt: "Explain how semantic tokens map to components in this app shell.",
       },
       {
-        id: "ai-summarize",
-        label: "Summarize placement progress",
-        keywords: "leo ai summary placements progress",
-        askLeoPrompt: "Summarize placement progress",
+        id: "ai-list-page",
+        label: "What belongs on a ListPageTemplate hub?",
+        keywords: "leo ai list page data views board dashboard",
+        askLeoPrompt: "What belongs on a ListPageTemplate hub in Exxat DS?",
       },
       {
-        id: "ai-compare-cycle",
-        label: "Compare this cycle vs. last cycle",
-        keywords: "leo ai compare cycle trend",
-        askLeoPrompt: "Compare this cycle vs. last cycle",
+        id: "ai-charts",
+        label: "How should charts expose keyboard exploration?",
+        keywords: "leo ai charts keyboard chartfigure recharts",
+        askLeoPrompt: "How should charts expose keyboard exploration in this design system?",
       },
     ],
   },
@@ -87,18 +87,23 @@ const STATIC_COMMAND_GROUPS: CommandMenuGroup[] = [
     heading: "Navigation",
     items: [
       { id: "nav-dashboard", icon: "fa-light fa-grid-2", label: "Dashboard", href: "/dashboard" },
+      {
+        id: "nav-examples",
+        icon: "fa-light fa-layer-group",
+        label: "Patterns",
+        href: "/examples",
+        keywords: "examples gallery showcase",
+      },
       {
         id: "nav-question-bank",
         icon: "fa-light fa-books",
         label: "Question bank",
         href: "/question-bank",
-        keywords: "assessment items exam quiz",
+        keywords: "folders assessment items tree panel",
       },
-      { id: "nav-placements", icon: "fa-light fa-user-graduate", label: "Placements", href: "/data-list" },
-      { id: "nav-rotations", icon: "fa-light fa-arrows-rotate", label: "Rotations", href: "/rotations" },
-      { id: "nav-team", icon: "fa-light fa-users", label: "Team", href: "/team" },
-      { id: "nav-compliance", icon: "fa-light fa-shield-check", label: "Compliance", href: "/compliance" },
+      { id: "nav-data-list", icon: "fa-light fa-table", label: "List hub", href: "/data-list" },
       { id: "nav-settings", icon: "fa-light fa-gear", label: "Settings", href: "/settings" },
+      { id: "nav-help", icon: "fa-light fa-circle-question", label: "Help", href: "/help" },
     ],
   },
 ]

package/template/lib/command-menu-search-data.ts

@@ -5,15 +5,16 @@
 import type { CommandMenuGroup, CommandMenuItem } from "@/lib/command-menu-config"
 import { ALL_PLACEMENTS } from "@/lib/mock/placements"
 
-function placementSearchItems(): CommandMenuItem[] {
+function sampleRowSearchItems(): CommandMenuItem[] {
   return ALL_PLACEMENTS.map((p) => {
     const nameParts = p.student.trim().split(/\s+/)
     return {
-      id: `placement-${p.id}`,
-      label: `${p.student} — ${p.internship}`,
-      icon: "fa-light fa-user-graduate",
-      href: "/data-list",
+      id: `sample-row-${p.id}`,
+      label: `Row ${p.id} — ${p.student}`,
+      icon: "fa-light fa-table",
+      href: `/data-list/${p.id}`,
       keywords: [
+        `row ${p.id}`,
         p.student,
         ...nameParts,
         p.program,
@@ -31,13 +32,13 @@ function placementSearchItems(): CommandMenuItem[] {
   })
 }
 
-/** Placements (student names, sites, programs, …) — passed as `dataGroups` in the app layout. */
+/** Demo rows for the list hub — search-only so the palette stays lightweight on open. */
 export function getCommandMenuSearchDataGroups(): CommandMenuGroup[] {
   return [
     {
-      id: "placements",
-      heading: "Placements",
-      items: placementSearchItems(),
+      id: "sample-rows",
+      heading: "Demo rows",
+      items: sampleRowSearchItems(),
       searchOnly: true,
     },
   ]

package/template/lib/data-list-view-surface.ts

@@ -11,6 +11,8 @@
  * | `list`     | `DataTableToolbar` + list layout |
  * | `board`    | `DataTableToolbar` + board / kanban |
  * | `dashboard`| `DataTableToolbar` + KPI (`KeyMetrics`) + optional charts (`ChartCard`, Recharts, etc.) |
+ * | `folder`   | `DataTableToolbar` + icon grid (macOS-Finder-style) |
+ * | `panel`    | `DataTableToolbar` + resizable split (list / tree column + detail inspector) |
  */
 
 import type { DataListViewType } from "@/lib/data-list-view"
@@ -21,6 +23,9 @@ export type DataListViewRenderKind =
   | "list-with-toolbar"
   | "board-with-toolbar"
   | "dashboard-with-toolbar"
+  | "folder-with-toolbar"
+  | "panel-with-toolbar"
+  | "tree-panel-with-toolbar"
 
 /**
  * Stable classification for switch/if chains. **Every** `DataListViewType` maps to exactly one kind.
@@ -36,6 +41,12 @@ export function getDataListViewRenderKind(view: DataListViewType): DataListViewR
       return "board-with-toolbar"
     case "dashboard":
       return "dashboard-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: never = view
       return _x
@@ -54,5 +65,5 @@ export function usesDashboardSurface(view: DataListViewType): boolean {
 
 /** Shared toolbar (search, filters, properties); body differs by view. */
 export function usesToolbarWithFilteredRows(view: DataListViewType): boolean {
-  return view === "list" || view === "board" || view === "dashboard"
+  return view === "list" || view === "board" || view === "dashboard" || view === "folder" || view === "panel" || view === "tree-panel"
 }

package/template/lib/data-list-view.ts

@@ -5,7 +5,7 @@
  * `dataListViewLabel` / `dataListViewIcon` on every page so Table / List / Board / Dashboard
  * stay consistent and stay wired to the same `useTableState` dataset (see `docs/data-views-pattern.md`).
  */
-export type DataListViewType = "table" | "list" | "board" | "dashboard"
+export type DataListViewType = "table" | "list" | "board" | "dashboard" | "folder" | "panel" | "tree-panel"
 
 export const DATA_LIST_VIEW_TILES: readonly {
   value: DataListViewType
@@ -13,9 +13,12 @@ export const DATA_LIST_VIEW_TILES: readonly {
   icon: string
 }[] = [
   { value: "table",     icon: "fa-table",         label: "Table view" },
-  { value: "list",      icon: "fa-list",         label: "List 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: "dashboard", icon: "fa-chart-mixed",   label: "Dashboard 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" },
 ]
 
 /** User-facing name for tabs, Properties summary rows, and tooltips (not entity-specific). */

package/template/lib/date-filter.ts

@@ -5,4 +5,4 @@ export {
   formatYmdForDisplay,
   ymdToLocalDate,
   localDateToYmd,
-} from "@exxatdesignux/ui/lib/date-filter"
+} from "../../../packages/ui/src/lib/date-filter"