@krizaka/ui 3.53.0 → 3.55.0

package/dist/{chunk-YHKTYFOQ.js → chunk-QWKCNSPF.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Checkbox
-} from "./chunk-YGIN2YIY.js";
+} from "./chunk-3X3OF4TI.js";
 import {
   Button
 } from "./chunk-3DHNN5V7.js";
@@ -13,13 +13,13 @@ import {
   DropdownMenu,
   FilterBar,
   FilterMenu
-} from "./chunk-ZQW7LF4Y.js";
+} from "./chunk-OIMXKRXF.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";
 import {
   SearchField
-} from "./chunk-7NRSPHAF.js";
+} from "./chunk-VB7MWE2N.js";
 import {
   useControllable
 } from "./chunk-FZBWEDQI.js";
@@ -45,7 +45,7 @@ function dataTableCsv(rows, columns, separator = ",") {
 
 // src/data-table/data-table.tsx
 import { useTable } from "@tanstack/react-table";
-import * as React from "react";
+import * as React2 from "react";
 import { tv as tv2 } from "tailwind-variants";
 
 // src/pagination/pagination.tsx
@@ -250,6 +250,122 @@ var filterRange = (row, id, [min, max]) => {
 filterRange.autoRemove = (value) => !Array.isArray(value) || value[0] == null && value[1] == null;
 var FILTERS = { text: filterText, facet: filterFacet, range: filterRange };
 
+// src/data-table/use-route-table.ts
+import * as React from "react";
+import { useRouteSearch } from "@krizaka/ui/router";
+
+// src/data-table/route-codec.ts
+var NONE = "none";
+function encodeSort(sort) {
+  return sort ? `${sort.column}.${sort.direction}` : NONE;
+}
+function decodeSort(raw, fallback, columns) {
+  if (raw === null) return fallback;
+  if (raw === NONE) return null;
+  const dot = raw.lastIndexOf(".");
+  const column = raw.slice(0, dot);
+  const direction = raw.slice(dot + 1);
+  if (dot < 1 || direction !== "ascending" && direction !== "descending" || columns && !columns.includes(column)) return fallback;
+  return { column, direction };
+}
+var ESCAPE = "\\";
+function encodeFilter(value) {
+  if (typeof value !== "string") return JSON.stringify(value);
+  return value.startsWith("[") || value.startsWith(ESCAPE) ? `${ESCAPE}${value}` : value;
+}
+function decodeFilter(raw) {
+  if (raw.startsWith(ESCAPE)) return raw.slice(1);
+  if (raw.startsWith("[")) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) return parsed;
+    } catch {
+    }
+  }
+  return raw;
+}
+var sameSort = (a, b) => a?.column === b?.column && a?.direction === b?.direction;
+var filterPrefix = (key) => `${key}.q.`;
+var clearedFilters = (key) => `${key}.q`;
+var sameFilters = (a, b) => {
+  const written = (f) => JSON.stringify(Object.entries(f).map(([column, value]) => [column, encodeFilter(value)]).filter(([, v]) => v !== "" && v !== "[]").sort(([a2], [b2]) => String(a2).localeCompare(String(b2))));
+  return written(a) === written(b);
+};
+function readTable(search, key, defaults, columns) {
+  const params = new URLSearchParams(search);
+  const filters = {};
+  let explicit = params.has(clearedFilters(key));
+  for (const [name, raw2] of params) {
+    if (!name.startsWith(filterPrefix(key)) || raw2 === "") continue;
+    explicit = true;
+    filters[name.slice(filterPrefix(key).length)] = decodeFilter(raw2);
+  }
+  const raw = params.get(`${key}.page`);
+  const page = raw !== null && /^[1-9]\d*$/.test(raw) ? Number(raw) : defaults.page;
+  return {
+    sort: decodeSort(params.get(`${key}.sort`), defaults.sort, columns),
+    filters: explicit ? filters : defaults.filters ?? {},
+    page
+  };
+}
+function writeTable(search, key, change, defaults) {
+  const params = new URLSearchParams(search);
+  if (change.sort !== void 0) {
+    if (sameSort(change.sort, defaults.sort)) params.delete(`${key}.sort`);
+    else params.set(`${key}.sort`, encodeSort(change.sort));
+  }
+  if (change.filters !== void 0) {
+    for (const name of [...params.keys()]) if (name.startsWith(filterPrefix(key)) || name === clearedFilters(key)) params.delete(name);
+    if (!sameFilters(change.filters, defaults.filters ?? {})) {
+      let written = 0;
+      for (const [column, value] of Object.entries(change.filters)) {
+        const encoded = encodeFilter(value);
+        if (encoded !== "" && encoded !== "[]") {
+          params.set(`${filterPrefix(key)}${column}`, encoded);
+          written += 1;
+        }
+      }
+      if (written === 0) params.set(clearedFilters(key), "");
+    }
+  }
+  const page = change.page ?? (change.sort !== void 0 || change.filters !== void 0 ? 1 : void 0);
+  if (page !== void 0) {
+    if (page === defaults.page) params.delete(`${key}.page`);
+    else params.set(`${key}.page`, String(page));
+  }
+  const text = params.toString();
+  return text ? `?${text}` : "";
+}
+
+// src/data-table/use-route-table.ts
+function useRouteTable(routeKey, defaults, columns) {
+  const { search, write } = useRouteSearch();
+  const key = routeKey;
+  const sortKey = encodeSort(defaults.sort);
+  const filtersKey = JSON.stringify(defaults.filters);
+  const columnKey = columns.join();
+  const page = defaults.page;
+  const stable = React.useMemo(
+    () => ({ sort: decodeSort(sortKey, null), page, filters: JSON.parse(filtersKey) }),
+    [sortKey, filtersKey, page]
+  );
+  const table = React.useMemo(
+    () => key === void 0 ? null : readTable(search, key, stable, columnKey.split(",")),
+    [search, key, stable, columnKey]
+  );
+  if (key === void 0 || table === null) return null;
+  return {
+    sort: table.sort,
+    filters: table.filters,
+    page: table.page,
+    // Typing in a filter is not a place to come back to: it replaces the entry; a sort or a page is a step. A sort or a
+    // filter goes back to the first page in the same navigation.
+    onSortChange: (sort) => write((s2) => writeTable(s2, key, { sort }, stable)),
+    onFiltersChange: (filters) => write((s2) => writeTable(s2, key, { filters }, stable), { replace: true }),
+    onPageChange: (next) => write((s2) => writeTable(s2, key, { page: next }, stable))
+  };
+}
+
 // src/data-table/data-table.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var dataTable = tv2({
