@eifi1/ui-kit 0.47.0 → 0.48.1

package/dist/components/data-table-column-settings.d.ts

@@ -2,11 +2,16 @@ import type { Dispatch, SetStateAction } from "react";
 import type { DataTableLabels } from "./data-table-labels.js";
 import type { DataTableColumn } from "./data-table.js";
 /** The "Columns" rail and its drawer (`columnSettings`). */
-export declare function ColumnSettingsPanel<T>({ columns, hiddenCols, setHiddenCols, showSettings, setShowSettings, columnsCountLabel, labels, autoSizeAll, }: {
+export declare function ColumnSettingsPanel<T>({ columns, hiddenCols, setHiddenCols, autoHidden, keepColumn, showSettings, setShowSettings, columnsCountLabel, labels, autoSizeAll, }: {
     /** Every column, hidden ones included; the actions column is left out here. */
     columns: DataTableColumn<T>[];
     hiddenCols: Set<string>;
     setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
+    /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and
+     *  marked "hidden for width". */
+    autoHidden: Set<string>;
+    /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */
+    keepColumn: (key: string, on: boolean) => void;
     showSettings: boolean;
     setShowSettings: (open: boolean) => void;
     /** "Columns (n/m)", the rail's text and name. */

package/dist/components/data-table-column-settings.js

@@ -10,6 +10,8 @@ function ColumnSettingsPanel({
   columns,
   hiddenCols,
   setHiddenCols,
+  autoHidden,
+  keepColumn,
   showSettings,
   setShowSettings,
   columnsCountLabel,
@@ -79,7 +81,8 @@ function ColumnSettingsPanel({
           ),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => {
             if (isTableOwnColumn(col.key)) return null;
-            const checked = !hiddenCols.has(col.key);
+            const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);
+            const checked = !hiddenCols.has(col.key) && !forWidth;
             const headerLabel = columnLabel(col);
             return /* @__PURE__ */ jsxs(
               "label",
@@ -93,6 +96,7 @@ function ColumnSettingsPanel({
                       className: "size-3.5 shrink-0",
                       checked,
                       onChange: (e) => {
+                        keepColumn(col.key, e.target.checked);
                         setHiddenCols((s) => {
                           const next = new Set(s);
                           if (e.target.checked) next.delete(col.key);
@@ -102,7 +106,13 @@ function ColumnSettingsPanel({
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: headerLabel })
+                  forWidth ? (
+                    // Under the name, as part of the box's name: "Email, hidden for width".
+                    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate-until-large", children: headerLabel }),
+                      /* @__PURE__ */ jsx("span", { className: "text-micro text-muted", "data-hidden-for-width": "", children: labels.hiddenForWidth })
+                    ] })
+                  ) : /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: headerLabel })
                 ]
               },
               col.key

package/dist/components/data-table-column-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => setShowSettings(true)}\n          aria-label={columnsCountLabel}\n          aria-hidden={showSettings}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      <div\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">\n              {columnsCountLabel}\n            </div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowSettings(false);\n                  // Back to the rail that opened it: the X is about to go inert, and\n                  // focus would fall to <body> with it (BUG-7a).\n                  columnsRail.current?.focus();\n                }}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              const checked = !hiddenCols.has(col.key);\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":";AAuCI,mBAgBM,KAmBA,YAnCN;AAvCJ,SAAS,cAAc;AAEvB,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,eAAe;AAExB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAQrB,SAAS,oBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AAED,QAAM,cAAc,OAAiC,IAAI;AACzD,SACE,iCACE;AAAA,wBAAC,WAAQ,OAAO,mBAAmB,QAAM,MACvC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,MAAM,gBAAgB,IAAI;AAAA,QACnC,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,UAAU,eAAe,KAAK;AAAA,QAC9B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,eAAe,mBAAmB;AAAA,QACpC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,eAAe,WAAW,iBAAiB;AAAA,YAEhE;AAAA;AAAA,QACH;AAAA;AAAA,IACF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAIC,OAAO,CAAC,gBAAgB;AAAA,QACxB,WAAW;AAAA,UACT;AAAA,UACA,eAAe,SAAS;AAAA,QAC1B;AAAA,QAEA,+BAAC,SAAI,WAAU,iDACb;AAAA,+BAAC,SAAI,WAAU,gDACb;AAAA,gCAAC,SAAI,WAAU,0DACZ,6BACH;AAAA,YACA,oBAAC,WAAQ,OAAO,OAAO,OAAO,QAAM,MAClC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AACb,kCAAgB,KAAK;AAGrB,8BAAY,SAAS,MAAM;AAAA,gBAC7B;AAAA,gBACA,cAAY,OAAO;AAAA,gBACnB,WAAU;AAAA,gBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,YACxB,GACF;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cAET,iBAAO;AAAA;AAAA,UACV;AAAA,UACA,oBAAC,SAAI,WAAU,yBACZ,kBAAQ,IAAI,CAAC,QAAQ;AACpB,gBAAI,iBAAiB,IAAI,GAAG,EAAG,QAAO;AACtC,kBAAM,UAAU,CAAC,WAAW,IAAI,IAAI,GAAG;AACvC,kBAAM,cAAc,YAAY,GAAG;AACnC,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAU;AAAA,gBAEV;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV;AAAA,sBACA,UAAU,CAAC,MAAM;AACf,sCAAc,CAAC,MAAM;AACnB,gCAAM,OAAO,IAAI,IAAI,CAAC;AACtB,8BAAI,EAAE,OAAO,QAAS,MAAK,OAAO,IAAI,GAAG;AAAA,8BACpC,MAAK,IAAI,IAAI,GAAG;AACrB,iCAAO;AAAA,wBACT,CAAC;AAAA,sBACH;AAAA;AAAA,kBACF;AAAA,kBAIA,oBAAC,UAAK,WAAU,gCAAgC,uBAAY;AAAA;AAAA;AAAA,cAnBvD,IAAI;AAAA,YAoBX;AAAA,UAEJ,CAAC,GACH;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  autoHidden,\n  keepColumn,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and\n   *  marked \"hidden for width\". */\n  autoHidden: Set<string>;\n  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */\n  keepColumn: (key: string, on: boolean) => void;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => setShowSettings(true)}\n          aria-label={columnsCountLabel}\n          aria-hidden={showSettings}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      <div\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">\n              {columnsCountLabel}\n            </div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowSettings(false);\n                  // Back to the rail that opened it: the X is about to go inert, and\n                  // focus would fall to <body> with it (BUG-7a).\n                  columnsRail.current?.focus();\n                }}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              // Ticked = drawn: a column left out for width is unticked, so the boxes\n              // and \"Columns (8/10)\" say the same (keksdose live #451).\n              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);\n              const checked = !hiddenCols.has(col.key) && !forWidth;\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      keepColumn(col.key, e.target.checked);\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  {forWidth ? (\n                    // Under the name, as part of the box's name: \"Email, hidden for width\".\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"truncate-until-large\">{headerLabel}</span>\n                      <span className=\"text-micro text-muted\" data-hidden-for-width=\"\">\n                        {labels.hiddenForWidth}\n                      </span>\n                    </span>\n                  ) : (\n                    <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                  )}\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-fit.d.ts

@@ -0,0 +1,44 @@
+import type { DataTableColumn } from "./data-table.js";
+/** The least a `grow` column keeps before the table starts leaving columns out: about
+ *  a sentence of a title. In rem, so Large text asks for more. */
+export declare const GROW_MIN_REM = 10;
+/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an
+ *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The
+ *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`
+ *  column is left to leave out: the table then scrolls sideways rather than crushing the
+ *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */
+export declare const GROW_HEAD_CLASS = "w-full max-w-0 min-w-[10rem]";
+export declare const GROW_CELL_CLASS = "w-full max-w-0 truncate-until-large";
+/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column
+ *  squeezes the rest to their min-content width, so any text with a space broke in two
+ *  even at 1920px ("CHF 2'568.38", "Peter Mueller", a date with its time). One line at
+ *  Normal, so a column is never narrower than its text and `fitPriority` measures what
+ *  the columns really need; from Large up the cell wraps as before (§10.17). The headers
+ *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes
+ *  `not-large:whitespace-normal` in its `className`. */
+export declare const GROW_PEER_CELL_CLASS = "not-large:whitespace-nowrap";
+/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */
+export declare function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[];
+/**
+ * Which columns the table leaves out for width, and the Columns panel's "keep it".
+ *
+ * A column the user TICKS in the Columns panel is theirs: it is never left out for width
+ * again while the table is mounted (`keep`): the table makes room by leaving out the next
+ * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and
+ * drops the keep. Keeps are not persisted: on the next visit the table fits again.
+ */
+export declare function useColumnFit<T>({ columns, hiddenCols, headRefs, scroller, enabled, }: {
+    columns: DataTableColumn<T>[];
+    /** The user's hidden columns: never candidates (they are out already). */
+    hiddenCols: Set<string>;
+    headRefs: Map<string, HTMLTableCellElement>;
+    /** The desktop scroller, read after render (it is declared below the call). */
+    scroller: () => HTMLElement | null;
+    /** The wide layout. On a phone (the card list) nothing is left out for width. */
+    enabled: boolean;
+}): {
+    /** The columns left out for width now — empty while off. */
+    autoHidden: Set<string>;
+    /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */
+    keep: (key: string, on: boolean) => void;
+};

package/dist/components/data-table-fit.js

@@ -0,0 +1,103 @@
+"use client";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+const GROW_MIN_REM = 10;
+const GROW_HEAD_CLASS = "w-full max-w-0 min-w-[10rem]";
+const GROW_CELL_CLASS = "w-full max-w-0 truncate-until-large";
+const GROW_PEER_CELL_CLASS = "not-large:whitespace-nowrap";
+function fitHideOrder(columns) {
+  return columns.map((col, index) => ({ col, index })).filter(({ col }) => col.fitPriority != null).sort((a, b) => a.col.fitPriority - b.col.fitPriority || b.index - a.index).map(({ col }) => col);
+}
+function useColumnFit({
+  columns,
+  hiddenCols,
+  headRefs,
+  scroller,
+  enabled
+}) {
+  const [kept, setKept] = useState(() => /* @__PURE__ */ new Set());
+  const [hidden, setHidden] = useState([]);
+  const ownWidth = useRef(/* @__PURE__ */ new Map());
+  const hasFit = columns.some((c) => c.fitPriority != null);
+  const active = enabled && hasFit;
+  const order = useMemo(
+    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),
+    [columns, hiddenCols, kept]
+  );
+  const current = useMemo(
+    () => active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : [],
+    [active, order, hidden]
+  );
+  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;
+  const latest = useRef({ order, current, growKey, active, scroller });
+  useLayoutEffect(() => {
+    latest.current = { order, current, growKey, active, scroller };
+  });
+  const measure = useCallback(() => {
+    const { order: order2, current: current2, growKey: growKey2, active: active2, scroller: scroller2 } = latest.current;
+    const el = scroller2();
+    if (!active2 || !el) return;
+    const table = el.querySelector("table");
+    const avail = el.clientWidth;
+    if (!table || avail <= 0) return;
+    const growTh = growKey2 ? headRefs.get(growKey2) : void 0;
+    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    let need = growTh ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem : table.offsetWidth;
+    if (!growTh && need <= avail + 0.5 && current2.length > 0) {
+      const before = table.style.width;
+      table.style.width = "min-content";
+      need = table.offsetWidth;
+      table.style.width = before;
+    }
+    if (need > avail + 0.5) {
+      const next = [...current2];
+      for (const col of order2) {
+        if (need <= avail + 0.5) break;
+        if (next.includes(col.key)) continue;
+        const w = headRefs.get(col.key)?.offsetWidth ?? 0;
+        ownWidth.current.set(col.key, w);
+        need -= w;
+        next.push(col.key);
+      }
+      if (next.length !== current2.length) setHidden(next);
+      return;
+    }
+    let n = current2.length;
+    while (n > 0) {
+      const w = ownWidth.current.get(current2[n - 1]);
+      if (w == null || need + w > avail + 0.5) break;
+      need += w;
+      n--;
+    }
+    if (n !== current2.length) setHidden(current2.slice(0, n));
+  }, [headRefs]);
+  useLayoutEffect(() => {
+    measure();
+  });
+  useEffect(() => {
+    const el = latest.current.scroller();
+    if (!active || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [active, measure]);
+  const keep = useCallback((key, on) => {
+    setKept((s) => {
+      if (s.has(key) === on) return s;
+      const next = new Set(s);
+      if (on) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  }, []);
+  const autoHidden = useMemo(() => new Set(current), [current]);
+  return { autoHidden, keep };
+}
+export {
+  GROW_CELL_CLASS,
+  GROW_HEAD_CLASS,
+  GROW_MIN_REM,
+  GROW_PEER_CELL_CLASS,
+  fitHideOrder,
+  useColumnFit
+};
+//# sourceMappingURL=data-table-fit.js.map

package/dist/components/data-table-fit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-fit.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's fit to its own width (0.48, keksdose live #451: \"On expanded sidebar for\n// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the\n// width selectively\"). Two column options, both opt-in:\n//\n// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on\n//   its cells: in an auto table layout that is \"the rest of the row\", never its content's\n//   width), so one long title can no longer widen the table.\n// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,\n//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out\n//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),\n//   and brings them back in the reverse order as soon as the table, as it is NOW, has\n//   room for them (its need re-measured, plus the column's own header width from when\n//   it was left out), so narrower content (a filter, another page) counts as much as a\n//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a\n//   narrower window, the Columns drawer and Large text all count the same.\n\n/** The least a `grow` column keeps before the table starts leaving columns out: about\n *  a sentence of a title. In rem, so Large text asks for more. */\nexport const GROW_MIN_REM = 10;\n\n/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an\n *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The\n *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`\n *  column is left to leave out: the table then scrolls sideways rather than crushing the\n *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */\nexport const GROW_HEAD_CLASS = \"w-full max-w-0 min-w-[10rem]\";\nexport const GROW_CELL_CLASS = \"w-full max-w-0 truncate-until-large\";\n\n/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column\n *  squeezes the rest to their min-content width, so any text with a space broke in two\n *  even at 1920px (\"CHF 2'568.38\", \"Peter Mueller\", a date with its time). One line at\n *  Normal, so a column is never narrower than its text and `fitPriority` measures what\n *  the columns really need; from Large up the cell wraps as before (§10.17). The headers\n *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes\n *  `not-large:whitespace-normal` in its `className`. */\nexport const GROW_PEER_CELL_CLASS = \"not-large:whitespace-nowrap\";\n\n// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of\n// badges reads as well stacked, and held to one line it widened the user roster's Status\n// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).\n\n/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */\nexport function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {\n  return columns\n    .map((col, index) => ({ col, index }))\n    .filter(({ col }) => col.fitPriority != null)\n    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)\n    .map(({ col }) => col);\n}\n\n/**\n * Which columns the table leaves out for width, and the Columns panel's \"keep it\".\n *\n * A column the user TICKS in the Columns panel is theirs: it is never left out for width\n * again while the table is mounted (`keep`): the table makes room by leaving out the next\n * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and\n * drops the keep. Keeps are not persisted: on the next visit the table fits again.\n */\nexport function useColumnFit<T>({\n  columns,\n  hiddenCols,\n  headRefs,\n  scroller,\n  enabled,\n}: {\n  columns: DataTableColumn<T>[];\n  /** The user's hidden columns: never candidates (they are out already). */\n  hiddenCols: Set<string>;\n  headRefs: Map<string, HTMLTableCellElement>;\n  /** The desktop scroller, read after render (it is declared below the call). */\n  scroller: () => HTMLElement | null;\n  /** The wide layout. On a phone (the card list) nothing is left out for width. */\n  enabled: boolean;\n}): {\n  /** The columns left out for width now — empty while off. */\n  autoHidden: Set<string>;\n  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */\n  keep: (key: string, on: boolean) => void;\n} {\n  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());\n  const [hidden, setHidden] = useState<string[]>([]);\n  // A column's own header width, written when it is left out: it comes back once the\n  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the\n  // whole table's need at hide time, which went stale when the content narrowed).\n  const ownWidth = useRef(new Map<string, number>());\n\n  const hasFit = columns.some((c) => c.fitPriority != null);\n  const active = enabled && hasFit;\n  const order = useMemo(\n    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),\n    [columns, hiddenCols, kept],\n  );\n  // Only the candidates still in play, in hide order — a column the user hid or kept\n  // since, or one the app dropped, is no longer \"hidden for width\".\n  const current = useMemo(\n    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),\n    [active, order, hidden],\n  );\n  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;\n\n  // What `measure` reads, refreshed after each render (before the measure below runs):\n  // the ResizeObserver's callback is set up once and must see the current columns.\n  const latest = useRef({ order, current, growKey, active, scroller });\n  useLayoutEffect(() => {\n    latest.current = { order, current, growKey, active, scroller };\n  });\n\n  const measure = useCallback(() => {\n    const { order, current, growKey, active, scroller } = latest.current;\n    const el = scroller();\n    if (!active || !el) return;\n    const table = el.querySelector(\"table\");\n    const avail = el.clientWidth;\n    // Not laid out (display:none, jsdom): nothing to fit to.\n    if (!table || avail <= 0) return;\n    const growTh = growKey ? headRefs.get(growKey) : undefined;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    let need = growTh\n      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem\n      : table.offsetWidth;\n    if (!growTh && need <= avail + 0.5 && current.length > 0) {\n      // A `w-full` table is at least the scroller's width, which says nothing about how\n      // much room its content leaves: probe its content's width (what it takes once it\n      // overflows) for the bring-back below. Read and put back in one layout pass.\n      const before = table.style.width;\n      table.style.width = \"min-content\";\n      need = table.offsetWidth;\n      table.style.width = before;\n    }\n    if (need > avail + 0.5) {\n      // Leave out, in order, until the rest fits: each column saves its header's width\n      // (the others are at their content's width while a `grow` column takes the rest).\n      const next = [...current];\n      for (const col of order) {\n        if (need <= avail + 0.5) break;\n        if (next.includes(col.key)) continue;\n        const w = headRefs.get(col.key)?.offsetWidth ?? 0;\n        ownWidth.current.set(col.key, w);\n        need -= w;\n        next.push(col.key);\n      }\n      if (next.length !== current.length) setHidden(next);\n      return;\n    }\n    // Bring back, the last left out first, while the table as it is now has room for\n    // them. Should the column have grown since (wider content), the next measure leaves\n    // it out again before paint and records its new width, so it cannot flicker.\n    let n = current.length;\n    while (n > 0) {\n      const w = ownWidth.current.get(current[n - 1]);\n      if (w == null || need + w > avail + 0.5) break;\n      need += w;\n      n--;\n    }\n    if (n !== current.length) setHidden(current.slice(0, n));\n  }, [headRefs]);\n\n  // After every render: rows, a filter or a page can widen a column as much as a resize.\n  // Before paint, so a column the table cannot hold is never drawn first.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useEffect(() => {\n    const el = latest.current.scroller();\n    if (!active || !el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => measure());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [active, measure]);\n\n  const keep = useCallback((key: string, on: boolean) => {\n    setKept((s) => {\n      if (s.has(key) === on) return s;\n      const next = new Set(s);\n      if (on) next.add(key);\n      else next.delete(key);\n      return next;\n    });\n  }, []);\n\n  const autoHidden = useMemo(() => new Set(current), [current]);\n  return { autoHidden, keep };\n}\n"],"mappings":"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","names":["order","current","growKey","active","scroller"]}

package/dist/components/data-table-groups.d.ts

@@ -0,0 +1,95 @@
+import type { ReactNode, RefObject } from "react";
+/**
+ * One level of {@link DataTableProps.groupBy} (0.48, keksdose dev #605): the rows are cut
+ * into consecutive runs of equal `key` — the rows must already be ordered so equal keys
+ * are contiguous, as for `mobileGroupBy` — and each run is headed by a full-width band.
+ *
+ * The same object drives the phone: `mobileGroupBy` takes a level too, so
+ * `groupBy={[period, day]} mobileGroupBy={period}` is one definition for both layouts.
+ */
+export interface DataTableGroupBy<T> {
+    /** The group a row belongs to. */
+    key: (row: T) => string;
+    /** The band's label. Default: the key itself. */
+    label?: (key: string, rows: T[]) => ReactNode;
+    /**
+     * The band's end slot — a count, a total ("176 · +8'782.30 · −3'200.10"). `rows` are
+     * the group's rows the table holds; an app whose total covers rows not yet loaded
+     * looks it up by `key` instead.
+     */
+    end?: (key: string, rows: T[]) => ReactNode;
+}
+/**
+ * {@link DataTableProps.loadMore} (0.48, keksdose dev #605): a footer in place of the
+ * pager that loads the next slice of rows — on its own as it scrolls into view (an
+ * IntersectionObserver), and through a button that is always there for the keyboard and
+ * the screen reader. The owner appends the rows; the table renders every row it is given.
+ */
+export interface DataTableLoadMore {
+    /** Whether there is anything left to load. False draws the end state. */
+    hasMore: boolean;
+    /** Load the next slice. Called at most once per row count while `loading` is false. */
+    onLoadMore: () => void;
+    /** A load is in flight: the button says "Loading…" and ignores presses. */
+    loading?: boolean;
+    /** The button's words — what it loads ("Load August 2026"). Default: the kit's "Load more". */
+    label?: ReactNode;
+    /** What the footer says once `hasMore` is false. Default: the kit's "All rows loaded";
+     *  `null` draws nothing. */
+    endLabel?: ReactNode;
+    /** Load as the footer scrolls into view. Default true; false leaves only the button. */
+    auto?: boolean;
+}
+/** A run of rows under one band; `start` is its first row's index in the slice. */
+export interface RowGroup<T> {
+    key: string;
+    rows: T[];
+    start: number;
+    /** The second level's runs inside this one, or null with one level. */
+    children: RowGroup<T>[] | null;
+}
+/** Consecutive runs by `level.key`, nested once for a second level. */
+export declare function groupRows<T>(rows: T[], levels: readonly DataTableGroupBy<T>[], offset?: number): RowGroup<T>[];
+/** `groupBy` as a list of at most two levels. */
+export declare function groupLevels<T>(groupBy: DataTableGroupBy<T> | readonly [DataTableGroupBy<T>, DataTableGroupBy<T>?] | undefined): DataTableGroupBy<T>[];
+/**
+ * The bands' sticky offsets: the first level under the header (and under a sticky
+ * `leadingRow`), the second under the first. Measured — the header grows at Large text,
+ * a band's end slot can wrap — and followed with a ResizeObserver.
+ */
+export declare function useGroupBandTops(tableRef: RefObject<HTMLTableElement | null>, enabled: boolean, signature: string): [number, number];
+/**
+ * A band row. A `<th scope="rowgroup">` spanning the row — the header of the `<tbody>` it
+ * opens, which a screen reader announces as the reader enters the group — and sticky on
+ * the cell, not the `<tr>`, as the header's and the leading row's are. Opaque, under the
+ * sticky leading row's `z-[5]`: the first level `z-[4]` over the second's `z-[3]`, so a
+ * period arriving from below covers the day still pinned under the one before. The line
+ * over it is the cell's own `::before`, which moves with the stuck cell.
+ */
+export declare function DataTableGroupBand({ level, colSpan, top, compact, label, end, }: {
+    level: 1 | 2;
+    colSpan: number;
+    top: number;
+    compact: boolean;
+    label: ReactNode;
+    end: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The load-more footer. Observed against the viewport (an implicit root sees through the
+ * clipping scroller, so it works in a bounded body, under `fillHeight`, and in a page that
+ * scrolls), and guarded: one call per row count, none while `loading`, so an observer
+ * that reports twice — or a footer still in view while the owner sets `loading` — loads
+ * once. When the rows arrive and the footer is still in view (a short slice), it loads
+ * again, until the scroller is full.
+ */
+export declare function DataTableLoadMoreFooter({ loadMore, rowCount, labels, compact, as: Tag, }: {
+    loadMore: DataTableLoadMore;
+    rowCount: number;
+    labels: {
+        loadMore: string;
+        allLoaded: string;
+        loading: string;
+    };
+    compact: boolean;
+    as?: "div" | "li";
+}): import("react").JSX.Element;

package/dist/components/data-table-groups.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Spinner } from "./spinner.js";
+function groupRows(rows, levels, offset = 0) {
+  const [level, ...rest] = levels;
+  if (!level) return [];
+  const out = [];
+  rows.forEach((row, i) => {
+    const key = level.key(row);
+    const last = out[out.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else out.push({ key, rows: [row], start: offset + i, children: null });
+  });
+  if (rest.length > 0) for (const g of out) g.children = groupRows(g.rows, rest.slice(0, 1), g.start);
+  return out;
+}
+function groupLevels(groupBy) {
+  if (!groupBy) return [];
+  const list = "key" in groupBy ? [groupBy] : groupBy;
+  return list.filter((l) => !!l).slice(0, 2);
+}
+function useGroupBandTops(tableRef, enabled, signature) {
+  const [tops, setTops] = useState([0, 0]);
+  useLayoutEffect(() => {
+    const table = tableRef.current;
+    if (!enabled || !table) return;
+    const parts = [
+      table.tHead,
+      table.querySelector("[data-leading-row='sticky']"),
+      table.querySelector("th[data-group-band='1']")
+    ];
+    const measure = () => {
+      const [head, lead, band] = parts.map((el) => el ? el.getBoundingClientRect().height : 0);
+      setTops((prev) => prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band]);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    for (const el of parts) if (el) observer.observe(el);
+    return () => observer.disconnect();
+  }, [tableRef, enabled, signature]);
+  return tops;
+}
+function DataTableGroupBand({
+  level,
+  colSpan,
+  top,
+  compact,
+  label,
+  end
+}) {
+  return /* @__PURE__ */ jsx("tr", { "data-group-row": level, children: /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "rowgroup",
+      colSpan,
+      "data-group-band": level,
+      style: { top },
+      className: cn(
+        "sticky p-0 text-start align-middle",
+        "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']",
+        level === 1 ? "z-[4] bg-surface-2 font-semibold text-primary" : "z-[3] bg-surface font-medium text-secondary",
+        level === 1 ? compact ? "text-xs" : "text-sm" : "text-xs"
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-wrap items-baseline justify-between gap-x-3",
+            compact ? "px-2 py-1" : level === 1 ? "px-3 py-2" : "px-3 py-1.5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0", children: label }),
+            end != null && end !== false && /* @__PURE__ */ jsx("span", { className: "ms-auto tabular-nums", children: end })
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+function DataTableLoadMoreFooter({
+  loadMore,
+  rowCount,
+  labels,
+  compact,
+  as: Tag = "div"
+}) {
+  const { hasMore, onLoadMore, loading = false, auto = true, label, endLabel } = loadMore;
+  const rootRef = useRef(null);
+  const endRef = useRef(null);
+  const firedAt = useRef(null);
+  const buttonFocused = useRef(false);
+  const latest = useRef({ onLoadMore, loading, rowCount });
+  useEffect(() => {
+    latest.current = { onLoadMore, loading, rowCount };
+  });
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!auto || !hasMore || loading || !el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        const now = latest.current;
+        if (!entries.some((e) => e.isIntersecting) || now.loading || firedAt.current === now.rowCount) return;
+        firedAt.current = now.rowCount;
+        now.onLoadMore();
+      },
+      { rootMargin: "200px" }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [auto, hasMore, loading, rowCount]);
+  useEffect(() => {
+    if (!hasMore && buttonFocused.current) {
+      buttonFocused.current = false;
+      endRef.current?.focus();
+    }
+  }, [hasMore]);
+  const end = endLabel === void 0 ? labels.allLoaded : endLabel;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: (el) => {
+        rootRef.current = el;
+      },
+      "data-table-load-more": "",
+      className: cn(
+        "sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-col items-center border-t border-subtle text-center",
+        compact ? "px-2 py-2" : "px-3 py-3"
+      ),
+      children: [
+        hasMore ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            "aria-busy": loading || void 0,
+            onFocus: () => buttonFocused.current = true,
+            onBlur: () => buttonFocused.current = false,
+            onClick: () => {
+              if (loading) return;
+              firedAt.current = rowCount;
+              onLoadMore();
+            },
+            children: loading ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4" }),
+              /* @__PURE__ */ jsx("bdi", { children: labels.loading })
+            ] }) : label ?? labels.loadMore
+          }
+        ) : end != null && end !== false ? /* @__PURE__ */ jsx("p", { ref: endRef, tabIndex: -1, className: "text-xs text-muted outline-none", children: end }) : null,
+        /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: loading ? labels.loading : "" })
+      ]
+    }
+  );
+}
+export {
+  DataTableGroupBand,
+  DataTableLoadMoreFooter,
+  groupLevels,
+  groupRows,
+  useGroupBandTops
+};
+//# sourceMappingURL=data-table-groups.js.map

