@exxatdesignux/ui 0.2.19 → 0.3.0

package/dist/lib/dropdown-menu-surface.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Default surface sizing for product dropdown menus (view settings, row ⋯, column menus, etc.).
+ *
+ * Uses **pure CSS** (`w-max` + `min-w-*` + `max-w-*`) so width follows labels and shortcuts
+ * without **ResizeObserver** or layout thrash.
+ *
+ * Override when you need a fixed rail, for example:
+ * - `className="w-20"` — page-size picker in `DataTablePaginated`
+ * - `className="w-(--radix-dropdown-menu-trigger-width) min-w-60"` — account / identity menus
+ * - `className="!w-max min-w-72 …"` — very wide school/program switcher
+ */
+declare const DROPDOWN_MENU_CONTENT_SURFACE_CLASS: "min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]";
+
+export { DROPDOWN_MENU_CONTENT_SURFACE_CLASS };

package/dist/lib/dropdown-menu-surface.js

@@ -0,0 +1,6 @@
+// src/lib/dropdown-menu-surface.ts
+var DROPDOWN_MENU_CONTENT_SURFACE_CLASS = "min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]";
+
+export { DROPDOWN_MENU_CONTENT_SURFACE_CLASS };
+//# sourceMappingURL=dropdown-menu-surface.js.map
+//# sourceMappingURL=dropdown-menu-surface.js.map

package/dist/lib/dropdown-menu-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/dropdown-menu-surface.ts"],"names":[],"mappings":";AAWO,IAAM,mCAAA,GACX","file":"dropdown-menu-surface.js","sourcesContent":["/**\n * Default surface sizing for product dropdown menus (view settings, row ⋯, column menus, etc.).\n *\n * Uses **pure CSS** (`w-max` + `min-w-*` + `max-w-*`) so width follows labels and shortcuts\n * without **ResizeObserver** or layout thrash.\n *\n * Override when you need a fixed rail, for example:\n * - `className=\"w-20\"` — page-size picker in `DataTablePaginated`\n * - `className=\"w-(--radix-dropdown-menu-trigger-width) min-w-60\"` — account / identity menus\n * - `className=\"!w-max min-w-72 …\"` — very wide school/program switcher\n */\nexport const DROPDOWN_MENU_CONTENT_SURFACE_CLASS =\n  \"min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]\" as const\n"]}

package/dist/lib/editable-target.d.ts

@@ -0,0 +1,12 @@
+/**
+ * True when focus is in a field where global shortcuts should not fire.
+ *
+ * Mirrors the same skip logic baked into Radix `useShortcut` so global
+ * hotkey handlers (export ⌘⇧E, rename F2, etc.) don't steal keystrokes
+ * that the user clearly intends for the input. Covers native form
+ * fields and any element marked `contenteditable="true"` (richtext
+ * editors, comment composers).
+ */
+declare function isEditableTarget(target: EventTarget | null): boolean;
+
+export { isEditableTarget };

package/dist/lib/editable-target.js

@@ -0,0 +1,12 @@
+// src/lib/editable-target.ts
+function isEditableTarget(target) {
+  const el = target;
+  if (!el) return false;
+  if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+    return true;
+  return el.getAttribute?.("contenteditable") === "true";
+}
+
+export { isEditableTarget };
+//# sourceMappingURL=editable-target.js.map
+//# sourceMappingURL=editable-target.js.map

package/dist/lib/editable-target.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/editable-target.ts"],"names":[],"mappings":";AASO,SAAS,iBAAiB,MAAA,EAAqC;AACpE,EAAA,MAAM,EAAA,GAAK,MAAA;AACX,EAAA,IAAI,CAAC,IAAI,OAAO,KAAA;AAChB,EAAA,IACE,EAAA,YAAc,gBAAA,IACd,EAAA,YAAc,mBAAA,IACd,EAAA,YAAc,iBAAA;AAEd,IAAA,OAAO,IAAA;AACT,EAAA,OAAO,EAAA,CAAG,YAAA,GAAe,iBAAiB,CAAA,KAAM,MAAA;AAClD","file":"editable-target.js","sourcesContent":["/**\n * True when focus is in a field where global shortcuts should not fire.\n *\n * Mirrors the same skip logic baked into Radix `useShortcut` so global\n * hotkey handlers (export ⌘⇧E, rename F2, etc.) don't steal keystrokes\n * that the user clearly intends for the input. Covers native form\n * fields and any element marked `contenteditable=\"true\"` (richtext\n * editors, comment composers).\n */\nexport function isEditableTarget(target: EventTarget | null): boolean {\n  const el = target as HTMLElement | null\n  if (!el) return false\n  if (\n    el instanceof HTMLInputElement ||\n    el instanceof HTMLTextAreaElement ||\n    el instanceof HTMLSelectElement\n  )\n    return true\n  return el.getAttribute?.(\"contenteditable\") === \"true\"\n}\n"]}

