@eifi1/ui-kit 0.6.1 → 0.7.1

package/dist/components/autocomplete.js

@@ -3,9 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, forwardRef, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
-import { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from "./ui.js";
+import { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from "./ui.js";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useAnchorDir } from "./use-anchor-dir.js";
 import {
+  ComboboxFieldLabel,
+  DISABLED_ROW_CLASS,
+  isOptionEnabled,
+  stepEnabled,
   useActiveOptionScroll,
   useComboboxFieldError,
   useOptionSource
@@ -29,6 +34,9 @@ function AutocompleteInner({
   status,
   emptyLabel,
   loadErrorLabel,
+  open: openProp,
+  onOpenChange,
+  size,
   className,
   inputClassName,
   id,
@@ -52,7 +60,12 @@ function AutocompleteInner({
     loadError: loadErrorLabel
   });
   const field = useComboboxFieldError(error, invalid, ariaDescribedBy);
-  const [open, setOpen] = useState(false);
+  const [ownOpen, setOwnOpen] = useState(false);
+  const open = openProp ?? ownOpen;
+  const setOpen = (next) => {
+    setOwnOpen(next);
+    if (next !== open) onOpenChange?.(next);
+  };
   const [active, setActive] = useState(-1);
   const live = open && !disabled;
   const { results, busy, failed, tooShort } = useOptionSource({
@@ -68,31 +81,38 @@ function AutocompleteInner({
   const hasStatus = status !== void 0 && status !== null && status !== false && status !== "";
   const statusLine = hasStatus ? status : tooShort ? null : busy && results.length === 0 ? labels.loading : failed ? labels.loadError : !busy && results.length === 0 ? labels.noResults : null;
   const expanded = live && (results.length > 0 || statusLine !== null);
-  const activeId = expanded && active >= 0 && active < results.length ? optionId(active) : void 0;
+  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : void 0;
   useActiveOptionScroll(activeId);
   const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });
+  const dir = useAnchorDir(fieldRef, expanded);
   const close = () => {
     setOpen(false);
     setActive(-1);
   };
   const take = (o) => {
+    if (o.disabled) return;
     if (fillOnSelect) onChange(o.label);
     onSelect?.(o);
     close();
   };
   const hasLabel = label !== void 0;
+  const small = size === "sm" && !hasLabel;
+  const nativeSize = typeof size === "number" ? size : void 0;
   const labelledBy = ariaLabel === void 0 ? ariaLabelledBy ?? (hasLabel ? labelId : void 0) : void 0;
   return (
     // `relative`: the floating label and the live region's `sr-only` both need a
     // local containing block.
     /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-      hasLabel && /* @__PURE__ */ jsx(FieldLabel, { id: labelId, children: label }),
+      hasLabel && /* @__PURE__ */ jsx(ComboboxFieldLabel, { id: labelId, htmlFor: fieldId, children: label }),
       /* @__PURE__ */ jsxs("div", { ref: fieldRef, className: "relative", children: [
         icon && /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2 text-[var(--text-muted)] [&>svg]:size-4",
+            className: cn(
+              "pointer-events-none absolute top-1/2 flex -translate-y-1/2 text-[var(--text-muted)]",
+              small ? "start-2 [&>svg]:size-3.5" : "start-2.5 [&>svg]:size-4"
+            ),
             children: icon
           }
         ),
@@ -102,6 +122,7 @@ function AutocompleteInner({
             ...rest,
             ref,
             id: fieldId,
+            size: nativeSize,
             type: "text",
             value,
             disabled,
@@ -137,15 +158,14 @@ function AutocompleteInner({
               }
               onKeyDown?.(e);
               if (e.defaultPrevented) return;
-              const last = results.length - 1;
               if (e.key === "ArrowDown") {
                 e.preventDefault();
                 if (!open) setOpen(true);
-                else setActive((i) => Math.min(i + 1, last));
+                else setActive((i) => stepEnabled(results, i, 1));
               } else if (e.key === "ArrowUp") {
                 e.preventDefault();
                 if (!open) setOpen(true);
-                else setActive((i) => i < 0 ? last : Math.max(i - 1, 0));
+                else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));
               } else if (e.key === "Enter") {
                 if (expanded && activeId) {
                   e.preventDefault();
@@ -158,15 +178,27 @@ function AutocompleteInner({
             className: cn(
               FIELD_BASE,
               hasLabel && FIELD_FLOATING_PAD,
-              icon ? "ps-8" : void 0,
-              busy && "pe-9",
+              // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height
+              // cannot grow it.
+              small && "h-7 py-0 pe-2 ps-2 text-xs",
+              icon ? small ? "ps-7" : "ps-8" : void 0,
+              busy && (small ? "pe-7" : "pe-9"),
               field.isInvalid && FIELD_INVALID,
               inputClassName
             )
           }
         ),
         busy && live && // Decorative: the live region below already says "Loading…".
-        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute top-1/2 flex -translate-y-1/2",
+              small ? "end-2" : "end-2.5"
+            ),
+            children: /* @__PURE__ */ jsx(Spinner, { label: null, className: small ? "h-3.5 w-3.5" : "h-4 w-4" })
+          }
+        )
       ] }),
       field.errorEl,
       /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: !live ? null : statusLine !== null ? statusLine : results.length > 0 ? labels.resultCount(results.length) : null }),
@@ -175,6 +207,7 @@ function AutocompleteInner({
           "div",
           {
             role: "presentation",
+            dir,
             onMouseDown: (e) => e.preventDefault(),
             className: "fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
             style: { top, left: rect.left, width: rect.width, maxHeight },
@@ -208,19 +241,32 @@ function AutocompleteInner({
                             id: optionId(i),
                             role: "option",
                             "aria-selected": fillOnSelect && o.label === value,
+                            "aria-disabled": o.disabled || void 0,
                             tabIndex: -1,
                             onClick: () => take(o),
-                            onMouseEnter: () => setActive(i),
+                            onMouseEnter: () => {
+                              if (!o.disabled) setActive(i);
+                            },
                             className: cn(
-                              "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
-                              i === active ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]",
+                              "flex w-full items-center gap-2 px-3 text-start",
+                              small ? "py-1 text-xs" : "py-1.5 text-sm",
+                              o.disabled ? DISABLED_ROW_CLASS : i === active ? "bg-[var(--bg-active)]" : "hover:bg-[var(--bg-hover)]",
                               o.group != null && "ps-6"
                             ),
                             children: [
                               o.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-[var(--text-muted)]", children: o.icon }),
                               /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                                 /* @__PURE__ */ jsx("span", { className: "block truncate text-[var(--text-primary)]", children: o.label }),
-                                o.sublabel && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-placeholder)]", children: o.sublabel })
+                                o.sublabel && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "block truncate text-[var(--text-placeholder)]",
+                                      small ? "text-[11px]" : "text-xs"
+                                    ),
+                                    children: o.sublabel
+                                  }
+                                )
                               ] })
                             ]
                           }
