@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/entity-combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\n\nexport type { ComboOption } from \"./combobox-core\";\n\nexport interface EntityComboboxProps<V extends string | number> {\n  /** Selected id, or null/undefined when nothing is selected. */\n  value: V | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `null`. */\n  onChange: (value: V | null) => void;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes.\n   *  Stale responses are ignored. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  className?: string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder = \"Search\",\n  emptyLabel = \"No results\",\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n}: EntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  const { results, resolve, setOpen } = core;\n\n  const selectedOption = value == null ? null : resolve(value);\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value != null && !disabled);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n\n  const choose = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    onChange(o.value);\n    setOpen(false);\n  };\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        aria-label={\n          typeof label === \"string\" ? `${label}: ${triggerText}` : undefined\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span className=\"flex min-w-0 items-center gap-2\">\n          {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n          <span\n            className={cn(\n              \"truncate\",\n              // A chosen value is the field's VALUE, so it is set in the same ink an\n              // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n              // than restated (Keksdose dev#477). It used to be one notch lighter\n              // than the typeahead fields beside it, which is visible when a picker\n              // and a text field share a form row. Nothing selected keeps the\n              // placeholder grey, which every field here agrees on.\n              !selectedOption && \"text-slate-400 dark:text-slate-500\",\n            )}\n          >\n            {selectedOption?.label ?? placeholder ?? \"\"}\n          </span>\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={clearLabel ?? \"Clear\"}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange(null);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={searchPlaceholder}\n        emptyLabel={emptyLabel}\n        closeLabel={closeLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          setOpen(false);\n        }}\n        createContent={createLabel ? createLabel(q) : `Create “${q}”`}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAuF8B,cAuBtB,YAvBsB;AAtF9B,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,cAAc,YAAY,eAAe,oBAAoB,qBAAqB;AAC3F,SAAS,eAAe,uBAAyC;AA6C1D,SAAS,eAA0C;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,OAAO,gBAAmB,EAAE,SAAS,aAAa,QAAQ,CAAC;AACjE,QAAM,EAAE,SAAS,SAAS,QAAQ,IAAI;AAEtC,QAAM,iBAAiB,SAAS,OAAO,OAAO,QAAQ,KAAK;AAC3D,QAAM,IAAI,KAAK,MAAM,KAAK;AAC1B,QAAM,aACJ,QAAQ,QAAQ,KAAK,EAAE,SAAS,KAAK,CAAC,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,YAAY,MAAM,EAAE,YAAY,CAAC;AACrG,QAAM,YAAY,QAAQ,aAAa,SAAS,QAAQ,CAAC,QAAQ;AAEjE,QAAM,cAAc,gBAAgB,SAAS,eAAe;AAE5D,QAAM,SAAS,CAAC,MAAsB;AACpC,SAAK,SAAS,QAAQ,IAAI,EAAE,OAAO,CAAC;AACpC,aAAS,EAAE,KAAK;AAChB,YAAQ,KAAK;AAAA,EACf;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACrC;AAAA,cAAU,UAAa,oBAAC,cAAY,iBAAM;AAAA,IAC3C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QAML,cACE,OAAO,UAAU,WAAW,GAAG,KAAK,KAAK,WAAW,KAAK;AAAA,QAE3D;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,SAAS,MAAM,CAAC,YAAY,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAC7C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,UAAU,UAAa;AAAA,UACvB,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QAEA;AAAA,+BAAC,UAAK,WAAU,mCACb;AAAA,4BAAgB,QAAQ,oBAAC,UAAK,WAAU,YAAY,yBAAe,MAAK;AAAA,YACzE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOA,CAAC,kBAAkB;AAAA,gBACrB;AAAA,gBAEC,0BAAgB,SAAS,eAAe;AAAA;AAAA,YAC3C;AAAA,aACF;AAAA,UACC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,cAAY,cAAc;AAAA,cAC1B,SAAS,CAAC,MAAM;AACd,kBAAE,gBAAgB;AAClB,yBAAS,IAAI;AAAA,cACf;AAAA,cACA,WAAU;AAAA,cAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,UACxB,IAEA,oBAAC,gBAAa;AAAA;AAAA;AAAA,IAElB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAGA,YAAY,SAAS;AAAA,QACrB;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,CAAC,MAAM,MAAM;AAAA,QACzB,UAAU;AAAA,QACV;AAAA,QACA,UAAU,MAAM;AACd,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,eAAe,cAAc,YAAY,CAAC,IAAI,gBAAW,CAAC;AAAA;AAAA,IAC5D;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/entity-combobox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from \"./ui\";\nimport { ComboboxPanel, useComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\nexport type { ComboOption } from \"./combobox-core\";\n\n/** `onChange` is the kit's — \"a selection was made\", carrying values — rather\n *  than the div's form event, so the DOM's spelling of it is omitted. */\nexport interface EntityComboboxProps<V extends string | number>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Selected id, or null/undefined when nothing is selected. */\n  value: V | null | undefined;\n  /** Selecting an option emits its value; the clear button emits `null`. */\n  onChange: (value: V | null) => void;\n  /** Already-loaded options (client-side filtered). Also used to resolve the\n   *  trigger label for the current `value`. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and called on open + as the query changes.\n   *  Stale responses are ignored. When set, `options` is used only for label\n   *  resolution, not as the result list. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag (OR-ed with the internal async state). */\n  loading?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyLabel?: string;\n  clearable?: boolean;\n  clearLabel?: string;\n  /** The phone sheet's close button. Its own prop rather than a reuse of\n   *  `clearLabel`: \"clear the selection\" and \"close this screen\" are different\n   *  actions, and on a full-screen sheet the close button is the only way out —\n   *  so it is the one control here that MUST be in the reader's language. */\n  closeLabel?: string;\n  disabled?: boolean;\n  /** When set, a \"create\" row appears for a non-empty query with no exact match. */\n  onCreate?: (query: string) => void;\n  createLabel?: (query: string) => string;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n}\n\n/**\n * An id-keyed, searchable entity picker: a field-styled trigger showing the\n * selected item's label, and a portalled dropdown of `{label, sublabel, icon}`\n * options — loaded up front via `options` or lazily via `loadOptions`. Built on\n * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking\n * several entities use {@link MultiEntityCombobox}.\n */\nexport function EntityCombobox<V extends string | number>({\n  value,\n  onChange,\n  options,\n  loadOptions,\n  loading,\n  label,\n  placeholder,\n  searchPlaceholder,\n  emptyLabel,\n  clearable,\n  clearLabel,\n  closeLabel,\n  disabled,\n  onCreate,\n  createLabel,\n  className,\n  invalid,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: EntityComboboxProps<V>) {\n  const core = useComboboxCore<V>({ options, loadOptions, loading });\n  // The props are the per-instance overrides, the provider the app-wide ones; a\n  // prop left `undefined` falls through to the provider rather than masking it.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    search: searchPlaceholder,\n    noResults: emptyLabel,\n    clear: clearLabel,\n    create: createLabel,\n  });\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const { open, results, resolve, setOpen } = core;\n  // One id per instance, generated here rather than in the core: `aria-controls` on\n  // the trigger has to name the list while the list is still closed, so the id\n  // belongs to whoever renders both ends of it.\n  const listboxId = useId();\n\n  const selectedOption = value == null ? null : resolve(value);\n  const q = core.query.trim();\n  const showCreate =\n    Boolean(onCreate) && q.length > 0 && !results.some((o) => o.label.toLowerCase() === q.toLowerCase());\n  const showClear = Boolean(clearable && value != null && !disabled);\n  /** What the closed control is showing — the second half of its accessible name. */\n  const triggerText = selectedOption?.label ?? placeholder ?? \"\";\n\n  const choose = (o: ComboOption<V>) => {\n    core.cacheRef.current.set(o.value, o);\n    onChange(o.value);\n    // Back to the trigger, not to <body>: the panel that held focus is about to\n    // unmount, and a keyboard user who just answered this field should be standing\n    // on it, ready to Tab to the next one.\n    core.closeToTrigger();\n  };\n\n  return (\n    // `rest` dresses the wrapper, which has no role; the accessible NAME goes on\n    // the trigger, which has one. Spread FIRST so the trigger's ARIA and the\n    // handlers that open the panel cannot be clobbered from outside.\n    <div {...rest} className={cn(\"relative\", className)}>\n      {label !== undefined && <FieldLabel>{label}</FieldLabel>}\n      <button\n        ref={core.triggerRef}\n        type=\"button\"\n        // A combobox, not a button. The distinction is not pedantry: this control\n        // carried `aria-invalid`, which `button` does not support, so a required\n        // field left empty painted a rose border and told a reader nothing at all —\n        // and ESLint flagged it as exactly that (`role-supports-aria-props`). The\n        // fix the audit asked for is the role that describes what this IS: a closed\n        // choice that expands into the list named below. `combobox` supports\n        // `aria-invalid`, so the border and the announcement finally agree.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-haspopup=\"listbox\"\n        // The label is a floating <span>, not a <label for>, so without this the\n        // trigger's accessible name is whatever value happens to be selected —\n        // \"Checking\" with nothing saying it is the account. The label AND the\n        // value, because `aria-label` replaces the content rather than adding to\n        // it, and a control that announces only its name has lost the answer.\n        // A caller's own name wins over the composition: two fields labelled\n        // \"Account\" on a transfer form are the from and the to, and only the\n        // caller knows which is which.\n        aria-label={\n          ariaLabel ??\n          (typeof label === \"string\" ? common.fieldValue(label, triggerText) : undefined)\n        }\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        onClick={() => !disabled && setOpen((o) => !o)}\n        // Down/Up opens the list from the closed trigger, per the APG. Enter and\n        // Space already do it through the button's own click.\n        onKeyDown={(e) => {\n          if (disabled) return;\n          if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n            e.preventDefault();\n            setOpen(true);\n          }\n        }}\n        className={cn(\n          FIELD_TRIGGER,\n          \"pr-9\",\n          label !== undefined && FIELD_FLOATING_PAD,\n          disabled && \"cursor-not-allowed opacity-50\",\n          invalid && FIELD_INVALID,\n        )}\n      >\n        <span className=\"flex min-w-0 items-center gap-2\">\n          {selectedOption?.icon && <span className=\"shrink-0\">{selectedOption.icon}</span>}\n          <span\n            className={cn(\n              \"truncate\",\n              // A chosen value is the field's VALUE, so it is set in the same ink an\n              // <input>'s value is — FIELD_BASE's own text colour, inherited rather\n              // than restated (Keksdose dev#477). It used to be one notch lighter\n              // than the typeahead fields beside it, which is visible when a picker\n              // and a text field share a form row. Nothing selected keeps the\n              // placeholder tone (`--text-placeholder`), which every field here\n              // agrees on.\n              !selectedOption && \"text-[var(--text-placeholder)]\",\n            )}\n          >\n            {selectedOption?.label ?? placeholder ?? \"\"}\n          </span>\n        </span>\n        {showClear ? (\n          <span\n            role=\"button\"\n            tabIndex={-1}\n            aria-label={labels.clear}\n            onClick={(e) => {\n              e.stopPropagation();\n              onChange(null);\n            }}\n            className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-4\" />\n          </span>\n        ) : (\n          <FieldChevron />\n        )}\n      </button>\n      <ComboboxPanel\n        core={core}\n        listboxId={listboxId}\n        // On a phone the panel becomes a full-screen sheet, which needs the field's\n        // own label to say what it is asking for (live #200).\n        sheetTitle={label ?? placeholder}\n        searchPlaceholder={labels.search}\n        emptyLabel={labels.noResults}\n        closeLabel={closeLabel}\n        isSelected={(v) => v === value}\n        onChoose={choose}\n        showCreate={showCreate}\n        onCreate={() => {\n          onCreate?.(q);\n          core.closeToTrigger();\n        }}\n        createContent={labels.create(q)}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/facing-pair.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties } from 'react';
+import { SeriesChartAxis } from './series-chart.js';
+import './chart-zoom.js';
+import 'recharts';
+import './series-chart-labels.js';
+
+/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
+type FacingSide = "left" | "right";
+/** The two sides, in the order the columns stand. */
+declare const FACING_SIDES: readonly FacingSide[];
+/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title
+ *  is drawn in — whether or not this chart is the one that spends it. */
+declare function facingBand(tickWidth?: number): number;
+/**
+ * The y axis of one chart of a facing pair.
+ *
+ * The left one carries the row's quantity and the ticks' own width; the right one has
+ * no title, stands on the right and reserves the whole band, so the two plots come out
+ * the same width. Both may be pinned to one `domain` — whether they are is a statement
+ * about the measurement, so it is the caller's.
+ */
+declare function facingAxes({ side, title, format, tickWidth, domain, color, }: {
+    side: FacingSide;
+    /** The row's quantity, with its unit. Drawn on the left chart only. */
+    title: string;
+    format?: (value: number) => string;
+    tickWidth?: number;
+    domain?: [number, number];
+    color?: string;
+}): SeriesChartAxis[];
+/** What a column heading is padded by to sit over the PLOT rather than the column: the
+ *  axis band, on the side that column's axis stands on. Physical padding on purpose —
+ *  the chart under it does not flip in RTL, so neither may the heading's offset. */
+declare function facingHeadingPad(side: FacingSide, tickWidth?: number): Pick<CSSProperties, "paddingLeft" | "paddingRight">;
+
+export { FACING_SIDES, type FacingSide, facingAxes, facingBand, facingHeadingPad };

