@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/components/swipeable-row.js

@@ -5,6 +5,37 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { useRowSwipe } from "../hooks/use-row-swipe.js";
 import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+const SWIPE_TONE = {
+  brand: { idle: "bg-brand-soft text-brand-muted", armed: "bg-brand text-brand-contrast" },
+  neutral: { idle: "bg-active text-secondary", armed: "bg-neutral text-neutral-contrast" },
+  success: { idle: "bg-success-soft text-success", armed: "bg-success text-success-contrast" },
+  warning: { idle: "bg-warning-soft text-warning", armed: "bg-warning text-warning-contrast" },
+  danger: { idle: "bg-danger-soft text-danger", armed: "bg-danger text-danger-contrast" },
+  info: { idle: "bg-info-soft text-info", armed: "bg-info text-info-contrast" },
+  income: { idle: "bg-surface-2 text-money-pos", armed: "bg-money-pos text-money-income-contrast" },
+  expense: { idle: "bg-surface-2 text-money-neg", armed: "bg-money-neg text-money-expense-contrast" },
+  blue: { idle: "bg-hue-blue-soft text-hue-blue", armed: "bg-hue-blue text-hue-blue-contrast" },
+  indigo: { idle: "bg-hue-indigo-soft text-hue-indigo", armed: "bg-hue-indigo text-hue-indigo-contrast" },
+  purple: { idle: "bg-hue-purple-soft text-hue-purple", armed: "bg-hue-purple text-hue-purple-contrast" },
+  teal: { idle: "bg-hue-teal-soft text-hue-teal", armed: "bg-hue-teal text-hue-teal-contrast" },
+  orange: { idle: "bg-hue-orange-soft text-hue-orange", armed: "bg-hue-orange text-hue-orange-contrast" }
+};
+const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
+const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
+function panelLook(action, armed) {
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
+  if (action.paint) {
+    return {
+      className: armed ? PAINT_ARMED : PAINT_IDLE,
+      style: {
+        "--swipe-paint-fill": action.paint.fill,
+        "--swipe-paint-fg": action.paint.foreground
+      },
+      dim: false
+    };
+  }
+  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
+}
 const PEEK_PX = 40;
 function SwipeableRow({
   right,
@@ -57,24 +88,27 @@ function SwipeableRow({
   const draggingLeft = side ? side === "left" : lastSide === "left";
   const shown = draggingLeft ? leftActions[Math.max(0, swipe.armedLeftIndex)] : rightActions[Math.max(0, swipe.armedRightIndex)];
   const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;
+  const look = shown ? panelLook(shown, armed) : null;
   return /* @__PURE__ */ jsxs("div", { ref: rowRef, className: cn("relative overflow-hidden", className), children: [
-    active && shown && /* @__PURE__ */ jsxs(
+    active && shown && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 bg-surface" }),
+    active && shown && look && /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
-          "text-xs font-medium text-white transition-all",
-          // Dimmed until the drag has actually passed a threshold: "nothing will
-          // happen yet" has to look different from "let go and this fires", and on
-          // a moving row a one-step colour change was too quiet to notice.
-          armed ? "opacity-100" : "opacity-60",
-          armed ? shown.armedClassName : shown.className,
+          "text-xs font-medium transition-all",
+          look.className,
+          // The old path only: dimmed until the drag has passed a threshold. A tone
+          // or a paint says it with the soft→solid step instead, which keeps its
+          // label readable at both ends.
+          look.dim && "opacity-60",
           // The panel is anchored to the edge the row is uncovering, so the label
           // sits where the eye already is rather than across the screen. That edge is
           // physical, while a flex row starts at the INLINE start — so in RTL the two
           // directions swap, or the label sat under the row on the covered side.
           draggingLeft ? "flex-row-reverse rtl:flex-row" : "rtl:flex-row-reverse"
         ),
+        style: look.style,
         children: [
           shown.icon && /* @__PURE__ */ jsx(
             "span",
@@ -82,8 +116,10 @@ function SwipeableRow({
               className: cn(
                 "flex shrink-0 items-center justify-center rounded-full transition-all",
                 // Armed, the icon gets a disc of its own and grows — a second,
-                // non-colour signal, and the one that stays readable at a glance.
-                armed ? "size-8 scale-110 bg-white/25" : "size-7 bg-white/10"
+                // non-colour signal, and the one that stays readable at a glance. In
+                // the label's own colour (0.33): a white disc vanished on a dark
+                // theme's pastel fill, and the label's colour works on every pair.
+                armed ? "size-8 scale-110 bg-current/20" : "size-7 bg-current/10"
               ),
               children: shown.icon
             }
@@ -152,6 +188,7 @@ function SwipeableRow({
   ] });
 }
 export {
+  SWIPE_TONE,
   SwipeableRow
 };
 //# sourceMappingURL=swipeable-row.js.map

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n  /** Background utility class while the action is previewed but not yet armed. The\n   *  panel's text is white unless this sets a text colour too — and a fill that turns\n   *  light in dark mode needs one: pass the fill's contrast token\n   *  (`bg-[var(--danger)] text-[var(--danger-contrast)]`; also `--brand-contrast`,\n   *  `--success-contrast`), as the kit's own swipes do since 0.26. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so\n * existing call sites compile; there the label is white unless the classes set a\n * colour, and the idle panel is still dimmed.\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n        className?: never;\n        armedClassName?: never;\n      }\n    | {\n        tone?: never;\n        paint?: never;\n        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception. Background\n         *  utility class while the action is previewed but not yet armed; the panel is\n         *  dimmed then, and its text is white unless this sets a text colour. */\n        className: string;\n        /** @deprecated 0.33 — pass `tone`, or `paint`. Background utility class once\n         *  the drag has passed this action's threshold. */\n        armedClassName: string;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes, inline style and dimming for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"], dim: false };\n  if (action.paint) {\n    return {\n      className: armed ? PAINT_ARMED : PAINT_IDLE,\n      style: {\n        \"--swipe-paint-fill\": action.paint.fill,\n        \"--swipe-paint-fg\": action.paint.foreground,\n      } as CSSProperties,\n      dim: false,\n    };\n  }\n  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.\n  return { className: cn(\"text-white\", armed ? action.armedClassName : action.className), dim: !armed };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            look.className,\n            // The old path only: dimmed until the drag has passed a threshold. A tone\n            // or a paint says it with the soft→solid step instead, which keeps its\n            // label readable at both ends.\n            look.dim && \"opacity-60\",\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-[var(--bg-surface)]\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-[var(--border)] bg-[var(--bg-surface)] text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/switch.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { DisabledReasonDisplay } from './field-parts.js';
+import { CommitScope } from './write-lock.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -88,7 +89,7 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
      * is locked the `disabledReason` way with the lock's reason (which wins over its
      * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
      */
-    commit?: boolean;
+    commit?: CommitScope;
 }
 /**
  * A native checkbox drawn as a track and thumb, announced as a switch.

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  LockedReason,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `start-0.5` (0.125rem, 2 px at Normal) in from\n *  each end of the track, so its checked offset is `track width − thumb − 0.125rem`.\n *  All of it in rem since 0.32 (docs/text-size-harmonization.md §3.2, §4): the track\n *  and thumb already grew with the text, and a checked offset left in px (14 / 18) put\n *  the thumb short of the end at 125 % and in the middle at 150 %. `start-*`, never\n *  `left-*` or a `translate-x`: an inline-start offset follows the writing direction,\n *  so in a right-to-left form the thumb travels right-to-left with no `rtl:` override\n *  to keep in step. */\nconst SIZES = {\n  // 1.75 × 1rem track, 0.75rem thumb (28×16 / 12 at Normal): the dense setting rows in\n  // Kastlan's tables. Checked: 1.75 − 0.75 − 0.125 = 0.875rem.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-3.5\" },\n  // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-4.5\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  // The kit's focus frame (§5), stood off the track so it never merges with the fill.\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] ` +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line in the words column under the description (a\n   * bare switch: under the track), and in the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: boolean;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element. With\n  // words beside it, the reason LINE goes under them instead (below), so the track\n  // stays where the row puts it.\n  const lineInWords = locked && reasonLine && !bare;\n  const control =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {track}\n      </LockedReason>\n    ) : (\n      track\n    );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 1.25rem) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  // With the reason line in the words, the row's fade moves onto its parts: the line is\n  // the one thing on the row still to be read, and at 60 % it would not be.\n  const dimParts = lineInWords;\n  const cell = <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            dimParts && \"opacity-60\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-[var(--text-muted)]\", dimParts && \"opacity-60\")}>\n          {description}\n        </span>\n      )}\n      {lineInWords && (\n        <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n          {lock.reason}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && !dimParts && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":"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","names":["Switch"]}
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport {\n  DISABLED_REASON_LINE_CLASS,\n  LockedReason,\n  useDisabledReasonLine,\n  useLockReason,\n  type DisabledReasonDisplay,\n} from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `start-0.5` (0.125rem, 2 px at Normal) in from\n *  each end of the track, so its checked offset is `track width − thumb − 0.125rem`.\n *  All of it in rem since 0.32 (docs/text-size-harmonization.md §3.2, §4): the track\n *  and thumb already grew with the text, and a checked offset left in px (14 / 18) put\n *  the thumb short of the end at 125 % and in the middle at 150 %. `start-*`, never\n *  `left-*` or a `translate-x`: an inline-start offset follows the writing direction,\n *  so in a right-to-left form the thumb travels right-to-left with no `rtl:` override\n *  to keep in step. */\nconst SIZES = {\n  // 1.75 × 1rem track, 0.75rem thumb (28×16 / 12 at Normal): the dense setting rows in\n  // Kastlan's tables. Checked: 1.75 − 0.75 − 0.125 = 0.875rem.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-3.5\" },\n  // 2.25 × 1.25rem track, 1rem thumb (36×20 / 16). Checked: 2.25 − 1 − 0.125 = 1.125rem.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-4.5\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  // The kit's focus frame (§5), stood off the track so it never merges with the fill.\n  `focus:outline-none ${FOCUS_RING} focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] ` +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where `disabledReason` shows (0.32, §4 \"No fact only in a tooltip\"): by default, at\n   * Large and on a touch screen, as a line in the words column under the description (a\n   * bare switch: under the track), and in the tooltip otherwise. See\n   * {@link DisabledReasonDisplay}.\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: CommitScope;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const reasonLine = useDisabledReasonLine(disabledReasonDisplay);\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element. With\n  // words beside it, the reason LINE goes under them instead (below), so the track\n  // stays where the row puts it.\n  const lineInWords = locked && reasonLine && !bare;\n  const control =\n    locked && !lineInWords ? (\n      <LockedReason lock={lock} line={reasonLine} className={cn(\"shrink-0\", bare && className)}>\n        {track}\n      </LockedReason>\n    ) : (\n      track\n    );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 1.25rem) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  // With the reason line in the words, the row's fade moves onto its parts: the line is\n  // the one thing on the row still to be read, and at 60 % it would not be.\n  const dimParts = lineInWords;\n  const cell = <span className={cn(\"flex h-5 shrink-0 items-center\", dimParts && \"opacity-60\")}>{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n            dimParts && \"opacity-60\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className={cn(\"mt-0.5 block text-xs text-[var(--text-muted)]\", dimParts && \"opacity-60\")}>\n          {description}\n        </span>\n      )}\n      {lineInWords && (\n        <span id={lock.reasonId} className={DISABLED_REASON_LINE_CLASS}>\n          {lock.reason}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && !dimParts && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":"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","names":["Switch"]}

package/dist/components/table.d.ts

@@ -53,7 +53,8 @@ interface TableProps extends ComponentPropsWithRef<"table"> {
     /** Tint every other body row. */
     zebra?: boolean;
     /** Tint the body row under the pointer. Off by default: a static table whose rows
-     *  light up promises a click that does nothing. */
+     *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to
+     *  the card colour (0.33): the hover tint is too close to the well. */
     hover?: boolean;
     /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */
     wrapperClassName?: string;

package/dist/components/table.js

@@ -241,6 +241,12 @@ function TableRow({ valign, variant = "row", bordered, className, ref: refProp,
         body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
         record && zebra && "even:bg-[var(--bg-surface-2)]",
         record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it
+        // (0.33: the light well is the page colour): it hovers to the card instead, the
+        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at
+        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the
+        // row's own `hover:`.
+        record && zebra && hover && "even:hover:bg-surface",
         ROW_VARIANT[variant],
         // On the row as well, for a raw `<td>` of the caller's, which inherits it.
         valign && VALIGN[valign],

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./choice-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-[var(--border)]\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-[var(--text-muted)]\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-[var(--border-strong)] font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-[var(--bg-surface-2)] font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-[var(--border-strong)] font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-[var(--border)]\",\n        record && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        record && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-[var(--text-muted)]\" : \"text-[var(--text-secondary)]\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-[var(--text-muted)]\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/table.tsx"],"sourcesContent":["import { Children, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEdgeFade } from \"../lib/strip-fade\";\nimport { assignRef } from \"./choice-parts\";\nimport { THIN_SCROLLBAR_CLASS, useScrollOverflow } from \"./scroll-area\";\n\n/** `none` (0.10.0): no cell padding at all — keksdose's VAT summary, a table set\n *  inside a card's own padding whose columns are spaced by hand (`pl-2` on exactly the\n *  columns that need it). Type stays at the body size, as `comfortable`. */\nexport type TableDensity = \"comfortable\" | \"compact\" | \"none\";\n/** CSS `table-layout`. `auto` (the browser default) sizes columns to their content;\n *  `fixed` takes widths from the first row and ignores the rest — keksdose's VAT\n *  summary switches to it while editing so two inputs stop bidding against the\n *  figures for room. */\nexport type TableLayout = \"auto\" | \"fixed\";\nexport type TableAlign = \"start\" | \"center\" | \"end\";\n/**\n * Vertical alignment of a cell's content (0.11.0). The defaults stay as they were — a\n * head cell sits on the `bottom` (a wrapped heading ends on the line above the\n * figures), a body cell at the `top` (a wrapped note starts level with its row). A\n * table whose cells are INPUTS wants `middle`: keksdose's VAT summary\n * (invoices/vat-summary.tsx) sets fields beside derived read-out figures in one row,\n * and a figure at the top of its cell sat above the middle of the field next to it —\n * so it writes `<tr className=\"align-middle\">` over raw `<th>`/`<td>`, because the\n * kit's cells each stated `align-top` and a class on the row could not reach them.\n */\nexport type TableVAlign = \"top\" | \"middle\" | \"bottom\";\n/** The head cell's type size: `xs` (the head's default) or `sm` (the body's). */\nexport type TableHeaderCellSize = \"xs\" | \"sm\";\n/** The header cell's weight. Default `medium`. */\nexport type TableHeaderCellWeight = \"normal\" | \"medium\" | \"semibold\";\n\n/**\n * What a {@link TableRow} is in a statement-style table (0.12.0): an ordinary `row`, a\n * `group` heading (\"Current assets\", a tinted full-width label row), a `subtotal` under\n * a group, or the `total` of the whole table. kastlan's balance sheet, income statement\n * and journal entry each spelled these as `className=\"font-medium\"`, `\"font-bold\n * border-t-2\"` and `bg-muted/50` on the cell — three pages, three sets of classes for\n * the same four kinds of line.\n */\nexport type TableRowVariant = \"row\" | \"group\" | \"subtotal\" | \"total\";\n\ninterface TableContextValue {\n  density: TableDensity;\n  zebra: boolean;\n  hover: boolean;\n  rowDividers: boolean;\n  captionId: string;\n  registerCaption: () => () => void;\n}\n\nconst TableContext = createContext<TableContextValue>({\n  density: \"comfortable\",\n  zebra: false,\n  hover: false,\n  rowDividers: true,\n  captionId: \"\",\n  registerCaption: () => () => {},\n});\n\ntype TableSection = \"head\" | \"body\" | \"foot\";\n\n/** Which section a row sits in — zebra and hover apply to body rows only. `undefined`\n *  outside the kit's section parts: a raw `<thead>` / `<tbody>`, which\n *  {@link useSection} then reads off the DOM. */\nconst SectionContext = createContext<TableSection | undefined>(undefined);\n\nconst SECTION_OF_TAG: Record<string, TableSection> = { THEAD: \"head\", TBODY: \"body\", TFOOT: \"foot\" };\n\n/**\n * The section a row or cell sits in: the kit part's context where there is one, else the\n * nearest `<thead>` / `<tbody>` / `<tfoot>` in the DOM.\n *\n * keksdose's VAT summary writes a raw `<thead>` round kit cells in places, and a\n * `TableHeaderCell` there took itself for a BODY cell — `scope=\"row\"`, body type — with\n * nothing on the page to say why. React cannot see an ancestor's tag, so the fallback\n * reads it after mount; a layout effect, so the corrected cell is what gets painted.\n */\nfunction useSection<E extends HTMLElement>(): [TableSection, ((el: E | null) => void) | undefined] {\n  const fromContext = useContext(SectionContext);\n  const [node, setNode] = useState<E | null>(null);\n  const [detected, setDetected] = useState<TableSection | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (fromContext !== undefined || !node) return;\n    const section = node.closest(\"thead, tbody, tfoot\");\n    const found = section ? SECTION_OF_TAG[section.tagName] : undefined;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- read off the DOM, which only exists after mount\n    if (found !== detected) setDetected(found);\n  }, [fromContext, node, detected]);\n  // No ref at all under a kit section: holding the node would cost every row and cell\n  // a second render on mount for an answer the context already gave.\n  return [fromContext ?? detected ?? \"body\", fromContext === undefined ? setNode : undefined];\n}\n\n/**\n * One callback ref for the caller's `ref` and the part's own (0.16.0). Every part takes\n * a `ref` to its DOM element — React 19 hands it to a function component as a prop —\n * and the parts that hold the node themselves (the table, a row or a head cell reading\n * its section off the DOM) must still get it when the caller passes one too.\n */\nfunction useMergedRef<E>(own: ((el: E | null) => void) | { current: E | null } | undefined, ref: Ref<E> | undefined) {\n  return useCallback(\n    (node: E | null) => {\n      assignRef(own as Ref<E> | undefined, node);\n      assignRef(ref, node);\n    },\n    [own, ref],\n  );\n}\n\n/** A {@link TableRow}'s `valign`, which its cells take unless they set their own. It\n *  cannot be left to CSS inheritance: every cell states its own default alignment,\n *  and a class on the cell beats one on the row. */\nconst RowVAlignContext = createContext<TableVAlign | undefined>(undefined);\n\nconst VALIGN: Record<TableVAlign, string> = {\n  top: \"align-top\",\n  middle: \"align-middle\",\n  bottom: \"align-bottom\",\n};\n\nconst HEADER_SIZE: Record<TableHeaderCellSize, string> = {\n  xs: \"text-xs\",\n  sm: \"text-sm\",\n};\n\nconst HEADER_WEIGHT: Record<TableHeaderCellWeight, string> = {\n  normal: \"font-normal\",\n  medium: \"font-medium\",\n  semibold: \"font-semibold\",\n};\n\nconst CELL_PAD: Record<TableDensity, string> = {\n  comfortable: \"px-3 py-2\",\n  compact: \"px-2 py-1\",\n  none: \"p-0\",\n};\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: \"text-start\",\n  center: \"text-center\",\n  end: \"text-end\",\n};\n\n/**\n * The alignment a figure column wants: end-aligned (so the units line up under each\n * other in either reading direction) with tabular digits (so they line up at all).\n * Exported for a cell the kit did not render — a DataTable column, a `<td>` of the\n * app's own.\n */\nexport const NUMERIC_CELL_CLASS = \"text-end tabular-nums\";\n\n/**\n * Every part's props are `ComponentPropsWithRef` (0.16.0), so `ref` reaches the DOM\n * element: keksdose scrolled a budget row into view through `useId` + `getElementById`\n * because `<TableRow ref>` did not type-check.\n */\nexport interface TableProps extends ComponentPropsWithRef<\"table\"> {\n  /** `compact` for a dense detail view (a ledger, a spec sheet). */\n  density?: TableDensity;\n  /** Tint every other body row. */\n  zebra?: boolean;\n  /** Tint the body row under the pointer. Off by default: a static table whose rows\n   *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to\n   *  the card colour (0.33): the hover tint is too close to the well. */\n  hover?: boolean;\n  /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */\n  wrapperClassName?: string;\n  /** See {@link TableLayout}. Unset leaves the browser's `auto` and adds no class. */\n  layout?: TableLayout;\n  /**\n   * A rounded border round the whole table (0.12.0) — for a table standing on the page\n   * or in a dialog rather than inside a card. kastlan wraps six of them in\n   * `<div className=\"rounded-md border\">` by hand (payment allocation, the new-budget\n   * lines, the meter readings, the deposit transactions, the unit values editor, the\n   * maintenance detail), and a hand-made frame outside the scroll wrapper does not clip\n   * the rows' tint to its corners.\n   */\n  framed?: boolean;\n  /**\n   * The rule between body rows. Default true. `false` for a small table whose rows are\n   * spaced by their own content — keksdose's VAT summary, a block of three quiet\n   * columns inside a card — which otherwise had to drop to raw `<tr>`s to lose it. One\n   * row can still say otherwise with {@link TableRowProps.bordered}.\n   */\n  rowDividers?: boolean;\n  /**\n   * `\"phone\"`: below `sm` each body row becomes a block — its first cell the row's\n   * title, every further cell under its column's header as a small label — and the\n   * head row is visually hidden (still read by screen readers). For tables of PROSE,\n   * not figures (lenkbank L5: a PID-terms table of three sentence columns wrapped into\n   * two-word slivers at 390px and ran its third column off the screen). A table of\n   * numbers should keep scrolling sideways, which is why this is opt-in. The labels\n   * are the head row's cell texts, read from the DOM; a body cell spanning several\n   * columns gets none.\n   */\n  stack?: \"phone\";\n  /**\n   * Fade out an edge of the scroll wrapper while columns are hidden behind it (0.25).\n   *\n   * A table wider than its box scrolls sideways inside the wrapper, and on a phone —\n   * whose scrollbars are overlays that show only while you drag — nothing said there\n   * was more: the last visible column simply ended at the edge, often mid-word. 0.24\n   * drew a fade for ColumnRoleTable's preview (Kurvenschmiede: the fourth column's\n   * role select sat off-screen with no hint) by wrapping this Table and reaching its\n   * wrapper as the `<table>`'s `parentElement`; this is that fade as the Table's own,\n   * so a table needs neither the reach-around nor a box of its own round it.\n   *\n   * It is the kit Tabs strip's fade, MEASURED rather than assumed: nothing is drawn\n   * while the table fits, so a table that fits paints exactly as without the prop;\n   * the end with columns behind it fades, and both ends once scrolled into the\n   * middle; the ends are the reading direction's, so in RTL the hidden columns fade\n   * on the left. It is a `mask-image` — no layout change, no background colour to\n   * fade to, so it works on any surface in either theme — and never animated, so\n   * there is nothing for reduced motion to turn off. The wrapper's own scrollbars\n   * stay out of it (a fade on a classic scrollbar hid the very thing that says the\n   * box scrolls).\n   *\n   * Focus that lands in a cell behind the fade — a link, a select, a checkbox — is\n   * scrolled clear of it, cell and all where the cell fits; the browser's own scroll\n   * stops at the edge, under the fade. And while the overflowing wrapper ITSELF holds\n   * keyboard focus (it is a tab stop then, for arrow-key scrolling) the fade lifts, so\n   * the focus outline round the box is drawn whole rather than faded out at its sides.\n   *\n   * The wrapper carries `data-overflow` — `\"start\"`, `\"end\"` or `\"both\"`, in\n   * reading-direction terms, absent while it fits — for a caller's own affordance\n   * (a scroll button) and for tests, which cannot read a mask.\n   *\n   * Off by default: it changes how every overflowing table looks.\n   */\n  edgeFade?: boolean;\n}\n\n/**\n * Below `sm` on a `stack=\"phone\"` table: rows as blocks, the head visually hidden,\n * the first cell as a title, the others labelled by `data-label` (set by the table).\n */\nconst STACK_PHONE_CLASSES = cn(\n  \"max-sm:block max-sm:[&_tbody]:block max-sm:[&_tfoot]:block\",\n  \"max-sm:[&_thead]:sr-only\",\n  \"max-sm:[&_tbody_tr]:block max-sm:[&_tbody_tr]:py-2 max-sm:[&_tfoot_tr]:block max-sm:[&_tfoot_tr]:py-2\",\n  \"max-sm:[&_tbody_td]:block max-sm:[&_tbody_td]:px-0 max-sm:[&_tbody_td]:py-0.5 max-sm:[&_tbody_td]:text-start\",\n  \"max-sm:[&_tfoot_td]:block max-sm:[&_tfoot_td]:px-0 max-sm:[&_tfoot_td]:py-0.5\",\n  \"max-sm:[&_tbody_td:first-child]:font-medium\",\n  \"max-sm:[&_td[data-label]]:before:block max-sm:[&_td[data-label]]:before:text-caption max-sm:[&_td[data-label]]:before:font-medium max-sm:[&_td[data-label]]:before:text-[var(--text-muted)] max-sm:[&_td[data-label]]:before:content-[attr(data-label)]\",\n);\n\n/**\n * A plain, static HTML table in the kit's tokens — for the detail views that need\n * rows and columns and none of {@link DataTable}'s sorting, filtering or paging.\n *\n * kastlan renders about twenty of these on shadcn's Table parts; the part names here\n * are the same idea (`TableHead` is the `<thead>`, `TableHeaderCell` the `<th>`), so\n * the move is a rename rather than a rewrite.\n *\n * The table sits in an overflow-x wrapper, because a table cannot shrink below its\n * content and on a phone it would otherwise widen the page. While it overflows that\n * wrapper becomes a tab stop and a `role=\"region\"` named by the `TableCaption` (or the\n * table's own `aria-label`), so a keyboard user can scroll it and a reader can say\n * what it is — the same contract as {@link ScrollArea}.\n *\n * Alignment is logical throughout (`text-start` / `text-end`), so a right-to-left\n * page gets its first column on the right without a class changing.\n */\nexport function Table({\n  density = \"comfortable\",\n  zebra = false,\n  hover = false,\n  wrapperClassName,\n  layout,\n  framed = false,\n  rowDividers = true,\n  stack,\n  edgeFade = false,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: TableProps) {\n  const captionId = useId();\n  const [captions, setCaptions] = useState(0);\n  const wrapper = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(wrapper);\n  const fade = useEdgeFade(wrapper, edgeFade);\n  const tableRef = useRef<HTMLTableElement | null>(null);\n  const setTableRef = useMergedRef(tableRef, ref);\n\n  // `stack=\"phone\"`: label every body cell with its column's header text, and keep the\n  // table's roles explicit — `display: block` on table parts drops their table\n  // semantics in some engines. Re-run on any change to the rows, which the caller\n  // renders and this component never sees.\n  useLayoutEffect(() => {\n    const table = tableRef.current;\n    if (!stack || !table) return;\n    const label = () => {\n      const heads = Array.from(table.tHead?.rows[0]?.cells ?? []).map((cell) => cell.textContent?.trim() ?? \"\");\n      table.setAttribute(\"role\", \"table\");\n      for (const row of Array.from(table.rows)) {\n        row.setAttribute(\"role\", \"row\");\n        let column = 0;\n        for (const cell of Array.from(row.cells)) {\n          const span = cell.colSpan || 1;\n          if (cell.tagName === \"TH\") cell.setAttribute(\"role\", cell.closest(\"thead\") ? \"columnheader\" : \"rowheader\");\n          else cell.setAttribute(\"role\", \"cell\");\n          const text = span === 1 && column > 0 ? heads[column] : undefined;\n          if (cell.tagName === \"TD\" && text) cell.setAttribute(\"data-label\", text);\n          else cell.removeAttribute(\"data-label\");\n          column += span;\n        }\n      }\n    };\n    label();\n    const observer = typeof MutationObserver === \"undefined\" ? null : new MutationObserver(label);\n    observer?.observe(table, { childList: true, subtree: true, characterData: true });\n    return () => observer?.disconnect();\n  }, [stack]);\n\n  const ctx = useMemo<TableContextValue>(\n    () => ({\n      density,\n      zebra,\n      hover,\n      rowDividers,\n      captionId,\n      registerCaption: () => {\n        setCaptions((n) => n + 1);\n        return () => setCaptions((n) => n - 1);\n      },\n    }),\n    [density, zebra, hover, rowDividers, captionId],\n  );\n\n  const regionName = captions > 0 ? { \"aria-labelledby\": captionId } : ariaLabel ? { \"aria-label\": ariaLabel } : null;\n\n  return (\n    <TableContext.Provider value={ctx}>\n      <div\n        ref={wrapper}\n        // Only a region when it scrolls AND has a name: a landmark for every short\n        // table on a page would bury the real ones.\n        role={overflowing && regionName ? \"region\" : undefined}\n        {...(overflowing ? regionName : null)}\n        tabIndex={overflowing ? 0 : undefined}\n        data-overflowing={overflowing || undefined}\n        data-clips=\"\"\n        data-framed={framed || undefined}\n        // `edgeFade`: the mask, `data-overflow` and the focus handling; nothing while off.\n        {...fade}\n        className={cn(\n          // `relative`: the containing block for an `sr-only` caption.\n          \"relative w-full overflow-x-auto\",\n          // On the scroll wrapper itself, so its clipping keeps the rows inside the\n          // rounded corners.\n          framed && \"rounded-md border border-[var(--border)]\",\n          THIN_SCROLLBAR_CLASS,\n          \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n          wrapperClassName,\n        )}\n      >\n        <table\n          {...rest}\n          ref={setTableRef}\n          aria-label={ariaLabel}\n          className={cn(\n            \"w-full caption-bottom border-collapse text-sm text-[var(--text-primary)]\",\n            density === \"compact\" && \"text-xs\",\n            layout === \"fixed\" && \"table-fixed\",\n            layout === \"auto\" && \"table-auto\",\n            stack === \"phone\" && STACK_PHONE_CLASSES,\n            className,\n          )}\n        />\n      </div>\n    </TableContext.Provider>\n  );\n}\n\nexport interface TableHeadProps extends ComponentPropsWithRef<\"thead\"> {\n  /** The rule under the head. Default true; `false` for a quiet header over a small\n   *  table (keksdose's VAT summary wrote `className=\"border-b-0\"` to lose it). */\n  bordered?: boolean;\n}\n\nexport function TableHead({ bordered = true, className, ...rest }: TableHeadProps) {\n  return (\n    <SectionContext.Provider value=\"head\">\n      <thead {...rest} className={cn(bordered && \"border-b border-[var(--border)]\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableBodyProps extends ComponentPropsWithRef<\"tbody\"> {\n  /**\n   * Shown as ONE full-width row (a {@link TableEmpty}) when the body has no rows —\n   * `children` that render nothing: an empty `.map`, a `false`, `null`. kastlan hand-\n   * writes that row with a counted `colSpan` in unit-values-editor, the meeting agenda\n   * and invitations tabs, the journal-entry and invoice detail pages, and a column\n   * added later leaves every one of those counts one short.\n   */\n  empty?: ReactNode;\n}\n\nexport function TableBody({ className, empty, children, ...rest }: TableBodyProps) {\n  // `toArray` drops null/undefined/booleans and flattens arrays, so `[[], false]` —\n  // an empty map beside a conditional row that is off — is no rows.\n  const hasRows = Children.toArray(children).length > 0;\n  return (\n    <SectionContext.Provider value=\"body\">\n      <tbody {...rest} className={cn(\"[&>tr:last-child]:border-b-0\", className)}>\n        {hasRows || empty === undefined || empty === null || empty === false ? (\n          children\n        ) : (\n          <TableEmpty>{empty}</TableEmpty>\n        )}\n      </tbody>\n    </SectionContext.Provider>\n  );\n}\n\nexport interface TableEmptyProps extends Omit<ComponentPropsWithRef<\"tr\">, \"children\"> {\n  children: ReactNode;\n  /** Columns to span. Default: MEASURED — the widest row of the table it renders in,\n   *  counted after mount, so the row stays full width when a column is added. */\n  colSpan?: number;\n  /** Classes for the `<td>`. */\n  cellClassName?: string;\n}\n\n/**\n * The \"nothing here\" row: one cell across every column, centred, muted. What\n * {@link TableBodyProps.empty} renders, and usable on its own for a body whose rows\n * are not its direct children.\n */\nexport function TableEmpty({ children, colSpan, cellClassName, className, ...rest }: TableEmptyProps) {\n  const { density } = useContext(TableContext);\n  const cell = useRef<HTMLTableCellElement | null>(null);\n  const [measured, setMeasured] = useState(1);\n  // Every render, deliberately: a column can appear in the head without anything this\n  // row depends on changing. It cannot loop — setting the same count is a bail-out.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(() => {\n    if (colSpan !== undefined) return;\n    const row = cell.current?.parentElement;\n    const table = cell.current?.closest(\"table\");\n    if (!row || !table) return;\n    let widest = 1;\n    for (const r of Array.from(table.rows)) {\n      if (r === row) continue;\n      let n = 0;\n      for (const c of Array.from(r.cells)) n += c.colSpan || 1;\n      widest = Math.max(widest, n);\n    }\n    setMeasured(widest);\n  });\n  return (\n    <tr {...rest} data-table-empty=\"\" className={className}>\n      <td\n        ref={cell}\n        colSpan={colSpan ?? measured}\n        className={cn(\n          // `none` keeps the message off the edges regardless: it is text, not a figure.\n          density === \"none\" ? \"py-2\" : CELL_PAD[density],\n          \"text-center text-[var(--text-muted)]\",\n          cellClassName,\n        )}\n      >\n        {children}\n      </td>\n    </tr>\n  );\n}\n\nexport type TableFootProps = ComponentPropsWithRef<\"tfoot\">;\n\n/** The totals row. Not in the brief, but every ledger view has one and a `<tfoot>`\n *  is what tells a reader it is a total rather than one more row. */\nexport function TableFoot({ className, ...rest }: TableFootProps) {\n  return (\n    <SectionContext.Provider value=\"foot\">\n      <tfoot {...rest} className={cn(\"border-t border-[var(--border-strong)] font-medium\", className)} />\n    </SectionContext.Provider>\n  );\n}\n\nconst ROW_VARIANT: Record<TableRowVariant, string | false> = {\n  row: false,\n  group: \"bg-[var(--bg-surface-2)] font-semibold\",\n  subtotal: \"font-medium\",\n  // A 2px rule over the 1px divider the row above draws on its bottom: collapsed\n  // borders meet on one line, the wider wins, and the heavier rule is what says \"sum\".\n  total: \"border-t-2 border-t-[var(--border-strong)] font-semibold\",\n};\n\n/** The deprecated HTML `valign` attribute is replaced by a class-backed one. */\nexport interface TableRowProps extends ComponentPropsWithRef<\"tr\"> {\n  /** Vertical alignment for every cell of the row that does not set its own. See\n   *  {@link TableVAlign}. Left out, each cell keeps its default. */\n  valign?: TableVAlign;\n  /** See {@link TableRowVariant}. Default `row`. Zebra and hover tint ordinary rows\n   *  only: a group heading or a total is not one more record. */\n  variant?: TableRowVariant;\n  /** The rule under this body row. Default: the table's `rowDividers`. */\n  bordered?: boolean;\n}\n\nexport function TableRow({ valign, variant = \"row\", bordered, className, ref: refProp, ...rest }: TableRowProps) {\n  const { zebra, hover, rowDividers } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableRowElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const body = section === \"body\";\n  const record = body && variant === \"row\";\n  const row = (\n    <tr\n      ref={ref}\n      {...rest}\n      data-variant={variant === \"row\" ? undefined : variant}\n      className={cn(\n        body && (bordered ?? rowDividers) && \"border-b border-[var(--border)]\",\n        record && zebra && \"even:bg-[var(--bg-surface-2)]\",\n        record && hover && \"transition-colors hover:bg-[var(--bg-hover)]\",\n        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it\n        // (0.33: the light well is the page colour): it hovers to the card instead, the\n        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at\n        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the\n        // row's own `hover:`.\n        record && zebra && hover && \"even:hover:bg-surface\",\n        ROW_VARIANT[variant],\n        // On the row as well, for a raw `<td>` of the caller's, which inherits it.\n        valign && VALIGN[valign],\n        className,\n      )}\n    />\n  );\n  return valign ? <RowVAlignContext.Provider value={valign}>{row}</RowVAlignContext.Provider> : row;\n}\n\ninterface CellAlignProps {\n  /** Shorthand for a figure column: end-aligned, tabular digits. */\n  numeric?: boolean;\n  /** Logical alignment. Default `start` (`end` when `numeric`). */\n  align?: TableAlign;\n  /** Vertical alignment. Default: the row's `valign`, else `bottom` for a head cell and\n   *  `top` for a body cell. See {@link TableVAlign}. */\n  valign?: TableVAlign;\n}\n\n/** The deprecated HTML `align` and `valign` attributes are replaced by class-backed ones. */\nexport interface TableHeaderCellProps extends Omit<ComponentPropsWithRef<\"th\">, \"align\" | \"valign\">, CellAlignProps {\n  /**\n   * Type size. Left out: `xs` in the head, the table's own size in the body — as\n   * before. keksdose's VAT summary heads its columns at the body size and normal weight\n   * (vat-summary.tsx:158–168, `font-normal` on each `<th>`), a quiet header over a\n   * small table of figures, and could not say so without overriding classes.\n   */\n  size?: TableHeaderCellSize;\n  /** Default `medium`. `normal` for the quiet header above; see {@link size}. */\n  weight?: TableHeaderCellWeight;\n}\n\n/**\n * A `<th>`. `scope` defaults to `col` in the head and `row` in the body — a header\n * cell in a body row is the row's label (\"Net rent\" in a key-value table), and a\n * reader needs the scope to read it with each cell beside it.\n */\nexport function TableHeaderCell({\n  numeric = false,\n  align,\n  valign,\n  size,\n  weight = \"medium\",\n  scope,\n  className,\n  ref: refProp,\n  ...rest\n}: TableHeaderCellProps) {\n  const { density } = useContext(TableContext);\n  const [section, sectionRef] = useSection<HTMLTableCellElement>();\n  const ref = useMergedRef(sectionRef, refProp);\n  const rowVAlign = useContext(RowVAlignContext);\n  const head = section === \"head\";\n  const textSize = size ?? (head ? \"xs\" : undefined);\n  return (\n    <th\n      ref={ref}\n      {...rest}\n      scope={scope ?? (section === \"head\" ? \"col\" : \"row\")}\n      className={cn(\n        CELL_PAD[density],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums\",\n        VALIGN[valign ?? rowVAlign ?? (head ? \"bottom\" : \"top\")],\n        HEADER_WEIGHT[weight],\n        head ? \"text-[var(--text-muted)]\" : \"text-[var(--text-secondary)]\",\n        textSize && HEADER_SIZE[textSize],\n        className,\n      )}\n    />\n  );\n}\n\nexport interface TableCellProps extends Omit<ComponentPropsWithRef<\"td\">, \"align\" | \"valign\">, CellAlignProps {}\n\nexport function TableCell({ numeric = false, align, valign, className, ...rest }: TableCellProps) {\n  const { density } = useContext(TableContext);\n  const rowVAlign = useContext(RowVAlignContext);\n  return (\n    <td\n      {...rest}\n      className={cn(\n        CELL_PAD[density],\n        VALIGN[valign ?? rowVAlign ?? \"top\"],\n        ALIGN[align ?? (numeric ? \"end\" : \"start\")],\n        numeric && \"tabular-nums whitespace-nowrap\",\n        className,\n      )}\n    />\n  );\n}\n\nexport type TableCaptionProps = ComponentPropsWithRef<\"caption\">;\n\n/**\n * The table's title. Beneath the table by default (`caption-bottom`, the shadcn\n * convention kastlan's views already follow); `className=\"caption-top\"` moves it.\n * `className=\"sr-only\"` keeps it for readers only — the wrapper is `relative`, so\n * the hidden caption stays inside it.\n *\n * It also names the scroll region when the table overflows: it registers itself\n * with the {@link Table} so the wrapper points at an id that exists, and never at\n * one that does not.\n */\nexport function TableCaption({ className, id, ...rest }: TableCaptionProps) {\n  const { captionId, registerCaption } = useContext(TableContext);\n  useLayoutEffect(() => (id ? undefined : registerCaption()), [id, registerCaption]);\n  return (\n    <caption\n      {...rest}\n      id={id ?? captionId}\n      className={cn(\"mt-2 text-start text-sm text-[var(--text-muted)]\", className)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/text-link.d.ts

@@ -1,19 +1,24 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { e0 as KitLinkComponent } from '../delete-account-setting-Dy4kJgUm.js';
+import { e1 as KitLinkComponent } from '../delete-account-setting-DAgGBrbn.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -25,7 +30,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -37,9 +41,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -55,7 +56,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -82,6 +82,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import './appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';