package/dist/lib/list-page-table-properties.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { DataListViewType } from './data-list-view.js';
+export { i as isDataListSurfaceViewType } from '../data-list-view-registry-CyBoBML4.js';
+
+/**
+ * Connects ListPageTemplate “View → Edit” to a surface that hosts TablePropertiesDrawer
+ * (PlacementsTable, TeamTable, ComplianceTable, …). Import from `@/components/table-properties`
+ * or use here — see `createListPageEditViewHandler`.
+ *
+ * View **labels** for tabs and Properties are centralized in `@/lib/data-list-view`
+ * (`DATA_LIST_VIEW_TILES`, `dataListViewLabel`, `dataListViewIcon`).
+ */
+
+/** Minimal ref API any list/table surface exposes for the shared Properties drawer. */
+interface OpenTablePropertiesHandle {
+    openPropertiesDrawer: () => void;
+}
+interface CreateListPageEditViewHandlerOptions {
+    /** Delay before opening Properties after switching to table (ms). Default 160. */
+    switchDelayMs?: number;
+}
+/**
+ * Returns `ListPageTemplate`’s `onEditView` handler: optionally coerces the tab to `table`
+ * when the view type is unknown, then calls `ref.current.openPropertiesDrawer()`.
+ */
+declare function createListPageEditViewHandler(tableRef: React.RefObject<OpenTablePropertiesHandle | null>, options?: CreateListPageEditViewHandlerOptions): (tab: {
+    viewType: string;
+}, { updateTab }: {
+    updateTab: (patch: {
+        viewType?: DataListViewType;
+        icon?: string;
+    }) => void;
+}) => void;
+
+export { type CreateListPageEditViewHandlerOptions, type OpenTablePropertiesHandle, createListPageEditViewHandler };

package/dist/lib/list-page-table-properties.js

@@ -0,0 +1,81 @@
+// 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 dataListViewIcon(view) {
+  return DATA_LIST_VIEW_TILES.find((t) => t.value === view)?.icon ?? "fa-table";
+}
+
+// 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
+  };
+});
+new Map(
+  DEFINITIONS.map((d) => [d.value, d])
+);
+var DATA_LIST_VIEW_REGISTRY = DEFINITIONS;
+var DATA_LIST_SURFACE_VIEW_TYPES = new Set(
+  DATA_LIST_VIEW_REGISTRY.map((d) => d.value)
+);
+function isDataListSurfaceViewType(viewType) {
+  return DATA_LIST_SURFACE_VIEW_TYPES.has(viewType);
+}
+
+// src/lib/list-page-table-properties.ts
+function createListPageEditViewHandler(tableRef, options) {
+  const delay = options?.switchDelayMs ?? 160;
+  return (tab, { updateTab }) => {
+    const mustSwitchToTableSurface = !isDataListSurfaceViewType(tab.viewType);
+    if (mustSwitchToTableSurface) {
+      updateTab({ viewType: "table", icon: dataListViewIcon("table") });
+    }
+    window.setTimeout(() => {
+      tableRef.current?.openPropertiesDrawer();
+    }, mustSwitchToTableSurface ? delay : 0);
+  };
+}
+
+export { createListPageEditViewHandler, isDataListSurfaceViewType };
+//# sourceMappingURL=list-page-table-properties.js.map
+//# sourceMappingURL=list-page-table-properties.js.map