@@ -291,7 +407,7 @@ var dataTable = tv2({
         th: "@max-xl:sr-only @max-xl:data-[keep]:not-sr-only @max-xl:data-[keep]:block @max-xl:p-0 @xl:data-[pin]:sticky @xl:data-[pin]:z-[2] @xl:data-[pin]:bg-surface-2 @xl:data-[pin=start]:left-(--dt-pin) @xl:data-[pin=end]:right-(--dt-pin)",
         tbody: "@max-xl:grid @max-xl:gap-3 @max-xl:p-3",
         tr: "@max-xl:relative @max-xl:grid @max-xl:gap-1.5 @max-xl:rounded-xl @max-xl:border @max-xl:border-border-default @max-xl:bg-surface-0 @max-xl:p-4 @max-xl:last:border-b",
-        td: "@max-xl:flex @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right @max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] @max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none @max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none @xl:data-[pin]:sticky @xl:data-[pin]:z-[1] @xl:data-[pin]:bg-surface-1 @xl:data-[pin=start]:left-(--dt-pin) @xl:data-[pin=end]:right-(--dt-pin)",
+        td: "@max-xl:flex @max-xl:min-w-0 @max-xl:items-baseline @max-xl:justify-between @max-xl:gap-4 @max-xl:p-0 @max-xl:text-right @max-xl:[overflow-wrap:anywhere] @max-xl:[&>*]:min-w-0 @max-xl:[&>*]:shrink @max-xl:[&>*]:whitespace-normal @max-xl:before:shrink-0 @max-xl:before:text-xs @max-xl:before:font-semibold @max-xl:before:text-fg-secondary @max-xl:before:content-[attr(data-label)] @max-xl:data-[card=title]:order-first @max-xl:data-[card=title]:pr-8 @max-xl:data-[card=title]:text-left @max-xl:data-[card=title]:text-base @max-xl:data-[card=title]:font-semibold @max-xl:data-[card=title]:before:content-none @max-xl:data-[card=hidden]:hidden @max-xl:data-[card=message]:block @max-xl:data-[card=message]:text-center @max-xl:data-[card=message]:before:content-none @xl:data-[pin]:sticky @xl:data-[pin]:z-[1] @xl:data-[pin]:bg-surface-1 @xl:data-[pin=start]:left-(--dt-pin) @xl:data-[pin=end]:right-(--dt-pin)",
         select: "@max-xl:absolute @max-xl:right-3 @max-xl:top-3 @max-xl:w-auto @max-xl:before:content-none",
         expander: "@max-xl:before:content-none"
       },
@@ -303,7 +419,7 @@ var dataTable = tv2({
         th: "sr-only p-0 data-[keep]:not-sr-only data-[keep]:block",
         tbody: "grid gap-3 p-3",
         tr: "relative grid gap-1.5 rounded-xl border border-border-default bg-surface-0 p-4 last:border-b",
-        td: "flex items-baseline justify-between gap-4 p-0 text-right before:shrink-0 before:text-xs before:font-semibold before:text-fg-secondary before:content-[attr(data-label)] data-[card=title]:order-first data-[card=title]:pr-8 data-[card=title]:text-left data-[card=title]:text-base data-[card=title]:font-semibold data-[card=title]:before:content-none data-[card=hidden]:hidden data-[card=message]:block data-[card=message]:text-center data-[card=message]:before:content-none",
+        td: "flex min-w-0 items-baseline justify-between gap-4 p-0 text-right [overflow-wrap:anywhere] before:shrink-0 before:text-xs before:font-semibold before:text-fg-secondary before:content-[attr(data-label)] [&>*]:min-w-0 [&>*]:shrink [&>*]:whitespace-normal data-[card=title]:order-first data-[card=title]:pr-8 data-[card=title]:text-left data-[card=title]:text-base data-[card=title]:font-semibold data-[card=title]:before:content-none data-[card=hidden]:hidden data-[card=message]:block data-[card=message]:text-center data-[card=message]:before:content-none",
         select: "absolute right-3 top-3 w-auto before:content-none",
         expander: "before:content-none"
       }
@@ -317,7 +433,9 @@ var dataTable = tv2({
     // Zebra rows (the table layouts); the cards keep their frame.
     striped: { true: {}, false: {} },
     // Typed columns: one height per row (`typed`); untyped tables keep the height of their content.
-    typed: { true: {}, false: {} }
+    typed: { true: {}, false: {} },
+    // What a row becomes on a phone (under 36 rem, or with `layout="cards"`): a card, or a list row (#636).
+    phone: { cards: {}, list: {} }
   },
   compoundVariants: [
     { layout: "table", sticky: true, class: { th: "sticky top-(--dt-top,0px) z-[3] bg-surface-2" } },
@@ -328,9 +446,33 @@ var dataTable = tv2({
     { layout: "table", density: "comfortable", typed: true, class: { td: "h-15" } },
     { layout: "auto", density: "comfortable", typed: true, class: { td: "@xl:h-15" } },
     { layout: "table", density: "compact", typed: true, class: { td: "h-12" } },
-    { layout: "auto", density: "compact", typed: true, class: { td: "@xl:h-12" } }
+    { layout: "auto", density: "compact", typed: true, class: { td: "@xl:h-12" } },
+    // The list rows (#636): no box in the box, no label/value lines — the checkbox, the title and its line of facts, the
+    // status at the end, a hairline between rows. Each cell says its place in `data-list` (title · status · away).
+    {
+      layout: "auto",
+      phone: "list",
+      class: {
+        tbody: "@max-xl:gap-0 @max-xl:p-0",
+        tr: "@max-xl:flex @max-xl:items-center @max-xl:gap-3 @max-xl:rounded-none @max-xl:border-0 @max-xl:border-b @max-xl:border-border-subtle @max-xl:bg-transparent @max-xl:px-4 @max-xl:py-3 @max-xl:last:border-b-0",
+        td: "@max-xl:block @max-xl:text-left @max-xl:before:content-none @max-xl:data-[list=title]:min-w-0 @max-xl:data-[list=title]:flex-1 @max-xl:data-[list=status]:shrink-0 @max-xl:data-[list=away]:hidden @max-xl:data-[card=message]:w-full",
+        select: "@max-xl:relative @max-xl:right-auto @max-xl:top-auto @max-xl:z-[1] @max-xl:shrink-0 @max-xl:self-center",
+        expander: "@max-xl:relative @max-xl:z-[1] @max-xl:shrink-0"
+      }
+    },
+    {
+      layout: "cards",
+      phone: "list",
+      class: {
+        tbody: "gap-0 p-0",
+        tr: "flex items-center gap-3 rounded-none border-0 border-b border-border-subtle bg-transparent px-4 py-3 last:border-b-0",
+        td: "block text-left before:content-none data-[list=title]:min-w-0 data-[list=title]:flex-1 data-[list=status]:shrink-0 data-[list=away]:hidden data-[card=message]:w-full",
+        select: "relative right-auto top-auto z-[1] shrink-0 self-center",
+        expander: "relative z-[1] shrink-0"
+      }
+    }
   ],
-  defaultVariants: { layout: "auto", density: "comfortable", sticky: false, striped: false, typed: false }
+  defaultVariants: { layout: "auto", density: "comfortable", sticky: false, striped: false, typed: false, phone: "cards" }
 });
 var NO_CLASS = { 2: "", 3: "", 4: "", 5: "", 6: "", 7: "" };
 var LEAVES = {
@@ -358,6 +500,11 @@ var PANEL = {
   table: { 2: "hidden @max-2xl:block", 3: "hidden @max-3xl:block", 4: "hidden @max-4xl:block", 5: "hidden @max-5xl:block", 6: "hidden @max-6xl:block", 7: "hidden @max-7xl:block" },
   cards: { 2: "hidden", 3: "block", 4: "block", 5: "block", 6: "block", 7: "block" }
 };
+var LIST_FACTS = { auto: "hidden @max-xl:mt-0.5 @max-xl:block @max-xl:truncate text-xs font-normal text-fg-secondary", table: "hidden", cards: "mt-0.5 block truncate text-xs font-normal text-fg-secondary" };
+var LIST_IN_DETAIL = { auto: "hidden @max-xl:grid", table: "hidden", cards: "grid" };
+var LIST_TOGGLE = { auto: "@max-xl:inline-flex", table: "", cards: "inline-flex" };
+var LIST_PANEL = { auto: "@max-xl:block", table: "", cards: "block" };
+var LIST_LINK = { auto: "@max-xl:after:absolute @max-xl:after:inset-0 @max-xl:after:content-['']", table: "", cards: "after:absolute after:inset-0 after:content-['']" };
 var TYPE_CELL = {
   title: { auto: "@xl:w-full @xl:max-w-0 @xl:min-w-44", table: "w-full max-w-0 min-w-44", cards: "" },
   badge: { auto: "@xl:w-px", table: "w-px", cards: "" },
@@ -389,18 +536,19 @@ var dataTableLabels = {
   showMore: (name) => `Show more about ${name}`,
   export: "Export CSV"
 };
-var DataTableContext = React.createContext(null);
+var DataTableContext = React2.createContext(null);
 function useDataTable() {
-  const context = React.useContext(DataTableContext);
+  const context = React2.useContext(DataTableContext);
   if (!context) throw new Error("useDataTable: call it inside a DataTable (its `toolbar`, `footer` or a cell)");
   return context;
 }
+var CARD_CLIP = { auto: "@max-xl:overflow-x-clip!", table: void 0, cards: "overflow-x-clip!" };
 var TRUNCATE = { auto: "@xl:truncate", table: "truncate", cards: "" };
 var MIN = { auto: "@xl:min-w-(--dt-min)!", table: "min-w-(--dt-min)!", cards: "" };
 var MAX = { auto: "@xl:max-w-(--dt-max)!", table: "max-w-(--dt-max)!", cards: "" };
 var SHADOWS = "[background:linear-gradient(to_right,var(--kz-surface-1),transparent)_left/24px_100%_no-repeat_local,linear-gradient(to_left,var(--kz-surface-1),transparent)_right/24px_100%_no-repeat_local,linear-gradient(to_right,rgb(0_0_0/0.18),transparent)_left/10px_100%_no-repeat_scroll,linear-gradient(to_left,rgb(0_0_0/0.18),transparent)_right/10px_100%_no-repeat_scroll]";
 var ALIGN = { start: "text-left", center: "text-center", end: "text-right" };
-var NONE = [];
+var NONE2 = [];
 var NO_RECORD = {};
 var apply = (updater, old) => typeof updater === "function" ? updater(old) : updater;
 var valueOf = (column, row) => column.value ? column.value(row) : row[column.id];
@@ -412,6 +560,7 @@ function DataTable({
   caption,
   showCaption,
   sort: sortProp,
+  routeKey,
   defaultSort = null,
   onSortChange,
   filters: filtersProp,
@@ -419,11 +568,11 @@ function DataTable({
   onFiltersChange,
   selectable,
   selected: selectedProp,
-  defaultSelected = NONE,
+  defaultSelected = NONE2,
   onSelectedChange,
   rowLabel,
   groupBy: groupByProp,
-  defaultGroupBy = NONE,
+  defaultGroupBy = NONE2,
   onGroupByChange,
   columnVisibility: visibilityProp,
   defaultColumnVisibility = NO_RECORD,
@@ -450,6 +599,7 @@ function DataTable({
   error,
   empty: empty2,
   layout = "auto",
+  phone = "cards",
   density,
   stickyHeader,
   striped,
@@ -465,29 +615,42 @@ function DataTable({
   const effectiveLayout = virtualized ? "table" : layout;
   const L = effectiveLayout;
   const typed = columns.some((c) => c.type || c.priority);
-  const s2 = dataTable({ layout: L, density, sticky: Boolean(stickyHeader), striped: Boolean(striped), typed });
-  const [sort, setSort] = useControllable(sortProp, defaultSort, onSortChange);
-  const [filters, setFiltersState] = useControllable(filtersProp, defaultFilters, onFiltersChange);
+  const list = phone === "list" && L !== "table";
+  const s2 = dataTable({ layout: L, density, sticky: Boolean(stickyHeader), striped: Boolean(striped), typed, phone: list ? "list" : "cards" });
+  const route = useRouteTable(routeKey, { sort: defaultSort, page: defaultPage, filters: defaultFilters }, columns.map((c) => c.id));
+  const [sort, setSort] = useControllable(route ? route.sort : sortProp, defaultSort, route?.onSortChange ?? onSortChange);
+  const [filters, setFiltersState] = useControllable(route ? route.filters : filtersProp, defaultFilters, route?.onFiltersChange ?? onFiltersChange);
   const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
   const [groupBy, setGroupBy] = useControllable(groupByProp, defaultGroupBy, onGroupByChange);
   const [visibility, setVisibility] = useControllable(visibilityProp, defaultColumnVisibility, onColumnVisibilityChange);
   const [expanded, setExpanded] = useControllable(expandedProp, defaultExpanded, onExpandedChange);
   const paginated = pageSizeProp !== void 0 || defaultPageSize !== void 0;
   const [pageSize, setPageSize] = useControllable(pageSizeProp, defaultPageSize ?? Number.POSITIVE_INFINITY, onPageSizeChange);
-  const [page, setPage] = useControllable(pageProp, defaultPage, onPageChange);
-  const [sizing, setSizing] = React.useState({});
-  const [resizeState, setResizeState] = React.useState(void 0);
-  const announce = (next) => onStateChange?.({ sort, filters, page: paginated ? page : 1, pageSize: paginated ? pageSize : Number.POSITIVE_INFINITY, ...next });
+  const [page, setPage] = useControllable(route ? route.page : pageProp, defaultPage, route?.onPageChange ?? onPageChange);
+  const [sizing, setSizing] = React2.useState({});
+  const [resizeState, setResizeState] = React2.useState(void 0);
+  const announced = React2.useRef(JSON.stringify([defaultSort, defaultFilters, paginated ? defaultPage : 1, paginated ? pageSize : null]));
+  const announce = (next) => {
+    const query = { sort, filters, page: paginated ? page : 1, pageSize: paginated ? pageSize : Number.POSITIVE_INFINITY, ...next };
+    if (route) announced.current = JSON.stringify([query.sort, query.filters, query.page, paginated ? query.pageSize : null]);
+    onStateChange?.(query);
+  };
   const changeSort = (next) => {
     setSort(next);
-    if (paginated && page !== 1) setPage(1);
+    if (paginated && page !== 1 && !route) setPage(1);
     announce({ sort: next, page: 1 });
   };
   const changeFilters = (next) => {
     setFiltersState(next);
-    if (paginated && page !== 1) setPage(1);
+    if (paginated && page !== 1 && !route) setPage(1);
     announce({ filters: next, page: 1 });
   };
+  const routeQuery = route ? JSON.stringify([route.sort, route.filters, paginated ? route.page : 1, paginated ? pageSize : null]) : null;
+  React2.useEffect(() => {
+    if (routeQuery === null || routeQuery === announced.current) return;
+    announced.current = routeQuery;
+    announce({});
+  }, [routeQuery]);
   const changePage = (next) => {
     setPage(next);
     announce({ page: next });
@@ -500,9 +663,18 @@ function DataTable({
   const hasExpander = Boolean(renderDetail || getSubRows);
   const priorityOf = (column) => column.priority && column.priority > 1 ? column.priority : 1;
   const maxPriority = columns.reduce((max, column) => priorityOf(column) > max ? priorityOf(column) : max, 1);
-  const inlineToggle = maxPriority > 1 && !hasExpander;
+  const titleColumn = columns.find((c) => c.card === "title" || !c.card && c.type === "title") ?? columns[0];
+  const placeOf = (column) => {
+    if (column.card === "hidden") return "hidden";
+    if (column === titleColumn) return "title";
+    if (column.type === "status" || column.type === "badge") return "status";
+    return priorityOf(column) === 2 ? "facts" : "away";
+  };
+  const listAway = list ? columns.filter((c) => placeOf(c) === "away" && priorityOf(c) === 1) : [];
+  const facts = list ? columns.filter((c) => placeOf(c) === "facts") : [];
+  const inlineToggle = (maxPriority > 1 || listAway.length > 0) && !hasExpander;
   const detailed = Boolean(renderDetail) || inlineToggle;
-  const defs = React.useMemo(
+  const defs = React2.useMemo(
     () => columns.map((column) => ({
       id: column.id,
       accessorFn: (row) => valueOf(column, row),
@@ -579,7 +751,7 @@ function DataTable({
   const pageRows = table.getRowModel().rows;
   const leafCount = (manual?.pagination || manual?.filtering) && rowCount !== void 0 ? rowCount : table.getFilteredRowModel().rows.length;
   const pageCount = paginated ? Math.max(1, manual?.pagination ? Math.ceil((rowCount ?? rows.length) / pageSize) : table.getPageCount()) : 1;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (paginated && !loading && page > pageCount) changePage(pageCount);
   }, [pageCount]);
   const selectableIds = pageRows.filter((r) => !r.getIsGrouped()).map((r) => r.id);
@@ -591,7 +763,7 @@ function DataTable({
   const fixedLayout = Boolean(resizing || pinned?.start?.length || pinned?.end?.length);
   const sideways = scroll ?? (!typed && !stickyHeader);
   const nameOf = (row) => rowLabel ? rowLabel(row.original) : row.id;
-  const scroller = React.useRef(null);
+  const scroller = React2.useRef(null);
   const fallbacks = useLayoutFallbacks(virtualized?.height ?? 0, virtualized?.estimateRowHeight ?? 44);
   const virtualizer = useVirtualizer({
     ...fallbacks,
@@ -623,8 +795,9 @@ function DataTable({
     switch (column.type) {
       case "title": {
         const sub = column.subtitle?.(original);
+        const href = column.href?.(original);
         return /* @__PURE__ */ jsxs2("span", { className: "block min-w-0", children: [
-          /* @__PURE__ */ jsx2("span", { className: cn("block font-semibold text-fg", cut), title: text, children: text }),
+          href ? /* @__PURE__ */ jsx2("a", { href, className: cn("block font-semibold text-fg no-underline hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring", cut, list && LIST_LINK[L]), title: text, children: text }) : /* @__PURE__ */ jsx2("span", { className: cn("block font-semibold text-fg", cut), title: text, children: text }),
           sub ? /* @__PURE__ */ jsx2("span", { className: cn("block font-mono text-xs text-fg-tertiary", cut), children: sub }) : null
         ] });
       }
@@ -644,6 +817,11 @@ function DataTable({
       }
     }
   };
+  const listPlace = (row, column) => {
+    if (row?.getIsGrouped()) return row.groupingColumnId === column.id ? "title" : column.aggregate ? "status" : "away";
+    const place = placeOf(column);
+    return place === "facts" || place === "hidden" ? "away" : place;
+  };
   const dataCell = (row, cell, first) => {
     const column = byId.get(cell.column.id);
     if (!column) return null;
@@ -660,13 +838,22 @@ function DataTable({
       } else content = column.aggregate ? column.aggregate(leaves) : null;
     } else {
       content = contentOf(column, row.original);
+      if (list && column === titleColumn && facts.length > 0) {
+        content = /* @__PURE__ */ jsxs2("span", { className: "block min-w-0", children: [
+          content,
+          /* @__PURE__ */ jsx2("span", { "data-facts": "", className: LIST_FACTS[L], children: facts.map((c, i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+            i > 0 ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " \xB7 " }) : null,
+            contentOf(c, row.original)
+          ] }, c.id)) })
+        ] });
+      }
       if (first && inlineToggle) {
         content = /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-1", children: [
           /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
-              className: s2.toggle({ className: TOGGLE[L][maxPriority] }),
+              className: s2.toggle({ className: cn(maxPriority > 1 ? TOGGLE[L][maxPriority] : "hidden", listAway.length > 0 && LIST_TOGGLE[L], list && "relative z-[1]") }),
               "aria-expanded": row.getIsExpanded(),
               "aria-label": labels.showMore(nameOf(row)),
               onClick: row.getToggleExpandedHandler(),
@@ -691,7 +878,8 @@ function DataTable({
       {
         role: "cell",
         "data-label": column.header,
-        "data-card": row.getIsGrouped() ? cell.column.id === row.groupingColumnId ? "title" : column.aggregate ? void 0 : "hidden" : cardOf(column),
+        "data-card": list ? placeOf(column) === "hidden" ? "hidden" : void 0 : row.getIsGrouped() ? cell.column.id === row.groupingColumnId ? "title" : column.aggregate ? void 0 : "hidden" : cardOf(column),
+        "data-list": list ? listPlace(row, column) : void 0,
         ...pinnedProps,
         className: s2.td({ className: cellClass }),
         style: {
@@ -728,14 +916,17 @@ function DataTable({
         ]
       }
     );
-    if (!showDetail) return /* @__PURE__ */ jsx2(React.Fragment, { children: main }, row.id);
-    const left = visibleColumns.filter((c) => priorityOf(byId.get(c.id)) > 1);
-    return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+    if (!showDetail) return /* @__PURE__ */ jsx2(React2.Fragment, { children: main }, row.id);
+    const left = visibleColumns.filter((c) => {
+      const column = byId.get(c.id);
+      return priorityOf(column) > 1 || listAway.includes(column);
+    });
+    return /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
       main,
       /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsxs2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: renderDetail ? s2.detail() : "bg-surface-0 p-0 text-left" }), children: [
-        left.length > 0 ? /* @__PURE__ */ jsx2("dl", { className: cn("m-0 grid gap-3 text-left", renderDetail ? "mb-4" : cn("px-4 py-4", PANEL[L][maxPriority])), children: left.map((c) => {
+        left.length > 0 ? /* @__PURE__ */ jsx2("dl", { className: cn("m-0 grid gap-3 text-left", renderDetail ? "mb-4" : cn("px-4 py-4", maxPriority > 1 ? PANEL[L][maxPriority] : "hidden", listAway.length > 0 && LIST_PANEL[L])), children: left.map((c) => {
           const column = byId.get(c.id);
-          return /* @__PURE__ */ jsxs2("div", { className: cn(IN_DETAIL[L][priorityOf(column)], "grid-cols-[minmax(5rem,8rem)_minmax(0,1fr)] items-baseline gap-3"), children: [
+          return /* @__PURE__ */ jsxs2("div", { className: cn(listAway.includes(column) ? LIST_IN_DETAIL[L] : IN_DETAIL[L][priorityOf(column)], "grid-cols-[minmax(5rem,8rem)_minmax(0,1fr)] items-baseline gap-3"), children: [
             /* @__PURE__ */ jsx2("dt", { className: "text-xs font-semibold text-fg-secondary", children: column.header }),
             /* @__PURE__ */ jsx2("dd", { className: "m-0 min-w-0 text-sm text-fg", children: contentOf(column, row.original) })
           ] }, c.id);
@@ -749,7 +940,7 @@ function DataTable({
     body = Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs2("tr", { role: "row", "aria-hidden": true, className: s2.tr(), children: [
       selectable && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.select() }) }),
       hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }) }),
-      visibleColumns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": cardOf(byId.get(column.id)), className: s2.td(), children: /* @__PURE__ */ jsx2("div", { className: s2.skeleton() }) }, column.id))
+      visibleColumns.map((column) => /* @__PURE__ */ jsx2("td", { role: "cell", "data-card": list ? void 0 : cardOf(byId.get(column.id)), "data-list": list ? listPlace(null, byId.get(column.id)) : void 0, className: s2.td(), children: /* @__PURE__ */ jsx2("div", { className: s2.skeleton() }) }, column.id))
     ] }, `loading-${i}`));
   } else if (error) body = message(error, true);
   else if (pageRows.length === 0) body = message(empty2 ?? labels.empty);
@@ -867,7 +1058,7 @@ function DataTable({
           children: tableElement
         }
       )
-    ) : /* @__PURE__ */ jsx2("div", { className: s2.scroller({ className: sideways ? scroll ? SHADOWS : void 0 : "overflow-x-clip" }), children: tableElement }),
+    ) : /* @__PURE__ */ jsx2("div", { className: s2.scroller({ className: sideways ? scroll ? SHADOWS : CARD_CLIP[L] : "overflow-x-clip" }), children: tableElement }),
     pagination2 || footer ? /* @__PURE__ */ jsxs2("div", { className: s2.footer({ className: "flex flex-col gap-3" }), children: [
       pagination2,
       footer
@@ -911,6 +1102,9 @@ function ResizeHandle({
   );
 }
 
+// src/data-table/toolbar.tsx
+import * as React3 from "react";
+
 // src/field/field.tsx
 import { tv as tv3 } from "tailwind-variants";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -918,7 +1112,7 @@ var field2 = tv3({
   slots: {
     root: "flex flex-col gap-1.5",
     label: "text-xs font-semibold text-fg-secondary",
-    control: "flex h-11 w-full rounded-lg border border-border-default bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
+    control: "flex h-11 w-full rounded-lg border border-border-control bg-surface-2 px-3 text-sm text-fg placeholder:text-fg-muted transition-[border-color,box-shadow] focus-visible:border-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/30",
     hint: "text-xs text-fg-secondary",
     // The message reads in the danger text role (≥ 4.5:1 on every surface, both themes); the dot is the danger fill.
     error: "flex items-center gap-1.5 text-xs font-medium text-fg-danger before:h-1.5 before:w-1.5 before:shrink-0 before:rounded-full before:bg-danger",
@@ -979,17 +1173,12 @@ function DataTableFilters({ debounce = 250, children, className }) {
         filterable.map((column) => {
           if (column.filter === "text")
             return /* @__PURE__ */ jsx4(
-              SearchField,
+              TextFilter,
               {
                 label: labels.search(column.header),
-                placeholder: labels.search(column.header),
-                value: typeof filters[column.id] === "string" ? void 0 : "",
-                defaultValue: typeof filters[column.id] === "string" ? filters[column.id] : void 0,
+                value: typeof filters[column.id] === "string" ? filters[column.id] : "",
                 debounce,
-                onSearch: (query) => set(column.id, query),
-                landmark: false,
-                size: "sm",
-                className: "min-w-48 flex-1"
+                onCommit: (query) => set(column.id, query)
               },
               column.id
             );
@@ -1065,10 +1254,45 @@ function DataTableExport({ filename = "export.csv", onExport, className }) {
   };
   return /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
 }
+function TextFilter({ label, value, debounce, onCommit }) {
+  const [draft, setDraft] = React3.useState(value);
+  const [seen, setSeen] = React3.useState(value);
+  const [committed, setCommitted] = React3.useState(value);
+  if (value !== seen) {
+    setSeen(value);
+    if (value !== committed) {
+      setCommitted(value);
+      setDraft(value);
+    }
+  }
+  return /* @__PURE__ */ jsx4(
+    SearchField,
+    {
+      label,
+      placeholder: label,
+      value: draft,
+      onValueChange: setDraft,
+      debounce,
+      onSearch: (query) => {
+        setCommitted(query);
+        onCommit(query);
+      },
+      landmark: false,
+      size: "sm",
+      className: "min-w-48 flex-1"
+    }
+  );
+}
 
 export {
   dataTableCsv,
   compareValues,
+  encodeSort,
+  decodeSort,
+  encodeFilter,
+  decodeFilter,
+  readTable,
+  writeTable,
   dataTable,
   dataTableLabels,
   useDataTable,
@@ -1077,4 +1301,4 @@ export {
   DataTableColumnsMenu,
   DataTableExport
 };
-//# sourceMappingURL=chunk-YHKTYFOQ.js.map
+//# sourceMappingURL=chunk-QWKCNSPF.js.map