@krizaka/ui 3.16.1 → 3.17.0

package/dist/blocks.css

@@ -720,6 +720,14 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
   .kz-tpl-catalogue-filters > div { padding: 0 14px 14px; }
 }
+@media (max-width: 1279px) {
+  .kz-tpl-catalogue[data-rail="wide"] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+  .kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters { position: static; border-radius: 14px; border: 1px solid var(--kz-border-default); background: var(--kz-surface-1); }
+  .kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
+    font-size: 14px; font-weight: 650; color: var(--kz-text-primary); }
+  .kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters > summary::-webkit-details-marker { display: none; }
+  .kz-tpl-catalogue[data-rail="wide"] .kz-tpl-catalogue-filters > div { padding: 0 14px 14px; }
+}
 
 /* A long read: chapters with their big numbers, pull quotes in the margin, figures that break out. */
 .kz-tpl-chapters { display: grid; gap: clamp(40px, 7vw, 88px); }

package/dist/catalogue-page.d.ts

@@ -27,8 +27,13 @@ type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     children: React.ReactNode;
     /** The app's link component (Next's `Link`). */
     linkAs?: LinkComponent;
+    /**
+     * From which window width the filters stay in their column beside the results. `default`: 900 px and above. `wide`:
+     * 1280 px and above — a wide table (DataTable) needs the room; under it the filters are a bar above the results.
+     */
+    railFrom?: "default" | "wide";
 };
 /** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */
-declare function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps): React.JSX.Element;
+declare function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, railFrom, children, ...props }: CataloguePageProps): React.JSX.Element;
 
 export { CataloguePage, type CataloguePageProps };

package/dist/catalogue-page.js

@@ -2,10 +2,10 @@
 import { Page } from "@krizaka/ui/page";
 import { PageHero } from "@krizaka/ui/page-hero";
 import { jsx, jsxs } from "react/jsx-runtime";
