@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/datatable/ui/mobile/CardField.d.ts

@@ -0,0 +1,95 @@
+/**
+ * DataTable — card field primitives.
+ *
+ * A "field" is one column's contribution to one card: its `label` and whatever
+ * the column's `render`/`value` produces. The two rules that matter:
+ *
+ *  1. A column's `render` is used **verbatim**. A job's `succeeded` chip and a
+ *     share's preview thumbnail must look the same in a card as in a grid cell;
+ *     the card is a different *layout*, not a different *vocabulary*.
+ *  2. `truncate: true` clamps to two lines and becomes tap-to-expand. The grid
+ *     reveals a truncated value in a hover tooltip, which does not exist on a
+ *     touch device — so on a card the value itself is the control.
+ */
+import type { ReactNode } from 'react';
+import type { DataTableColumn } from '../../headless/types.js';
+/**
+ * Props of {@link ExpandableValue}.
+ *
+ * @stability experimental
+ */
+export interface ExpandableValueProps {
+    /**
+     * Name of the thing being expanded — the column's `label`, not its value.
+     * Produces `"Expand Last error"` / `"Collapse Last error"`; announcing the
+     * whole (potentially 500-character) value as the button's name would be
+     * unusable.
+     */
+    text: string;
+    /** The value to clamp and expand. */
+    children: ReactNode;
+}
+/**
+ * A clamped value that expands in place on tap, Enter or Space.
+ *
+ * `ButtonBase` is deliberate: it gives real button semantics (focusable,
+ * Enter/Space activation, `aria-expanded`) with no button chrome, so the value
+ * still reads as text. The 44px floor is the touch-target rule — a two-line
+ * clamp of a short string can otherwise be ~34px tall.
+ *
+ * @stability experimental
+ */
+export declare function ExpandableValue({ text, children }: ExpandableValueProps): import("react").JSX.Element;
+/**
+ * The visual content of one column's cell — `render` wins, `value` is the fallback.
+ *
+ * @stability experimental
+ */
+export declare function columnContent<Row>(column: DataTableColumn<Row>, row: Row): ReactNode;
+/**
+ * The plain-text form of a column's cell, for aria labels and clamp toggles.
+ *
+ * @stability experimental
+ */
+export declare function columnText<Row>(column: DataTableColumn<Row>, row: Row): string;
+/**
+ * Props of {@link CardField}.
+ *
+ * @stability experimental
+ */
+export interface CardFieldProps<Row> {
+    /** The column to draw. */
+    column: DataTableColumn<Row>;
+    /** The row. */
+    row: Row;
+}
+/**
+ * One label/value pair in a card body or detail region.
+ *
+ * Stacked (label above value) rather than side-by-side: at 320px a two-column
+ * layout gives the value ~150px, which re-creates on a card exactly the
+ * truncation problem cards exist to solve.
+ *
+ * ## `column.align` is a GRID concern and does not cross into a card (#438)
+ *
+ * `align` exists so a column of numbers reads as a column — the cells and the
+ * header share an edge to scan down (`desktop/columnAdapter.ts` sets both
+ * `align` and `headerAlign` from it). A card has no column: the label sits
+ * ABOVE its value, and the only thing either one can align against is the other.
+ * Honouring `align: 'center'` here centred a value across the whole card width
+ * while its label stayed at the start, so the pair stopped reading as a pair
+ * (a pair of numeric status counts declared `align: 'center'` did exactly
+ * this).
+ *
+ * So the value is always start-aligned, and by INHERITING rather than declaring
+ * an alignment — which is also what keeps it correct under RTL. (The one
+ * explicit `textAlign` left in this module is on `ExpandableValue`, and only
+ * because a `button` element's UA default is centred; it sets `start` for the
+ * same reason.) Do not re-add a `textAlign` derived from `column.align`: a
+ * column declaring one is describing the grid, and a card is a different LAYOUT
+ * of the same column contract, not a narrow grid.
+ *
+ * @stability experimental
+ */
+export declare function CardField<Row>({ column, row }: CardFieldProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=CardField.d.ts.map

package/dist/datatable/ui/mobile/CardField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardField.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAU/D;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAmDvE;AAMD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,SAAS,CAGpF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,CAE9E;AAMD;;;;GAIG;AACH,MAAM,WAAW,cAAc,CAAC,GAAG;IACjC,0BAA0B;IAC1B,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAC7B,eAAe;IACf,GAAG,EAAE,GAAG,CAAC;CACV;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,cAAc,CAAC,GAAG,CAAC,+BA8BlE"}

package/dist/datatable/ui/mobile/CardField.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — card field primitives.
+ *
+ * A "field" is one column's contribution to one card: its `label` and whatever
+ * the column's `render`/`value` produces. The two rules that matter:
+ *
+ *  1. A column's `render` is used **verbatim**. A job's `succeeded` chip and a
+ *     share's preview thumbnail must look the same in a card as in a grid cell;
+ *     the card is a different *layout*, not a different *vocabulary*.
+ *  2. `truncate: true` clamps to two lines and becomes tap-to-expand. The grid
+ *     reveals a truncated value in a hover tooltip, which does not exist on a
+ *     touch device — so on a card the value itself is the control.
+ */
+import { useId, useState } from 'react';
+import { Box, ButtonBase, Typography } from '@mui/material';
+import { extractColumnValue, formatColumnValue } from '../../headless/columns.js';
+/** Lines shown before a `truncate` value is clamped. */
+const CLAMP_LINES = 2;
+/**
+ * A clamped value that expands in place on tap, Enter or Space.
+ *
+ * `ButtonBase` is deliberate: it gives real button semantics (focusable,
+ * Enter/Space activation, `aria-expanded`) with no button chrome, so the value
+ * still reads as text. The 44px floor is the touch-target rule — a two-line
+ * clamp of a short string can otherwise be ~34px tall.
+ *
+ * @stability experimental
+ */
+export function ExpandableValue({ text, children }) {
+    const [expanded, setExpanded] = useState(false);
+    const regionId = useId();
+    return (_jsx(ButtonBase, { "data-testid": "datatable-card-expandable-value", "data-expanded": expanded ? 'true' : 'false', "aria-expanded": expanded, "aria-controls": regionId, "aria-label": expanded ? `Collapse ${text}` : `Expand ${text}`, onClick: () => setExpanded((value) => !value), sx: {
+            display: 'block',
+            width: '100%',
+            minWidth: 0,
+            minHeight: 44,
+            px: 0.5,
+            mx: -0.5,
+            py: 0.5,
+            borderRadius: 1,
+            // A `button` element's UA default is centred text, so this override is
+            // required to keep the value reading as text. `start`, not `left`: the
+            // card's alignment is always the reading direction's start edge, so it
+            // stays under its label in an RTL locale too (#438).
+            textAlign: 'start',
+            justifyContent: 'flex-start',
+        }, children: _jsx(Box, { id: regionId, sx: {
+                width: '100%',
+                minWidth: 0,
+                // Collapsed: a two-line clamp. Expanded: wrap freely and break long
+                // unbroken tokens (ids, URLs, stack frames) rather than overflow.
+                ...(expanded
+                    ? { overflowWrap: 'anywhere', whiteSpace: 'pre-wrap' }
+                    : {
+                        display: '-webkit-box',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: CLAMP_LINES,
+                        overflow: 'hidden',
+                        overflowWrap: 'anywhere',
+                    }),
+            }, children: children }) }));
+}
+// ---------------------------------------------------------------------------
+// Field content
+// ---------------------------------------------------------------------------
+/**
+ * The visual content of one column's cell — `render` wins, `value` is the fallback.
+ *
+ * @stability experimental
+ */
+export function columnContent(column, row) {
+    if (column.render)
+        return column.render(row);
+    return formatColumnValue(extractColumnValue(column, row));
+}
+/**
+ * The plain-text form of a column's cell, for aria labels and clamp toggles.
+ *
+ * @stability experimental
+ */
+export function columnText(column, row) {
+    return formatColumnValue(extractColumnValue(column, row));
+}
+/**
+ * One label/value pair in a card body or detail region.
+ *
+ * Stacked (label above value) rather than side-by-side: at 320px a two-column
+ * layout gives the value ~150px, which re-creates on a card exactly the
+ * truncation problem cards exist to solve.
+ *
+ * ## `column.align` is a GRID concern and does not cross into a card (#438)
+ *
+ * `align` exists so a column of numbers reads as a column — the cells and the
+ * header share an edge to scan down (`desktop/columnAdapter.ts` sets both
+ * `align` and `headerAlign` from it). A card has no column: the label sits
+ * ABOVE its value, and the only thing either one can align against is the other.
+ * Honouring `align: 'center'` here centred a value across the whole card width
+ * while its label stayed at the start, so the pair stopped reading as a pair
+ * (a pair of numeric status counts declared `align: 'center'` did exactly
+ * this).
+ *
+ * So the value is always start-aligned, and by INHERITING rather than declaring
+ * an alignment — which is also what keeps it correct under RTL. (The one
+ * explicit `textAlign` left in this module is on `ExpandableValue`, and only
+ * because a `button` element's UA default is centred; it sets `start` for the
+ * same reason.) Do not re-add a `textAlign` derived from `column.align`: a
+ * column declaring one is describing the grid, and a card is a different LAYOUT
+ * of the same column contract, not a narrow grid.
+ *
+ * @stability experimental
+ */
+export function CardField({ column, row }) {
+    const content = columnContent(column, row);
+    return (_jsxs(Box, { "data-testid": `datatable-card-field-${column.id}`, sx: { minWidth: 0 }, children: [_jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", sx: { fontWeight: 600, letterSpacing: 0.2, lineHeight: 1.4 }, children: column.label }), _jsx(Typography, { variant: "body2", component: "div", sx: {
+                    minWidth: 0,
+                    // Never let a long unbroken token push the card past the viewport.
+                    overflowWrap: 'anywhere',
+                }, children: column.truncate ? (_jsx(ExpandableValue, { text: column.label, children: content })) : (content) })] }));
+}
+//# sourceMappingURL=CardField.js.map

