@exxatdesignux/ui 0.5.2 → 0.5.4

package/consumer-extras/patterns/drawer-vs-dialog-pattern.md

@@ -0,0 +1,50 @@
+# Sheet panel vs dialog vs route
+
+> **Related:** `docs/data-views-pattern.md` (Page vs drawer), **`AGENTS.md` §6.4**, **`.cursor/rules/exxat-page-vs-drawer.mdc`**. **This doc** splits **floating `Sheet` panels** vs **modal dialog** when both stay on the same route.
+
+## Sheet (side panel — product “drawers”)
+
+**Use when:**
+
+- The **list or hub behind the panel** still matters (user compares, copies, or dismisses and continues browsing).
+- The flow is **medium length** — export options, table/column properties, invite collaborators, filters that mirror the grid.
+- **Width** helps — tables of options, multi-field forms that would feel cramped in a narrow dialog.
+
+**Implementation:** **`Sheet`** from `@exxatdesignux/ui/components/sheet` with the floating inset pattern (`showOverlay={false}`, `getFloatingSheetInsetProps`) — see `ExportDrawer`, `TablePropertiesDrawer`, `InviteCollaboratorsDrawer`, `LibraryNewFolderSheet`.
+
+**Avoid when:** The task is the **only** thing the user should focus on and the parent would distract (prefer **dialog** for a sharp confirm, or **route** for a full wizard).
+
+## Dialog (modal)
+
+**Use when:**
+
+- You need a **hard stop** — user must answer or dismiss before interacting with the page again (confirm delete, acknowledge legal, pick a single blocking choice).
+- The content is **short and focused** — one decision, one form step, or a compact message with primary/secondary actions.
+- **Destructive or irreversible** actions — pair with clear copy; **Esc** / Cancel returns safely.
+
+**Examples:** `AlertDialog`, confirm-before-remove, “Save changes?” when navigating away.
+
+**Avoid when:** Users need to **reference** the grid or copy values from the page while the panel is open — use a **sheet panel** or **inline** pattern instead.
+
+## Route (new page)
+
+Use when the work is **primary**, **long**, **multi-step**, or deserves its **own URL** — see **`exxat-page-vs-drawer.mdc`** and **`AGENTS.md` §6.4**.
+
+## Quick matrix
+
+| Need | Sheet panel | Dialog | Route |
+| --- | --- | --- | --- |
+| Keep hub visible | Yes | No (blocks) | No |
+| Short confirm / alert | Rare | Yes | Overkill |
+| Long form / wizard | Cramped | No | Yes |
+| Properties tied to a table | Yes | Too small | Optional |
+
+## Accessibility
+
+- **Dialog / sheet:** Must expose a **title** (`DialogTitle`, `SheetTitle`) — use `sr-only` if visually hidden.
+- **Focus trap** is expected in dialogs; sheet panels should still **restore focus** on close to the invoking control.
+
+## See also
+
+- **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**, **`.cursor/skills/exxat-drawer-vs-dialog/SKILL.md`**
+- **`exxat-no-toast.mdc`** — use dialog/banner/inline, not toasts, for outcomes that need acknowledgment.

package/consumer-extras/patterns/hub-supported-views-pattern.md

@@ -0,0 +1,53 @@
+# Hub supported views pattern (Add view parity)
+
+> **Agents:** `.cursor/rules/exxat-hub-supported-views.mdc` (binding). **Reference hub:** Library / All questions (`library-table.tsx`, `library-client.tsx`).
+
+## Problem this solves
+
+`ListPageTemplate` filters **Add view** and Properties view tiles from `supportedViewTypes`. If Column types passes four views but Library passes seven, users see inconsistent menus. If a hub allows Board but has no `board-with-toolbar` renderer, users see **“does not implement Board view”**.
+
+## Canonical allowlist
+
+Import from the registry (single source of truth):
+
+```ts
+import { FULL_HUB_SUPPORTED_VIEWS } from "@/lib/data-list-view-registry"
+// or
+import { LIBRARY_SUPPORTED_VIEWS } from "@/lib/library-supported-views" // alias of FULL
+```
+
+Seven views: **table**, **list**, **board**, **dashboard**, **folder**, **panel**, **tree-panel**.
+
+`HubTable` and `ListPageTemplate` use this list when `supportedViewTypes` is omitted.
+
+`PRIMARY_HUB_SUPPORTED_VIEWS` (four views) remains for hubs that intentionally omit folder/panel/tree — document that in `lib/<entity>-supported-views.ts`.
+
+## Wiring checklist
+
+1. **`ListPageTemplate`** — `supportedViewTypes={FULL_HUB_SUPPORTED_VIEWS}` (or entity alias).
+2. **`HubTable`** — same allowlist (or omit on both).
+3. **List** — `renderListRow` returning **`ListPageBoardCard`** `layout="row"` (copy from `library-table.tsx`).
+4. **Board** — `renderBoardCard` + `boardGroups` and/or `renderers["board-with-toolbar"]`.
+5. **Dashboard** — `renderers["dashboard-with-toolbar"]` with **`KeyMetrics`** on filtered rows.
+6. **Folder / panel / tree** — explicit `renderers` entries (Library reference) or **`LibraryTable`** for `LibraryItem` rows.
+
+## Special cases in this app
+
+| Hub | Pattern |
+|-----|---------|
+| **Library / All questions** | `LibraryTable` + `LIBRARY_SUPPORTED_VIEWS` — reference |
+| **Column types** | `LibraryTable` with `columnDefs` + `hubLabels` + `DEFAULT_LIBRARY_FOLDERS` — custom table, shared other views |
+| **Tokens & themes** | `FULL_HUB_SUPPORTED_VIEWS` + `tokens-hub-auxiliary-views.tsx` |
+| **New entity hub** | Start from `library-table.tsx` or token/columns references; never table-only unless approved |
+
+## Anti-patterns
+
+- `supportedViewTypes={["table"]}` on a `ListPageTemplate` hub.
+- `COLUMNS_SUPPORTED_VIEWS = PRIMARY_HUB_SUPPORTED_VIEWS` without board/folder/panel/tree renderers.
+- Minimal `renderListRow` with only stem + `questionId` (not product list UI).
+
+## See also
+
+- `packages/ui/src/lib/data-list-view-registry.ts`
+- `docs/exxat-ds/patterns/data-views-pattern.md`
+- `apps/web/lib/hub-connected-view-renderers.ts` — `defineHubViewRenderers` dev warnings