-function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }) {
+function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, railFrom = "default", children, ...props }) {
   return /* @__PURE__ */ jsxs("div", { ...props, children: [
     /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, backdrop: "plain", children: search }),
-    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-catalogue-frame", children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue", children: [
+    /* @__PURE__ */ jsx(Page, { className: "kz-tpl-catalogue-frame", children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-catalogue", "data-rail": railFrom, children: [
       /* @__PURE__ */ jsxs("details", { className: "kz-tpl-catalogue-filters", open: true, children: [
         /* @__PURE__ */ jsx("summary", { children: filtersLabel }),
         /* @__PURE__ */ jsx("div", { children: filters })

package/dist/catalogue-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/catalogue-page/catalogue-page.tsx"],"sourcesContent":["// Server-safe. A catalogue or an index (blocks.css `.kz-tpl-catalogue`): the hero, then the filters in a sticky column\n// beside the results — folded into a disclosure above them on a phone — the count of what matches and the sort, and\n// the results (a CardGrid of LinkCards, a list). The filters live in the address: a link per choice, no client state.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** In the hero: a search field. */\n  search?: React.ReactNode;\n  /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */\n  filters: React.ReactNode;\n  /** On a phone, the words that open the filters (`Filters`). */\n  filtersLabel: string;\n  /** What matches, in words (`24 components`). */\n  count?: React.ReactNode;\n  /** On the right of the count: the sort, a view switch. */\n  toolbar?: React.ReactNode;\n  /** The results: a CardGrid, a list, an empty state. */\n  children: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */\nexport function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, children, ...props }: CataloguePageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} backdrop=\"plain\">\n        {search}\n      </PageHero>\n      <Page className=\"kz-tpl-catalogue-frame\">\n        <div className=\"kz-tpl-catalogue\">\n          <details className=\"kz-tpl-catalogue-filters\" open>\n            <summary>{filtersLabel}</summary>\n            <div>{filters}</div>\n          </details>\n          <div className=\"min-w-0\">\n            {(count || toolbar) && (\n              <div className=\"kz-tpl-catalogue-head\">\n                {count && (\n                  <p className=\"kz-tpl-count\" aria-live=\"polite\">\n                    {count}\n                  </p>\n                )}\n                {toolbar}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAgCnB,cAKI,YALJ;AAHC,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,SAAS,QAAQ,UAAU,GAAG,MAAM,GAAuB;AAC3J,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,UAAS,SACxF,kBACH;AAAA,IACA,oBAAC,QAAK,WAAU,0BACd,+BAAC,SAAI,WAAU,oBACb;AAAA,2BAAC,aAAQ,WAAU,4BAA2B,MAAI,MAChD;AAAA,4BAAC,aAAS,wBAAa;AAAA,QACvB,oBAAC,SAAK,mBAAQ;AAAA,SAChB;AAAA,MACA,qBAAC,SAAI,WAAU,WACX;AAAA,kBAAS,YACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,mBACC,oBAAC,OAAE,WAAU,gBAAe,aAAU,UACnC,iBACH;AAAA,UAED;AAAA,WACH;AAAA,QAED;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/catalogue-page/catalogue-page.tsx"],"sourcesContent":["// Server-safe. A catalogue or an index (blocks.css `.kz-tpl-catalogue`): the hero, then the filters in a sticky column\n// beside the results — folded into a disclosure above them on a phone — the count of what matches and the sort, and\n// the results (a CardGrid of LinkCards, a list). The filters live in the address: a link per choice, no client state.\nimport { Page } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nexport type CataloguePageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** In the hero: a search field. */\n  search?: React.ReactNode;\n  /** The filters (groups of ChipLinks, a FilterBar): sticky on a desktop. */\n  filters: React.ReactNode;\n  /** On a phone, the words that open the filters (`Filters`). */\n  filtersLabel: string;\n  /** What matches, in words (`24 components`). */\n  count?: React.ReactNode;\n  /** On the right of the count: the sort, a view switch. */\n  toolbar?: React.ReactNode;\n  /** The results: a CardGrid, a list, an empty state. */\n  children: React.ReactNode;\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n  /**\n   * From which window width the filters stay in their column beside the results. `default`: 900 px and above. `wide`:\n   * 1280 px and above — a wide table (DataTable) needs the room; under it the filters are a bar above the results.\n   */\n  railFrom?: \"default\" | \"wide\";\n};\n\n/** A catalogue: hero, sticky filters beside the results (folded on a phone), the count, the results. */\nexport function CataloguePage({ back, eyebrow, title, lead, search, filters, filtersLabel, count, toolbar, linkAs, railFrom = \"default\", children, ...props }: CataloguePageProps) {\n  return (\n    <div {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} backdrop=\"plain\">\n        {search}\n      </PageHero>\n      <Page className=\"kz-tpl-catalogue-frame\">\n        <div className=\"kz-tpl-catalogue\" data-rail={railFrom}>\n          <details className=\"kz-tpl-catalogue-filters\" open>\n            <summary>{filtersLabel}</summary>\n            <div>{filters}</div>\n          </details>\n          <div className=\"min-w-0\">\n            {(count || toolbar) && (\n              <div className=\"kz-tpl-catalogue-head\">\n                {count && (\n                  <p className=\"kz-tpl-count\" aria-live=\"polite\">\n                    {count}\n                  </p>\n                )}\n                {toolbar}\n              </div>\n            )}\n            {children}\n          </div>\n        </div>\n      </Page>\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AAqCnB,cAKI,YALJ;AAHC,SAAS,cAAc,EAAE,MAAM,SAAS,OAAO,MAAM,QAAQ,SAAS,cAAc,OAAO,SAAS,QAAQ,WAAW,WAAW,UAAU,GAAG,MAAM,GAAuB;AACjL,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,UAAS,SACxF,kBACH;AAAA,IACA,oBAAC,QAAK,WAAU,0BACd,+BAAC,SAAI,WAAU,oBAAmB,aAAW,UAC3C;AAAA,2BAAC,aAAQ,WAAU,4BAA2B,MAAI,MAChD;AAAA,4BAAC,aAAS,wBAAa;AAAA,QACvB,oBAAC,SAAK,mBAAQ;AAAA,SAChB;AAAA,MACA,qBAAC,SAAI,WAAU,WACX;AAAA,kBAAS,YACT,qBAAC,SAAI,WAAU,yBACZ;AAAA,mBACC,oBAAC,OAAE,WAAU,gBAAe,aAAU,UACnC,iBACH;AAAA,UAED;AAAA,WACH;AAAA,QAED;AAAA,SACH;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/data-table.d.ts

@@ -97,6 +97,18 @@ declare const dataTable: tailwind_variants.TVReturnType<{
             td: string;
         };
     };
+    sticky: {
+        true: {};
+        false: {};
+    };
+    striped: {
+        true: {};
+        false: {};
+    };
+    typed: {
+        true: {};
+        false: {};
+    };
 }, {
     root: string;
     toolbar: string;
@@ -157,6 +169,18 @@ declare const dataTable: tailwind_variants.TVReturnType<{
             td: string;
         };
     };
+    sticky: {
+        true: {};
+        false: {};
+    };
+    striped: {
+        true: {};
+        false: {};
+    };
+    typed: {
+        true: {};
+        false: {};
+    };
 }, {
     root: string;
     toolbar: string;
@@ -217,6 +241,18 @@ declare const dataTable: tailwind_variants.TVReturnType<{
             td: string;
         };
     };
+    sticky: {
+        true: {};
+        false: {};
+    };
+    striped: {
+        true: {};
+        false: {};
+    };
+    typed: {
+        true: {};
+        false: {};
+    };
 }, {
     root: string;
     toolbar: string;
@@ -240,6 +276,7 @@ declare const dataTable: tailwind_variants.TVReturnType<{
     skeleton: string;
     footer: string;
 }>>;
+type DataTableColumnType = "title" | "badge" | "number" | "link" | "date" | "status" | "text";
 type SortDirection = "ascending" | "descending";
 type DataTableSort = {
     column: string;
@@ -283,7 +320,7 @@ type DataTableColumn<T> = {
     align?: "start" | "center" | "end";
     /** The width, in px (the starting width when `resizing`). */
     width?: number;
-    /** The narrowest a resized column may be, in px. Default 64. */
+    /** The narrowest the column may be, in px (also what a resized one may shrink to). Default 64. */
     minWidth?: number;
     /** In a card: `title` (the heading of the card), `label` (default: "Header  value"), `hidden`. */
     card?: "title" | "label" | "hidden";
@@ -291,6 +328,29 @@ type DataTableColumn<T> = {
     headerHidden?: boolean;
     /** Listed in `DataTableColumnsMenu`, so a person can hide it. Default `true`. */
     hideable?: boolean;
+    /**
+     * What the column holds, which sizes and aligns it: `title` (the name, takes the slack, truncated, `subtitle` under it in
+     * mono — and the card's heading), `badge` · `status` (as wide as the badge, never stretched), `number` (end-aligned,
+     * tabular), `date`, `link` (truncated, `href`), `text` (wraps, two lines). Untyped: as before.
+     */
+    type?: DataTableColumnType;
+    /**
+     * 1 (default) always in the row; 2 to 7 leave it when the table is narrower than 42 · 48 · 56 · 64 · 72 · 80 rem and
+     * go to the row's detail (a chevron opens it); under 36 rem (cards) 2 stays on the card, 3+ go to its detail.
+     */
+    priority?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /** `title`: the line under the name (an id), in mono. */
+    subtitle?: (row: T) => React.ReactNode;
+    /** `link`: where the value leads. */
+    href?: (row: T) => string | undefined;
+    /** `number`: the unit after the value (muted). */
+    unit?: string;
+    /** The widest the column may be in the table layouts, in px; longer text is clamped, the full value on hover. */
+    maxWidth?: number;
+    /** One line only, truncated (the full value on hover). */
+    nowrap?: boolean;
+    /** Lines of text kept before the ellipsis (default 2 for `text`). */
+    clamp?: 1 | 2 | 3;
 };
 type DataTableLabels = {
     /** The checkbox of the header ("Select all rows"). */
@@ -327,6 +387,8 @@ type DataTableLabels = {
     rangeTo: (header: string) => string;
     /** The button of the columns menu ("Columns"). */
     columns: string;
+    /** The button that opens what left the row: `(name) => "Show more about " + name`. */
+    showMore: (name: string) => string;
     /** The export button ("Export CSV"). */
     export: string;
     /** The words of the pagination under the table. */
@@ -429,8 +491,19 @@ type DataTableProps<T> = {
     empty?: React.ReactNode;
     /** `auto` (default): a table, cards below 36rem of container width. `table` or `cards` to force one. */
     layout?: "auto" | "table" | "cards";
-    /** comfortable (default) · compact. */
+    /** comfortable (default) · compact — one row height per density. */
     density?: "comfortable" | "compact";
+    /** The header stays at the top of the window while the page scrolls (`--dt-top` on the table, or a number of px, clears a fixed bar). */
+    stickyHeader?: boolean | number;
+    /** Zebra rows. */
+    striped?: boolean;
+    /**
+     * The table never scrolls sideways by default once its columns have a `type` or a `priority`: what does not fit goes to
+     * the row's detail, then to cards. `true` opts in to a sideways scroll instead, with fades at the edges.
+     */
+    scroll?: boolean;
+    /** Keeps the first column in view while the table scrolls sideways (with `scroll`). */
+    stickyFirstColumn?: boolean;
     /** Renders only the rows in view, in a scrolling body of `height` px; rows are measured (`estimateRowHeight` is a guess). Forces the table layout. */
     virtualized?: {
         height: number;
@@ -468,7 +541,7 @@ declare function useDataTable<T extends RowData = object>(): Omit<Context, "tabl
     exportRows: () => readonly T[];
 };
 /** A table of records — sort, filters and facets, groups, details, pages, selection, visibility, pinning, resizing — on the client or the server, cards on a phone, windowing for long lists. */
-declare function DataTable<T extends RowData>({ rows, columns, getRowId, caption, showCaption, sort: sortProp, defaultSort, onSortChange, filters: filtersProp, defaultFilters, onFiltersChange, selectable, selected: selectedProp, defaultSelected, onSelectedChange, rowLabel, groupBy: groupByProp, defaultGroupBy, onGroupByChange, columnVisibility: visibilityProp, defaultColumnVisibility, onColumnVisibilityChange, pinning, resizing, getSubRows, renderDetail, expanded: expandedProp, defaultExpanded, onExpandedChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, page: pageProp, defaultPage, onPageChange, manual, rowCount, onStateChange, loading, loadingRows, error, empty, layout, density, virtualized, toolbar, footer, labels: given, className, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T extends RowData>({ rows, columns, getRowId, caption, showCaption, sort: sortProp, defaultSort, onSortChange, filters: filtersProp, defaultFilters, onFiltersChange, selectable, selected: selectedProp, defaultSelected, onSelectedChange, rowLabel, groupBy: groupByProp, defaultGroupBy, onGroupByChange, columnVisibility: visibilityProp, defaultColumnVisibility, onColumnVisibilityChange, pinning, resizing, getSubRows, renderDetail, expanded: expandedProp, defaultExpanded, onExpandedChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, page: pageProp, defaultPage, onPageChange, manual, rowCount, onStateChange, loading, loadingRows, error, empty, layout, density, stickyHeader, striped, scroll, stickyFirstColumn, virtualized, toolbar, footer, labels: given, className, }: DataTableProps<T>): React.JSX.Element;
 
 type DataTableFiltersProps = {
     /** The search's wait after the last key, in ms, before the filter applies (a request, in server mode). Default 250. */

package/dist/data-table.js

@@ -22,7 +22,9 @@ import {
   SearchField
 } from "./chunk-REPTKUJ6.js";
 import "./chunk-ZIXB33X7.js";
-import "./chunk-2FRWNSRO.js";
+import {
+  cn
+} from "./chunk-2FRWNSRO.js";
 import {
   useControllable
 } from "./chunk-FZBWEDQI.js";
@@ -257,7 +259,7 @@ var FILTERS = { text: filterText, facet: filterFacet, range: filterRange };
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var dataTable = tv2({
   slots: {
-    root: "@container w-full overflow-hidden rounded-xl border border-border-default bg-surface-1",
+    root: "@container w-full overflow-clip rounded-xl border border-border-default bg-surface-1",
     toolbar: "border-b border-border-default p-3",
     scroller: "w-full overflow-x-auto",
     table: "w-full border-collapse text-left text-sm text-fg",
@@ -314,10 +316,63 @@ var dataTable = tv2({
     density: {
       comfortable: {},
       compact: { th: "py-2", td: "py-1.5" }
-    }
+    },
+    // The header stays in view while the page scrolls (table layouts only; `--dt-top` clears a fixed bar).
+    sticky: { true: {}, false: {} },
+    // 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: {} }
   },
-  defaultVariants: { layout: "auto", density: "comfortable" }
+  compoundVariants: [
+    { layout: "table", sticky: true, class: { th: "sticky top-(--dt-top,0px) z-[3] bg-surface-2" } },
+    { layout: "auto", sticky: true, class: { th: "@xl:sticky @xl:top-(--dt-top,0px) @xl:z-[3] @xl:bg-surface-2" } },
+    { layout: "table", striped: true, class: { tr: "even:bg-surface-2/40" } },
+    { layout: "auto", striped: true, class: { tr: "@xl:even:bg-surface-2/40" } },
+    // One row height per density (a two-line row — a name and its id — is the tallest).
+    { 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" } }
+  ],
+  defaultVariants: { layout: "auto", density: "comfortable", sticky: false, striped: false, typed: false }
 });
+var NO_CLASS = { 2: "", 3: "", 4: "", 5: "", 6: "", 7: "" };
+var LEAVES = {
+  auto: { 2: "@xl:@max-2xl:hidden!", 3: "@max-3xl:hidden!", 4: "@max-4xl:hidden!", 5: "@max-5xl:hidden!", 6: "@max-6xl:hidden!", 7: "@max-7xl:hidden!" },
+  table: { 2: "@max-2xl:hidden!", 3: "@max-3xl:hidden!", 4: "@max-4xl:hidden!", 5: "@max-5xl:hidden!", 6: "@max-6xl:hidden!", 7: "@max-7xl:hidden!" },
+  cards: { 2: "", 3: "hidden!", 4: "hidden!", 5: "hidden!", 6: "hidden!", 7: "hidden!" }
+};
+var LEAVES_HEAD = {
+  auto: { 2: "@xl:@max-2xl:hidden!", 3: "@xl:@max-3xl:hidden!", 4: "@xl:@max-4xl:hidden!", 5: "@xl:@max-5xl:hidden!", 6: "@xl:@max-6xl:hidden!", 7: "@xl:@max-7xl:hidden!" },
+  table: LEAVES.table,
+  cards: NO_CLASS
+};
+var IN_DETAIL = {
+  auto: { 2: "hidden @xl:@max-2xl:grid", 3: "hidden @max-3xl:grid", 4: "hidden @max-4xl:grid", 5: "hidden @max-5xl:grid", 6: "hidden @max-6xl:grid", 7: "hidden @max-7xl:grid" },
+  table: { 2: "hidden @max-2xl:grid", 3: "hidden @max-3xl:grid", 4: "hidden @max-4xl:grid", 5: "hidden @max-5xl:grid", 6: "hidden @max-6xl:grid", 7: "hidden @max-7xl:grid" },
+  cards: { 2: "hidden", 3: "grid", 4: "grid", 5: "grid", 6: "grid", 7: "grid" }
+};
+var TOGGLE = {
+  auto: { 2: "hidden @xl:@max-2xl:inline-flex", 3: "hidden @max-3xl:inline-flex", 4: "hidden @max-4xl:inline-flex", 5: "hidden @max-5xl:inline-flex", 6: "hidden @max-6xl:inline-flex", 7: "hidden @max-7xl:inline-flex" },
+  table: { 2: "hidden @max-2xl:inline-flex", 3: "hidden @max-3xl:inline-flex", 4: "hidden @max-4xl:inline-flex", 5: "hidden @max-5xl:inline-flex", 6: "hidden @max-6xl:inline-flex", 7: "hidden @max-7xl:inline-flex" },
+  cards: { 2: "hidden", 3: "inline-flex", 4: "inline-flex", 5: "inline-flex", 6: "inline-flex", 7: "inline-flex" }
+};
+var PANEL = {
+  auto: { 2: "hidden @xl:@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" },
+  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 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: "" },
+  status: { auto: "@xl:w-px @xl:whitespace-nowrap", table: "w-px whitespace-nowrap", cards: "" },
+  number: { auto: "@xl:w-px @xl:whitespace-nowrap tabular-nums", table: "w-px whitespace-nowrap tabular-nums", cards: "tabular-nums" },
+  date: { auto: "@xl:w-px @xl:whitespace-nowrap tabular-nums", table: "w-px whitespace-nowrap tabular-nums", cards: "tabular-nums" },
+  link: { auto: "@xl:min-w-28 @xl:max-w-56", table: "min-w-28 max-w-56", cards: "" },
+  text: { auto: "@xl:min-w-36", table: "min-w-36", cards: "" }
+};
+var CLAMP = { 1: "line-clamp-1", 2: "line-clamp-2", 3: "line-clamp-3" };
 var dataTableLabels = {
   selectAll: "Select all rows",
   selectRow: (name) => `Select ${name}`,
@@ -336,6 +391,7 @@ var dataTableLabels = {
   rangeFrom: (header) => `${header} from`,
   rangeTo: (header) => `${header} to`,
   columns: "Columns",
+  showMore: (name) => `Show more about ${name}`,
   export: "Export CSV"
 };
 var DataTableContext = React.createContext(null);
@@ -344,6 +400,10 @@ function useDataTable() {
   if (!context) throw new Error("useDataTable: call it inside a DataTable (its `toolbar`, `footer` or a cell)");
   return context;
 }
+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 NO_RECORD = {};
@@ -396,6 +456,10 @@ function DataTable({
   empty: empty2,
   layout = "auto",
   density,
+  stickyHeader,
+  striped,
+  scroll,
+  stickyFirstColumn,
   virtualized,
   toolbar,
   footer,
@@ -404,7 +468,9 @@ function DataTable({
 }) {
   const labels = { ...dataTableLabels, ...given };
   const effectiveLayout = virtualized ? "table" : layout;
-  const s2 = dataTable({ layout: effectiveLayout, density });
+  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 [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
@@ -437,6 +503,10 @@ function DataTable({
     announce({ pageSize: next, page: 1 });
   };
   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 detailed = Boolean(renderDetail) || inlineToggle;
   const defs = React.useMemo(
     () => columns.map((column) => ({
       id: column.id,
@@ -455,6 +525,8 @@ function DataTable({
     })),
     [columns, resizing]
   );
+  const firstId = columns[0]?.id;
+  const pinned = stickyFirstColumn && firstId && !pinning?.start?.length ? { ...pinning, start: [firstId] } : pinning;
   const pageIndex = Math.max(0, page - 1);
   const table = useTable({
     features,
@@ -462,7 +534,7 @@ function DataTable({
     data: rows,
     getRowId: (row) => getRowId(row),
     getSubRows: getSubRows ? (row) => getSubRows(row) : void 0,
-    getRowCanExpand: renderDetail ? () => true : void 0,
+    getRowCanExpand: detailed ? () => true : void 0,
     state: {
       sorting: sort ? [{ id: sort.column, desc: sort.direction === "descending" }] : [],
       columnFilters: Object.entries(filters).map(([id, value]) => ({ id, value })),
@@ -471,7 +543,7 @@ function DataTable({
       columnVisibility: { ...visibility },
       expanded: { ...expanded },
       pagination: { pageIndex, pageSize: paginated ? pageSize : Math.max(1, rows.length) },
-      columnPinning: { start: [...pinning?.start ?? []], end: [...pinning?.end ?? []] },
+      columnPinning: { start: [...pinned?.start ?? []], end: [...pinned?.end ?? []] },
       columnSizing: sizing,
       ...resizeState ? { columnResizing: resizeState } : {}
     },
@@ -521,7 +593,8 @@ function DataTable({
   const someChosen = selectableIds.some((id) => chosen.has(id));
   const toggleAll = () => setSelected(allChosen ? selected.filter((id) => !selectableIds.includes(id)) : [.../* @__PURE__ */ new Set([...selected, ...selectableIds])]);
   const span = visibleColumns.length + (selectable ? 1 : 0) + (hasExpander ? 1 : 0);
-  const fixedLayout = Boolean(resizing || pinning?.start?.length || pinning?.end?.length);
+  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 fallbacks = useLayoutFallbacks(virtualized?.height ?? 0, virtualized?.estimateRowHeight ?? 44);
@@ -546,11 +619,40 @@ function DataTable({
   };
   const width = (column) => fixedLayout || byId.get(column.id)?.width ? { width: column.getSize() } : void 0;
   const message = (content, alert) => /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.message() }), children: alert ? /* @__PURE__ */ jsx2("div", { role: "alert", children: content }) : content }) });
-  const cardOf = (column) => column?.card === "title" ? "title" : column?.card === "hidden" ? "hidden" : void 0;
+  const cardOf = (column) => column?.card === "title" || column && !column.card && column.type === "title" ? "title" : column?.card === "hidden" ? "hidden" : void 0;
+  const contentOf = (column, original) => {
+    if (column.cell) return column.cell(original);
+    const value = valueOf(column, original);
+    const text = column.type === "date" && value instanceof Date ? value.toISOString().slice(0, 10) : display(value);
+    const cut = TRUNCATE[L];
+    switch (column.type) {
+      case "title": {
+        const sub = column.subtitle?.(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 }),
+          sub ? /* @__PURE__ */ jsx2("span", { className: cn("block font-mono text-xs text-fg-tertiary", cut), children: sub }) : null
+        ] });
+      }
+      case "number":
+        return /* @__PURE__ */ jsxs2("span", { children: [
+          typeof value === "number" ? value.toLocaleString("en") : text,
+          column.unit ? /* @__PURE__ */ jsx2("span", { className: "ms-1 text-fg-secondary", children: column.unit }) : null
+        ] });
+      case "link": {
+        const href = column.href?.(original);
+        return href ? /* @__PURE__ */ jsx2("a", { href, title: text, className: cn("block text-fg-accent underline-offset-2 hover:underline", cut), children: text }) : /* @__PURE__ */ jsx2("span", { className: cn("block", cut), title: text, children: text });
+      }
+      default: {
+        const lines = column.clamp ?? (column.type === "text" ? 2 : void 0);
+        if (!column.nowrap && !lines) return text;
+        return /* @__PURE__ */ jsx2("span", { className: column.nowrap ? cn("block", cut || "truncate") : CLAMP[lines], title: text, children: text });
+      }
+    }
+  };
   const dataCell = (row, cell, first) => {
     const column = byId.get(cell.column.id);
     if (!column) return null;
-    const { style, ...pinned } = pin(cell.column);
+    const { style, ...pinnedProps } = pin(cell.column);
     let content;
     if (row.getIsGrouped()) {
       const leaves = row.getLeafRows().filter((r) => !r.getIsGrouped()).map((r) => r.original);
@@ -561,16 +663,48 @@ function DataTable({
           labels.group(value, leaves.length)
         ] });
       } else content = column.aggregate ? column.aggregate(leaves) : null;
-    } else content = column.cell ? column.cell(row.original) : display(valueOf(column, row.original));
+    } else {
+      content = contentOf(column, row.original);
+      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] }),
+              "aria-expanded": row.getIsExpanded(),
+              "aria-label": labels.showMore(nameOf(row)),
+              onClick: row.getToggleExpandedHandler(),
+              children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1", children: content })
+        ] });
+      }
+    }
+    const level = priorityOf(column);
+    const type = column.type;
+    const cellClass = [
+      ALIGN[column.align ?? (type === "number" ? "end" : "start")],
+      type ? TYPE_CELL[type][L] : "",
+      level > 1 ? LEAVES[L][level] : "",
+      (type || column.priority) && column.minWidth !== void 0 ? MIN[L] : "",
+      column.maxWidth !== void 0 ? MAX[L] : ""
+    ].join(" ");
     return /* @__PURE__ */ jsx2(
       "td",
       {
         role: "cell",
         "data-label": column.header,
         "data-card": row.getIsGrouped() ? cell.column.id === row.groupingColumnId ? "title" : column.aggregate ? void 0 : "hidden" : cardOf(column),
-        ...pinned,
-        className: s2.td({ className: ALIGN[column.align ?? "start"] }),
-        style: { ...style, ...first && row.depth > 0 && !row.getIsGrouped() ? { paddingInlineStart: `${1 + row.depth * 1.25}rem` } : {} },
+        ...pinnedProps,
+        className: s2.td({ className: cellClass }),
+        style: {
+          ...style,
+          ...column.minWidth !== void 0 ? { ["--dt-min"]: `${column.minWidth}px` } : {},
+          ...column.maxWidth !== void 0 ? { ["--dt-max"]: `${column.maxWidth}px` } : {},
+          ...first && row.depth > 0 && !row.getIsGrouped() ? { paddingInlineStart: `${1 + row.depth * 1.25}rem` } : {}
+        },
         children: content
       },
       cell.id
@@ -580,6 +714,7 @@ function DataTable({
     const isChosen = chosen.has(row.id);
     const grouped = row.getIsGrouped();
     const canExpand = !grouped && (renderDetail ? true : row.getCanExpand());
+    const showDetail = detailed && !grouped && row.getIsExpanded() && !virtualized;
     const cells = row.getVisibleCells();
     const main = /* @__PURE__ */ jsxs2(
       "tr",
@@ -596,13 +731,22 @@ function DataTable({
           hasExpander && /* @__PURE__ */ jsx2("td", { role: "cell", className: s2.td({ className: s2.expander() }), children: canExpand ? /* @__PURE__ */ jsx2("button", { type: "button", className: s2.toggle(), "aria-expanded": row.getIsExpanded(), "aria-label": labels.expandRow(nameOf(row)), onClick: row.getToggleExpandedHandler(), children: /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right", className: "h-4 w-4" }) }) : null }),
           cells.map((cell, i) => dataCell(row, cell, i === 0))
         ]
-      },
-      row.id
+      }
     );
-    if (!renderDetail || grouped || !row.getIsExpanded() || virtualized) return main;
+    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: [
       main,
-      /* @__PURE__ */ jsx2("tr", { role: "row", className: s2.tr({ className: "hover:bg-transparent" }), children: /* @__PURE__ */ jsx2("td", { role: "cell", colSpan: span, "data-card": "message", className: s2.td({ className: s2.detail() }), children: renderDetail(row.original) }) })
+      /* @__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) => {
+          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: [
+            /* @__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);
+        }) }) : null,
+        renderDetail ? renderDetail(row.original) : null
+      ] }) })
     ] }, row.id);
   };
   let body;
@@ -646,7 +790,8 @@ function DataTable({
             if (!column) return null;
             const sorted = header.column.getIsSorted();
             const direction = sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0;
-            const { style, ...pinned } = pin(header.column);
+            const { style, ...pinnedProps } = pin(header.column);
+            const level = priorityOf(column);
             return /* @__PURE__ */ jsxs2(
               "th",
               {
@@ -654,9 +799,9 @@ function DataTable({
                 scope: "col",
                 "aria-sort": column.sortable ? direction ?? "none" : void 0,
                 "data-keep": column.sortable ? "" : void 0,
-                ...pinned,
-                className: s2.th({ className: ALIGN[column.align ?? "start"] }),
-                style: { ...style, ...width(header.column) },
+                ...pinnedProps,
+                className: s2.th({ className: cn(ALIGN[column.align ?? (column.type === "number" ? "end" : "start")], level > 1 && LEAVES_HEAD[L][level]) }),
+                style: { ...style, ...typeof stickyHeader === "number" ? { ["--dt-top"]: `${stickyHeader}px` } : {}, ...width(header.column) },
                 children: [
                   column.sortable ? /* @__PURE__ */ jsxs2("button", { type: "button", "aria-pressed": Boolean(direction), className: s2.sortButton(), onClick: () => header.column.toggleSorting(void 0, false), children: [
                     column.header,
@@ -727,7 +872,7 @@ function DataTable({
           children: tableElement
         }
       )
-    ) : /* @__PURE__ */ jsx2("div", { className: s2.scroller(), children: tableElement }),
+    ) : /* @__PURE__ */ jsx2("div", { className: s2.scroller({ className: sideways ? scroll ? SHADOWS : void 0 : "overflow-x-clip" }), children: tableElement }),
     pagination2 || footer ? /* @__PURE__ */ jsxs2("div", { className: s2.footer({ className: "flex flex-col gap-3" }), children: [
       pagination2,
       footer