@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/field-parts.d.ts

@@ -1,5 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { TooltipSide } from './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /**
  * The pieces of a field's anatomy the kit's fields share — the static label, the hint
@@ -16,7 +19,7 @@ import { ReactNode, ComponentPropsWithoutRef } from 'react';
  * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,
  * the pickers and the native choice controls — the lint's no-cycle rule holds it.
  */
-declare const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+declare const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 declare const FLOATING_LABEL_STATIC: string;
 /**
  * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
@@ -27,6 +30,43 @@ interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
     children: ReactNode;
 }
 declare function FieldLabel({ children, className, ...rest }: FieldLabelProps): react.JSX.Element;
+/**
+ * The "?" that explains a field, on the field's own label line (dev#468).
+ *
+ * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a
+ * component rather than as a snippet each form repeats because the previous
+ * version was exactly that snippet — an absolutely-positioned button whose
+ * `top-1.5` was one guess at where an 11px label sits — and the reporter's
+ * follow-up was *"question mark is not centered. Is it part of the hoc?
+ * positioning problems seem quite frequently."* It was not part of the HOC. Now
+ * it is, and there is one place left where the answer can be wrong.
+ *
+ * A `<button>` rather than a bare icon: hover alone puts the explanation out of
+ * reach of a keyboard and of every touch device, and the tooltip shows on focus
+ * too. The text is also its accessible name, so a screen reader gets it without
+ * the bubble ever opening.
+ */
+interface FieldHintProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+    /** The explanation. It is both the tooltip's text and, by default, the button's
+     *  accessible name, so a screen reader gets it without the bubble ever opening. */
+    label: string;
+    /** Default `"start"`: before the hint in the reading direction (the left in LTR, the
+     *  right in RTL). `left` / `right` stay physical. */
+    side?: TooltipSide;
+}
+declare function FieldHint({ label, side, className, "aria-label": ariaLabel, ...rest }: FieldHintProps): react.JSX.Element;
+/**
+ * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md
+ * §4 "No fact only in a tooltip"): at Large and Extra large, and on a touch screen, a
+ * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under
+ * the box, where they are read without hovering or tapping a 14 px "?". Anywhere else,
+ * and for any other hint, the hint unchanged.
+ *
+ * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a
+ * field that resolves its own `hint` (an app's, or one of the kit's own outside this
+ * file) calls it first and then treats the result as it treated a text hint.
+ */
+declare function useInlineHint(hint: ReactNode): ReactNode;
 /**
  * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or
  * something for the label line (a {@link FieldHint} "?", or any other node).
@@ -39,7 +79,7 @@ declare function FieldLabel({ children, className, ...rest }: FieldLabelProps):
 declare function isTextHint(hint: ReactNode): hint is string | number;
 /** The caption under a field — Select's and NumberInput's type, so every field's
  *  standing advice reads alike. */