package/dist/lib/list-page-table-properties.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/lib/list-page-table-properties.ts"],"names":[],"mappings":"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","file":"list-page-table-properties.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","/**\n * Connects ListPageTemplate “View → Edit” to a surface that hosts TablePropertiesDrawer\n * (PlacementsTable, TeamTable, ComplianceTable, …). Import from `@/components/table-properties`\n * or use here — see `createListPageEditViewHandler`.\n *\n * View **labels** for tabs and Properties are centralized in `@/lib/data-list-view`\n * (`DATA_LIST_VIEW_TILES`, `dataListViewLabel`, `dataListViewIcon`).\n */\n\nimport * as React from \"react\"\n\nimport { dataListViewIcon, type DataListViewType } from \"./data-list-view\"\nimport { isDataListSurfaceViewType } from \"./data-list-view-registry\"\n\nexport { isDataListSurfaceViewType }\n\n/** Minimal ref API any list/table surface exposes for the shared Properties drawer. */\nexport interface OpenTablePropertiesHandle {\n  openPropertiesDrawer: () => void\n}\n\nexport interface CreateListPageEditViewHandlerOptions {\n  /** Delay before opening Properties after switching to table (ms). Default 160. */\n  switchDelayMs?: number\n}\n\n/**\n * Returns `ListPageTemplate`’s `onEditView` handler: optionally coerces the tab to `table`\n * when the view type is unknown, then calls `ref.current.openPropertiesDrawer()`.\n */\nexport function createListPageEditViewHandler(\n  tableRef: React.RefObject<OpenTablePropertiesHandle | null>,\n  options?: CreateListPageEditViewHandlerOptions\n) {\n  const delay = options?.switchDelayMs ?? 160\n  return (\n    tab: { viewType: string },\n    { updateTab }: { updateTab: (patch: { viewType?: DataListViewType; icon?: string }) => void }\n  ) => {\n    const mustSwitchToTableSurface = !isDataListSurfaceViewType(tab.viewType)\n    if (mustSwitchToTableSurface) {\n      updateTab({ viewType: \"table\", icon: dataListViewIcon(\"table\") })\n    }\n    window.setTimeout(() => {\n      tableRef.current?.openPropertiesDrawer()\n    }, mustSwitchToTableSurface ? delay : 0)\n  }\n}\n"]}

package/dist/lib/raf-throttle.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 })
+ *   }
+ */
+declare function rafThrottle<TArgs extends unknown[]>(fn: (...args: TArgs) => void): ((...args: TArgs) => void) & {
+    cancel: () => void;
+};
+
+export { rafThrottle };

package/dist/lib/raf-throttle.js

@@ -0,0 +1,27 @@
+// src/lib/raf-throttle.ts
+function rafThrottle(fn) {
+  let rafId = 0;
+  let lastArgs = null;
+  const scheduled = ((...args) => {
+    lastArgs = args;
+    if (rafId !== 0) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      const a = lastArgs;
+      lastArgs = null;
+      if (a) fn(...a);
+    });
+  });
+  scheduled.cancel = () => {
+    if (rafId !== 0) {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+    }
+    lastArgs = null;
+  };
+  return scheduled;
+}
+
+export { rafThrottle };
+//# sourceMappingURL=raf-throttle.js.map
+//# sourceMappingURL=raf-throttle.js.map

