@zyncat/ui 0.11.0 → 0.12.0

package/dist/table.js

@@ -1,13 +1,14 @@
 'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
-import { Motion } from './chunk-2QWJ6FAX.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import { Icon } from './chunk-3SBCBYB7.js';
-import { Odometer } from './chunk-CONSWNIV.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import { Button } from './chunk-2F5PITAO.js';
-import { Checkbox } from './chunk-QDK66S4G.js';
-import './chunk-NNXJCLTV.js';
+import { activationProps } from './chunk-JY6A2ZJZ.js';
+import { Motion } from './chunk-5PZ43DCG.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import { Icon } from './chunk-EAI4POPB.js';
+import { DigitStrip } from './chunk-Y2YA7QRF.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { Button } from './chunk-HY5MPISE.js';
+import { Checkbox } from './chunk-I45AU6KH.js';
+import './chunk-RJFGWJ4W.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './table.css';
 import { useState, useRef, useMemo } from 'react';
@@ -38,6 +39,7 @@ function Table({
   empty,
   footer,
   onRowClick,
+  activateOn = "pointerdown",
   className = "",
   htmlProps
 }) {
@@ -107,6 +109,7 @@ function Table({
         else w.removeAttribute(attr);
       };
       set("data-scrolled", el.scrollTop > 0);
+      set("data-y-scroll", el.scrollHeight > el.clientHeight);
       set("data-x-back", edges.left);
       set("data-x-more", edges.right);
     },
@@ -160,7 +163,7 @@ function Table({
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "tbl__bulkCount", "aria-live": "polite", "aria-atomic": "true", children: [
-            /* @__PURE__ */ jsx(Odometer, { value: bulkOpen ? selected.size : lastCountRef.current }),
+            /* @__PURE__ */ jsx(DigitStrip, { value: bulkOpen ? selected.size : lastCountRef.current }),
             /* @__PURE__ */ jsx("span", { children: " selected" })
           ] }),
           /* @__PURE__ */ jsx("span", { className: "tbl__bulkSpacer" }),
@@ -192,17 +195,25 @@ function Table({
                 scope: "col",
                 className: cls.join(" "),
                 "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : void 0,
-                children: c.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "tbl__sort", onClick: () => cycleSort(c), children: [
-                  /* @__PURE__ */ jsx("span", { className: "tbl__sortLbl", children: c.label }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: "tbl__sortIcon" + (active ? " is-on" : "") + (active && sort.dir === "desc" ? " is-desc" : ""),
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: "sm" })
-                    }
-                  )
-                ] }) : c.label != null ? /* @__PURE__ */ jsx("span", { className: "tbl__hLbl", children: c.label }) : null
+                children: c.sortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "tbl__sort",
+                    ...activationProps(() => cycleSort(c), { on: activateOn }),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "tbl__sortLbl", children: c.label }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "tbl__sortIcon" + (active ? " is-on" : "") + (active && sort.dir === "desc" ? " is-desc" : ""),
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up", size: "sm" })
+                        }
+                      )
+                    ]
+                  }
+                ) : c.label != null ? /* @__PURE__ */ jsx("span", { className: "tbl__hLbl", children: c.label }) : null
               },
               c.key
             );

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/table/Table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["'use client';\n\nimport './table.css';\nimport { useMemo, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';\nimport { Motion } from '../../../motion/element';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport type { DataAttributes } from '../../../dom-props';\nimport { Button } from '../../primitives/button/Button';\nimport { Checkbox } from '../../primitives/checkbox/Checkbox';\nimport { Odometer } from '../../primitives/badge/odometer';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { cx } from '../../internal/utils/cx';\n\nconst ROW_FLIP = { timing: UIMotion.t.layout };\n\nexport type TableAlign = 'start' | 'end' | 'center';\nexport type TableHideBelow = 'sm' | 'md';\n\nexport interface TableColumn<Row = any> {\n  /** Unique column id; also the default data accessor (row[key]). */\n  key: string;\n  /** Header cell content; omit for a header-less column (e.g. an actions column). */\n  label?: ReactNode;\n  /** Cell + header alignment. Default 'start'. */\n  align?: TableAlign;\n  /** Mono + tabular numerals (timestamps, counts, IDs - section E). */\n  mono?: boolean;\n  /** Identity emphasis: strong text, medium weight. */\n  strong?: boolean;\n  /** The one greedy column - absorbs slack width. Others size to content. */\n  grow?: boolean;\n  /** Header becomes a sort control. Sort is local; asc - desc, no third state. */\n  sortable?: boolean;\n  /** Sort accessor: a row property name, or a function. Defaults to row[key]. */\n  sortBy?: string | ((row: Row) => unknown);\n  /** Collapse this column below a container breakpoint (30rem / 42rem). */\n  hideBelow?: TableHideBelow;\n  /** Custom cell renderer. Defaults to row[key]. */\n  render?: (row: Row) => ReactNode;\n}\n\nexport interface TableSort {\n  /** `key` of the column being sorted by. */\n  key: string;\n  /** Sort direction - `asc` or `desc`. */\n  dir: 'asc' | 'desc';\n}\n\nexport interface TableProps<Row = any> {\n  /** Column defs, rendered left to right. */\n  columns: TableColumn<Row>[];\n  /** The row data; sorted locally per the active sort before render. */\n  rows: Row[];\n  /** Row identity property. Default 'id'. Must be unique and stable. */\n  rowKey?: string;\n  /** Accessible name for the <table>. */\n  ariaLabel?: string;\n\n  /** Checkbox column + bulk bar. Selection is a Set of row keys, owned here. */\n  selectable?: boolean;\n  /** Fires with the selected row keys after every selection change. */\n  onSelectionChange?: (keys: Array<string | number>) => void;\n  /** Rendered in the bulk bar between the count and the built-in Clear. */\n  bulkActions?: (keys: Array<string | number>, clear: () => void) => ReactNode;\n  /** Per-row checkbox aria-label. Default 'Select row'. */\n  selectionLabel?: (row: Row) => string;\n\n  /** Initial sort; sorting stays local and uncontrolled after that. */\n  defaultSort?: TableSort | null;\n  /** Notification only - fires after the local sort updates. */\n  onSortChange?: (sort: TableSort) => void;\n\n  /** Row rhythm. Default 'cozy' (46px rows); 'compact' is 38px. */\n  density?: 'cozy' | 'compact';\n  /** Pin checkbox + first column under horizontal overflow. Default true. */\n  pinFirst?: boolean;\n\n  /** Rows recede and go inert (list-fetch convention). */\n  loading?: boolean;\n  /** Shown when rows is empty and not loading. Default 'Nothing to show'. */\n  empty?: ReactNode;\n  /** Footer strip - pagination, summaries. */\n  footer?: ReactNode;\n\n  /** Makes rows clickable (checkbox cell excluded). */\n  onRowClick?: (row: Row) => void;\n  /** Size the table here - the internal scroller absorbs the constraint. */\n  className?: string;\n  /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the table wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & DataAttributes;\n}\n\nfunction tblCompare(a: unknown, b: unknown) {\n  if (a == null && b == null) return 0;\n  if (a == null) return 1;\n  if (b == null) return -1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });\n}\n\nexport function Table<Row = any>({\n  columns = [],\n  rows = [],\n  rowKey = 'id',\n  ariaLabel,\n  selectable = false,\n  onSelectionChange,\n  bulkActions,\n  selectionLabel,\n  defaultSort = null,\n  onSortChange,\n  density = 'cozy',\n  pinFirst = true,\n  loading = false,\n  empty,\n  footer,\n  onRowClick,\n  className = '',\n  htmlProps,\n}: TableProps<Row>) {\n  const [sort, setSort] = useState<TableSort | null>(defaultSort);\n  const [selected, setSelected] = useState<Set<string | number>>(() => new Set());\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const lastIdxRef = useRef(-1);\n  const shiftRef = useRef(false);\n  const lastCountRef = useRef(0);\n\n  const keyOf = (row: Row): string | number => (row as Record<string, string | number>)[rowKey];\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return rows;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return rows;\n    const get =\n      typeof col.sortBy === 'function'\n        ? col.sortBy\n        : col.sortBy\n          ? (r: Row) => (r as Record<string, unknown>)[col.sortBy as string]\n          : (r: Row) => (r as Record<string, unknown>)[col.key];\n    const dir = sort.dir === 'desc' ? -1 : 1;\n    return rows.slice().sort((a, b) => dir * tblCompare(get(a), get(b)));\n  }, [rows, columns, sort]);\n\n  function cycleSort(col: TableColumn<Row>) {\n    const next: TableSort =\n      sort && sort.key === col.key\n        ? { key: col.key, dir: sort.dir === 'asc' ? 'desc' : 'asc' }\n        : { key: col.key, dir: 'asc' };\n    setSort(next);\n    if (onSortChange) onSortChange(next);\n  }\n\n  const allSelected = sortedRows.length > 0 && sortedRows.every((r) => selected.has(keyOf(r)));\n  const someSelected = selected.size > 0 && !allSelected;\n\n  function commitSelection(next: Set<string | number>) {\n    setSelected(next);\n    if (onSelectionChange) onSelectionChange(Array.from(next));\n  }\n  function clearSelection() {\n    lastIdxRef.current = -1;\n    commitSelection(new Set());\n  }\n  function toggleAll() {\n    const next = new Set<string | number>();\n    if (!allSelected) sortedRows.forEach((r) => next.add(keyOf(r)));\n    commitSelection(next);\n  }\n  function toggleRow(idx: number) {\n    const next = new Set(selected);\n    const on = !next.has(keyOf(sortedRows[idx]));\n    if (shiftRef.current && lastIdxRef.current >= 0 && lastIdxRef.current !== idx) {\n      const lo = Math.min(lastIdxRef.current, idx);\n      const hi = Math.max(lastIdxRef.current, idx);\n      for (let i = lo; i <= hi; i++) {\n        const k = keyOf(sortedRows[i]);\n        if (on) next.add(k);\n        else next.delete(k);\n      }\n    } else if (on) {\n      next.add(keyOf(sortedRows[idx]));\n    } else {\n      next.delete(keyOf(sortedRows[idx]));\n    }\n    lastIdxRef.current = idx;\n    shiftRef.current = false;\n    commitSelection(next);\n  }\n\n  useScrollEdges(\n    scrollRef,\n    (edges, el) => {\n      const w = wrapRef.current;\n      if (!w) return;\n      const set = (attr: string, on: boolean) => {\n        if (on) w.setAttribute(attr, '');\n        else w.removeAttribute(attr);\n      };\n      set('data-scrolled', el.scrollTop > 0);\n      set('data-x-back', edges.left);\n      set('data-x-more', edges.right);\n    },\n    { content: true },\n  );\n\n  function cellMods(col: TableColumn<Row>, i: number) {\n    const a: string[] = [];\n    if (col.align === 'end') a.push('tbl__cell--end');\n    if (col.align === 'center') a.push('tbl__cell--center');\n    if (col.grow) a.push('tbl__cell--grow');\n    if (col.hideBelow) a.push('tbl__cell--hide-' + col.hideBelow);\n    if (pinFirst && i === 0) {\n      a.push('tbl__cell--pin', 'tbl__cell--pinEdge');\n      if (selectable) a.push('tbl__cell--pinOff');\n    }\n    return a;\n  }\n\n  const colCount = columns.length + (selectable ? 1 : 0);\n  const showEmpty = !loading && sortedRows.length === 0;\n  const checkCellCls = 'tbl__cell--check' + (pinFirst ? ' tbl__cell--pin' : '');\n\n  const checkSize = density === 'compact' ? 'sm' : 'md';\n  const bulkOpen = selectable && selected.size > 0;\n  if (selected.size > 0) lastCountRef.current = selected.size;\n\n  const rootCls = cx(\n    'tbl',\n    density === 'compact' && 'tbl--compact',\n    pinFirst && 'tbl--pin',\n    loading && 'tbl--loading',\n    onRowClick && 'tbl--clickable',\n    className,\n  );\n\n  return (\n    <div ref={wrapRef} className={rootCls} {...htmlProps}>\n      {selectable ? (\n        <div\n          className=\"tbl__bulk\"\n          data-open={bulkOpen ? '' : undefined}\n          aria-hidden={bulkOpen ? undefined : true}\n          role=\"toolbar\"\n          aria-label=\"Selection actions\"\n        >\n          <Checkbox\n            className=\"tbl__cbx\"\n            size={checkSize}\n            checked={allSelected}\n            indeterminate={someSelected}\n            htmlProps={{ 'aria-label': 'Select all rows' }}\n            onChange={toggleAll}\n          />\n          <span className=\"tbl__bulkCount\" aria-live=\"polite\" aria-atomic=\"true\">\n            <Odometer value={bulkOpen ? selected.size : lastCountRef.current} />\n            <span> selected</span>\n          </span>\n          <span className=\"tbl__bulkSpacer\"></span>\n          {bulkActions ? bulkActions(Array.from(selected), clearSelection) : null}\n          <Button variant=\"ghost\" size=\"sm\" onClick={clearSelection}>\n            Clear\n          </Button>\n        </div>\n      ) : null}\n\n      <div className=\"tbl__viewport\">\n        <div className=\"tbl__scroll\" ref={scrollRef}>\n          <table className=\"tbl__table\" aria-label={ariaLabel} aria-busy={loading || undefined}>\n            <thead>\n              <tr>\n                {selectable ? (\n                  <th scope=\"col\" className={checkCellCls}>\n                    <Checkbox\n                      className=\"tbl__cbx\"\n                      size={checkSize}\n                      checked={allSelected}\n                      indeterminate={someSelected}\n                      htmlProps={{ 'aria-label': 'Select all rows' }}\n                      onChange={toggleAll}\n                    />\n                  </th>\n                ) : null}\n                {columns.map((c, i) => {\n                  const active = sort && sort.key === c.key;\n                  const cls = (c.sortable ? ['tbl__cell--sortable'] : []).concat(cellMods(c, i));\n                  return (\n                    <th\n                      key={c.key}\n                      scope=\"col\"\n                      className={cls.join(' ')}\n                      aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined}\n                    >\n                      {c.sortable ? (\n                        <button type=\"button\" className=\"tbl__sort\" onClick={() => cycleSort(c)}>\n                          <span className=\"tbl__sortLbl\">{c.label}</span>\n                          <span\n                            className={\n                              'tbl__sortIcon' +\n                              (active ? ' is-on' : '') +\n                              (active && sort.dir === 'desc' ? ' is-desc' : '')\n                            }\n                            aria-hidden=\"true\"\n                          >\n                            <Icon name=\"arrow-up\" size=\"sm\" />\n                          </span>\n                        </button>\n                      ) : c.label != null ? (\n                        <span className=\"tbl__hLbl\">{c.label}</span>\n                      ) : null}\n                    </th>\n                  );\n                })}\n              </tr>\n            </thead>\n            <tbody>\n              {showEmpty ? (\n                <tr>\n                  <td colSpan={colCount} className=\"tbl__emptyCell\">\n                    {empty != null ? empty : 'Nothing to show'}\n                  </td>\n                </tr>\n              ) : (\n                sortedRows.map((row, idx) => {\n                  const k = keyOf(row);\n                  const isSel = selected.has(k);\n                  return (\n                    <Motion\n                      as=\"tr\"\n                      key={k}\n                      layout\n                      layoutTransition={ROW_FLIP}\n                      className=\"tbl__row\"\n                      data-selected={isSel ? '' : undefined}\n                      onClick={onRowClick ? () => onRowClick(row) : undefined}\n                    >\n                      {selectable ? (\n                        <td className={checkCellCls} onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            className=\"tbl__cbx\"\n                            size={checkSize}\n                            checked={isSel}\n                            htmlProps={{\n                              'aria-label': selectionLabel ? selectionLabel(row) : 'Select row',\n                              onClick: (e) => {\n                                shiftRef.current = e.shiftKey;\n                              },\n                            }}\n                            onChange={() => toggleRow(idx)}\n                          />\n                        </td>\n                      ) : null}\n                      {columns.map((c, i) => (\n                        <td\n                          key={c.key}\n                          className={cellMods(c, i)\n                            .concat(c.mono ? ['tbl__cell--mono'] : [])\n                            .concat(c.strong ? ['tbl__cell--strong'] : [])\n                            .join(' ')}\n                        >\n                          {c.render ? c.render(row) : (row as Record<string, ReactNode>)[c.key]}\n                        </td>\n                      ))}\n                    </Motion>\n                  );\n                })\n              )}\n            </tbody>\n          </table>\n        </div>\n        <div className=\"tbl__edge tbl__edge--l\" aria-hidden=\"true\"></div>\n        <div className=\"tbl__edge tbl__edge--r\" aria-hidden=\"true\"></div>\n      </div>\n\n      {footer ? <div className=\"tbl__foot\">{footer}</div> : null}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/table/Table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["'use client';\n\nimport './table.css';\n\nimport { useMemo, useRef, useState, type HTMLAttributes, type ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { Motion } from '../../../motion/element';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport { Icon } from '../../internal/icon/Icon';\nimport { activationProps, type ActivateOn } from '../../internal/utils/activation';\nimport { cx } from '../../internal/utils/cx';\nimport { DigitStrip } from '../../primitives/badge/digit-strip';\nimport { Button } from '../../primitives/button/Button';\nimport { Checkbox } from '../../primitives/checkbox/Checkbox';\n\nconst ROW_FLIP = { timing: UIMotion.t.layout };\n\nexport type TableAlign = 'start' | 'end' | 'center';\nexport type TableHideBelow = 'sm' | 'md';\n\nexport interface TableColumn<Row = any> {\n  /** Unique column id; also the default data accessor (row[key]). */\n  key: string;\n  /** Header cell content; omit for a header-less column (e.g. an actions column). */\n  label?: ReactNode;\n  /** Cell + header alignment. Default 'start'. */\n  align?: TableAlign;\n  /** Mono + tabular numerals (timestamps, counts, IDs - section E). */\n  mono?: boolean;\n  /** Identity emphasis: strong text, medium weight. */\n  strong?: boolean;\n  /** The one greedy column - absorbs slack width. Others size to content. */\n  grow?: boolean;\n  /** Header becomes a sort control. Sort is local; asc - desc, no third state. */\n  sortable?: boolean;\n  /** Sort accessor: a row property name, or a function. Defaults to row[key]. */\n  sortBy?: string | ((row: Row) => unknown);\n  /** Collapse this column below a container breakpoint (30rem / 42rem). */\n  hideBelow?: TableHideBelow;\n  /** Custom cell renderer. Defaults to row[key]. */\n  render?: (row: Row) => ReactNode;\n}\n\nexport interface TableSort {\n  /** `key` of the column being sorted by. */\n  key: string;\n  /** Sort direction - `asc` or `desc`. */\n  dir: 'asc' | 'desc';\n}\n\nexport interface TableProps<Row = any> {\n  /** Column defs, rendered left to right. */\n  columns: TableColumn<Row>[];\n  /** The row data; sorted locally per the active sort before render. */\n  rows: Row[];\n  /** Row identity property. Default 'id'. Must be unique and stable. */\n  rowKey?: string;\n  /** Accessible name for the <table>. */\n  ariaLabel?: string;\n\n  /** Checkbox column + bulk bar. Selection is a Set of row keys, owned here. */\n  selectable?: boolean;\n  /** Fires with the selected row keys after every selection change. */\n  onSelectionChange?: (keys: Array<string | number>) => void;\n  /** Rendered in the bulk bar between the count and the built-in Clear. */\n  bulkActions?: (keys: Array<string | number>, clear: () => void) => ReactNode;\n  /** Per-row checkbox aria-label. Default 'Select row'. */\n  selectionLabel?: (row: Row) => string;\n\n  /** Initial sort; sorting stays local and uncontrolled after that. */\n  defaultSort?: TableSort | null;\n  /** Notification only - fires after the local sort updates. */\n  onSortChange?: (sort: TableSort) => void;\n\n  /** Row rhythm. Default 'cozy' (46px rows); 'compact' is 38px. */\n  density?: 'cozy' | 'compact';\n  /** Pin checkbox + first column under horizontal overflow. Default true. */\n  pinFirst?: boolean;\n\n  /** Rows recede and go inert (list-fetch convention). */\n  loading?: boolean;\n  /** Shown when rows is empty and not loading. Default 'Nothing to show'. */\n  empty?: ReactNode;\n  /** Footer strip - pagination, summaries. */\n  footer?: ReactNode;\n\n  /** Makes rows clickable (checkbox cell excluded). */\n  onRowClick?: (row: Row) => void;\n  /** Whether a sortable header fires on `pointerdown` (snappier) or waits for `click`. @default 'pointerdown' */\n  activateOn?: ActivateOn;\n  /** Size the table here - the internal scroller absorbs the constraint. */\n  className?: string;\n  /** Standard <div> attributes (style, data-*, aria-*, ...) forwarded to the table wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & DataAttributes;\n}\n\nfunction tblCompare(a: unknown, b: unknown) {\n  if (a == null && b == null) return 0;\n  if (a == null) return 1;\n  if (b == null) return -1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });\n}\n\nexport function Table<Row = any>({\n  columns = [],\n  rows = [],\n  rowKey = 'id',\n  ariaLabel,\n  selectable = false,\n  onSelectionChange,\n  bulkActions,\n  selectionLabel,\n  defaultSort = null,\n  onSortChange,\n  density = 'cozy',\n  pinFirst = true,\n  loading = false,\n  empty,\n  footer,\n  onRowClick,\n  activateOn = 'pointerdown',\n  className = '',\n  htmlProps,\n}: TableProps<Row>) {\n  const [sort, setSort] = useState<TableSort | null>(defaultSort);\n  const [selected, setSelected] = useState<Set<string | number>>(() => new Set());\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const lastIdxRef = useRef(-1);\n  const shiftRef = useRef(false);\n  const lastCountRef = useRef(0);\n\n  const keyOf = (row: Row): string | number => (row as Record<string, string | number>)[rowKey];\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return rows;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return rows;\n    const get =\n      typeof col.sortBy === 'function'\n        ? col.sortBy\n        : col.sortBy\n          ? (r: Row) => (r as Record<string, unknown>)[col.sortBy as string]\n          : (r: Row) => (r as Record<string, unknown>)[col.key];\n    const dir = sort.dir === 'desc' ? -1 : 1;\n    return rows.slice().sort((a, b) => dir * tblCompare(get(a), get(b)));\n  }, [rows, columns, sort]);\n\n  function cycleSort(col: TableColumn<Row>) {\n    const next: TableSort =\n      sort && sort.key === col.key\n        ? { key: col.key, dir: sort.dir === 'asc' ? 'desc' : 'asc' }\n        : { key: col.key, dir: 'asc' };\n    setSort(next);\n    if (onSortChange) onSortChange(next);\n  }\n\n  const allSelected = sortedRows.length > 0 && sortedRows.every((r) => selected.has(keyOf(r)));\n  const someSelected = selected.size > 0 && !allSelected;\n\n  function commitSelection(next: Set<string | number>) {\n    setSelected(next);\n    if (onSelectionChange) onSelectionChange(Array.from(next));\n  }\n  function clearSelection() {\n    lastIdxRef.current = -1;\n    commitSelection(new Set());\n  }\n  function toggleAll() {\n    const next = new Set<string | number>();\n    if (!allSelected) sortedRows.forEach((r) => next.add(keyOf(r)));\n    commitSelection(next);\n  }\n  function toggleRow(idx: number) {\n    const next = new Set(selected);\n    const on = !next.has(keyOf(sortedRows[idx]));\n    if (shiftRef.current && lastIdxRef.current >= 0 && lastIdxRef.current !== idx) {\n      const lo = Math.min(lastIdxRef.current, idx);\n      const hi = Math.max(lastIdxRef.current, idx);\n      for (let i = lo; i <= hi; i++) {\n        const k = keyOf(sortedRows[i]);\n        if (on) next.add(k);\n        else next.delete(k);\n      }\n    } else if (on) {\n      next.add(keyOf(sortedRows[idx]));\n    } else {\n      next.delete(keyOf(sortedRows[idx]));\n    }\n    lastIdxRef.current = idx;\n    shiftRef.current = false;\n    commitSelection(next);\n  }\n\n  useScrollEdges(\n    scrollRef,\n    (edges, el) => {\n      const w = wrapRef.current;\n      if (!w) return;\n      const set = (attr: string, on: boolean) => {\n        if (on) w.setAttribute(attr, '');\n        else w.removeAttribute(attr);\n      };\n      set('data-scrolled', el.scrollTop > 0);\n      set('data-y-scroll', el.scrollHeight > el.clientHeight);\n      set('data-x-back', edges.left);\n      set('data-x-more', edges.right);\n    },\n    { content: true },\n  );\n\n  function cellMods(col: TableColumn<Row>, i: number) {\n    const a: string[] = [];\n    if (col.align === 'end') a.push('tbl__cell--end');\n    if (col.align === 'center') a.push('tbl__cell--center');\n    if (col.grow) a.push('tbl__cell--grow');\n    if (col.hideBelow) a.push('tbl__cell--hide-' + col.hideBelow);\n    if (pinFirst && i === 0) {\n      a.push('tbl__cell--pin', 'tbl__cell--pinEdge');\n      if (selectable) a.push('tbl__cell--pinOff');\n    }\n    return a;\n  }\n\n  const colCount = columns.length + (selectable ? 1 : 0);\n  const showEmpty = !loading && sortedRows.length === 0;\n  const checkCellCls = 'tbl__cell--check' + (pinFirst ? ' tbl__cell--pin' : '');\n\n  const checkSize = density === 'compact' ? 'sm' : 'md';\n  const bulkOpen = selectable && selected.size > 0;\n  if (selected.size > 0) lastCountRef.current = selected.size;\n\n  const rootCls = cx(\n    'tbl',\n    density === 'compact' && 'tbl--compact',\n    pinFirst && 'tbl--pin',\n    loading && 'tbl--loading',\n    onRowClick && 'tbl--clickable',\n    className,\n  );\n\n  return (\n    <div ref={wrapRef} className={rootCls} {...htmlProps}>\n      {selectable ? (\n        <div\n          className=\"tbl__bulk\"\n          data-open={bulkOpen ? '' : undefined}\n          aria-hidden={bulkOpen ? undefined : true}\n          role=\"toolbar\"\n          aria-label=\"Selection actions\"\n        >\n          <Checkbox\n            className=\"tbl__cbx\"\n            size={checkSize}\n            checked={allSelected}\n            indeterminate={someSelected}\n            htmlProps={{ 'aria-label': 'Select all rows' }}\n            onChange={toggleAll}\n          />\n          <span className=\"tbl__bulkCount\" aria-live=\"polite\" aria-atomic=\"true\">\n            <DigitStrip value={bulkOpen ? selected.size : lastCountRef.current} />\n            <span> selected</span>\n          </span>\n          <span className=\"tbl__bulkSpacer\"></span>\n          {bulkActions ? bulkActions(Array.from(selected), clearSelection) : null}\n          <Button variant=\"ghost\" size=\"sm\" onClick={clearSelection}>\n            Clear\n          </Button>\n        </div>\n      ) : null}\n\n      <div className=\"tbl__viewport\">\n        <div className=\"tbl__scroll\" ref={scrollRef}>\n          <table className=\"tbl__table\" aria-label={ariaLabel} aria-busy={loading || undefined}>\n            <thead>\n              <tr>\n                {selectable ? (\n                  <th scope=\"col\" className={checkCellCls}>\n                    <Checkbox\n                      className=\"tbl__cbx\"\n                      size={checkSize}\n                      checked={allSelected}\n                      indeterminate={someSelected}\n                      htmlProps={{ 'aria-label': 'Select all rows' }}\n                      onChange={toggleAll}\n                    />\n                  </th>\n                ) : null}\n                {columns.map((c, i) => {\n                  const active = sort && sort.key === c.key;\n                  const cls = (c.sortable ? ['tbl__cell--sortable'] : []).concat(cellMods(c, i));\n                  return (\n                    <th\n                      key={c.key}\n                      scope=\"col\"\n                      className={cls.join(' ')}\n                      aria-sort={active ? (sort.dir === 'asc' ? 'ascending' : 'descending') : undefined}\n                    >\n                      {c.sortable ? (\n                        <button\n                          type=\"button\"\n                          className=\"tbl__sort\"\n                          {...activationProps<HTMLButtonElement>(() => cycleSort(c), { on: activateOn })}\n                        >\n                          <span className=\"tbl__sortLbl\">{c.label}</span>\n                          <span\n                            className={\n                              'tbl__sortIcon' +\n                              (active ? ' is-on' : '') +\n                              (active && sort.dir === 'desc' ? ' is-desc' : '')\n                            }\n                            aria-hidden=\"true\"\n                          >\n                            <Icon name=\"arrow-up\" size=\"sm\" />\n                          </span>\n                        </button>\n                      ) : c.label != null ? (\n                        <span className=\"tbl__hLbl\">{c.label}</span>\n                      ) : null}\n                    </th>\n                  );\n                })}\n              </tr>\n            </thead>\n            <tbody>\n              {showEmpty ? (\n                <tr>\n                  <td colSpan={colCount} className=\"tbl__emptyCell\">\n                    {empty != null ? empty : 'Nothing to show'}\n                  </td>\n                </tr>\n              ) : (\n                sortedRows.map((row, idx) => {\n                  const k = keyOf(row);\n                  const isSel = selected.has(k);\n                  return (\n                    <Motion\n                      as=\"tr\"\n                      key={k}\n                      layout\n                      layoutTransition={ROW_FLIP}\n                      className=\"tbl__row\"\n                      data-selected={isSel ? '' : undefined}\n                      onClick={onRowClick ? () => onRowClick(row) : undefined}\n                    >\n                      {selectable ? (\n                        <td className={checkCellCls} onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            className=\"tbl__cbx\"\n                            size={checkSize}\n                            checked={isSel}\n                            htmlProps={{\n                              'aria-label': selectionLabel ? selectionLabel(row) : 'Select row',\n                              onClick: (e) => {\n                                shiftRef.current = e.shiftKey;\n                              },\n                            }}\n                            onChange={() => toggleRow(idx)}\n                          />\n                        </td>\n                      ) : null}\n                      {columns.map((c, i) => (\n                        <td\n                          key={c.key}\n                          className={cellMods(c, i)\n                            .concat(c.mono ? ['tbl__cell--mono'] : [])\n                            .concat(c.strong ? ['tbl__cell--strong'] : [])\n                            .join(' ')}\n                        >\n                          {c.render ? c.render(row) : (row as Record<string, ReactNode>)[c.key]}\n                        </td>\n                      ))}\n                    </Motion>\n                  );\n                })\n              )}\n            </tbody>\n          </table>\n        </div>\n        <div className=\"tbl__edge tbl__edge--l\" aria-hidden=\"true\"></div>\n        <div className=\"tbl__edge tbl__edge--r\" aria-hidden=\"true\"></div>\n      </div>\n\n      {footer ? <div className=\"tbl__foot\">{footer}</div> : null}\n    </div>\n  );\n}\n"]}

package/dist/tabs.css

@@ -1,4 +1,7 @@
-/* tabs.css - line tabs for VIEW SWITCHING (overview / activity / settings), sitting on a
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* tabs.css - line tabs for VIEW SWITCHING (overview / activity / settings), sitting on a
    hairline baseline. NOT a form control: pick Segmented control for 2-3 filter options.
 
    Anatomy:  .tabs > .tabs__list[role=tablist] > .tab__hover? + .tab* + .tabs__ink
@@ -14,162 +17,164 @@
      first tab touched, springs between pads, and fades out where it rests on leave.
    Label color, icon weight and press dip remain trivial-tier CSS. */
 
-/* -- Shell - owns the full-width baseline ----------------------------------
+  /* -- Shell - owns the full-width baseline ----------------------------------
    The hairline is a ::after on the shell (not a border on the scroller) so it
    spans edge-to-edge while the scroller above it clips, masks and scrolls
    freely. The scroller gets z-index:1 so the ink paints OVER the hairline. */
-.tabs {
-  position: relative;
-}
-.tabs::after {
-  content: '';
-  position: absolute;
-  inset-inline: 0;
-  bottom: 0;
-  height: var(--border-hairline);
-  background: var(--border-default);
-}
+  .tabs {
+    --tabs-ink-h: 2px;
+    position: relative;
+  }
+  .tabs::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: var(--border-hairline);
+    background: var(--border-default);
+  }
 
-/* -- Scroller - the tablist ------------------------------------------------
+  /* -- Scroller - the tablist ------------------------------------------------
    Overflow is honest: the row scrolls (scrollbar hidden) and the clipped edge
    fades out via a mask. The fade lengths are two custom props flipped by
    data-fade (set from scroll geometry in Tabs.jsx) - at 0px the mask is fully
    opaque, i.e. a no-op. Negative margin + matching padding align the first
    label flush with the container edge while the hover pill still has room. */
-.tabs__list {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  gap: var(--space-1);
-  overflow-x: auto;
-  scrollbar-width: none;
-  margin-inline: calc(var(--space-2) * -1);
-  padding-inline: var(--space-2);
+  .tabs__list {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    gap: var(--space-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+    margin-inline: calc(var(--space-2) * -1);
+    padding-inline: var(--space-2);
 
-  --tabs-fade-start: 0px;
-  --tabs-fade-end: 0px;
-  mask-image: linear-gradient(
-    to right,
-    transparent,
-    black var(--tabs-fade-start),
-    black calc(100% - var(--tabs-fade-end)),
-    transparent
-  );
-}
-.tabs__list::-webkit-scrollbar {
-  display: none;
-}
-.tabs__list[data-fade~='start'] {
-  --tabs-fade-start: var(--space-8);
-}
-.tabs__list[data-fade~='end'] {
-  --tabs-fade-end: var(--space-8);
-}
+    --tabs-fade-start: 0px;
+    --tabs-fade-end: 0px;
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--tabs-fade-start),
+      black calc(100% - var(--tabs-fade-end)),
+      transparent
+    );
+  }
+  .tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+  .tabs__list[data-fade~='start'] {
+    --tabs-fade-start: var(--space-8);
+  }
+  .tabs__list[data-fade~='end'] {
+    --tabs-fade-end: var(--space-8);
+  }
 
-/* -- Tab - the hit target --------------------------------------------------
-   The button is pill + a bottom gap down to the baseline (total height 36px).
+  /* -- Tab - the hit target --------------------------------------------------
+   The button is pill + the ink's own band + a hairline of clearance, so the
+   ink underlines the pad instead of floating below it (total height 31px).
    All visual feedback lives on the inner pill so hover/press/focus read as a
    soft inset shape, while the ink below stays anchored to the baseline. */
-.tab {
-  appearance: none;
-  border: 0;
-  background: none;
-  margin: 0;
-  padding: 0 0 var(--space-2);
-  flex: none;
-  display: block;
-  font-family: var(--font-sans);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.tab:focus-visible {
-  outline: none;
-}
+  .tab {
+    appearance: none;
+    border: 0;
+    background: none;
+    margin: 0;
+    padding: 0 0 calc(var(--tabs-ink-h) + var(--space-px));
+    flex: none;
+    display: block;
+    font-family: var(--font-sans);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .tab:focus-visible {
+    outline: none;
+  }
 
-.tab__pad {
-  position: relative; /* positioned so every pad paints above the shared glide
+  .tab__pad {
+    position: relative; /* positioned so every pad paints above the shared glide
                              pill (z-index 0, first child of the list) */
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  height: var(--control-height-sm); /* 28 */
-  padding-inline: var(--space-2);
-  border-radius: var(--radius-md);
-  font: var(--type-micro);
-  line-height: 1;
-  white-space: nowrap;
-  color: var(--text-subtle);
-  transition:
-    var(--transition-control),
-    transform var(--duration-fast) var(--ease-standard);
-}
-.tab__pad .icon {
-  display: inline-flex;
-}
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: var(--control-height-sm); /* 28 */
+    padding-inline: var(--space-2);
+    border-radius: var(--radius-md);
+    font: var(--type-micro);
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--text-subtle);
+    transition:
+      var(--transition-control),
+      transform var(--duration-fast) var(--ease-standard);
+  }
+  .tab__pad .icon {
+    display: inline-flex;
+  }
 
-/* States - hover strengthens the label (the shared glide pill supplies the
+  /* States - hover strengthens the label (the shared glide pill supplies the
    background), press dips 1px on a darker fill (tactile, like Button), focus
    is the composed accent ring, selection is text-strong + the ink. */
-.tab:hover:not(:disabled) .tab__pad {
-  color: var(--text-body);
-}
-.tab:active:not(:disabled) .tab__pad {
-  background: var(--neutral-wash-press);
-  transform: translateY(var(--space-px));
-}
-.tab.is-selected .tab__pad,
-.tab.is-selected:hover:not(:disabled) .tab__pad {
-  color: var(--text-strong);
-}
-.tab:focus-visible .tab__pad {
-  box-shadow: var(--ring-accent);
-}
-.tab:disabled {
-  cursor: not-allowed;
-}
-.tab:disabled .tab__pad {
-  color: var(--text-disabled);
-}
+  .tab:hover:not(:disabled) .tab__pad {
+    color: var(--text-body);
+  }
+  .tab:active:not(:disabled) .tab__pad {
+    background: var(--neutral-wash-press);
+    transform: translateY(var(--space-px));
+  }
+  .tab.is-selected .tab__pad,
+  .tab.is-selected:hover:not(:disabled) .tab__pad {
+    color: var(--text-strong);
+  }
+  .tab:focus-visible .tab__pad {
+    box-shadow: var(--ring-accent);
+  }
+  .tab:disabled {
+    cursor: not-allowed;
+  }
+  .tab:disabled .tab__pad {
+    color: var(--text-disabled);
+  }
 
-/* -- Count - always mono, always tabular -----------------------------------*/
-.tab__count {
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  background: var(--bg-muted);
-  padding: var(--space-1);
-  border-radius: var(--radius-sm);
-  transition: var(--transition-colors);
-}
-.tab.is-selected .tab__count {
-  color: var(--text-accent);
-  background: var(--accent-wash);
-}
-.tab:disabled .tab__count {
-  color: var(--text-disabled);
-  background: var(--bg-subtle);
-}
+  /* -- Count - always mono, always tabular -----------------------------------*/
+  .tab__count {
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    background: var(--bg-muted);
+    padding: var(--space-1);
+    border-radius: var(--radius-sm);
+    transition: var(--transition-colors);
+  }
+  .tab.is-selected .tab__count {
+    color: var(--text-accent);
+    background: var(--accent-wash);
+  }
+  .tab:disabled .tab__count {
+    color: var(--text-disabled);
+    background: var(--bg-subtle);
+  }
 
-/* -- The gliding hover ------------------------------------------------------
+  /* -- The gliding hover ------------------------------------------------------
    One persistent pill, first child of the scroller (../motion/glide writes
    x/y/width/height/opacity inline; coordinates include scrollLeft, so it
    scrolls with its tab). z-index 0 + DOM order keep it under every tab's
    positioned pad in both travel directions. Nothing transitions here. */
-.tab__hover {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  pointer-events: none;
-  will-change: transform, opacity;
-}
+  .tab__hover {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    border-radius: var(--radius-md);
+    background: var(--neutral-wash);
+    pointer-events: none;
+    will-change: transform, opacity;
+  }
 
-/* -- The ink ---------------------------------------------------------------
+  /* -- The ink ---------------------------------------------------------------
    Positioned in the scroller's layout coordinates (offsetLeft space), so it
    scrolls WITH its tab. Motion writes transform + width at runtime; resting
    geometry is set the same way, so there is nothing to transition here.
@@ -177,32 +182,34 @@
    bespoke control dim - elevation.css reserves 2px for selected emphasis, but
    ships no width token for it (--border-emphasis is 1.5px, which renders as
    sub-pixel fuzz on 1x screens). Do not "fix" it to a token. */
-.tabs__ink {
-  --tabs-ink-h: 2px;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: var(--tabs-ink-h);
-  border-radius: var(--radius-full);
-  background: var(--accent);
-  pointer-events: none;
-  will-change: transform, width;
-}
+  .tabs__ink {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: var(--tabs-ink-h);
+    border-radius: var(--radius-full);
+    background: var(--accent);
+    pointer-events: none;
+    will-change: transform, width;
+  }
 
-/* -- Panel -----------------------------------------------------------------
+  /* -- Panel -----------------------------------------------------------------
    The panel ROOT is static chrome - borders, padding, background put on it
-   by the consumer never move. Only .tab-panel__inner (the content) enters
-   from the direction of travel (Motion, TabPanel). The root is focusable per
+   by the consumer never move; it clips (overflow: hidden) while the content
+   resizes. Only .tab-panel__inner (the content) enters from the direction of
+   travel and animates its own height between panels, so a taller or shorter
+   tab grows into place instead of snapping. The root is focusable per
    the APG (tabindex=0) so keyboard users land on content right after the
    tablist; the ring shows only for keyboard focus. */
-.tab-panel {
-  outline: none;
-  overflow: hidden;
-}
-.tab-panel:focus-visible {
-  box-shadow: var(--ring-accent);
-  border-radius: var(--radius-md);
-}
-.tab-panel__inner {
-  will-change: transform, opacity;
+  .tab-panel {
+    outline: none;
+    overflow: hidden;
+  }
+  .tab-panel:focus-visible {
+    box-shadow: var(--ring-accent);
+    border-radius: var(--radius-md);
+  }
+  .tab-panel__inner {
+    will-change: transform, opacity;
+  }
 }