-declare const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
+declare const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
 interface FieldHintParts {
     /** The caller's `aria-describedby` with the caption's id appended — standing
      *  advice first; the error (the news) is appended after this by the field. */
@@ -56,7 +96,7 @@ interface FieldHintParts {
  * Split a field's `hint` into the caption under it (attached with `aria-describedby`)
  * or the "?" on its label line. See {@link isTextHint}.
  */
-declare function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts;
+declare function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts;
 /** The caption under a field, as {@link Select} draws its own. */
 declare function FieldCaption({ parts, className }: {
     parts: FieldHintParts;
@@ -117,8 +157,64 @@ declare function useLockReason(commit: boolean | undefined, disabledReason: Reac
  * `className` is the wrapper's, which becomes the outermost element while locked — a
  * control moves its own layout classes here so a lock does not reflow the form.
  */
-declare function LockedReason({ lock, className, children, }: {
+declare function LockedReason({ lock, line, className, children, }: {
     lock: LockReason;
+    /** Draw the reason as a line under the control instead (0.32, §4) — see
+     *  {@link DisabledReasonLine}; the caller decides with {@link useDisabledReasonLine}. */
+    line?: boolean;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+/**
+ * Where a control's `disabledReason` is shown (§4 "No fact only in a tooltip"):
+ *
+ * - `"auto"` (default): as a LINE under the control at Large and Extra large and on a
+ *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover
+ *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and
+ *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's
+ *   inline actions) it stays the tooltip at every size: there is no room for a line.
+ * - `"line"`: always the line — a form whose locked submit should say why at once.
+ * - `"tooltip"`: always the tooltip — a place the caller knows has no room, and where
+ *   the reason is also said elsewhere on the screen (a banner over the form).
+ *
+ * Either way the reason is the control's `aria-describedby`, so a screen reader hears
+ * it on focus; the line IS that description (one copy), the tooltip keeps its hidden
+ * copy as before.
+ */
+type DisabledReasonDisplay = "auto" | "line" | "tooltip";
+/**
+ * Marks a region where the controls must stay compact at every text size (§4, §10.8):
+ * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a
+ * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar
+ * in one ("the top bar keeps its essential icons"); `RowActions` its inline icons.
+ *
+ * For a toolbar that has no room, not for a whole page: the contract asks that the icon
+ * alone be rare. A dense row's actions belong in `RowActions`, which collapses them
+ * into a "⋯" menu at Large instead.
+ */
+declare const CompactControlsContext: react.Context<boolean>;
+declare function CompactControls({ children, compact }: {
+    children: ReactNode;
+    compact?: boolean;
+}): react.JSX.Element;
+/** Whether a control's `disabledReason` is drawn as a line here — see
+ *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,
+ *  ToggleGroup) and an app's control that has a reason to give. */
+declare function useDisabledReasonLine(display?: DisabledReasonDisplay): boolean;
+/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked
+ *  control's "why" reads like a field's standing advice. Capped, so a long reason under
+ *  a small control wraps rather than widening its row without end. */
+declare const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]";
+/**
+ * A control and its `disabledReason` as a line under it — the `"line"` form of
+ * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the
+ * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own
+ * width, and a column parent still stretches the wrapper (FormActions' phone stack).
+ * The line carries `id`, which the control's `aria-describedby` names.
+ */
+declare function DisabledReasonLine({ id, reason, className, children, }: {
+    id: string;
+    reason: ReactNode;
     className?: string;
     children: ReactNode;
 }): react.JSX.Element;
@@ -145,7 +241,7 @@ interface FieldMessages {
     labelHint: ReactNode;
 }
 /** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */
-declare function useFieldMessages({ hint, error, invalid, describedBy, ariaInvalid, }: {
+declare function useFieldMessages({ hint: hintProp, error, invalid, describedBy, ariaInvalid, }: {
     hint?: ReactNode;
     error?: ReactNode;
     invalid?: boolean;
@@ -221,4 +317,4 @@ declare function LabelStrip({ labelId, label, hint, disabled, pad, className, ch
     children: ReactNode;
 }): react.JSX.Element;
 
-export { EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, type FieldHintParts, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useFieldHint, useFieldMessages, useLockReason };
+export { CompactControls, CompactControlsContext, DISABLED_REASON_LINE_CLASS, type DisabledReasonDisplay, DisabledReasonLine, EndHintRow, FIELD_CAPTION_CLASS, FLOATING_LABEL_STATIC, FieldBox, FieldCaption, FieldHint, type FieldHintParts, type FieldHintProps, FieldLabel, FieldLabelLine, type FieldLabelProps, type FieldMessages, LABEL_IN_ROW, LABEL_STRIP_PAD, LabelStrip, type LockReason, LockedReason, RequiredStarOnLegend, STATIC_LABEL_TYPE, StaticLabelRow, hasContent, isTextHint, useDisabledReasonLine, useFieldHint, useFieldMessages, useInlineHint, useLockReason };

package/dist/components/field-parts.js

@@ -1,11 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useId } from "react";
+import { createContext, isValidElement, useContext, useId } from "react";
+import { HelpCircle } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { useInlineFacts } from "../hooks/use-large-text.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
 import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
-const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
+const STATIC_LABEL_TYPE = "text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 const FLOATING_LABEL_STATIC = cn(
   "pointer-events-none absolute start-3 top-1",
   STATIC_LABEL_TYPE,
@@ -14,11 +17,48 @@ const FLOATING_LABEL_STATIC = cn(
 function FieldLabel({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
 }
+function FieldHint({
+  label,
+  side = "start",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  return (
+    // `tap="toggle"` (0.25): the "?" exists only to explain, so a tap on a phone shows
+    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a
+    // tap) would otherwise make it show nothing at all.
+    /* @__PURE__ */ jsx(Tooltip, { label, side, portal: true, tap: "toggle", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        type: "button",
+        "aria-label": ariaLabel ?? label,
+        onClick: (e) => e.preventDefault(),
+        className: cn(
+          "flex rounded-full text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
+          FOCUS_RING,
+          className
+        ),
+        children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5" })
+      }
+    ) })
+  );
+}
+function useInlineHint(hint) {
+  const inline = useInlineFacts();
+  if (inline && isValidElement(hint) && hint.type === FieldHint) {
+    const words = hint.props.label;
+    if (words) return words;
+  }
+  return hint;
+}
 function isTextHint(hint) {
   return typeof hint === "string" && hint !== "" || typeof hint === "number";
 }
-const FIELD_CAPTION_CLASS = "mt-1 text-[11px] leading-tight text-[var(--text-muted)]";
-function useFieldHint(hint, describedBy) {
+const FIELD_CAPTION_CLASS = "mt-1 text-caption leading-tight text-[var(--text-muted)]";
+function useFieldHint(hintProp, describedBy) {
+  const hint = useInlineHint(hintProp);
   const captionId = useId();
   const text = isTextHint(hint);
   return {
@@ -57,26 +97,54 @@ function useLockReason(commit, disabledReason) {
 }
 function LockedReason({
   lock,
+  line = false,
   className,
   children
 }) {
+  if (line) {
+    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: lock.reasonId, reason: lock.reason, className, children });
+  }
   return /* @__PURE__ */ jsx(Tooltip, { label: lock.reason, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
     /* @__PURE__ */ jsx("span", { id: lock.reasonId, hidden: true, children: lock.reason })
   ] }) });
 }
+const CompactControlsContext = createContext(false);
+function CompactControls({ children, compact = true }) {
+  return /* @__PURE__ */ jsx(CompactControlsContext.Provider, { value: compact, children });
+}
+function useDisabledReasonLine(display = "auto") {
+  const compact = useContext(CompactControlsContext);
+  const inline = useInlineFacts();
+  if (display === "line") return true;
+  if (display === "tooltip") return false;
+  return inline && !compact;
+}
+const DISABLED_REASON_LINE_CLASS = "mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]";
+function DisabledReasonLine({
+  id,
+  reason,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "disabled-reason", className: cn("inline-flex max-w-full flex-col items-start", className), children: [
+    children,
+    /* @__PURE__ */ jsx("span", { id, className: DISABLED_REASON_LINE_CLASS, children: reason })
+  ] });
+}
 const RequiredStarOnLegend = createContext(false);
 function hasContent(node) {
   return node !== void 0 && node !== null && node !== false && node !== "";
 }
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 function useFieldMessages({
-  hint,
+  hint: hintProp,
   error,
   invalid,
   describedBy,
   ariaInvalid
 }) {
+  const hint = useInlineHint(hintProp);
   const hintId = useId();
   const errorId = useId();
   const textHint = isTextHint(hint);
@@ -133,11 +201,16 @@ function LabelStrip({
   ] });
 }
 export {
+  CompactControls,
+  CompactControlsContext,
+  DISABLED_REASON_LINE_CLASS,
+  DisabledReasonLine,
   EndHintRow,
   FIELD_CAPTION_CLASS,
   FLOATING_LABEL_STATIC,
   FieldBox,
   FieldCaption,
+  FieldHint,
   FieldLabel,
   FieldLabelLine,
   LABEL_IN_ROW,
@@ -149,8 +222,10 @@ export {
   StaticLabelRow,
   hasContent,
   isTextHint,
+  useDisabledReasonLine,
   useFieldHint,
   useFieldMessages,
+  useInlineHint,
   useLockReason
 };
 //# sourceMappingURL=field-parts.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself. Private to the package —\n * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,\n * which ui.tsx re-exports as it always has.\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below.\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    <span {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--text-muted)]\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself, or `undefined` for a hint that is not text. */\n  captionText: string | number | undefined;\n  /** A non-text hint (a FieldHint) for the label line — or, on a field with no label\n   *  line, the end edge outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}.\n */\nexport function useFieldHint(hint: ReactNode, describedBy: string | undefined): FieldHintParts {\n  const captionId = useId();\n  const text = isTextHint(hint);\n  return {\n    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: text ? captionId : undefined,\n    captionText: text ? hint : undefined,\n    labelHint: !text && hasMessage(hint) ? hint : undefined,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row.\n */\nexport const LABEL_IN_ROW = \"static min-w-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasMessage(reason), reasonId };\n}\n\n/**\n * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for\n * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so\n * the Tooltip does not also clone its bubble's id into the description: the hidden copy\n * already describes it, and the same sentence twice would be read on every focus.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  className,\n  children,\n}: {\n  lock: LockReason;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <Tooltip label={lock.reason} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\n/** `undefined`, `null`, `false` and `\"\"` are what a caller's `cond && \"…\"` evaluates to\n *  when there is nothing to say; none of them is content. A numeric `0` is. */\nexport function hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then the error — the standing\n   *  advice before the news, as `useFieldError` in ui.tsx orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a\n   *  caption or there is none. */\n  labelHint: ReactNode;\n}\n\n/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */\nexport function useFieldMessages({\n  hint,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n}): FieldMessages {\n  const hintId = useId();\n  const errorId = useId();\n  const textHint = isTextHint(hint);\n  const hasError = hasContent(error);\n  return {\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy:\n      [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(\" \") || undefined,\n    below:\n      textHint || hasError ? (\n        <>\n          {textHint && (\n            <p id={hintId} className={FIELD_CAPTION_CLASS}>\n              {hint}\n            </p>\n          )}\n          {hasError && (\n            <p id={errorId} className={FIELD_ERROR_CLASS}>\n              {error}\n            </p>\n          )}\n        </>\n      ) : null,\n    labelHint: !textHint && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise.\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      <FieldLabel className=\"static min-w-0 max-w-full\">{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,\n * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than\n * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).\n *\n *  - `\"field\"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,\n *    measured): *\"16px of label strip plus a 26px group is exactly a labelled Input\"*,\n *    so a status group in a row of 42px fields ends where they end. The label's line\n *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback\n *    #117 was about — starts at 19px, below the label's 17.75px. For content with a\n *    border and an inset of its own; ToggleGroup's `labelPlacement=\"strip\"`.\n *  - `\"clear\"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has\n *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the\n *    tile's top edge, so the tile has to start below the whole label line — and so does\n *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,\n *    IconPicker, and FieldStrip's default.\n */\nexport const LABEL_STRIP_PAD = { field: \"pt-4\", clear: \"pt-5\" } as const;\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  pad,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  pad: keyof typeof LABEL_STRIP_PAD;\n  children: ReactNode;\n}) {\n  return (\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD[pad], className)}>\n      <div className=\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\">\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(\"static min-w-0 max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself. Private to the package —\n * not re-exported from the barrel, except `FieldLabel` and `FLOATING_LABEL_STATIC`,\n * which ui.tsx re-exports as it always has.\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports `ui.tsx`: `ui.tsx` imports this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-[var(--text-muted)] peer-disabled:opacity-50\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below.\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    <span {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithoutRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n */\nexport function useInlineHint(hint: ReactNode): ReactNode {\n  const inline = useInlineFacts();\n  if (inline && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-[var(--text-muted)]\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself, or `undefined` for a hint that is not text. */\n  captionText: string | number | undefined;\n  /** A non-text hint (a FieldHint) for the label line — or, on a field with no label\n   *  line, the end edge outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}.\n */\nexport function useFieldHint(hintProp: ReactNode, describedBy: string | undefined): FieldHintParts {\n  const hint = useInlineHint(hintProp);\n  const captionId = useId();\n  const text = isTextHint(hint);\n  return {\n    describedBy: text ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: text ? captionId : undefined,\n    captionText: text ? hint : undefined,\n    labelHint: !text && hasMessage(hint) ? hint : undefined,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row.\n */\nexport const LABEL_IN_ROW = \"static min-w-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: boolean | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasMessage(reason), reasonId };\n}\n\n/**\n * The kit {@link Tooltip} around a locked control, with a `hidden` copy of the reason for\n * the control's `aria-describedby` — Button's anatomy. The control goes in a FRAGMENT so\n * the Tooltip does not also clone its bubble's id into the description: the hidden copy\n * already describes it, and the same sentence twice would be read on every focus.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  line = false,\n  className,\n  children,\n}: {\n  lock: LockReason;\n  /** Draw the reason as a line under the control instead (0.32, §4) — see\n   *  {@link DisabledReasonLine}; the caller decides with {@link useDisabledReasonLine}. */\n  line?: boolean;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (line) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-[var(--text-muted)]\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={DISABLED_REASON_LINE_CLASS}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\n/** `undefined`, `null`, `false` and `\"\"` are what a caller's `cond && \"…\"` evaluates to\n *  when there is nothing to say; none of them is content. A numeric `0` is. */\nexport function hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then the error — the standing\n   *  advice before the news, as `useFieldError` in ui.tsx orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** The hint for the LABEL line (a `FieldHint`), or `undefined` when the hint is a\n   *  caption or there is none. */\n  labelHint: ReactNode;\n}\n\n/** `hint` / `error` / `invalid` resolved the way `Select` resolves them. */\nexport function useFieldMessages({\n  hint: hintProp,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n}: {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n}): FieldMessages {\n  const hint = useInlineHint(hintProp);\n  const hintId = useId();\n  const errorId = useId();\n  const textHint = isTextHint(hint);\n  const hasError = hasContent(error);\n  return {\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy:\n      [describedBy, textHint && hintId, hasError && errorId].filter(Boolean).join(\" \") || undefined,\n    below:\n      textHint || hasError ? (\n        <>\n          {textHint && (\n            <p id={hintId} className={FIELD_CAPTION_CLASS}>\n              {hint}\n            </p>\n          )}\n          {hasError && (\n            <p id={errorId} className={FIELD_ERROR_CLASS}>\n              {error}\n            </p>\n          )}\n        </>\n      ) : null,\n    labelHint: !textHint && hasContent(hint) ? hint : undefined,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in ui.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise.\n    <div className=\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\">\n      <FieldLabel className=\"static min-w-0 max-w-full\">{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is — the values {@link FieldStrip}'s `pad` takes,\n * public since 0.23 (keksdose G8), so the names say what the CONTENT needs rather than\n * which kit group first needed it (until 0.23 they were `toggle` and `tiles`).\n *\n *  - `\"field\"` — 16px. keksdose's `ClearedStatusPicker` (live #288 rework, #431,\n *    measured): *\"16px of label strip plus a 26px group is exactly a labelled Input\"*,\n *    so a status group in a row of 42px fields ends where they end. The label's line\n *    box runs into the group's top hairline, but the ACTIVE fill — the thing feedback\n *    #117 was about — starts at 19px, below the label's 17.75px. For content with a\n *    border and an inset of its own; ToggleGroup's `labelPlacement=\"strip\"`.\n *  - `\"clear\"` — 20px, keksdose's `FlagPicker` and location field (`pt-5`). A tile has\n *    no inset fill: its selection IS its frame, a 2px dark border-and-ring from the\n *    tile's top edge, so the tile has to start below the whole label line — and so does\n *    anything else with no inset: a map, a row of buttons, a line of text. SwatchPicker,\n *    IconPicker, and FieldStrip's default.\n */\nexport const LABEL_STRIP_PAD = { field: \"pt-4\", clear: \"pt-5\" } as const;\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  pad,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  pad: keyof typeof LABEL_STRIP_PAD;\n  children: ReactNode;\n}) {\n  return (\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD[pad], className)}>\n      <div className=\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\">\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(\"static min-w-0 max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-sync.d.ts

@@ -87,7 +87,10 @@ interface FieldSyncIndicatorProps {
     error?: Error | null;
     /** Override any of the five English defaults. */
     labels?: Partial<FieldSyncLabels>;
-    /** Render the label beside the icon instead of only in the tooltip. */
+    /** Render the label beside the icon instead of only in the tooltip. Always on at
+     *  Large and Extra large (0.32, docs/text-size-harmonization.md §4 "No fact only in a
+     *  tooltip"): the reader who asked for bigger type gets the words, not a 14 px glyph
+     *  and a bubble. */
     showLabel?: boolean;
     /** When given, the error state renders a retry button after the icon. */
     onRetry?: () => void;

package/dist/components/field-sync.js

@@ -4,7 +4,9 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { AlertCircle, Check, Loader2, Pencil, PencilLine } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { Tooltip } from "./tooltip.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 const DEFAULT_FIELD_SYNC_LABELS = {
   synced: "Saved",
   edited: "Unsaved changes",
@@ -135,6 +137,8 @@ function FieldSyncIndicator({
   className
 }) {
   const l = useKitLabels("fieldSync", DEFAULT_FIELD_SYNC_LABELS, labels);
+  const large = useLargeText();
+  showLabel = showLabel || large;
   const { color, Icon } = STATE_STYLE[state];
   const text = state === "error" ? error?.message?.trim() ? error.message : l.error : l[state];
   return /* @__PURE__ */ jsxs(
@@ -160,7 +164,10 @@ function FieldSyncIndicator({
           {
             type: "button",
             onClick: onRetry,
-            className: "rounded underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2",
+            className: cn(
+              "rounded underline underline-offset-2 hover:no-underline focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]",
+              FOCUS_RING
+            ),
             style: { color },
             children: l.retry
           }
@@ -240,7 +247,10 @@ function FieldSyncRow({
                 type: "button",
                 onClick: retry,
                 "aria-label": l.retry,
-                className: "pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:outline-2 focus-visible:outline-offset-2",
+                className: cn(
+                  "pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]",
+                  FOCUS_RING
+                ),
                 children: /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true, className: "size-4" })
               }
             ) })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-sync.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AlertCircle, Check, Loader2, Pencil, PencilLine } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * Sync state for a field backed by a database row.\n *\n * The four states a value can be in between the keyboard and the server:\n *\n *   synced   the draft equals what was last persisted\n *   edited   the draft differs and nothing has been sent yet\n *   pending  a save is in flight\n *   error    the last save was rejected; `error` carries why\n *\n * `useFieldSync` is the engine and holds no opinion about markup;\n * `FieldSyncIndicator` is the affordance and holds no state. They are separate\n * because the state is useful without the dot — a form can disable its submit\n * button while any field is `pending`, and a router can block navigation while\n * any field is `edited`.\n */\nexport type FieldSyncState = \"synced\" | \"edited\" | \"pending\" | \"error\";\n\nexport interface FieldSyncLabels {\n  synced: string;\n  edited: string;\n  pending: string;\n  /** Shown when the failure carries no message of its own. */\n  error: string;\n  retry: string;\n}\n\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n\nexport function resolveFieldSyncLabels(labels?: Partial<FieldSyncLabels>): FieldSyncLabels {\n  return labels ? { ...DEFAULT_FIELD_SYNC_LABELS, ...labels } : DEFAULT_FIELD_SYNC_LABELS;\n}\n\nexport interface UseFieldSyncOptions<T> {\n  /** What the database currently holds. Changing it re-seeds a CLEAN field. */\n  value: T;\n  /** Persist `next`. Reject — or throw — to put the field in `error`. */\n  onSave: (next: T) => Promise<void> | void;\n  /**\n   * Quiet period before an edit saves itself, in ms. Default `0`: no auto-save at\n   * all, so `save()` is the only way to persist — called on blur by `FieldSyncRow`,\n   * and on Enter by the caller. Saving after a pause in typing wrote half-finished\n   * values to the database whenever somebody stopped to think; pass a positive\n   * number only for a field where that is genuinely wanted.\n   */\n  debounceMs?: number;\n  /** How to tell two values apart. Defaults to `Object.is`. */\n  equals?: (a: T, b: T) => boolean;\n  /** Called once per rejected save, with whatever `onSave` threw. */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFieldSyncReturn<T> {\n  /** The draft — bind this to the input, not the `value` option. */\n  value: T;\n  setValue: (next: T) => void;\n  state: FieldSyncState;\n  /** Non-null exactly when `state === \"error\"`. */\n  error: Error | null;\n  /** True whenever the draft differs from the last persisted value. */\n  dirty: boolean;\n  /** Persist now, cancelling any pending debounce. A no-op on a clean field. */\n  save: () => void;\n  /** Send the current draft again after a failure. */\n  retry: () => void;\n  /** Throw the draft away and go back to the last persisted value. */\n  reset: () => void;\n}\n\nfunction toError(cause: unknown): Error {\n  if (cause instanceof Error) return cause;\n  // An EMPTY message for a rejection that carried none, not an English one: the\n  // indicator shows `error.message` when there is one and the translated\n  // `fieldSync.error` otherwise, so a fallback message here was an English sentence\n  // that outranked the app's own translation. The original value stays on `cause`\n  // for whoever logs it from `onError`.\n  return new Error(typeof cause === \"string\" ? cause : \"\", { cause });\n}\n\n/**\n * Track one database-backed field: a local draft, a debounced save, and the state\n * of the round trip.\n *\n * Four things this handles that a `useState` + `useEffect` in a page does not:\n *\n *   1. **An edit during a save is never lost.** A save in flight is not cancelled\n *      and not raced — when it settles, the draft is compared again and sent once\n *      more if it moved. Cancelling instead would drop a keystroke that arrived\n *      mid-flight; firing immediately would let two writes land out of order.\n *   2. **The server value is only adopted when the field is clean.** An external\n *      refresh that overwrote what somebody was typing would be a data-loss bug, so\n *      a dirty draft wins and keeps winning until it is saved or reset.\n *   3. **Nothing is set after unmount.** The save resolves into a component that\n *      may be gone — a row scrolled out of a virtualised table, a closed dialog.\n *   4. **`onSave` is read through a ref**, so an inline arrow — which every call\n *      site will pass — does not restart the debounce on every render.\n */\nexport function useFieldSync<T>({\n  value,\n  onSave,\n  debounceMs = 0,\n  equals = Object.is,\n  onError,\n}: UseFieldSyncOptions<T>): UseFieldSyncReturn<T> {\n  const [draft, setDraft] = useState<T>(value);\n  const [state, setState] = useState<FieldSyncState>(\"synced\");\n  const [error, setError] = useState<Error | null>(null);\n\n  // The last value known to be on the server. Not state: it changes together with\n  // `state` inside the save, and a second render for it would be a wasted one.\n  const savedRef = useRef<T>(value);\n  const draftRef = useRef<T>(value);\n  const inFlightRef = useRef(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mountedRef = useRef(true);\n\n  // Latest-ref for the callbacks and comparators, so a caller passing inline\n  // functions (all of them) does not invalidate the timer on every render.\n  const onSaveRef = useRef(onSave);\n  const onErrorRef = useRef(onError);\n  const equalsRef = useRef(equals);\n  useEffect(() => {\n    onSaveRef.current = onSave;\n    onErrorRef.current = onError;\n    equalsRef.current = equals;\n  });\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  // A named inner function so the settle path can start the next round by calling it\n  // again; a `useCallback` cannot refer to its own binding while it is being built.\n  const flush = useCallback(() => {\n    const run = async (): Promise<void> => {\n      if (inFlightRef.current) return; // the settle path below picks the new draft up\n      const next = draftRef.current;\n      if (equalsRef.current(next, savedRef.current)) return;\n\n      inFlightRef.current = true;\n      setState(\"pending\");\n      setError(null);\n      try {\n        await onSaveRef.current(next);\n        savedRef.current = next;\n        inFlightRef.current = false;\n        if (!mountedRef.current) return;\n        // The draft may have moved while this was in the air. Compare against what is\n        // on screen NOW, not against what was sent.\n        if (equalsRef.current(draftRef.current, next)) {\n          setState(\"synced\");\n        } else {\n          setState(\"edited\");\n          void run();\n        }\n      } catch (cause) {\n        inFlightRef.current = false;\n        const err = toError(cause);\n        onErrorRef.current?.(err);\n        if (!mountedRef.current) return;\n        setState(\"error\");\n        setError(err);\n      }\n    };\n    return run();\n  }, []);\n\n  const setValue = useCallback(\n    (next: T) => {\n      draftRef.current = next;\n      setDraft(next);\n      if (timerRef.current) clearTimeout(timerRef.current);\n\n      if (equalsRef.current(next, savedRef.current)) {\n        // Typed back to what the server already has. Nothing to send, and an error\n        // from the previous attempt no longer describes anything.\n        setState(inFlightRef.current ? \"pending\" : \"synced\");\n        setError(null);\n        return;\n      }\n\n      setState(\"edited\");\n      setError(null);\n      if (debounceMs > 0) timerRef.current = setTimeout(() => void flush(), debounceMs);\n    },\n    [debounceMs, flush],\n  );\n\n  const save = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    void flush();\n  }, [flush]);\n\n  const retry = save;\n\n  const reset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    draftRef.current = savedRef.current;\n    setDraft(savedRef.current);\n    setState(inFlightRef.current ? \"pending\" : \"synced\");\n    setError(null);\n  }, []);\n\n  // Anything that is not `synced` has something not yet on the server: `edited` and\n  // `error` obviously, and `pending` too — the write is in the air, not landed.\n  // Derived from state rather than by comparing against `savedRef` during render,\n  // because a ref read here would not re-render when the comparison's answer changes.\n  const dirty = state !== \"synced\";\n\n  // Adopt a new server value ONLY when there is nothing local to lose.\n  useEffect(() => {\n    if (inFlightRef.current) return;\n    if (!equalsRef.current(draftRef.current, savedRef.current)) return; // dirty: keep it\n    if (equalsRef.current(value, savedRef.current)) return; // unchanged\n    savedRef.current = value;\n    draftRef.current = value;\n    setDraft(value);\n    setState(\"synced\");\n    setError(null);\n  }, [value]);\n\n  return { value: draft, setValue, state, error, dirty, save, retry, reset };\n}\n\nconst STATE_STYLE: Record<FieldSyncState, { color: string; Icon: typeof Check }> = {\n  synced: { color: \"var(--status-synced)\", Icon: Check },\n  edited: { color: \"var(--status-edited)\", Icon: Pencil },\n  pending: { color: \"var(--status-pending)\", Icon: Loader2 },\n  error: { color: \"var(--status-error)\", Icon: AlertCircle },\n};\n\nexport interface FieldSyncIndicatorProps {\n  state: FieldSyncState;\n  /** The failure. Its message becomes the tooltip when `state === \"error\"`. */\n  error?: Error | null;\n  /** Override any of the five English defaults. */\n  labels?: Partial<FieldSyncLabels>;\n  /** Render the label beside the icon instead of only in the tooltip. */\n  showLabel?: boolean;\n  /** When given, the error state renders a retry button after the icon. */\n  onRetry?: () => void;\n  className?: string;\n}\n\n/**\n * The affordance for {@link useFieldSync}: a coloured icon, and the reason on hover.\n *\n * **Every state has its own icon, and that is not decoration.** The four colours\n * include the green/red pair, which is the one combination this package's palette\n * otherwise refuses (see the note in `tokens.css`) because red-green colour blindness\n * affects roughly one man in twelve. The icon is what carries the meaning for them,\n * and what carries it into a greyscale print or a screenshot. WCAG 1.4.1 is the same\n * requirement stated formally.\n *\n * The state is also announced: the wrapper is a polite live region, so a screen\n * reader hears \"Saving…\" then \"Saved\" without the user going looking. `error` is\n * assertive instead — a failed write is worth interrupting for.\n */\nexport function FieldSyncIndicator({\n  state,\n  error,\n  labels,\n  showLabel = false,\n  onRetry,\n  className,\n}: FieldSyncIndicatorProps) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const { color, Icon } = STATE_STYLE[state];\n  const text =\n    state === \"error\" ? (error?.message?.trim() ? error.message : l.error) : l[state];\n\n  return (\n    <span\n      // The ICON carries the status colour; the words are `--text-secondary`, because\n      // the amber of `edited` is a graphic colour (3:1), not a text colour (4.5:1).\n      className={cn(\"inline-flex items-center gap-1.5 text-xs text-[var(--text-secondary)]\", className)}\n      // Polite for the three ordinary states so save chatter does not interrupt\n      // typing; assertive for a failure, which the user has to know about now.\n      role={state === \"error\" ? \"alert\" : \"status\"}\n      aria-live={state === \"error\" ? \"assertive\" : \"polite\"}\n    >\n      <Tooltip label={showLabel ? undefined : text} redact={state === \"error\"}>\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Icon\n            aria-hidden\n            style={{ color }}\n            className={cn(\"size-3.5 shrink-0\", state === \"pending\" && \"animate-spin\")}\n          />\n          {/* Always in the DOM, so the live region has something to announce even\n              when the label is visually a tooltip. */}\n          <span className={showLabel ? undefined : \"sr-only\"}>{text}</span>\n        </span>\n      </Tooltip>\n      {state === \"error\" && onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"rounded underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2\"\n          style={{ color }}\n        >\n          {l.retry}\n        </button>\n      )}\n    </span>\n  );\n}\n\n/**\n * The field's own frame, coloured by state — applied from the WRAPPER to whatever\n * native control sits inside it, so {@link FieldSyncRow} works with any of the kit's\n * inputs (and a caller's own) without each one growing a `syncState` prop.\n *\n * Border AND a 1px ring, for the reason {@link FIELD_INVALID} gives: a lone 1px\n * border loses a vertical edge to sub-pixel spread at 125% display scaling. The\n * `:focus` twins are what keep the state visible while the reader is typing —\n * the base field class's `focus:` brand colour is `(0,2,0)` and would otherwise win\n * over a descendant selector exactly when the field is in use.\n *\n * `synced` is green, but {@link FieldSyncRow} paints it only for a moment after a\n * save lands — a form of eight permanently green boxes says nothing the absence of\n * colour does not.\n *\n * Every class is a literal so Tailwind's scanner can see it.\n */\nexport const FIELD_SYNC_FRAME: Record<FieldSyncState, string> = {\n  synced:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-synced)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-synced)] [&_:is(input,select,textarea):focus]:border-[var(--status-synced)] [&_:is(input,select,textarea):focus]:ring-[var(--status-synced)]\",\n  edited:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-edited)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-edited)] [&_:is(input,select,textarea):focus]:border-[var(--status-edited)] [&_:is(input,select,textarea):focus]:ring-[var(--status-edited)]\",\n  pending:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-pending)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-pending)] [&_:is(input,select,textarea):focus]:border-[var(--status-pending)] [&_:is(input,select,textarea):focus]:ring-[var(--status-pending)]\",\n  error:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-error)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-error)] [&_:is(input,select,textarea):focus]:border-[var(--status-error)] [&_:is(input,select,textarea):focus]:ring-[var(--status-error)]\",\n};\n\n/** How long the green \"saved\" frame and check stay after a save lands, in ms. */\nexport const FIELD_SYNC_SAVED_MS = 1500;\n\nexport interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, \"state\" | \"error\" | \"showLabel\"> {\n  sync: UseFieldSyncReturn<T>;\n  children: ReactNode;\n  /** Call `sync.save()` when focus leaves the field. Default true — together with the\n   *  hook's default `debounceMs: 0` this is \"save on blur\": nothing is written while\n   *  the reader is still typing, however long they pause. */\n  saveOnBlur?: boolean;\n  /** How long the saved confirmation shows. Default {@link FIELD_SYNC_SAVED_MS}. */\n  savedMs?: number;\n}\n\n/**\n * A field wearing its sync state — as its FRAME COLOUR and an ICON AT THE END OF THE\n * FIELD, so the field never changes size (a helper line appearing under it moved\n * everything below it on every save):\n *\n *   edited   amber frame, pencil          — changed, not yet saved\n *   pending  blue frame, spinning circle  — for as long as the save is in flight\n *   synced   green frame, check           — for {@link FIELD_SYNC_SAVED_MS} after a\n *                                            save lands, then an ordinary field again\n *   error    red frame, alert mark        — hover or focus the mark for the reason;\n *                                            click it to retry\n *\n * It saves when focus LEAVES the field (`saveOnBlur`), not after a pause in typing: a\n * database write in the middle of a word is a write nobody asked for. Enter in a\n * single-line field is the caller's to wire to `sync.save`.\n *\n * Colour is never the only signal: every state has its own icon, and the state text is\n * always in the DOM as a live region — polite for the ordinary states, assertive for\n * a failure. The input gets end padding for the icon whether or not one is showing,\n * so the text never reflows when the state changes.\n */\nexport function FieldSyncRow<T>({\n  sync,\n  children,\n  className,\n  labels,\n  onRetry,\n  saveOnBlur = true,\n  savedMs = FIELD_SYNC_SAVED_MS,\n}: FieldSyncRowProps<T>) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const { state, error } = sync;\n  const isError = state === \"error\";\n  const text = isError ? (error?.message?.trim() ? error.message : l.error) : l[state];\n  const retry = onRetry ?? sync.retry;\n\n  // The saved confirmation: on only for the moment after a save lands. Keyed on the\n  // TRANSITION pending → synced, so a field that starts synced shows nothing. The\n  // transition is seen while rendering, against the previous state; the effect only\n  // owns the timer that turns it off again.\n  const [previous, setPrevious] = useState(state);\n  const [justSaved, setJustSaved] = useState(false);\n  if (state !== previous) {\n    setPrevious(state);\n    setJustSaved(state === \"synced\" && previous === \"pending\");\n  }\n  useEffect(() => {\n    if (!justSaved) return;\n    const t = setTimeout(() => setJustSaved(false), savedMs);\n    return () => clearTimeout(t);\n  }, [justSaved, savedMs]);\n  const shown: FieldSyncState | null = state === \"synced\" ? (justSaved ? \"synced\" : null) : state;\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction:\n       `onBlur` listens for focus leaving the row's own controls (which are the\n       interactive elements) to save; the wrapper itself is never focused. */\n    <div\n      data-field-sync={state}\n      className={cn(\n        // `relative` for the icon and for the sr-only live region's containing block.\n        \"relative [&_:is(input,select,textarea)]:pe-9\",\n        shown && FIELD_SYNC_FRAME[shown],\n        className,\n      )}\n      onBlur={\n        saveOnBlur\n          ? (e) => {\n              // Focus moving between two controls INSIDE the row is not leaving it.\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync.save();\n            }\n          : undefined\n      }\n    >\n      {children}\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3\">\n        {state === \"edited\" && (\n          <PencilLine aria-hidden className=\"size-4 text-[var(--status-edited)]\" />\n        )}\n        {state === \"pending\" && (\n          <Loader2 aria-hidden className=\"size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none\" />\n        )}\n        {state === \"synced\" && (\n          <Check\n            aria-hidden\n            className={cn(\n              \"size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none\",\n              justSaved ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        )}\n        {isError && (\n          <Tooltip label={text} portal redact>\n            <button\n              type=\"button\"\n              onClick={retry}\n              aria-label={l.retry}\n              className=\"pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:outline-2 focus-visible:outline-offset-2\"\n            >\n              <AlertCircle aria-hidden className=\"size-4\" />\n            </button>\n          </Tooltip>\n        )}\n      </span>\n      <span\n        role={isError ? \"alert\" : \"status\"}\n        aria-live={isError ? \"assertive\" : \"polite\"}\n        className=\"sr-only\"\n      >\n        {shown === null ? \"\" : text}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-sync.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AlertCircle, Check, Loader2, Pencil, PencilLine } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useLargeText } from \"../hooks/use-large-text\";\n\n/**\n * Sync state for a field backed by a database row.\n *\n * The four states a value can be in between the keyboard and the server:\n *\n *   synced   the draft equals what was last persisted\n *   edited   the draft differs and nothing has been sent yet\n *   pending  a save is in flight\n *   error    the last save was rejected; `error` carries why\n *\n * `useFieldSync` is the engine and holds no opinion about markup;\n * `FieldSyncIndicator` is the affordance and holds no state. They are separate\n * because the state is useful without the dot — a form can disable its submit\n * button while any field is `pending`, and a router can block navigation while\n * any field is `edited`.\n */\nexport type FieldSyncState = \"synced\" | \"edited\" | \"pending\" | \"error\";\n\nexport interface FieldSyncLabels {\n  synced: string;\n  edited: string;\n  pending: string;\n  /** Shown when the failure carries no message of its own. */\n  error: string;\n  retry: string;\n}\n\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n\nexport function resolveFieldSyncLabels(labels?: Partial<FieldSyncLabels>): FieldSyncLabels {\n  return labels ? { ...DEFAULT_FIELD_SYNC_LABELS, ...labels } : DEFAULT_FIELD_SYNC_LABELS;\n}\n\nexport interface UseFieldSyncOptions<T> {\n  /** What the database currently holds. Changing it re-seeds a CLEAN field. */\n  value: T;\n  /** Persist `next`. Reject — or throw — to put the field in `error`. */\n  onSave: (next: T) => Promise<void> | void;\n  /**\n   * Quiet period before an edit saves itself, in ms. Default `0`: no auto-save at\n   * all, so `save()` is the only way to persist — called on blur by `FieldSyncRow`,\n   * and on Enter by the caller. Saving after a pause in typing wrote half-finished\n   * values to the database whenever somebody stopped to think; pass a positive\n   * number only for a field where that is genuinely wanted.\n   */\n  debounceMs?: number;\n  /** How to tell two values apart. Defaults to `Object.is`. */\n  equals?: (a: T, b: T) => boolean;\n  /** Called once per rejected save, with whatever `onSave` threw. */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFieldSyncReturn<T> {\n  /** The draft — bind this to the input, not the `value` option. */\n  value: T;\n  setValue: (next: T) => void;\n  state: FieldSyncState;\n  /** Non-null exactly when `state === \"error\"`. */\n  error: Error | null;\n  /** True whenever the draft differs from the last persisted value. */\n  dirty: boolean;\n  /** Persist now, cancelling any pending debounce. A no-op on a clean field. */\n  save: () => void;\n  /** Send the current draft again after a failure. */\n  retry: () => void;\n  /** Throw the draft away and go back to the last persisted value. */\n  reset: () => void;\n}\n\nfunction toError(cause: unknown): Error {\n  if (cause instanceof Error) return cause;\n  // An EMPTY message for a rejection that carried none, not an English one: the\n  // indicator shows `error.message` when there is one and the translated\n  // `fieldSync.error` otherwise, so a fallback message here was an English sentence\n  // that outranked the app's own translation. The original value stays on `cause`\n  // for whoever logs it from `onError`.\n  return new Error(typeof cause === \"string\" ? cause : \"\", { cause });\n}\n\n/**\n * Track one database-backed field: a local draft, a debounced save, and the state\n * of the round trip.\n *\n * Four things this handles that a `useState` + `useEffect` in a page does not:\n *\n *   1. **An edit during a save is never lost.** A save in flight is not cancelled\n *      and not raced — when it settles, the draft is compared again and sent once\n *      more if it moved. Cancelling instead would drop a keystroke that arrived\n *      mid-flight; firing immediately would let two writes land out of order.\n *   2. **The server value is only adopted when the field is clean.** An external\n *      refresh that overwrote what somebody was typing would be a data-loss bug, so\n *      a dirty draft wins and keeps winning until it is saved or reset.\n *   3. **Nothing is set after unmount.** The save resolves into a component that\n *      may be gone — a row scrolled out of a virtualised table, a closed dialog.\n *   4. **`onSave` is read through a ref**, so an inline arrow — which every call\n *      site will pass — does not restart the debounce on every render.\n */\nexport function useFieldSync<T>({\n  value,\n  onSave,\n  debounceMs = 0,\n  equals = Object.is,\n  onError,\n}: UseFieldSyncOptions<T>): UseFieldSyncReturn<T> {\n  const [draft, setDraft] = useState<T>(value);\n  const [state, setState] = useState<FieldSyncState>(\"synced\");\n  const [error, setError] = useState<Error | null>(null);\n\n  // The last value known to be on the server. Not state: it changes together with\n  // `state` inside the save, and a second render for it would be a wasted one.\n  const savedRef = useRef<T>(value);\n  const draftRef = useRef<T>(value);\n  const inFlightRef = useRef(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mountedRef = useRef(true);\n\n  // Latest-ref for the callbacks and comparators, so a caller passing inline\n  // functions (all of them) does not invalidate the timer on every render.\n  const onSaveRef = useRef(onSave);\n  const onErrorRef = useRef(onError);\n  const equalsRef = useRef(equals);\n  useEffect(() => {\n    onSaveRef.current = onSave;\n    onErrorRef.current = onError;\n    equalsRef.current = equals;\n  });\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  // A named inner function so the settle path can start the next round by calling it\n  // again; a `useCallback` cannot refer to its own binding while it is being built.\n  const flush = useCallback(() => {\n    const run = async (): Promise<void> => {\n      if (inFlightRef.current) return; // the settle path below picks the new draft up\n      const next = draftRef.current;\n      if (equalsRef.current(next, savedRef.current)) return;\n\n      inFlightRef.current = true;\n      setState(\"pending\");\n      setError(null);\n      try {\n        await onSaveRef.current(next);\n        savedRef.current = next;\n        inFlightRef.current = false;\n        if (!mountedRef.current) return;\n        // The draft may have moved while this was in the air. Compare against what is\n        // on screen NOW, not against what was sent.\n        if (equalsRef.current(draftRef.current, next)) {\n          setState(\"synced\");\n        } else {\n          setState(\"edited\");\n          void run();\n        }\n      } catch (cause) {\n        inFlightRef.current = false;\n        const err = toError(cause);\n        onErrorRef.current?.(err);\n        if (!mountedRef.current) return;\n        setState(\"error\");\n        setError(err);\n      }\n    };\n    return run();\n  }, []);\n\n  const setValue = useCallback(\n    (next: T) => {\n      draftRef.current = next;\n      setDraft(next);\n      if (timerRef.current) clearTimeout(timerRef.current);\n\n      if (equalsRef.current(next, savedRef.current)) {\n        // Typed back to what the server already has. Nothing to send, and an error\n        // from the previous attempt no longer describes anything.\n        setState(inFlightRef.current ? \"pending\" : \"synced\");\n        setError(null);\n        return;\n      }\n\n      setState(\"edited\");\n      setError(null);\n      if (debounceMs > 0) timerRef.current = setTimeout(() => void flush(), debounceMs);\n    },\n    [debounceMs, flush],\n  );\n\n  const save = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    void flush();\n  }, [flush]);\n\n  const retry = save;\n\n  const reset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    draftRef.current = savedRef.current;\n    setDraft(savedRef.current);\n    setState(inFlightRef.current ? \"pending\" : \"synced\");\n    setError(null);\n  }, []);\n\n  // Anything that is not `synced` has something not yet on the server: `edited` and\n  // `error` obviously, and `pending` too — the write is in the air, not landed.\n  // Derived from state rather than by comparing against `savedRef` during render,\n  // because a ref read here would not re-render when the comparison's answer changes.\n  const dirty = state !== \"synced\";\n\n  // Adopt a new server value ONLY when there is nothing local to lose.\n  useEffect(() => {\n    if (inFlightRef.current) return;\n    if (!equalsRef.current(draftRef.current, savedRef.current)) return; // dirty: keep it\n    if (equalsRef.current(value, savedRef.current)) return; // unchanged\n    savedRef.current = value;\n    draftRef.current = value;\n    setDraft(value);\n    setState(\"synced\");\n    setError(null);\n  }, [value]);\n\n  return { value: draft, setValue, state, error, dirty, save, retry, reset };\n}\n\nconst STATE_STYLE: Record<FieldSyncState, { color: string; Icon: typeof Check }> = {\n  synced: { color: \"var(--status-synced)\", Icon: Check },\n  edited: { color: \"var(--status-edited)\", Icon: Pencil },\n  pending: { color: \"var(--status-pending)\", Icon: Loader2 },\n  error: { color: \"var(--status-error)\", Icon: AlertCircle },\n};\n\nexport interface FieldSyncIndicatorProps {\n  state: FieldSyncState;\n  /** The failure. Its message becomes the tooltip when `state === \"error\"`. */\n  error?: Error | null;\n  /** Override any of the five English defaults. */\n  labels?: Partial<FieldSyncLabels>;\n  /** Render the label beside the icon instead of only in the tooltip. Always on at\n   *  Large and Extra large (0.32, docs/text-size-harmonization.md §4 \"No fact only in a\n   *  tooltip\"): the reader who asked for bigger type gets the words, not a 14 px glyph\n   *  and a bubble. */\n  showLabel?: boolean;\n  /** When given, the error state renders a retry button after the icon. */\n  onRetry?: () => void;\n  className?: string;\n}\n\n/**\n * The affordance for {@link useFieldSync}: a coloured icon, and the reason on hover.\n *\n * **Every state has its own icon, and that is not decoration.** The four colours\n * include the green/red pair, which is the one combination this package's palette\n * otherwise refuses (see the note in `tokens.css`) because red-green colour blindness\n * affects roughly one man in twelve. The icon is what carries the meaning for them,\n * and what carries it into a greyscale print or a screenshot. WCAG 1.4.1 is the same\n * requirement stated formally.\n *\n * The state is also announced: the wrapper is a polite live region, so a screen\n * reader hears \"Saving…\" then \"Saved\" without the user going looking. `error` is\n * assertive instead — a failed write is worth interrupting for.\n */\nexport function FieldSyncIndicator({\n  state,\n  error,\n  labels,\n  showLabel = false,\n  onRetry,\n  className,\n}: FieldSyncIndicatorProps) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const large = useLargeText();\n  showLabel = showLabel || large;\n  const { color, Icon } = STATE_STYLE[state];\n  const text =\n    state === \"error\" ? (error?.message?.trim() ? error.message : l.error) : l[state];\n\n  return (\n    <span\n      // The ICON carries the status colour; the words are `--text-secondary`, because\n      // the amber of `edited` is a graphic colour (3:1), not a text colour (4.5:1).\n      className={cn(\"inline-flex items-center gap-1.5 text-xs text-[var(--text-secondary)]\", className)}\n      // Polite for the three ordinary states so save chatter does not interrupt\n      // typing; assertive for a failure, which the user has to know about now.\n      role={state === \"error\" ? \"alert\" : \"status\"}\n      aria-live={state === \"error\" ? \"assertive\" : \"polite\"}\n    >\n      <Tooltip label={showLabel ? undefined : text} redact={state === \"error\"}>\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Icon\n            aria-hidden\n            style={{ color }}\n            className={cn(\"size-3.5 shrink-0\", state === \"pending\" && \"animate-spin\")}\n          />\n          {/* Always in the DOM, so the live region has something to announce even\n              when the label is visually a tooltip. */}\n          <span className={showLabel ? undefined : \"sr-only\"}>{text}</span>\n        </span>\n      </Tooltip>\n      {state === \"error\" && onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          // The kit's focus frame (0.32, §5), stood off the word.\n          className={cn(\n            \"rounded underline underline-offset-2 hover:no-underline focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]\",\n            FOCUS_RING,\n          )}\n          style={{ color }}\n        >\n          {l.retry}\n        </button>\n      )}\n    </span>\n  );\n}\n\n/**\n * The field's own frame, coloured by state — applied from the WRAPPER to whatever\n * native control sits inside it, so {@link FieldSyncRow} works with any of the kit's\n * inputs (and a caller's own) without each one growing a `syncState` prop.\n *\n * Border AND a 1px ring, for the reason {@link FIELD_INVALID} gives: a lone 1px\n * border loses a vertical edge to sub-pixel spread at 125% display scaling. The\n * `:focus` twins are what keep the state visible while the reader is typing —\n * the base field class's `focus:` brand colour is `(0,2,0)` and would otherwise win\n * over a descendant selector exactly when the field is in use.\n *\n * `synced` is green, but {@link FieldSyncRow} paints it only for a moment after a\n * save lands — a form of eight permanently green boxes says nothing the absence of\n * colour does not.\n *\n * Every class is a literal so Tailwind's scanner can see it.\n */\nexport const FIELD_SYNC_FRAME: Record<FieldSyncState, string> = {\n  synced:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-synced)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-synced)] [&_:is(input,select,textarea):focus]:border-[var(--status-synced)] [&_:is(input,select,textarea):focus]:ring-[var(--status-synced)]\",\n  edited:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-edited)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-edited)] [&_:is(input,select,textarea):focus]:border-[var(--status-edited)] [&_:is(input,select,textarea):focus]:ring-[var(--status-edited)]\",\n  pending:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-pending)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-pending)] [&_:is(input,select,textarea):focus]:border-[var(--status-pending)] [&_:is(input,select,textarea):focus]:ring-[var(--status-pending)]\",\n  error:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-error)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-error)] [&_:is(input,select,textarea):focus]:border-[var(--status-error)] [&_:is(input,select,textarea):focus]:ring-[var(--status-error)]\",\n};\n\n/** How long the green \"saved\" frame and check stay after a save lands, in ms. */\nexport const FIELD_SYNC_SAVED_MS = 1500;\n\nexport interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, \"state\" | \"error\" | \"showLabel\"> {\n  sync: UseFieldSyncReturn<T>;\n  children: ReactNode;\n  /** Call `sync.save()` when focus leaves the field. Default true — together with the\n   *  hook's default `debounceMs: 0` this is \"save on blur\": nothing is written while\n   *  the reader is still typing, however long they pause. */\n  saveOnBlur?: boolean;\n  /** How long the saved confirmation shows. Default {@link FIELD_SYNC_SAVED_MS}. */\n  savedMs?: number;\n}\n\n/**\n * A field wearing its sync state — as its FRAME COLOUR and an ICON AT THE END OF THE\n * FIELD, so the field never changes size (a helper line appearing under it moved\n * everything below it on every save):\n *\n *   edited   amber frame, pencil          — changed, not yet saved\n *   pending  blue frame, spinning circle  — for as long as the save is in flight\n *   synced   green frame, check           — for {@link FIELD_SYNC_SAVED_MS} after a\n *                                            save lands, then an ordinary field again\n *   error    red frame, alert mark        — hover or focus the mark for the reason;\n *                                            click it to retry\n *\n * It saves when focus LEAVES the field (`saveOnBlur`), not after a pause in typing: a\n * database write in the middle of a word is a write nobody asked for. Enter in a\n * single-line field is the caller's to wire to `sync.save`.\n *\n * Colour is never the only signal: every state has its own icon, and the state text is\n * always in the DOM as a live region — polite for the ordinary states, assertive for\n * a failure. The input gets end padding for the icon whether or not one is showing,\n * so the text never reflows when the state changes.\n */\nexport function FieldSyncRow<T>({\n  sync,\n  children,\n  className,\n  labels,\n  onRetry,\n  saveOnBlur = true,\n  savedMs = FIELD_SYNC_SAVED_MS,\n}: FieldSyncRowProps<T>) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const { state, error } = sync;\n  const isError = state === \"error\";\n  const text = isError ? (error?.message?.trim() ? error.message : l.error) : l[state];\n  const retry = onRetry ?? sync.retry;\n\n  // The saved confirmation: on only for the moment after a save lands. Keyed on the\n  // TRANSITION pending → synced, so a field that starts synced shows nothing. The\n  // transition is seen while rendering, against the previous state; the effect only\n  // owns the timer that turns it off again.\n  const [previous, setPrevious] = useState(state);\n  const [justSaved, setJustSaved] = useState(false);\n  if (state !== previous) {\n    setPrevious(state);\n    setJustSaved(state === \"synced\" && previous === \"pending\");\n  }\n  useEffect(() => {\n    if (!justSaved) return;\n    const t = setTimeout(() => setJustSaved(false), savedMs);\n    return () => clearTimeout(t);\n  }, [justSaved, savedMs]);\n  const shown: FieldSyncState | null = state === \"synced\" ? (justSaved ? \"synced\" : null) : state;\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction:\n       `onBlur` listens for focus leaving the row's own controls (which are the\n       interactive elements) to save; the wrapper itself is never focused. */\n    <div\n      data-field-sync={state}\n      className={cn(\n        // `relative` for the icon and for the sr-only live region's containing block.\n        \"relative [&_:is(input,select,textarea)]:pe-9\",\n        shown && FIELD_SYNC_FRAME[shown],\n        className,\n      )}\n      onBlur={\n        saveOnBlur\n          ? (e) => {\n              // Focus moving between two controls INSIDE the row is not leaving it.\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync.save();\n            }\n          : undefined\n      }\n    >\n      {children}\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3\">\n        {state === \"edited\" && (\n          <PencilLine aria-hidden className=\"size-4 text-[var(--status-edited)]\" />\n        )}\n        {state === \"pending\" && (\n          <Loader2 aria-hidden className=\"size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none\" />\n        )}\n        {state === \"synced\" && (\n          <Check\n            aria-hidden\n            className={cn(\n              \"size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none\",\n              justSaved ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        )}\n        {isError && (\n          <Tooltip label={text} portal redact>\n            <button\n              type=\"button\"\n              onClick={retry}\n              aria-label={l.retry}\n              className={cn(\n                \"pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)]\",\n                FOCUS_RING,\n              )}\n            >\n              <AlertCircle aria-hidden className=\"size-4\" />\n            </button>\n          </Tooltip>\n        )}\n      </span>\n      <span\n        role={isError ? \"alert\" : \"status\"}\n        aria-live={isError ? \"assertive\" : \"polite\"}\n        className=\"sr-only\"\n      >\n        {shown === null ? \"\" : text}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}