@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/row-actions.js

@@ -0,0 +1,231 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLargeText } from "../hooks/use-large-text.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Popover } from "./popover.js";
+import { Button, CompactControls, IconButton } from "./ui.js";
+import { useCommitReason } from "./write-lock.js";
+const DEFAULT_ROW_ACTIONS_LABELS = {
+  actions: "Actions",
+  actionsFor: (name) => `Actions for ${name}`
+};
+function visibleActions(actions) {
+  return actions.filter((a) => Boolean(a) && !a.hidden);
+}
+function glyphOf(icon) {
+  if (icon === void 0) return null;
+  if (isValidElement(icon)) return icon;
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+function RowActions({
+  actions,
+  name,
+  collapse = "auto",
+  size = "xs",
+  menuWidth = "15rem",
+  className,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);
+  const large = useLargeText();
+  const entries = visibleActions(actions);
+  if (entries.length === 0) return null;
+  const asMenu = collapse === "menu" || collapse === "auto" && large && entries.length > 1;
+  if (!asMenu) {
+    const strip = /* @__PURE__ */ jsx("div", { "data-slot": "row-actions", className: cn("inline-flex items-center gap-0.5", className), children: entries.map((action) => /* @__PURE__ */ jsx(InlineAction, { action, size }, action.key ?? action.label)) });
+    return large ? strip : /* @__PURE__ */ jsx(CompactControls, { children: strip });
+  }
+  const title = name ? labels.actionsFor(name) : labels.actions;
+  const busy = entries.some((action) => action.pending);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      width: menuWidth,
+      "aria-label": title,
+      className: "p-1",
+      trigger: ({ open, toggle, ref }) => /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          ref,
+          size,
+          label: title,
+          labelVisible: false,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          pending: busy,
+          stopPropagation: true,
+          onClick: toggle,
+          className,
+          children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+        }
+      ),
+      children: (close) => (
+        // React carries an event out of a portal along the COMPONENT tree, so a click on
+        // an entry (or between two) reached a clickable row or a DataTable `onRowClick`
+        // the menu was opened from, though the panel is nowhere near it in the page —
+        // only the "⋯" trigger stopped its own (0.32.1, keksdose's 0.32 report). Stopped
+        // here for the whole panel: clicks, and the Enter / Space a row also listens for.
+        // Escape goes on, to the popover that closes on it.
+        /* @__PURE__ */ jsx("div", { role: "presentation", onClick: stopClick, onKeyDown: stopActivationKeys, children: /* @__PURE__ */ jsx("ul", { "data-slot": "row-actions-menu", className: "space-y-0.5", children: entries.map((action) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuAction, { action, close }) }, action.key ?? action.label)) }) })
+      )
+    }
+  );
+}
+function stopClick(e) {
+  e.stopPropagation();
+}
+function stopActivationKeys(e) {
+  if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+}
+function useActionHref(action) {
+  const reason = useCommitReason(action.commit, action.disabledReason);
+  const refused = reason !== void 0 && reason !== null && reason !== false && reason !== "";
+  return action.href !== void 0 && !action.pending && !refused ? action.href : void 0;
+}
+function MenuAction({ action, close }) {
+  const href = useActionHref(action);
+  const glyph = glyphOf(action.icon);
+  const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+    glyph && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex shrink-0 [&_svg]:size-4", children: glyph }),
+    action.label
+  ] });
+  const tone = action.tone === "danger" ? "danger" : void 0;
+  const select = () => {
+    close();
+    action.onSelect?.();
+  };
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        href,
+        external: action.external,
+        variant: "ghost",
+        size: "sm",
+        stretch: true,
+        tone,
+        disabled: action.disabled,
+        className: "w-full justify-start text-start",
+        onClick: select,
+        children: words
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      stretch: true,
+      tone,
+      disabledReason: action.disabledReason,
+      commit: action.commit,
+      pending: action.pending,
+      disabled: action.disabled,
+      className: "w-full justify-start text-start",
+      onClick: select,
+      children: words
+    }
+  );
+}
+function InlineAction({ action, size }) {
+  const href = useActionHref(action);
+  const glyph = glyphOf(action.icon);
+  const tone = action.tone === "danger" ? "danger" : void 0;
+  if (glyph) {
+    if (href !== void 0) {
+      return /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          href,
+          external: action.external,
+          size,
+          label: action.label,
+          tone,
+          disabled: action.disabled,
+          stopPropagation: true,
+          onClick: () => action.onSelect?.(),
+          children: glyph
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size,
+        label: action.label,
+        tone,
+        disabledReason: action.disabledReason,
+        commit: action.commit,
+        pending: action.pending,
+        disabled: action.disabled,
+        stopPropagation: true,
+        onClick: () => action.onSelect?.(),
+        children: glyph
+      }
+    );
+  }
+  const stop = {
+    onClick: (e) => {
+      e.stopPropagation();
+      action.onSelect?.();
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+    }
+  };
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx(Button, { href, external: action.external, variant: "ghost", size: "sm", tone, disabled: action.disabled, ...stop, children: action.label });
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      tone,
+      disabledReason: action.disabledReason,
+      commit: action.commit,
+      pending: action.pending,
+      disabled: action.disabled,
+      ...stop,
+      children: action.label
+    }
+  );
+}
+function RowActionsHeader({ text, labels }) {
+  const resolved = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labels);
+  return /* @__PURE__ */ jsx("span", { className: "sr-only", children: text ?? resolved.actions });
+}
+function rowActionsColumn({
+  key = "actions",
+  actions,
+  name,
+  collapse,
+  size,
+  headerText,
+  labels,
+  column
+}) {
+  return {
+    key,
+    header: /* @__PURE__ */ jsx(RowActionsHeader, { text: headerText, labels }),
+    headerText,
+    cell: (row) => /* @__PURE__ */ jsx(RowActions, { actions: actions(row), name: name?.(row), collapse, size, labels }),
+    className: "w-px whitespace-nowrap text-end",
+    headClassName: "w-px",
+    noRowLink: true,
+    ...column
+  };
+}
+export {
+  DEFAULT_ROW_ACTIONS_LABELS,
+  RowActions,
+  rowActionsColumn
+};
+//# sourceMappingURL=row-actions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/row-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Popover } from \"./popover\";\nimport { Button, CompactControls, IconButton } from \"./ui\";\nimport { useCommitReason } from \"./write-lock\";\nimport type { IconButtonSize } from \"./ui\";\nimport type { DataTableColumn } from \"./data-table\";\n\n/**\n * A row's actions — inline icons at Normal, one \"⋯\" menu at Large and above\n * (docs/text-size-harmonization.md §10.8).\n *\n * At Large an IconButton shows its label as text (§4). In a dense row — a register's\n * action column, a list row's end — every label at once does not fit: Kurvenschmiede\n * has 44 IconButtons in rows, kastlan 119. So a row's actions collapse instead, into\n * the menu the user roster has used since 0.31 (`UserRowActions`, now built on this):\n * one \"⋯\" button, and a menu with each action's icon AND words, where a locked one stays\n * listed and says why.\n *\n * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /\n * `null` for the ones a condition left out (`row.locked || {…}`).\n */\n\n/** One action of a row. */\nexport interface RowAction {\n  /** React key. Default: the label. */\n  key?: string;\n  /** The action's name: the inline icon's name and tooltip, the menu entry's words. */\n  label: string;\n  /**\n   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.\n   * Optional only beside `href`; an action has one or the other (or both: `onSelect`\n   * then runs as the link is followed).\n   */\n  onSelect?: () => void;\n  /**\n   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32\n   * report): a real link inline and in the menu, so open in a new tab, a middle click\n   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule\n   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an\n   * external or `#anchor` one a plain `<a>`, `mailto:` included.\n   *\n   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`\n   * (or under a write lock, with `commit`) or `pending` stays a button and says why.\n   */\n  href?: string;\n  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */\n  external?: boolean;\n  /**\n   * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own\n   * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action\n   * without one is a small text button; in the menu it is the words alone.\n   */\n  icon?: LucideIcon | ReactElement;\n  /** `danger` for delete, revoke, erase: the quiet red of IconButton's `tone=\"danger\"`\n   *  inline, the danger text tone in the menu. */\n  tone?: \"default\" | \"danger\";\n  /** Why it is not available for this row. It stays listed, focusable, and says so — an\n   *  action that silently vanished would leave the reader looking for it. */\n  disabledReason?: ReactNode;\n  /**\n   * This action COMMITS — it saves, sends, deletes: under a locked\n   * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s\n   * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.\n   */\n  commit?: boolean;\n  /**\n   * In flight — the request it started has not answered. Inline, the icon turns into\n   * IconButton's spinner (`pending`); collapsed, the \"⋯\" button does, since the menu\n   * closed when the action was chosen. Either way nothing in the row can be pressed again\n   * until it settles: the \"⋯\" opens no menu while busy.\n   */\n  pending?: boolean;\n  /**\n   * Not available for a moment, with nothing to explain — another action of the list\n   * is in flight (an admin panel's `busy`). The plain `disabled`; a lasting refusal is a\n   * `disabledReason`, which says why.\n   */\n  disabled?: boolean;\n  /** Leave it out for this row. */\n  hidden?: boolean;\n}\n\n/** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones\n *  a condition left out. */\nexport type RowActionList = readonly (RowAction | false | null | undefined)[];\n\nexport interface RowActionsLabels {\n  /** The menu button's name when the row has no name of its own; also the actions\n   *  column's (hidden) header in {@link rowActionsColumn}. */\n  actions: string;\n  /** The menu button's name, given the row's: \"Actions for Ada Example\". */\n  actionsFor: (name: string) => string;\n}\n\nexport const DEFAULT_ROW_ACTIONS_LABELS: RowActionsLabels = {\n  actions: \"Actions\",\n  actionsFor: (name) => `Actions for ${name}`,\n};\n\n/**\n * - `\"auto\"` (default): the icons inline at Normal; the \"⋯\" menu at Large and Extra\n *   large once there are two or more (§10.8). A single action stays inline at every\n *   size, with its label as text at Large — one label fits a row, and a menu of one is\n *   a detour.\n * - `\"menu\"`: the menu at every size — the roster's choice, whose actions grow (§2.4\n *   there) and do not fit a phone card as a strip.\n * - `\"inline\"`: the icons at every size — for a row the app knows has room; at Large\n *   each then shows its label (IconButton's `labelVisible`).\n */\nexport type RowActionsCollapse = \"auto\" | \"menu\" | \"inline\";\n\n/** The sizes a row action comes in: IconButton's row steps. `2xs` is DataTable's\n *  compact density. At Large every one is at least a 48 px target (IconButton). */\nexport type RowActionsSize = Extract<IconButtonSize, \"md\" | \"sm\" | \"xs\" | \"2xs\">;\n\nexport interface RowActionsProps {\n  actions: RowActionList;\n  /** The row's name, for the menu button's name — \"Actions for Ada Example\". Without it\n   *  (or `null`, as API fields often are) the button is \"Actions\". */\n  name?: string | null;\n  /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */\n  collapse?: RowActionsCollapse;\n  /** The inline icons' and the \"⋯\" button's size. Default `xs`, a list row's action. */\n  size?: RowActionsSize;\n  /** The menu's width. Default `\"15rem\"`, in rem so it grows with the words (§3.2). */\n  menuWidth?: `${number}rem`;\n  /** On the wrapper: the inline strip, or the \"⋯\" button's box. */\n  className?: string;\n  labels?: Partial<RowActionsLabels>;\n}\n\nfunction visibleActions(actions: RowActionList): RowAction[] {\n  return actions.filter((a): a is RowAction => Boolean(a) && !(a as RowAction).hidden);\n}\n\n/** An action's glyph as a node: a component is rendered, an element is used as is. */\nfunction glyphOf(icon: RowAction[\"icon\"]): ReactNode {\n  if (icon === undefined) return null;\n  if (isValidElement(icon)) return icon;\n  const Icon = icon as LucideIcon;\n  return <Icon />;\n}\n\n/**\n * A row's actions, inline or as a \"⋯\" menu — see {@link RowActionsCollapse}. Every\n * control stops its click (and the Enter/Space it stands for) from reaching the row, so\n * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column\n * also set `noRowLink: true`, as {@link rowActionsColumn} does.\n *\n * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels\n * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a\n * line under one icon of a row would break the row. In the menu a locked action's\n * reason is a line under its words at Large and on touch (Button's\n * `disabledReasonDisplay`).\n *\n * The menu is portalled, so a table's scroller cannot clip it; Escape and an outside\n * press close it, and focus goes back to the \"⋯\" button, which is where a confirmation\n * dialog then returns it.\n */\nexport function RowActions({\n  actions,\n  name,\n  collapse = \"auto\",\n  size = \"xs\",\n  menuWidth = \"15rem\",\n  className,\n  labels: labelsProp,\n}: RowActionsProps) {\n  const labels = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);\n  const large = useLargeText();\n  const entries = visibleActions(actions);\n  if (entries.length === 0) return null;\n  const asMenu = collapse === \"menu\" || (collapse === \"auto\" && large && entries.length > 1);\n  if (!asMenu) {\n    const strip = (\n      <div data-slot=\"row-actions\" className={cn(\"inline-flex items-center gap-0.5\", className)}>\n        {entries.map((action) => (\n          <InlineAction key={action.key ?? action.label} action={action} size={size} />\n        ))}\n      </div>\n    );\n    // Compact at Normal (no room for a reason line in a row); at Large an inline action\n    // is the app's choice (\"inline\") or the row's only one, and shows its words.\n    return large ? strip : <CompactControls>{strip}</CompactControls>;\n  }\n  const title = name ? labels.actionsFor(name) : labels.actions;\n  // The menu closed when the action was chosen, so what is in flight shows on \"⋯\".\n  const busy = entries.some((action) => action.pending);\n  return (\n    <Popover\n      width={menuWidth}\n      aria-label={title}\n      className=\"p-1\"\n      trigger={({ open, toggle, ref }) => (\n        <IconButton\n          ref={ref}\n          size={size}\n          label={title}\n          // \"⋯\" is read by everyone as \"more actions\"; the menu it opens is the words.\n          labelVisible={false}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          pending={busy}\n          stopPropagation\n          onClick={toggle}\n          className={className}\n        >\n          <MoreHorizontal />\n        </IconButton>\n      )}\n    >\n      {(close) => (\n        // React carries an event out of a portal along the COMPONENT tree, so a click on\n        // an entry (or between two) reached a clickable row or a DataTable `onRowClick`\n        // the menu was opened from, though the panel is nowhere near it in the page —\n        // only the \"⋯\" trigger stopped its own (0.32.1, keksdose's 0.32 report). Stopped\n        // here for the whole panel: clicks, and the Enter / Space a row also listens for.\n        // Escape goes on, to the popover that closes on it.\n        <div role=\"presentation\" onClick={stopClick} onKeyDown={stopActivationKeys}>\n          <ul data-slot=\"row-actions-menu\" className=\"space-y-0.5\">\n            {entries.map((action) => (\n              <li key={action.key ?? action.label}>\n                <MenuAction action={action} close={close} />\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </Popover>\n  );\n}\n\nfunction stopClick(e: MouseEvent) {\n  e.stopPropagation();\n}\n\nfunction stopActivationKeys(e: KeyboardEvent) {\n  if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n}\n\n/**\n * The `href` an action renders as a link with, or `undefined` for a button: a link\n * cannot carry a reason or a spinner (Button's link form has neither), so a refused\n * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one\n * stay buttons and say so.\n */\nfunction useActionHref(action: RowAction): string | undefined {\n  const reason = useCommitReason(action.commit, action.disabledReason);\n  const refused = reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;\n}\n\n/** One entry of the \"⋯\" menu: the words, as a link for an `href`, else a button. */\nfunction MenuAction({ action, close }: { action: RowAction; close: () => void }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const words = (\n    <>\n      {glyph && (\n        <span aria-hidden className=\"flex shrink-0 [&_svg]:size-4\">\n          {glyph}\n        </span>\n      )}\n      {action.label}\n    </>\n  );\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  const select = () => {\n    close();\n    action.onSelect?.();\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        stretch\n        tone={tone}\n        disabled={action.disabled}\n        className=\"w-full justify-start text-start\"\n        onClick={select}\n      >\n        {words}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      stretch\n      tone={tone}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      className=\"w-full justify-start text-start\"\n      onClick={select}\n    >\n      {words}\n    </Button>\n  );\n}\n\n/** One inline action: an IconButton with its icon, else a small text button — each a\n *  link for an `href` (see {@link useActionHref}). */\nfunction InlineAction({ action, size }: { action: RowAction; size: RowActionsSize }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  if (glyph) {\n    if (href !== undefined) {\n      return (\n        <IconButton\n          href={href}\n          external={action.external}\n          size={size}\n          label={action.label}\n          tone={tone}\n          disabled={action.disabled}\n          stopPropagation\n          onClick={() => action.onSelect?.()}\n        >\n          {glyph}\n        </IconButton>\n      );\n    }\n    return (\n      <IconButton\n        size={size}\n        label={action.label}\n        tone={tone}\n        disabledReason={action.disabledReason}\n        commit={action.commit}\n        pending={action.pending}\n        disabled={action.disabled}\n        stopPropagation\n        onClick={() => action.onSelect?.()}\n      >\n        {glyph}\n      </IconButton>\n    );\n  }\n  // A row listening for clicks must not open as well (IconButton's stopPropagation).\n  const stop = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      action.onSelect?.();\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n    },\n  };\n  if (href !== undefined) {\n    return (\n      <Button href={href} external={action.external} variant=\"ghost\" size=\"sm\" tone={tone} disabled={action.disabled} {...stop}>\n        {action.label}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone={tone}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      {...stop}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The actions column's hidden header, in the provider's words. */\nfunction RowActionsHeader({ text, labels }: { text?: string; labels?: Partial<RowActionsLabels> }) {\n  const resolved = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labels);\n  return <span className=\"sr-only\">{text ?? resolved.actions}</span>;\n}\n\nexport interface RowActionsColumnOptions<T> {\n  /** The column's key. Default `\"actions\"`. */\n  key?: string;\n  /** The row's actions — `false` / `null` for the ones a condition leaves out. */\n  actions: (row: T) => RowActionList;\n  /** The row's name, for the \"⋯\" button's name (\"Actions for Ada Example\"). `null` and\n   *  `undefined` both mean \"Actions\". */\n  name?: (row: T) => string | null | undefined;\n  collapse?: RowActionsCollapse;\n  /** Default `xs`. */\n  size?: RowActionsSize;\n  /**\n   * The column's name as plain text — the column-settings checklist and the phone\n   * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left\n   * out, the header shows the provider's `rowActions.actions` to a screen reader and\n   * the plain-text places fall back to the column's `key`.\n   */\n  headerText?: string;\n  labels?: Partial<RowActionsLabels>;\n  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A DataTable column of {@link RowActions} — an app's action column in one line\n * (§10.8): inline icons at Normal, the \"⋯\" menu at Large with two or more actions.\n *\n *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}\n *\n * The header is visually hidden (the icons say what the column is), the column hugs its\n * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the\n * buttons keep their own clicks. On a phone it is a line of the card like any column;\n * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it\n * then shows in the opened row instead).\n */\nexport function rowActionsColumn<T>({\n  key = \"actions\",\n  actions,\n  name,\n  collapse,\n  size,\n  headerText,\n  labels,\n  column,\n}: RowActionsColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header: <RowActionsHeader text={headerText} labels={labels} />,\n    headerText,\n    cell: (row) => (\n      <RowActions actions={actions(row)} name={name?.(row)} collapse={collapse} size={size} labels={labels} />\n    ),\n    className: \"w-px whitespace-nowrap text-end\",\n    headClassName: \"w-px\",\n    noRowLink: true,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/scroll-area.js

@@ -72,7 +72,7 @@ function ScrollArea({
         // a row with its own background would cover exactly the part of the ring that
         // says where focus is. An outline paints above it, and the negative offset
         // keeps it inside a parent that clips.
-        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
+        "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]",
         className
       )
     }

package/dist/components/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Whether `ref`'s element currently overflows its box — the one fact a scroll\n * container needs to decide whether it is a keyboard stop.\n *\n * Measured on every commit (cheap: two reads, and state is set only on a change) and\n * whenever the element or one of its direct children resizes, which covers both\n * \"the panel got narrower\" and \"the rows arrived\". Without `ResizeObserver` (jsdom,\n * very old engines) the per-commit measurement is what remains.\n *\n * Shared with {@link Table}'s overflow wrapper, which has the same obligation.\n */\nexport function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {\n  const [overflowing, setOverflowing] = useState(false);\n\n  const measure = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;\n    setOverflowing((prev) => (prev === next ? prev : next));\n  }, [ref]);\n\n  // No dependency list on purpose: content changes arrive as re-renders.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    for (const child of Array.from(el.children)) ro.observe(child);\n    return () => ro.disconnect();\n  }, [ref, measure]);\n\n  return overflowing;\n}\n\n/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the\n *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,\n *  which has neither. Where the standard pair applies, Chrome ignores the rest. */\nexport const THIN_SCROLLBAR_CLASS = cn(\n  \"[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]\",\n  \"[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent\",\n  \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]\",\n);\n\nconst AXIS = {\n  vertical: \"overflow-y-auto overflow-x-hidden\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Which way the content may scroll. Default `vertical`. */\n  orientation?: keyof typeof AXIS;\n  /**\n   * The region's accessible name. With it (or `aria-labelledby`) the container is a\n   * `role=\"region\"` a reader can find and name; without it, it is a plain box.\n   * Name every ScrollArea whose content can overflow: once it is a tab stop, a\n   * reader announces it on focus, and an unnamed one is announced as nothing.\n   */\n  label?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,\n * and the keyboard access a plain `overflow-auto` div does not have.\n *\n * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a\n * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no\n * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.\n *\n * A container that scrolls but holds nothing focusable cannot be scrolled from the\n * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content\n * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and\n * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list\n * adds no empty stop to the tab order.\n */\nexport function ScrollArea({\n  orientation = \"vertical\",\n  label,\n  className,\n  ref,\n  tabIndex,\n  \"aria-labelledby\": labelledBy,\n  ...rest\n}: ScrollAreaProps) {\n  const inner = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(inner);\n  const setRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      inner.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n  const named = label !== undefined || labelledBy !== undefined;\n\n  return (\n    <div\n      {...rest}\n      ref={setRef}\n      role={named ? \"region\" : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}\n      data-overflowing={overflowing || undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"relative min-h-0 min-w-0\",\n        AXIS[orientation],\n        THIN_SCROLLBAR_CLASS,\n        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —\n        // a row with its own background would cover exactly the part of the ring that\n        // says where focus is. An outline paints above it, and the negative offset\n        // keeps it inside a parent that clips.\n        \"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AA0GI;AA1GJ,SAAS,aAAa,iBAAiB,QAAQ,gBAAgB;AAE/D,SAAS,UAAU;AAaZ,SAAS,kBAAkB,KAA6C;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,eAAe,KAAK,GAAG,cAAc,GAAG,cAAc;AACxF,mBAAe,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AAAA,EACxD,GAAG,CAAC,GAAG,CAAC;AAGR,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EACV,CAAC;AAED,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,IAAG,QAAQ,KAAK;AAC7D,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;AAKO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AA6BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,SAAS;AAAA,IACb,CAAC,OAA8B;AAC7B,YAAM,UAAU;AAChB,UAAI,OAAO,QAAQ,WAAY,KAAI,EAAE;AAAA,eAC5B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AACA,QAAM,QAAQ,UAAU,UAAa,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAU,aAAa,cAAc,IAAI;AAAA,MACzC,oBAAkB,eAAe;AAAA,MACjC,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,KAAK,WAAW;AAAA,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/scroll-area.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, Ref, RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Whether `ref`'s element currently overflows its box — the one fact a scroll\n * container needs to decide whether it is a keyboard stop.\n *\n * Measured on every commit (cheap: two reads, and state is set only on a change) and\n * whenever the element or one of its direct children resizes, which covers both\n * \"the panel got narrower\" and \"the rows arrived\". Without `ResizeObserver` (jsdom,\n * very old engines) the per-commit measurement is what remains.\n *\n * Shared with {@link Table}'s overflow wrapper, which has the same obligation.\n */\nexport function useScrollOverflow(ref: RefObject<HTMLElement | null>): boolean {\n  const [overflowing, setOverflowing] = useState(false);\n\n  const measure = useCallback(() => {\n    const el = ref.current;\n    if (!el) return;\n    const next = el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;\n    setOverflowing((prev) => (prev === next ? prev : next));\n  }, [ref]);\n\n  // No dependency list on purpose: content changes arrive as re-renders.\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    for (const child of Array.from(el.children)) ro.observe(child);\n    return () => ro.disconnect();\n  }, [ref, measure]);\n\n  return overflowing;\n}\n\n/** Thin, token-coloured scrollbars. `scrollbar-width` / `scrollbar-color` are the\n *  standard (Firefox, Chrome 121+); the `::-webkit-scrollbar` rules are for Safari,\n *  which has neither. Where the standard pair applies, Chrome ignores the rest. */\nexport const THIN_SCROLLBAR_CLASS = cn(\n  \"[scrollbar-width:thin] [scrollbar-color:var(--border-strong)_transparent]\",\n  \"[&::-webkit-scrollbar]:size-2 [&::-webkit-scrollbar-track]:bg-transparent\",\n  \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--border-strong)]\",\n);\n\nconst AXIS = {\n  vertical: \"overflow-y-auto overflow-x-hidden\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Which way the content may scroll. Default `vertical`. */\n  orientation?: keyof typeof AXIS;\n  /**\n   * The region's accessible name. With it (or `aria-labelledby`) the container is a\n   * `role=\"region\"` a reader can find and name; without it, it is a plain box.\n   * Name every ScrollArea whose content can overflow: once it is a tab stop, a\n   * reader announces it on focus, and an unnamed one is announced as nothing.\n   */\n  label?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A styled overflow container: a thin scrollbar in the kit's colours, a focus ring,\n * and the keyboard access a plain `overflow-auto` div does not have.\n *\n * kastlan used Radix's ScrollArea for this and nothing else from it. Radix draws a\n * custom scrollbar in JavaScript; the platform's own, thinned and coloured, costs no\n * script and keeps native momentum, overscroll and scrollbar-dragging behaviour.\n *\n * A container that scrolls but holds nothing focusable cannot be scrolled from the\n * keyboard at all — Tab jumps straight past it (WCAG 2.1.1). So while the content\n * overflows, the container itself is a tab stop (`tabIndex=0`), and arrow keys and\n * Page Up/Down scroll it natively. While nothing overflows it is not, so a short list\n * adds no empty stop to the tab order.\n */\nexport function ScrollArea({\n  orientation = \"vertical\",\n  label,\n  className,\n  ref,\n  tabIndex,\n  \"aria-labelledby\": labelledBy,\n  ...rest\n}: ScrollAreaProps) {\n  const inner = useRef<HTMLDivElement | null>(null);\n  const overflowing = useScrollOverflow(inner);\n  const setRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      inner.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) ref.current = el;\n    },\n    [ref],\n  );\n  const named = label !== undefined || labelledBy !== undefined;\n\n  return (\n    <div\n      {...rest}\n      ref={setRef}\n      role={named ? \"region\" : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      tabIndex={tabIndex ?? (overflowing ? 0 : undefined)}\n      data-overflowing={overflowing || undefined}\n      data-orientation={orientation}\n      className={cn(\n        \"relative min-h-0 min-w-0\",\n        AXIS[orientation],\n        THIN_SCROLLBAR_CLASS,\n        // An OUTLINE, inset: a ring is a box-shadow, which paints beneath the content —\n        // a row with its own background would cover exactly the part of the ring that\n        // says where focus is. An outline paints above it, and the negative offset\n        // keeps it inside a parent that clips.\n        \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";AA0GI;AA1GJ,SAAS,aAAa,iBAAiB,QAAQ,gBAAgB;AAE/D,SAAS,UAAU;AAaZ,SAAS,kBAAkB,KAA6C;AAC7E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,UAAU,YAAY,MAAM;AAChC,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,eAAe,GAAG,eAAe,KAAK,GAAG,cAAc,GAAG,cAAc;AACxF,mBAAe,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AAAA,EACxD,GAAG,CAAC,GAAG,CAAC;AAGR,kBAAgB,MAAM;AACpB,YAAQ;AAAA,EACV,CAAC;AAED,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAClD,UAAM,KAAK,IAAI,eAAe,OAAO;AACrC,OAAG,QAAQ,EAAE;AACb,eAAW,SAAS,MAAM,KAAK,GAAG,QAAQ,EAAG,IAAG,QAAQ,KAAK;AAC7D,WAAO,MAAM,GAAG,WAAW;AAAA,EAC7B,GAAG,CAAC,KAAK,OAAO,CAAC;AAEjB,SAAO;AACT;AAKO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AACR;AA6BO,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,OAA8B,IAAI;AAChD,QAAM,cAAc,kBAAkB,KAAK;AAC3C,QAAM,SAAS;AAAA,IACb,CAAC,OAA8B;AAC7B,YAAM,UAAU;AAChB,UAAI,OAAO,QAAQ,WAAY,KAAI,EAAE;AAAA,eAC5B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AACA,QAAM,QAAQ,UAAU,UAAa,eAAe;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAU,aAAa,cAAc,IAAI;AAAA,MACzC,oBAAkB,eAAe;AAAA,MACjC,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,KAAK,WAAW;AAAA,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/search-field.js

@@ -3,9 +3,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { Search, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FIELD_BASE } from "./ui.js";
+import { FIELD_BASE, FIELD_TOUCH_TEXT } from "./ui.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-const SEARCH_INLINE = "block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0";
+const SEARCH_INLINE = "block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0 " + // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.
+FIELD_TOUCH_TEXT;
 const SearchField = forwardRef(function SearchField2({
   value,
   onChange,

package/dist/components/search-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Default: the catalogue's `common.clear`, in the\n   *  provider's language. */\n  clearLabel?: string;\n  /**\n   * Draw the \"×\" that empties the field once there is something in it. Default\n   * `true`.\n   *\n   * It used to appear only when a `clearLabel` was passed, and every kastlan call\n   * site passed one — lease-list-page.tsx:91, trial-balance-page.tsx:~196,\n   * account-ledger-page.tsx:~131 and data-table/resource-list-page.tsx:256 each\n   * spelled `clearLabel={t(\"table.clear\")}` — so the opt-in was boilerplate: a filter\n   * you can type into and not untype is the complaint that produced the button in\n   * the first place, and the catalogue already names it. `false` is for a field\n   * whose clearing lives elsewhere (a \"Reset filters\" beside it).\n   */\n  clearable?: boolean;\n  /**\n   * `\"field\"` (default): the bordered filter box that sits on a page.\n   *\n   * `\"inline\"`: no box at all — no border, no fill, no padding of its own — and no\n   * type size of its own either, so it takes the size of the header it sits in.\n   * For a search that IS the header: a command-palette sheet, a picker's top line\n   * (Keksdose's transaction search, which lost its `text-base` headline to a\n   * bordered `text-sm` box when it moved onto this component). The container is\n   * what frames it, so give the container the focus cue if it needs one\n   * (`focus-within:`); the caret is the field's own.\n   */\n  variant?: \"field\" | \"inline\";\n  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the\n   *  icon and the clear button are positioned against — so it could set a width\n   *  and nothing else. See {@link Input}'s `inputClassName`. */\n  inputClassName?: string;\n}\n\n// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing\n// itself) without even its baseline, because the header it sits in already draws\n// the line. No `text-*` size, on purpose — the input inherits the caller's.\nconst SEARCH_INLINE =\n  \"block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0\";\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    value,\n    onChange,\n    label,\n    clearLabel: clearLabelProp,\n    clearable = true,\n    className,\n    inputClassName,\n    placeholder,\n    variant = \"field\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  const inline = variant === \"inline\";\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n          // Logical sides throughout, so a right-to-left page gets the icon at the\n          // start of the line and the clear button at its end.\n          inline ? \"start-0\" : \"start-3\",\n        )}\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          inline ? SEARCH_INLINE : FIELD_BASE,\n          inline ? \"ps-7\" : \"ps-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? (inline ? \"pe-0\" : \"pe-3\") : inline ? \"pe-8\" : \"pe-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n          inputClassName,\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n            inline ? \"end-0\" : \"end-2\",\n          )}\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAmII,SACE,KADF;AAnIJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB,oBAAoB;AA0DpD,MAAM,gBACJ;AA0CK,MAAM,cAAc,WAA+C,SAASA,aACjF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,aAAa,YAAa,kBAAkB,OAAO,QAAS;AAIlE,QAAM,OAAO,aAAa;AAC1B,QAAM,SAAS,YAAY;AAC3B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,SAAS,YAAY;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT,SAAS,gBAAgB;AAAA,UACzB,SAAS,SAAS;AAAA;AAAA;AAAA,UAGlB,eAAe,SAAa,SAAS,SAAS,SAAU,SAAS,SAAS;AAAA,UAC1E;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU;AAAA,QACrB;AAAA,QAEA,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}
+{"version":3,"sources":["../../src/components/search-field.tsx"],"sourcesContent":["import { forwardRef, useRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_TOUCH_TEXT } from \"./ui\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\ninterface SearchFieldOwnProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"onChange\" | \"type\" | \"aria-label\"\n  > {\n  value: string;\n  /** The typed text. Emitted as a plain string, not an event: every caller of the\n   *  four this replaced wanted the string, and one of them held it in a URL param\n   *  rather than in state. */\n  onChange: (value: string) => void;\n  /**\n   * The field's accessible name.\n   *\n   * @deprecated Pass `aria-label` instead — the DOM spelling this kit standardised on\n   * when it found three names for one idea (`ariaLabel`, `aria-label`, and this).\n   * Unchanged and still supported; it names the field only when `aria-label` is\n   * absent, so a consumer can migrate one call site at a time.\n   */\n  label?: string;\n  /** Names the clear button. Default: the catalogue's `common.clear`, in the\n   *  provider's language. */\n  clearLabel?: string;\n  /**\n   * Draw the \"×\" that empties the field once there is something in it. Default\n   * `true`.\n   *\n   * It used to appear only when a `clearLabel` was passed, and every kastlan call\n   * site passed one — lease-list-page.tsx:91, trial-balance-page.tsx:~196,\n   * account-ledger-page.tsx:~131 and data-table/resource-list-page.tsx:256 each\n   * spelled `clearLabel={t(\"table.clear\")}` — so the opt-in was boilerplate: a filter\n   * you can type into and not untype is the complaint that produced the button in\n   * the first place, and the catalogue already names it. `false` is for a field\n   * whose clearing lives elsewhere (a \"Reset filters\" beside it).\n   */\n  clearable?: boolean;\n  /**\n   * `\"field\"` (default): the bordered filter box that sits on a page.\n   *\n   * `\"inline\"`: no box at all — no border, no fill, no padding of its own — and no\n   * type size of its own either, so it takes the size of the header it sits in.\n   * For a search that IS the header: a command-palette sheet, a picker's top line\n   * (Keksdose's transaction search, which lost its `text-base` headline to a\n   * bordered `text-sm` box when it moved onto this component). The container is\n   * what frames it, so give the container the focus cue if it needs one\n   * (`focus-within:`); the caret is the field's own.\n   */\n  variant?: \"field\" | \"inline\";\n  /** Classes for the `<input>` itself. `className` styles the wrapper — the box the\n   *  icon and the clear button are positioned against — so it could set a width\n   *  and nothing else. See {@link Input}'s `inputClassName`. */\n  inputClassName?: string;\n}\n\n// The inline look: FIELD_DISPLAY's idea (the chrome gone, the value the thing\n// itself) without even its baseline, because the header it sits in already draws\n// the line. No `text-*` size, on purpose — the input inherits the caller's.\nconst SEARCH_INLINE =\n  \"block w-full min-w-0 border-0 bg-transparent py-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:outline-none focus:ring-0 \" +\n  // FIELD_BASE carries the 16 px touch floor (§10.1); the inline look needs it too.\n  FIELD_TOUCH_TEXT;\n\n/**\n * One of the two spellings is REQUIRED, and the union is how that survives the\n * deprecation. Making `label` merely optional would have been the easy change and the\n * wrong one: the whole reason this component exists is that two of the four boxes it\n * replaced were named by nothing but their placeholder — which disappears the moment\n * someone types, i.e. exactly when a screen-reader user is working in the field. A\n * caller now has a choice of spelling; it still has no option to pass neither.\n */\nexport type SearchFieldProps = SearchFieldOwnProps &\n  ({ \"aria-label\": string; label?: string } | { label: string; \"aria-label\"?: string });\n\n/**\n * The page-level filter box: a search icon, a `type=\"search\"` input, and a clear\n * \"×\" that appears once there is something to clear.\n *\n * ## Why it is a component\n *\n * Keksdose had four of these and no two agreed. Two were character-identical\n * twenty-line copies (the settings catalogue filter and the tour list filter) —\n * the same absolute icon at `left-3`, the same `pl-9 pr-9`, the same\n * `[&::-webkit-search-cancel-button]:appearance-none`, the same conditional clear\n * button at `right-2` — differing only in which state setter they called. The\n * third (the admin support queue) was the same idea at `left-2`/`size-3.5`/`pl-7`\n * with no clear button and no `type=\"search\"`, so it had neither the `searchbox`\n * role nor a way to empty itself. The fourth (the bank picker) was a bare `<Input\n * placeholder=\"Search\">`: no icon, no clear, and no accessible name at all once\n * the placeholder went away.\n *\n * None of that is a design decision anyone made; it is four people solving the\n * same problem on four days. A shared component is how the fourth screen gets the\n * clear button the first one earned.\n *\n * ## The two X's\n *\n * `type=\"search\"` is what gives the field its `searchbox` role — and, in Chrome, a\n * NATIVE clear cross that paints right next to ours, so a non-empty box shows two\n * X's an inch apart. Ours is the one that survives: it carries an accessible name\n * and matches the app's other icon buttons, and it returns focus to the input so\n * the next query can be typed straight away.\n */\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(\n  {\n    value,\n    onChange,\n    label,\n    clearLabel: clearLabelProp,\n    clearable = true,\n    className,\n    inputClassName,\n    placeholder,\n    variant = \"field\",\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  ref,\n) {\n  const innerRef = useRef<HTMLInputElement>(null);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const clearLabel = clearable ? (clearLabelProp ?? common.clear) : undefined;\n  // Whichever spelling the caller used. It is the accessible name AND the placeholder\n  // fallback, so a box named only by `aria-label` still says what it is before anyone\n  // has typed in it — the same deal `label` has always had.\n  const name = ariaLabel ?? label;\n  const inline = variant === \"inline\";\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Search\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]\",\n          // Logical sides throughout, so a right-to-left page gets the icon at the\n          // start of the line and the clear button at its end.\n          inline ? \"start-0\" : \"start-3\",\n        )}\n      />\n      <input\n        ref={(node) => {\n          innerRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"search\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        aria-label={name}\n        placeholder={placeholder ?? name}\n        // Keksdose live #333: *\"Entering the search here — is that set as password?\n        // … I got prompted for remembering my name or mail address\"*, typed into the\n        // settings filter on a phone.\n        //\n        // A `type=\"search\"` input with no `name` and no `autocomplete` is a field\n        // Chrome's autofill classifies by GUESSWORK, from the labels around it and\n        // the other fields on the page — and a settings page has an email and a\n        // password on it. Naming the field and declaring the intent is what takes it\n        // out of that guess: `autocomplete=\"off\"` says it is not part of any profile,\n        // and a `name` of \"search\" is the strongest hint the heuristics take.\n        //\n        // The three that follow are not about autofill but about the same keyboard:\n        // a filter box that capitalises the first letter and autocorrects \"2fa\" to\n        // \"2FA\" is fighting the person typing into it. Declared BEFORE `{...rest}` so\n        // a caller with a reason can still override any of them.\n        name=\"search\"\n        autoComplete=\"off\"\n        autoCapitalize=\"none\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        {...rest}\n        className={cn(\n          inline ? SEARCH_INLINE : FIELD_BASE,\n          inline ? \"ps-7\" : \"ps-9\",\n          // Room for our own \"×\" only when there is one; a field that can't be\n          // cleared has no reason to reserve the space.\n          clearLabel === undefined ? (inline ? \"pe-0\" : \"pe-3\") : inline ? \"pe-8\" : \"pe-9\",\n          \"[&::-webkit-search-cancel-button]:appearance-none\",\n          inputClassName,\n        )}\n      />\n      {clearLabel !== undefined && value !== \"\" && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            onChange(\"\");\n            // Clearing is the start of the next query far more often than it is the\n            // end of this one, so the caret stays where it can be typed into.\n            innerRef.current?.focus();\n          }}\n          aria-label={clearLabel}\n          className={cn(\n            \"absolute top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\",\n            inline ? \"end-0\" : \"end-2\",\n          )}\n        >\n          <X className=\"size-4\" />\n        </button>\n      )}\n    </div>\n  );\n});\nSearchField.displayName = \"SearchField\";\n"],"mappings":";AAqII,SACE,KADF;AArIJ,SAAS,YAAY,cAAc;AAEnC,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,uBAAuB,oBAAoB;AA0DpD,MAAM,gBACJ;AAEA;AA0CK,MAAM,cAAc,WAA+C,SAASA,aACjF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,aAAa,YAAa,kBAAkB,OAAO,QAAS;AAIlE,QAAM,OAAO,aAAa;AAC1B,QAAM,SAAS,YAAY;AAC3B,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA,SAAS,YAAY;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,mBAAS,UAAU;AACnB,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,KAAI,UAAU;AAAA,QAC9B;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,cAAY;AAAA,QACZ,aAAa,eAAe;AAAA,QAgB5B,MAAK;AAAA,QACL,cAAa;AAAA,QACb,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,YAAY;AAAA,QACX,GAAG;AAAA,QACJ,WAAW;AAAA,UACT,SAAS,gBAAgB;AAAA,UACzB,SAAS,SAAS;AAAA;AAAA;AAAA,UAGlB,eAAe,SAAa,SAAS,SAAS,SAAU,SAAS,SAAS;AAAA,UAC1E;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACC,eAAe,UAAa,UAAU,MACrC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM;AACb,mBAAS,EAAE;AAGX,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,SAAS,UAAU;AAAA,QACrB;AAAA,QAEA,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,IACxB;AAAA,KAEJ;AAEJ,CAAC;AACD,YAAY,cAAc;","names":["SearchField"]}

package/dist/components/series-chart-budget.d.ts

@@ -16,7 +16,8 @@ interface BudgetAxis {
     width?: number;
 }
 /**
- * The narrowest the plot may get before the automatic budget steps in, in px.
+ * The narrowest the plot may get before the automatic budget steps in, in px at Normal —
+ * × the text size's scale since 0.32 (see {@link autoAxisBudget}).
  *
  * About a phone's plot with one axis a side (390 px viewport, card padding, two bands
  * of 48 + 16), where a curve's shape still reads. It is the point below which the chart
@@ -26,6 +27,11 @@ interface BudgetAxis {
 declare const MIN_PLOT_WIDTH = 160;
 /** The budget the automatic rule applies: one axis a side. */
 declare const NARROW_AXIS_BUDGET: SeriesChartAxisBudget;
+/**
+ * The automatic rule's second step: the left axis alone — for a chart with an axis on
+ * each side that even one a side leaves too little plot (0.32, see {@link autoAxisBudget}).
+ */
+declare const LEFT_AXIS_BUDGET: SeriesChartAxisBudget;
 /**
  * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither
  * counted nor returned. Empty for no budget.
@@ -37,16 +43,33 @@ declare const NARROW_AXIS_BUDGET: SeriesChartAxisBudget;
  */
 declare function budgetedAxes(axes: readonly BudgetAxis[], budget: SeriesChartAxisBudget | undefined): string[];
 /**
- * The automatic budget for a chart `width` px wide: {@link NARROW_AXIS_BUDGET} when the
- * visible axes' bands would leave the plot under {@link MIN_PLOT_WIDTH} AND some side
- * draws more than one axis — the only case one-a-side gives anything back. `undefined`
- * otherwise, and for a width that is not known (no layout, no `ResizeObserver`).
+ * The automatic budget for a chart `width` px wide, in two steps — each taken only when
+ * the plot would otherwise be narrower than {@link MIN_PLOT_WIDTH} × `scale`:
+ *
+ * 1. {@link NARROW_AXIS_BUDGET}, one axis a side, when some side draws more than one
+ *    (lenkbank's four-axis curve plot on a phone);
+ * 2. {@link LEFT_AXIS_BUDGET}, the left axis alone, when the chart has an axis on EACH
+ *    side and one a side still leaves the plot too narrow (0.32,
+ *    docs/text-size-harmonization.md §4, §10.10). At 150 % a 390 px phone's two bands
+ *    are 96 px each and the plot kept about 80 px. The right-hand axis is the secondary
+ *    one — the grid hangs its rules off the left — so it goes: its lines keep their own
+ *    scale, and its unit moves into the tooltip, the readout and the legend
+ *    ({@link axisUnit}, `seriesLegendEntries`), where its values stay readable.
+ *
+ * `scale` is the text size's (`useTextSize().scale`): the bands grow with the type
+ * (`bandWidth` is handed the scaled ones), and so does the floor (§3.2, "a chart's axis
+ * width and tick spacing are multiplied by `scale`") — the room a curve needs between
+ * labels grows with the labels.
+ *
+ * `undefined` when neither step is needed, for a single-axis chart (a facing pair's two
+ * charts each have one) and for a width that is not known (no layout, no
+ * `ResizeObserver`).
  *
  * Decided on the CHART's width and the axes as declared, never on the plot the budget
  * produced, so hiding an axis cannot widen the plot back over the line and bring it
  * back: the rule has no feedback to oscillate on.
  */
-declare function autoAxisBudget(axes: readonly BudgetAxis[], width: number | undefined, bandWidth: (axis: BudgetAxis) => number): SeriesChartAxisBudget | undefined;
+declare function autoAxisBudget(axes: readonly BudgetAxis[], width: number | undefined, bandWidth: (axis: BudgetAxis) => number, scale?: number): SeriesChartAxisBudget | undefined;
 /**
  * The unit an axis' series say when the axis is not drawn: its `unit`, or else the
  * parenthesised tail of its title — "Load (N)" says "N", which is how the apps write
@@ -57,4 +80,4 @@ declare function axisUnit(axis: {
     title?: string;
 }): string | undefined;
 
-export { MIN_PLOT_WIDTH, NARROW_AXIS_BUDGET, type SeriesChartAxisBudget, autoAxisBudget, axisUnit, budgetedAxes };
+export { LEFT_AXIS_BUDGET, MIN_PLOT_WIDTH, NARROW_AXIS_BUDGET, type SeriesChartAxisBudget, autoAxisBudget, axisUnit, budgetedAxes };

package/dist/components/series-chart-budget.js

@@ -1,6 +1,7 @@
 "use client";
 const MIN_PLOT_WIDTH = 160;
 const NARROW_AXIS_BUDGET = { left: 1, right: 1 };
+const LEFT_AXIS_BUDGET = { left: 1, right: 0 };
 const BARE_SIDE_MARGIN = 10;
 const sideOf = (axis) => axis.orientation ?? "left";
 function budgetedAxes(axes, budget) {
@@ -31,15 +32,21 @@ function budgetedAxes(axes, budget) {
   }
   return out;
 }
-function autoAxisBudget(axes, width, bandWidth) {
+function autoAxisBudget(axes, width, bandWidth, scale = 1) {
   if (width === void 0 || !(width > 0)) return void 0;
   const visible = axes.filter((axis) => !axis.hide);
   const left = visible.filter((axis) => sideOf(axis) === "left");
   const right = visible.filter((axis) => sideOf(axis) === "right");
+  const floor = MIN_PLOT_WIDTH * scale;
+  const plot = (drawn) => {
+    const onLeft = drawn.some((axis) => sideOf(axis) === "left");
+    const onRight = drawn.some((axis) => sideOf(axis) === "right");
+    const bands = drawn.reduce((sum, axis) => sum + bandWidth(axis), 0);
+    return width - bands - (onLeft ? 0 : BARE_SIDE_MARGIN) - (onRight ? 0 : BARE_SIDE_MARGIN);
+  };
+  if (left.length && right.length && plot([left[0], right[0]]) < floor) return LEFT_AXIS_BUDGET;
   if (left.length <= 1 && right.length <= 1) return void 0;
-  const bands = visible.reduce((sum, axis) => sum + bandWidth(axis), 0);
-  const margins = (left.length ? 0 : BARE_SIDE_MARGIN) + (right.length ? 0 : BARE_SIDE_MARGIN);
-  return width - bands - margins < MIN_PLOT_WIDTH ? NARROW_AXIS_BUDGET : void 0;
+  return plot(visible) < floor ? NARROW_AXIS_BUDGET : void 0;
 }
 function axisUnit(axis) {
   if (axis.unit !== void 0) return axis.unit || void 0;
@@ -47,6 +54,7 @@ function axisUnit(axis) {
   return tail?.[1].trim() || void 0;
 }
 export {
+  LEFT_AXIS_BUDGET,
   MIN_PLOT_WIDTH,
   NARROW_AXIS_BUDGET,
   autoAxisBudget,

package/dist/components/series-chart-budget.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/series-chart-budget.ts"],"sourcesContent":["// The axis budget of a series chart: which of its y axes are drawn, when there are more\n// than the width can carry. Pure, and apart from the chart, so the rule is tested on\n// numbers rather than on a jsdom that has no layout to measure.\n//\n// lenkbank's curve plot declares four visible axes — velocity, position and acceleration\n// on the left, loads on the right — and every one reserves its band of ticks and title.\n// At 1280 px that is a quarter of the card; at 390 px it is all of it, and the plot the\n// axes are for is ten pixels wide. An axis over budget is drawn the way a `hide: true`\n// one always was: it still scales its lines (and the zoom still refits it), but it draws\n// no ticks, no title, and reserves no width.\n\n/**\n * How many y axes a chart draws. A number caps the TOTAL; `{ left, right }` caps each\n * side (a side left out is not capped). Axes over the cap are hidden in declaration\n * order — the first of each side is the last to go, see {@link budgetedAxes}.\n */\nexport type SeriesChartAxisBudget = number | { left?: number; right?: number };\n\n/** The part of an axis the budget reads. */\ninterface BudgetAxis {\n  id: string;\n  orientation?: \"left\" | \"right\";\n  hide?: boolean;\n  title?: string;\n  width?: number;\n}\n\n/**\n * The narrowest the plot may get before the automatic budget steps in, in px.\n *\n * About a phone's plot with one axis a side (390 px viewport, card padding, two bands\n * of 48 + 16), where a curve's shape still reads. It is the point below which the chart\n * is already broken today — a plot the width of a thumb between four columns of numbers\n * — so the rule changes nothing that was working.\n */\nexport const MIN_PLOT_WIDTH = 160;\n\n/** The budget the automatic rule applies: one axis a side. */\nexport const NARROW_AXIS_BUDGET: SeriesChartAxisBudget = { left: 1, right: 1 };\n\n/** The plot's margin on a side no axis band covers — `SeriesPlot`'s own. */\nconst BARE_SIDE_MARGIN = 10;\n\nconst sideOf = (axis: BudgetAxis) => axis.orientation ?? \"left\";\n\n/**\n * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither\n * counted nor returned. Empty for no budget.\n *\n * Kept, in order of priority: the first visible axis of each side (in declaration order,\n * so the axis a caller lists first — the one the grid hangs its rules off — always\n * stays), then the rest in declaration order, until the cap. Per side, that is simply the\n * first `left` left-hand axes and the first `right` right-hand ones.\n */\nexport function budgetedAxes(\n  axes: readonly BudgetAxis[],\n  budget: SeriesChartAxisBudget | undefined,\n): string[] {\n  if (budget === undefined) return [];\n  const visible = axes.filter((axis) => !axis.hide);\n  if (typeof budget === \"number\") {\n    const cap = Math.max(0, Math.floor(budget));\n    const firsts = new Set<string>();\n    const seen = new Set<string>();\n    for (const axis of visible) {\n      if (!seen.has(sideOf(axis))) firsts.add(axis.id);\n      seen.add(sideOf(axis));\n    }\n    const priority = [\n      ...visible.filter((axis) => firsts.has(axis.id)),\n      ...visible.filter((axis) => !firsts.has(axis.id)),\n    ];\n    const kept = new Set(priority.slice(0, cap).map((axis) => axis.id));\n    return visible.filter((axis) => !kept.has(axis.id)).map((axis) => axis.id);\n  }\n  const used = { left: 0, right: 0 };\n  const out: string[] = [];\n  for (const axis of visible) {\n    const side = sideOf(axis);\n    const cap = budget[side];\n    if (cap !== undefined && used[side] >= Math.max(0, Math.floor(cap))) out.push(axis.id);\n    else used[side] += 1;\n  }\n  return out;\n}\n\n/**\n * The automatic budget for a chart `width` px wide: {@link NARROW_AXIS_BUDGET} when the\n * visible axes' bands would leave the plot under {@link MIN_PLOT_WIDTH} AND some side\n * draws more than one axis — the only case one-a-side gives anything back. `undefined`\n * otherwise, and for a width that is not known (no layout, no `ResizeObserver`).\n *\n * Decided on the CHART's width and the axes as declared, never on the plot the budget\n * produced, so hiding an axis cannot widen the plot back over the line and bring it\n * back: the rule has no feedback to oscillate on.\n */\nexport function autoAxisBudget(\n  axes: readonly BudgetAxis[],\n  width: number | undefined,\n  bandWidth: (axis: BudgetAxis) => number,\n): SeriesChartAxisBudget | undefined {\n  if (width === undefined || !(width > 0)) return undefined;\n  const visible = axes.filter((axis) => !axis.hide);\n  const left = visible.filter((axis) => sideOf(axis) === \"left\");\n  const right = visible.filter((axis) => sideOf(axis) === \"right\");\n  if (left.length <= 1 && right.length <= 1) return undefined;\n  const bands = visible.reduce((sum, axis) => sum + bandWidth(axis), 0);\n  const margins = (left.length ? 0 : BARE_SIDE_MARGIN) + (right.length ? 0 : BARE_SIDE_MARGIN);\n  return width - bands - margins < MIN_PLOT_WIDTH ? NARROW_AXIS_BUDGET : undefined;\n}\n\n/**\n * The unit an axis' series say when the axis is not drawn: its `unit`, or else the\n * parenthesised tail of its title — \"Load (N)\" says \"N\", which is how the apps write\n * every axis title. `undefined` when neither says one.\n */\nexport function axisUnit(axis: { unit?: string; title?: string }): string | undefined {\n  if (axis.unit !== undefined) return axis.unit || undefined;\n  const tail = /\\(([^()]+)\\)\\s*$/.exec(axis.title ?? \"\");\n  return tail?.[1].trim() || undefined;\n}\n"],"mappings":";AAmCO,MAAM,iBAAiB;AAGvB,MAAM,qBAA4C,EAAE,MAAM,GAAG,OAAO,EAAE;AAG7E,MAAM,mBAAmB;AAEzB,MAAM,SAAS,CAAC,SAAqB,KAAK,eAAe;AAWlD,SAAS,aACd,MACA,QACU;AACV,MAAI,WAAW,OAAW,QAAO,CAAC;AAClC,QAAM,UAAU,KAAK,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI;AAChD,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,MAAM,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,CAAC;AAC1C,UAAM,SAAS,oBAAI,IAAY;AAC/B,UAAM,OAAO,oBAAI,IAAY;AAC7B,eAAW,QAAQ,SAAS;AAC1B,UAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,EAAG,QAAO,IAAI,KAAK,EAAE;AAC/C,WAAK,IAAI,OAAO,IAAI,CAAC;AAAA,IACvB;AACA,UAAM,WAAW;AAAA,MACf,GAAG,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,KAAK,EAAE,CAAC;AAAA,MAC/C,GAAG,QAAQ,OAAO,CAAC,SAAS,CAAC,OAAO,IAAI,KAAK,EAAE,CAAC;AAAA,IAClD;AACA,UAAM,OAAO,IAAI,IAAI,SAAS,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC;AAClE,WAAO,QAAQ,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,EAAE;AAAA,EAC3E;AACA,QAAM,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE;AACjC,QAAM,MAAgB,CAAC;AACvB,aAAW,QAAQ,SAAS;AAC1B,UAAM,OAAO,OAAO,IAAI;AACxB,UAAM,MAAM,OAAO,IAAI;AACvB,QAAI,QAAQ,UAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,GAAG,CAAC,EAAG,KAAI,KAAK,KAAK,EAAE;AAAA,QAChF,MAAK,IAAI,KAAK;AAAA,EACrB;AACA,SAAO;AACT;AAYO,SAAS,eACd,MACA,OACA,WACmC;AACnC,MAAI,UAAU,UAAa,EAAE,QAAQ,GAAI,QAAO;AAChD,QAAM,UAAU,KAAK,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI;AAChD,QAAM,OAAO,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,MAAM,MAAM;AAC7D,QAAM,QAAQ,QAAQ,OAAO,CAAC,SAAS,OAAO,IAAI,MAAM,OAAO;AAC/D,MAAI,KAAK,UAAU,KAAK,MAAM,UAAU,EAAG,QAAO;AAClD,QAAM,QAAQ,QAAQ,OAAO,CAAC,KAAK,SAAS,MAAM,UAAU,IAAI,GAAG,CAAC;AACpE,QAAM,WAAW,KAAK,SAAS,IAAI,qBAAqB,MAAM,SAAS,IAAI;AAC3E,SAAO,QAAQ,QAAQ,UAAU,iBAAiB,qBAAqB;AACzE;AAOO,SAAS,SAAS,MAA6D;AACpF,MAAI,KAAK,SAAS,OAAW,QAAO,KAAK,QAAQ;AACjD,QAAM,OAAO,mBAAmB,KAAK,KAAK,SAAS,EAAE;AACrD,SAAO,OAAO,CAAC,EAAE,KAAK,KAAK;AAC7B;","names":[]}
+{"version":3,"sources":["../../src/components/series-chart-budget.ts"],"sourcesContent":["// The axis budget of a series chart: which of its y axes are drawn, when there are more\n// than the width can carry. Pure, and apart from the chart, so the rule is tested on\n// numbers rather than on a jsdom that has no layout to measure.\n//\n// lenkbank's curve plot declares four visible axes — velocity, position and acceleration\n// on the left, loads on the right — and every one reserves its band of ticks and title.\n// At 1280 px that is a quarter of the card; at 390 px it is all of it, and the plot the\n// axes are for is ten pixels wide. An axis over budget is drawn the way a `hide: true`\n// one always was: it still scales its lines (and the zoom still refits it), but it draws\n// no ticks, no title, and reserves no width.\n\n/**\n * How many y axes a chart draws. A number caps the TOTAL; `{ left, right }` caps each\n * side (a side left out is not capped). Axes over the cap are hidden in declaration\n * order — the first of each side is the last to go, see {@link budgetedAxes}.\n */\nexport type SeriesChartAxisBudget = number | { left?: number; right?: number };\n\n/** The part of an axis the budget reads. */\ninterface BudgetAxis {\n  id: string;\n  orientation?: \"left\" | \"right\";\n  hide?: boolean;\n  title?: string;\n  width?: number;\n}\n\n/**\n * The narrowest the plot may get before the automatic budget steps in, in px at Normal —\n * × the text size's scale since 0.32 (see {@link autoAxisBudget}).\n *\n * About a phone's plot with one axis a side (390 px viewport, card padding, two bands\n * of 48 + 16), where a curve's shape still reads. It is the point below which the chart\n * is already broken today — a plot the width of a thumb between four columns of numbers\n * — so the rule changes nothing that was working.\n */\nexport const MIN_PLOT_WIDTH = 160;\n\n/** The budget the automatic rule applies: one axis a side. */\nexport const NARROW_AXIS_BUDGET: SeriesChartAxisBudget = { left: 1, right: 1 };\n\n/**\n * The automatic rule's second step: the left axis alone — for a chart with an axis on\n * each side that even one a side leaves too little plot (0.32, see {@link autoAxisBudget}).\n */\nexport const LEFT_AXIS_BUDGET: SeriesChartAxisBudget = { left: 1, right: 0 };\n\n/** The plot's margin on a side no axis band covers — `SeriesPlot`'s own. */\nconst BARE_SIDE_MARGIN = 10;\n\nconst sideOf = (axis: BudgetAxis) => axis.orientation ?? \"left\";\n\n/**\n * The ids of the VISIBLE axes a budget hides — axes already `hide: true` are neither\n * counted nor returned. Empty for no budget.\n *\n * Kept, in order of priority: the first visible axis of each side (in declaration order,\n * so the axis a caller lists first — the one the grid hangs its rules off — always\n * stays), then the rest in declaration order, until the cap. Per side, that is simply the\n * first `left` left-hand axes and the first `right` right-hand ones.\n */\nexport function budgetedAxes(\n  axes: readonly BudgetAxis[],\n  budget: SeriesChartAxisBudget | undefined,\n): string[] {\n  if (budget === undefined) return [];\n  const visible = axes.filter((axis) => !axis.hide);\n  if (typeof budget === \"number\") {\n    const cap = Math.max(0, Math.floor(budget));\n    const firsts = new Set<string>();\n    const seen = new Set<string>();\n    for (const axis of visible) {\n      if (!seen.has(sideOf(axis))) firsts.add(axis.id);\n      seen.add(sideOf(axis));\n    }\n    const priority = [\n      ...visible.filter((axis) => firsts.has(axis.id)),\n      ...visible.filter((axis) => !firsts.has(axis.id)),\n    ];\n    const kept = new Set(priority.slice(0, cap).map((axis) => axis.id));\n    return visible.filter((axis) => !kept.has(axis.id)).map((axis) => axis.id);\n  }\n  const used = { left: 0, right: 0 };\n  const out: string[] = [];\n  for (const axis of visible) {\n    const side = sideOf(axis);\n    const cap = budget[side];\n    if (cap !== undefined && used[side] >= Math.max(0, Math.floor(cap))) out.push(axis.id);\n    else used[side] += 1;\n  }\n  return out;\n}\n\n/**\n * The automatic budget for a chart `width` px wide, in two steps — each taken only when\n * the plot would otherwise be narrower than {@link MIN_PLOT_WIDTH} × `scale`:\n *\n * 1. {@link NARROW_AXIS_BUDGET}, one axis a side, when some side draws more than one\n *    (lenkbank's four-axis curve plot on a phone);\n * 2. {@link LEFT_AXIS_BUDGET}, the left axis alone, when the chart has an axis on EACH\n *    side and one a side still leaves the plot too narrow (0.32,\n *    docs/text-size-harmonization.md §4, §10.10). At 150 % a 390 px phone's two bands\n *    are 96 px each and the plot kept about 80 px. The right-hand axis is the secondary\n *    one — the grid hangs its rules off the left — so it goes: its lines keep their own\n *    scale, and its unit moves into the tooltip, the readout and the legend\n *    ({@link axisUnit}, `seriesLegendEntries`), where its values stay readable.\n *\n * `scale` is the text size's (`useTextSize().scale`): the bands grow with the type\n * (`bandWidth` is handed the scaled ones), and so does the floor (§3.2, \"a chart's axis\n * width and tick spacing are multiplied by `scale`\") — the room a curve needs between\n * labels grows with the labels.\n *\n * `undefined` when neither step is needed, for a single-axis chart (a facing pair's two\n * charts each have one) and for a width that is not known (no layout, no\n * `ResizeObserver`).\n *\n * Decided on the CHART's width and the axes as declared, never on the plot the budget\n * produced, so hiding an axis cannot widen the plot back over the line and bring it\n * back: the rule has no feedback to oscillate on.\n */\nexport function autoAxisBudget(\n  axes: readonly BudgetAxis[],\n  width: number | undefined,\n  bandWidth: (axis: BudgetAxis) => number,\n  scale = 1,\n): SeriesChartAxisBudget | undefined {\n  if (width === undefined || !(width > 0)) return undefined;\n  const visible = axes.filter((axis) => !axis.hide);\n  const left = visible.filter((axis) => sideOf(axis) === \"left\");\n  const right = visible.filter((axis) => sideOf(axis) === \"right\");\n  const floor = MIN_PLOT_WIDTH * scale;\n  /** The plot's width with `drawn` axes drawn: what their bands and the bare sides leave. */\n  const plot = (drawn: readonly BudgetAxis[]) => {\n    const onLeft = drawn.some((axis) => sideOf(axis) === \"left\");\n    const onRight = drawn.some((axis) => sideOf(axis) === \"right\");\n    const bands = drawn.reduce((sum, axis) => sum + bandWidth(axis), 0);\n    return width - bands - (onLeft ? 0 : BARE_SIDE_MARGIN) - (onRight ? 0 : BARE_SIDE_MARGIN);\n  };\n  if (left.length && right.length && plot([left[0], right[0]]) < floor) return LEFT_AXIS_BUDGET;\n  if (left.length <= 1 && right.length <= 1) return undefined;\n  return plot(visible) < floor ? NARROW_AXIS_BUDGET : undefined;\n}\n\n/**\n * The unit an axis' series say when the axis is not drawn: its `unit`, or else the\n * parenthesised tail of its title — \"Load (N)\" says \"N\", which is how the apps write\n * every axis title. `undefined` when neither says one.\n */\nexport function axisUnit(axis: { unit?: string; title?: string }): string | undefined {\n  if (axis.unit !== undefined) return axis.unit || undefined;\n  const tail = /\\(([^()]+)\\)\\s*$/.exec(axis.title ?? \"\");\n  return tail?.[1].trim() || undefined;\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart-ticks.d.ts

@@ -1,3 +1,9 @@
+/** The aim at Large and Extra large (docs/text-size-harmonization.md §4): the labels are
+ *  25–50 % wider and taller, so five of them crowd an axis that holds them at Normal. */
+declare const LARGE_TEXT_TARGET_TICKS = 3;
+/** How many ticks to aim for at a text `scale` (`useTextSize().scale`): five at Normal,
+ *  three from Large up. */
+declare function tickTarget(scale?: number): number;
 /** The round step closest to `span / target`: 1, 2 or 5 times a power of ten. */
 declare function niceStep(span: number, target?: number): number;
 /**
@@ -43,4 +49,4 @@ declare function timeTicksWithUnit(domain: readonly [number, number] | undefined
 /** {@link timeTicksWithUnit}, ticks only. */
 declare function timeTicks(domain: readonly [number, number] | undefined, target?: number): number[] | undefined;
 
-export { type TimeTickUnit, categoryTicks, integerTicks, niceStep, niceTicks, timeTicks, timeTicksWithUnit };
+export { LARGE_TEXT_TARGET_TICKS, type TimeTickUnit, categoryTicks, integerTicks, niceStep, niceTicks, tickTarget, timeTicks, timeTicksWithUnit };

package/dist/components/series-chart-ticks.js

@@ -1,5 +1,9 @@
 "use client";
 const TARGET_TICKS = 5;
+const LARGE_TEXT_TARGET_TICKS = 3;
+function tickTarget(scale = 1) {
+  return scale > 1 ? LARGE_TEXT_TARGET_TICKS : TARGET_TICKS;
+}
 function niceStep(span, target = TARGET_TICKS) {
   const rough = span / Math.max(1, target);
   const magnitude = 10 ** Math.floor(Math.log10(rough));
@@ -101,10 +105,12 @@ function timeTicks(domain, target = TARGET_TICKS) {
   return timeTicksWithUnit(domain, target)?.ticks;
 }
 export {
+  LARGE_TEXT_TARGET_TICKS,
   categoryTicks,
   integerTicks,
   niceStep,
   niceTicks,
+  tickTarget,
   timeTicks,
   timeTicksWithUnit
 };