package/dist/datatable/ui/mobile/CardField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardField.js","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardField.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF,wDAAwD;AACxD,MAAM,WAAW,GAAG,CAAC,CAAC;AAuBtB;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAwB;IACtE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,UAAU,mBACG,iCAAiC,mBAC9B,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC3B,QAAQ,mBACR,QAAQ,gBACX,QAAQ,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,IAAI,EAAE,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAC7C,EAAE,EAAE;YACF,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;YACX,SAAS,EAAE,EAAE;YACb,EAAE,EAAE,GAAG;YACP,EAAE,EAAE,CAAC,GAAG;YACR,EAAE,EAAE,GAAG;YACP,YAAY,EAAE,CAAC;YACf,uEAAuE;YACvE,uEAAuE;YACvE,uEAAuE;YACvE,qDAAqD;YACrD,SAAS,EAAE,OAAO;YAClB,cAAc,EAAE,YAAY;SAC7B,YAED,KAAC,GAAG,IACF,EAAE,EAAE,QAAQ,EACZ,EAAE,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,CAAC;gBACX,oEAAoE;gBACpE,kEAAkE;gBAClE,GAAG,CAAC,QAAQ;oBACV,CAAC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE;oBACtD,CAAC,CAAC;wBACE,OAAO,EAAE,aAAa;wBACtB,eAAe,EAAE,UAAU;wBAC3B,eAAe,EAAE,WAAW;wBAC5B,QAAQ,EAAE,QAAQ;wBAClB,YAAY,EAAE,UAAU;qBACzB,CAAC;aACP,YAEA,QAAQ,GACL,GACK,CACd,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,gBAAgB;AAChB,8EAA8E;AAE9E;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAM,MAA4B,EAAE,GAAQ;IACvE,IAAI,MAAM,CAAC,MAAM;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC7C,OAAO,iBAAiB,CAAC,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAC5D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAM,MAA4B,EAAE,GAAQ;IACpE,OAAO,iBAAiB,CAAC,kBAAkB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;AAC5D,CAAC;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,SAAS,CAAM,EAAE,MAAM,EAAE,GAAG,EAAuB;IACjE,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE3C,OAAO,CACL,MAAC,GAAG,mBAAc,wBAAwB,MAAM,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,aACxE,KAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,KAAK,EACf,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,YAE3D,MAAM,CAAC,KAAK,GACF,EACb,KAAC,UAAU,IACT,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,KAAK,EACf,EAAE,EAAE;oBACF,QAAQ,EAAE,CAAC;oBACX,mEAAmE;oBACnE,YAAY,EAAE,UAAU;iBACzB,YAEA,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,KAAC,eAAe,IAAC,IAAI,EAAE,MAAM,CAAC,KAAK,YAAG,OAAO,GAAmB,CACjE,CAAC,CAAC,CAAC,CACF,OAAO,CACR,GACU,IACT,CACP,CAAC;AACJ,CAAC"}