package/dist/lib/raf-throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/raf-throttle.ts"],"names":[],"mappings":";AAkBO,SAAS,YACd,EAAA,EACqD;AACrD,EAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,EAAA,IAAI,QAAA,GAAyB,IAAA;AAE7B,EAAA,MAAM,SAAA,IAAa,IAAI,IAAA,KAAgB;AACrC,IAAA,QAAA,GAAW,IAAA;AACX,IAAA,IAAI,UAAU,CAAA,EAAG;AACjB,IAAA,KAAA,GAAQ,sBAAsB,MAAM;AAClC,MAAA,KAAA,GAAQ,CAAA;AACR,MAAA,MAAM,CAAA,GAAI,QAAA;AACV,MAAA,QAAA,GAAW,IAAA;AACX,MAAA,IAAI,CAAA,EAAG,EAAA,CAAG,GAAG,CAAC,CAAA;AAAA,IAChB,CAAC,CAAA;AAAA,EACH,CAAA,CAAA;AAEA,EAAA,SAAA,CAAU,SAAS,MAAM;AACvB,IAAA,IAAI,UAAU,CAAA,EAAG;AACf,MAAA,oBAAA,CAAqB,KAAK,CAAA;AAC1B,MAAA,KAAA,GAAQ,CAAA;AAAA,IACV;AACA,IAAA,QAAA,GAAW,IAAA;AAAA,EACb,CAAA;AAEA,EAAA,OAAO,SAAA;AACT","file":"raf-throttle.js","sourcesContent":["/**\n * Coalesce many calls to `fn` into one per animation frame.\n *\n * Use for high-frequency layout-reading event handlers (scroll, resize,\n * visualViewport, ResizeObserver) where the work must happen in a frame but\n * doing it on every event call (60+/s for resize, hundreds/s for capture\n * scrolls) wastes layout/paint cycles. The returned function exposes\n * `.cancel()` so effect cleanup can drop a pending frame.\n *\n * Pattern:\n *   const apply = () => { ...layout reads + setState... }\n *   const scheduled = rafThrottle(apply)\n *   window.addEventListener(\"scroll\", scheduled, { passive: true, capture: true })\n *   return () => {\n *     scheduled.cancel()\n *     window.removeEventListener(\"scroll\", scheduled, { capture: true })\n *   }\n */\nexport function rafThrottle<TArgs extends unknown[]>(\n  fn: (...args: TArgs) => void,\n): ((...args: TArgs) => void) & { cancel: () => void } {\n  let rafId = 0\n  let lastArgs: TArgs | null = null\n\n  const scheduled = ((...args: TArgs) => {\n    lastArgs = args\n    if (rafId !== 0) return\n    rafId = requestAnimationFrame(() => {\n      rafId = 0\n      const a = lastArgs\n      lastArgs = null\n      if (a) fn(...a)\n    })\n  }) as ((...args: TArgs) => void) & { cancel: () => void }\n\n  scheduled.cancel = () => {\n    if (rafId !== 0) {\n      cancelAnimationFrame(rafId)\n      rafId = 0\n    }\n    lastArgs = null\n  }\n\n  return scheduled\n}\n"]}

package/dist/lib/row-height.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Table row density — shared by Properties drawer tiles and useTableState.
+ *
+ * Three steps modelled after Linear / Notion / Airtable density toggles.
+ * `default` is the design-system baseline (`h-9` rows, `text-sm`); the
+ * other two scale the row height + vertical padding without changing the
+ * font size, so dense tables stay legible.
+ */
+type RowHeight = "compact" | "default" | "comfortable";
+declare const ROW_HEIGHT_TILES: readonly {
+    value: RowHeight;
+    label: string;
+    icon: string;
+}[];
+
+export { ROW_HEIGHT_TILES, type RowHeight };

package/dist/lib/row-height.js

@@ -0,0 +1,10 @@
+// src/lib/row-height.ts
+var ROW_HEIGHT_TILES = [
+  { 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 };
+//# sourceMappingURL=row-height.js.map
+//# sourceMappingURL=row-height.js.map

package/dist/lib/row-height.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/row-height.ts"],"names":[],"mappings":";AAUO,IAAM,gBAAA,GAIP;AAAA,EACJ,EAAE,KAAA,EAAO,SAAA,EAAe,KAAA,EAAO,SAAA,EAAe,MAAM,iBAAA,EAAoB;AAAA,EACxE,EAAE,KAAA,EAAO,SAAA,EAAe,KAAA,EAAO,SAAA,EAAe,MAAM,mBAAA,EAAoB;AAAA,EACxE,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,aAAA,EAAe,MAAM,eAAA;AACtD","file":"row-height.js","sourcesContent":["/**\n * Table row density — shared by Properties drawer tiles and useTableState.\n *\n * Three steps modelled after Linear / Notion / Airtable density toggles.\n * `default` is the design-system baseline (`h-9` rows, `text-sm`); the\n * other two scale the row height + vertical padding without changing the\n * font size, so dense tables stay legible.\n */\nexport type RowHeight = \"compact\" | \"default\" | \"comfortable\"\n\nexport const ROW_HEIGHT_TILES: readonly {\n  value: RowHeight\n  label: string\n  icon: string\n}[] = [\n  { value: \"compact\",     label: \"Compact\",     icon: \"fa-down-to-line\"   },\n  { value: \"default\",     label: \"Default\",     icon: \"fa-arrows-up-down\" },\n  { value: \"comfortable\", label: \"Comfortable\", icon: \"fa-up-to-line\"     },\n]\n"]}

