@zvndev/yable-react 0.5.1 → 0.6.1

package/README.md

@@ -73,37 +73,37 @@ const table = useTable({
 
 ### Layout Components
 
-| Component | Description |
-|---|---|
-| `Table` | Root container -- wraps everything in a `<div>` with a `<table>` inside. Accepts `table`, `striped`, `bordered`, `compact`, `stickyHeader`, `theme`, `loading`, `emptyMessage`, `footer`, and `children` props. |
-| `TableHeader` | Renders `<thead>` with header groups and sort indicators. |
-| `TableBody` | Renders `<tbody>` with rows and cells. |
-| `TableCell` | Renders a single `<td>` with editing support. |
-| `TableFooter` | Renders `<tfoot>` with footer content. |
+| Component     | Description                                                                                                                                                                                                                                                   |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Table`       | Root container -- wraps everything in a `<div>` with a desktop table or adaptive card layout inside. Accepts `table`, `striped`, `bordered`, `compact`, `stickyHeader`, `theme`, `loading`, `emptyMessage`, `footer`, `adaptiveLayout`, and `children` props. |
+| `TableHeader` | Renders `<thead>` with header groups and sort indicators.                                                                                                                                                                                                     |
+| `TableBody`   | Renders `<tbody>` with rows and cells.                                                                                                                                                                                                                        |
+| `TableCell`   | Renders a single `<td>` with editing support.                                                                                                                                                                                                                 |
+| `TableFooter` | Renders `<tfoot>` with footer content.                                                                                                                                                                                                                        |
 
 ### Interactive Components
 
-| Component | Description |
-|---|---|
-| `Pagination` | Page navigation with first/last/prev/next buttons, page numbers, and page size selector. Props: `table`, `showPageSize`, `pageSizes`, `showInfo`, `showFirstLast`. |
-| `GlobalFilter` | Debounced search input for the global filter. Props: `table`, `placeholder`, `debounce`, `className`. |
-| `SortIndicator` | Sort direction arrow icon. Props: `direction`, `index` (for multi-sort badge). |
+| Component       | Description                                                                                                                                                        |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Pagination`    | Page navigation with first/last/prev/next buttons, page numbers, and page size selector. Props: `table`, `showPageSize`, `pageSizes`, `showInfo`, `showFirstLast`. |
+| `GlobalFilter`  | Debounced search input for the global filter. Props: `table`, `placeholder`, `debounce`, `className`.                                                              |
+| `SortIndicator` | Sort direction arrow icon. Props: `direction`, `index` (for multi-sort badge).                                                                                     |
 
 ### Form Components (In-Cell Editing)
 
-| Component | Description |
-|---|---|
-| `CellInput` | Text/number input for cell editing. Props: `context`, `type`, `placeholder`, `inline`, `autoFocus`. |
-| `CellSelect` | Dropdown select for cell editing. |
-| `CellCheckbox` | Checkbox for boolean cell values. |
-| `CellToggle` | Toggle switch for boolean cell values. |
-| `CellDatePicker` | Date input for cell editing. |
+| Component        | Description                                                                                         |
+| ---------------- | --------------------------------------------------------------------------------------------------- |
+| `CellInput`      | Text/number input for cell editing. Props: `context`, `type`, `placeholder`, `inline`, `autoFocus`. |
+| `CellSelect`     | Dropdown select for cell editing.                                                                   |
+| `CellCheckbox`   | Checkbox for boolean cell values.                                                                   |
+| `CellToggle`     | Toggle switch for boolean cell values.                                                              |
+| `CellDatePicker` | Date input for cell editing.                                                                        |
 
 ### Context
 
-| Export | Description |
-|---|---|
-| `TableProvider` | React context provider for the table instance. |
+| Export              | Description                                                 |
+| ------------------- | ----------------------------------------------------------- |
+| `TableProvider`     | React context provider for the table instance.              |
 | `useTableContext()` | Hook to access the table instance from any child component. |
 
 ## Re-exports from @zvndev/yable-core
@@ -123,23 +123,41 @@ The `<Table>` component accepts these props:
 
 ```typescript
 interface TableProps<TData> {
-  table: Table<TData>       // Required -- the table instance from useTable
-  stickyHeader?: boolean     // Pin header to top on scroll
-  striped?: boolean          // Alternate row backgrounds
-  bordered?: boolean         // Add cell borders
-  compact?: boolean          // Reduce padding
-  theme?: string             // Theme variant name
-  clickableRows?: boolean    // Add pointer cursor + hover to rows
-  footer?: boolean           // Show table footer
-  loading?: boolean          // Show loading overlay
-  emptyMessage?: string      // Text when no rows (default: "No data")
-  renderEmpty?: () => ReactNode   // Custom empty state
+  table: Table<TData> // Required -- the table instance from useTable
+  stickyHeader?: boolean // Pin header to top on scroll
+  striped?: boolean // Alternate row backgrounds
+  bordered?: boolean // Add cell borders
+  compact?: boolean // Reduce padding
+  theme?: string // Theme variant name
+  clickableRows?: boolean // Add pointer cursor + hover to rows
+  footer?: boolean // Show table footer
+  loading?: boolean // Show loading overlay
+  emptyMessage?: string // Text when no rows (default: "No data")
+  renderEmpty?: () => ReactNode // Custom empty state
   renderLoading?: () => ReactNode // Custom loading state
-  children?: ReactNode       // Extra content (e.g. Pagination)
-  className?: string         // Additional CSS class
+  adaptiveLayout?: boolean | AdaptiveTableLayoutOptions<TData>
+  children?: ReactNode // Extra content (e.g. Pagination)
+  className?: string // Additional CSS class
 }
 ```
 
+### Adaptive tablet and mobile layouts
+
+Use `adaptiveLayout` when the same table instance should become a structural card layout on narrower containers instead of only scrolling horizontally.
+
+```tsx
+<Table
+  table={table}
+  adaptiveLayout={{
+    breakpoint: 720,
+    primaryColumnId: 'name',
+    secondaryColumnIds: ['status', 'owner', 'updatedAt'],
+  }}
+/>
+```
+
+Set `mode: 'cards'` or `mode: 'table'` to force a surface, or provide `renderCard` for a product-specific mobile layout while still receiving the row, cells, and table instance.
+
 ## License
 
 MIT

package/dist/index.cjs

@@ -2218,6 +2218,62 @@ function FillHandle({
     }
   );
 }
+function renderCellContent(cell, table) {
+  const column = cell.column;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const cellStatus = table.getCellStatus(cell.row.id, column.id);
+  const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
+  let content;
+  const cellDef = column.columnDef.cell;
+  const cellType = column.columnDef.cellType;
+  if (typeof cellDef === "function") {
+    const ctx = cell.getContext();
+    if (overrideValue !== void 0) {
+      const overriddenCtx = {
+        ...ctx,
+        getValue: () => overrideValue,
+        renderValue: () => overrideValue
+      };
+      content = cellDef(overriddenCtx);
+    } else {
+      content = cellDef(ctx);
+    }
+  } else if (cellType && !(isEditing || isAlwaysEditable)) {
+    content = resolveCellType(cellType, cell.getContext(), column.columnDef.cellTypeProps);
+  } else {
+    content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
+  }
+  if (!cell.row.getIsGrouped()) return content;
+  if (column.id === cell.row.groupingColumnId) {
+    const expanded = cell.row.getIsExpanded();
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "yable-group-cell", style: { paddingLeft: cell.row.depth * 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "yable-group-toggle",
+          "aria-label": expanded ? "Collapse group" : "Expand group",
+          "aria-expanded": expanded,
+          onClick: cell.row.getToggleExpandedHandler(),
+          children: expanded ? "\u25BE" : "\u25B8"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "yable-group-value", children: String(cell.row.groupingValue ?? "") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "yable-group-count", children: [
+        "(",
+        cell.row.getLeafRows().length,
+        ")"
+      ] })
+    ] });
+  }
+  const aggDef = column.columnDef.aggregatedCell;
+  if (typeof aggDef === "function") {
+    return aggDef(cell.getContext());
+  }
+  const aggVal = cell.getValue();
+  return aggVal == null ? null : aggVal;
+}
 function TableCell({
   cell,
   table,
@@ -2253,29 +2309,11 @@ function TableCell({
   const selectionEdges = table.getCellSelectionEdges(rowIndex, columnIndex);
   const isCellSelected = selectionEdges !== null;
   const isMultiCellSelection = selectionRange !== null && (selectionRange.start.rowIndex !== selectionRange.end.rowIndex || selectionRange.start.columnIndex !== selectionRange.end.columnIndex);
-  const overrideValue = cellStatus !== "idle" ? table.getCellRenderValue(cell.row.id, column.id) : void 0;
-  let content;
-  const cellDef = column.columnDef.cell;
-  const cellType = column.columnDef.cellType;
-  if (typeof cellDef === "function") {
-    const ctx = cell.getContext();
-    if (overrideValue !== void 0) {
-      const overriddenCtx = {
-        ...ctx,
-        getValue: () => overrideValue,
-        renderValue: () => overrideValue
-      };
-      content = cellDef(overriddenCtx);
-    } else {
-      content = cellDef(ctx);
-    }
-  } else if (cellType && !(isEditing || isAlwaysEditable)) {
-    content = resolveCellType(cellType, cell.getContext(), column.columnDef.cellTypeProps);
-  } else {
-    content = overrideValue !== void 0 ? overrideValue : cell.renderValue();
-  }
+  const isGroupRow = cell.row.getIsGrouped();
+  const content = renderCellContent(cell, table);
   const handleClick = React4.useCallback(
     (e) => {
+      if (cell.row.getIsGrouped()) return;
       table.events.emit("cell:click", {
         cell,
         row: cell.row,
@@ -2341,7 +2379,7 @@ function TableCell({
   const cellStyleDef = column.columnDef.cellStyle;
   const userStyle = typeof cellStyleDef === "function" ? cellStyleDef(cell.getContext()) : cellStyleDef;
   const mergedStyle = userStyle ? { ...style, ...userStyle } : style;
-  const showFillHandle = isFocused && Boolean(table.options.enableFillHandle) && onFillHandleMouseDown != null;
+  const showFillHandle = isFocused && Boolean(table.options.enableFillHandle) && onFillHandleMouseDown != null && !isGroupRow;
   const classNames = [
     "yable-td",
     isFocused && "yable-cell--focused",
@@ -2362,6 +2400,7 @@ function TableCell({
       "data-pinned": pinned || void 0,
       "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
       "data-column-id": column.id,
+      "data-grouped": isGroupRow || void 0,
       "data-row-index": rowIndex,
       "data-column-index": columnIndex,
       "data-cell-selected": isCellSelected || void 0,
@@ -2836,6 +2875,202 @@ function isInteractiveClickTarget2(target) {
     target.closest('input, textarea, select, button, a[href], [contenteditable="true"]')
   );
 }
+function AdaptiveTableCards({
+  table,
+  layout,
+  clickableRows
+}) {
+  const rows = table.getRowModel().rows;
+  const visibleColumns = table.getVisibleLeafColumns();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-adaptive-cards", role: "rowgroup", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    AdaptiveTableCard,
+    {
+      row,
+      table,
+      rowIndex,
+      visibleColumns,
+      layout,
+      clickable: clickableRows
+    },
+    row.id
+  )) });
+}
+function AdaptiveTableCard({
+  row,
+  table,
+  rowIndex,
+  visibleColumns,
+  layout,
+  clickable
+}) {
+  const { cells, primaryCell, secondaryCells } = getAdaptiveCells(row, visibleColumns, layout);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "article",
+    {
+      className: "yable-adaptive-card",
+      role: "row",
+      "data-selected": row.getIsSelected() || void 0,
+      "data-expanded": row.getIsExpanded() || void 0,
+      "data-clickable": clickable || void 0,
+      "data-row-id": row.id,
+      "data-row-index": rowIndex,
+      "aria-selected": table.options.enableRowSelection ? row.getIsSelected() : void 0,
+      onClick: (e) => {
+        if (table.options.enableRowClickSelection && row.getCanSelect() && !isInteractiveClickTarget3(e.target)) {
+          row.toggleSelected();
+        }
+        if (clickable) emitRowEvent(table, "row:click", row, e.nativeEvent);
+      },
+      onDoubleClick: (e) => emitRowEvent(table, "row:dblclick", row, e.nativeEvent),
+      onContextMenu: (e) => emitRowEvent(table, "row:contextmenu", row, e.nativeEvent),
+      children: layout.renderCard ? layout.renderCard({
+        table,
+        row,
+        rowIndex,
+        cells,
+        primaryCell,
+        secondaryCells,
+        visibleColumns
+      }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        primaryCell && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-adaptive-card-header", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-adaptive-card-title", children: /* @__PURE__ */ jsxRuntime.jsx(
+          AdaptiveTableCardCell,
+          {
+            cell: primaryCell,
+            table,
+            rowIndex,
+            columnIndex: 0,
+            primary: true
+          }
+        ) }) }),
+        secondaryCells.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "yable-adaptive-card-fields", children: secondaryCells.map((cell, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          AdaptiveTableCardCell,
+          {
+            cell,
+            table,
+            rowIndex,
+            columnIndex: index + 1
+          },
+          cell.id
+        )) })
+      ] })
+    }
+  );
+}
+function emitRowEvent(table, event, row, originalEvent) {
+  table.events.emit(event, {
+    row,
+    cells: row.getAllCells(),
+    originalEvent
+  });
+}
+function emitCellEvent(table, event, cell, originalEvent) {
+  table.events.emit(event, {
+    cell,
+    row: cell.row,
+    column: cell.column,
+    originalEvent
+  });
+}
+function AdaptiveTableCardCell({
+  cell,
+  table,
+  rowIndex,
+  columnIndex,
+  primary
+}) {
+  const column = cell.column;
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const cellStatus = table.getCellStatus(cell.row.id, column.id);
+  const cellErrorMessage = table.getCellErrorMessage(cell.row.id, column.id);
+  const cellConflictWith = table.getCellConflictWith(cell.row.id, column.id);
+  const content = renderCellContent(cell, table);
+  const header = column.columnDef.header;
+  const label = typeof header === "string" ? header : column.id;
+  return /* @__PURE__ */ jsxRuntime.jsx(CellErrorBoundary, { resetKeys: [cell.getValue(), cellStatus], children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: primary ? "yable-adaptive-card-primary" : "yable-adaptive-card-cell",
+      "data-column-id": column.id,
+      "data-cell-status": cellStatus !== "idle" ? cellStatus : void 0,
+      "data-row-index": rowIndex,
+      "data-column-index": columnIndex,
+      role: "gridcell",
+      "aria-colindex": columnIndex + 1,
+      onClick: (e) => {
+        if (cell.row.getIsGrouped()) return;
+        emitCellEvent(table, "cell:click", cell, e.nativeEvent);
+        if (yableCore.canCellEnterEditMode(table, cell.row, column) && !isAlwaysEditable && !isEditing && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+          table.startEditing(cell.row.id, column.id);
+        }
+      },
+      onDoubleClick: (e) => emitCellEvent(table, "cell:dblclick", cell, e.nativeEvent),
+      onContextMenu: (e) => emitCellEvent(table, "cell:contextmenu", cell, e.nativeEvent),
+      children: [
+        !primary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "yable-adaptive-card-label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "yable-adaptive-card-value", children: [
+          content,
+          cellStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+            CellStatusBadge,
+            {
+              status: "error",
+              message: cellErrorMessage,
+              onRetry: () => void table.retryCommit(cell.row.id, column.id),
+              onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+            }
+          ),
+          cellStatus === "conflict" && /* @__PURE__ */ jsxRuntime.jsx(
+            CellStatusBadge,
+            {
+              status: "conflict",
+              conflictWith: cellConflictWith,
+              onRetry: () => void table.retryCommit(cell.row.id, column.id),
+              onDismiss: () => table.dismissCommit(cell.row.id, column.id)
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function getAdaptiveCells(row, visibleColumns, layout) {
+  const hidden = new Set(layout.hiddenColumnIds ?? []);
+  const allCellsByColumn = new Map(row.getAllCells().map((cell) => [cell.column.id, cell]));
+  const visibleCells = [];
+  for (const column of visibleColumns) {
+    if (hidden.has(column.id)) continue;
+    const cell = allCellsByColumn.get(column.id);
+    if (cell) visibleCells.push(cell);
+  }
+  const cellsByColumn = new Map(visibleCells.map((cell) => [cell.column.id, cell]));
+  const primaryCell = (layout.primaryColumnId ? cellsByColumn.get(layout.primaryColumnId) : void 0) ?? visibleCells[0];
+  const primaryColumnId = primaryCell?.column.id;
+  let secondaryCells;
+  if (layout.secondaryColumnIds) {
+    secondaryCells = [];
+    for (const columnId of layout.secondaryColumnIds) {
+      if (hidden.has(columnId) || columnId === primaryColumnId) continue;
+      const cell = cellsByColumn.get(columnId);
+      if (cell) secondaryCells.push(cell);
+    }
+  } else {
+    secondaryCells = visibleCells.filter((cell) => cell.column.id !== primaryColumnId);
+    if (secondaryCells.length > layout.maxSecondaryColumns) {
+      secondaryCells = secondaryCells.slice(0, layout.maxSecondaryColumns);
+    }
+  }
+  return {
+    cells: visibleCells,
+    primaryCell,
+    secondaryCells
+  };
+}
+function isInteractiveClickTarget3(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return Boolean(
+    target.closest('input, textarea, select, button, a[href], [contenteditable="true"]')
+  );
+}
 function TableFooter({ table }) {
   const footerGroups = table.getFooterGroups();
   if (!footerGroups.length) return null;
@@ -4163,6 +4398,7 @@ function Table({
   floatingFilters,
   columnVirtualization,
   columnVirtualizationOverscan,
+  adaptiveLayout: adaptiveLayoutProp,
   ariaLabel: ariaLabelProp,
   ...rest
 }) {
@@ -4188,6 +4424,7 @@ function Table({
   const resolvedFloatingFilters = floatingFilters ?? profileTableProps?.floatingFilters;
   const resolvedColumnVirtualization = columnVirtualization ?? profileTableProps?.columnVirtualization;
   const resolvedColumnVirtualizationOverscan = columnVirtualizationOverscan ?? profileTableProps?.columnVirtualizationOverscan;
+  const resolvedAdaptiveLayout = adaptiveLayoutProp ?? profileTableProps?.adaptiveLayout ?? providerTableProps?.adaptiveLayout;
   const [sidebarOpen, setSidebarOpen] = React4.useState(false);
   const [sidebarPanel, setSidebarPanel] = React4.useState(
     resolvedDefaultSidebarPanel ?? "columns"
@@ -4195,6 +4432,11 @@ function Table({
   const containerRef = React4.useRef(null);
   const horizontalScrollRef = React4.useRef(null);
   const isRtl = direction === "rtl";
+  const adaptiveLayout = React4.useMemo(
+    () => normalizeAdaptiveLayout(resolvedAdaptiveLayout),
+    [resolvedAdaptiveLayout]
+  );
+  const adaptiveLayoutActive = useAdaptiveLayoutActive(containerRef, adaptiveLayout);
   const classNames = [
     "yable",
     theme && `yable-theme-${theme}`,
@@ -4205,6 +4447,8 @@ function Table({
     loading && "yable-loading",
     isRtl && "yable--rtl",
     sidebarOpen && "yable--sidebar-open",
+    adaptiveLayout && adaptiveLayout.mode !== "table" && "yable--adaptive-layout",
+    adaptiveLayoutActive && "yable--adaptive-cards-active",
     className
   ].filter(Boolean).join(" ");
   const rows = table.getRowModel().rows;
@@ -4214,7 +4458,7 @@ function Table({
   const allVisibleColumns = table.getVisibleLeafColumns();
   const hasPinnedColumns = table.getLeftVisibleLeafColumns().length > 0 || table.getRightVisibleLeafColumns().length > 0;
   const hasGroupedHeaders = table.getHeaderGroups().length > 1;
-  const canVirtualizeColumns = Boolean(resolvedColumnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
+  const canVirtualizeColumns = !adaptiveLayoutActive && Boolean(resolvedColumnVirtualization) && !hasPinnedColumns && !hasGroupedHeaders && allVisibleColumns.length > 0;
   const allVisibleColumnSizeSignature = allVisibleColumns.map((column) => `${column.id}:${column.getSize()}`).join("|");
   const columnVirtualState = useColumnVirtualization({
     containerRef: horizontalScrollRef,
@@ -4330,7 +4574,7 @@ function Table({
     columnVirtualState.startOffset,
     visibleColumnTotalSize
   ]);
-  const tableNode = /* @__PURE__ */ jsxRuntime.jsxs(
+  const desktopTableNode = /* @__PURE__ */ jsxRuntime.jsxs(
     "table",
     {
       className: "yable-table",
@@ -4352,6 +4596,14 @@ function Table({
       ]
     }
   );
+  const tableNode = adaptiveLayoutActive && adaptiveLayout ? /* @__PURE__ */ jsxRuntime.jsx(
+    AdaptiveTableCards,
+    {
+      table,
+      layout: adaptiveLayout,
+      clickableRows: resolvedClickableRows
+    }
+  ) : desktopTableNode;
   return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: table, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4367,7 +4619,7 @@ function Table({
       ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "yable-main", children: [
-          showColumnVirtualizationShell ? /* @__PURE__ */ jsxRuntime.jsx(
+          showColumnVirtualizationShell && !adaptiveLayoutActive ? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: horizontalScrollRef,
@@ -4483,6 +4735,58 @@ function Table({
     }
   ) });
 }
+var DEFAULT_ADAPTIVE_BREAKPOINT = 720;
+var DEFAULT_ADAPTIVE_SECONDARY_COLUMNS = 8;
+function normalizeAdaptiveLayout(layout) {
+  if (!layout) return null;
+  if (layout === true) {
+    return {
+      mode: "auto",
+      breakpoint: DEFAULT_ADAPTIVE_BREAKPOINT,
+      maxSecondaryColumns: DEFAULT_ADAPTIVE_SECONDARY_COLUMNS
+    };
+  }
+  return {
+    mode: layout.mode ?? "auto",
+    breakpoint: layout.breakpoint ?? DEFAULT_ADAPTIVE_BREAKPOINT,
+    primaryColumnId: layout.primaryColumnId,
+    secondaryColumnIds: layout.secondaryColumnIds,
+    hiddenColumnIds: layout.hiddenColumnIds,
+    maxSecondaryColumns: layout.maxSecondaryColumns ?? DEFAULT_ADAPTIVE_SECONDARY_COLUMNS,
+    renderCard: layout.renderCard
+  };
+}
+function useAdaptiveLayoutActive(containerRef, layout) {
+  const [active, setActive] = React4.useState(() => layout?.mode === "cards");
+  React4.useEffect(() => {
+    if (!layout) {
+      setActive(false);
+      return;
+    }
+    if (layout.mode === "cards" || layout.mode === "table") {
+      setActive(layout.mode === "cards");
+      return;
+    }
+    const node = containerRef.current;
+    if (!node) return;
+    const update = (width) => {
+      setActive(width <= layout.breakpoint);
+    };
+    update(node.getBoundingClientRect().width || node.clientWidth);
+    if (typeof ResizeObserver === "undefined") {
+      const handleResize = () => update(node.getBoundingClientRect().width || node.clientWidth);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width ?? node.getBoundingClientRect().width;
+      update(width);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [containerRef, layout]);
+  return active;
+}
 function ChevronLeftIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.5 3L4.5 7L8.5 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }