@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../src/components/ColorPicker.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hexToHsv, hsvToHex, isHexColor, type Hsv } from \"../lib/color\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Button } from \"./Button\";\nimport { Field } from \"./Field\";\nimport { Input } from \"./Input\";\nimport { Popover } from \"./Popover\";\n\n/* ============================================================================\n   COLOR PICKER — a swatch button that opens a full picker (DXUI-28).\n\n   For any stored colour value: a saturation/brightness area, a hue slider, a hex\n   field and, optionally, a row of preset swatches. The value is `#rrggbb` at the\n   boundary; inside it is HSV, because that is what the two surfaces are. The HSV is\n   kept as state (not re-derived from the hex on every move) so dragging brightness to\n   0 or saturation to 0 does not snap the hue to red: a grey has no hue in hex.\n\n   `onChange` is a COMMIT, not a stream: it fires when a pointer drag is released, on\n   each arrow-key step, on a preset, and on Enter in the hex field. While dragging, the\n   preview (the area handle, the swatch on the trigger) follows the pointer without it.\n   ========================================================================= */\n\nexport interface ColorPickerProps {\n  /** The colour, `#rrggbb`. Anything else throws: a stored colour that is not a hex is a caller bug. */\n  value: string;\n  /** Told the committed colour, lowercase `#rrggbb`. Never told an unchanged colour. */\n  onChange: (hex: string) => void;\n  /** Swatches shown above the custom area; the one equal to `value` is marked. */\n  presets?: string[];\n  /** The accessible name of the picker and of its popover. Unset, the trigger is named by its colour. */\n  label?: string;\n  disabled?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst SMALL_STEP = 0.01;\nconst LARGE_STEP = 0.1;\nconst HUE_SMALL = 1;\nconst HUE_LARGE = 10;\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));\n\n/* The rainbow a hue slider paints: the six primaries and back to red. Data, not chrome: no theme token is a hue ramp. */\nconst HUE_RAMP = \"linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)\";\n\ninterface SurfaceDrag {\n  onPointerDown: (e: PointerEvent<HTMLDivElement>) => void;\n  onPointerMove: (e: PointerEvent<HTMLDivElement>) => void;\n  onPointerUp: (e: PointerEvent<HTMLDivElement>) => void;\n  onPointerCancel: (e: PointerEvent<HTMLDivElement>) => void;\n}\n\n/** Pointer-capture drag over a rectangle: the position as `0..1` fractions, and a release. */\nfunction useSurfaceDrag(onPoint: (fx: number, fy: number) => void, onRelease: () => void): SurfaceDrag {\n  const dragging = useRef(false);\n  const point = (e: PointerEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    if (rect.width === 0 || rect.height === 0) return;\n    onPoint(clamp((e.clientX - rect.left) / rect.width, 0, 1), clamp((e.clientY - rect.top) / rect.height, 0, 1));\n  };\n  const end = (e: PointerEvent<HTMLDivElement>) => {\n    if (!dragging.current) return;\n    dragging.current = false;\n    if (e.currentTarget.hasPointerCapture?.(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);\n    onRelease();\n  };\n  return {\n    onPointerDown: (e) => {\n      if (e.button !== 0) return;\n      dragging.current = true;\n      e.currentTarget.setPointerCapture?.(e.pointerId);\n      e.currentTarget.focus();\n      point(e);\n    },\n    onPointerMove: (e) => {\n      if (dragging.current) point(e);\n    },\n    onPointerUp: end,\n    onPointerCancel: end,\n  };\n}\n\n/* The swatch inside the trigger, sized from the control height (a percentage has no definite box to resolve against). */\nconst SWATCH = { sm: \"size-3.5\", md: \"size-4.5\", lg: \"size-5.5\" } as const;\n\nconst HANDLE = [\n  \"absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-control-knob shadow-knob pointer-events-none\",\n  \"group-focus-visible/surface:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n];\n\nconst SURFACE = \"group/surface relative touch-none select-none outline-none rounded-md border border-border\";\n\ninterface PanelProps {\n  hsv: Hsv;\n  value: string;\n  presets: string[] | undefined;\n  onPreview: (next: Hsv) => void;\n  onCommit: (next: Hsv) => void;\n  onRelease: () => void;\n}\n\nfunction ColorPanel({ hsv, value, presets, onPreview, onCommit, onRelease }: PanelProps) {\n  const strings = useUiStrings().colorPicker;\n  const shown = hsvToHex(hsv);\n  const [draft, setDraft] = useState(shown);\n  const [hexError, setHexError] = useState(false);\n  /* The field follows the colour as it moves or a preset lands; typing detaches it until the colour next changes. */\n  const [lastShown, setLastShown] = useState(shown);\n  if (shown !== lastShown) {\n    setLastShown(shown);\n    setDraft(shown);\n    setHexError(false);\n  }\n\n  const areaDrag = useSurfaceDrag((fx, fy) => onPreview({ ...hsv, s: fx, v: 1 - fy }), onRelease);\n  const hueDrag = useSurfaceDrag((fx) => onPreview({ ...hsv, h: fx * 360 }), onRelease);\n\n  const onAreaKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    const step = e.shiftKey ? LARGE_STEP : SMALL_STEP;\n    const next =\n      e.key === \"ArrowLeft\" ? { ...hsv, s: clamp(hsv.s - step, 0, 1) }\n      : e.key === \"ArrowRight\" ? { ...hsv, s: clamp(hsv.s + step, 0, 1) }\n      : e.key === \"ArrowUp\" ? { ...hsv, v: clamp(hsv.v + step, 0, 1) }\n      : e.key === \"ArrowDown\" ? { ...hsv, v: clamp(hsv.v - step, 0, 1) }\n      : null;\n    if (!next) return;\n    e.preventDefault();\n    onCommit(next);\n  };\n\n  const onHueKey = (e: KeyboardEvent<HTMLDivElement>) => {\n    const step = e.shiftKey ? HUE_LARGE : HUE_SMALL;\n    const next =\n      e.key === \"ArrowLeft\" || e.key === \"ArrowDown\" ? { ...hsv, h: clamp(hsv.h - step, 0, 360) }\n      : e.key === \"ArrowRight\" || e.key === \"ArrowUp\" ? { ...hsv, h: clamp(hsv.h + step, 0, 360) }\n      : null;\n    if (!next) return;\n    e.preventDefault();\n    onCommit(next);\n  };\n\n  const onHexKey = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key !== \"Enter\") return;\n    e.preventDefault();\n    if (!isHexColor(draft)) {\n      setHexError(true);\n      return;\n    }\n    setHexError(false);\n    onCommit(hexToHsv(draft));\n  };\n\n  const hueNow = Math.round(hsv.h);\n  const satNow = Math.round(hsv.s * 100);\n  const briNow = Math.round(hsv.v * 100);\n  const pureHue = hsvToHex({ h: hsv.h, s: 1, v: 1 });\n\n  return (\n    <div className=\"flex w-64 max-w-full flex-col gap-3\">\n      {presets && presets.length > 0 && (\n        <div role=\"group\" aria-label={strings.presets} className=\"flex flex-wrap gap-2\">\n          {presets.map((preset) => {\n            const selected = preset.toLowerCase() === value.toLowerCase();\n            return (\n              <Button\n                key={preset}\n                variant=\"outline\"\n                iconOnly\n                size=\"xs\"\n                aria-label={strings.colour(preset)}\n                aria-pressed={selected}\n                onClick={() => onCommit(hexToHsv(preset))}\n                className={cn(selected && \"border-control shadow-[0_0_0_2px_var(--control-focus-halo)]\")}\n              >\n                <span aria-hidden className=\"size-3 rounded-full border border-border\" style={{ backgroundColor: preset }} />\n              </Button>\n            );\n          })}\n        </div>\n      )}\n\n      <div\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={strings.area}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={satNow}\n        aria-valuetext={strings.areaValue(satNow, briNow)}\n        onKeyDown={onAreaKey}\n        {...areaDrag}\n        className={cn(SURFACE, \"h-36 cursor-crosshair\")}\n        style={{\n          backgroundColor: pureHue,\n          backgroundImage: \"linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)\",\n        }}\n      >\n        <span className={cn(HANDLE)} style={{ left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, backgroundColor: shown }} />\n      </div>\n\n      <div\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={strings.hue}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={hueNow}\n        aria-valuetext={strings.hueValue(hueNow)}\n        onKeyDown={onHueKey}\n        {...hueDrag}\n        className={cn(SURFACE, \"h-4 cursor-ew-resize\")}\n        style={{ backgroundImage: HUE_RAMP }}\n      >\n        <span className={cn(HANDLE, \"top-1/2\")} style={{ left: `${(hsv.h / 360) * 100}%`, backgroundColor: pureHue }} />\n      </div>\n\n      <Field label={strings.hexField} error={hexError ? strings.invalidHex : undefined}>\n        <Input\n          size=\"sm\"\n          value={draft}\n          spellCheck={false}\n          autoComplete=\"off\"\n          onChange={(e) => {\n            setDraft(e.target.value);\n            setHexError(false);\n          }}\n          onKeyDown={onHexKey}\n        />\n      </Field>\n    </div>\n  );\n}\n\nexport function ColorPicker({ value, onChange, presets, label, disabled = false, size = \"md\", className }: ColorPickerProps) {\n  const strings = useUiStrings().colorPicker;\n  const [hsv, setHsv] = useState(() => hexToHsv(value));\n  const hsvRef = useRef(hsv);\n  useEffect(() => {\n    hsvRef.current = hsv;\n  });\n\n  const preview = (next: Hsv) => {\n    hsvRef.current = next;\n    setHsv(next);\n  };\n\n  /* A new `value` from outside (a revert, another control) replaces the working colour; one that is the colour\n     already being shown keeps its hue, which a hex cannot carry for a grey. */\n  const [seen, setSeen] = useState(value);\n  if (value !== seen) {\n    setSeen(value);\n    if (hsvToHex(hsv) !== value.toLowerCase()) preview(hexToHsv(value));\n  }\n\n  const commit = (next: Hsv) => {\n    preview(next);\n    const hex = hsvToHex(next);\n    if (hex !== value.toLowerCase()) onChange(hex);\n  };\n\n  const shown = hsvToHex(hsv);\n  const named = strings.colour(shown);\n\n  return (\n    <Popover\n      align=\"start\"\n      aria-label={label}\n      className={className}\n      onOpenChange={(open) => {\n        /* Closed without a commit (Escape mid-drag): the preview goes back to the stored colour. */\n        if (!open && hsvToHex(hsvRef.current) !== value.toLowerCase()) preview(hexToHsv(value));\n      }}\n      trigger={\n        <Button\n          variant=\"outline\"\n          iconOnly\n          size={size}\n          className=\"self-start\"\n          disabled={disabled}\n          aria-label={label ?? named}\n          aria-description={label ? named : undefined}\n        >\n          <span aria-hidden className={cn(SWATCH[size], \"rounded-sm border border-border\")} style={{ backgroundColor: shown }} />\n        </Button>\n      }\n    >\n      <ColorPanel\n        hsv={hsv}\n        value={value}\n        presets={presets}\n        onPreview={preview}\n        onCommit={commit}\n        onRelease={() => commit(hsvRef.current)}\n      />\n    </Popover>\n  );\n}\n"],"names":["SMALL_STEP","LARGE_STEP","HUE_SMALL","HUE_LARGE","clamp","n","lo","hi","HUE_RAMP","useSurfaceDrag","onPoint","onRelease","dragging","useRef","point","e","rect","end","SWATCH","HANDLE","SURFACE","ColorPanel","hsv","value","presets","onPreview","onCommit","strings","useUiStrings","shown","hsvToHex","draft","setDraft","useState","hexError","setHexError","lastShown","setLastShown","areaDrag","fx","fy","hueDrag","onAreaKey","step","next","onHueKey","onHexKey","isHexColor","hexToHsv","hueNow","satNow","briNow","pureHue","jsxs","jsx","preset","selected","Button","cn","Field","Input","ColorPicker","onChange","label","disabled","size","className","setHsv","hsvRef","useEffect","preview","seen","setSeen","commit","hex","named","Popover","open"],"mappings":"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"}

package/dist/components/Combobox.js

@@ -0,0 +1,212 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useRef as I, useState as S } from "react";
+import { Combobox as e } from "@base-ui/react/combobox";
+import { cn as d } from "../lib/cn.js";
+import { useRelabelBaseUiDismiss as v } from "../lib/use-relabel-base-ui-dismiss.js";
+import { Icon as h } from "./Icon.js";
+import { Spinner as _ } from "./Spinner.js";
+import { ANCHORED_POPUP_SURFACE as E, ANCHORED_POPUP_MOTION as U } from "./overlay-shell.js";
+import { useUiStrings as N } from "../lib/i18n/provider.js";
+const C = [
+  "max-h-[min(22rem,var(--available-height))] w-[var(--anchor-width)] overflow-y-auto",
+  E,
+  "p-1",
+  ...U
+], w = "px-3 py-6 text-center text-sm text-tertiary empty:hidden", P = [
+  "flex w-full min-w-0 items-center gap-2 rounded-md",
+  "border border-field-border bg-field px-3",
+  "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+  "hover:not-has-disabled:border-field-border-hover",
+  "has-focus:border-control has-focus:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+  "has-data-invalid:border-danger",
+  "has-disabled:opacity-45"
+];
+function O(r) {
+  const o = I(null), [n, i] = S(null);
+  return {
+    anchorRef: o,
+    handleOpenChange: ((...c) => {
+      const [m] = c;
+      i(m ? o.current?.getBoundingClientRect().width ?? null : null), r?.(...c);
+    }),
+    /* Undefined until the first measurement, so the popup's own
+       `w-[var(--anchor-width)]` still sizes the very first paint. */
+    popupStyle: n === null ? void 0 : { width: `${n}px` }
+  };
+}
+function B({
+  placeholder: r,
+  emptyMessage: o,
+  className: n,
+  children: i,
+  ref: u,
+  "aria-label": c,
+  onOpenChange: m,
+  loading: l = !1,
+  ...x
+}) {
+  const a = N().combobox, { anchorRef: p, handleOpenChange: f, popupStyle: b } = O(m), g = v(a.dismiss, p);
+  return /* @__PURE__ */ s(
+    e.Root,
+    {
+      ...x,
+      disabled: x.disabled || l,
+      onOpenChange: f,
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: p,
+            "data-loading": l || void 0,
+            "aria-busy": l || void 0,
+            className: d(P, "h-control-md", l && "cursor-wait has-disabled:opacity-100", n),
+            children: [
+              /* @__PURE__ */ t(h, { name: "search", size: "sm", className: "shrink-0 text-tertiary" }),
+              /* @__PURE__ */ t(
+                e.Input,
+                {
+                  ref: u,
+                  "aria-label": c,
+                  placeholder: r ?? a.placeholder,
+                  className: "w-full min-w-0 bg-transparent text-sm text-primary outline-none placeholder:text-field-placeholder"
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.Clear,
+                {
+                  className: "shrink-0 rounded-sm text-tertiary transition-colors duration-(--dur-fast) hover:text-primary",
+                  "aria-label": a.clear,
+                  children: /* @__PURE__ */ t(h, { name: "x", size: "sm" })
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.Trigger,
+                {
+                  className: "shrink-0 text-tertiary transition-colors duration-(--dur-fast) hover:text-primary",
+                  "aria-label": a.open,
+                  children: /* @__PURE__ */ t(e.Icon, { children: l ? /* @__PURE__ */ t(_, { size: "sm" }) : /* @__PURE__ */ t(
+                    h,
+                    {
+                      name: "chevron-down",
+                      size: "sm",
+                      className: "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy in-data-popup-open:rotate-180"
+                    }
+                  ) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(e.Positioner, { ref: g, sideOffset: 6, className: "z-(--z-popover) outline-none", children: /* @__PURE__ */ s(e.Popup, { className: d(C), style: b, children: [
+          /* @__PURE__ */ t(e.Empty, { className: w, children: o ?? a.noMatch }),
+          /* @__PURE__ */ t(e.List, { children: i })
+        ] }) }) })
+      ]
+    }
+  );
+}
+function H({ className: r, children: o, ref: n, ...i }) {
+  return /* @__PURE__ */ s(
+    e.Item,
+    {
+      ref: n,
+      className: d(
+        "dx-tap relative flex cursor-pointer select-none items-center gap-2 rounded-md py-2 pr-2 pl-8",
+        "text-sm text-secondary outline-none",
+        "transition-[var(--tx-colors)] duration-(--dur-instant)",
+        "data-highlighted:bg-surface-hover data-highlighted:text-primary",
+        /* See SelectItem: the chosen option needs a fill of its own, and
+           selected-and-highlighted needs a third value stacked above both —
+           without it, hovering a chosen option repaints it as unchosen. */
+        "data-selected:bg-control-subtle data-selected:font-medium data-selected:text-control-text",
+        "data-selected:data-highlighted:bg-control-subtle-hover",
+        r
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ t(e.ItemIndicator, { className: "absolute left-2 grid place-items-center", children: /* @__PURE__ */ t(h, { name: "check", size: "sm", className: "animate-scale-in text-control-text" }) }),
+        o
+      ]
+    }
+  );
+}
+function W({ label: r, children: o }) {
+  return /* @__PURE__ */ s(e.Group, { children: [
+    r && /* @__PURE__ */ t(e.GroupLabel, { className: "px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase", children: r }),
+    o
+  ] });
+}
+function $({
+  placeholder: r,
+  emptyMessage: o,
+  renderChip: n,
+  className: i,
+  children: u,
+  ref: c,
+  "aria-label": m,
+  onOpenChange: l,
+  ...x
+}) {
+  const a = N().combobox, { anchorRef: p, handleOpenChange: f, popupStyle: b } = O(l), g = v(a.dismiss, p);
+  return /* @__PURE__ */ s(
+    e.Root,
+    {
+      multiple: !0,
+      ...x,
+      onOpenChange: f,
+      children: [
+        /* @__PURE__ */ s(
+          e.Chips,
+          {
+            ref: p,
+            className: d(P, "min-h-control-md flex-wrap gap-1.5 py-1.5", i),
+            children: [
+              /* @__PURE__ */ t(e.Value, { children: (R) => R.map((y, z) => /* @__PURE__ */ s(
+                e.Chip,
+                {
+                  className: d(
+                    "flex items-center gap-1.5 rounded-md bg-control-subtle py-1 pr-1 pl-2",
+                    "text-xs font-medium text-control-text",
+                    "animate-scale-in"
+                  ),
+                  children: [
+                    n ? n(y) : String(y),
+                    /* @__PURE__ */ t(
+                      e.ChipRemove,
+                      {
+                        className: "rounded-sm text-control-text/70 transition-colors duration-(--dur-fast) hover:text-control-text",
+                        "aria-label": a.remove,
+                        children: /* @__PURE__ */ t(h, { name: "x", size: "xs" })
+                      }
+                    )
+                  ]
+                },
+                z
+              )) }),
+              /* @__PURE__ */ t(
+                e.Input,
+                {
+                  ref: c,
+                  "aria-label": m,
+                  placeholder: r ?? a.placeholder,
+                  className: "min-w-24 flex-1 bg-transparent text-sm text-primary outline-none placeholder:text-field-placeholder"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(e.Positioner, { ref: g, sideOffset: 6, className: "z-(--z-popover) outline-none", children: /* @__PURE__ */ s(e.Popup, { className: d(C), style: b, children: [
+          /* @__PURE__ */ t(e.Empty, { className: w, children: o ?? a.noMatch }),
+          /* @__PURE__ */ t(e.List, { children: u })
+        ] }) }) })
+      ]
+    }
+  );
+}
+export {
+  B as Combobox,
+  W as ComboboxGroup,
+  H as ComboboxItem,
+  $ as MultiCombobox
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../src/components/Combobox.tsx"],"sourcesContent":["import { useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { useRelabelBaseUiDismiss } from \"../lib/use-relabel-base-ui-dismiss\";\nimport { Icon } from \"./Icon\";\nimport { Spinner } from \"./Spinner\";\nimport { ANCHORED_POPUP_MOTION, ANCHORED_POPUP_SURFACE } from \"./overlay-shell\";\n\n/* ============================================================================\n   COMBOBOX — a select you can type into, and the hardest control in the set.\n\n   WHY IT IS HARD, and what this component is actually solving:\n\n     - The input is both a FILTER and a VALUE. Typing has to narrow the list\n       without committing anything, but blurring must not leave a half-typed\n       string looking like a selection.\n     - The list has to stay reachable by keyboard while focus never leaves the\n       input, which means the highlight is not focus, and every arrow key has\n       to be handled rather than inherited.\n     - Multiple selection turns the input into a chip container, and backspace\n       in an empty input must remove the LAST chip rather than doing nothing.\n\n   Base UI owns all of that. What is here is the part that is ours: how it\n   looks, what the empty state says, and where the motion comes from.\n\n   THE EMPTY STATE IS NOT AN AFTERTHOUGHT. \"No results\" is the message people\n   see most often in a combobox they are struggling with, and it is the only\n   moment the control can offer them something useful.\n   ========================================================================= */\n\nconst POPUP = [\n  \"max-h-[min(22rem,var(--available-height))] w-[var(--anchor-width)] overflow-y-auto\",\n  ANCHORED_POPUP_SURFACE,\n  \"p-1\",\n  ...ANCHORED_POPUP_MOTION,\n];\n\n/* DX-4265: Base UI's `Empty` is ALWAYS in the DOM — an aria-live status node\n   that holds the message only while nothing matches. Its padding made it a\n   46px empty band above the option list whenever something DID match.\n   `empty:hidden` drops the box while it has no text and brings it back with\n   the message. */\nconst EMPTY = \"px-3 py-6 text-center text-sm text-tertiary empty:hidden\";\n\nconst FIELD = [\n  \"flex w-full min-w-0 items-center gap-2 rounded-md\",\n  \"border border-field-border bg-field px-3\",\n  \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n  \"hover:not-has-disabled:border-field-border-hover\",\n  \"has-focus:border-control has-focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n  \"has-data-invalid:border-danger\",\n  \"has-disabled:opacity-45\",\n];\n\ntype OpenChange = NonNullable<BaseCombobox.Root.Props<unknown, boolean>[\"onOpenChange\"]>;\n\n/* ============================================================================\n   AN OPEN POPUP'S WIDTH IS A SNAPSHOT, NOT A LIVE MEASUREMENT.\n\n   THE BUG THIS EXISTS FOR. `--anchor-width` is republished by the positioner\n   every time the anchor's box changes, and the multi-select's anchor is a\n   chip container that reflows as it fills. Measured on the Labels field at\n   1440px: the popup opened at 372px, then went 437 → 514 → 448 as three chips\n   were added — it does not merely shrink, it JUMPS in both directions as the\n   chips rewrap. The list you are choosing FROM resizes under the pointer while\n   you choose, so the option you were about to click is no longer there.\n\n   So the width is taken ONCE, on the way open, and held as an inline width for\n   as long as the popup stays open; closing clears it and the next open\n   measures again. Nothing about the trigger's own reflow reaches the surface\n   floating above it.\n\n   Why not simply anchor to the outer chip box, whose width is set by the grid?\n   Because that fixes this instance and not the rule. Any anchor can be made to\n   reflow — a trigger that grows a badge, a label that wraps at a narrow\n   width — and the requirement is about the popup, not about one anchor.\n\n   `Select` and `Menu` share `--anchor-width` but use it as `min-w`, so a\n   reflowing anchor there could only ever widen the popup, never move an option\n   out from under the pointer. Their anchors were measured too and hold steady.\n   ========================================================================= */\nfunction useFrozenPopupWidth(onOpenChange?: OpenChange) {\n  const anchorRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n\n  const handleOpenChange = ((...args: Parameters<OpenChange>) => {\n    const [open] = args;\n    setWidth(open ? (anchorRef.current?.getBoundingClientRect().width ?? null) : null);\n    onOpenChange?.(...args);\n  }) as OpenChange;\n\n  return {\n    anchorRef,\n    handleOpenChange,\n    /* Undefined until the first measurement, so the popup's own\n       `w-[var(--anchor-width)]` still sizes the very first paint. */\n    popupStyle: width === null ? undefined : { width: `${width}px` },\n  };\n}\n\nexport interface ComboboxProps<Value> extends Omit<BaseCombobox.Root.Props<Value, boolean>, \"children\"> {\n  /** Omitted, the provider's `combobox.placeholder`. */\n  placeholder?: string;\n  /** Shown when the filter matches nothing. Omitted, the provider's `combobox.noMatch`. */\n  emptyMessage?: ReactNode;\n  /** Accessible name, when there is no visible label. */\n  \"aria-label\"?: string;\n  className?: string;\n  children: ReactNode;\n  /**\n   * DX-6426 - the choice this combobox sends is out and unanswered: the chevron becomes a spinner and the field refuses input (no second request)\n   * until it is answered. Pass it from the pending state of the write; the value stays the saved one until the answer repaints.\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Combobox<Value>({\n  placeholder,\n  emptyMessage,\n  className,\n  children,\n  ref,\n  \"aria-label\": ariaLabel,\n  onOpenChange,\n  loading = false,\n  ...props\n}: ComboboxProps<Value>) {\n  const strings = useUiStrings().combobox;\n  const { anchorRef, handleOpenChange, popupStyle } = useFrozenPopupWidth(onOpenChange);\n  const positionerRef = useRelabelBaseUiDismiss(strings.dismiss, anchorRef);\n\n  return (\n    <BaseCombobox.Root\n      {...(props as BaseCombobox.Root.Props<Value, boolean>)}\n      disabled={props.disabled || loading}\n      onOpenChange={handleOpenChange}\n    >\n      <div\n        ref={anchorRef}\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        className={cn(FIELD, \"h-control-md\", loading && \"cursor-wait has-disabled:opacity-100\", className)}\n      >\n        <Icon name=\"search\" size=\"sm\" className=\"shrink-0 text-tertiary\" />\n        <BaseCombobox.Input\n          ref={ref}\n          aria-label={ariaLabel}\n          placeholder={placeholder ?? strings.placeholder}\n          className=\"w-full min-w-0 bg-transparent text-sm text-primary outline-none placeholder:text-field-placeholder\"\n        />\n        {/* Clear only appears once there is something to clear — a permanently\n            visible clear button is a permanently visible dead control. */}\n        <BaseCombobox.Clear\n          className=\"shrink-0 rounded-sm text-tertiary transition-colors duration-(--dur-fast) hover:text-primary\"\n          aria-label={strings.clear}\n        >\n          <Icon name=\"x\" size=\"sm\" />\n        </BaseCombobox.Clear>\n        <BaseCombobox.Trigger\n          className=\"shrink-0 text-tertiary transition-colors duration-(--dur-fast) hover:text-primary\"\n          aria-label={strings.open}\n        >\n          <BaseCombobox.Icon>\n            {loading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon\n                name=\"chevron-down\"\n                size=\"sm\"\n                className=\"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy in-data-popup-open:rotate-180\"\n              />\n            )}\n          </BaseCombobox.Icon>\n        </BaseCombobox.Trigger>\n      </div>\n\n      <BaseCombobox.Portal>\n        <BaseCombobox.Positioner ref={positionerRef} sideOffset={6} className=\"z-(--z-popover) outline-none\">\n          <BaseCombobox.Popup className={cn(POPUP)} style={popupStyle}>\n            <BaseCombobox.Empty className={EMPTY}>\n              {emptyMessage ?? strings.noMatch}\n            </BaseCombobox.Empty>\n            <BaseCombobox.List>{children}</BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </BaseCombobox.Root>\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<BaseCombobox.Item.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps) {\n  return (\n    <BaseCombobox.Item\n      ref={ref}\n      className={cn(\n        \"dx-tap relative flex cursor-pointer select-none items-center gap-2 rounded-md py-2 pr-2 pl-8\",\n        \"text-sm text-secondary outline-none\",\n        \"transition-[var(--tx-colors)] duration-(--dur-instant)\",\n        \"data-highlighted:bg-surface-hover data-highlighted:text-primary\",\n        /* See SelectItem: the chosen option needs a fill of its own, and\n           selected-and-highlighted needs a third value stacked above both —\n           without it, hovering a chosen option repaints it as unchosen. */\n        \"data-selected:bg-control-subtle data-selected:font-medium data-selected:text-control-text\",\n        \"data-selected:data-highlighted:bg-control-subtle-hover\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseCombobox.ItemIndicator className=\"absolute left-2 grid place-items-center\">\n        <Icon name=\"check\" size=\"sm\" className=\"animate-scale-in text-control-text\" />\n      </BaseCombobox.ItemIndicator>\n      {children}\n    </BaseCombobox.Item>\n  );\n}\n\nexport interface ComboboxGroupProps {\n  /** Prop, not a child component, so a label cannot be placed outside a group. */\n  label?: ReactNode;\n  children: ReactNode;\n}\n\nexport function ComboboxGroup({ label, children }: ComboboxGroupProps) {\n  return (\n    <BaseCombobox.Group>\n      {label && (\n        <BaseCombobox.GroupLabel className=\"px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase\">\n          {label}\n        </BaseCombobox.GroupLabel>\n      )}\n      {children}\n    </BaseCombobox.Group>\n  );\n}\n\nexport interface MultiComboboxProps<Value> extends ComboboxProps<Value> {\n  /** How each selected value should read on its chip. */\n  renderChip?: (value: Value) => ReactNode;\n}\n\n/**\n * Multi-select, where the input becomes a chip container.\n *\n * Chips sit INSIDE the field rather than under it. Below the field they push\n * every following control down as selections accumulate, so a form visibly\n * reflows while someone is still choosing — and the chips stop looking like\n * part of the input they belong to.\n */\nexport function MultiCombobox<Value>({\n  placeholder,\n  emptyMessage,\n  renderChip,\n  className,\n  children,\n  ref,\n  \"aria-label\": ariaLabel,\n  onOpenChange,\n  ...props\n}: MultiComboboxProps<Value>) {\n  const strings = useUiStrings().combobox;\n  const { anchorRef, handleOpenChange, popupStyle } = useFrozenPopupWidth(onOpenChange);\n  const positionerRef = useRelabelBaseUiDismiss(strings.dismiss, anchorRef);\n\n  return (\n    <BaseCombobox.Root\n      multiple\n      {...(props as BaseCombobox.Root.Props<Value, true>)}\n      onOpenChange={handleOpenChange}\n    >\n      <BaseCombobox.Chips\n        ref={anchorRef}\n        className={cn(FIELD, \"min-h-control-md flex-wrap gap-1.5 py-1.5\", className)}\n      >\n        <BaseCombobox.Value>\n          {(values: Value[]) =>\n            values.map((value, i) => (\n              <BaseCombobox.Chip\n                key={i}\n                className={cn(\n                  \"flex items-center gap-1.5 rounded-md bg-control-subtle py-1 pr-1 pl-2\",\n                  \"text-xs font-medium text-control-text\",\n                  \"animate-scale-in\",\n                )}\n              >\n                {renderChip ? renderChip(value) : String(value)}\n                <BaseCombobox.ChipRemove\n                  className=\"rounded-sm text-control-text/70 transition-colors duration-(--dur-fast) hover:text-control-text\"\n                  aria-label={strings.remove}\n                >\n                  <Icon name=\"x\" size=\"xs\" />\n                </BaseCombobox.ChipRemove>\n              </BaseCombobox.Chip>\n            ))\n          }\n        </BaseCombobox.Value>\n        <BaseCombobox.Input\n          ref={ref}\n          aria-label={ariaLabel}\n          placeholder={placeholder ?? strings.placeholder}\n          className=\"min-w-24 flex-1 bg-transparent text-sm text-primary outline-none placeholder:text-field-placeholder\"\n        />\n      </BaseCombobox.Chips>\n\n      <BaseCombobox.Portal>\n        <BaseCombobox.Positioner ref={positionerRef} sideOffset={6} className=\"z-(--z-popover) outline-none\">\n          <BaseCombobox.Popup className={cn(POPUP)} style={popupStyle}>\n            <BaseCombobox.Empty className={EMPTY}>\n              {emptyMessage ?? strings.noMatch}\n            </BaseCombobox.Empty>\n            <BaseCombobox.List>{children}</BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </BaseCombobox.Root>\n  );\n}\n"],"names":["POPUP","ANCHORED_POPUP_SURFACE","ANCHORED_POPUP_MOTION","EMPTY","FIELD","useFrozenPopupWidth","onOpenChange","anchorRef","useRef","width","setWidth","useState","args","open","Combobox","placeholder","emptyMessage","className","children","ref","ariaLabel","loading","props","strings","useUiStrings","handleOpenChange","popupStyle","positionerRef","useRelabelBaseUiDismiss","jsxs","BaseCombobox","cn","jsx","Icon","Spinner","ComboboxItem","ComboboxGroup","label","MultiCombobox","renderChip","values","value","i"],"mappings":"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"}

package/dist/components/CommandPalette.js

@@ -0,0 +1,163 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { useState as w, useMemo as k, useEffect as N } from "react";
+import { Dialog as h } from "@base-ui/react/dialog";
+import { cn as v } from "../lib/cn.js";
+import { Icon as P } from "./Icon.js";
+import { overlayBackdropClassName as D, OVERLAY_POPUP_MOTION as E, OVERLAY_POPUP_SURFACE as S } from "./overlay-shell.js";
+import { useUiStrings as O } from "../lib/i18n/provider.js";
+import { useNumberFormat as U } from "../lib/i18n/number-format.js";
+function M(d, p) {
+  if (!d) return 0;
+  const c = d.toLowerCase(), m = p.toLowerCase();
+  let o = 0, s = 0, f = 0;
+  for (let n = 0; n < m.length && o < c.length; n++) {
+    if (m[n] !== c[o]) {
+      f = 0;
+      continue;
+    }
+    const b = n === 0 || /[\s\-_/.]/.test(m[n - 1]);
+    s += b ? 12 : 3, s += f * 4, f++, o++;
+  }
+  return o < c.length ? -1 : s - m.length * 0.05;
+}
+function I({
+  items: d,
+  open: p,
+  onOpenChange: c,
+  placeholder: m,
+  emptyMessage: o
+}) {
+  const s = O().commandPalette, f = U(), [n, b] = w(""), [u, x] = w(0), l = k(() => {
+    const e = d.map((t) => ({
+      item: t,
+      score: Math.max(
+        M(n, t.label),
+        t.keywords ? M(n, t.keywords) - 4 : -1
+      )
+    })).filter((t) => t.score >= 0);
+    return e.sort((t, r) => r.score - t.score), e.map((t) => t.item);
+  }, [d, n]);
+  N(() => {
+    p && (b(""), x(0));
+  }, [p]), N(() => x(0), [n]);
+  function C(e) {
+    e.key === "ArrowDown" ? (e.preventDefault(), x((t) => (t + 1) % Math.max(l.length, 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((t) => (t - 1 + l.length) % Math.max(l.length, 1))) : e.key === "Enter" && l[u] && (e.preventDefault(), l[u].onSelect(), c(!1));
+  }
+  const L = k(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const t of l) {
+      const r = t.group ?? "";
+      e.has(r) || e.set(r, []), e.get(r).push(t);
+    }
+    return [...e.entries()];
+  }, [l]);
+  let y = -1;
+  return /* @__PURE__ */ a(h.Root, { open: p, onOpenChange: c, children: /* @__PURE__ */ i(h.Portal, { children: [
+    /* @__PURE__ */ a(h.Backdrop, { className: D() }),
+    /* @__PURE__ */ i(
+      h.Popup,
+      {
+        className: v(
+          /* Sits at 15% from the top rather than centred. A palette centred
+             vertically puts the list you are reading below the middle of the
+             screen and moves your eye down as it filters; anchored high, the
+             results grow downward into space you are already looking at. */
+          "fixed left-1/2 top-[15dvh] z-(--z-modal) -translate-x-1/2",
+          "flex max-h-[70dvh] w-[min(36rem,calc(100vw-2rem))] flex-col overflow-hidden",
+          S,
+          ...E,
+          "data-starting-style:scale-95 data-starting-style:opacity-0 data-starting-style:-translate-y-2"
+        ),
+        children: [
+          /* @__PURE__ */ a(h.Title, { className: "sr-only", children: s.title }),
+          /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-3 border-b border-border-subtle px-4", children: [
+            /* @__PURE__ */ a(P, { name: "search", size: "md", className: "shrink-0 text-tertiary" }),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                autoFocus: !0,
+                value: n,
+                onChange: (e) => b(e.target.value),
+                onKeyDown: C,
+                placeholder: m ?? s.placeholder,
+                "aria-label": s.searchLabel,
+                "aria-activedescendant": l[u] ? `cmd-${l[u].id}` : void 0,
+                className: "h-14 w-full min-w-0 bg-transparent text-md text-primary outline-none placeholder:text-field-placeholder"
+              }
+            ),
+            /* @__PURE__ */ a("kbd", { className: "shrink-0 rounded-sm border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-2xs text-tertiary", children: s.escapeKey })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "min-h-0 flex-1 overflow-y-auto p-2", role: "listbox", children: [
+            !l.length && /* @__PURE__ */ a("p", { className: "px-3 py-10 text-center text-sm text-tertiary", children: o ?? s.noMatch }),
+            L.map(([e, t]) => /* @__PURE__ */ i("div", { children: [
+              e && /* @__PURE__ */ a("p", { className: "px-2 pt-3 pb-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase", children: e }),
+              t.map((r) => {
+                y++;
+                const g = y === u, A = y;
+                return /* @__PURE__ */ i(
+                  "button",
+                  {
+                    id: `cmd-${r.id}`,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": g,
+                    onMouseMove: () => x(A),
+                    onClick: () => {
+                      r.onSelect(), c(!1);
+                    },
+                    className: v(
+                      "dx-tap flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left",
+                      "transition-colors duration-(--dur-instant)",
+                      g ? "bg-surface-hover text-primary" : "text-secondary"
+                    ),
+                    children: [
+                      r.icon && /* @__PURE__ */ a(
+                        P,
+                        {
+                          name: r.icon,
+                          size: "sm",
+                          className: g ? "text-accent-text" : "text-tertiary"
+                        }
+                      ),
+                      /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+                        /* @__PURE__ */ a("span", { className: "truncate text-sm font-medium", children: r.label }),
+                        r.description && /* @__PURE__ */ a("span", { className: "truncate text-2xs text-tertiary", children: r.description })
+                      ] }),
+                      r.shortcut && /* @__PURE__ */ a("kbd", { className: "shrink-0 rounded-sm border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-2xs text-tertiary", children: r.shortcut })
+                    ]
+                  },
+                  r.id
+                );
+              })
+            ] }, e))
+          ] }),
+          /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-4 border-t border-border-subtle px-4 py-2.5 text-2xs text-tertiary", children: [
+            /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ a("kbd", { className: "rounded-sm border border-border bg-surface-inset px-1 py-0.5 font-mono", children: "↑↓" }),
+              s.navigate
+            ] }),
+            /* @__PURE__ */ i("span", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ a("kbd", { className: "rounded-sm border border-border bg-surface-inset px-1 py-0.5 font-mono", children: "↵" }),
+              s.run
+            ] }),
+            /* @__PURE__ */ a("span", { className: "ml-auto font-mono", children: s.resultCount(f(l.length), f(d.length)) })
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+function T(d = "k") {
+  const [p, c] = w(!1);
+  return N(() => {
+    function m(o) {
+      o.key.toLowerCase() === d && (o.metaKey || o.ctrlKey) && (o.preventDefault(), c((s) => !s));
+    }
+    return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
+  }, [d]), { open: p, setOpen: c };
+}
+export {
+  I as CommandPalette,
+  T as useCommandPalette
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/components/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../src/components/CommandPalette.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { overlayBackdropClassName, OVERLAY_POPUP_MOTION, OVERLAY_POPUP_SURFACE } from \"./overlay-shell\";\n\n/* ============================================================================\n   COMMAND PALETTE\n\n   Ships in 2 of 12 major design systems, which is strange given that it is the\n   fastest path to anything in an application dense enough to need one.\n\n   THE MATCHING IS SUBSEQUENCE, NOT SUBSTRING. \"ndp\" finds \"New dispatch\"\n   because every letter appears in order — that is what people expect from a\n   palette, and plain `includes()` fails it. The scoring then puts word-start\n   matches first, so typing \"dis\" ranks \"Dispatch settings\" above \"Edit this\",\n   even though both contain the letters.\n\n   THE FOOTER IS LOAD-BEARING. A palette without visible key hints is a palette\n   people open once and then forget exists, because nothing told them arrows\n   and Enter would work. Three glyphs at the bottom is the entire onboarding.\n\n   Focus, escape, scroll-lock and the backdrop come from Dialog — this is a\n   dialog with a search field, and treating it as one gets all of that right\n   for free.\n   ========================================================================= */\n\nexport type CommandItem = {\n  id: string;\n  label: string;\n  /** Extra words to match against that are not shown — synonyms, old names. */\n  keywords?: string;\n  description?: string;\n  icon?: IconName;\n  /** Displayed on the right — \"⌘K\", \"G then D\". */\n  shortcut?: string;\n  group?: string;\n  onSelect: () => void;\n};\n\n/**\n * Subsequence match with a score. Higher is better; -1 means no match.\n *\n * Word-start hits are worth far more than mid-word ones, and consecutive hits\n * more than scattered ones. That ordering is what makes a short query feel like\n * it read your mind rather than filtered a list.\n */\nfunction score(query: string, text: string): number {\n  if (!query) return 0;\n  const q = query.toLowerCase();\n  const t = text.toLowerCase();\n\n  let qi = 0;\n  let total = 0;\n  let streak = 0;\n\n  for (let ti = 0; ti < t.length && qi < q.length; ti++) {\n    if (t[ti] !== q[qi]) {\n      streak = 0;\n      continue;\n    }\n    const atWordStart = ti === 0 || /[\\s\\-_/.]/.test(t[ti - 1]);\n    total += atWordStart ? 12 : 3;\n    total += streak * 4;\n    streak++;\n    qi++;\n  }\n\n  if (qi < q.length) return -1;\n  /* Shorter labels win ties: with \"set\" matched, \"Settings\" is a better answer\n     than \"Reset dispatch settings and clear the cache\". */\n  return total - t.length * 0.05;\n}\n\nexport interface CommandPaletteProps {\n  items: CommandItem[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Omitted, the provider's `commandPalette.placeholder`. */\n  placeholder?: string;\n  /** Omitted, the provider's `commandPalette.noMatch`. */\n  emptyMessage?: ReactNode;\n}\n\nexport function CommandPalette({\n  items,\n  open,\n  onOpenChange,\n  placeholder,\n  emptyMessage,\n}: CommandPaletteProps) {\n  const strings = useUiStrings().commandPalette;\n  const fmt = useNumberFormat();\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const results = useMemo(() => {\n    const scored = items\n      .map((item) => ({\n        item,\n        score: Math.max(\n          score(query, item.label),\n          item.keywords ? score(query, item.keywords) - 4 : -1,\n        ),\n      }))\n      .filter((r) => r.score >= 0);\n    scored.sort((a, b) => b.score - a.score);\n    return scored.map((r) => r.item);\n  }, [items, query]);\n\n  /* Reset on every open. A palette that remembers the last query makes the\n     second use start from someone else's context — usually the wrong one. */\n  useEffect(() => {\n    if (open) {\n      setQuery(\"\");\n      setActive(0);\n    }\n  }, [open]);\n\n  useEffect(() => setActive(0), [query]);\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      /* Wraps at both ends. In a short list wrapping is faster than reversing\n         direction, and in a long one it costs nothing. */\n      setActive((i) => (i + 1) % Math.max(results.length, 1));\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n      setActive((i) => (i - 1 + results.length) % Math.max(results.length, 1));\n    } else if (event.key === \"Enter\" && results[active]) {\n      event.preventDefault();\n      results[active].onSelect();\n      onOpenChange(false);\n    }\n  }\n\n  const grouped = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of results) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)!.push(item);\n    }\n    return [...map.entries()];\n  }, [results]);\n\n  let index = -1;\n\n  return (\n    <BaseDialog.Root open={open} onOpenChange={onOpenChange}>\n      <BaseDialog.Portal>\n        <BaseDialog.Backdrop className={overlayBackdropClassName()} />\n        <BaseDialog.Popup\n          className={cn(\n            /* Sits at 15% from the top rather than centred. A palette centred\n               vertically puts the list you are reading below the middle of the\n               screen and moves your eye down as it filters; anchored high, the\n               results grow downward into space you are already looking at. */\n            \"fixed left-1/2 top-[15dvh] z-(--z-modal) -translate-x-1/2\",\n            \"flex max-h-[70dvh] w-[min(36rem,calc(100vw-2rem))] flex-col overflow-hidden\",\n            OVERLAY_POPUP_SURFACE,\n            ...OVERLAY_POPUP_MOTION,\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-starting-style:-translate-y-2\",\n          )}\n        >\n          <BaseDialog.Title className=\"sr-only\">{strings.title}</BaseDialog.Title>\n\n          <div className=\"flex shrink-0 items-center gap-3 border-b border-border-subtle px-4\">\n            <Icon name=\"search\" size=\"md\" className=\"shrink-0 text-tertiary\" />\n            <input\n              autoFocus\n              value={query}\n              onChange={(e) => setQuery(e.target.value)}\n              onKeyDown={onKeyDown}\n              placeholder={placeholder ?? strings.placeholder}\n              aria-label={strings.searchLabel}\n              aria-activedescendant={results[active] ? `cmd-${results[active].id}` : undefined}\n              className=\"h-14 w-full min-w-0 bg-transparent text-md text-primary outline-none placeholder:text-field-placeholder\"\n            />\n            <kbd className=\"shrink-0 rounded-sm border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-2xs text-tertiary\">\n              {strings.escapeKey}\n            </kbd>\n          </div>\n\n          <div className=\"min-h-0 flex-1 overflow-y-auto p-2\" role=\"listbox\">\n            {!results.length && (\n              <p className=\"px-3 py-10 text-center text-sm text-tertiary\">{emptyMessage ?? strings.noMatch}</p>\n            )}\n            {grouped.map(([group, groupItems]) => (\n              <div key={group}>\n                {group && (\n                  <p className=\"px-2 pt-3 pb-1.5 text-2xs font-semibold tracking-widest text-tertiary uppercase\">\n                    {group}\n                  </p>\n                )}\n                {groupItems.map((item) => {\n                  index++;\n                  const isActive = index === active;\n                  const at = index;\n                  return (\n                    <button\n                      key={item.id}\n                      id={`cmd-${item.id}`}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      /* Hover moves the highlight, so pointer and keyboard\n                         never disagree about which row Enter would run. */\n                      onMouseMove={() => setActive(at)}\n                      onClick={() => {\n                        item.onSelect();\n                        onOpenChange(false);\n                      }}\n                      className={cn(\n                        \"dx-tap flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left\",\n                        \"transition-colors duration-(--dur-instant)\",\n                        isActive ? \"bg-surface-hover text-primary\" : \"text-secondary\",\n                      )}\n                    >\n                      {item.icon && (\n                        <Icon\n                          name={item.icon}\n                          size=\"sm\"\n                          className={isActive ? \"text-accent-text\" : \"text-tertiary\"}\n                        />\n                      )}\n                      <span className=\"flex min-w-0 flex-1 flex-col\">\n                        <span className=\"truncate text-sm font-medium\">{item.label}</span>\n                        {item.description && (\n                          <span className=\"truncate text-2xs text-tertiary\">{item.description}</span>\n                        )}\n                      </span>\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 rounded-sm border border-border bg-surface-inset px-1.5 py-0.5 font-mono text-2xs text-tertiary\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n\n          {/* Three glyphs, and the whole control becomes discoverable. */}\n          <div className=\"flex shrink-0 items-center gap-4 border-t border-border-subtle px-4 py-2.5 text-2xs text-tertiary\">\n            <span className=\"flex items-center gap-1.5\">\n              <kbd className=\"rounded-sm border border-border bg-surface-inset px-1 py-0.5 font-mono\">↑↓</kbd>\n              {strings.navigate}\n            </span>\n            <span className=\"flex items-center gap-1.5\">\n              <kbd className=\"rounded-sm border border-border bg-surface-inset px-1 py-0.5 font-mono\">↵</kbd>\n              {strings.run}\n            </span>\n            <span className=\"ml-auto font-mono\">\n              {strings.resultCount(fmt(results.length), fmt(items.length))}\n            </span>\n          </div>\n        </BaseDialog.Popup>\n      </BaseDialog.Portal>\n    </BaseDialog.Root>\n  );\n}\n\n/**\n * Opens the palette on a keyboard shortcut.\n *\n * Bound to ⌘K / Ctrl-K, and deliberately NOT active while a text field has\n * focus unless the modifier is held — a bare-key shortcut that fires mid-\n * sentence is the fastest way to make people distrust an app.\n */\nexport function useCommandPalette(key = \"k\") {\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    function handler(event: KeyboardEvent) {\n      if (event.key.toLowerCase() === key && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n        setOpen((v) => !v);\n      }\n    }\n    window.addEventListener(\"keydown\", handler);\n    return () => window.removeEventListener(\"keydown\", handler);\n  }, [key]);\n\n  return { open, setOpen };\n}\n"],"names":["score","query","text","q","t","qi","total","streak","ti","atWordStart","CommandPalette","items","open","onOpenChange","placeholder","emptyMessage","strings","useUiStrings","fmt","useNumberFormat","setQuery","useState","active","setActive","results","useMemo","scored","item","r","a","b","useEffect","onKeyDown","event","i","grouped","map","key","index","jsx","BaseDialog","jsxs","overlayBackdropClassName","cn","OVERLAY_POPUP_SURFACE","OVERLAY_POPUP_MOTION","Icon","group","groupItems","isActive","at","useCommandPalette","setOpen","handler","v"],"mappings":"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"}

package/dist/components/ConcentricRing.js

@@ -0,0 +1,60 @@
+import { jsxs as n, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { tv as f } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { RING_TONE as h } from "./Progress.js";
+const p = f({
+  base: "relative inline-grid shrink-0 place-items-center",
+  variants: {
+    size: {
+      /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */
+      sm: "size-7",
+      md: "size-10",
+      lg: "size-16"
+    }
+  },
+  defaultVariants: { size: "sm" }
+}), x = { sm: "text-2xs", md: "text-xs", lg: "text-sm" }, c = 2, g = 10.5, k = 7.5;
+function l({ radius: t, level: r }) {
+  const s = Math.max(0, Math.min(1, r.value / 100));
+  return /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: t, fill: "none", strokeWidth: c, className: "stroke-surface-inset" }),
+    /* @__PURE__ */ e(
+      "circle",
+      {
+        cx: "12",
+        cy: "12",
+        r: t,
+        fill: "none",
+        strokeWidth: c,
+        strokeLinecap: "round",
+        pathLength: "1",
+        strokeDasharray: "1",
+        strokeDashoffset: 1 - s,
+        strokeOpacity: s === 0 ? 0 : 1,
+        className: i("transition-[var(--tx-colors),stroke-dashoffset] duration-(--dur-slow) ease-emphasis", h[r.tone]),
+        stroke: "currentColor"
+      }
+    )
+  ] });
+}
+function T({ label: t, outer: r, inner: s, size: o, children: a, className: m, ref: d }) {
+  return /* @__PURE__ */ n("span", { ref: d, role: "img", "aria-label": t, className: i(p({ size: o }), m), children: [
+    /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: "size-full -rotate-90", children: [
+      /* @__PURE__ */ e(l, { radius: g, level: r }),
+      /* @__PURE__ */ e(l, { radius: k, level: s })
+    ] }),
+    a != null && /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        "data-ring-centre": "true",
+        className: i("absolute grid place-items-center font-mono leading-none font-semibold text-primary tabular-nums", x[o ?? "sm"]),
+        children: a
+      }
+    )
+  ] });
+}
+export {
+  T as ConcentricRing
+};
+//# sourceMappingURL=ConcentricRing.js.map

package/dist/components/ConcentricRing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConcentricRing.js","sources":["../../src/components/ConcentricRing.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { RING_TONE, type ProgressTone } from \"./Progress\";\n\n/* ============================================================================\n   CONCENTRIC RING — TWO independent fractions of the SAME whole, one inside\n   the other, with a centre for the number they are fractions OF.\n\n   The case it exists for: \"6 goals, 5 signed off by a person, 1 verified by an\n   agent\". The two fractions share a denominator but are different facts, so a\n   segmented `ProgressRing` (arcs that sum to the whole) is the wrong shape —\n   a record both signed AND verified would have to be drawn twice around one\n   circle. Two rings, each filled by its own count, say it without arithmetic.\n\n   OUTER IS THE ONE TO READ FIRST: it is the larger, longer arc. Give it the\n   fact the reader came for and the inner ring the corroborating one.\n\n   COLOR IS NEVER THE ONLY CARRIER. `label` is REQUIRED and is the whole\n   sentence (\"Goals: 5 of 6 signed off by a person, 1 of 6 verified by an\n   agent\") — the two tones tell the rings apart at a glance, the sentence tells\n   everyone else which is which. The glyph is `role=\"img\"` named by it; the\n   centre is decoration and hidden from assistive tech, exactly as\n   `ProgressRing`'s `children` is.\n\n   THE GEOMETRY IS ONE 24-UNIT VIEWBOX, like `ProgressRing`: both rings scale\n   with the box, so the gap between them is the same proportion at every size.\n   Strokes are 2 units (a hair thinner than a lone ring's 2.5) so the centre\n   keeps room for a two-digit number at the `sm` size.\n   ========================================================================= */\n\nconst ring = tv({\n  base: \"relative inline-grid shrink-0 place-items-center\",\n  variants: {\n    size: {\n      /** 28px — sits in a tab or a row beside a 14px label; a two-digit count fits the centre. */\n      sm: \"size-7\",\n      md: \"size-10\",\n      lg: \"size-16\",\n    },\n  },\n  defaultVariants: { size: \"sm\" },\n});\n\n/** The centre number steps with the ring: the disc inside the inner ring is ~54% of the box. */\nconst CENTRE_TEXT = { sm: \"text-2xs\", md: \"text-xs\", lg: \"text-sm\" } as const;\n\n/** Stroke width and the two radii, in viewBox units. Outer edge 11.5 of 12; a 1-unit gap between the rings; the centre disc is 13 units across at the `sm` 28px size = ~15px. */\nconst STROKE = 2;\nconst OUTER_RADIUS = 10.5;\nconst INNER_RADIUS = 7.5;\n\n/** One ring: how full it is (0-100, clamped) and the tone it is drawn in. */\nexport interface ConcentricRingLevel {\n  value: number;\n  tone: ProgressTone;\n}\n\nexport interface ConcentricRingProps extends VariantProps<typeof ring> {\n  /**\n   * REQUIRED, and the whole sentence — both fractions in words, with their\n   * numbers. See the banner: this is what keeps color from being the only\n   * carrier of \"which ring is which\".\n   */\n  label: string;\n  /** The larger, first-read ring. */\n  outer: ConcentricRingLevel;\n  /** The smaller ring inside it. */\n  inner: ConcentricRingLevel;\n  /** Centred in the disc inside the inner ring, e.g. the total. Hidden from assistive tech. */\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nfunction Arc({ radius, level }: { radius: number; level: ConcentricRingLevel }) {\n  const fraction = Math.max(0, Math.min(1, level.value / 100));\n  return (\n    <>\n      <circle cx=\"12\" cy=\"12\" r={radius} fill=\"none\" strokeWidth={STROKE} className=\"stroke-surface-inset\" />\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r={radius}\n        fill=\"none\"\n        strokeWidth={STROKE}\n        strokeLinecap=\"round\"\n        /* `pathLength=\"1\"` makes the dash numbers fractions, so the same two values work at any radius. */\n        pathLength=\"1\"\n        strokeDasharray=\"1\"\n        strokeDashoffset={1 - fraction}\n        /* A zero fraction must draw nothing: a round cap on a zero-length dash renders a dot. */\n        strokeOpacity={fraction === 0 ? 0 : 1}\n        className={cn(\"transition-[var(--tx-colors),stroke-dashoffset] duration-(--dur-slow) ease-emphasis\", RING_TONE[level.tone])}\n        stroke=\"currentColor\"\n      />\n    </>\n  );\n}\n\n/**\n * Two nested rings, each filled by its own 0-100 value, around a centre number.\n *\n * ```tsx\n * <ConcentricRing\n *   label=\"Goals: 5 of 6 signed off by a person, 1 of 6 verified by an agent\"\n *   outer={{ value: (5 / 6) * 100, tone: \"success\" }}\n *   inner={{ value: (1 / 6) * 100, tone: \"brand\" }}\n * >\n *   6\n * </ConcentricRing>\n * ```\n */\nexport function ConcentricRing({ label, outer, inner, size, children, className, ref }: ConcentricRingProps) {\n  return (\n    <span ref={ref} role=\"img\" aria-label={label} className={cn(ring({ size }), className)}>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" className=\"size-full -rotate-90\">\n        <Arc radius={OUTER_RADIUS} level={outer} />\n        <Arc radius={INNER_RADIUS} level={inner} />\n      </svg>\n      {children !== undefined && children !== null && (\n        <span\n          aria-hidden=\"true\"\n          data-ring-centre=\"true\"\n          className={cn(\"absolute grid place-items-center font-mono leading-none font-semibold text-primary tabular-nums\", CENTRE_TEXT[size ?? \"sm\"])}\n        >\n          {children}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"names":["ring","tv","CENTRE_TEXT","STROKE","OUTER_RADIUS","INNER_RADIUS","Arc","radius","level","fraction","jsxs","Fragment","jsx","cn","RING_TONE","ConcentricRing","label","outer","inner","size","children","className","ref"],"mappings":";;;;AA+BA,MAAMA,IAAOC,EAAG;AAAA,EACd,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,MAAM,KAAA;AAC3B,CAAC,GAGKC,IAAc,EAAE,IAAI,YAAY,IAAI,WAAW,IAAI,UAAA,GAGnDC,IAAS,GACTC,IAAe,MACfC,IAAe;AAyBrB,SAASC,EAAI,EAAE,QAAAC,GAAQ,OAAAC,KAAyD;AAC9E,QAAMC,IAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,EAAM,QAAQ,GAAG,CAAC;AAC3D,SACE,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAGL,GAAQ,MAAK,QAAO,aAAaJ,GAAQ,WAAU,wBAAuB;AAAA,IACrG,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAG;AAAA,QACH,GAAGL;AAAA,QACH,MAAK;AAAA,QACL,aAAaJ;AAAA,QACb,eAAc;AAAA,QAEd,YAAW;AAAA,QACX,iBAAgB;AAAA,QAChB,kBAAkB,IAAIM;AAAA,QAEtB,eAAeA,MAAa,IAAI,IAAI;AAAA,QACpC,WAAWI,EAAG,uFAAuFC,EAAUN,EAAM,IAAI,CAAC;AAAA,QAC1H,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACT,GACF;AAEJ;AAeO,SAASO,EAAe,EAAE,OAAAC,GAAO,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW,KAAAC,KAA4B;AAC3G,SACE,gBAAAZ,EAAC,QAAA,EAAK,KAAAY,GAAU,MAAK,OAAM,cAAYN,GAAO,WAAWH,EAAGb,EAAK,EAAE,MAAAmB,EAAA,CAAM,GAAGE,CAAS,GACnF,UAAA;AAAA,IAAA,gBAAAX,EAAC,SAAI,SAAQ,aAAY,eAAY,QAAO,WAAU,wBACpD,UAAA;AAAA,MAAA,gBAAAE,EAACN,GAAA,EAAI,QAAQF,GAAc,OAAOa,GAAO;AAAA,MACzC,gBAAAL,EAACN,GAAA,EAAI,QAAQD,GAAc,OAAOa,EAAA,CAAO;AAAA,IAAA,GAC3C;AAAA,IAC2BE,KAAa,QACtC,gBAAAR;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,oBAAiB;AAAA,QACjB,WAAWC,EAAG,mGAAmGX,EAAYiB,KAAQ,IAAI,CAAC;AAAA,QAEzI,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}