package/dist/lib/table-properties-types.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Shared types + design-system constants for the Table Properties drawer
+ * and related data-table primitives (filter chips, sort cards,
+ * conditional formatting rules).
+ *
+ * Product-specific seed data (`FILTER_FIELDS` and `COLUMNS` arrays
+ * tailored to the Placements hub) intentionally stays in
+ * `apps/web/components/table-properties/types.ts` — those values are
+ * **product data**, not design-system primitives, and the package must
+ * not know about Placement specializations, supervisor labels, etc.
+ *
+ * Consumers compose their own `FilterFieldDef[]` / `ColDef[]` arrays
+ * tailored to their entity (Team members, Compliance items, Question
+ * bank rows, …) and pass them into the drawer through props.
+ */
+/** Comparison operator vocabulary used by every filter row + conditional rule. */
+type FilterOperator = "is" | "is_not" | "contains" | "not_contains";
+/**
+ * Input mask for `type: "text"` filters. Maps to a
+ * [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask)
+ * pattern key. Add new keys here (and in your concrete `exxatMaskPatterns`
+ * map) when a new column needs a structured text format.
+ */
+type FilterTextMask = "phone" | "zip" | "dateMDY";
+interface FilterFieldDef {
+    key: string;
+    label: string;
+    icon: string;
+    type: "select" | "text" | "date";
+    operators: FilterOperator[];
+    /** Select options, or for `date` fields used by conditional rules (exact row strings). */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
+    textMask?: FilterTextMask;
+}
+interface ActiveFilter {
+    id: string;
+    fieldKey: string;
+    operator: FilterOperator;
+    values: string[];
+}
+interface SortRule {
+    id: string;
+    fieldKey: string;
+    direction: "asc" | "desc";
+}
+/** Operator → human-readable label map (centralized so chips, drawer, and CSV exports stay aligned). */
+declare const OPERATOR_LABELS: Record<FilterOperator, string>;
+/** Column descriptor for `TableProperties` views (Columns / Sort / Group panels). */
+interface ColDef {
+    key: string;
+    label: string;
+    sortable: boolean;
+    sortKey?: string;
+    minWidth: number;
+}
+interface ConditionalRule {
+    id: string;
+    /** Column key to evaluate */
+    fieldKey: string;
+    operator: FilterOperator;
+    /** Selected option values (select) or text (single entry) when operator needs values */
+    values: string[];
+    /** Resolved CSS background color string */
+    bgColor: string;
+}
+/**
+ * Predefined palette for conditional rule backgrounds.
+ *
+ * Backgrounds are exposed as CSS custom properties so theming swaps the
+ * palette per brand without code edits (`--conditional-rule-green`,
+ * `--conditional-rule-yellow`, etc., declared in
+ * `packages/ui/src/globals.css`).
+ */
+declare const RULE_COLORS: {
+    name: string;
+    bg: string;
+}[];
+
+export { type ActiveFilter, type ColDef, type ConditionalRule, type FilterFieldDef, type FilterOperator, type FilterTextMask, OPERATOR_LABELS, RULE_COLORS, type SortRule };

package/dist/lib/table-properties-types.js

@@ -0,0 +1,19 @@
+// src/lib/table-properties-types.ts
+var OPERATOR_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  not_contains: "does not contain"
+};
+var RULE_COLORS = [
+  { name: "Green", bg: "var(--conditional-rule-green)" },
+  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
+  { name: "Blue", bg: "var(--conditional-rule-blue)" },
+  { name: "Red", bg: "var(--conditional-rule-red)" },
+  { name: "Purple", bg: "var(--conditional-rule-purple)" },
+  { name: "Orange", bg: "var(--conditional-rule-orange)" }
+];
+
+export { OPERATOR_LABELS, RULE_COLORS };
+//# sourceMappingURL=table-properties-types.js.map
+//# sourceMappingURL=table-properties-types.js.map