package/dist/components/facing-pair.js

@@ -0,0 +1,40 @@
+"use client";
+import { DEFAULT_Y_AXIS } from "./chart-zoom.js";
+import { AXIS_TICK_WIDTH, axisBandWidth } from "./series-chart.js";
+const FACING_SIDES = ["left", "right"];
+function facingBand(tickWidth = AXIS_TICK_WIDTH) {
+  return axisBandWidth(tickWidth, true);
+}
+function facingAxes({
+  side,
+  title,
+  format,
+  tickWidth = AXIS_TICK_WIDTH,
+  domain,
+  color
+}) {
+  if (side === "right") {
+    return [
+      {
+        id: DEFAULT_Y_AXIS,
+        orientation: "right",
+        width: facingBand(tickWidth),
+        title: "",
+        format,
+        domain,
+        color
+      }
+    ];
+  }
+  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];
+}
+function facingHeadingPad(side, tickWidth = AXIS_TICK_WIDTH) {
+  return side === "left" ? { paddingLeft: facingBand(tickWidth) } : { paddingRight: facingBand(tickWidth) };
+}
+export {
+  FACING_SIDES,
+  facingAxes,
+  facingBand,
+  facingHeadingPad
+};
+//# sourceMappingURL=facing-pair.js.map

package/dist/components/facing-pair.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/facing-pair.ts"],"sourcesContent":["// Two series charts side by side that are MIRROR IMAGES of each other — the two sides\n// of a symmetric system, read against each other — and the arithmetic that keeps their\n// plots the same width. Lifted out of lenkbank, where four hand-assembled copies of\n// these rules had already drifted apart.\n//\n// The rules:\n//  * The ticks stand on the OUTSIDE: the left chart's on its left, the right chart's on\n//    its right. The two plots meet in the middle with nothing between them, and neither\n//    column of numbers stands between a picture and the one it is compared with.\n//  * The quantity is named ONCE, on the left chart; the right title would be the same\n//    words twice.\n//  * The untitled right axis still RESERVES the title's strip. Reserve only what its\n//    ticks need and its plot comes out `AXIS_TITLE_STRIP` px wider than its neighbour's\n//    — inside one shared x window, the same abscissa then lands on different pixels.\n//  * A heading sits over the PLOT, not over the column, padded by the axis band on the\n//    side that column's axis stands on.\n//\n// Only the geometry is here. The grid the pair stands in — column widths, where the\n// legend goes, the chart height — is a screen's layout, and stays with the screen.\nimport type { CSSProperties } from \"react\";\nimport { DEFAULT_Y_AXIS } from \"./chart-zoom\";\nimport { AXIS_TICK_WIDTH, axisBandWidth, type SeriesChartAxis } from \"./series-chart\";\n\n/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */\nexport type FacingSide = \"left\" | \"right\";\n\n/** The two sides, in the order the columns stand. */\nexport const FACING_SIDES: readonly FacingSide[] = [\"left\", \"right\"];\n\n/** The whole band a facing y axis occupies: its ticks, and the strip the rotated title\n *  is drawn in — whether or not this chart is the one that spends it. */\nexport function facingBand(tickWidth: number = AXIS_TICK_WIDTH): number {\n  return axisBandWidth(tickWidth, true);\n}\n\n/**\n * The y axis of one chart of a facing pair.\n *\n * The left one carries the row's quantity and the ticks' own width; the right one has\n * no title, stands on the right and reserves the whole band, so the two plots come out\n * the same width. Both may be pinned to one `domain` — whether they are is a statement\n * about the measurement, so it is the caller's.\n */\nexport function facingAxes({\n  side,\n  title,\n  format,\n  tickWidth = AXIS_TICK_WIDTH,\n  domain,\n  color,\n}: {\n  side: FacingSide;\n  /** The row's quantity, with its unit. Drawn on the left chart only. */\n  title: string;\n  format?: (value: number) => string;\n  tickWidth?: number;\n  domain?: [number, number];\n  color?: string;\n}): SeriesChartAxis[] {\n  if (side === \"right\") {\n    return [\n      {\n        id: DEFAULT_Y_AXIS,\n        orientation: \"right\",\n        width: facingBand(tickWidth),\n        title: \"\",\n        format,\n        domain,\n        color,\n      },\n    ];\n  }\n  return [{ id: DEFAULT_Y_AXIS, width: tickWidth, title, format, domain, color }];\n}\n\n/** What a column heading is padded by to sit over the PLOT rather than the column: the\n *  axis band, on the side that column's axis stands on. Physical padding on purpose —\n *  the chart under it does not flip in RTL, so neither may the heading's offset. */\nexport function facingHeadingPad(\n  side: FacingSide,\n  tickWidth: number = AXIS_TICK_WIDTH,\n): Pick<CSSProperties, \"paddingLeft\" | \"paddingRight\"> {\n  return side === \"left\"\n    ? { paddingLeft: facingBand(tickWidth) }\n    : { paddingRight: facingBand(tickWidth) };\n}\n"],"mappings":";AAoBA,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,qBAA2C;AAM9D,MAAM,eAAsC,CAAC,QAAQ,OAAO;AAI5D,SAAS,WAAW,YAAoB,iBAAyB;AACtE,SAAO,cAAc,WAAW,IAAI;AACtC;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAQsB;AACpB,MAAI,SAAS,SAAS;AACpB,WAAO;AAAA,MACL;AAAA,QACE,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,OAAO,WAAW,SAAS;AAAA,QAC3B,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO,CAAC,EAAE,IAAI,gBAAgB,OAAO,WAAW,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAChF;AAKO,SAAS,iBACd,MACA,YAAoB,iBACiC;AACrD,SAAO,SAAS,SACZ,EAAE,aAAa,WAAW,SAAS,EAAE,IACrC,EAAE,cAAc,WAAW,SAAS,EAAE;AAC5C;","names":[]}

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