package/dist/components/data-table/index.js

@@ -2256,13 +2256,15 @@ function useBulkBarFixedToTableScrollEl(scrollRef, active, fullWidth) {
     const scheduled = rafThrottle(apply);
     const ro = new ResizeObserver(scheduled);
     ro.observe(el);
+    el.addEventListener("scroll", scheduled, { passive: true });
     window.addEventListener("resize", scheduled, { passive: true });
-    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    window.addEventListener("scroll", scheduled, { passive: true });
     return () => {
       scheduled.cancel();
       ro.disconnect();
+      el.removeEventListener("scroll", scheduled);
       window.removeEventListener("resize", scheduled);
-      window.removeEventListener("scroll", scheduled, { capture: true });
+      window.removeEventListener("scroll", scheduled);
     };
   }, [active, fullWidth, scrollRef]);
   return style;
@@ -2429,11 +2431,13 @@ function DataTableInner({
     };
     update();
     const scheduled = rafThrottle(update);
-    window.addEventListener("scroll", scheduled, { passive: true, capture: true });
+    wrapEl.addEventListener("scroll", scheduled, { passive: true });
+    window.addEventListener("scroll", scheduled, { passive: true });
     window.addEventListener("resize", scheduled, { passive: true });
     return () => {
       scheduled.cancel();
-      window.removeEventListener("scroll", scheduled, { capture: true });
+      wrapEl.removeEventListener("scroll", scheduled);
+      window.removeEventListener("scroll", scheduled);
       window.removeEventListener("resize", scheduled);
     };
   }, [showColumnHeaders, rows.length, displayCols.length]);
@@ -2870,11 +2874,11 @@ function DataTableInner({
                           const rowPy = rowHeight === "compact" ? "py-1" : rowHeight === "comfortable" ? "py-4" : "py-2.5";
                           const cs = cellStyle(col.key);
                           const tdBase = cn(
-                            `px-3 ${rowPy} align-middle`,
+                            `px-3 ${rowPy} align-middle max-w-0`,
                             showGridlines && !isEdgePin && "border-e border-border last:border-e-0",
                             "border-b border-border group-last/row:border-b-0",
                             isPinned && [
-                              "z-20 pinned-cell",
+                              "z-20 pinned-cell relative",
                               "bg-dt-row-bg",
                               "group-data-[state=selected]/row:bg-dt-row-selected",
                               "group-hover/row:bg-dt-row-hover",
@@ -2924,17 +2928,17 @@ function DataTableInner({
                                   wrap && "[&_.truncate]:!whitespace-normal [&_.truncate]:!overflow-visible [&_.truncate]:!text-clip"
                                 ),
                                 style: tdStyle,
-                                children: col.cell(row, {
+                                children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-hidden", children: col.cell(row, {
                                   rowIndex,
                                   selected: isSelected,
                                   onSelect: (checked) => checked ? setSelected((prev) => /* @__PURE__ */ new Set([...prev, rowId])) : toggleRow(rowId)
-                                })
+                                }) })
                               },
                               col.key
                             );
                           }
                           const rawVal = String(row[col.key] ?? "");
-                          return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-sm text-foreground/80"), style: tdStyle, children: /* @__PURE__ */ jsx("span", { className: wrap ? "whitespace-normal" : "block truncate", title: !wrap ? rawVal : void 0, children: rawVal }) }, col.key);
+                          return /* @__PURE__ */ jsx("td", { className: cn(tdBase, "text-sm text-foreground/80"), style: tdStyle, children: /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: wrap ? "whitespace-normal" : "block truncate", title: !wrap ? rawVal : void 0, children: rawVal }) }) }, col.key);
                         })
                       },
                       String(rowId)