package/dist/datatable/ui/mobile/CardListRenderer.d.ts

@@ -0,0 +1,34 @@
+/**
+ * DataTable — mobile renderer (card list).
+ *
+ * Consumes the exact same `DataTableRendererProps` the desktop grid does, from
+ * the exact same `DataTableColumn[]`. A page never declares a card layout: the
+ * `priority` field it already wrote for the grid is what produces the headline,
+ * the body, and the collapsed detail region.
+ *
+ * What is shared verbatim with the desktop renderer, rather than reimplemented:
+ *   - `BulkActionBar` — identical selection UX at every width.
+ *   - `useRowActionConfirm` — identical confirmation copy and one dialog per
+ *     table, not one per card.
+ *   - `RowActionsCell` — the same overflow menu, in `alwaysMenu` mode.
+ *   - `DataTableEmptyOverlay` / `DataTableLoadingOverlay`.
+ *
+ * What is deliberately different:
+ *   - Pagination is `CompactPagination`, not `TablePagination` (see that file).
+ *   - Truncated values expand on tap rather than on hover — there is no hover.
+ *
+ * All of selection, pagination and sort remain CONTROLLED by the owning page,
+ * so switching to or from this renderer is a pure presentation change: nothing
+ * a user picked survives only in a renderer's own state.
+ */
+import type { DataTableRendererProps } from '../../headless/types.js';
+/**
+ * The phone renderer: a list of cards with its sort control and compact pagination.
+ *
+ * @param props - the table's props plus the resolved layout.
+ * @returns the list element.
+ *
+ * @stability experimental
+ */
+export declare function CardListRenderer<Row>({ columns, rows, rowId, loading, error, emptyState, pagination, sort, selection, rowActions, bulkActions, slots, density, ariaLabel, height, visibleColumnIds, }: DataTableRendererProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=CardListRenderer.d.ts.map

package/dist/datatable/ui/mobile/CardListRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardListRenderer.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardListRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAgBtE;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,EACpC,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAe,EACf,KAAY,EACZ,UAAU,EACV,UAAU,EACV,IAAI,EACJ,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,MAAM,EACN,gBAAgB,GACjB,EAAE,sBAAsB,CAAC,GAAG,CAAC,+BAqL7B"}

package/dist/datatable/ui/mobile/CardListRenderer.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — mobile renderer (card list).
+ *
+ * Consumes the exact same `DataTableRendererProps` the desktop grid does, from
+ * the exact same `DataTableColumn[]`. A page never declares a card layout: the
+ * `priority` field it already wrote for the grid is what produces the headline,
+ * the body, and the collapsed detail region.
+ *
+ * What is shared verbatim with the desktop renderer, rather than reimplemented:
+ *   - `BulkActionBar` — identical selection UX at every width.
+ *   - `useRowActionConfirm` — identical confirmation copy and one dialog per
+ *     table, not one per card.
+ *   - `RowActionsCell` — the same overflow menu, in `alwaysMenu` mode.
+ *   - `DataTableEmptyOverlay` / `DataTableLoadingOverlay`.
+ *
+ * What is deliberately different:
+ *   - Pagination is `CompactPagination`, not `TablePagination` (see that file).
+ *   - Truncated values expand on tap rather than on hover — there is no hover.
+ *
+ * All of selection, pagination and sort remain CONTROLLED by the owning page,
+ * so switching to or from this renderer is a pure presentation change: nothing
+ * a user picked survives only in a renderer's own state.
+ */
+import { useCallback, useMemo } from 'react';
+import { Alert, Box, FormControlLabel, Stack } from '@mui/material';
+import { SlottedBulkActionBar } from '../BulkActionBar.js';
+import { DataTableEmptyOverlay, DataTableLoadingOverlay } from '../desktop/cells.js';
+import { useRowActionConfirm } from '../shared/rowActionConfirm.js';
+import { IndeterminateCheckbox } from '../shared/IndeterminateCheckbox.js';
+import { DataCard } from './DataCard.js';
+import { CompactPagination } from './CompactPagination.js';
+import { CardSortControl } from './CardSortControl.js';
+import { cardDensityMetrics } from '../../headless/layout/layoutModel.js';
+import { shouldVirtualizeCards, useMeasuredCardHeight, } from '../../headless/virtualization/cardVirtualization.js';
+const EMPTY_SELECTION = new Set();
+/**
+ * The phone renderer: a list of cards with its sort control and compact pagination.
+ *
+ * @param props - the table's props plus the resolved layout.
+ * @returns the list element.
+ *
+ * @stability experimental
+ */
+export function CardListRenderer({ columns, rows, rowId, loading = false, error = null, emptyState, pagination, sort, selection, rowActions, bulkActions, slots, density, ariaLabel, height, visibleColumnIds, }) {
+    // A card list has no DataGrid to inherit density from, so it maps the same
+    // setting onto its own metrics (padding, field gap, gap between cards).
+    // Density that only worked on the grid would silently stop working on the
+    // layout where vertical space is scarcest.
+    const metrics = cardDensityMetrics(density);
+    const selectable = selection ? (selection.selectable ?? true) : false;
+    const selectedIds = selection?.selectedIds ?? EMPTY_SELECTION;
+    const { run: runAction, dialog: confirmDialog } = useRowActionConfirm();
+    // --- Columns, split by priority -------------------------------------------
+    const { primaryColumns, secondaryColumns, detailColumns } = useMemo(() => {
+        // The user's #255 choice is applied BEFORE the priority split, so a hidden
+        // column disappears from a card exactly as it disappears from a grid — the
+        // card layout folds `detail` columns away, it does not resurrect hidden
+        // ones. No layout folding is AND-ed in here: a card already shows every
+        // priority band, just in three different places.
+        const shown = visibleColumnIds
+            ? columns.filter((column) => visibleColumnIds.has(column.id))
+            : columns;
+        return {
+            primaryColumns: shown.filter((column) => column.priority === 'primary'),
+            secondaryColumns: shown.filter((column) => column.priority === 'secondary'),
+            detailColumns: shown.filter((column) => column.priority === 'detail'),
+        };
+    }, [columns, visibleColumnIds]);
+    // --- Selection ------------------------------------------------------------
+    const rowIds = useMemo(() => rows.map((row) => rowId(row)), [rows, rowId]);
+    const toggleRow = useCallback((id) => {
+        if (!selection)
+            return;
+        const next = new Set(selection.selectedIds);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        selection.onSelectionChange(next);
+    }, [selection]);
+    const selectedOnPage = rowIds.filter((id) => selectedIds.has(id)).length;
+    const allSelected = rowIds.length > 0 && selectedOnPage === rowIds.length;
+    const someSelected = selectedOnPage > 0 && !allSelected;
+    const toggleAll = useCallback(() => {
+        if (!selection)
+            return;
+        // Page-scoped, exactly like the grid's header checkbox: with server-side
+        // pagination "all" can only mean the ids this table has actually loaded.
+        selection.onSelectionChange(allSelected ? new Set() : new Set(rowIds));
+    }, [selection, allSelected, rowIds]);
+    const clearSelection = useCallback(() => {
+        selection?.onSelectionChange(new Set());
+    }, [selection]);
+    const selectedIdList = useMemo(() => Array.from(selectedIds), [selectedIds]);
+    // --- Render skipping (#256) -----------------------------------------------
+    // NOT a virtualizer: cards are variable-height and a wrong height estimate
+    // makes scrolling jump (issue #237), which is worse than rendering every card.
+    // Instead the browser is allowed to skip layout/paint for off-screen cards,
+    // with a placeholder height MEASURED from a real card in this very table.
+    const skipOffscreenCards = shouldVirtualizeCards(rows.length);
+    const { measureRef, height: measuredCardHeight } = useMeasuredCardHeight(skipOffscreenCards);
+    // --- Render ---------------------------------------------------------------
+    const showEmpty = !loading && rows.length === 0;
+    return (_jsxs(Box, { "data-testid": "datatable-card-list", "data-density": density ?? 'standard', sx: {
+            width: '100%',
+            maxWidth: '100%',
+            minWidth: 0,
+            ...(height != null ? { height, overflowY: 'auto' } : {}),
+        }, children: [error && (_jsx(Alert, { severity: "error", sx: { mb: 1 }, "data-testid": "datatable-error", children: error })), sort && _jsx(CardSortControl, { columns: columns, sort: sort }), selectable && (_jsxs(_Fragment, { children: [_jsx(SlottedBulkActionBar, { slots: slots, ids: selectedIdList, actions: bulkActions, onClear: clearSelection, total: rowIds.length }), _jsx(FormControlLabel, { sx: { ml: 0, mb: 0.5, minHeight: 44 }, control: _jsx(IndeterminateCheckbox, { checked: allSelected, indeterminate: someSelected, disabled: rowIds.length === 0, onChange: toggleAll, slotProps: { input: { 'aria-label': 'Select all rows' } }, sx: { minWidth: 44, minHeight: 44 } }), 
+                        // Visible text matches the accessible name (WCAG 2.5.3 "Label in
+                        // Name") AND matches the grid header checkbox's name verbatim, so
+                        // the two layouts are queryable — and speakable — identically.
+                        label: "Select all rows" })] })), loading && rows.length === 0 && (_jsx(Box, { sx: { height: 120, position: 'relative' }, children: _jsx(DataTableLoadingOverlay, {}) })), showEmpty && _jsx(DataTableEmptyOverlay, { children: emptyState }), rows.length > 0 && (_jsxs(Box, { sx: { position: 'relative', minWidth: 0 }, children: [_jsx(Stack, { component: "ul", role: "list", "aria-label": ariaLabel, spacing: metrics.cardGap, sx: { listStyle: 'none', m: 0, p: 0, minWidth: 0 }, children: rows.map((row, index) => {
+                            const id = rowIds[index];
+                            return (_jsx(DataCard, { row: row, id: id, primaryColumns: primaryColumns, secondaryColumns: secondaryColumns, detailColumns: detailColumns, selectable: selectable, selected: selectedIds.has(id), onToggleSelect: toggleRow, rowActions: rowActions, onRunAction: runAction, density: density, 
+                                // The first card is the one being measured, so it never skips
+                                // its own layout — and it is on screen by definition, so it
+                                // would gain nothing by doing so.
+                                measureRef: index === 0 ? measureRef : undefined, skipOffscreen: skipOffscreenCards && index > 0, intrinsicHeight: measuredCardHeight }, id));
+                        }) }), loading && (_jsx(Box, { sx: { position: 'absolute', inset: 0, zIndex: 1 }, children: _jsx(DataTableLoadingOverlay, {}) }))] })), pagination && _jsx(CompactPagination, { pagination: pagination, loadedRows: rows.length }), confirmDialog] }));
+}
+//# sourceMappingURL=CardListRenderer.js.map

package/dist/datatable/ui/mobile/CardListRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardListRenderer.js","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardListRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/datatable/ui/mobile/CardSortControl.d.ts

@@ -0,0 +1,35 @@
+/**
+ * DataTable — card-layout sort control.
+ *
+ * A card has no column header to click, so without this the sort a page
+ * declares would be *held* correctly across a layout switch (it lives above the
+ * renderers) but would be unreachable while the phone layout is active. That is
+ * a worse outcome than the grid's, so the card list gets an explicit control:
+ * a field picker plus a direction toggle.
+ *
+ * Only columns declaring `sortable: true` appear — same rule as the grid, where
+ * a non-sortable header is inert. "Default" maps to `onSortChange(null)`, the
+ * contract's "back to the server's own order".
+ */
+import type { DataTableColumn, DataTableSortConfig } from '../../headless/types.js';
+/**
+ * Props of {@link CardSortControl}.
+ *
+ * @stability experimental
+ */
+export interface CardSortControlProps<Row> {
+    /** The table's column definitions. */
+    columns: DataTableColumn<Row>[];
+    /** The controlled sort config. */
+    sort: DataTableSortConfig;
+}
+/**
+ * The phone sort control: a column select and a direction toggle.
+ *
+ * @param props - the columns and the sort config.
+ * @returns the control element, or `null` when no column is sortable.
+ *
+ * @stability experimental
+ */
+export declare function CardSortControl<Row>({ columns, sort }: CardSortControlProps<Row>): import("react").JSX.Element | null;
+//# sourceMappingURL=CardSortControl.d.ts.map

package/dist/datatable/ui/mobile/CardSortControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSortControl.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardSortControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAIpF;;;;GAIG;AACH,MAAM,WAAW,oBAAoB,CAAC,GAAG;IACvC,sCAAsC;IACtC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,kCAAkC;IAClC,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,oBAAoB,CAAC,GAAG,CAAC,sCA0DhF"}

package/dist/datatable/ui/mobile/CardSortControl.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — card-layout sort control.
+ *
+ * A card has no column header to click, so without this the sort a page
+ * declares would be *held* correctly across a layout switch (it lives above the
+ * renderers) but would be unreachable while the phone layout is active. That is
+ * a worse outcome than the grid's, so the card list gets an explicit control:
+ * a field picker plus a direction toggle.
+ *
+ * Only columns declaring `sortable: true` appear — same rule as the grid, where
+ * a non-sortable header is inert. "Default" maps to `onSortChange(null)`, the
+ * contract's "back to the server's own order".
+ */
+import { Box, IconButton, MenuItem, TextField, Tooltip } from '@mui/material';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+const DEFAULT_VALUE = '__default__';
+/**
+ * The phone sort control: a column select and a direction toggle.
+ *
+ * @param props - the columns and the sort config.
+ * @returns the control element, or `null` when no column is sortable.
+ *
+ * @stability experimental
+ */
+export function CardSortControl({ columns, sort }) {
+    const sortable = columns.filter((column) => column.sortable);
+    if (sortable.length === 0)
+        return null;
+    const current = sort.sort;
+    const direction = current?.direction ?? 'asc';
+    return (_jsxs(Box, { "data-testid": "datatable-card-sort", sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1.5, minWidth: 0 }, children: [_jsxs(TextField, { select: true, size: "small", label: "Sort by", value: current?.field ?? DEFAULT_VALUE, onChange: (event) => {
+                    const value = event.target.value;
+                    if (value === DEFAULT_VALUE) {
+                        sort.onSortChange(null);
+                        return;
+                    }
+                    sort.onSortChange({ field: value, direction });
+                }, sx: { flexGrow: 1, minWidth: 0 }, slotProps: { htmlInput: { 'aria-label': 'Sort by' } }, children: [_jsx(MenuItem, { value: DEFAULT_VALUE, children: "Default" }), sortable.map((column) => (_jsx(MenuItem, { value: column.id, children: column.label }, column.id)))] }), _jsx(Tooltip, { title: direction === 'asc' ? 'Sort ascending' : 'Sort descending', children: _jsx("span", { children: _jsx(IconButton, { "aria-label": direction === 'asc' ? 'Sorted ascending, switch to descending' : 'Sorted descending, switch to ascending', disabled: !current, onClick: () => current &&
+                            sort.onSortChange({
+                                field: current.field,
+                                direction: current.direction === 'asc' ? 'desc' : 'asc',
+                            }), sx: { minWidth: 44, minHeight: 44 }, children: direction === 'asc' ? _jsx(ArrowUpwardIcon, {}) : _jsx(ArrowDownwardIcon, {}) }) }) })] }));
+}
+//# sourceMappingURL=CardSortControl.js.map

