@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/lib/mock/navigation.tsx

@@ -8,10 +8,10 @@ import type * as React from "react"
 import { logoDevUrl } from "@/lib/logo-dev"
 import { stockPortraitUrl } from "@/lib/stock-portrait"
 import {
-  QUESTION_BANK_ENTRY_PATH,
-  QUESTION_BANK_HUB_FIND_PATH,
-  QUESTION_BANK_LIBRARY_PATH,
-} from "@/lib/question-bank-nav"
+  LIBRARY_ENTRY_PATH,
+  LIBRARY_HUB_FIND_PATH,
+  LIBRARY_ALL_PATH,
+} from "@/lib/library-nav"
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -93,53 +93,37 @@ export const NAV_PRIMARY: NavLinkItem[] = [
     iconActive: <i className="fa-solid fa-grid-2" aria-hidden="true" />,
   },
   {
-    key: "examples",
-    title: "Patterns",
-    url: "/examples",
-    icon:       <i className="fa-light fa-layer-group" aria-hidden="true" />,
-    iconActive: <i className="fa-solid fa-layer-group" aria-hidden="true" />,
-  },
-  {
-    key: "question-bank",
-    title: "Question bank",
-    url: QUESTION_BANK_ENTRY_PATH,
+    key: "library",
+    title: "Library",
+    url: LIBRARY_ENTRY_PATH,
     icon:       <i className="fa-light fa-books" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-books" aria-hidden="true" />,
-    secondaryPanel: "question-bank",
-    primaryHubChildKey: "question-bank-hub",
+    secondaryPanel: "library",
+    primaryHubChildKey: "library-hub",
     children: [
       {
-        key: "question-bank-hub",
-        title: "Question hub",
-        url: QUESTION_BANK_ENTRY_PATH,
+        key: "library-hub",
+        title: "Library home",
+        url: LIBRARY_ENTRY_PATH,
         icon:       <i className="fa-light fa-sparkles" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-sparkles" aria-hidden="true" />,
       },
       {
-        key: "question-bank-search",
+        key: "library-search",
         title: "Search",
-        url: QUESTION_BANK_HUB_FIND_PATH,
+        url: LIBRARY_HUB_FIND_PATH,
         icon:       <i className="fa-light fa-magnifying-glass" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-magnifying-glass" aria-hidden="true" />,
       },
       {
-        key: "question-bank-library",
-        title: "Library",
-        url: QUESTION_BANK_LIBRARY_PATH,
+        key: "library-all",
+        title: "All items",
+        url: LIBRARY_ALL_PATH,
         icon:       <i className="fa-light fa-table-list" aria-hidden="true" />,
         iconActive: <i className="fa-solid fa-table-list" aria-hidden="true" />,
       },
     ],
   },
-  {
-    key: "data-list",
-    title: "List hub",
-    url: "/data-list",
-    icon:       <i className="fa-light fa-table" aria-hidden="true" />,
-    iconActive: <i className="fa-solid fa-table" aria-hidden="true" />,
-    badge: 24,
-    secondaryPanel: "list-hub",
-  },
 ]
 
 // ── Documents section ───────────────────────────────────────────────────────