package/dist/lib/table-properties-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/table-properties-types.ts"],"names":[],"mappings":";AAqDO,IAAM,eAAA,GAAkD;AAAA,EAC7D,EAAA,EAAI,IAAA;AAAA,EACJ,MAAA,EAAQ,QAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,YAAA,EAAc;AAChB;AAgCO,IAAM,WAAA,GAA8C;AAAA,EACzD,EAAE,IAAA,EAAM,OAAA,EAAU,EAAA,EAAI,+BAAA,EAAiC;AAAA,EACvD,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,gCAAA,EAAiC;AAAA,EACvD,EAAE,IAAA,EAAM,MAAA,EAAU,EAAA,EAAI,8BAAA,EAAiC;AAAA,EACvD,EAAE,IAAA,EAAM,KAAA,EAAU,EAAA,EAAI,6BAAA,EAAiC;AAAA,EACvD,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,gCAAA,EAAiC;AAAA,EACvD,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,gCAAA;AACxB","file":"table-properties-types.js","sourcesContent":["/**\n * Shared types + design-system constants for the Table Properties drawer\n * and related data-table primitives (filter chips, sort cards,\n * conditional formatting rules).\n *\n * Product-specific seed data (`FILTER_FIELDS` and `COLUMNS` arrays\n * tailored to the Placements hub) intentionally stays in\n * `apps/web/components/table-properties/types.ts` — those values are\n * **product data**, not design-system primitives, and the package must\n * not know about Placement specializations, supervisor labels, etc.\n *\n * Consumers compose their own `FilterFieldDef[]` / `ColDef[]` arrays\n * tailored to their entity (Team members, Compliance items, Question\n * bank rows, …) and pass them into the drawer through props.\n */\n\n/** Comparison operator vocabulary used by every filter row + conditional rule. */\nexport type FilterOperator = \"is\" | \"is_not\" | \"contains\" | \"not_contains\"\n\n/**\n * Input mask for `type: \"text\"` filters. Maps to a\n * [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask)\n * pattern key. Add new keys here (and in your concrete `exxatMaskPatterns`\n * map) when a new column needs a structured text format.\n */\nexport type FilterTextMask = \"phone\" | \"zip\" | \"dateMDY\"\n\nexport interface FilterFieldDef {\n  key: string\n  label: string\n  icon: string\n  type: \"select\" | \"text\" | \"date\"\n  operators: FilterOperator[]\n  /** Select options, or for `date` fields used by conditional rules (exact row strings). */\n  options?: { value: string; label: string }[]\n  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */\n  textMask?: FilterTextMask\n}\n\nexport interface ActiveFilter {\n  id: string\n  fieldKey: string\n  operator: FilterOperator\n  values: string[]\n}\n\nexport interface SortRule {\n  id: string\n  fieldKey: string\n  direction: \"asc\" | \"desc\"\n}\n\n/** Operator → human-readable label map (centralized so chips, drawer, and CSV exports stay aligned). */\nexport const OPERATOR_LABELS: Record<FilterOperator, string> = {\n  is: \"is\",\n  is_not: \"is not\",\n  contains: \"contains\",\n  not_contains: \"does not contain\",\n}\n\n/** Column descriptor for `TableProperties` views (Columns / Sort / Group panels). */\nexport interface ColDef {\n  key: string\n  label: string\n  sortable: boolean\n  sortKey?: string\n  minWidth: number\n}\n\n/* ─── Conditional formatting ──────────────────────────────────────────── */\n\nexport interface ConditionalRule {\n  id: string\n  /** Column key to evaluate */\n  fieldKey: string\n  operator: FilterOperator\n  /** Selected option values (select) or text (single entry) when operator needs values */\n  values: string[]\n  /** Resolved CSS background color string */\n  bgColor: string\n}\n\n/**\n * Predefined palette for conditional rule backgrounds.\n *\n * Backgrounds are exposed as CSS custom properties so theming swaps the\n * palette per brand without code edits (`--conditional-rule-green`,\n * `--conditional-rule-yellow`, etc., declared in\n * `packages/ui/src/globals.css`).\n */\nexport const RULE_COLORS: { name: string; bg: string }[] = [\n  { name: \"Green\",  bg: \"var(--conditional-rule-green)\"  },\n  { name: \"Yellow\", bg: \"var(--conditional-rule-yellow)\" },\n  { name: \"Blue\",   bg: \"var(--conditional-rule-blue)\"   },\n  { name: \"Red\",    bg: \"var(--conditional-rule-red)\"    },\n  { name: \"Purple\", bg: \"var(--conditional-rule-purple)\" },\n  { name: \"Orange\", bg: \"var(--conditional-rule-orange)\" },\n]\n"]}

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.js

@@ -0,0 +1,11 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts"],"names":[],"mappings":";;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"utils.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"]}

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@exxatdesignux/ui",
-  "version": "0.2.19",
+  "version": "0.3.0",
   "description": "Exxat shared design system (components, hooks, tokens). Monorepo setup: clone repo then pnpm bootstrap at workspace root — see github.com/ExxatDesign/Exxat-DS-Workspace README.",