package/dist/datatable/ui/mobile/CardSortControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSortControl.js","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CardSortControl.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAGlE,MAAM,aAAa,GAAG,aAAa,CAAC;AAcpC;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAM,EAAE,OAAO,EAAE,IAAI,EAA6B;IAC/E,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;IAC1B,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,KAAK,CAAC;IAE9C,OAAO,CACL,MAAC,GAAG,mBACU,qBAAqB,EACjC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,aAE3E,MAAC,SAAS,IACR,MAAM,QACN,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,aAAa,EACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;oBACjC,IAAI,KAAK,KAAK,aAAa,EAAE,CAAC;wBAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;wBACxB,OAAO;oBACT,CAAC;oBACD,IAAI,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;gBACjD,CAAC,EACD,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAChC,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,aAErD,KAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,wBAAoB,EACjD,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACxB,KAAC,QAAQ,IAAiB,KAAK,EAAE,MAAM,CAAC,EAAE,YACvC,MAAM,CAAC,KAAK,IADA,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACQ,EAEZ,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,YACxE,yBACE,KAAC,UAAU,kBAEP,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,wCAAwC,EAE3G,QAAQ,EAAE,CAAC,OAAO,EAClB,OAAO,EAAE,GAAG,EAAE,CACZ,OAAO;4BACP,IAAI,CAAC,YAAY,CAAC;gCAChB,KAAK,EAAE,OAAO,CAAC,KAAK;gCACpB,SAAS,EAAE,OAAO,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;6BACxD,CAAC,EAEJ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAElC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,GACvD,GACR,GACC,IACN,CACP,CAAC;AACJ,CAAC"}

