nuxt-ui-tools 1.17.0 → 1.18.0

package/dist/runtime/table/components/table/table-selection-control.vue.d.ts

@@ -1,6 +1,10 @@
+import type { GenericObject } from '../../types/index.js';
 type __VLS_Props = {
     modelValue: boolean | 'indeterminate';
-    ariaLabel: string;
+    /** The record this checkbox selects; without one it selects every row. */
+    row?: GenericObject;
+    /** Where the record sits in the rendered rows: it names the record when the schema has no `rowLabel`. */
+    index?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (event: MouseEvent) => any;

package/dist/runtime/table/components/table/table-tree-control.vue

@@ -100,7 +100,8 @@ function onKeydown(event) {
       <TableSelectionControl
         v-if="checkbox"
         :model-value="selected"
-        :ariaLabel="t('table.tree.selectRow')"
+        :row="node.row"
+        :index="index"
         @toggle="emit('select', $event)"
       />
     </span>

package/dist/runtime/table/components/table/table-tree-header.vue

@@ -54,7 +54,6 @@ function toggle() {
       <TableSelectionControl
         v-if="selection.selectionEnabled.value"
         :model-value="checkState"
-        :ariaLabel="t('table.tree.selectAll')"
         @toggle="selection.toggleAllRows({ selected: !selection.allSelected.value })"
       />
     </span>

package/dist/runtime/table/composables/use-table-api.d.ts

@@ -6,6 +6,7 @@ import type { UseTableDataReturn } from './use-table-data.js';
 import type { useTableFilters } from './use-table-filters.js';
 import type { useTableLayout } from './use-table-layout.js';
 import type { useTablePagination } from './use-table-pagination.js';
+import type { useTableRowSummary } from './use-table-row-summary.js';
 import type { useTableSelection } from './use-table-selection.js';
 import type { useTableState } from './use-table-state.js';
 import type { useTableTree } from './use-table-tree.js';
@@ -21,5 +22,6 @@ export interface UseTableApiParams<TSchema = TableSchemaView> {
     filters: ReturnType<typeof useTableFilters>;
     pagination: ReturnType<typeof useTablePagination>;
     queryContent: UseTableDataReturn;
+    rowSummary: ReturnType<typeof useTableRowSummary>;
 }
 export declare function useTableApi<TSchema = TableSchemaView>(params: UseTableApiParams<TSchema>): TableApi<TSchema>;

package/dist/runtime/table/composables/use-table-api.js

@@ -49,6 +49,13 @@ export function useTableApi(params) {
     },
     state: params.controls.layoutState
   };
+  const summary = {
+    set: params.rowSummary.setActive,
+    state: computed(() => ({
+      active: params.rowSummary.active.value,
+      available: params.rowSummary.available.value
+    }))
+  };
   const filters = {
     activeCount: computed(() => params.filters.activeUiFilters.value.length),
     clear: params.filters.clearAllFilters,
@@ -111,6 +118,7 @@ export function useTableApi(params) {
     selection,
     sorting,
     state,
+    summary,
     updateRow: data.updateRow,
     updateRows: data.updateRows
   };

package/dist/runtime/table/composables/use-table-columns.d.ts

@@ -41,6 +41,8 @@ export declare function useTableColumns(params: UseTableColumnsParams): {
         cell: ({ row }: {
             row: {
                 id: string;
+                original: import("../types/index.js").GenericObject;
+                index: number;
             };
         }) => import("vue/jsx-runtime").JSX.Element;
         enableHiding: boolean;

package/dist/runtime/table/composables/use-table-controls.d.ts

@@ -1,9 +1,11 @@
 import type { ComputedRef } from 'vue';
 import type { TableControlsSchema, TableLayout, TableSchemaView } from '../types/index.js';
 import type { useTableLayout } from './use-table-layout.js';
+import type { useTableRowSummary } from './use-table-row-summary.js';
 export interface UseTableControlsParams {
     schema: ComputedRef<TableSchemaView>;
     layout: ReturnType<typeof useTableLayout>;
+    rowSummary: ReturnType<typeof useTableRowSummary>;
 }
 export declare function useTableControls(options: UseTableControlsParams): {
     columnsPanelOpen: import("vue").Ref<boolean, boolean>;
@@ -39,6 +41,10 @@ export declare function useTableControls(options: UseTableControlsParams): {
             grid: ComputedRef<boolean | null>;
             table: ComputedRef<boolean | null>;
         };
+        summary: {
+            grid: ComputedRef<boolean | null>;
+            table: ComputedRef<boolean | null>;
+        };
     };
     setTableLayout: (layout: TableLayout) => void;
     tableEnabled: ComputedRef<boolean>;

package/dist/runtime/table/composables/use-table-controls.js

@@ -13,15 +13,18 @@ export function useTableControls(options) {
     filters: responsiveControl("filters"),
     layout: responsiveControl("layout"),
     refresh: responsiveControl("refresh"),
-    sort: responsiveControl("sort")
+    sort: responsiveControl("sort"),
+    summary: responsiveControl("summary")
   };
   const headerControls = computed(() => ({
     actions: Boolean(rawControls.actions[tableLayout.value].value) && Boolean(options.schema.value.toolbarActions?.length),
-    columns: Boolean(rawControls.columns[tableLayout.value].value) && tableLayout.value === "table",
+    columns: Boolean(rawControls.columns[tableLayout.value].value) && tableLayout.value === "table" && !options.rowSummary.active.value,
     filters: Boolean(rawControls.filters[tableLayout.value].value) && Boolean(options.schema.value.filters?.ui?.length),
     layout: Boolean(rawControls.layout[tableLayout.value].value) && gridEnabled.value && tableEnabled.value,
     refresh: Boolean(rawControls.refresh[tableLayout.value].value),
-    sort: Boolean(rawControls.sort[tableLayout.value].value) && tableLayout.value === "grid" && Boolean(options.schema.value.grid?.sortOptions?.length)
+    /* Summary rows have no column headers to sort by, so the menu stands in for them. */
+    sort: Boolean(rawControls.sort[tableLayout.value].value) && (tableLayout.value === "grid" && Boolean(options.schema.value.grid?.sortOptions?.length) || options.rowSummary.active.value),
+    summary: Boolean(rawControls.summary[tableLayout.value].value) && options.rowSummary.available.value
   }));
   const layoutState = computed(() => {
     const available = [];

package/dist/runtime/table/composables/use-table-internals.d.ts

@@ -60,6 +60,10 @@ declare function createTableInternals<TSchema>(options: {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -327,6 +331,11 @@ declare function createTableInternals<TSchema>(options: {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -433,6 +442,8 @@ declare function createTableInternals<TSchema>(options: {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;
@@ -672,6 +683,10 @@ declare function useProvideTableInternals<TSchema>(options: {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -939,6 +954,11 @@ declare function useProvideTableInternals<TSchema>(options: {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -1045,6 +1065,8 @@ declare function useProvideTableInternals<TSchema>(options: {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;
@@ -1281,6 +1303,10 @@ declare function useTableInternals(): {
                 grid: import("vue").ComputedRef<boolean | null>;
                 table: import("vue").ComputedRef<boolean | null>;
             };
+            summary: {
+                grid: import("vue").ComputedRef<boolean | null>;
+                table: import("vue").ComputedRef<boolean | null>;
+            };
         };
         setTableLayout: (layout: import("../types/index.js").TableLayout) => void;
         tableEnabled: import("vue").ComputedRef<boolean>;
@@ -1548,6 +1574,11 @@ declare function useTableInternals(): {
         } | null>;
     };
     resolvedFilterState: import("vue").ComputedRef<import("../types/index.js").TableResolvedFilterGroup<string>>;
+    rowSummary: {
+        active: import("vue").ComputedRef<boolean>;
+        available: import("vue").ComputedRef<boolean>;
+        setActive: (next: boolean) => void;
+    };
     schema: import("vue").ComputedRef<TableSchemaView>;
     selection: {
         allSelected: import("vue").ComputedRef<boolean>;
@@ -1654,6 +1685,8 @@ declare function useTableInternals(): {
             cell: ({ row }: {
                 row: {
                     id: string;
+                    original: import("../types/index.js").GenericObject;
+                    index: number;
                 };
             }) => import("vue/jsx-runtime").JSX.Element;
             enableHiding: boolean;

package/dist/runtime/table/composables/use-table-internals.js

@@ -10,6 +10,7 @@ import { useTableFilters } from "./use-table-filters.js";
 import { useTableGrid } from "./use-table-grid.js";
 import { useTableLayout } from "./use-table-layout.js";
 import { useTablePagination } from "./use-table-pagination.js";
+import { useTableRowSummary } from "./use-table-row-summary.js";
 import { useTableSelection } from "./use-table-selection.js";
 import { useTableStartup } from "./use-table-startup.js";
 import { useTableState } from "./use-table-state.js";
@@ -39,8 +40,14 @@ function createTableInternals(options) {
     schema,
     tree
   });
+  const rowSummary = useTableRowSummary({
+    layout,
+    schema,
+    tree
+  });
   const controls = useTableControls({
     layout,
+    rowSummary,
     schema
   });
   const filters = useTableFilters({
@@ -84,6 +91,7 @@ function createTableInternals(options) {
     pagination,
     publicSchema,
     queryContent,
+    rowSummary,
     runtimeSchema: schema,
     selection,
     state,
@@ -109,6 +117,7 @@ function createTableInternals(options) {
     queryContent,
     queryState: state.queryState,
     resolvedFilterState: state.resolvedFilterState,
+    rowSummary,
     schema,
     selection,
     startup,

package/dist/runtime/table/composables/use-table-row-labels.d.ts

@@ -0,0 +1,16 @@
+import type { GenericObject } from '../types/index.js';
+/**
+ * Accessible names for the controls of a record. A record is named by the schema's `rowLabel`;
+ * without one, or when it returns nothing for this record, by its position on the page.
+ */
+export declare function useTableRowLabels(): {
+    rowActions: (params: {
+        row: GenericObject;
+        index: number;
+    }) => string;
+    selectAll: () => string;
+    selectRow: (params: {
+        row: GenericObject;
+        index: number;
+    }) => string;
+};

package/dist/runtime/table/composables/use-table-row-labels.js

@@ -0,0 +1,22 @@
+import { useUiToolsLocale } from "#ui-tools/i18n";
+import { isNullish } from "../../shared/utils/predicate.js";
+import { useTableInternals } from "./use-table-internals.js";
+const ROW_NAME_KEYS = {
+  actions: { named: "table.rowActions.label", positioned: "table.rowActions.labelAt" },
+  select: { named: "table.selection.selectRow", positioned: "table.selection.selectRowAt" }
+};
+export function useTableRowLabels() {
+  const internals = useTableInternals();
+  const { t } = useUiToolsLocale();
+  function name(kind, params) {
+    const keys = ROW_NAME_KEYS[kind];
+    const label = internals.schema.value.rowLabel?.(params.row);
+    const text = isNullish(label) ? "" : String(label).trim();
+    return text ? t(keys.named, { label: text }) : t(keys.positioned, { position: params.index + 1 });
+  }
+  return {
+    rowActions: (params) => name("actions", params),
+    selectAll: () => t("table.selection.selectAll"),
+    selectRow: (params) => name("select", params)
+  };
+}

package/dist/runtime/table/composables/use-table-row-summary.d.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef } from 'vue';
+import type { TableSchemaView } from '../types/index.js';
+import type { useTableLayout } from './use-table-layout.js';
+import type { useTableTree } from './use-table-tree.js';
+export interface UseTableRowSummaryParams {
+    schema: ComputedRef<TableSchemaView>;
+    layout: ReturnType<typeof useTableLayout>;
+    tree: ReturnType<typeof useTableTree>;
+}
+/**
+ * Decides whether the table layout reads as summary rows. `available` is what the schema and the
+ * viewport allow; `active` also honours the reader's choice, which the toggle changes.
+ */
+export declare function useTableRowSummary(params: UseTableRowSummaryParams): {
+    active: ComputedRef<boolean>;
+    available: ComputedRef<boolean>;
+    setActive: (next: boolean) => void;
+};

package/dist/runtime/table/composables/use-table-row-summary.js

@@ -0,0 +1,41 @@
+import { useCookie } from "nuxt/app";
+import { computed, ref } from "vue";
+import { useResponsiveValue } from "#ui-tools/shared";
+import { isFunction } from "../../shared/utils/predicate.js";
+import {
+  TABLE_SUMMARY_DEFAULT_ENABLED,
+  TABLE_SUMMARY_PREFERENCE_MAX_AGE
+} from "../constants/summary.js";
+export function useTableRowSummary(params) {
+  const summary = computed(() => params.schema.value.table?.summary);
+  const enabled = useResponsiveValue(() => {
+    const configured = summary.value?.enabled;
+    const resolved = isFunction(configured) ? configured() : configured;
+    return String(resolved ?? TABLE_SUMMARY_DEFAULT_ENABLED);
+  }, "boolean");
+  const available = computed(
+    () => summary.value !== void 0 && !params.tree.enabled.value && params.layout.tableEnabled.value && params.layout.activeLayout.value === "table" && (enabled.value ?? true)
+  );
+  const persistPreferences = computed(() => params.schema.value.persistence?.preferences !== false);
+  const cookieName = `${encodeURIComponent(params.schema.value.tableKey)}::view`;
+  const stored = useCookie(cookieName, {
+    decode: (value) => value === "table" ? "table" : null,
+    default: () => null,
+    encode: (value) => value ?? "",
+    maxAge: TABLE_SUMMARY_PREFERENCE_MAX_AGE
+  });
+  const session = ref(null);
+  const choice = computed({
+    get: () => persistPreferences.value ? stored.value : session.value,
+    set: (next) => {
+      if (persistPreferences.value) stored.value = next;
+      else session.value = next;
+    }
+  });
+  const active = computed(() => available.value && choice.value === null);
+  function setActive(next) {
+    if (!available.value) return;
+    choice.value = next ? null : "table";
+  }
+  return { active, available, setActive };
+}

package/dist/runtime/table/constants/mobile.d.ts

@@ -0,0 +1,79 @@
+/**
+ * The classes the package adds below the `md` breakpoint, so every control a thumb reaches has a
+ * 44px tap target. `layerDataListMobileDefaults` puts them under the classes a slot already has,
+ * which keeps the app's own slot classes and lets them win where they conflict. Desktop sizing is
+ * untouched.
+ */
+export declare const DATA_LIST_MOBILE_DEFAULTS: {
+    readonly columnPanel: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly content: {
+        readonly ui: {
+            readonly retry: "min-h-11 min-w-11";
+        };
+    };
+    readonly filterPanel: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly filterTags: {
+        readonly ui: {
+            readonly sheetTrigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly infiniteLoader: {
+        readonly ui: {
+            readonly loadMore: "min-h-11 min-w-11";
+            readonly retry: "min-h-11 min-w-11";
+        };
+    };
+    readonly layoutSwitch: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly pagination: {
+        readonly ui: {
+            readonly button: "min-h-11 min-w-11";
+        };
+    };
+    readonly refresh: {
+        readonly ui: {
+            readonly base: "min-h-11 min-w-11";
+        };
+    };
+    readonly search: {
+        readonly ui: {
+            readonly base: "min-h-11";
+            readonly clear: "min-h-11 min-w-11";
+        };
+    };
+    readonly selectionActions: {
+        readonly ui: {
+            readonly action: "h-11 min-w-11";
+            readonly dismiss: "size-11";
+            readonly overflow: "size-11";
+        };
+    };
+    readonly sortMenu: {
+        readonly ui: {
+            readonly trigger: "min-h-11 min-w-11";
+        };
+    };
+    readonly table: {
+        readonly ui: {
+            readonly emptyAction: "min-h-11 min-w-11";
+            readonly rowAction: "min-h-11 min-w-11";
+            readonly selectControl: "relative before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2";
+        };
+    };
+    readonly viewToggle: {
+        readonly ui: {
+            readonly base: "min-h-11 min-w-11";
+        };
+    };
+};

package/dist/runtime/table/constants/mobile.js

@@ -0,0 +1,17 @@
+const TOUCH_TARGET = "min-h-11 min-w-11";
+const TOUCH_AREA = "relative before:absolute before:top-1/2 before:left-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2";
+export const DATA_LIST_MOBILE_DEFAULTS = {
+  columnPanel: { ui: { trigger: TOUCH_TARGET } },
+  content: { ui: { retry: TOUCH_TARGET } },
+  filterPanel: { ui: { trigger: TOUCH_TARGET } },
+  filterTags: { ui: { sheetTrigger: TOUCH_TARGET } },
+  infiniteLoader: { ui: { loadMore: TOUCH_TARGET, retry: TOUCH_TARGET } },
+  layoutSwitch: { ui: { trigger: TOUCH_TARGET } },
+  pagination: { ui: { button: TOUCH_TARGET } },
+  refresh: { ui: { base: TOUCH_TARGET } },
+  search: { ui: { base: "min-h-11", clear: TOUCH_TARGET } },
+  selectionActions: { ui: { action: "h-11 min-w-11", dismiss: "size-11", overflow: "size-11" } },
+  sortMenu: { ui: { trigger: TOUCH_TARGET } },
+  table: { ui: { emptyAction: TOUCH_TARGET, rowAction: TOUCH_TARGET, selectControl: TOUCH_AREA } },
+  viewToggle: { ui: { base: TOUCH_TARGET } }
+};

package/dist/runtime/table/constants/summary.d.ts

@@ -0,0 +1,67 @@
+/** Summary rows below the `md` breakpoint, the full table from `md` up. */
+export declare const TABLE_SUMMARY_DEFAULT_ENABLED = "true md:false";
+/** How long the reader's summary/table choice is remembered, in seconds. */
+export declare const TABLE_SUMMARY_PREFERENCE_MAX_AGE: number;
+/** Separates the values of a summary row's detail line. */
+export declare const TABLE_SUMMARY_DETAILS_SEPARATOR = " \u00B7 ";
+/** From this many rows on, only the rows on screen are rendered, as in the table. */
+export declare const TABLE_SUMMARY_VIRTUALIZE_THRESHOLD = 40;
+/** Placeholder rows of a first load, however short the viewport is. */
+export declare const TABLE_SUMMARY_SKELETON_MIN_ROWS = 6;
+/** Rows from the end of a cursor list at which the next page is requested. */
+export declare const TABLE_SUMMARY_LOAD_MORE_THRESHOLD = 6;
+/** What each control size gives a row, in px: its font, side gutter, height and leading tile. */
+export declare const TABLE_SUMMARY_SIZE_TOKENS: {
+    lg: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    md: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    sm: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    xl: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+    xs: {
+        font: number;
+        gutter: number;
+        row: number;
+        tile: number;
+    };
+};
+/**
+ * The classes of every summary slot. Rows sit on the default surface, never on the page's tint,
+ * with a hairline between them; the app's `ui.summary.ui` is merged over these.
+ */
+export declare const TABLE_SUMMARY_SLOT_CLASSES: {
+    readonly actions: "nut-dl-summary__actions flex shrink-0 items-center pe-[calc(var(--nut-dl-summary-x)/2)]";
+    readonly body: "nut-dl-summary__body min-w-0 flex-1";
+    readonly details: "nut-dl-summary__details min-w-0 truncate";
+    readonly header: "nut-dl-summary__header flex min-h-11 shrink-0 items-center gap-1 border-b border-muted bg-default pe-[var(--nut-dl-summary-x)] text-[length:var(--nut-dl-summary-meta)] font-medium text-muted";
+    readonly leading: "nut-dl-summary__leading flex size-[var(--nut-dl-summary-tile)] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-accented text-xs font-semibold text-muted empty:hidden";
+    readonly list: "nut-dl-summary__list";
+    readonly loadingMore: "nut-dl-summary__more flex min-h-[var(--nut-dl-summary-row-h)] items-center justify-center gap-2.5 text-[12.5px] text-muted";
+    readonly main: "nut-dl-summary__main flex min-w-0 flex-1 items-center gap-3 py-2.5 text-start focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary";
+    readonly meta: "nut-dl-summary__meta mt-0.5 flex min-w-0 items-center gap-2 text-[length:var(--nut-dl-summary-meta)] leading-snug text-muted";
+    readonly root: "nut-dl-summary relative flex min-h-0 flex-col bg-default";
+    readonly row: "nut-dl-summary__row relative flex min-h-[var(--nut-dl-summary-row-h)] items-stretch border-b border-muted bg-default";
+    readonly select: "nut-dl-summary__select flex shrink-0 items-center";
+    readonly skeleton: "nut-dl-summary__skeleton flex min-h-[var(--nut-dl-summary-row-h)] items-center gap-3 border-b border-muted px-[var(--nut-dl-summary-x)]";
+    readonly status: "nut-dl-summary__status shrink-0 empty:hidden";
+    readonly title: "nut-dl-summary__title block truncate text-[length:var(--nut-dl-summary-font)] leading-snug font-semibold text-highlighted";
+    readonly viewport: "nut-dl-summary__viewport relative min-h-0 overflow-x-hidden overflow-y-auto";
+};

package/dist/runtime/table/constants/summary.js

@@ -0,0 +1,31 @@
+export const TABLE_SUMMARY_DEFAULT_ENABLED = "true md:false";
+export const TABLE_SUMMARY_PREFERENCE_MAX_AGE = 60 * 60 * 24 * 365;
+export const TABLE_SUMMARY_DETAILS_SEPARATOR = " \xB7 ";
+export const TABLE_SUMMARY_VIRTUALIZE_THRESHOLD = 40;
+export const TABLE_SUMMARY_SKELETON_MIN_ROWS = 6;
+export const TABLE_SUMMARY_LOAD_MORE_THRESHOLD = 6;
+export const TABLE_SUMMARY_SIZE_TOKENS = {
+  lg: { font: 14, gutter: 16, row: 72, tile: 36 },
+  md: { font: 13.5, gutter: 14, row: 64, tile: 32 },
+  sm: { font: 13, gutter: 12, row: 60, tile: 32 },
+  xl: { font: 15, gutter: 16, row: 80, tile: 40 },
+  xs: { font: 12.5, gutter: 12, row: 56, tile: 28 }
+};
+export const TABLE_SUMMARY_SLOT_CLASSES = {
+  actions: "nut-dl-summary__actions flex shrink-0 items-center pe-[calc(var(--nut-dl-summary-x)/2)]",
+  body: "nut-dl-summary__body min-w-0 flex-1",
+  details: "nut-dl-summary__details min-w-0 truncate",
+  header: "nut-dl-summary__header flex min-h-11 shrink-0 items-center gap-1 border-b border-muted bg-default pe-[var(--nut-dl-summary-x)] text-[length:var(--nut-dl-summary-meta)] font-medium text-muted",
+  leading: "nut-dl-summary__leading flex size-[var(--nut-dl-summary-tile)] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-accented text-xs font-semibold text-muted empty:hidden",
+  list: "nut-dl-summary__list",
+  loadingMore: "nut-dl-summary__more flex min-h-[var(--nut-dl-summary-row-h)] items-center justify-center gap-2.5 text-[12.5px] text-muted",
+  main: "nut-dl-summary__main flex min-w-0 flex-1 items-center gap-3 py-2.5 text-start focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary",
+  meta: "nut-dl-summary__meta mt-0.5 flex min-w-0 items-center gap-2 text-[length:var(--nut-dl-summary-meta)] leading-snug text-muted",
+  root: "nut-dl-summary relative flex min-h-0 flex-col bg-default",
+  row: "nut-dl-summary__row relative flex min-h-[var(--nut-dl-summary-row-h)] items-stretch border-b border-muted bg-default",
+  select: "nut-dl-summary__select flex shrink-0 items-center",
+  skeleton: "nut-dl-summary__skeleton flex min-h-[var(--nut-dl-summary-row-h)] items-center gap-3 border-b border-muted px-[var(--nut-dl-summary-x)]",
+  status: "nut-dl-summary__status shrink-0 empty:hidden",
+  title: "nut-dl-summary__title block truncate text-[length:var(--nut-dl-summary-font)] leading-snug font-semibold text-highlighted",
+  viewport: "nut-dl-summary__viewport relative min-h-0 overflow-x-hidden overflow-y-auto"
+};