+  "license": "UNLICENSED",
+  "author": "Exxat Design",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -21,37 +23,78 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./globals.css": "./src/globals.css",
-    "./theme.css": "./src/theme.css",
-    "./tokens/*": "./src/tokens/*",
+    "./tokens/hooks-index.json": "./tokens/hooks-index.json",
+    "./components/data-table": {
+      "types": "./dist/components/data-table/index.d.ts",
+      "import": "./dist/components/data-table/index.js",
+      "default": "./dist/components/data-table/index.js"
+    },
+    "./components/data-table/*": {
+      "types": "./dist/components/data-table/*.d.ts",
+      "import": "./dist/components/data-table/*.js",
+      "default": "./dist/components/data-table/*.js"
+    },
+    "./components/table-properties": {
+      "types": "./dist/components/table-properties/index.d.ts",
+      "import": "./dist/components/table-properties/index.js",
+      "default": "./dist/components/table-properties/index.js"
+    },
+    "./components/table-properties/*": {
+      "types": "./dist/components/table-properties/*.d.ts",
+      "import": "./dist/components/table-properties/*.js",
+      "default": "./dist/components/table-properties/*.js"
+    },
+    "./components/data-views": {
+      "types": "./dist/components/data-views/index.d.ts",
+      "import": "./dist/components/data-views/index.js",
+      "default": "./dist/components/data-views/index.js"
+    },
+    "./components/data-views/*": {
+      "types": "./dist/components/data-views/*.d.ts",
+      "import": "./dist/components/data-views/*.js",
+      "default": "./dist/components/data-views/*.js"
+    },
+    "./components/templates": {
+      "types": "./dist/components/templates/index.d.ts",
+      "import": "./dist/components/templates/index.js",
+      "default": "./dist/components/templates/index.js"
+    },
+    "./components/templates/*": {
+      "types": "./dist/components/templates/*.d.ts",
+      "import": "./dist/components/templates/*.js",
+      "default": "./dist/components/templates/*.js"
+    },
     "./components/*": {
-      "types": "./src/components/ui/*.tsx",
-      "import": "./src/components/ui/*.tsx",
-      "default": "./src/components/ui/*.tsx"
+      "types": "./dist/components/ui/*.d.ts",
+      "import": "./dist/components/ui/*.js",
+      "default": "./dist/components/ui/*.js"
     },
     "./hooks/*": {
-      "types": "./src/hooks/*.ts",
-      "import": "./src/hooks/*.ts",
-      "default": "./src/hooks/*.ts"
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js",
+      "default": "./dist/hooks/*.js"
     },
     "./lib/*": {
-      "types": "./src/lib/*.ts",
-      "import": "./src/lib/*.ts",
-      "default": "./src/lib/*.ts"
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js",
+      "default": "./dist/lib/*.js"
     }
   },
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "bin": {
     "exxat-ui": "./bin/cli.mjs",
     "create-exxat-app": "./bin/init.mjs"
   },
   "files": [
     "CHANGELOG.md",
+    "dist",
     "src",
     "bin",
     "template",
@@ -60,14 +103,17 @@
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-dialog": "^1.1.14",
+    "@tanstack/react-virtual": "^3.13.23",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
+    "motion": "^12.38.0",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^9.14.0",
     "react-hook-form": "^7.72.0",
     "react-payment-inputs": "^1.2.0",
+    "react-resizable-panels": "^4.10.0",
     "recharts": "^2.15.4",
     "shadcn": "^4.7.0",
     "sonner": "^2.0.7",
@@ -78,12 +124,24 @@
     "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.4",
     "@tailwindcss/postcss": "^4.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.14",
     "tailwindcss": "^4.2.1",
-    "typescript": "^5.9.3"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.4",
+    "vitest": "^3.2.4",
+    "@exxatdesignux/eslint-plugin": "0.1.0"
   },
   "peerDependencies": {
     "next-themes": ">=0.4",
@@ -91,9 +149,15 @@
     "react-dom": "^18 || ^19"
   },
   "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "sync-template": "node ./scripts/sync-template-from-web.mjs",
-    "vendor:consumer-extras": "node ./scripts/vendor-consumer-extras.mjs"
+    "vendor:consumer-extras": "node ./scripts/vendor-consumer-extras.mjs",
+    "tokens:index": "node ./scripts/build-tokens-index.mjs",
+    "tokens:check": "node ./scripts/build-tokens-index.mjs --check"
   }
 }