package/dist/datatable/ui/mobile/CompactPagination.d.ts

@@ -0,0 +1,36 @@
+/**
+ * DataTable — compact pagination (card layout).
+ *
+ * `TablePagination` is the wrong control on a phone: rows-per-page select +
+ * "1–25 of 137" + two arrows + the grid's own footer padding come to roughly
+ * 420px of intrinsic width, so on a 360px screen it either overflows the card
+ * column or forces the whole table into a horizontal scroller — which is
+ * precisely the failure the card layout exists to remove.
+ *
+ * This replaces it with prev / range / next. Page size is not adjustable here:
+ * it is a desktop-scale concern (nobody sets 100-per-page on a phone) and the
+ * owning page can still change it programmatically, since pagination stays
+ * fully controlled.
+ */
+import type { DataTablePaginationConfig } from '../../headless/types.js';
+/**
+ * Props of {@link CompactPagination}.
+ *
+ * @stability experimental
+ */
+export interface CompactPaginationProps {
+    /** The pagination config. */
+    pagination: DataTablePaginationConfig;
+    /** Rows actually rendered on this page, used to close the displayed range. */
+    loadedRows: number;
+}
+/**
+ * The phone pagination: previous, next and the range shown.
+ *
+ * @param props - the pagination config.
+ * @returns the pagination element.
+ *
+ * @stability experimental
+ */
+export declare function CompactPagination({ pagination, loadedRows }: CompactPaginationProps): import("react").JSX.Element;
+//# sourceMappingURL=CompactPagination.d.ts.map

package/dist/datatable/ui/mobile/CompactPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactPagination.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CompactPagination.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEzE;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IACrC,6BAA6B;IAC7B,UAAU,EAAE,yBAAyB,CAAC;IACtC,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,sBAAsB,+BAuDnF"}

package/dist/datatable/ui/mobile/CompactPagination.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — compact pagination (card layout).
+ *
+ * `TablePagination` is the wrong control on a phone: rows-per-page select +
+ * "1–25 of 137" + two arrows + the grid's own footer padding come to roughly
+ * 420px of intrinsic width, so on a 360px screen it either overflows the card
+ * column or forces the whole table into a horizontal scroller — which is
+ * precisely the failure the card layout exists to remove.
+ *
+ * This replaces it with prev / range / next. Page size is not adjustable here:
+ * it is a desktop-scale concern (nobody sets 100-per-page on a phone) and the
+ * owning page can still change it programmatically, since pagination stays
+ * fully controlled.
+ */
+import { Box, IconButton, Typography } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+/**
+ * The phone pagination: previous, next and the range shown.
+ *
+ * @param props - the pagination config.
+ * @returns the pagination element.
+ *
+ * @stability experimental
+ */
+export function CompactPagination({ pagination, loadedRows }) {
+    const { page, pageSize, total, onPaginationChange } = pagination;
+    const pageCount = pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+    const first = total === 0 ? 0 : page * pageSize + 1;
+    // Trust the row count we actually have over arithmetic on a possibly-stale
+    // `total` — a short final page must not claim rows it never rendered.
+    const last = total === 0 ? 0 : page * pageSize + Math.min(loadedRows || pageSize, pageSize);
+    const atStart = page <= 0;
+    const atEnd = page >= pageCount - 1;
+    const go = (next) => onPaginationChange({ page: next, pageSize });
+    return (_jsxs(Box, { "data-testid": "datatable-compact-pagination", sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 1,
+            mt: 1.5,
+            minWidth: 0,
+            maxWidth: '100%',
+        }, children: [_jsx(IconButton, { "aria-label": "Go to previous page", disabled: atStart, onClick: () => go(page - 1), sx: { minWidth: 44, minHeight: 44 }, children: _jsx(ChevronLeftIcon, {}) }), _jsx(Typography, { variant: "body2", color: "text.secondary", "aria-live": "polite", sx: { textAlign: 'center', minWidth: 0, overflowWrap: 'anywhere' }, children: total === 0 ? 'No results' : `${first}–${last} of ${total}` }), _jsx(IconButton, { "aria-label": "Go to next page", disabled: atEnd, onClick: () => go(page + 1), sx: { minWidth: 44, minHeight: 44 }, children: _jsx(ChevronRightIcon, {}) })] }));
+}
+//# sourceMappingURL=CompactPagination.js.map