@@ -0,0 +1,164 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Sync state for a field backed by a database row.
+ *
+ * The four states a value can be in between the keyboard and the server:
+ *
+ *   synced   the draft equals what was last persisted
+ *   edited   the draft differs and nothing has been sent yet
+ *   pending  a save is in flight
+ *   error    the last save was rejected; `error` carries why
+ *
+ * `useFieldSync` is the engine and holds no opinion about markup;
+ * `FieldSyncIndicator` is the affordance and holds no state. They are separate
+ * because the state is useful without the dot — a form can disable its submit
+ * button while any field is `pending`, and a router can block navigation while
+ * any field is `edited`.
+ */
+type FieldSyncState = "synced" | "edited" | "pending" | "error";
+interface FieldSyncLabels {
+    synced: string;
+    edited: string;
+    pending: string;
+    /** Shown when the failure carries no message of its own. */
+    error: string;
+    retry: string;
+}
+declare const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels;
+declare function resolveFieldSyncLabels(labels?: Partial<FieldSyncLabels>): FieldSyncLabels;
+interface UseFieldSyncOptions<T> {
+    /** What the database currently holds. Changing it re-seeds a CLEAN field. */
+    value: T;
+    /** Persist `next`. Reject — or throw — to put the field in `error`. */
+    onSave: (next: T) => Promise<void> | void;
+    /**
+     * Quiet period before an edit saves itself, in ms. Default `0`: no auto-save at
+     * all, so `save()` is the only way to persist — called on blur by `FieldSyncRow`,
+     * and on Enter by the caller. Saving after a pause in typing wrote half-finished
+     * values to the database whenever somebody stopped to think; pass a positive
+     * number only for a field where that is genuinely wanted.
+     */
+    debounceMs?: number;
+    /** How to tell two values apart. Defaults to `Object.is`. */
+    equals?: (a: T, b: T) => boolean;
+    /** Called once per rejected save, with whatever `onSave` threw. */
+    onError?: (error: Error) => void;
+}
+interface UseFieldSyncReturn<T> {
+    /** The draft — bind this to the input, not the `value` option. */
+    value: T;
+    setValue: (next: T) => void;
+    state: FieldSyncState;
+    /** Non-null exactly when `state === "error"`. */
+    error: Error | null;
+    /** True whenever the draft differs from the last persisted value. */
+    dirty: boolean;
+    /** Persist now, cancelling any pending debounce. A no-op on a clean field. */
+    save: () => void;
+    /** Send the current draft again after a failure. */
+    retry: () => void;
+    /** Throw the draft away and go back to the last persisted value. */
+    reset: () => void;
+}
+/**
+ * Track one database-backed field: a local draft, a debounced save, and the state
+ * of the round trip.
+ *
+ * Four things this handles that a `useState` + `useEffect` in a page does not:
+ *
+ *   1. **An edit during a save is never lost.** A save in flight is not cancelled
+ *      and not raced — when it settles, the draft is compared again and sent once
+ *      more if it moved. Cancelling instead would drop a keystroke that arrived
+ *      mid-flight; firing immediately would let two writes land out of order.
+ *   2. **The server value is only adopted when the field is clean.** An external
+ *      refresh that overwrote what somebody was typing would be a data-loss bug, so
+ *      a dirty draft wins and keeps winning until it is saved or reset.
+ *   3. **Nothing is set after unmount.** The save resolves into a component that
+ *      may be gone — a row scrolled out of a virtualised table, a closed dialog.
+ *   4. **`onSave` is read through a ref**, so an inline arrow — which every call
+ *      site will pass — does not restart the debounce on every render.
+ */
+declare function useFieldSync<T>({ value, onSave, debounceMs, equals, onError, }: UseFieldSyncOptions<T>): UseFieldSyncReturn<T>;
+interface FieldSyncIndicatorProps {
+    state: FieldSyncState;
+    /** The failure. Its message becomes the tooltip when `state === "error"`. */
+    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. */
+    showLabel?: boolean;
+    /** When given, the error state renders a retry button after the icon. */
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * The affordance for {@link useFieldSync}: a coloured icon, and the reason on hover.
+ *
+ * **Every state has its own icon, and that is not decoration.** The four colours
+ * include the green/red pair, which is the one combination this package's palette
+ * otherwise refuses (see the note in `tokens.css`) because red-green colour blindness
+ * affects roughly one man in twelve. The icon is what carries the meaning for them,
+ * and what carries it into a greyscale print or a screenshot. WCAG 1.4.1 is the same
+ * requirement stated formally.
+ *
+ * The state is also announced: the wrapper is a polite live region, so a screen
+ * reader hears "Saving…" then "Saved" without the user going looking. `error` is
+ * assertive instead — a failed write is worth interrupting for.
+ */
+declare function FieldSyncIndicator({ state, error, labels, showLabel, onRetry, className, }: FieldSyncIndicatorProps): react.JSX.Element;
+/**
+ * The field's own frame, coloured by state — applied from the WRAPPER to whatever
+ * native control sits inside it, so {@link FieldSyncRow} works with any of the kit's
+ * inputs (and a caller's own) without each one growing a `syncState` prop.
+ *
+ * Border AND a 1px ring, for the reason {@link FIELD_INVALID} gives: a lone 1px
+ * border loses a vertical edge to sub-pixel spread at 125% display scaling. The
+ * `:focus` twins are what keep the state visible while the reader is typing —
+ * the base field class's `focus:` brand colour is `(0,2,0)` and would otherwise win
+ * over a descendant selector exactly when the field is in use.
+ *
+ * `synced` is green, but {@link FieldSyncRow} paints it only for a moment after a
+ * save lands — a form of eight permanently green boxes says nothing the absence of
+ * colour does not.
+ *
+ * Every class is a literal so Tailwind's scanner can see it.
+ */
+declare const FIELD_SYNC_FRAME: Record<FieldSyncState, string>;
+/** How long the green "saved" frame and check stay after a save lands, in ms. */
+declare const FIELD_SYNC_SAVED_MS = 1500;
+interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, "state" | "error" | "showLabel"> {
+    sync: UseFieldSyncReturn<T>;
+    children: ReactNode;
+    /** Call `sync.save()` when focus leaves the field. Default true — together with the
+     *  hook's default `debounceMs: 0` this is "save on blur": nothing is written while
+     *  the reader is still typing, however long they pause. */
+    saveOnBlur?: boolean;
+    /** How long the saved confirmation shows. Default {@link FIELD_SYNC_SAVED_MS}. */
+    savedMs?: number;
+}
+/**
+ * A field wearing its sync state — as its FRAME COLOUR and an ICON AT THE END OF THE
+ * FIELD, so the field never changes size (a helper line appearing under it moved
+ * everything below it on every save):
+ *
+ *   edited   amber frame, pencil          — changed, not yet saved
+ *   pending  blue frame, spinning circle  — for as long as the save is in flight
+ *   synced   green frame, check           — for {@link FIELD_SYNC_SAVED_MS} after a
+ *                                            save lands, then an ordinary field again
+ *   error    red frame, alert mark        — hover or focus the mark for the reason;
+ *                                            click it to retry
+ *
+ * It saves when focus LEAVES the field (`saveOnBlur`), not after a pause in typing: a
+ * database write in the middle of a word is a write nobody asked for. Enter in a
+ * single-line field is the caller's to wire to `sync.save`.
+ *
+ * Colour is never the only signal: every state has its own icon, and the state text is
+ * always in the DOM as a live region — polite for the ordinary states, assertive for
+ * a failure. The input gets end padding for the icon whether or not one is showing,
+ * so the text never reflows when the state changes.
+ */
+declare function FieldSyncRow<T>({ sync, children, className, labels, onRetry, saveOnBlur, savedMs, }: FieldSyncRowProps<T>): react.JSX.Element;
+
+export { DEFAULT_FIELD_SYNC_LABELS, FIELD_SYNC_FRAME, FIELD_SYNC_SAVED_MS, FieldSyncIndicator, type FieldSyncIndicatorProps, type FieldSyncLabels, FieldSyncRow, type FieldSyncRowProps, type FieldSyncState, type UseFieldSyncOptions, type UseFieldSyncReturn, resolveFieldSyncLabels, useFieldSync };

package/dist/components/field-sync.js

@@ -0,0 +1,264 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 { useKitLabels } from "../i18n/kit-labels.js";
+const DEFAULT_FIELD_SYNC_LABELS = {
+  synced: "Saved",
+  edited: "Unsaved changes",
+  pending: "Saving\u2026",
+  error: "Could not save",
+  retry: "Retry"
+};
+function resolveFieldSyncLabels(labels) {
+  return labels ? { ...DEFAULT_FIELD_SYNC_LABELS, ...labels } : DEFAULT_FIELD_SYNC_LABELS;
+}
+function toError(cause) {
+  if (cause instanceof Error) return cause;
+  return new Error(typeof cause === "string" ? cause : "", { cause });
+}
+function useFieldSync({
+  value,
+  onSave,
+  debounceMs = 0,
+  equals = Object.is,
+  onError
+}) {
+  const [draft, setDraft] = useState(value);
+  const [state, setState] = useState("synced");
+  const [error, setError] = useState(null);
+  const savedRef = useRef(value);
+  const draftRef = useRef(value);
+  const inFlightRef = useRef(false);
+  const timerRef = useRef(null);
+  const mountedRef = useRef(true);
+  const onSaveRef = useRef(onSave);
+  const onErrorRef = useRef(onError);
+  const equalsRef = useRef(equals);
+  useEffect(() => {
+    onSaveRef.current = onSave;
+    onErrorRef.current = onError;
+    equalsRef.current = equals;
+  });
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const flush = useCallback(async () => {
+    if (inFlightRef.current) return;
+    const next = draftRef.current;
+    if (equalsRef.current(next, savedRef.current)) return;
+    inFlightRef.current = true;
+    setState("pending");
+    setError(null);
+    try {
+      await onSaveRef.current(next);
+      savedRef.current = next;
+      inFlightRef.current = false;
+      if (!mountedRef.current) return;
+      if (equalsRef.current(draftRef.current, next)) {
+        setState("synced");
+      } else {
+        setState("edited");
+        void flush();
+      }
+    } catch (cause) {
+      inFlightRef.current = false;
+      const err = toError(cause);
+      onErrorRef.current?.(err);
+      if (!mountedRef.current) return;
+      setState("error");
+      setError(err);
+    }
+  }, []);
+  const setValue = useCallback(
+    (next) => {
+      draftRef.current = next;
+      setDraft(next);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (equalsRef.current(next, savedRef.current)) {
+        setState(inFlightRef.current ? "pending" : "synced");
+        setError(null);
+        return;
+      }
+      setState("edited");
+      setError(null);
+      if (debounceMs > 0) timerRef.current = setTimeout(() => void flush(), debounceMs);
+    },
+    [debounceMs, flush]
+  );
+  const save = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    void flush();
+  }, [flush]);
+  const retry = save;
+  const reset = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    draftRef.current = savedRef.current;
+    setDraft(savedRef.current);
+    setState(inFlightRef.current ? "pending" : "synced");
+    setError(null);
+  }, []);
+  const dirty = state !== "synced";
+  useEffect(() => {
+    if (inFlightRef.current) return;
+    if (!equalsRef.current(draftRef.current, savedRef.current)) return;
+    if (equalsRef.current(value, savedRef.current)) return;
+    savedRef.current = value;
+    draftRef.current = value;
+    setDraft(value);
+    setState("synced");
+    setError(null);
+  }, [value]);
+  return { value: draft, setValue, state, error, dirty, save, retry, reset };
+}
+const STATE_STYLE = {
+  synced: { color: "var(--status-synced)", Icon: Check },
+  edited: { color: "var(--status-edited)", Icon: Pencil },
+  pending: { color: "var(--status-pending)", Icon: Loader2 },
+  error: { color: "var(--status-error)", Icon: AlertCircle }
+};
+function FieldSyncIndicator({
+  state,
+  error,
+  labels,
+  showLabel = false,
+  onRetry,
+  className
+}) {
+  const l = useKitLabels("fieldSync", DEFAULT_FIELD_SYNC_LABELS, labels);
+  const { color, Icon } = STATE_STYLE[state];
+  const text = state === "error" ? error?.message?.trim() ? error.message : l.error : l[state];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1.5 text-xs text-[var(--text-secondary)]", className),
+      role: state === "error" ? "alert" : "status",
+      "aria-live": state === "error" ? "assertive" : "polite",
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, { label: showLabel ? void 0 : text, redact: state === "error", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              "aria-hidden": true,
+              style: { color },
+              className: cn("size-3.5 shrink-0", state === "pending" && "animate-spin")
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: showLabel ? void 0 : "sr-only", children: text })
+        ] }) }),
+        state === "error" && onRetry && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            className: "rounded underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2",
+            style: { color },
+            children: l.retry
+          }
+        )
+      ]
+    }
+  );
+}
+const FIELD_SYNC_FRAME = {
+  synced: "[&_: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)]",
+  edited: "[&_: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)]",
+  pending: "[&_: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)]",
+  error: "[&_: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)]"
+};
+const FIELD_SYNC_SAVED_MS = 1500;
+function FieldSyncRow({
+  sync,
+  children,
+  className,
+  labels,
+  onRetry,
+  saveOnBlur = true,
+  savedMs = FIELD_SYNC_SAVED_MS
+}) {
+  const l = useKitLabels("fieldSync", DEFAULT_FIELD_SYNC_LABELS, labels);
+  const { state, error } = sync;
+  const isError = state === "error";
+  const text = isError ? error?.message?.trim() ? error.message : l.error : l[state];
+  const retry = onRetry ?? sync.retry;
+  const previous = useRef(state);
+  const [justSaved, setJustSaved] = useState(false);
+  useEffect(() => {
+    const was = previous.current;
+    previous.current = state;
+    if (state === "synced" && was === "pending") {
+      setJustSaved(true);
+      const t = setTimeout(() => setJustSaved(false), savedMs);
+      return () => clearTimeout(t);
+    }
+    if (state !== "synced") setJustSaved(false);
+  }, [state, savedMs]);
+  const shown = state === "synced" ? justSaved ? "synced" : null : state;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-field-sync": state,
+      className: cn(
+        // `relative` for the icon and for the sr-only live region's containing block.
+        "relative [&_:is(input,select,textarea)]:pe-9",
+        shown && FIELD_SYNC_FRAME[shown],
+        className
+      ),
+      onBlur: saveOnBlur ? (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) sync.save();
+      } : void 0,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3", children: [
+          state === "edited" && /* @__PURE__ */ jsx(PencilLine, { "aria-hidden": true, className: "size-4 text-[var(--status-edited)]" }),
+          state === "pending" && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none" }),
+          state === "synced" && /* @__PURE__ */ jsx(
+            Check,
+            {
+              "aria-hidden": true,
+              className: cn(
+                "size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none",
+                justSaved ? "opacity-100" : "opacity-0"
+              )
+            }
+          ),
+          isError && /* @__PURE__ */ jsx(Tooltip, { label: text, portal: true, redact: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              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",
+              children: /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true, className: "size-4" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            role: isError ? "alert" : "status",
+            "aria-live": isError ? "assertive" : "polite",
+            className: "sr-only",
+            children: shown === null ? "" : text
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_FIELD_SYNC_LABELS,
+  FIELD_SYNC_FRAME,
+  FIELD_SYNC_SAVED_MS,
+  FieldSyncIndicator,
+  FieldSyncRow,
+  resolveFieldSyncLabels,
+  useFieldSync
+};
+//# sourceMappingURL=field-sync.js.map

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

@@ -0,0 +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  const flush = useCallback(async () => {\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 flush();\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\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.\n  const previous = useRef(state);\n  const [justSaved, setJustSaved] = useState(false);\n  useEffect(() => {\n    const was = previous.current;\n    previous.current = state;\n    if (state === \"synced\" && was === \"pending\") {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reacts to the save landing\n      setJustSaved(true);\n      const t = setTimeout(() => setJustSaved(false), savedMs);\n      return () => clearTimeout(t);\n    }\n    if (state !== \"synced\") setJustSaved(false);\n  }, [state, savedMs]);\n  const shown: FieldSyncState | null = state === \"synced\" ? (justSaved ? \"synced\" : null) : state;\n\n  return (\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":[]}