package/dist/components/data-table-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-groups.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\n/**\n * One level of {@link DataTableProps.groupBy} (0.48, keksdose dev #605): the rows are cut\n * into consecutive runs of equal `key` — the rows must already be ordered so equal keys\n * are contiguous, as for `mobileGroupBy` — and each run is headed by a full-width band.\n *\n * The same object drives the phone: `mobileGroupBy` takes a level too, so\n * `groupBy={[period, day]} mobileGroupBy={period}` is one definition for both layouts.\n */\nexport interface DataTableGroupBy<T> {\n  /** The group a row belongs to. */\n  key: (row: T) => string;\n  /** The band's label. Default: the key itself. */\n  label?: (key: string, rows: T[]) => ReactNode;\n  /**\n   * The band's end slot — a count, a total (\"176 · +8'782.30 · −3'200.10\"). `rows` are\n   * the group's rows the table holds; an app whose total covers rows not yet loaded\n   * looks it up by `key` instead.\n   */\n  end?: (key: string, rows: T[]) => ReactNode;\n}\n\n/**\n * {@link DataTableProps.loadMore} (0.48, keksdose dev #605): a footer in place of the\n * pager that loads the next slice of rows — on its own as it scrolls into view (an\n * IntersectionObserver), and through a button that is always there for the keyboard and\n * the screen reader. The owner appends the rows; the table renders every row it is given.\n */\nexport interface DataTableLoadMore {\n  /** Whether there is anything left to load. False draws the end state. */\n  hasMore: boolean;\n  /** Load the next slice. Called at most once per row count while `loading` is false. */\n  onLoadMore: () => void;\n  /** A load is in flight: the button says \"Loading…\" and ignores presses. */\n  loading?: boolean;\n  /** The button's words — what it loads (\"Load August 2026\"). Default: the kit's \"Load more\". */\n  label?: ReactNode;\n  /** What the footer says once `hasMore` is false. Default: the kit's \"All rows loaded\";\n   *  `null` draws nothing. */\n  endLabel?: ReactNode;\n  /** Load as the footer scrolls into view. Default true; false leaves only the button. */\n  auto?: boolean;\n}\n\n/** A run of rows under one band; `start` is its first row's index in the slice. */\nexport interface RowGroup<T> {\n  key: string;\n  rows: T[];\n  start: number;\n  /** The second level's runs inside this one, or null with one level. */\n  children: RowGroup<T>[] | null;\n}\n\n/** Consecutive runs by `level.key`, nested once for a second level. */\nexport function groupRows<T>(rows: T[], levels: readonly DataTableGroupBy<T>[], offset = 0): RowGroup<T>[] {\n  const [level, ...rest] = levels;\n  if (!level) return [];\n  const out: RowGroup<T>[] = [];\n  rows.forEach((row, i) => {\n    const key = level.key(row);\n    const last = out[out.length - 1];\n    if (last && last.key === key) last.rows.push(row);\n    else out.push({ key, rows: [row], start: offset + i, children: null });\n  });\n  if (rest.length > 0) for (const g of out) g.children = groupRows(g.rows, rest.slice(0, 1), g.start);\n  return out;\n}\n\n/** `groupBy` as a list of at most two levels. */\nexport function groupLevels<T>(\n  groupBy: DataTableGroupBy<T> | readonly [DataTableGroupBy<T>, DataTableGroupBy<T>?] | undefined,\n): DataTableGroupBy<T>[] {\n  if (!groupBy) return [];\n  const list = \"key\" in groupBy ? [groupBy] : (groupBy as readonly (DataTableGroupBy<T> | undefined)[]);\n  return list.filter((l): l is DataTableGroupBy<T> => !!l).slice(0, 2);\n}\n\n/**\n * The bands' sticky offsets: the first level under the header (and under a sticky\n * `leadingRow`), the second under the first. Measured — the header grows at Large text,\n * a band's end slot can wrap — and followed with a ResizeObserver.\n */\nexport function useGroupBandTops(\n  tableRef: RefObject<HTMLTableElement | null>,\n  enabled: boolean,\n  signature: string,\n): [number, number] {\n  const [tops, setTops] = useState<[number, number]>([0, 0]);\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!enabled || !table) return;\n    const parts = [\n      table.tHead,\n      table.querySelector<HTMLElement>(\"[data-leading-row='sticky']\"),\n      table.querySelector<HTMLElement>(\"th[data-group-band='1']\"),\n    ];\n    const measure = () => {\n      const [head, lead, band] = parts.map((el) => (el ? el.getBoundingClientRect().height : 0));\n      setTops((prev) => (prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band]));\n    };\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    for (const el of parts) if (el) observer.observe(el);\n    return () => observer.disconnect();\n  }, [tableRef, enabled, signature]);\n  return tops;\n}\n\n/**\n * A band row. A `<th scope=\"rowgroup\">` spanning the row — the header of the `<tbody>` it\n * opens, which a screen reader announces as the reader enters the group — and sticky on\n * the cell, not the `<tr>`, as the header's and the leading row's are. Opaque, under the\n * sticky leading row's `z-[5]`: the first level `z-[4]` over the second's `z-[3]`, so a\n * period arriving from below covers the day still pinned under the one before. The line\n * over it is the cell's own `::before`, which moves with the stuck cell.\n */\nexport function DataTableGroupBand({\n  level,\n  colSpan,\n  top,\n  compact,\n  label,\n  end,\n}: {\n  level: 1 | 2;\n  colSpan: number;\n  top: number;\n  compact: boolean;\n  label: ReactNode;\n  end: ReactNode;\n}) {\n  return (\n    <tr data-group-row={level}>\n      <th\n        scope=\"rowgroup\"\n        colSpan={colSpan}\n        data-group-band={level}\n        style={{ top }}\n        className={cn(\n          \"sticky p-0 text-start align-middle\",\n          \"before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:z-[1] before:h-px before:bg-[var(--border)] before:content-['']\",\n          level === 1 ? \"z-[4] bg-surface-2 font-semibold text-primary\" : \"z-[3] bg-surface font-medium text-secondary\",\n          level === 1 ? (compact ? \"text-xs\" : \"text-sm\") : \"text-xs\",\n        )}\n      >\n        {/* Pinned to what the scroller shows, as the expansion row's panel is: the end\n            slot stays at the visible end of a table wider than its scroller. */}\n        <div className=\"w-0 min-w-full\">\n          <div\n            className={cn(\n              \"sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-wrap items-baseline justify-between gap-x-3\",\n              compact ? \"px-2 py-1\" : level === 1 ? \"px-3 py-2\" : \"px-3 py-1.5\",\n            )}\n          >\n            <span className=\"min-w-0\">{label}</span>\n            {end != null && end !== false && <span className=\"ms-auto tabular-nums\">{end}</span>}\n          </div>\n        </div>\n      </th>\n    </tr>\n  );\n}\n\n/**\n * The load-more footer. Observed against the viewport (an implicit root sees through the\n * clipping scroller, so it works in a bounded body, under `fillHeight`, and in a page that\n * scrolls), and guarded: one call per row count, none while `loading`, so an observer\n * that reports twice — or a footer still in view while the owner sets `loading` — loads\n * once. When the rows arrive and the footer is still in view (a short slice), it loads\n * again, until the scroller is full.\n */\nexport function DataTableLoadMoreFooter({\n  loadMore,\n  rowCount,\n  labels,\n  compact,\n  as: Tag = \"div\",\n}: {\n  loadMore: DataTableLoadMore;\n  rowCount: number;\n  labels: { loadMore: string; allLoaded: string; loading: string };\n  compact: boolean;\n  as?: \"div\" | \"li\";\n}) {\n  const { hasMore, onLoadMore, loading = false, auto = true, label, endLabel } = loadMore;\n  const rootRef = useRef<HTMLElement | null>(null);\n  const endRef = useRef<HTMLParagraphElement | null>(null);\n  const firedAt = useRef<number | null>(null);\n  const buttonFocused = useRef(false);\n  // What the observer's callback acts on: the latest props, not the ones it was made with.\n  const latest = useRef({ onLoadMore, loading, rowCount });\n  useEffect(() => {\n    latest.current = { onLoadMore, loading, rowCount };\n  });\n\n  // A fresh observer whenever the rows or the in-flight flag change: its first report is\n  // the footer's position AFTER the new rows are laid out. Acting on a remembered \"in\n  // view\" instead fired a second load the moment the rows arrived, while the footer was\n  // still where the old last row had been (headless Chromium caught it).\n  useEffect(() => {\n    const el = rootRef.current;\n    if (!auto || !hasMore || loading || !el || typeof IntersectionObserver === \"undefined\") return;\n    const io = new IntersectionObserver(\n      (entries) => {\n        const now = latest.current;\n        if (!entries.some((e) => e.isIntersecting) || now.loading || firedAt.current === now.rowCount) return;\n        firedAt.current = now.rowCount;\n        now.onLoadMore();\n      },\n      { rootMargin: \"200px\" },\n    );\n    io.observe(el);\n    return () => io.disconnect();\n  }, [auto, hasMore, loading, rowCount]);\n\n  // A focused button that goes away (nothing left) hands its focus to the end line.\n  useEffect(() => {\n    if (!hasMore && buttonFocused.current) {\n      buttonFocused.current = false;\n      endRef.current?.focus();\n    }\n  }, [hasMore]);\n\n  const end = endLabel === undefined ? labels.allLoaded : endLabel;\n  return (\n    <Tag\n      ref={(el: HTMLElement | null) => {\n        rootRef.current = el;\n      }}\n      data-table-load-more=\"\"\n      className={cn(\n        \"sticky start-0 flex w-[var(--dt-visible-w,100%)] max-w-full flex-col items-center border-t border-subtle text-center\",\n        compact ? \"px-2 py-2\" : \"px-3 py-3\",\n      )}\n    >\n      {hasMore ? (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          aria-busy={loading || undefined}\n          onFocus={() => (buttonFocused.current = true)}\n          onBlur={() => (buttonFocused.current = false)}\n          onClick={() => {\n            if (loading) return;\n            firedAt.current = rowCount;\n            onLoadMore();\n          }}\n        >\n          {loading ? (\n            <span className=\"inline-flex items-center gap-2\">\n              <Spinner label={null} className=\"size-4\" />\n              <bdi>{labels.loading}</bdi>\n            </span>\n          ) : (\n            (label ?? labels.loadMore)\n          )}\n        </Button>\n      ) : end != null && end !== false ? (\n        <p ref={endRef} tabIndex={-1} className=\"text-xs text-muted outline-none\">\n          {end}\n        </p>\n      ) : null}\n      {/* Mounted throughout, so a screen reader hears the load start. */}\n      <span role=\"status\" className=\"sr-only\">\n        {loading ? labels.loading : \"\"}\n      </span>\n    </Tag>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-head.js

@@ -9,6 +9,7 @@ import { Popover } from "./popover.js";
 import { Tooltip } from "./tooltip.js";
 import { isTableOwnColumn } from "./data-table-row-actions.js";
 import { columnLabel, logicalAlign, splitCellProps } from "./data-table-shared.js";
+import { GROW_HEAD_CLASS } from "./data-table-fit.js";
 const END_ALIGN = /(^|\s)text-end(?=\s|$)/;
 function DataTableHead({
   visibleColumns,
@@ -90,6 +91,7 @@ function DataTableHead({
             // Each <th> carries its own bg so the row doesn't render
             // transparent over the data rows underneath.
             "sticky top-0 z-10 bg-surface-2 backdrop-blur-sm",
+            col.grow && GROW_HEAD_CLASS,
             logicalAlign(ownHead.className),
             headClass
           )
@@ -157,7 +159,7 @@ function DataTableHead({
             ]
           }
         ),
-        resizable && !isTableOwnColumn(col.key) && /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
+        resizable && !isTableOwnColumn(col.key) && !col.grow && /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a
            pointer-only drag handle for a visual preference (column width); it is
            deliberately not a tab stop, and no content or action depends on it. */
         /* @__PURE__ */ jsx(