package/dist/datatable/ui/mobile/CompactPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactPagination.js","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/CompactPagination.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,gBAAgB,MAAM,kCAAkC,CAAC;AAehE;;;;;;;GAOG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,UAAU,EAAE,UAAU,EAA0B;IAClF,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,UAAU,CAAC;IAEjE,MAAM,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9E,MAAM,KAAK,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,GAAG,CAAC,CAAC;IACpD,2EAA2E;IAC3E,sEAAsE;IACtE,MAAM,IAAI,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,IAAI,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAE5F,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC;IAC1B,MAAM,KAAK,GAAG,IAAI,IAAI,SAAS,GAAG,CAAC,CAAC;IAEpC,MAAM,EAAE,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE1E,OAAO,CACL,MAAC,GAAG,mBACU,8BAA8B,EAC1C,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,GAAG;YACP,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,MAAM;SACjB,aAED,KAAC,UAAU,kBACE,qBAAqB,EAChC,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,EAC3B,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAEnC,KAAC,eAAe,KAAG,GACR,EAEb,KAAC,UAAU,IACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,gBAAgB,eACZ,QAAQ,EAClB,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,YAEjE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,IAAI,OAAO,KAAK,EAAE,GACjD,EAEb,KAAC,UAAU,kBACE,iBAAiB,EAC5B,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,EAC3B,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAEnC,KAAC,gBAAgB,KAAG,GACT,IACT,CACP,CAAC;AACJ,CAAC"}