@exxatdesignux/ui 0.5.1 → 0.5.3

package/dist/components/data-views/data-row-list.js

@@ -90,7 +90,7 @@ function DataRowListVirtualized({
           {
             "data-index": vr.index,
             ref: virtualizer.measureElement,
-            className: cn("absolute left-0 top-0 w-full pb-2", rowClassName),
+            className: cn("absolute start-0 top-0 w-full pb-2", rowClassName),
             style: { transform: `translateY(${vr.start}px)` },
             children: renderRow(row, vr.index)
           },

package/dist/components/data-views/data-row-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/data-row-list.tsx"],"names":[],"mappings":"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","file":"data-row-list.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * DataRowList — generic vertical-stack list view used by every hub's \"list\"\n * tab (placements, team, compliance, sites, library, …). Replaces the\n * hand-rolled `<ul …flex-col gap-2 px-4 pb-8 pt-2 lg:px-6> {rows.map(<li>…)}`\n * shell that was duplicated across `*-list-view.tsx` files.\n *\n * Composition over inheritance: callers provide a `renderRow(row)` that\n * returns whatever ListPageBoardCard / link / chip-stack they need — this\n * component owns the chrome (spacing, empty state, virtualization), not the\n * row body.\n *\n * Auto-virtualises with `@tanstack/react-virtual` when the row count meets\n * `virtualizeThreshold` (default 100). Disable by passing `0`.\n */\n\nimport * as React from \"react\"\nimport { useWindowVirtualizer } from \"@tanstack/react-virtual\"\nimport { cn } from \"../../lib/utils\"\n\nconst DEFAULT_VIRTUALIZE_THRESHOLD = 100\nconst DEFAULT_ESTIMATED_ROW_HEIGHT = 96\nconst DEFAULT_OVERSCAN = 8\n\nexport interface DataRowListProps<TRow> {\n  /** The filtered/sorted rows from `tableState.rows` (or wherever). */\n  rows: readonly TRow[]\n  /** Stable id used as the React `key` and (for virtualizer) the v-key. */\n  getRowId: (row: TRow, index: number) => string | number\n  /** Render the body of one row. Wrap with `<ListPageBoardCard layout=\"row\">` etc. */\n  renderRow: (row: TRow, index: number) => React.ReactNode\n  /**\n   * Shown when `rows.length === 0`. Strings render as muted body copy; pass\n   * a `ReactNode` for richer empty states (illustration, CTA, etc.).\n   */\n  emptyState?: React.ReactNode\n  /**\n   * Auto-virtualise when `rows.length >= virtualizeThreshold`. Default 100.\n   * Pass `0` to never virtualise (preserves predictable layout for short\n   * lists like dashboards / pinned tabs).\n   */\n  virtualizeThreshold?: number\n  /** Hint for the virtualizer; clamps to measured size after first paint. */\n  estimatedRowHeight?: number\n  /** Override the default container padding / gap if needed. */\n  className?: string\n  /** Override the per-row `<li>` className (e.g. tighter spacing). */\n  rowClassName?: string\n  /** `aria-label` for the `<ul>` (screen-reader name for the list). */\n  ariaLabel?: string\n}\n\nconst DEFAULT_OUTER_CLASS = \"flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6\"\n\nexport function DataRowList<TRow>(props: DataRowListProps<TRow>) {\n  const {\n    rows,\n    getRowId,\n    renderRow,\n    emptyState,\n    virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD,\n    estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,\n    className,\n    rowClassName,\n    ariaLabel,\n  } = props\n\n  if (rows.length === 0) {\n    if (emptyState == null) return null\n    if (typeof emptyState === \"string\") {\n      return (\n        <div className=\"px-4 py-16 text-center lg:px-6\">\n          <p className=\"text-sm text-muted-foreground\">{emptyState}</p>\n        </div>\n      )\n    }\n    return <div className=\"px-4 py-16 text-center lg:px-6\">{emptyState}</div>\n  }\n\n  if (virtualizeThreshold > 0 && rows.length >= virtualizeThreshold) {\n    return (\n      <DataRowListVirtualized\n        rows={rows}\n        getRowId={getRowId}\n        renderRow={renderRow}\n        estimatedRowHeight={estimatedRowHeight}\n        className={className}\n        rowClassName={rowClassName}\n        ariaLabel={ariaLabel}\n      />\n    )\n  }\n\n  return (\n    <ul aria-label={ariaLabel} className={cn(DEFAULT_OUTER_CLASS, className)}>\n      {rows.map((row, i) => (\n        <li key={getRowId(row, i)} className={rowClassName}>\n          {renderRow(row, i)}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Virtualised variant — keeps the DOM short on long lists (e.g. 1000+ rows).\n// Uses `useWindowVirtualizer` so the page scroll drives row recycling; this\n// is the right tool for hub-level lists (not nested-scroll containers).\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction DataRowListVirtualized<TRow>({\n  rows,\n  getRowId,\n  renderRow,\n  estimatedRowHeight,\n  className,\n  rowClassName,\n  ariaLabel,\n}: {\n  rows: readonly TRow[]\n  getRowId: (row: TRow, index: number) => string | number\n  renderRow: (row: TRow, index: number) => React.ReactNode\n  estimatedRowHeight: number\n  className?: string\n  rowClassName?: string\n  ariaLabel?: string\n}) {\n  const anchorRef = React.useRef<HTMLDivElement | null>(null)\n  // `scrollMargin` is read by the virtualizer during render, so it has to\n  // be state (not a ref). We measure with `useLayoutEffect` after the first\n  // paint and on resize so window-scroll math stays accurate when the page\n  // layout shifts (sidebar collapse, banner, etc.).\n  const [scrollMargin, setScrollMargin] = React.useState(0)\n\n  const updateScrollMargin = React.useCallback(() => {\n    const el = anchorRef.current\n    if (!el) return\n    setScrollMargin(el.getBoundingClientRect().top + window.scrollY)\n  }, [])\n\n  React.useLayoutEffect(() => {\n    updateScrollMargin()\n    window.addEventListener(\"resize\", updateScrollMargin)\n    return () => window.removeEventListener(\"resize\", updateScrollMargin)\n  }, [updateScrollMargin, rows.length])\n\n  const virtualizer = useWindowVirtualizer({\n    count: rows.length,\n    estimateSize: () => estimatedRowHeight,\n    overscan: DEFAULT_OVERSCAN,\n    scrollMargin,\n    getItemKey: i => String(getRowId(rows[i], i)),\n  })\n\n  const totalSize = virtualizer.getTotalSize()\n\n  return (\n    <div ref={anchorRef} className={cn(\"px-4 pb-8 pt-2 lg:px-6\", className)}>\n      <ul\n        aria-label={ariaLabel}\n        className=\"relative m-0 w-full list-none p-0\"\n        style={{ height: `${totalSize}px` }}\n      >\n        {virtualizer.getVirtualItems().map(vr => {\n          const row = rows[vr.index]\n          if (!row) return null\n          return (\n            <li\n              key={vr.key}\n              data-index={vr.index}\n              ref={virtualizer.measureElement}\n              className={cn(\"absolute left-0 top-0 w-full pb-2\", rowClassName)}\n              style={{ transform: `translateY(${vr.start}px)` }}\n            >\n              {renderRow(row, vr.index)}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/data-row-list.tsx"],"names":[],"mappings":"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","file":"data-row-list.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * DataRowList — generic vertical-stack list view used by every hub's \"list\"\n * tab (placements, team, compliance, sites, library, …). Replaces the\n * hand-rolled `<ul …flex-col gap-2 px-4 pb-8 pt-2 lg:px-6> {rows.map(<li>…)}`\n * shell that was duplicated across `*-list-view.tsx` files.\n *\n * Composition over inheritance: callers provide a `renderRow(row)` that\n * returns whatever ListPageBoardCard / link / chip-stack they need — this\n * component owns the chrome (spacing, empty state, virtualization), not the\n * row body.\n *\n * Auto-virtualises with `@tanstack/react-virtual` when the row count meets\n * `virtualizeThreshold` (default 100). Disable by passing `0`.\n */\n\nimport * as React from \"react\"\nimport { useWindowVirtualizer } from \"@tanstack/react-virtual\"\nimport { cn } from \"../../lib/utils\"\n\nconst DEFAULT_VIRTUALIZE_THRESHOLD = 100\nconst DEFAULT_ESTIMATED_ROW_HEIGHT = 96\nconst DEFAULT_OVERSCAN = 8\n\nexport interface DataRowListProps<TRow> {\n  /** The filtered/sorted rows from `tableState.rows` (or wherever). */\n  rows: readonly TRow[]\n  /** Stable id used as the React `key` and (for virtualizer) the v-key. */\n  getRowId: (row: TRow, index: number) => string | number\n  /** Render the body of one row. Wrap with `<ListPageBoardCard layout=\"row\">` etc. */\n  renderRow: (row: TRow, index: number) => React.ReactNode\n  /**\n   * Shown when `rows.length === 0`. Strings render as muted body copy; pass\n   * a `ReactNode` for richer empty states (illustration, CTA, etc.).\n   */\n  emptyState?: React.ReactNode\n  /**\n   * Auto-virtualise when `rows.length >= virtualizeThreshold`. Default 100.\n   * Pass `0` to never virtualise (preserves predictable layout for short\n   * lists like dashboards / pinned tabs).\n   */\n  virtualizeThreshold?: number\n  /** Hint for the virtualizer; clamps to measured size after first paint. */\n  estimatedRowHeight?: number\n  /** Override the default container padding / gap if needed. */\n  className?: string\n  /** Override the per-row `<li>` className (e.g. tighter spacing). */\n  rowClassName?: string\n  /** `aria-label` for the `<ul>` (screen-reader name for the list). */\n  ariaLabel?: string\n}\n\nconst DEFAULT_OUTER_CLASS = \"flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6\"\n\nexport function DataRowList<TRow>(props: DataRowListProps<TRow>) {\n  const {\n    rows,\n    getRowId,\n    renderRow,\n    emptyState,\n    virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD,\n    estimatedRowHeight = DEFAULT_ESTIMATED_ROW_HEIGHT,\n    className,\n    rowClassName,\n    ariaLabel,\n  } = props\n\n  if (rows.length === 0) {\n    if (emptyState == null) return null\n    if (typeof emptyState === \"string\") {\n      return (\n        <div className=\"px-4 py-16 text-center lg:px-6\">\n          <p className=\"text-sm text-muted-foreground\">{emptyState}</p>\n        </div>\n      )\n    }\n    return <div className=\"px-4 py-16 text-center lg:px-6\">{emptyState}</div>\n  }\n\n  if (virtualizeThreshold > 0 && rows.length >= virtualizeThreshold) {\n    return (\n      <DataRowListVirtualized\n        rows={rows}\n        getRowId={getRowId}\n        renderRow={renderRow}\n        estimatedRowHeight={estimatedRowHeight}\n        className={className}\n        rowClassName={rowClassName}\n        ariaLabel={ariaLabel}\n      />\n    )\n  }\n\n  return (\n    <ul aria-label={ariaLabel} className={cn(DEFAULT_OUTER_CLASS, className)}>\n      {rows.map((row, i) => (\n        <li key={getRowId(row, i)} className={rowClassName}>\n          {renderRow(row, i)}\n        </li>\n      ))}\n    </ul>\n  )\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Virtualised variant — keeps the DOM short on long lists (e.g. 1000+ rows).\n// Uses `useWindowVirtualizer` so the page scroll drives row recycling; this\n// is the right tool for hub-level lists (not nested-scroll containers).\n// ─────────────────────────────────────────────────────────────────────────────\n\nfunction DataRowListVirtualized<TRow>({\n  rows,\n  getRowId,\n  renderRow,\n  estimatedRowHeight,\n  className,\n  rowClassName,\n  ariaLabel,\n}: {\n  rows: readonly TRow[]\n  getRowId: (row: TRow, index: number) => string | number\n  renderRow: (row: TRow, index: number) => React.ReactNode\n  estimatedRowHeight: number\n  className?: string\n  rowClassName?: string\n  ariaLabel?: string\n}) {\n  const anchorRef = React.useRef<HTMLDivElement | null>(null)\n  // `scrollMargin` is read by the virtualizer during render, so it has to\n  // be state (not a ref). We measure with `useLayoutEffect` after the first\n  // paint and on resize so window-scroll math stays accurate when the page\n  // layout shifts (sidebar collapse, banner, etc.).\n  const [scrollMargin, setScrollMargin] = React.useState(0)\n\n  const updateScrollMargin = React.useCallback(() => {\n    const el = anchorRef.current\n    if (!el) return\n    setScrollMargin(el.getBoundingClientRect().top + window.scrollY)\n  }, [])\n\n  React.useLayoutEffect(() => {\n    updateScrollMargin()\n    window.addEventListener(\"resize\", updateScrollMargin)\n    return () => window.removeEventListener(\"resize\", updateScrollMargin)\n  }, [updateScrollMargin, rows.length])\n\n  const virtualizer = useWindowVirtualizer({\n    count: rows.length,\n    estimateSize: () => estimatedRowHeight,\n    overscan: DEFAULT_OVERSCAN,\n    scrollMargin,\n    getItemKey: i => String(getRowId(rows[i], i)),\n  })\n\n  const totalSize = virtualizer.getTotalSize()\n\n  return (\n    <div ref={anchorRef} className={cn(\"px-4 pb-8 pt-2 lg:px-6\", className)}>\n      <ul\n        aria-label={ariaLabel}\n        className=\"relative m-0 w-full list-none p-0\"\n        style={{ height: `${totalSize}px` }}\n      >\n        {virtualizer.getVirtualItems().map(vr => {\n          const row = rows[vr.index]\n          if (!row) return null\n          return (\n            <li\n              key={vr.key}\n              data-index={vr.index}\n              ref={virtualizer.measureElement}\n              className={cn(\"absolute start-0 top-0 w-full pb-2\", rowClassName)}\n              style={{ transform: `translateY(${vr.start}px)` }}\n            >\n              {renderRow(row, vr.index)}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n"]}

package/dist/components/data-views/hub-table.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { ColumnDef } from '../data-table/types.js';
 import { useTableState } from '../data-table/use-table-state.js';
 import { DataListViewType } from '../../lib/data-list-view.js';
-import { c as DataListViewRenderKind } from '../../data-list-view-registry-CyBoBML4.js';
+import { c as DataListViewRenderKind } from '../../data-list-view-registry-BstmlfQ3.js';
 import { DataListDisplayOptions } from '../../lib/data-list-display-options.js';
 import { FilterFieldDef, ConditionalRule } from '../../lib/table-properties-types.js';
 import { ListPageBoardColumnDef } from './list-page-board-template.js';
@@ -74,8 +74,12 @@ interface HubTableProps<TRow extends Record<string, unknown>> {
     /** Active view from the `ListPageTemplate` tab. */
     view: DataListViewType;
     onViewChange?: (v: DataListViewType) => void;
-    /** Allowlist passed to `TablePropertiesDrawerButton` so Properties cannot offer unsupported views. */
-    supportedViewTypes: readonly DataListViewType[];
+    /**
+     * Allowlist passed to `TablePropertiesDrawerButton` so Properties cannot offer unsupported views.
+     * Defaults to {@link FULL_HUB_SUPPORTED_VIEWS} when omitted — keep in sync with
+     * `ListPageTemplate.supportedViewTypes` on the same hub.
+     */
+    supportedViewTypes?: readonly DataListViewType[];
     /** Used by `ListPageViewNotConfigured` when a supported view has no renderer. */
     hubLabel: string;
     /** Shown below "Properties" in the drawer header. */
@@ -165,7 +169,7 @@ interface HubTableProps<TRow extends Record<string, unknown>> {
     /** Empty column copy for the default board renderer. Defaults to "No items". */
     boardEmptyColumnLabel?: string;
 }
-declare function HubTable<TRow extends Record<string, unknown>>({ rows, columns, view, onViewChange, supportedViewTypes, hubLabel, lifecycleTabLabel, searchAriaLabel, getRowId, getRowSelectionLabel, defaultSort, emptyState, renderers, bulkActionsSlot, boardGroupByColumnOptions, displayOptionsInit, renderFilterOptionValue, groupable, selectable, onRowClick, displayOptions: displayOptionsControlled, onDisplayOptionsChange: onDisplayOptionsChangeControlled, pagination, onPaginationChange, handleRef, tableRenderer, paginationOverride, paginationPageSizeOptions, paginationInitialPageSize, syncedSearchFromUrl, renderListRow, listAriaLabel, listEmptyState, listVirtualizeThreshold, listEstimatedRowHeight, renderBoardCard, boardGroups, boardColumnCountBadgeClassName, boardEmptyColumnLabel, }: HubTableProps<TRow>): react_jsx_runtime.JSX.Element;
+declare function HubTable<TRow extends Record<string, unknown>>({ rows, columns, view, onViewChange, supportedViewTypes: supportedViewTypesProp, hubLabel, lifecycleTabLabel, searchAriaLabel, getRowId, getRowSelectionLabel, defaultSort, emptyState, renderers, bulkActionsSlot, boardGroupByColumnOptions, displayOptionsInit, renderFilterOptionValue, groupable, selectable, onRowClick, displayOptions: displayOptionsControlled, onDisplayOptionsChange: onDisplayOptionsChangeControlled, pagination, onPaginationChange, handleRef, tableRenderer, paginationOverride, paginationPageSizeOptions, paginationInitialPageSize, syncedSearchFromUrl, renderListRow, listAriaLabel, listEmptyState, listVirtualizeThreshold, listEstimatedRowHeight, renderBoardCard, boardGroups, boardColumnCountBadgeClassName, boardEmptyColumnLabel, }: HubTableProps<TRow>): react_jsx_runtime.JSX.Element;
 declare namespace HubTable {
     var displayName: string;
 }

package/dist/components/data-views/hub-table.js

@@ -177,7 +177,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       ),
       ...props,
@@ -373,7 +373,7 @@ function DropdownMenuContent({
       sideOffset,
       align,
       className: cn(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
         className
       ),
@@ -483,7 +483,7 @@ function PopoverContent({
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        "data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2",
         className
       ),
       ...props
@@ -2282,13 +2282,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;
@@ -2455,11 +2457,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]);
@@ -2896,11 +2900,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",
@@ -2950,17 +2954,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)
@@ -3288,6 +3292,16 @@ var BY_VALUE = new Map(
   DEFINITIONS.map((d) => [d.value, d])
 );
 var DATA_LIST_VIEW_REGISTRY = DEFINITIONS;
+var FULL_HUB_SUPPORTED_VIEWS = [
+  "table",
+  "list",
+  "board",
+  "dashboard",
+  "folder",
+  "panel",
+  "tree-panel"
+];
+DATA_LIST_VIEW_REGISTRY.map((d) => d.value);
 function dataListViewDefinition(view) {
   const def = BY_VALUE.get(view);
   if (!def) {
@@ -3682,7 +3696,7 @@ function SheetContent({
         "data-slot": "sheet-content",
         "data-side": side,
         className: cn(
-          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-left-6 data-[side=right]:data-open:slide-in-from-right-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-left-6 data-[side=right]:data-closed:slide-out-to-right-6 data-[side=top]:data-closed:slide-out-to-top-6",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg outline-none duration-300 ease-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-6 data-[side=left]:data-open:slide-in-from-start-6 data-[side=right]:data-open:slide-in-from-end-6 data-[side=top]:data-open:slide-in-from-top-6 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-6 data-[side=left]:data-closed:slide-out-to-start-6 data-[side=right]:data-closed:slide-out-to-end-6 data-[side=top]:data-closed:slide-out-to-top-6",
           className
         ),
         ...props,
@@ -3766,7 +3780,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       "data-align-trigger": position === "item-aligned",
-      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
+      className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 rtl:data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 rtl:data-[side=right]:-translate-x-1 data-[side=top]:-translate-y-1", className),
       position,
       align,
       ...props,
@@ -5308,7 +5322,7 @@ function DataRowListVirtualized({
           {
             "data-index": vr.index,
             ref: virtualizer.measureElement,
-            className: cn("absolute left-0 top-0 w-full pb-2", rowClassName),
+            className: cn("absolute start-0 top-0 w-full pb-2", rowClassName),
             style: { transform: `translateY(${vr.start}px)` },
             children: renderRow(row, vr.index)
           },
@@ -5469,7 +5483,7 @@ function HubTable({
   columns,
   view,
   onViewChange,
-  supportedViewTypes,
+  supportedViewTypes: supportedViewTypesProp,
   hubLabel,
   lifecycleTabLabel,
   searchAriaLabel,
@@ -5505,6 +5519,7 @@ function HubTable({
   boardColumnCountBadgeClassName,
   boardEmptyColumnLabel
 }) {
+  const supportedViewTypes = supportedViewTypesProp ?? FULL_HUB_SUPPORTED_VIEWS;
   const filterFields = React10.useMemo(() => columnsToFilterFields(columns), [columns]);
   const fieldDefinitions = React10.useMemo(() => columnsToFieldDefinitions(columns), [columns]);
   const resolveColumnLabel = React10.useCallback(