@@ -236,7 +282,7 @@ function AutocompleteInner({
                 {
                   "aria-hidden": true,
                   className: cn(
-                    "px-3 py-2 text-sm",
+                    small ? "px-3 py-1.5 text-xs" : "px-3 py-2 text-sm",
                     failed && !hasStatus ? "text-[var(--danger)]" : "text-[var(--text-muted)]",
                     results.length > 0 && "border-t border-[var(--border)] text-xs"
                   ),

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FieldLabel, FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport {\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox}. Names the field (`aria-labelledby`)\n   *  unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  }: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const field = useComboboxFieldError(error, invalid, ariaDescribedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [open, setOpen] = useState(false);\n  const [active, setActive] = useState(-1);\n  const live = open && !disabled;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  const activeId =\n    expanded && active >= 0 && active < results.length ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {hasLabel && <FieldLabel id={labelId}>{label}</FieldLabel>}\n      <div ref={fieldRef} className=\"relative\">\n        {icon && (\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute start-2.5 top-1/2 flex -translate-y-1/2 text-[var(--text-muted)] [&>svg]:size-4\"\n          >\n            {icon}\n          </span>\n        )}\n        <input\n          {...rest}\n          ref={ref}\n          id={fieldId}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded={expanded}\n          // Required by the role, and set while closed too, as on the siblings.\n          aria-controls={listboxId}\n          aria-activedescendant={activeId}\n          aria-label={ariaLabel}\n          aria-labelledby={labelledBy}\n          aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={field.describedBy}\n          autoComplete=\"off\"\n          onFocus={(e) => {\n            onFocus?.(e);\n            // A seeded field (keksdose's `initialQuery`) is looked up as it is\n            // focused; an empty one asks nothing, because of `minChars`.\n            setOpen(true);\n          }}\n          onBlur={(e) => {\n            onBlur?.(e);\n            close();\n          }}\n          onChange={(e) => {\n            onChange(e.target.value);\n            setOpen(true);\n            setActive(-1);\n          }}\n          onKeyDown={(e) => {\n            // An Escape that closes the OPEN list is the list's, and is consumed before\n            // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n            // address search) otherwise closed the whole panel when the user only meant\n            // to dismiss the suggestions — the opposite of what the docs promised.\n            if (e.key === \"Escape\" && expanded) {\n              e.preventDefault();\n              e.stopPropagation();\n              close();\n              return;\n            }\n            onKeyDown?.(e);\n            if (e.defaultPrevented) return;\n            const last = results.length - 1;\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              else setActive((i) => Math.min(i + 1, last));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n              else setActive((i) => (i < 0 ? last : Math.max(i - 1, 0)));\n            } else if (e.key === \"Enter\") {\n              // No row highlighted: the text is the answer, and a form's own submit\n              // is left alone.\n              if (expanded && activeId) {\n                e.preventDefault();\n                take(results[active]);\n              }\n            } else if (e.key === \"Tab\") {\n              close();\n            }\n          }}\n          className={cn(\n            FIELD_BASE,\n            hasLabel && FIELD_FLOATING_PAD,\n            icon ? \"ps-8\" : undefined,\n            busy && \"pe-9\",\n            field.isInvalid && FIELD_INVALID,\n            inputClassName,\n          )}\n        />\n        {busy && live && (\n          // Decorative: the live region below already says \"Loading…\".\n          <span className=\"pointer-events-none absolute end-2.5 top-1/2 flex -translate-y-1/2\">\n            <Spinner label={null} className=\"h-4 w-4\" />\n          </span>\n        )}\n      </div>\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => setActive(i)}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n                            i === active ? \"bg-[var(--bg-active)]\" : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens), Enter takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import { Fragment, forwardRef, useId, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_BASE, FIELD_FLOATING_PAD, FIELD_INVALID, Spinner } from \"./ui\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport {\n  ComboboxFieldLabel,\n  DISABLED_ROW_CLASS,\n  isOptionEnabled,\n  stepEnabled,\n  useActiveOptionScroll,\n  useComboboxFieldError,\n  useOptionSource,\n  type ComboOption,\n} from \"./combobox-core\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * `value`/`onChange` are the TEXT's, and `onSelect` is \"a suggestion was taken\" —\n * not the DOM's text-selection event — so the input's own spellings of those three\n * are omitted. Everything else reaches the `<input>`, the way it does on {@link Input}.\n */\nexport interface AutocompleteProps<V extends string | number = string>\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"onSelect\" | \"children\" | \"type\" | \"size\"\n  > {\n  /** What is in the field. Controlled, and never reset by the component: opening,\n   *  closing and a failed lookup all leave it exactly as typed. */\n  value: string;\n  /** Every keystroke — and, with `fillOnSelect`, the label of a taken suggestion. */\n  onChange: (text: string) => void;\n  /** Suggestions the caller already has (e.g. from its own query hook). Narrowed by\n   *  the text unless `filter={false}`. An option with `disabled: true` is listed but\n   *  cannot be taken — see {@link ComboOption.disabled}. */\n  options?: ComboOption<V>[];\n  /** Or: fetch them. Debounced (`debounceMs`), race-safe, only at `minChars` and up,\n   *  never while the field is idle; a rejection shows `loadErrorLabel` and empties\n   *  the list rather than leaving the previous text's rows under it. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** Narrow `options` by label/sublabel substring. Default `true`. Pass `false` for\n   *  a list a server has already searched and ranked — it is shown as given. */\n  filter?: boolean;\n  /** External loading flag (a caller-side fetch), OR-ed with `loadOptions`'. */\n  loading?: boolean;\n  /** Below this many characters nothing is offered or fetched. Default 1: an empty\n   *  field asks nothing — focusing it is not a search. */\n  minChars?: number;\n  /** Quiet time before `loadOptions` runs. Default 300 ms — an ordinary typist's\n   *  inter-key interval is 150–250 ms, so the pickers' 150 fires on nearly every\n   *  letter, which a rate-limited geocoder cannot afford. */\n  debounceMs?: number;\n  /**\n   * Whether the list MAY show — controlled. Omit (or pass `undefined`) and the field\n   * decides: open while focused, until Escape, Tab or a taken row. `false` keeps it\n   * shut whatever the user does, and stops `loadOptions` asking — keksdose's address\n   * search, with its confirm map up, where it used to pass `minChars={Infinity}`.\n   * `true` shows it even unfocused.\n   *\n   * Even open, the list only APPEARS when it has something to show (rows, or a\n   * status line); `aria-expanded` follows what appears, not this flag.\n   */\n  open?: boolean;\n  /** The field wants the list open or shut — focus, typing, ↓/↑ open it; blur,\n   *  Escape, Tab and taking a row shut it. Called on every change, controlled or not. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `\"sm\"`: the 28px, 12px-type field of {@link Select}'s `size=\"sm\"`, with the icon,\n   * spinner and list rows scaled to match — for a card or toolbar whose buttons are\n   * small. `\"md\"` (default) is the form field. Unlabelled only, as on `Select`: a\n   * floating label needs the tall box, so a labelled field ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native `size` attribute (the width in characters), passed\n   * straight through.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** A suggestion was taken (click, or Enter on the highlighted row). */\n  onSelect?: (option: ComboOption<V>) => void;\n  /**\n   * Put the taken suggestion's label into the field (`onChange(label)`). Default\n   * `true` — the free-text case, where the text IS the value and a suggestion only\n   * completes it (an address field). Pass `false` where taking a row is an ACTION\n   * and the field is only the search that found it; the text then stays as typed.\n   */\n  fillOnSelect?: boolean;\n  /** A floating label, as on {@link Combobox} — a real `<label for>` on the input.\n   *  Names the field (`aria-labelledby`) unless an `aria-label` is given. */\n  label?: ReactNode;\n  /** Leading decoration inside the field (a pin, a magnifier). Decorative: the\n   *  label names the field. An `<svg>` child is sized by the field — 16px, or 14px\n   *  at `size=\"sm\"` — so a lucide icon needs no class of its own. */\n  icon?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. */\n  invalid?: boolean;\n  /** What is wrong with the VALUE, as {@link Input}'s `error`: under the field, on\n   *  its `aria-describedby`, implies `invalid`. Not a failed lookup — that is\n   *  `loadErrorLabel`, shown in the list. */\n  error?: ReactNode;\n  /**\n   * The caller's own line in the list, replacing the automatic one (loading / failed\n   * / no results). For what only the caller knows: \"offline\", \"the address service\n   * is switched off\", a privacy note, the hint a caller-fetched list needs below its\n   * own minimum. While set, the list opens even with no rows. Announced politely.\n   */\n  status?: ReactNode;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  /** Default: `combobox.loadError`. */\n  loadErrorLabel?: string;\n  /** Classes for the `<input>` itself; `className` styles the wrapper. */\n  inputClassName?: string;\n}\n\nfunction AutocompleteInner<V extends string | number = string>(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    filter,\n    loading,\n    minChars = 1,\n    debounceMs = 300,\n    onSelect,\n    fillOnSelect = true,\n    label,\n    icon,\n    invalid,\n    error,\n    status,\n    emptyLabel,\n    loadErrorLabel,\n    open: openProp,\n    onOpenChange,\n    size,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...rest\n  }: AutocompleteProps<V>,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const generated = useId();\n  const fieldId = id ?? generated;\n  // Off the GENERATED id: a caller's `id` is theirs to collide with.\n  const listboxId = `${generated}-listbox`;\n  const labelId = `${generated}-label`;\n  const optionId = (index: number) => `${generated}-option-${index}`;\n  const fieldRef = useRef<HTMLDivElement>(null);\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, {\n    noResults: emptyLabel,\n    loadError: loadErrorLabel,\n  });\n  const field = useComboboxFieldError(error, invalid, ariaDescribedBy);\n\n  /** The user's intent: the field is focused and the list has not been dismissed.\n   *  Whether anything SHOWS is decided below, from what there is to show. */\n  const [ownOpen, setOwnOpen] = useState(false);\n  // Controlled when the caller passes a boolean. The own state is kept up to date\n  // either way, so a caller that controls only SOMETIMES (`open={confirming ? false :\n  // undefined}`) hands back a field that is exactly as open as focus says it is.\n  const open = openProp ?? ownOpen;\n  const setOpen = (next: boolean) => {\n    setOwnOpen(next);\n    if (next !== open) onOpenChange?.(next);\n  };\n  const [active, setActive] = useState(-1);\n  const live = open && !disabled;\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    options,\n    loadOptions,\n    loading,\n    filter,\n    minChars,\n    debounceMs,\n    query: value,\n    active: live,\n  });\n\n  const hasStatus = status !== undefined && status !== null && status !== false && status !== \"\";\n  // The visible line under the rows. Nothing below `minChars` unless the caller has\n  // something to say — an empty field opening a box that says \"type more\" is noise.\n  const statusLine: ReactNode = hasStatus\n    ? status\n    : tooShort\n      ? null\n      : busy && results.length === 0\n        ? labels.loading\n        : failed\n          ? labels.loadError\n          : !busy && results.length === 0\n            ? labels.noResults\n            : null;\n  const expanded = live && (results.length > 0 || statusLine !== null);\n  // A disabled row is never the keyboard's — not even when a list that changed under\n  // the highlight put one there.\n  const activeId = expanded && isOptionEnabled(results[active]) ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  const { rect, top, maxHeight } = useAnchoredPanel(fieldRef, expanded, { preferredHeight: 256 });\n  const dir = useAnchorDir(fieldRef, expanded);\n\n  const close = () => {\n    setOpen(false);\n    setActive(-1);\n  };\n  const take = (o: ComboOption<V>) => {\n    if (o.disabled) return;\n    if (fillOnSelect) onChange(o.label);\n    onSelect?.(o);\n    close();\n  };\n\n  const hasLabel = label !== undefined;\n  // `size=\"sm\"` is for an UNLABELLED field, as on Select: the floating label needs the\n  // tall box. A number is the native attribute.\n  const small = size === \"sm\" && !hasLabel;\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // The caller's name wins; else the floating label, by reference so a non-string\n  // label still names the field.\n  const labelledBy =\n    ariaLabel === undefined ? (ariaLabelledBy ?? (hasLabel ? labelId : undefined)) : undefined;\n\n  return (\n    // `relative`: the floating label and the live region's `sr-only` both need a\n    // local containing block.\n    <div className={cn(\"relative\", className)}>\n      {/* A real <label for> (lenkbank), and still `aria-labelledby`'s target, so the\n          name — and the listbox's, which borrows it — is exactly what it was. */}\n      {hasLabel && (\n        <ComboboxFieldLabel id={labelId} htmlFor={fieldId}>\n          {label}\n        </ComboboxFieldLabel>\n      )}\n      <div ref={fieldRef} className=\"relative\">\n        {icon && (\n          <span\n            aria-hidden\n            className={cn(\n              \"pointer-events-none absolute top-1/2 flex -translate-y-1/2 text-[var(--text-muted)]\",\n              small ? \"start-2 [&>svg]:size-3.5\" : \"start-2.5 [&>svg]:size-4\",\n            )}\n          >\n            {icon}\n          </span>\n        )}\n        <input\n          {...rest}\n          ref={ref}\n          id={fieldId}\n          size={nativeSize}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded={expanded}\n          // Required by the role, and set while closed too, as on the siblings.\n          aria-controls={listboxId}\n          aria-activedescendant={activeId}\n          aria-label={ariaLabel}\n          aria-labelledby={labelledBy}\n          aria-invalid={field.isInvalid || rest[\"aria-invalid\"] || undefined}\n          aria-describedby={field.describedBy}\n          autoComplete=\"off\"\n          onFocus={(e) => {\n            onFocus?.(e);\n            // A seeded field (keksdose's `initialQuery`) is looked up as it is\n            // focused; an empty one asks nothing, because of `minChars`.\n            setOpen(true);\n          }}\n          onBlur={(e) => {\n            onBlur?.(e);\n            close();\n          }}\n          onChange={(e) => {\n            onChange(e.target.value);\n            setOpen(true);\n            setActive(-1);\n          }}\n          onKeyDown={(e) => {\n            // An Escape that closes the OPEN list is the list's, and is consumed before\n            // the caller sees it. A caller whose Escape means \"close the panel\" (keksdose's\n            // address search) otherwise closed the whole panel when the user only meant\n            // to dismiss the suggestions — the opposite of what the docs promised.\n            if (e.key === \"Escape\" && expanded) {\n              e.preventDefault();\n              e.stopPropagation();\n              close();\n              return;\n            }\n            onKeyDown?.(e);\n            if (e.defaultPrevented) return;\n            // Disabled rows are passed over; at either end the highlight stays put.\n            if (e.key === \"ArrowDown\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              else setActive((i) => stepEnabled(results, i, 1));\n            } else if (e.key === \"ArrowUp\") {\n              e.preventDefault();\n              if (!open) setOpen(true);\n              // From \"nothing highlighted\", Up goes to the bottom, as the APG has it.\n              else setActive((i) => stepEnabled(results, i < 0 ? results.length : i, -1));\n            } else if (e.key === \"Enter\") {\n              // No row highlighted: the text is the answer, and a form's own submit\n              // is left alone.\n              if (expanded && activeId) {\n                e.preventDefault();\n                take(results[active]);\n              }\n            } else if (e.key === \"Tab\") {\n              close();\n            }\n          }}\n          className={cn(\n            FIELD_BASE,\n            hasLabel && FIELD_FLOATING_PAD,\n            // Select's `SELECT_SM` box: a fixed 28px, so the caller's line height\n            // cannot grow it.\n            small && \"h-7 py-0 pe-2 ps-2 text-xs\",\n            icon ? (small ? \"ps-7\" : \"ps-8\") : undefined,\n            busy && (small ? \"pe-7\" : \"pe-9\"),\n            field.isInvalid && FIELD_INVALID,\n            inputClassName,\n          )}\n        />\n        {busy && live && (\n          // Decorative: the live region below already says \"Loading…\".\n          <span\n            className={cn(\n              \"pointer-events-none absolute top-1/2 flex -translate-y-1/2\",\n              small ? \"end-2\" : \"end-2.5\",\n            )}\n          >\n            <Spinner label={null} className={small ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n          </span>\n        )}\n      </div>\n      {field.errorEl}\n      {/* The live region, kept mounted so a change IS an announcement: focus stays\n          in the field, and without it a reader typed into a geocoder and heard only\n          their own letters. The panel's visible line is aria-hidden in favour of\n          this, which also carries the row count the eye reads off the list. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {!live\n          ? null\n          : statusLine !== null\n            ? statusLine\n            : results.length > 0\n              ? labels.resultCount(results.length)\n              : null}\n      </div>\n      {expanded &&\n        rect &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            // Every press inside the list keeps focus in the field — rows, the status\n            // line, the scrollbar — or the input's blur would close the list first.\n            role=\"presentation\"\n            // Portalled out of the form's `dir`; the field's is put back. The list is\n            // exactly the field's width, so `left` places it in either direction.\n            dir={dir}\n            onMouseDown={(e) => e.preventDefault()}\n            className=\"fixed z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\"\n            style={{ top, left: rect.left, width: rect.width, maxHeight }}\n          >\n            {results.length > 0 && (\n              <ul\n                id={listboxId}\n                role=\"listbox\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                className=\"min-h-0 flex-1 overflow-y-auto py-1\"\n              >\n                {results.map((o, i) => {\n                  const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n                  return (\n                    // Keyed by group AND value, as in the core panel: an option may\n                    // appear once per group.\n                    <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n                      {startsGroup && (\n                        <li\n                          role=\"presentation\"\n                          className=\"px-3 pb-0.5 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] first:pt-1\"\n                        >\n                          {o.group}\n                        </li>\n                      )}\n                      <li role=\"presentation\">\n                        <button\n                          type=\"button\"\n                          id={optionId(i)}\n                          role=\"option\"\n                          // CHOSEN, never \"highlighted\" — the family's rule. This\n                          // field holds no value, so the only row that can be chosen\n                          // is the one whose label the text already is.\n                          aria-selected={fillOnSelect && o.label === value}\n                          // Listed, announced as unavailable, never taken: `take`\n                          // refuses it and the arrows pass it over.\n                          aria-disabled={o.disabled || undefined}\n                          tabIndex={-1}\n                          onClick={() => take(o)}\n                          onMouseEnter={() => {\n                            if (!o.disabled) setActive(i);\n                          }}\n                          className={cn(\n                            \"flex w-full items-center gap-2 px-3 text-start\",\n                            small ? \"py-1 text-xs\" : \"py-1.5 text-sm\",\n                            o.disabled\n                              ? DISABLED_ROW_CLASS\n                              : i === active\n                                ? \"bg-[var(--bg-active)]\"\n                                : \"hover:bg-[var(--bg-hover)]\",\n                            o.group != null && \"ps-6\",\n                          )}\n                        >\n                          {o.icon && (\n                            <span aria-hidden className=\"shrink-0 text-[var(--text-muted)]\">\n                              {o.icon}\n                            </span>\n                          )}\n                          <span className=\"min-w-0 flex-1\">\n                            <span className=\"block truncate text-[var(--text-primary)]\">\n                              {o.label}\n                            </span>\n                            {o.sublabel && (\n                              <span\n                                className={cn(\n                                  \"block truncate text-[var(--text-placeholder)]\",\n                                  small ? \"text-[11px]\" : \"text-xs\",\n                                )}\n                              >\n                                {o.sublabel}\n                              </span>\n                            )}\n                          </span>\n                        </button>\n                      </li>\n                    </Fragment>\n                  );\n                })}\n              </ul>\n            )}\n            {statusLine !== null && (\n              // Visible, not live — the region above speaks for it.\n              <div\n                aria-hidden\n                className={cn(\n                  small ? \"px-3 py-1.5 text-xs\" : \"px-3 py-2 text-sm\",\n                  failed && !hasStatus ? \"text-[var(--danger)]\" : \"text-[var(--text-muted)]\",\n                  results.length > 0 && \"border-t border-[var(--border)] text-xs\",\n                )}\n              >\n                {statusLine}\n              </div>\n            )}\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nconst AutocompleteBase = forwardRef(AutocompleteInner);\nAutocompleteBase.displayName = \"Autocomplete\";\n\n/**\n * An inline, async-capable text field with a suggestion list under it — the\n * WAI-ARIA APG \"editable combobox with list autocomplete\".\n *\n * Two jobs, one control:\n *  - **free text** (kastlan's address field): the text is the value, the list only\n *    offers completions, and taking one fills the field (`fillOnSelect`, default);\n *  - **search-then-act** (keksdose's address search): the text is a query, taking a\n *    row calls `onSelect` and nothing is held (`fillOnSelect={false}`).\n *\n * How it differs from its siblings: {@link Combobox} is free text over a STATIC\n * string pool and opens on focus; {@link EntityCombobox} is a trigger holding an id.\n * This one keeps no value of its own, never resets the text, asks nothing below\n * `minChars`, and reports a failed lookup instead of showing stale rows.\n *\n * Focus never leaves the `<input>`: `aria-activedescendant` names the highlighted\n * row, `aria-controls` the list, and a polite live region says what the list now\n * holds. Keyboard: ↓/↑ move (↓ opens) over every row but a `disabled` one, Enter\n * takes the highlighted row (with none,\n * Enter is left to the form), Escape closes, Tab closes and moves on; Home/End stay\n * with the caret. An Escape that closes an open list is consumed and never reaches the\n * caller; with the list closed it does. For every other key a caller's `onKeyDown`\n * runs first and may `preventDefault()` to\n * keep a key for itself.\n *\n * The list is portalled and anchored under the field on every screen size: the\n * field already carries the keyboard, and `useAnchoredPanel` keeps the list clear\n * of it on a phone. There is no full-screen sheet as {@link Combobox} has.\n\n * Generic over the option value (`ComboOption<V>`); the ref is the `<input>`'s.\n */\nexport const Autocomplete = AutocompleteBase as <V extends string | number = string>(\n  props: AutocompleteProps<V> & RefAttributes<HTMLInputElement>,\n) => ReactElement | null;\n"],"mappings":"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","names":[]}

package/dist/components/calculator.d.ts

@@ -7,6 +7,8 @@ import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
 import './ui.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -24,6 +26,9 @@ import './icon-picker.js';
 import './dialog-frame.js';
 import './modal.js';
 import './file-button.js';
+import './measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
 
 /** Screen-reader names for the calculator panel's own controls — any part of the
  *  kit's `calculator` namespace. Once three optional keys of its own; widened, not

package/dist/components/calculator.js

@@ -77,10 +77,11 @@ function CalculatorPanel({
             equals();
           }
         },
+        dir: "ltr",
         className: "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),
+    /* @__PURE__ */ jsx("div", { dir: "ltr", className: "h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]", children: result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : "" }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-1.5", children: [
       KEYS.map(
         (key, i) => key.kind === "back" ? /* @__PURE__ */ jsx(

package/dist/components/calculator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--border` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\nconst KEY_DIGIT =\n  \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\nconst KEY_ACCENT =\n  \"bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        className=\"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]\"\n      />\n      <div className=\"h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the older `ariaLabel` prop folded in as the\n  // `open` key it has always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width={224}\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/calculator.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport { Calculator as CalculatorIcon, Delete } from \"lucide-react\";\nimport { Popover } from \"./popover\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/** Screen-reader names for the calculator panel's own controls — any part of the\n *  kit's `calculator` namespace. Once three optional keys of its own; widened, not\n *  replaced, so every object that type-checked before still does. */\nexport type CalculatorButtonLabels = Partial<CalculatorLabels>;\n\ninterface CalculatorButtonProps {\n  /** Current field text — seeds the keypad so the user can keep calculating\n   * from what's already entered. */\n  value: string;\n  /**\n   * Called with the evaluated result whenever the running expression resolves\n   * to a number, so the host field tracks the keypad live.\n   *\n   * `expression` is the TEXT that result came out of — `\"-42+50\"` for an 8 — and\n   * is omitted when there was no calculation (a cleared pad). A host that keeps\n   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /\n   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell\n   * that 8 from a freshly typed one: the first is a sum that came out positive\n   * and has to take the direction with it, the second is a magnitude that must\n   * leave the direction alone. Hosts whose text carries its own sign can take\n   * the one argument and ignore this.\n   */\n  onChange: (value: string, expression?: string) => void;\n  className?: string;\n  /** The trigger's accessible name; wins over `calculator.open` from the provider. */\n  ariaLabel?: string;\n  /** Screen-reader names for the panel's own controls. `ariaLabel` above already\n   *  covers the trigger; these three were hardcoded English inside the popover,\n   *  which a translating host had no way to reach. */\n  labels?: CalculatorButtonLabels;\n}\n\n/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is\n *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit\n *  is named by its own glyph. */\ntype Key =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: KeyName }\n  | { kind: \"back\" };\n\ntype KeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\nconst KEYS: Key[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"−\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\nconst KEY_BASE =\n  \"flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]\";\n// Two key families, two fills: digits sit on the inset surface and darken on\n// hover, operators sit a step down on `--border` and lift toward that surface —\n// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens\n// flip with the theme, so neither needs a `dark:` twin.\nconst KEY_DIGIT =\n  \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\nconst KEY_ACCENT =\n  \"bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\";\n\nfunction seed(initial: string): string {\n  const t = initial.trim();\n  return t === \"-\" ? \"\" : t;\n}\n\nfunction CalculatorPanel({\n  initial,\n  onChange,\n  labels,\n}: {\n  initial: string;\n  onChange: (value: string, expression?: string) => void;\n  labels: CalculatorLabels;\n}) {\n  const [expr, setExpr] = useState(() => seed(initial));\n  const inputRef = useRef<HTMLInputElement>(null);\n  // What the pad SHOWS. Normally the expression it holds — but when the host owns\n  // the sign of the figure, the magnitude it hands back is not the whole number:\n  // type 50 into a pad opened on an outflow and the host answers \"-50\". Derived\n  // rather than stored, so there is no echo to guard against and a host that\n  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:\n  // the pad only defers when the host's text is character-for-character its own\n  // last number with a minus in front.\n  const host = splitLeadingSign(initial.trim());\n  const text = host.sign === \"-\" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;\n  const result = evaluateExpression(text);\n\n  // Focus the display on open so the user can type or hit Enter immediately.\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  // Update the host field whenever the expression resolves to a number; an\n  // incomplete expression (e.g. \"12+\") simply leaves the field untouched. The\n  // expression rides along with the result — see `onChange` above.\n  const apply = (next: string) => {\n    setExpr(next);\n    const n = evaluateExpression(next);\n    if (n !== null) onChange(formatResult(n), next);\n  };\n\n  const clearAll = () => {\n    setExpr(\"\");\n    onChange(\"\");\n  };\n\n  const equals = () => {\n    if (result === null) return;\n    const out = formatResult(result);\n    setExpr(out);\n    onChange(out, text);\n  };\n\n  return (\n    <div className=\"space-y-2\">\n      <input\n        ref={inputRef}\n        aria-label={labels.calculation}\n        value={text}\n        inputMode=\"decimal\"\n        onChange={(e) => apply(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            equals();\n          }\n        }}\n        // Arithmetic reads left to right in every script, and a calculator display\n        // is right-aligned in every script too — so both stay physical, pinned\n        // with `dir=\"ltr\"` rather than mirrored in a right-to-left form.\n        dir=\"ltr\"\n        className=\"block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1.5 text-right font-mono text-sm text-[var(--text-primary)] focus:border-[var(--border-strong)] focus:ring-[var(--border-strong)]\"\n      />\n      <div dir=\"ltr\" className=\"h-4 pr-1 text-right font-mono text-xs text-[var(--text-placeholder)]\">\n        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : \"\"}\n      </div>\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels.backspace}\n              onClick={() => apply(text.slice(0, -1))}\n              className={cn(KEY_BASE, KEY_ACCENT)}\n            >\n              <Delete className=\"size-4\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? labels[key.name] : undefined}\n              onClick={() => apply(text + key.ins)}\n              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n        <button\n          type=\"button\"\n          // \"C\" is a convention, not a name: read aloud it is the letter.\n          aria-label={labels.clear}\n          onClick={clearAll}\n          className={cn(KEY_BASE, \"col-span-2 bg-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-surface-2)]\")}\n        >\n          C\n        </button>\n        <button\n          type=\"button\"\n          aria-label={labels.equals}\n          onClick={equals}\n          className={cn(\n            KEY_BASE,\n            // The one chip that inverts against the page. There is no hover token for\n            // an inverted fill, so the hover is the chip mixed back toward the\n            // surface — a step quieter in either theme, and still a colour, so\n            // KEY_BASE's `transition-colors` carries it.\n            \"col-span-2 bg-[var(--bg-inverse)] text-[var(--text-inverse)] hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]\",\n          )}\n        >\n          =\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * A calculator icon that opens a small keypad popover anchored to its host\n * field. Designed as a trailing-edge adornment: render it inside the field's\n * `relative` wrapper, positioned absolutely. The keypad seeds from the current\n * field value and writes evaluated results straight back through `onChange`.\n */\nexport function CalculatorButton({\n  value,\n  onChange,\n  className,\n  ariaLabel,\n  labels: labelsProp,\n}: CalculatorButtonProps) {\n  // prop > provider > English, with the older `ariaLabel` prop folded in as the\n  // `open` key it has always been.\n  const fromProps = useMemo(\n    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),\n    [ariaLabel, labelsProp],\n  );\n  const labels = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n  return (\n    <Popover\n      width={224}\n      labels={{ panel: labels.panel }}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          type=\"button\"\n          tabIndex={-1}\n          onClick={toggle}\n          aria-label={labels.open}\n          aria-expanded={open}\n          className={cn(\n            \"flex items-center justify-center text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]\",\n            className,\n          )}\n        >\n          <CalculatorIcon className=\"size-4\" />\n        </button>\n      )}\n    >\n      {() => <CalculatorPanel initial={value} onChange={onChange} labels={labels} />}\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/chart-zoom.js

@@ -124,6 +124,7 @@ function withChartZoom(Chart) {
     };
     const state = { x: xWindow, y: ownY };
     const zoomed = xWindow !== void 0 || ownY !== null;
+    const empty = props.rows?.length === 0 || props.series?.length === 0;
     const clear = () => {
       setXWindow(void 0);
       setOwnY(null);
@@ -146,7 +147,7 @@ function withChartZoom(Chart) {
     };
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(Chart, { ...props, zoom: binding }),
-      zoomed && /* @__PURE__ */ jsxs(
+      zoomed && !empty && /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",

package/dist/components/chart-zoom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/chart-zoom.tsx"],"sourcesContent":["// Drag-to-zoom for cartesian charts — the HOC, the shared x window, and the arithmetic.\n// Lifted out of lenkbank, where every plot in the app is one `SeriesChart` and zoom is\n// therefore wired in exactly once.\n//\n// **Which axes a drag zooms is read off the drag itself.** A selection that is roughly\n// square is a box: the reader framed a REGION and means both axes. A long thin one is a\n// band, and its own direction says which: a wide flat drag means \"this stretch of the\n// abscissa\", a tall narrow one \"this range of values\". Asking with a modifier key\n// instead would be asking people to remember a convention for something they have\n// already drawn.\n//\n// Squareness is measured **in fractions of the plot**, not pixels. These charts are\n// three times wider than they are tall, so a pixel-square selection is a very wide\n// slice of the data and would read as a band to anybody looking at it.\n//\n// The zoom is VIEW state and lives here, never in a query or a store: it is where\n// somebody is looking, and a chart whose data reloads should not lose it. It is cleared\n// by the reset button, by a double click, and by nothing else.\n//\n// Everything with a decision in it is a pure exported function below (`zoomAxesFor`,\n// `selectionFromDrag`, `zoomAfter`, `zoomDomains`, `fitYToX`, `fitXToY`); the\n// components are plumbing between a pointer and those.\nimport { createContext, useContext, useEffect, useState } from \"react\";\nimport type { ComponentType, Dispatch, ReactNode, SetStateAction } from \"react\";\nimport {\n  usePlotArea,\n  useXAxisInverseScale,\n  useYAxisInverseScale,\n  type InverseScaleFunction,\n} from \"recharts\";\nimport { X } from \"lucide-react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from \"./series-chart-labels\";\n\n/** The y axis a series lands on when it names none — the single shared scale most\n *  charts have. `SeriesChart` and the fit below agree on it by importing this. */\nexport const DEFAULT_Y_AXIS = \"y\";\n\n/* ── The arithmetic ─────────────────────────────────────────────────────── */\n\n/**\n * How square a selection has to be before it counts as a box: the shorter side\n * against the longer, both as fractions of the plot. At 0.5 a selection twice as wide\n * as it is tall is still a box and one three times as wide is a band.\n */\nexport const ZOOM_SQUARE_ENOUGH = 0.5;\n\n/** Below this a drag is a click that moved, not a selection. In fractions of the plot,\n *  so it is the same gesture on a phone and on a wall display. */\nexport const ZOOM_MIN_DRAG = 0.02;\n\nexport type ZoomAxes = \"both\" | \"x\" | \"y\";\n\n/** Which axes a drag zooms — or `null` for a drag too small to mean one, or a plot\n *  that has not been laid out yet. Direction does not matter; proportion does. */\nexport function zoomAxesFor(\n  dx: number,\n  dy: number,\n  width: number,\n  height: number,\n  threshold: number = ZOOM_SQUARE_ENOUGH,\n): ZoomAxes | null {\n  if (!(width > 0) || !(height > 0)) return null;\n  const across = Math.abs(dx) / width;\n  const down = Math.abs(dy) / height;\n  if (across < ZOOM_MIN_DRAG && down < ZOOM_MIN_DRAG) return null;\n  const longer = Math.max(across, down);\n  const shorter = Math.min(across, down);\n  if (shorter / longer >= threshold) return \"both\";\n  return across > down ? \"x\" : \"y\";\n}\n\n/** What a drag chose, in DATA coordinates, and which axes it actually named — the\n *  caller needs the second to know which of the two it may derive from the other. */\nexport interface ZoomSelection {\n  which: ZoomAxes;\n  x?: [number, number];\n  /** One window per y axis, keyed by axis id: they are in different units. */\n  y: Record<string, [number, number]>;\n}\n\n/** A drag, in the chart's own pixel coordinates. */\nexport interface ZoomDrag {\n  fromX: number;\n  fromY: number;\n  toX: number;\n  toY: number;\n}\n\n/** A pair as a domain, smallest first. Recharts wants an ascending domain whichever\n *  way the drag went, and a y axis counts downward in pixels while its values count\n *  upward — so both ends are read and sorted rather than one assumed to be low. */\nfunction ordered(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a];\n}\n\n/**\n * A finished drag as a selection, or `null` when it selects nothing.\n *\n * `xInverse` and `yInverse(axisId)` are recharts' pixel→value functions; an axis whose\n * function is missing, or whose ends come back non-finite, is left out rather than\n * handed a NaN window.\n */\nexport function selectionFromDrag(\n  drag: ZoomDrag,\n  plot: { width: number; height: number },\n  xInverse: InverseScaleFunction | undefined,\n  yInverse: (axisId: string) => InverseScaleFunction | undefined,\n  axisIds: readonly string[],\n): ZoomSelection | null {\n  const which = zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height);\n  if (!which) return null;\n  const next: ZoomSelection = { which, y: {} };\n  if (which !== \"y\" && xInverse) {\n    const from = Number(xInverse(drag.fromX));\n    const to = Number(xInverse(drag.toX));\n    if (Number.isFinite(from) && Number.isFinite(to)) next.x = ordered(from, to);\n  }\n  if (which !== \"x\") {\n    for (const id of axisIds) {\n      const inverse = yInverse(id);\n      if (!inverse) continue;\n      const from = Number(inverse(drag.fromY));\n      const to = Number(inverse(drag.toY));\n      if (Number.isFinite(from) && Number.isFinite(to)) next.y[id] = ordered(from, to);\n    }\n  }\n  return next.x || Object.keys(next.y).length ? next : null;\n}\n\n/** What a band refit needs to know about the chart — a subset of `SeriesChart`'s own\n *  props, so a chart hands its data straight over. */\nexport interface ZoomFitSource {\n  rows: Record<string, number>[];\n  series: { key: string; axis?: string }[];\n  axes: { id: string }[];\n  xKey: string;\n}\n\n/** How much of a refitted span to leave as air, top and bottom. Without it the\n *  highest sample sits exactly on the frame, where a line is half drawn and reads as\n *  clipped rather than as the maximum. */\nconst FIT_AIR = 0.05;\n\n/** A span with air around it — and a real span for a flat channel, which would\n *  otherwise be a zero-height window recharts cannot scale. */\nfunction airy(low: number, high: number): [number, number] {\n  const span = high - low;\n  const air = span > 0 ? span * FIT_AIR : Math.max(Math.abs(high), 1) * FIT_AIR;\n  return [low - air, high + air];\n}\n\n/** A running low/high pair. A pair rather than an array to take `Math.min(...)` of:\n *  the spread passes one argument per sample, and V8 faults past ~125,000 of them. */\ntype Span = [number, number] | undefined;\n\n/** A pair widened by one value. A non-finite one is not a value — one NaN would\n *  otherwise take the whole window with it. */\nfunction widen(span: Span, value: number): Span {\n  if (!Number.isFinite(value)) return span;\n  if (!span) return [value, value];\n  if (value < span[0]) span[0] = value;\n  else if (value > span[1]) span[1] = value;\n  return span;\n}\n\n/** Which series are measured on an axis. */\nfunction keysOn(source: ZoomFitSource, axisId: string): string[] {\n  return source.series\n    .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId)\n    .map((entry) => entry.key);\n}\n\n/**\n * Each y axis fitted to the samples inside an x window — what a band across x leaves\n * the axes nobody dragged showing. Zoom into a tenth of a sweep and a y axis still\n * scaled to the whole run draws that tenth as a flat line, which is the one thing the\n * zoom was for; so the unnamed axes are refitted, which is what \"zoom\" means everywhere\n * else.\n *\n * An axis with nothing inside the window is left OUT rather than collapsed: a window\n * between two samples is one where the chart should keep drawing the line across.\n */\nexport function fitYToX(\n  source: ZoomFitSource,\n  window: readonly [number, number],\n): Record<string, [number, number]> {\n  const [from, to] = window;\n  const fitted: Record<string, [number, number]> = {};\n  for (const axis of source.axes) {\n    const keys = keysOn(source, axis.id);\n    let span: Span;\n    for (const row of source.rows) {\n      const at = row[source.xKey];\n      if (!(at >= from && at <= to)) continue;\n      for (const key of keys) span = widen(span, row[key]);\n    }\n    if (span) fitted[axis.id] = airy(span[0], span[1]);\n  }\n  return fitted;\n}\n\n/**\n * The x window that holds every sample inside a set of y windows — the other direction\n * of the same idea. A channel crossing its band once gives a tight window; one that\n * oscillates through it gives back most of the sweep, which is the truthful answer.\n * `undefined` when no sample qualifies, rather than a guess.\n */\nexport function fitXToY(\n  source: ZoomFitSource,\n  windows: Readonly<Record<string, readonly [number, number]>>,\n): [number, number] | undefined {\n  let hits: Span;\n  for (const [axisId, [low, high]] of Object.entries(windows)) {\n    for (const key of keysOn(source, axisId)) {\n      for (const row of source.rows) {\n        const value = row[key];\n        if (Number.isFinite(value) && value >= low && value <= high) {\n          hits = widen(hits, row[source.xKey]);\n        }\n      }\n    }\n  }\n  return hits ? airy(hits[0], hits[1]) : undefined;\n}\n\n/**\n * What a chart remembers about its zoom: the x window, and the y windows the reader\n * DRAGGED. `y: null` means \"derive y from x\" — the split is the whole design: what was\n * dragged is kept, and what follows from it is recomputed on every render, so a band\n * across x refits y here and in every chart sharing the window.\n */\nexport interface ZoomState {\n  x?: [number, number];\n  y: Record<string, [number, number]> | null;\n}\n\nexport const NO_ZOOM: ZoomState = { x: undefined, y: null };\n\n/**\n * The state after a selection. Two band drags COMPOSE rather than the second undoing\n * the first: a band down y keeps the x window when the band holds no samples, and\n * otherwise pulls x in to where they are.\n */\nexport function zoomAfter(\n  state: ZoomState,\n  selection: ZoomSelection,\n  source: ZoomFitSource,\n): ZoomState {\n  if (selection.which === \"both\") return { x: selection.x, y: selection.y };\n  // Leave y derived, so it fits itself to what is inside the new window.\n  if (selection.which === \"x\") return { x: selection.x, y: null };\n  return { x: fitXToY(source, selection.y) ?? state.x, y: selection.y };\n}\n\n/** The domains a chart draws for a state: the x window as is, and each y axis either\n *  as dragged or fitted to the x window. `{}` means \"fit your own data\". */\nexport function zoomDomains(\n  state: ZoomState,\n  source: ZoomFitSource,\n): { xDomain?: [number, number]; yDomains: Record<string, [number, number]> } {\n  return {\n    xDomain: state.x,\n    yDomains: state.y ?? (state.x ? fitYToX(source, state.x) : {}),\n  };\n}\n\n/* ── The components ─────────────────────────────────────────────────────── */\n\n/** What the wrapped chart is handed. It applies the domains to its own axes and renders\n *  `layer` INSIDE the recharts chart, where recharts' hooks answer. */\nexport interface ZoomBinding {\n  xDomain?: [number, number];\n  yDomains: Record<string, [number, number]>;\n  layer: ReactNode;\n}\n\n/** The props `withChartZoom` reads off the chart it wraps. */\nexport interface ZoomTarget {\n  /** Default: the single axis {@link DEFAULT_Y_AXIS}. */\n  axes?: readonly { id: string; hide?: boolean }[];\n  /** The chart's own data, so a band can refit the axis it did not name. Optional: a\n   *  chart with nothing plotted has nothing to fit to. */\n  rows?: Record<string, number>[];\n  series?: readonly { key: string; axis?: string }[];\n  x?: { key?: string };\n  zoom?: ZoomBinding;\n  labels?: Partial<SeriesChartLabels>;\n}\n\nconst SharedX = createContext<{\n  window?: [number, number];\n  set: Dispatch<SetStateAction<[number, number] | undefined>>;\n} | null>(null);\n\n/**\n * One x window for several charts.\n *\n * A column of charts over one abscissa is one picture, and zooming one of them and not\n * the rest turns it into several pictures of different things. Every zoomable chart\n * inside this shares the x window: any drag in any of them moves all of them.\n *\n * **Only x.** The y axes stay each chart's own — they are in different units — and\n * each refits its own y to what is inside the shared window.\n */\nexport function SharedXZoom({ children }: { children: ReactNode }) {\n  const [window, set] = useState<[number, number] | undefined>(undefined);\n  return <SharedX.Provider value={{ window, set }}>{children}</SharedX.Provider>;\n}\n\n/**\n * Wrap a chart in drag-to-zoom.\n *\n * The chart receives a `zoom` binding: it applies `xDomain`/`yDomains` to its axes\n * (with `allowDataOverflow`, so recharts clips to the window instead of widening it\n * back out) and renders `layer` as a child of its recharts chart. A reset button\n * appears over the chart's top end corner while it is zoomed — a real button, so the\n * keyboard can undo what the pointer did.\n */\nexport function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {\n  function Zoomable(props: P) {\n    const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, props.labels);\n    const group = useContext(SharedX);\n    const [ownX, setOwnX] = useState<[number, number] | undefined>(undefined);\n    const [ownY, setOwnY] = useState<Record<string, [number, number]> | null>(null);\n    const xWindow = group ? group.window : ownX;\n    const setXWindow = group ? group.set : setOwnX;\n    const axes = props.axes ?? [{ id: DEFAULT_Y_AXIS }];\n\n    // Every axis, hidden ones included: a hidden axis still scales its lines, and a\n    // line whose axis did not refit is drawn as a flat streak inside the window.\n    const source: ZoomFitSource = {\n      rows: props.rows ?? [],\n      series: [...(props.series ?? [])],\n      axes: [...axes],\n      xKey: props.x?.key ?? \"x\",\n    };\n    const state: ZoomState = { x: xWindow, y: ownY };\n    const zoomed = xWindow !== undefined || ownY !== null;\n\n    const clear = () => {\n      setXWindow(undefined);\n      setOwnY(null);\n    };\n\n    const binding: ZoomBinding = {\n      ...zoomDomains(state, source),\n      layer: (\n        <ZoomLayer\n          axisIds={axes.map((axis) => axis.id)}\n          label={labels.zoomHint}\n          onZoom={(selection) => {\n            const next = zoomAfter(state, selection, source);\n            if (next.x !== xWindow) setXWindow(next.x);\n            setOwnY(next.y);\n          }}\n          onReset={clear}\n        />\n      ),\n    };\n\n    return (\n      <div className=\"relative\">\n        <Chart {...props} zoom={binding} />\n        {zoomed && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)]/90 px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] backdrop-blur transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n          >\n            <X aria-hidden className=\"size-3\" /> {labels.resetZoom}\n          </button>\n        )}\n      </div>\n    );\n  }\n  Zoomable.displayName = `withChartZoom(${Chart.displayName ?? Chart.name ?? \"Chart\"})`;\n  return Zoomable;\n}\n\n/**\n * The part that lives INSIDE the recharts chart, where recharts will say where the plot\n * is and what value a pixel is.\n *\n * A transparent rectangle over the plot area that reads the drag. It does NOT stop the\n * event: recharts drives its tooltip from the same pointer move bubbling up to its own\n * wrapper, so swallowing it here would trade the tooltip for the zoom.\n */\nfunction ZoomLayer({\n  axisIds,\n  label,\n  onZoom,\n  onReset,\n}: {\n  axisIds: string[];\n  label: string;\n  onZoom: (selection: ZoomSelection) => void;\n  onReset: () => void;\n}) {\n  const plot = usePlotArea();\n  const xInverse = useXAxisInverseScale();\n  // One probe COMPONENT per axis rather than a hook in a loop: the number of axes\n  // changes as series are toggled, and a hook count that changes with the data is the\n  // one thing React will not forgive.\n  const [scales] = useState(() => new Map<string, InverseScaleFunction | undefined>());\n  const [drag, setDrag] = useState<ZoomDrag | null>(null);\n\n  if (!plot || plot.width <= 0 || plot.height <= 0) return null;\n\n  const at = (event: { clientX: number; clientY: number; currentTarget: Element }) => {\n    // Against the overlay's own screen box, so padding around the container cannot\n    // shift every reading — plus the plot's offset, because the scales are in the\n    // chart's coordinates rather than the plot's.\n    const box = event.currentTarget.getBoundingClientRect();\n    return { x: event.clientX - box.left + plot.x, y: event.clientY - box.top + plot.y };\n  };\n\n  const finish = () => {\n    if (!drag) return;\n    setDrag(null);\n    const selection = selectionFromDrag(drag, plot, xInverse, (id) => scales.get(id), axisIds);\n    if (selection) onZoom(selection);\n  };\n\n  // What the drag would do, shown while it is being made: a band paints the full width\n  // or height, so the reader sees it is about to let the other axis refit.\n  const which = drag\n    ? zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height)\n    : null;\n\n  return (\n    <g>\n      {axisIds.map((id) => (\n        <AxisProbe key={id} axisId={id} scales={scales} />\n      ))}\n      {drag && which && (\n        <rect\n          x={which === \"y\" ? plot.x : Math.min(drag.fromX, drag.toX)}\n          y={which === \"x\" ? plot.y : Math.min(drag.fromY, drag.toY)}\n          width={which === \"y\" ? plot.width : Math.abs(drag.toX - drag.fromX)}\n          height={which === \"x\" ? plot.height : Math.abs(drag.toY - drag.fromY)}\n          className=\"fill-[var(--brand)]/15 stroke-[var(--brand)]\"\n          strokeDasharray=\"4 3\"\n          pointerEvents=\"none\"\n        />\n      )}\n      <rect\n        x={plot.x}\n        y={plot.y}\n        width={plot.width}\n        height={plot.height}\n        // `transparent`, not `none`: an unpainted shape takes no pointer events.\n        fill=\"transparent\"\n        role=\"application\"\n        aria-label={label}\n        style={{ cursor: \"crosshair\" }}\n        onPointerDown={(event) => {\n          if (event.button !== 0) return;\n          const point = at(event);\n          // Best effort: capture keeps a drag alive past the plot's edge, but a\n          // pointer id the environment does not know throws — jsdom refuses them all —\n          // and a zoom that threw on pointer-down would be a chart nobody could click.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* the drag still works; it just stops at the edge of the plot */\n          }\n          setDrag({ fromX: point.x, fromY: point.y, toX: point.x, toY: point.y });\n        }}\n        onPointerMove={(event) => {\n          if (!drag) return;\n          const point = at(event);\n          setDrag({ ...drag, toX: point.x, toY: point.y });\n        }}\n        onPointerUp={finish}\n        onPointerCancel={() => setDrag(null)}\n        onDoubleClick={onReset}\n      />\n    </g>\n  );\n}\n\n/** One axis's pixel→value function, parked where the pointer handler can reach it. */\nfunction AxisProbe({\n  axisId,\n  scales,\n}: {\n  axisId: string;\n  scales: Map<string, InverseScaleFunction | undefined>;\n}) {\n  const inverse = useYAxisInverseScale(axisId);\n  useEffect(() => {\n    scales.set(axisId, inverse);\n    return () => {\n      scales.delete(axisId);\n    };\n  }, [axisId, inverse, scales]);\n  return null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/chart-zoom.tsx"],"sourcesContent":["// Drag-to-zoom for cartesian charts — the HOC, the shared x window, and the arithmetic.\n// Lifted out of lenkbank, where every plot in the app is one `SeriesChart` and zoom is\n// therefore wired in exactly once.\n//\n// **Which axes a drag zooms is read off the drag itself.** A selection that is roughly\n// square is a box: the reader framed a REGION and means both axes. A long thin one is a\n// band, and its own direction says which: a wide flat drag means \"this stretch of the\n// abscissa\", a tall narrow one \"this range of values\". Asking with a modifier key\n// instead would be asking people to remember a convention for something they have\n// already drawn.\n//\n// Squareness is measured **in fractions of the plot**, not pixels. These charts are\n// three times wider than they are tall, so a pixel-square selection is a very wide\n// slice of the data and would read as a band to anybody looking at it.\n//\n// The zoom is VIEW state and lives here, never in a query or a store: it is where\n// somebody is looking, and a chart whose data reloads should not lose it. It is cleared\n// by the reset button, by a double click, and by nothing else.\n//\n// Everything with a decision in it is a pure exported function below (`zoomAxesFor`,\n// `selectionFromDrag`, `zoomAfter`, `zoomDomains`, `fitYToX`, `fitXToY`); the\n// components are plumbing between a pointer and those.\nimport { createContext, useContext, useEffect, useState } from \"react\";\nimport type { ComponentType, Dispatch, ReactNode, SetStateAction } from \"react\";\nimport {\n  usePlotArea,\n  useXAxisInverseScale,\n  useYAxisInverseScale,\n  type InverseScaleFunction,\n} from \"recharts\";\nimport { X } from \"lucide-react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_SERIES_CHART_LABELS, type SeriesChartLabels } from \"./series-chart-labels\";\n\n/** The y axis a series lands on when it names none — the single shared scale most\n *  charts have. `SeriesChart` and the fit below agree on it by importing this. */\nexport const DEFAULT_Y_AXIS = \"y\";\n\n/* ── The arithmetic ─────────────────────────────────────────────────────── */\n\n/**\n * How square a selection has to be before it counts as a box: the shorter side\n * against the longer, both as fractions of the plot. At 0.5 a selection twice as wide\n * as it is tall is still a box and one three times as wide is a band.\n */\nexport const ZOOM_SQUARE_ENOUGH = 0.5;\n\n/** Below this a drag is a click that moved, not a selection. In fractions of the plot,\n *  so it is the same gesture on a phone and on a wall display. */\nexport const ZOOM_MIN_DRAG = 0.02;\n\nexport type ZoomAxes = \"both\" | \"x\" | \"y\";\n\n/** Which axes a drag zooms — or `null` for a drag too small to mean one, or a plot\n *  that has not been laid out yet. Direction does not matter; proportion does. */\nexport function zoomAxesFor(\n  dx: number,\n  dy: number,\n  width: number,\n  height: number,\n  threshold: number = ZOOM_SQUARE_ENOUGH,\n): ZoomAxes | null {\n  if (!(width > 0) || !(height > 0)) return null;\n  const across = Math.abs(dx) / width;\n  const down = Math.abs(dy) / height;\n  if (across < ZOOM_MIN_DRAG && down < ZOOM_MIN_DRAG) return null;\n  const longer = Math.max(across, down);\n  const shorter = Math.min(across, down);\n  if (shorter / longer >= threshold) return \"both\";\n  return across > down ? \"x\" : \"y\";\n}\n\n/** What a drag chose, in DATA coordinates, and which axes it actually named — the\n *  caller needs the second to know which of the two it may derive from the other. */\nexport interface ZoomSelection {\n  which: ZoomAxes;\n  x?: [number, number];\n  /** One window per y axis, keyed by axis id: they are in different units. */\n  y: Record<string, [number, number]>;\n}\n\n/** A drag, in the chart's own pixel coordinates. */\nexport interface ZoomDrag {\n  fromX: number;\n  fromY: number;\n  toX: number;\n  toY: number;\n}\n\n/** A pair as a domain, smallest first. Recharts wants an ascending domain whichever\n *  way the drag went, and a y axis counts downward in pixels while its values count\n *  upward — so both ends are read and sorted rather than one assumed to be low. */\nfunction ordered(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a];\n}\n\n/**\n * A finished drag as a selection, or `null` when it selects nothing.\n *\n * `xInverse` and `yInverse(axisId)` are recharts' pixel→value functions; an axis whose\n * function is missing, or whose ends come back non-finite, is left out rather than\n * handed a NaN window.\n */\nexport function selectionFromDrag(\n  drag: ZoomDrag,\n  plot: { width: number; height: number },\n  xInverse: InverseScaleFunction | undefined,\n  yInverse: (axisId: string) => InverseScaleFunction | undefined,\n  axisIds: readonly string[],\n): ZoomSelection | null {\n  const which = zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height);\n  if (!which) return null;\n  const next: ZoomSelection = { which, y: {} };\n  if (which !== \"y\" && xInverse) {\n    const from = Number(xInverse(drag.fromX));\n    const to = Number(xInverse(drag.toX));\n    if (Number.isFinite(from) && Number.isFinite(to)) next.x = ordered(from, to);\n  }\n  if (which !== \"x\") {\n    for (const id of axisIds) {\n      const inverse = yInverse(id);\n      if (!inverse) continue;\n      const from = Number(inverse(drag.fromY));\n      const to = Number(inverse(drag.toY));\n      if (Number.isFinite(from) && Number.isFinite(to)) next.y[id] = ordered(from, to);\n    }\n  }\n  return next.x || Object.keys(next.y).length ? next : null;\n}\n\n/** What a band refit needs to know about the chart — a subset of `SeriesChart`'s own\n *  props, so a chart hands its data straight over. */\nexport interface ZoomFitSource {\n  rows: Record<string, number>[];\n  series: { key: string; axis?: string }[];\n  axes: { id: string }[];\n  xKey: string;\n}\n\n/** How much of a refitted span to leave as air, top and bottom. Without it the\n *  highest sample sits exactly on the frame, where a line is half drawn and reads as\n *  clipped rather than as the maximum. */\nconst FIT_AIR = 0.05;\n\n/** A span with air around it — and a real span for a flat channel, which would\n *  otherwise be a zero-height window recharts cannot scale. */\nfunction airy(low: number, high: number): [number, number] {\n  const span = high - low;\n  const air = span > 0 ? span * FIT_AIR : Math.max(Math.abs(high), 1) * FIT_AIR;\n  return [low - air, high + air];\n}\n\n/** A running low/high pair. A pair rather than an array to take `Math.min(...)` of:\n *  the spread passes one argument per sample, and V8 faults past ~125,000 of them. */\ntype Span = [number, number] | undefined;\n\n/** A pair widened by one value. A non-finite one is not a value — one NaN would\n *  otherwise take the whole window with it. */\nfunction widen(span: Span, value: number): Span {\n  if (!Number.isFinite(value)) return span;\n  if (!span) return [value, value];\n  if (value < span[0]) span[0] = value;\n  else if (value > span[1]) span[1] = value;\n  return span;\n}\n\n/** Which series are measured on an axis. */\nfunction keysOn(source: ZoomFitSource, axisId: string): string[] {\n  return source.series\n    .filter((entry) => (entry.axis ?? DEFAULT_Y_AXIS) === axisId)\n    .map((entry) => entry.key);\n}\n\n/**\n * Each y axis fitted to the samples inside an x window — what a band across x leaves\n * the axes nobody dragged showing. Zoom into a tenth of a sweep and a y axis still\n * scaled to the whole run draws that tenth as a flat line, which is the one thing the\n * zoom was for; so the unnamed axes are refitted, which is what \"zoom\" means everywhere\n * else.\n *\n * An axis with nothing inside the window is left OUT rather than collapsed: a window\n * between two samples is one where the chart should keep drawing the line across.\n */\nexport function fitYToX(\n  source: ZoomFitSource,\n  window: readonly [number, number],\n): Record<string, [number, number]> {\n  const [from, to] = window;\n  const fitted: Record<string, [number, number]> = {};\n  for (const axis of source.axes) {\n    const keys = keysOn(source, axis.id);\n    let span: Span;\n    for (const row of source.rows) {\n      const at = row[source.xKey];\n      if (!(at >= from && at <= to)) continue;\n      for (const key of keys) span = widen(span, row[key]);\n    }\n    if (span) fitted[axis.id] = airy(span[0], span[1]);\n  }\n  return fitted;\n}\n\n/**\n * The x window that holds every sample inside a set of y windows — the other direction\n * of the same idea. A channel crossing its band once gives a tight window; one that\n * oscillates through it gives back most of the sweep, which is the truthful answer.\n * `undefined` when no sample qualifies, rather than a guess.\n */\nexport function fitXToY(\n  source: ZoomFitSource,\n  windows: Readonly<Record<string, readonly [number, number]>>,\n): [number, number] | undefined {\n  let hits: Span;\n  for (const [axisId, [low, high]] of Object.entries(windows)) {\n    for (const key of keysOn(source, axisId)) {\n      for (const row of source.rows) {\n        const value = row[key];\n        if (Number.isFinite(value) && value >= low && value <= high) {\n          hits = widen(hits, row[source.xKey]);\n        }\n      }\n    }\n  }\n  return hits ? airy(hits[0], hits[1]) : undefined;\n}\n\n/**\n * What a chart remembers about its zoom: the x window, and the y windows the reader\n * DRAGGED. `y: null` means \"derive y from x\" — the split is the whole design: what was\n * dragged is kept, and what follows from it is recomputed on every render, so a band\n * across x refits y here and in every chart sharing the window.\n */\nexport interface ZoomState {\n  x?: [number, number];\n  y: Record<string, [number, number]> | null;\n}\n\nexport const NO_ZOOM: ZoomState = { x: undefined, y: null };\n\n/**\n * The state after a selection. Two band drags COMPOSE rather than the second undoing\n * the first: a band down y keeps the x window when the band holds no samples, and\n * otherwise pulls x in to where they are.\n */\nexport function zoomAfter(\n  state: ZoomState,\n  selection: ZoomSelection,\n  source: ZoomFitSource,\n): ZoomState {\n  if (selection.which === \"both\") return { x: selection.x, y: selection.y };\n  // Leave y derived, so it fits itself to what is inside the new window.\n  if (selection.which === \"x\") return { x: selection.x, y: null };\n  return { x: fitXToY(source, selection.y) ?? state.x, y: selection.y };\n}\n\n/** The domains a chart draws for a state: the x window as is, and each y axis either\n *  as dragged or fitted to the x window. `{}` means \"fit your own data\". */\nexport function zoomDomains(\n  state: ZoomState,\n  source: ZoomFitSource,\n): { xDomain?: [number, number]; yDomains: Record<string, [number, number]> } {\n  return {\n    xDomain: state.x,\n    yDomains: state.y ?? (state.x ? fitYToX(source, state.x) : {}),\n  };\n}\n\n/* ── The components ─────────────────────────────────────────────────────── */\n\n/** What the wrapped chart is handed. It applies the domains to its own axes and renders\n *  `layer` INSIDE the recharts chart, where recharts' hooks answer. */\nexport interface ZoomBinding {\n  xDomain?: [number, number];\n  yDomains: Record<string, [number, number]>;\n  layer: ReactNode;\n}\n\n/** The props `withChartZoom` reads off the chart it wraps. */\nexport interface ZoomTarget {\n  /** Default: the single axis {@link DEFAULT_Y_AXIS}. */\n  axes?: readonly { id: string; hide?: boolean }[];\n  /** The chart's own data, so a band can refit the axis it did not name. Optional: a\n   *  chart with nothing plotted has nothing to fit to. */\n  rows?: Record<string, number>[];\n  series?: readonly { key: string; axis?: string }[];\n  x?: { key?: string };\n  zoom?: ZoomBinding;\n  labels?: Partial<SeriesChartLabels>;\n}\n\nconst SharedX = createContext<{\n  window?: [number, number];\n  set: Dispatch<SetStateAction<[number, number] | undefined>>;\n} | null>(null);\n\n/**\n * One x window for several charts.\n *\n * A column of charts over one abscissa is one picture, and zooming one of them and not\n * the rest turns it into several pictures of different things. Every zoomable chart\n * inside this shares the x window: any drag in any of them moves all of them.\n *\n * **Only x.** The y axes stay each chart's own — they are in different units — and\n * each refits its own y to what is inside the shared window.\n */\nexport function SharedXZoom({ children }: { children: ReactNode }) {\n  const [window, set] = useState<[number, number] | undefined>(undefined);\n  return <SharedX.Provider value={{ window, set }}>{children}</SharedX.Provider>;\n}\n\n/**\n * Wrap a chart in drag-to-zoom.\n *\n * The chart receives a `zoom` binding: it applies `xDomain`/`yDomains` to its axes\n * (with `allowDataOverflow`, so recharts clips to the window instead of widening it\n * back out) and renders `layer` as a child of its recharts chart. A reset button\n * appears over the chart's top end corner while it is zoomed — a real button, so the\n * keyboard can undo what the pointer did.\n */\nexport function withChartZoom<P extends ZoomTarget>(Chart: ComponentType<P>) {\n  function Zoomable(props: P) {\n    const labels = useKitLabels(\"seriesChart\", DEFAULT_SERIES_CHART_LABELS, props.labels);\n    const group = useContext(SharedX);\n    const [ownX, setOwnX] = useState<[number, number] | undefined>(undefined);\n    const [ownY, setOwnY] = useState<Record<string, [number, number]> | null>(null);\n    const xWindow = group ? group.window : ownX;\n    const setXWindow = group ? group.set : setOwnX;\n    const axes = props.axes ?? [{ id: DEFAULT_Y_AXIS }];\n\n    // Every axis, hidden ones included: a hidden axis still scales its lines, and a\n    // line whose axis did not refit is drawn as a flat streak inside the window.\n    const source: ZoomFitSource = {\n      rows: props.rows ?? [],\n      series: [...(props.series ?? [])],\n      axes: [...axes],\n      xKey: props.x?.key ?? \"x\",\n    };\n    const state: ZoomState = { x: xWindow, y: ownY };\n    const zoomed = xWindow !== undefined || ownY !== null;\n    // A chart handed no rows or no series draws its empty state, not a plot — and a\n    // \"Reset zoom\" floating over \"No data\" (every line toggled off while zoomed) offers\n    // to undo something the reader cannot see. The zoom itself is KEPT: it is where they\n    // were looking, and it applies again the moment a line comes back. Only an array\n    // that is there and empty counts; a chart that does not pass its data is not known\n    // to be empty.\n    const empty = props.rows?.length === 0 || props.series?.length === 0;\n\n    const clear = () => {\n      setXWindow(undefined);\n      setOwnY(null);\n    };\n\n    const binding: ZoomBinding = {\n      ...zoomDomains(state, source),\n      layer: (\n        <ZoomLayer\n          axisIds={axes.map((axis) => axis.id)}\n          label={labels.zoomHint}\n          onZoom={(selection) => {\n            const next = zoomAfter(state, selection, source);\n            if (next.x !== xWindow) setXWindow(next.x);\n            setOwnY(next.y);\n          }}\n          onReset={clear}\n        />\n      ),\n    };\n\n    return (\n      <div className=\"relative\">\n        <Chart {...props} zoom={binding} />\n        {zoomed && !empty && (\n          <button\n            type=\"button\"\n            onClick={clear}\n            className=\"absolute end-1 top-1 z-10 inline-flex items-center gap-1 rounded border border-[var(--border)] bg-[var(--bg-surface)]/90 px-1.5 py-0.5 text-[10px] text-[var(--text-muted)] backdrop-blur transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\"\n          >\n            <X aria-hidden className=\"size-3\" /> {labels.resetZoom}\n          </button>\n        )}\n      </div>\n    );\n  }\n  Zoomable.displayName = `withChartZoom(${Chart.displayName ?? Chart.name ?? \"Chart\"})`;\n  return Zoomable;\n}\n\n/**\n * The part that lives INSIDE the recharts chart, where recharts will say where the plot\n * is and what value a pixel is.\n *\n * A transparent rectangle over the plot area that reads the drag. It does NOT stop the\n * event: recharts drives its tooltip from the same pointer move bubbling up to its own\n * wrapper, so swallowing it here would trade the tooltip for the zoom.\n */\nfunction ZoomLayer({\n  axisIds,\n  label,\n  onZoom,\n  onReset,\n}: {\n  axisIds: string[];\n  label: string;\n  onZoom: (selection: ZoomSelection) => void;\n  onReset: () => void;\n}) {\n  const plot = usePlotArea();\n  const xInverse = useXAxisInverseScale();\n  // One probe COMPONENT per axis rather than a hook in a loop: the number of axes\n  // changes as series are toggled, and a hook count that changes with the data is the\n  // one thing React will not forgive.\n  const [scales] = useState(() => new Map<string, InverseScaleFunction | undefined>());\n  const [drag, setDrag] = useState<ZoomDrag | null>(null);\n\n  if (!plot || plot.width <= 0 || plot.height <= 0) return null;\n\n  const at = (event: { clientX: number; clientY: number; currentTarget: Element }) => {\n    // Against the overlay's own screen box, so padding around the container cannot\n    // shift every reading — plus the plot's offset, because the scales are in the\n    // chart's coordinates rather than the plot's.\n    const box = event.currentTarget.getBoundingClientRect();\n    return { x: event.clientX - box.left + plot.x, y: event.clientY - box.top + plot.y };\n  };\n\n  const finish = () => {\n    if (!drag) return;\n    setDrag(null);\n    const selection = selectionFromDrag(drag, plot, xInverse, (id) => scales.get(id), axisIds);\n    if (selection) onZoom(selection);\n  };\n\n  // What the drag would do, shown while it is being made: a band paints the full width\n  // or height, so the reader sees it is about to let the other axis refit.\n  const which = drag\n    ? zoomAxesFor(drag.toX - drag.fromX, drag.toY - drag.fromY, plot.width, plot.height)\n    : null;\n\n  return (\n    <g>\n      {axisIds.map((id) => (\n        <AxisProbe key={id} axisId={id} scales={scales} />\n      ))}\n      {drag && which && (\n        <rect\n          x={which === \"y\" ? plot.x : Math.min(drag.fromX, drag.toX)}\n          y={which === \"x\" ? plot.y : Math.min(drag.fromY, drag.toY)}\n          width={which === \"y\" ? plot.width : Math.abs(drag.toX - drag.fromX)}\n          height={which === \"x\" ? plot.height : Math.abs(drag.toY - drag.fromY)}\n          className=\"fill-[var(--brand)]/15 stroke-[var(--brand)]\"\n          strokeDasharray=\"4 3\"\n          pointerEvents=\"none\"\n        />\n      )}\n      <rect\n        x={plot.x}\n        y={plot.y}\n        width={plot.width}\n        height={plot.height}\n        // `transparent`, not `none`: an unpainted shape takes no pointer events.\n        fill=\"transparent\"\n        role=\"application\"\n        aria-label={label}\n        style={{ cursor: \"crosshair\" }}\n        onPointerDown={(event) => {\n          if (event.button !== 0) return;\n          const point = at(event);\n          // Best effort: capture keeps a drag alive past the plot's edge, but a\n          // pointer id the environment does not know throws — jsdom refuses them all —\n          // and a zoom that threw on pointer-down would be a chart nobody could click.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* the drag still works; it just stops at the edge of the plot */\n          }\n          setDrag({ fromX: point.x, fromY: point.y, toX: point.x, toY: point.y });\n        }}\n        onPointerMove={(event) => {\n          if (!drag) return;\n          const point = at(event);\n          setDrag({ ...drag, toX: point.x, toY: point.y });\n        }}\n        onPointerUp={finish}\n        onPointerCancel={() => setDrag(null)}\n        onDoubleClick={onReset}\n      />\n    </g>\n  );\n}\n\n/** One axis's pixel→value function, parked where the pointer handler can reach it. */\nfunction AxisProbe({\n  axisId,\n  scales,\n}: {\n  axisId: string;\n  scales: Map<string, InverseScaleFunction | undefined>;\n}) {\n  const inverse = useYAxisInverseScale(axisId);\n  useEffect(() => {\n    scales.set(axisId, inverse);\n    return () => {\n      scales.delete(axisId);\n    };\n  }, [axisId, inverse, scales]);\n  return null;\n}\n"],"mappings":"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","names":[]}