@@ -150,10 +134,23 @@ export const NAV_DOCUMENTS: NavLinkItem[] = [
   {
     key: "tokens",
     title: "Tokens & themes",
-    /** Same page as Settings — disambiguate active state via `#appearance` (see `isNavActive`). */
-    url: "/settings#appearance",
+    /** Dedicated route (was previously /settings#appearance — split out so the nav target
+     *  is bookmarkable and there's no active-state collision with Settings). */
+    url: "/tokens-themes",
     icon:       <i className="fa-light fa-palette" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-palette" aria-hidden="true" />,
+    /** Opens the `tokens` secondary panel — categories live in the rail, not in view tabs.
+     *  `useAutoPanel("tokens")` inside the hub also collapses the main sidebar
+     *  (`secondary-panel.tsx#openPanel`) per the Library library pattern. */
+    secondaryPanel: "tokens",
+  },
+  {
+    key: "columns",
+    title: "Column types",
+    /** DataTable column-pattern showcase — every cell renderer the DS supports. */
+    url: "/columns",
+    icon:       <i className="fa-light fa-table-columns" aria-hidden="true" />,
+    iconActive: <i className="fa-solid fa-table-columns" aria-hidden="true" />,
   },
   {
     key: "more",

package/template/lib/raf-throttle.ts

@@ -1,45 +1 @@
-/**
- * Coalesce many calls to `fn` into one per animation frame.
- *
- * Use for high-frequency layout-reading event handlers (scroll, resize,
- * visualViewport, ResizeObserver) where the work must happen in a frame but
- * doing it on every event call (60+/s for resize, hundreds/s for capture
- * scrolls) wastes layout/paint cycles. The returned function exposes
- * `.cancel()` so effect cleanup can drop a pending frame.
- *
- * Pattern:
- *   const apply = () => { ...layout reads + setState... }
- *   const scheduled = rafThrottle(apply)
- *   window.addEventListener("scroll", scheduled, { passive: true, capture: true })
- *   return () => {
- *     scheduled.cancel()
- *     window.removeEventListener("scroll", scheduled, { capture: true })
- *   }
- */
-export function rafThrottle<TArgs extends unknown[]>(
-  fn: (...args: TArgs) => void,
-): ((...args: TArgs) => void) & { cancel: () => void } {
-  let rafId = 0
-  let lastArgs: TArgs | null = null
-
-  const scheduled = ((...args: TArgs) => {
-    lastArgs = args
-    if (rafId !== 0) return
-    rafId = requestAnimationFrame(() => {
-      rafId = 0
-      const a = lastArgs
-      lastArgs = null
-      if (a) fn(...a)
-    })
-  }) as ((...args: TArgs) => void) & { cancel: () => void }
-
-  scheduled.cancel = () => {
-    if (rafId !== 0) {
-      cancelAnimationFrame(rafId)
-      rafId = 0
-    }
-    lastArgs = null
-  }
-
-  return scheduled
-}
+export { rafThrottle } from "@exxatdesignux/ui/lib/raf-throttle"

package/template/lib/row-height.ts

@@ -1,10 +1,4 @@
-/**
- * Table row density — shared by Properties drawer tiles and useTableState.
- */
-export type RowHeight = "compact" | "default" | "comfortable"
-
-export const ROW_HEIGHT_TILES: readonly { value: RowHeight; label: string; icon: string }[] = [
-  { value: "compact",     label: "Compact",     icon: "fa-down-to-line" },
-  { value: "default",     label: "Default",     icon: "fa-arrows-up-down" },
-  { value: "comfortable", label: "Comfortable", icon: "fa-up-to-line" },
-]
+export {
+  ROW_HEIGHT_TILES,
+  type RowHeight,
+} from "@exxatdesignux/ui/lib/row-height"

package/template/lib/sidebar-state-cookie.ts

@@ -1,9 +1,18 @@
-/** Cookie name persisted by `@exxatdesignux/ui` `SidebarProvider` (`setOpen`). */
-export const SIDEBAR_STATE_COOKIE_NAME = "sidebar_state"
+/**
+ * Cookie name persisted by `@exxatdesignux/ui` `SidebarProvider` (`setOpen`).
+ *
+ * Versioned (`_v2`) on 2026-05-21 to drop stale values written by the pre-fix
+ * code where incidental layout collapses clobbered the user's preference on
+ * every navigation. The legacy `sidebar_state` cookie (without `_v2`) is
+ * ignored on the server and actively deleted client-side on first mount.
+ */
+export const SIDEBAR_STATE_COOKIE_NAME = "sidebar_state_v2"
 
 /** Read desktop sidebar expanded state for SSR `defaultOpen` (matches client cookie restore). */
 export function sidebarDefaultOpenFromCookie(
   value: string | undefined,
 ): boolean {
+  // No cookie OR malformed value → default expanded.
+  // Only an exact `"false"` from the new cookie counts as a saved collapsed preference.
   return value !== "false"
 }

package/template/lib/table-state-lifecycle.ts

@@ -26,7 +26,7 @@ import type { RowHeight } from "@/lib/row-height"
 import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
 import type { ActiveFilter, ConditionalRule, SortRule } from "@/components/table-properties/types"
 import type { ViewTab } from "@/components/templates/list-page"
-import { DATA_LIST_VIEW_TILES, type DataListViewType } from "@/lib/data-list-view"
+import type { DataListViewType } from "@/lib/data-list-view"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Storage key + debounce config
@@ -139,7 +139,7 @@ export interface TableStatePersistSlice {
 // Parsers + validators
 // ─────────────────────────────────────────────────────────────────────────────
 
-const VIEW_TYPES: DataListViewType[] = DATA_LIST_VIEW_TILES.map(t => t.value)
+const VIEW_TYPES: DataListViewType[] = ["table", "list", "board", "dashboard"]
 
 function isViewType(v: unknown): v is DataListViewType {
   return typeof v === "string" && (VIEW_TYPES as string[]).includes(v)
@@ -388,7 +388,7 @@ export function schedulePageSave(namespace: string, payload: PersistedPageV1): v
 // ─────────────────────────────────────────────────────────────────────────────
 
 export interface UseTableStateLifecycleOptions<TExtras extends Record<string, unknown> | void = void> {
-  /** Storage namespace, e.g. `"placements"`, `"team"`, `"question-bank"`. */
+  /** Storage namespace, e.g. `"placements"`, `"team"`, `"library"`. */
   namespace: string
   /**
    * Sub-key per lifecycle tab. A hub with only one lifecycle should pass a

package/template/next.config.mjs

@@ -168,10 +168,13 @@ const nextConfig = {
   },
   async redirects() {
     return [
-      { source: "/rotations", destination: "/examples", permanent: false },
-      { source: "/compliance", destination: "/examples", permanent: false },
-      { source: "/sites/all", destination: "/examples", permanent: false },
-      { source: "/sites/all/:path*", destination: "/examples", permanent: false },
+      // Legacy demo routes (placements, rotations, compliance, sites) were removed.
+      // Redirect anything pointing at them to Dashboard rather than 404.
+      { source: "/rotations", destination: "/dashboard", permanent: false },
+      { source: "/compliance", destination: "/dashboard", permanent: false },
+      { source: "/sites/all", destination: "/dashboard", permanent: false },
+      { source: "/sites/all/:path*", destination: "/dashboard", permanent: false },
+      { source: "/examples", destination: "/dashboard", permanent: false },
     ]
   },
 }

package/template/package.json

@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@exxatdesignux/eslint-plugin": "workspace:*",
     "@next/bundle-analyzer": "16.2.6",
     "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",

package/template/tests/setup.ts

@@ -1 +1,26 @@
 import "@testing-library/jest-dom/vitest"
+import { vi } from "vitest"
+
+// jsdom does not implement window.matchMedia — stub it for tests that use
+// useTableState (which calls useSyncExternalStore with a matchMedia listener)
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }),
+})
+
+// jsdom does not implement ResizeObserver — stub it for components that use
+// Radix UI primitives (Sheet, Tooltip, etc.) which call it internally.
+globalThis.ResizeObserver = class {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+}

package/consumer-extras/AGENTS.md

@@ -1,76 +0,0 @@
-# Exxat DS — consumer app handbook
-
-**Purpose:** Guide for **product repositories** that depend on **`@exxatdesignux/ui`** from npm. The monorepo **`apps/web`** app is the full reference implementation; this file is what ships in the package for consumers.
-
-**Path after sync:** `docs/exxat-ds/AGENTS-consumer.md` or merge sections into your app handbook via **`exxat-ui sync-extras`**.
-
----
-
-## 1. How to use this file (for AI agents)
-
-1. **Before** upgrading **`@exxatdesignux/ui`**, read **`consumer-upgrade-checklist.md`** and **`CHANGELOG.md`** in the installed package.
-2. **Before** adding a **list / table / board hub**, read **`data-views-pattern.md`** (view registry + connected bodies), **`consumer-app-pattern.md`**, and skill **`exxat-centralized-list-dataset`**.
-3. **Before** a **dedicated form / wizard / settings route**, read **`focused-workflow-page-pattern.md`** and **`exxat-focused-workflow-page`** skill.
-4. **Before** nested **Library / scope** nav, read **`exxat-primary-nav-secondary-panel`** skill and **`shell-surface-elevation-pattern.md`**.
-5. Run **`exxat-ui sync-extras`** after every DS version bump so **`.cursor/skills/exxat-*`** match the tarball.
-
----
-
-## 2. What ships in the package
-
-| Artifact | Location in npm | Use |
-|----------|-----------------|-----|
-| Components + tokens | `@exxatdesignux/ui` | Import UI, hooks, CSS |
-| Reference app | `node_modules/@exxatdesignux/ui/template/` | Diff / port routes and hub clients |
-| Cursor skills | `consumer-extras/cursor-skills/` → sync to `.cursor/skills/` | AI checklists |
-| Pattern docs | `consumer-extras/patterns/` → sync to `docs/exxat-ds/` | Human + AI narrative |
-
-**`sync-extras` does not** modify your product routes — you port intentionally from **`template/`**.
-
----
-
-## 3. List hub stack (centralized)
-
-**MUST:**
-
-- **`lib/mock/<entity>.ts`** — one row type + seed data.
-- **`lib/<hub>-supported-views.ts`** — allowlist shared by **`ListPageTemplate`** and **`TablePropertiesDrawer`**.
-- **`useTableState`** — **`tableState.rows`** feeds table, list, board, dashboard, folder, panel, tree.
-- **`ListPageConnectedViewBody`** + **`defineHubViewRenderers`** — no silent dashboard fallback.
-- **`ListPageViewFrame`** / **`components/data-views/`** for non-table bodies.
-
-**MUST NOT:** Second mock array per view; **`ListPageTemplate`** on a dedicated create/edit URL.
-
-**Rule/skill (sync from package):** `exxat-centralized-list-dataset`, `exxat-list-page-connected-views`, `exxat-list-page-view-shells`.
-
----
-
-## 4. Shell elevation
-
-| Level | Token |
-|-------|--------|
-| Primary sidebar | `--sidebar` |
-| Secondary panel (Library) | `--secondary-panel-bg` |
-| Page | `--background` |
-
-Dark mode secondary panel **MUST** use **`color-mix(… var(--sidebar-accent) …)`**, not light **`--brand-tint`**. See **`shell-surface-elevation-pattern.md`**.
-
----
-
-## 5. Consumer app checklist (copy for PRs)
-
-- [ ] **`@exxatdesignux/ui`** version recorded; **`exxat-ui sync-extras`** run if skills/docs changed.
-- [ ] Template diff reviewed for new **`template/`** files relevant to this feature.
-- [ ] List hub: **`supportedViewTypes`** aligned; **`ListPageConnectedViewBody`**; **`tableState.rows`** everywhere.
-- [ ] Form/wizard route: **`FocusedWorkflowPageTemplate`** (not list hub shell).
-- [ ] Secondary panel: **`--secondary-panel-bg`** on **`NestedSecondaryPanelShell`**; dark mode spot-checked.
-- [ ] Product switcher: collapsed sidebar opens menu (**`SidebarMenuButton` `tooltip`**, not nested Tooltip + DropdownMenu).
-- [ ] No toast — banners / inline / dialog.
-
----
-
-## 6. See also
-
-- **`consumer-app-pattern.md`**
-- **`consumer-upgrade-checklist.md`**
-- Monorepo **`apps/web/AGENTS.md`** (full product handbook when you have the design-system repo)

package/consumer-extras/cursor-skills/exxat-consumer-app/SKILL.md

@@ -1,37 +0,0 @@
----
-name: exxat-consumer-app
-description: Build or upgrade product apps that install @exxatdesignux/ui from npm — sync-extras, diff template/, centralized list hubs, focused workflow routes, shell elevation. Use when working outside the design-system monorepo or after pnpm add @exxatdesignux/ui.
-user-invocable: true
----
-
-# Exxat DS — consumer app
-
-**Pattern:** `consumer-app-pattern.md` (in `docs/exxat-ds/` after sync)  
-**Handbook:** `AGENTS-consumer.md` or `consumer-app-pattern.md` parent **`AGENTS.md`** in package extras  
-**Upgrade:** `consumer-upgrade-checklist.md`
-
-## When this applies
-
-- Repo has **`@exxatdesignux/ui`** in **`package.json`**, not the design-system monorepo **`apps/web`**.
-- Task is **porting** a hub, shell, or route from **`node_modules/@exxatdesignux/ui/template/`**.
-
-## Checklist
-
-- [ ] Read installed **`CHANGELOG.md`**; run **`exxat-ui sync-extras`** after bump.
-- [ ] Diff **`template/`** vs your app for the feature (client, table, mocks, layout).
-- [ ] **List hub:** `lib/<hub>-supported-views.ts` + **`ListPageConnectedViewBody`** + **`defineHubViewRenderers`** + one **`useTableState`** row bag.
-- [ ] **Same** `supportedViewTypes` on **`ListPageTemplate`** and **`TablePropertiesDrawer`**.
-- [ ] **Form/wizard/settings URL:** **`FocusedWorkflowPageTemplate`** — not **`ListPageTemplate`**.
-- [ ] **Secondary panel:** `NestedSecondaryPanelShell` + **`--secondary-panel-bg`**; verify **dark mode** (no light rose panel).
-- [ ] **Product switcher (collapsed):** `DropdownMenuTrigger` → **`SidebarMenuButton`** with **`tooltip=`** — do not nest **`Tooltip`** outside **`DropdownMenuTrigger`**.
-- [ ] CSS: import DS globals; product theme classes on **`<html>`** via **`ProductProvider`** pattern from template.
-
-## MUST NOT
-
-- Fork **`DataTable`** / view-tab stack when template already has the hub pattern.
-- Import raw **`ENTITY_ROWS`** into folder/board views while the table filters **`useTableState`**.
-- Skip **`exxat-ui sync-extras`** and rely on stale **`.cursor/skills`**.
-
-## Pair with
-
-- **`exxat-centralized-list-dataset`**, **`exxat-list-page-view-shells`**, **`exxat-focused-workflow-page`**, **`exxat-primary-nav-secondary-panel`**

package/consumer-extras/cursor-skills/exxat-focused-workflow-page/SKILL.md

@@ -1,57 +0,0 @@
----
-name: exxat-focused-workflow-page
-description: FocusedWorkflowPageTemplate — dedicated routes for large forms, multi-step wizards, and sectioned settings (single column, steps, sidebar nav). Not list hubs or Miller-column explorers. Use when adding create/edit routes, settings pages, or empty workflow placeholders.
-user-invocable: true
----
-
-# Exxat DS — focused workflow page
-
-**Rule:** `.cursor/rules/exxat-focused-workflow-page.mdc`  
-**Doc:** `docs/focused-workflow-page-pattern.md` (app / consumer-extras `patterns/`)  
-**Handbook:** `AGENTS.md` §6.4, **§14** checklist
-
-## When to use
-
-| Use **focused workflow** | Use something else |
-| --- | --- |
-| Own URL; primary create/edit; multi-step wizard; sectioned settings | **List hub** → `ListPageTemplate` + `DataTable` |
-| Large form that should not sit in a drawer | **Quick hub adjunct** → drawer (`ExportDrawer`, `TablePropertiesDrawer`) |
-| | **Blocking confirm** → dialog |
-| | **Finder / folder columns** → `ListPageSplitHubChrome`, `ListPageFolderColumnsPanel` |
-
-## Checklist
-
-- [ ] Route uses **`FocusedWorkflowPageTemplate`** — not raw `SidebarInset` copy-paste; not **`PrimaryPageTemplate`** / **`ListPageTemplate`**.
-- [ ] **`siteHeader`**: `back` or `breadcrumbs` + `title`; parent trail stays in header, not duplicated in body.
-- [ ] **`maxWidth`**: `md` simple forms · `lg` settings / wide fields · `xl` only when justified.
-- [ ] **One body layout** from `focused-workflow-layouts.tsx`:
-  - **`FocusedWorkflowSingleColumn`** — default stack
-  - **`FocusedWorkflowStepForm`** + **`FocusedWorkflowWizardFooter`** — wizard
-  - **`FocusedWorkflowSidebarSections`** — left section nav (`id` on `<section>` matches `sections[].id`)
-  - **`FocusedWorkflowEmptyState`** — not configured / coming soon
-- [ ] **Footers:** **`FocusedWorkflowActionFooter`** or **`FocusedWorkflowWizardFooter`** with **`Shortcut`** + **`<Kbd variant="bare">`** in buttons (**`exxat-kbd-shortcuts.mdc`**).
-- [ ] Domain UI in **`*-composer.tsx`** / **`*-client.tsx`**; keep **`FocusedWorkflow*`** names generic (not product-specific).
-- [ ] Long forms: optional **`beforeSiteHeader={<SidebarAutoCollapse />}`** (see `/question-bank/new`).
-- [ ] **No** **`ListPageTemplate`** view tabs, **no** Miller columns, **no** **`ListPageFolderColumnsPanel`** inside this shell.
-- [ ] **No toast** for outcomes — banners, inline, or dialog (**`exxat-no-toast.mdc`**).
-
-## MUST NOT
-
-- Ship a **full create/edit wizard** only in a drawer when it needs bookmarkable URL / long focus.
-- Use **`ListPageTemplate`** for a dedicated “new record” route.
-- Name shared templates after one feature (`NewQuestionPageTemplate`, etc.).
-
-## Code pointers
-
-| Piece | Path |
-| --- | --- |
-| Shell | `components/templates/focused-workflow-page-template.tsx` |
-| Layouts + footers | `components/templates/focused-workflow-layouts.tsx` |
-| Showcase | `components/examples/focused-workflow-showcase.tsx`, `/examples/focused-workflow` |
-| Single column | `app/(app)/question-bank/new/page.tsx` + `new-question-composer.tsx` |
-| Sidebar sections | `app/(app)/settings/page.tsx` + `settings-client.tsx` |
-
-## Pair with
-
-- **`exxat-page-vs-drawer`**, **`exxat-drawer-vs-dialog`**, **`exxat-kbd-shortcuts`**
-- **`exxat-reuse-before-custom`** — extend layouts before forking shell markup

package/consumer-extras/patterns/consumer-app-pattern.md

@@ -1,39 +0,0 @@
-# Consumer app pattern (`@exxatdesignux/ui`)
-
-> **Audience:** Product repos that **install** the design system from npm — not the `apps/web` monorepo reference app.  
-> **Handbook:** `packages/ui/consumer-extras/AGENTS.md` · **Upgrade:** `consumer-upgrade-checklist.md` · **Skill:** `.cursor/skills/exxat-consumer-app/SKILL.md`
-
-## Intent
-
-A **consumer app** composes **`@exxatdesignux/ui`** primitives and copies **patterns** from the published **`template/`** tree. It does **not** fork parallel table stacks, view routers, or shell tokens.
-
-## MUST
-
-1. **Install** — `@exxatdesignux/ui` + peers; import DS CSS once (`@exxatdesignux/ui/globals.css` or documented entry).
-2. **Sync extras** — After version bumps: `npx --package=@exxatdesignux/ui@latest exxat-ui sync-extras` → `.cursor/skills/exxat-*` + `docs/exxat-ds/*.md`.
-3. **Diff template** — Compare `node_modules/@exxatdesignux/ui/template/` for new files (layouts, `ListPageConnectedViewBody`, `FocusedWorkflowPageTemplate`, mocks).
-4. **List hubs** — One **`useTableState`** row bag; **`ListPageConnectedViewBody`** + **`defineHubViewRenderers`**; same **`supportedViewTypes`** on **`ListPageTemplate`** and **`TablePropertiesDrawer`**.
-5. **Shell tokens** — Sidebar / secondary panel / page elevation via **`--sidebar`**, **`--secondary-panel-bg`**, **`--background`** — see **`shell-surface-elevation-pattern.md`**.
-6. **Focused workflows** — Dedicated create/edit/settings routes use **`FocusedWorkflowPageTemplate`** — **`focused-workflow-page-pattern.md`**.
-
-## MUST NOT
-
-- Copy only components without porting **AGENTS**, **rules**, and **pattern docs** when behavior changes.
-- Ship hub view tabs with long **`if (view === "table")`** chains instead of **`ListPageConnectedViewBody`**.
-- Keep a second mock array per view while the grid uses **`useTableState`**.
-- Set secondary panel to **`bg-sidebar`** or light **`--brand-tint`** mixes in dark mode.
-
-## Checklist (new consumer feature)
-
-- [ ] Read **`consumer-upgrade-checklist.md`** for the installed UI version.
-- [ ] Run **`exxat-ui sync-extras`** if skills/patterns are stale.
-- [ ] Find the closest **`template/`** hub or page; port file names and imports to your app paths.
-- [ ] **List hub:** `lib/<hub>-supported-views.ts`, `lib/data-list-view-registry.ts`, `ListPageConnectedViewBody`, centralized **`tableState.rows`**.
-- [ ] **Form route:** `FocusedWorkflowPageTemplate` + one body layout from **`focused-workflow-layouts.tsx`**.
-- [ ] **Nav + secondary panel:** `secondaryPanel` on nav item, `PANELS` registry, `useAutoPanel` — **`exxat-primary-nav-secondary-panel`** skill.
-- [ ] Re-run **`fa:subset-audit`** when adding Font Awesome glyphs.
-
-## See also
-
-- Monorepo reference: `apps/web/` (full product demo)
-- **`.cursor/rules/exxat-consumer-app.mdc`** (when working inside a consumer repo that synced rules)

package/consumer-extras/patterns/focused-workflow-page-pattern.md

@@ -1,84 +0,0 @@
-# Focused workflow page (dedicated routes)
-
-> **Related:** **`AGENTS.md` §6.4** (page vs drawer vs dialog), **§14** (AI checklist), **`docs/drawer-vs-dialog-pattern.md`**, **`.cursor/rules/exxat-page-vs-drawer.mdc`**, **`.cursor/rules/exxat-focused-workflow-page.mdc`**, **`.cursor/skills/exxat-focused-workflow-page/SKILL.md`**.
-
-## Intent
-
-Use **`FocusedWorkflowPageTemplate`** for **large or multi-step work** on its **own route** — create/edit forms, wizards, and sectioned settings. The shell is **narrower** than list hubs and **does not** use Miller-column / split-panel explorers.
-
-| Surface | Use instead |
-| --- | --- |
-| Browsable record hubs (table, board, dashboard tabs) | **`PrimaryPageTemplate`** + **`ListPageTemplate`** |
-| Finder / folder columns / split hub chrome | **`ListPageSplitHubChrome`**, **`ListPageFolderColumnsPanel`** |
-| Quick properties or export beside a grid | **Drawer** (`TablePropertiesDrawer`, `ExportDrawer`) |
-| Blocking confirm on the same route | **Dialog** |
-
-## Surface matrix (§6.4)
-
-| Need | Drawer | Dialog | **Focused workflow route** |
-| --- | --- | --- | --- |
-| Keep hub visible while acting | Yes | No | No |
-| Own URL / bookmark / history | Rare | No | **Yes** |
-| Multi-step wizard | Cramped | No | **Yes** |
-| Sectioned settings (left nav) | Awkward | No | **Yes** |
-| Short delete confirm | No | **Yes** | Overkill |
-
-## Shell
-
-**`FocusedWorkflowPageTemplate`** (`components/templates/focused-workflow-page-template.tsx`):
-
-- **`SidebarInset`** + **`SiteHeader`** (breadcrumb back link + title).
-- Centered column: **`max-w-3xl` / `max-w-4xl` / `max-w-5xl`** via **`maxWidth`** (`md` | `lg` | `xl`).
-- Default padding: **`FOCUSED_WORKFLOW_CONTENT_PADDING_CLASS`**.
-
-Optional **`beforeSiteHeader`** (e.g. **`SidebarAutoCollapse`** on long forms).
-
-## Body layouts
-
-Import from **`components/templates/focused-workflow-layouts.tsx`**:
-
-| Layout | When |
-| --- | --- |
-| **`FocusedWorkflowSingleColumn`** | Default stack — header, form sections, footer actions (e.g. question authoring). |
-| **`FocusedWorkflowStepForm`** + **`FocusedWorkflowWizardFooter`** | Multi-step wizard with progress list and sticky footer (placement-style flows). |
-| **`FocusedWorkflowSidebarSections`** | Sectioned form with **left nav rail** (settings-style); put **`id`** on each `<section>` matching **`sections[].id`**. |
-| **`FocusedWorkflowEmptyState`** | Placeholder / not-yet-configured route body. |
-| **`FocusedWorkflowActionFooter`** | Single-step Cancel (Esc) + primary (Enter) without step chrome. |
-
-Keyboard: wizard and action footers pair **`Shortcut`** with inline **`<Kbd variant="bare">`** per **`.cursor/rules/exxat-kbd-shortcuts.mdc`**.
-
-## Golden references
-
-| Route | Variant |
-| --- | --- |
-| **`/question-bank/new`** | Shell + **`FocusedWorkflowSingleColumn`** + domain composer |
-| **`/settings`** | Shell (`maxWidth="lg"`) + **`FocusedWorkflowSidebarSections`** |
-| **`/examples/focused-workflow`** | Showcase: empty, steps, sidebar (toggle) |
-
-## Wiring checklist (implementers)
-
-1. **Route** under **`app/(app)/…/page.tsx`** — thin server page; heavy UI in a **client** component.
-2. **`siteHeader`**: **`back`** or **`breadcrumbs`** + **`title`**; avoid duplicating the trail in the body.
-3. Pick **`maxWidth`**: **`md`** for simple forms, **`lg`** for settings / wide fields.
-4. Choose **one** body layout; do **not** nest Miller columns or **`ListPageTemplate`** view tabs inside this shell.
-5. Domain logic stays in **`*-composer.tsx`** / **`*-client.tsx`**; templates stay generic **`FocusedWorkflow*`**.
-6. Run **§14** in **`AGENTS.md`** when reviewing.
-
-## AI execution checklist (copy for PRs)
-
-- [ ] **`FocusedWorkflowPageTemplate`** on the route — not ad-hoc **`SidebarInset`** / list-hub shell.
-- [ ] Correct body variant: **single column** | **step form** | **sidebar sections** | **empty**.
-- [ ] Wizard/action footers use **`Shortcut`** + bare **`Kbd`** in buttons.
-- [ ] **No** list-hub view tabs, **no** folder-column explorer inside the page.
-- [ ] Template/component names remain **generic** (not tied to one entity).
-- [ ] **§6.5** — no toast for product feedback.
-
-## Pair with
-
-- **`exxat-page-vs-drawer.mdc`**, **`exxat-drawer-vs-dialog.mdc`**, **`exxat-kbd-shortcuts.mdc`**
-- **`exxat-reuse-before-custom.mdc`** — extend **`focused-workflow-layouts.tsx`** before forking a second shell
-
-## See also
-
-- **`components/examples/focused-workflow-showcase.tsx`**
-- **`packages/ui/consumer-extras/patterns/focused-workflow-page-pattern.md`** (npm consumers)

package/src/components/ui/button-group.tsx

@@ -1,81 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "../../lib/utils"
-import { Separator } from "./separator"
-
-const buttonGroupVariants = cva(
-  "group/button-group flex w-fit items-stretch overflow-hidden rounded-md *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
-  },
-)
-
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="button-group"
-      data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot.Root : "div"
-
-  return (
-    <Comp
-      className={cn(
-        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof Separator>) {
-  return (
-    <Separator
-      data-slot="button-group-separator"
-      orientation={orientation}
-      className={cn(
-        "relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:h-auto data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }