@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Select.js

@@ -0,0 +1,172 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { useRef as w, Children as S, isValidElement as O, Fragment as _ } from "react";
+import { Select as o } from "@base-ui/react/select";
+import { tv as I } from "tailwind-variants";
+import { cn as d } from "../lib/cn.js";
+import { devWarn as j } from "../lib/dev-warn.js";
+import { Icon as v } from "./Icon.js";
+import { ANCHORED_POPUP_MOTION as A, ANCHORED_POPUP_SURFACE as P } from "./overlay-shell.js";
+import { useUiStrings as z } from "../lib/i18n/provider.js";
+const E = I({
+  base: [
+    "group/trigger flex w-full min-w-0 cursor-pointer items-center justify-between gap-2",
+    "border border-field-border bg-field font-sans text-primary text-left",
+    "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+    "hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover",
+    "focus-visible:border-control focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+    "data-popup-open:border-control data-popup-open:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+    "data-invalid:border-danger",
+    "disabled:cursor-not-allowed disabled:opacity-45"
+  ],
+  variants: {
+    size: {
+      sm: "h-control-sm rounded-md px-3 text-xs",
+      md: "h-control-md rounded-md px-3.5 text-sm",
+      lg: "h-control-lg rounded-lg px-4 text-md"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function u(e, t = []) {
+  return S.forEach(e, (a) => {
+    if (O(a)) {
+      if (a.type === U) {
+        const n = a.props;
+        t.push({ value: n.value, label: n.children });
+        return;
+      }
+      if (a.type === V) {
+        u(a.props.children, t);
+        return;
+      }
+      a.type === _ && u(a.props.children, t);
+    }
+  }), t;
+}
+function R(e) {
+  const t = w(e), a = t.current;
+  return a.length === e.length && a.every(
+    (s, i) => Object.is(s.value, e[i]?.value) && Object.is(s.label, e[i]?.label)
+  ) || (t.current = e), t.current;
+}
+function C(e, t) {
+  return t ? Array.isArray(t) ? t.some((a) => Object.is(a.value, e)) : Object.prototype.hasOwnProperty.call(t, String(e)) : !1;
+}
+function T(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function M({
+  size: e,
+  placeholder: t,
+  className: a,
+  children: n,
+  ref: s,
+  items: i,
+  "aria-label": y,
+  ...h
+}) {
+  const N = z().select, f = R(u(n)), p = i ?? (f.length > 0 ? f : void 0), g = /* @__PURE__ */ r("span", { className: "text-field-placeholder", children: t ?? N.placeholder });
+  return /* @__PURE__ */ c(
+    o.Root,
+    {
+      ...h,
+      ...p ? { items: p } : {},
+      children: [
+        /* @__PURE__ */ c(o.Trigger, { ref: s, "aria-label": y, className: d(E({ size: e }), a), children: [
+          /* @__PURE__ */ r(
+            o.Value,
+            {
+              className: "truncate",
+              placeholder: g,
+              render: (l, b) => {
+                if (b.placeholder) return /* @__PURE__ */ r("span", { ...l });
+                if (h.itemToStringLabel) return /* @__PURE__ */ r("span", { ...l });
+                const x = T(b.value).filter((m) => !C(m, p));
+                return x.length === 0 ? /* @__PURE__ */ r("span", { ...l }) : (j(
+                  "Select",
+                  `no item matches ${x.map((m) => JSON.stringify(m)).join(", ")} — the trigger is showing the placeholder rather than painting the raw value into the interface. Either the value is stale, or the items are built in a component this one cannot read, in which case pass \`items\` explicitly.`
+                ), /* @__PURE__ */ r("span", { ...l, children: g }));
+              }
+            }
+          ),
+          /* @__PURE__ */ r(o.Icon, { className: "shrink-0 text-tertiary", children: /* @__PURE__ */ r(
+            v,
+            {
+              name: "chevron-down",
+              size: "sm",
+              className: "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-popup-open/trigger:rotate-180"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r(o.Portal, { children: /* @__PURE__ */ r(o.Positioner, { sideOffset: 6, className: "z-(--z-popover) outline-none", children: /* @__PURE__ */ r(
+          o.Popup,
+          {
+            className: d(
+              "max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto",
+              P,
+              "p-1",
+              A
+            ),
+            children: /* @__PURE__ */ r(o.List, { children: n })
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function U({ className: e, children: t, ref: a, ...n }) {
+  return /* @__PURE__ */ c(
+    o.Item,
+    {
+      ref: a,
+      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` covers keyboard AND pointer, so the highlight
+           never splits into two competing visual states when someone moves the
+           mouse mid-keyboard-navigation. */
+        "data-highlighted:bg-surface-hover data-highlighted:text-primary",
+        /* The chosen option carries a FILL, not just a tick and a tint. A
+           colour-only mark is the whole "I selected something and nothing
+           happened" complaint. */
+        "data-selected:bg-control-subtle data-selected:text-control-text data-selected:font-medium",
+        /* Selected AND pointed at is its own fill. Both conditions stacked, so
+           it out-specifies the plain highlight above — otherwise moving onto
+           the chosen row repaints it with the UNSELECTED hover colour and the
+           row reads as deselected for as long as the pointer is on it. */
+        "data-selected:data-highlighted:bg-control-subtle-hover",
+        "data-disabled:pointer-events-none data-disabled:opacity-45",
+        e
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ r(o.ItemIndicator, { className: "absolute left-2 grid place-items-center", children: /* @__PURE__ */ r(
+          v,
+          {
+            name: "check",
+            size: "sm",
+            className: "animate-scale-in text-control-text"
+          }
+        ) }),
+        /* @__PURE__ */ r(o.ItemText, { className: "truncate", children: t })
+      ]
+    }
+  );
+}
+function V({ label: e, children: t }) {
+  return /* @__PURE__ */ c(o.Group, { children: [
+    e && /* @__PURE__ */ r(o.GroupLabel, { className: "px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase", children: e }),
+    t
+  ] });
+}
+function W({ className: e }) {
+  return /* @__PURE__ */ r(o.Separator, { className: d("my-1 h-px bg-border-subtle", e) });
+}
+export {
+  M as Select,
+  V as SelectGroup,
+  U as SelectItem,
+  W as SelectSeparator
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../src/components/Select.tsx"],"sourcesContent":["import { Children, Fragment, isValidElement, useRef, type ReactNode, type Ref } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { devWarn } from \"../lib/dev-warn\";\nimport { Icon } from \"./Icon\";\nimport { ANCHORED_POPUP_MOTION, ANCHORED_POPUP_SURFACE } from \"./overlay-shell\";\n\n/* ----------------------------------------------------------------------------\n   A SELECT'S MOTION HAS TO DO ONE JOB: SHOW WHERE THE LIST CAME FROM.\n\n   The popup scales in from the trigger's edge (`--transform-origin`, supplied\n   by Base UI's positioner and flipped automatically when the menu opens\n   upward). Scaling from the centre — the default if you do nothing — makes the\n   list appear to arrive from nowhere, and on a flipped menu it actively points\n   at the wrong place.\n\n   Exit is faster than entry and does NOT scale back down: a list you have\n   dismissed should get out of the way, and re-animating its geometry on the\n   way out makes every dismissal feel like an undo.\n   -------------------------------------------------------------------------- */\n\nconst trigger = tv({\n  base: [\n    \"group/trigger flex w-full min-w-0 cursor-pointer items-center justify-between gap-2\",\n    \"border border-field-border bg-field font-sans text-primary text-left\",\n    \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n    \"hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover\",\n    \"focus-visible:border-control focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n    \"data-popup-open:border-control data-popup-open:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n    \"data-invalid:border-danger\",\n    \"disabled:cursor-not-allowed disabled:opacity-45\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-control-sm rounded-md px-3 text-xs\",\n      md: \"h-control-md rounded-md px-3.5 text-sm\",\n      lg: \"h-control-lg rounded-lg px-4 text-md\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/* ----------------------------------------------------------------------------\n   THE CLOSED TRIGGER SHOWS THE LABEL, AND THAT TAKES READING THE CHILDREN.\n\n   Base UI resolves the trigger's text from `Select.Root`'s `items` map (or\n   `itemToStringLabel`), and falls back to `String(value)` when it has neither.\n   The items live in the POPUP, which is portalled and unmounted while the\n   select is closed — so nothing a `SelectItem` registers at render time can\n   still be there when the trigger needs it. There is no runtime registry that\n   survives the close; the only place the pairing exists at all times is the\n   `children` element tree the consumer handed us.\n\n   So the pairing is READ OFF THE ELEMENTS rather than collected at mount.\n   `<SelectItem value={id}>{label}</SelectItem>` — the way every consumer of\n   this component already writes it — becomes `{value: id, label}`, and that is\n   handed to Base UI as `items` so its own resolution has something to resolve\n   against.\n\n   AND THE FALLBACK IS GONE. Base UI renders `String(value)` for a value it\n   cannot resolve, and 2.9.0 kept that, calling it \"the honest rendering of the\n   value is not in the list\". It is not honest, it is the reported bug with a\n   smaller blast radius: a key leaking into the interface where a human-readable\n   label belongs is the exact complaint, and preserving it as a fallback path\n   preserved the defect for precisely the case nobody tested.\n\n   AN UNMATCHED VALUE IS A PROGRAMMING ERROR. There is no state of the world in\n   which showing a user `AT-CW-GH` is the right answer — the value is stale, or\n   the list has not loaded, or the items were built somewhere this tree cannot\n   see, and every one of those is a bug in the consumer's data, not a rendering\n   choice. So it renders the PLACEHOLDER, which is the honest thing: nothing\n   valid is selected. And it says so, once, in development, naming the value and\n   the component — because a placeholder alone is quiet, and quiet is how the\n   first version of this shipped.\n\n   `render` RATHER THAN A `children` FUNCTION, and the distinction is the whole\n   history of this component. A `children` function takes label resolution off\n   Base UI entirely — which is what made `items`, `itemToStringLabel` and\n   `{value,label}` items all do nothing, and is the defect described below.\n   `render` receives Base UI's OWN resolved output plus its state, so the\n   matched case is passed through untouched and only the unmatched one is\n   replaced. What counts as unmatched is decided against the SAME item map Base\n   UI was handed, not inferred from the string it produced.\n\n   A CONSUMER'S `itemToStringLabel` IS LEFT ALONE. That prop is the consumer\n   saying \"I will turn any value into a label\", including values not in the\n   list, so there is no such thing as unmatched under it and nothing here\n   second-guesses it.\n\n   THE DEFECT THIS REPLACES was a `children` FUNCTION on `Select.Value` that\n   returned `String(value)`. A children function short-circuits Base UI's whole\n   resolution path — so passing `items`, or `itemToStringLabel`, or an item\n   whose value was `{value, label}`, ALL did nothing, and the trigger showed a\n   raw id (`AT-CW-GH` where \"Group home — child welfare\" belonged) no matter\n   what the consumer did about it. The placeholder is now `Select.Value`'s own\n   `placeholder` prop, which is emitted on exactly the condition the function\n   used to test by hand — null, undefined, or the empty string.\n\n   WHAT IT CANNOT SEE, stated so nobody infers otherwise: items rendered from a\n   consumer's OWN wrapper component are not in this tree — the wrapper has not\n   run yet. Those now read as unmatched, which shows the placeholder and warns\n   with the remedy in it. Pass `items` explicitly for that case; an explicit\n   `items` is never overridden here.\n   -------------------------------------------------------------------------- */\n\ninterface DerivedItem {\n  value: unknown;\n  label: ReactNode;\n}\n\n/**\n * Every `<SelectItem>` in a children tree, in order, with its label.\n *\n * Descends through `SelectGroup` and fragments because both are OURS and both\n * are structural — a grouped list is the same list with headings in it, and a\n * consumer who wrote `<>…</>` around two items has not changed what the list\n * holds. Nothing else is descended into; see the banner.\n */\nfunction collectItems(node: ReactNode, out: DerivedItem[] = []): DerivedItem[] {\n  Children.forEach(node, (child) => {\n    if (!isValidElement(child)) return;\n    if (child.type === SelectItem) {\n      const props = child.props as SelectItemProps;\n      out.push({ value: props.value, label: props.children });\n      return;\n    }\n    if (child.type === SelectGroup) {\n      collectItems((child.props as SelectGroupProps).children, out);\n      return;\n    }\n    if (child.type === Fragment) {\n      collectItems((child.props as { children?: ReactNode }).children, out);\n    }\n  });\n  return out;\n}\n\n/**\n * Hold the array's IDENTITY still while its contents are unchanged.\n *\n * `items` is synced into Base UI's store on identity, and this array is rebuilt\n * on every render of the consumer's own component — which is every render, for\n * anyone writing the items inline. A fresh identity each time makes the store\n * notify, and every `Select.Value` on the page re-render, for a list that did\n * not change. Comparing pairwise is cheaper than the render it avoids.\n */\nfunction useStableItems(next: DerivedItem[]): DerivedItem[] {\n  const held = useRef(next);\n  const previous = held.current;\n  const same =\n    previous.length === next.length &&\n    previous.every(\n      (item, i) => Object.is(item.value, next[i]?.value) && Object.is(item.label, next[i]?.label),\n    );\n  if (!same) held.current = next;\n  return held.current;\n}\n\n/**\n * Is `value` one the list can name?\n *\n * Reads the SAME map Base UI was handed, in both shapes it accepts: an array of\n * `{value,label}` pairs, and a `Record<string, ReactNode>` whose keys are the\n * stringified values. Deciding this from the map rather than from the rendered\n * output is what keeps it exact — comparing Base UI's output to `String(value)`\n * would call a legitimate label that happens to equal its own key a miss.\n *\n * `Object.is` and not `===`, so a `NaN` value matches itself and `-0` does not\n * quietly match `0`.\n */\nfunction isKnown(value: unknown, items: BaseSelect.Root.Props<never, boolean>[\"items\"]): boolean {\n  if (!items) return false;\n  if (Array.isArray(items)) {\n    return items.some((item) => Object.is((item as { value: unknown }).value, value));\n  }\n  return Object.prototype.hasOwnProperty.call(items, String(value));\n}\n\n/**\n * Every value the trigger is being asked to name — one, or all of them when the\n * select is `multiple`.\n *\n * A multi-select with one stale entry is the same defect as a single one with a\n * stale value, so ANY unmatched member makes the whole trigger unmatched. The\n * alternative is a trigger reading \"Group home, AT-CW-GH\", which is the bug\n * wearing a comma.\n */\nfunction selectedValues(value: unknown): unknown[] {\n  return Array.isArray(value) ? value : [value];\n}\n\nexport interface SelectProps<Value>\n  extends Omit<BaseSelect.Root.Props<Value, boolean>, \"children\">,\n    VariantProps<typeof trigger> {\n  placeholder?: string;\n  className?: string;\n  /** Accessible name for the trigger when no visible label is present. */\n  \"aria-label\"?: string;\n  children: ReactNode;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function Select<Value>({\n  size,\n  placeholder,\n  className,\n  children,\n  ref,\n  items,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SelectProps<Value>) {\n  const strings = useUiStrings().select;\n  const derived = useStableItems(collectItems(children));\n  /* An explicit `items` always wins: a consumer who states the map is telling\n     us about entries this tree cannot see. */\n  const resolved = items ?? (derived.length > 0 ? derived : undefined);\n  const placeholderNode = <span className=\"text-field-placeholder\">{placeholder ?? strings.placeholder}</span>;\n\n  return (\n    <BaseSelect.Root\n      {...(props as BaseSelect.Root.Props<Value, boolean>)}\n      {...(resolved ? { items: resolved as BaseSelect.Root.Props<Value, boolean>[\"items\"] } : {})}\n    >\n      {/* aria-label goes on the TRIGGER, not the root. The root renders no\n          element a screen reader reaches, so labelling it names nothing — a\n          defect this component actually shipped once. */}\n      <BaseSelect.Trigger ref={ref} aria-label={ariaLabel} className={cn(trigger({ size }), className)}>\n        {/* NO `children` FUNCTION HERE — see the banner above `collectItems`.\n            One would take the label resolution back off Base UI, which is the\n            whole defect. The placeholder is a prop precisely so it can be\n            declared without doing that, and `render` below sees Base UI's own\n            resolved output rather than replacing it. */}\n        <BaseSelect.Value\n          className=\"truncate\"\n          placeholder={placeholderNode}\n          render={(valueProps, state) => {\n            /* Base UI is already showing the placeholder: nothing is selected,\n               which is a state and not a mistake. */\n            if (state.placeholder) return <span {...valueProps} />;\n            /* The consumer owns resolution; there is no unmatched under it. */\n            if (props.itemToStringLabel) return <span {...valueProps} />;\n\n            const missing = selectedValues(state.value).filter((v) => !isKnown(v, resolved));\n            if (missing.length === 0) return <span {...valueProps} />;\n\n            devWarn(\n              \"Select\",\n              `no item matches ${missing.map((v) => JSON.stringify(v)).join(\", \")} — ` +\n                \"the trigger is showing the placeholder rather than painting the raw value \" +\n                \"into the interface. Either the value is stale, or the items are built in a \" +\n                \"component this one cannot read, in which case pass `items` explicitly.\",\n            );\n            return <span {...valueProps}>{placeholderNode}</span>;\n          }}\n        />\n        <BaseSelect.Icon className=\"shrink-0 text-tertiary\">\n          <Icon\n            name=\"chevron-down\"\n            size=\"sm\"\n            /* Rotating rather than swapping to a chevron-up keeps ONE object on\n               screen through the state change. A swap is two icons and reads as\n               a flicker at this size. */\n            className=\"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy group-data-popup-open/trigger:rotate-180\"\n          />\n        </BaseSelect.Icon>\n      </BaseSelect.Trigger>\n\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner sideOffset={6} className=\"z-(--z-popover) outline-none\">\n          <BaseSelect.Popup\n            className={cn(\n              \"max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto\",\n              ANCHORED_POPUP_SURFACE,\n              \"p-1\",\n              ANCHORED_POPUP_MOTION,\n            )}\n          >\n            <BaseSelect.List>{children}</BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\n\nexport interface SelectItemProps extends Omit<BaseSelect.Item.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function SelectItem({ className, children, ref, ...props }: SelectItemProps) {\n  return (\n    <BaseSelect.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` covers keyboard AND pointer, so the highlight\n           never splits into two competing visual states when someone moves the\n           mouse mid-keyboard-navigation. */\n        \"data-highlighted:bg-surface-hover data-highlighted:text-primary\",\n        /* The chosen option carries a FILL, not just a tick and a tint. A\n           colour-only mark is the whole \"I selected something and nothing\n           happened\" complaint. */\n        \"data-selected:bg-control-subtle data-selected:text-control-text data-selected:font-medium\",\n        /* Selected AND pointed at is its own fill. Both conditions stacked, so\n           it out-specifies the plain highlight above — otherwise moving onto\n           the chosen row repaints it with the UNSELECTED hover colour and the\n           row reads as deselected for as long as the pointer is on it. */\n        \"data-selected:data-highlighted:bg-control-subtle-hover\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-45\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseSelect.ItemIndicator className=\"absolute left-2 grid place-items-center\">\n        {/* The tick scales in rather than appearing, so moving the selection\n            down a list reads as the mark travelling with you. */}\n        <Icon\n          name=\"check\"\n          size=\"sm\"\n          className=\"animate-scale-in text-control-text\"\n        />\n      </BaseSelect.ItemIndicator>\n      <BaseSelect.ItemText className=\"truncate\">{children}</BaseSelect.ItemText>\n    </BaseSelect.Item>\n  );\n}\n\nexport interface SelectGroupProps {\n  /**\n   * The group's heading.\n   *\n   * A prop rather than a `<SelectGroupLabel>` child, because the label is only\n   * valid INSIDE a group — as a separate exported component it can be placed\n   * anywhere and throws at render. Making it a prop makes the misuse\n   * unrepresentable, which is how a blank page happened here once.\n   */\n  label?: ReactNode;\n  children: ReactNode;\n}\n\nexport function SelectGroup({ label, children }: SelectGroupProps) {\n  return (\n    <BaseSelect.Group>\n      {label && (\n        <BaseSelect.GroupLabel className=\"px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase\">\n          {label}\n        </BaseSelect.GroupLabel>\n      )}\n      {children}\n    </BaseSelect.Group>\n  );\n}\n\nexport function SelectSeparator({ className }: { className?: string }) {\n  return <BaseSelect.Separator className={cn(\"my-1 h-px bg-border-subtle\", className)} />;\n}\n"],"names":["trigger","tv","collectItems","node","out","Children","child","isValidElement","SelectItem","props","SelectGroup","Fragment","useStableItems","next","held","useRef","previous","item","isKnown","value","items","selectedValues","Select","size","placeholder","className","children","ref","ariaLabel","strings","useUiStrings","derived","resolved","placeholderNode","jsx","jsxs","BaseSelect","cn","valueProps","state","missing","v","devWarn","Icon","ANCHORED_POPUP_SURFACE","ANCHORED_POPUP_MOTION","label","SelectSeparator"],"mappings":"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"}

package/dist/components/SequenceDiagram.js

@@ -0,0 +1,109 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { useMemo as y, useRef as D } from "react";
+import { cn as l } from "../lib/cn.js";
+function M(u) {
+  const r = [];
+  for (const t of u)
+    r.includes(t.actor) || r.push(t.actor), t.target && !r.includes(t.target) && r.push(t.target);
+  return r;
+}
+function $({ label: u, steps: r, selectedIndex: t, onSelectIndex: d, className: v }) {
+  const i = y(() => M(r), [r]), p = y(() => new Map(i.map((e, a) => [e, a])), [i]), h = D([]), f = r[t], g = `repeat(${Math.max(i.length, 1)}, minmax(7rem, 1fr))`;
+  function c(e) {
+    d(e), h.current[e]?.focus();
+  }
+  function w(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), c(Math.min(r.length - 1, t + 1));
+        return;
+      case "ArrowUp":
+        e.preventDefault(), c(Math.max(0, t - 1));
+        return;
+      case "Home":
+        e.preventDefault(), c(0);
+        return;
+      case "End":
+        e.preventDefault(), c(r.length - 1);
+        return;
+      default:
+        return;
+    }
+  }
+  return /* @__PURE__ */ x("div", { className: l("flex w-full min-w-min flex-col", v), children: [
+    /* @__PURE__ */ n("div", { className: "grid border-b border-border", style: { gridTemplateColumns: g }, children: i.map((e) => {
+      const a = !!f && (f.actor === e || f.target === e);
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          className: l(
+            "border-l border-border px-3 py-2 text-center text-sm font-semibold first:border-l-0",
+            a && "bg-surface-raised text-accent"
+          ),
+          children: e
+        },
+        e
+      );
+    }) }),
+    /* @__PURE__ */ n("div", { role: "listbox", "aria-label": u, className: "flex flex-col", onKeyDown: w, children: r.map((e, a) => {
+      const o = p.get(e.actor) ?? 0, s = e.target ? p.get(e.target) ?? o : o, m = a === t, b = o === s;
+      return /* @__PURE__ */ n(
+        "button",
+        {
+          ref: (N) => {
+            h.current[a] = N;
+          },
+          type: "button",
+          role: "option",
+          "aria-selected": m,
+          tabIndex: m ? 0 : -1,
+          className: l(
+            "grid min-h-11 w-full cursor-pointer border-b border-border bg-transparent px-0 py-1.5 font-inherit text-inherit last:border-b-0",
+            "focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent",
+            m && "bg-surface-raised"
+          ),
+          style: { gridTemplateColumns: g },
+          "data-self": b ? "true" : void 0,
+          onClick: () => d(a),
+          onFocus: () => d(a),
+          children: /* @__PURE__ */ x(
+            "span",
+            {
+              className: "relative flex items-center justify-center px-3",
+              style: { gridColumn: `${Math.min(o, s) + 1} / ${Math.max(o, s) + 2}` },
+              children: [
+                /* @__PURE__ */ n(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: l(
+                      "absolute inset-x-2 top-1/2 border-t-2 border-secondary",
+                      b && "border-dashed"
+                    )
+                  }
+                ),
+                !b && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-arrowhead": s > o ? "right" : "left",
+                    className: l(
+                      "absolute top-1/2 size-0 -translate-y-1/2 border-y-[5px] border-y-transparent",
+                      s > o ? "right-1.5 border-l-[7px] border-l-secondary" : "left-1.5 border-r-[7px] border-r-secondary"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ n("span", { className: "relative max-w-full bg-surface px-1.5 text-center text-sm leading-snug text-balance", children: e.action })
+              ]
+            }
+          )
+        },
+        a
+      );
+    }) })
+  ] });
+}
+export {
+  $ as SequenceDiagram
+};
+//# sourceMappingURL=SequenceDiagram.js.map

package/dist/components/SequenceDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SequenceDiagram.js","sources":["../../src/components/SequenceDiagram.tsx"],"sourcesContent":["import { useMemo, useRef, type KeyboardEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/* ----------------------------------------------------------------------------\n   SEQUENCEDIAGRAM — actor lanes with ordered, directional messages between\n   them (DX-3373, moved here from danxbot-docs per R-4: a missing primitive\n   goes INTO the library rather than staying a per-app one-off, the same path\n   `NodeCanvas` took generalising out of the docs app in DX-3344).\n\n   A sequence diagram is not a node-edge graph — `NodeCanvas`'s dagre layout\n   has no notion of ordered lanes with directional messages between them, so\n   this stays its own small, dependency-free component rather than being\n   forced through NodeCanvas (a state machine, by contrast, genuinely IS a\n   node-edge graph — that shape uses NodeCanvas directly, no diagram of its\n   own needed).\n\n   ACCESSIBLE: KEYBOARD STEP-THROUGH PLUS A TEXT EQUIVALENT. The step list is\n   a standard single-select listbox (`role=\"listbox\"`/`role=\"option\"`, roving\n   tabindex, Up/Down/Home/End) — each option's own text label (\"Actor does\n   action to Target\") already IS the text equivalent of the arrow it draws,\n   so a screen-reader user reading the listbox loses nothing a sighted user\n   sees in the arrow.\n   -------------------------------------------------------------------------- */\n\nexport interface SequenceStep {\n  actor: string;\n  action: string;\n  target?: string;\n  notes?: string;\n}\n\nexport interface SequenceDiagramProps {\n  /** Accessible name for the whole step list — see `NodeCanvas`'s own `label` for why this is required, not optional. */\n  label: string;\n  steps: readonly SequenceStep[];\n  selectedIndex: number;\n  onSelectIndex: (index: number) => void;\n  className?: string;\n}\n\n/** First-appearance order of every actor AND target — the diagram's lanes. */\nfunction collectActors(steps: readonly SequenceStep[]): string[] {\n  const seen: string[] = [];\n  for (const step of steps) {\n    if (!seen.includes(step.actor)) seen.push(step.actor);\n    if (step.target && !seen.includes(step.target)) seen.push(step.target);\n  }\n  return seen;\n}\n\nexport function SequenceDiagram({ label, steps, selectedIndex, onSelectIndex, className }: SequenceDiagramProps) {\n  const actors = useMemo(() => collectActors(steps), [steps]);\n  const laneIndex = useMemo(() => new Map(actors.map((actor, index) => [actor, index])), [actors]);\n  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const activeStep = steps[selectedIndex] as SequenceStep | undefined;\n  /* DX-3451: lanes share the container's width and message labels WRAP.\n     A `max-content` diagram with unwrapped labels grew as wide as its\n     longest sentence, so a five-lane story in a page column was mostly\n     scrolled out of sight — lanes and labels both cut off at the edge. Now\n     the diagram fills its container and only scrolls when even the 7rem lane\n     minimum does not fit. */\n  const columns = `repeat(${Math.max(actors.length, 1)}, minmax(7rem, 1fr))`;\n\n  function selectAndFocus(index: number) {\n    onSelectIndex(index);\n    optionRefs.current[index]?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        selectAndFocus(Math.min(steps.length - 1, selectedIndex + 1));\n        return;\n      case \"ArrowUp\":\n        event.preventDefault();\n        selectAndFocus(Math.max(0, selectedIndex - 1));\n        return;\n      case \"Home\":\n        event.preventDefault();\n        selectAndFocus(0);\n        return;\n      case \"End\":\n        event.preventDefault();\n        selectAndFocus(steps.length - 1);\n        return;\n      default:\n        return;\n    }\n  }\n\n  return (\n    <div className={cn(\"flex w-full min-w-min flex-col\", className)}>\n      <div className=\"grid border-b border-border\" style={{ gridTemplateColumns: columns }}>\n        {actors.map((actor) => {\n          const highlighted = !!activeStep && (activeStep.actor === actor || activeStep.target === actor);\n          return (\n            <div\n              key={actor}\n              className={cn(\n                \"border-l border-border px-3 py-2 text-center text-sm font-semibold first:border-l-0\",\n                highlighted && \"bg-surface-raised text-accent\",\n              )}\n            >\n              {actor}\n            </div>\n          );\n        })}\n      </div>\n\n      <div role=\"listbox\" aria-label={label} className=\"flex flex-col\" onKeyDown={handleKeyDown}>\n        {steps.map((step, index) => {\n          const fromIndex = laneIndex.get(step.actor) ?? 0;\n          const toIndex = step.target ? (laneIndex.get(step.target) ?? fromIndex) : fromIndex;\n          const selected = index === selectedIndex;\n          const isSelf = fromIndex === toIndex;\n          return (\n            <button\n              key={index}\n              ref={(el) => {\n                optionRefs.current[index] = el;\n              }}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={selected}\n              tabIndex={selected ? 0 : -1}\n              className={cn(\n                \"grid min-h-11 w-full cursor-pointer border-b border-border bg-transparent px-0 py-1.5 font-inherit text-inherit last:border-b-0\",\n                \"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent\",\n                selected && \"bg-surface-raised\",\n              )}\n              style={{ gridTemplateColumns: columns }}\n              data-self={isSelf ? \"true\" : undefined}\n              onClick={() => onSelectIndex(index)}\n              onFocus={() => onSelectIndex(index)}\n            >\n              <span\n                className=\"relative flex items-center justify-center px-3\"\n                style={{ gridColumn: `${Math.min(fromIndex, toIndex) + 1} / ${Math.max(fromIndex, toIndex) + 2}` }}\n              >\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"absolute inset-x-2 top-1/2 border-t-2 border-secondary\",\n                    isSelf && \"border-dashed\",\n                  )}\n                />\n                {/* DX-3451: an arrowhead at the RECEIVING lane, so \"who did\n                    what to whom\" reads from the diagram alone. */}\n                {!isSelf && (\n                  <span\n                    aria-hidden=\"true\"\n                    data-arrowhead={toIndex > fromIndex ? \"right\" : \"left\"}\n                    className={cn(\n                      \"absolute top-1/2 size-0 -translate-y-1/2 border-y-[5px] border-y-transparent\",\n                      toIndex > fromIndex ? \"right-1.5 border-l-[7px] border-l-secondary\" : \"left-1.5 border-r-[7px] border-r-secondary\",\n                    )}\n                  />\n                )}\n                <span className=\"relative max-w-full bg-surface px-1.5 text-center text-sm leading-snug text-balance\">{step.action}</span>\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["collectActors","steps","seen","step","SequenceDiagram","label","selectedIndex","onSelectIndex","className","actors","useMemo","laneIndex","actor","index","optionRefs","useRef","activeStep","columns","selectAndFocus","handleKeyDown","event","cn","jsx","highlighted","fromIndex","toIndex","selected","isSelf","el","jsxs"],"mappings":"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"}

package/dist/components/SettingRow.js

@@ -0,0 +1,124 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { tv as w } from "tailwind-variants";
+import { cn as O } from "../lib/cn.js";
+import { Icon as p } from "./Icon.js";
+import { Collapsible as v } from "./Surface.js";
+import { Card as k, CardHeader as C, CardFooter as R } from "./Card.js";
+import { useUiStrings as j } from "../lib/i18n/provider.js";
+const h = w({
+  slots: {
+    root: "flex min-w-0 flex-col gap-3",
+    text: "flex min-w-0 flex-1 flex-col gap-1.5",
+    label: "font-sans text-sm font-medium text-primary",
+    description: "text-sm text-secondary text-pretty",
+    effect: "flex items-start gap-1.5 text-2xs text-tertiary",
+    controlWrap: "flex w-full min-w-0 flex-wrap items-center gap-3",
+    readOnlyBlock: "flex flex-col gap-1",
+    readOnlyValue: "font-mono text-sm text-secondary break-words",
+    readOnlyReason: "flex items-start gap-1.5 text-2xs text-tertiary",
+    /* DX-5125: every rendered DOM child gets the group's rhythm as padding (`py-4`,
+       a hairline above all but the first, the padding cancelled at the two
+       ends), EXCEPT a boxed `Callout`. It owns its padding (`p-3`), which
+       `[&>*]:py-4` used to overwrite: it read as having no top padding as the
+       first child. A Callout is spaced with vertical margins instead, so its own
+       box is left alone. Selected by DOM and `data-slot`, never by React child,
+       so a component rendering a fragment of rows is still rows here. */
+    rows: [
+      "flex flex-col",
+      "divide-y divide-border-subtle",
+      "[&>:not([data-slot=callout])]:py-4 [&>:not([data-slot=callout]):first-child]:pt-0 [&>:not([data-slot=callout]):last-child]:pb-0",
+      "[&>[data-slot=callout]]:my-4 [&>[data-slot=callout]:first-child]:mt-0 [&>[data-slot=callout]:last-child]:mb-0"
+    ]
+  },
+  variants: {
+    layout: {
+      inline: {
+        root: "sm:flex-row sm:items-start sm:justify-between",
+        /* `sm:justify-end` is what puts the control at the row's trailing edge
+           once there is room beside the text column, rather than merely below
+           it. `sm:w-auto` lets it stop claiming the full row once it no longer
+           has to. */
+        controlWrap: "sm:w-auto sm:shrink-0 sm:justify-end sm:pl-4",
+        readOnlyBlock: "items-end text-right"
+      },
+      /* DX-4968: label and description on top, the control under them across the whole row at every width. */
+      stacked: { readOnlyBlock: "items-start text-left" }
+    }
+  },
+  defaultVariants: { layout: "inline" }
+});
+function F(e) {
+  const {
+    label: o,
+    description: s,
+    details: n,
+    detailsLabel: r,
+    detailsDefaultOpen: d,
+    effect: i,
+    status: c,
+    layout: m = "inline",
+    className: g
+  } = e, l = h({ layout: m }), b = j().settingRow, f = y(), x = y(), u = s != null, N = e.readOnly ? null : typeof e.control == "function" ? e.control({
+    "aria-labelledby": f,
+    "aria-describedby": u ? x : void 0
+  }) : e.control;
+  return /* @__PURE__ */ a("div", { className: O(l.root(), g), "data-slot": "setting-row", "data-layout": m, children: [
+    /* @__PURE__ */ a("div", { className: l.text(), children: [
+      /* @__PURE__ */ t("span", { id: f, className: l.label(), children: o }),
+      u && /* @__PURE__ */ t("p", { id: x, className: l.description(), children: s }),
+      i && /* @__PURE__ */ a("p", { className: l.effect(), children: [
+        /* @__PURE__ */ t(p, { name: "info", size: "xs", className: "mt-px shrink-0", "aria-hidden": !0 }),
+        /* @__PURE__ */ t("span", { children: i })
+      ] }),
+      n && /* @__PURE__ */ t(
+        v,
+        {
+          trigger: r ?? b.detailsLabel,
+          defaultOpen: d,
+          triggerClassName: "text-2xs",
+          children: /* @__PURE__ */ t("div", { className: "text-sm text-secondary text-pretty", children: n })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: l.controlWrap(), children: [
+      c,
+      e.readOnly ? (
+        /* No `role`/`aria-*` layered on here on purpose — `aria-readonly`
+           has no defined mapping on a generic container and is not a
+           reliable channel. Real text is: the reason and the value are
+           plain content, so every screen reader announces them the same
+           way it announces anything else on the page, with no assistive
+           -tech-specific behaviour to get wrong or fail to verify. */
+        /* @__PURE__ */ a("div", { className: l.readOnlyBlock(), children: [
+          e.readOnly.value != null && /* @__PURE__ */ t("span", { className: l.readOnlyValue(), children: e.readOnly.value }),
+          /* @__PURE__ */ a("span", { className: l.readOnlyReason(), children: [
+            /* @__PURE__ */ t(p, { name: "lock", size: "xs", className: "mt-px shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t("span", { children: e.readOnly.reason })
+          ] })
+        ] })
+      ) : N
+    ] })
+  ] });
+}
+function G({
+  id: e,
+  title: o,
+  description: s,
+  titleAs: n,
+  footer: r,
+  className: d,
+  children: i
+}) {
+  const c = h();
+  return /* @__PURE__ */ a(k, { id: e, className: d, children: [
+    /* @__PURE__ */ t(C, { title: o, description: s, titleAs: n }),
+    /* @__PURE__ */ t("div", { className: c.rows(), children: i }),
+    r && /* @__PURE__ */ t(R, { children: r })
+  ] });
+}
+export {
+  G as SettingGroup,
+  F as SettingRow
+};
+//# sourceMappingURL=SettingRow.js.map

package/dist/components/SettingRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingRow.js","sources":["../../src/components/SettingRow.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { cn } from \"../lib/cn\";\r\nimport { useUiStrings } from \"../lib/i18n\";\r\nimport { Icon } from \"./Icon\";\r\nimport { Collapsible } from \"./Surface\";\r\nimport { Card, CardHeader, CardFooter, type CardHeaderProps } from \"./Card\";\r\n\r\n/* ============================================================================\r\n   SETTING ROW / SETTING GROUP — the workhorse layout of a settings page.\r\n\r\n   THE DESCRIPTION IS NOT DECORATION. A control with no explanation of what it\r\n   does is a control most people leave alone, because touching an unknown\r\n   switch is how you break something. So `description` is a first-class, always\r\n   -visible slot here — not an afterthought bolted on with a tooltip — and it\r\n   is programmatically wired to the control, not merely placed near it. See\r\n   `SettingRowControlRenderProps` below for exactly how, and why that is a\r\n   render prop rather than automatic.\r\n\r\n   PROGRESSIVE DISCLOSURE, NOT A TOOLTIP. A short description is always on\r\n   screen; a longer \"why this matters\" is reachable but collapsed, built on\r\n   this library's own `Collapsible` rather than re-implemented — tooltips are\r\n   for short supplementary text and are unreliable on touch, and the long\r\n   explanation this is for is neither.\r\n\r\n   CONSEQUENCE, NOT MECHANISM. `effect` exists because \"a setting that\r\n   silently does not apply yet\" is a real, recurring failure mode in a\r\n   settings UI — a toggle that reads as ON while the process it configures is\r\n   still running the OLD value. This is deliberately a separate, always-visible\r\n   slot from `description` (what the setting IS) and `details` (why it\r\n   matters) — the three answer three different questions, and folding the\r\n   consequence into either of the other two is how it gets lost.\r\n\r\n   READ-ONLY IS A STATE, NOT A DISABLED CONTROL. Some settings are backed by\r\n   something the API genuinely cannot write — an environment variable, a value\r\n   baked at deploy time. Rendering those as a `disabled` control that LOOKS\r\n   editable promises an edit that will never take, which is worse than not\r\n   offering one at all. `readOnly` replaces the control slot entirely with a\r\n   plain-text presentation carrying the CURRENT value and the reason, both as\r\n   real text — never a tooltip, so the reason survives to touch and to anyone\r\n   not hovering, and is trivially in the accessibility tree because it simply\r\n   IS text, not an ARIA state layered onto a `<div>` with no defined mapping.\r\n   ========================================================================= */\r\n\r\nconst settingRow = tv({\r\n  slots: {\r\n    root: \"flex min-w-0 flex-col gap-3\",\r\n    text: \"flex min-w-0 flex-1 flex-col gap-1.5\",\r\n    label: \"font-sans text-sm font-medium text-primary\",\r\n    description: \"text-sm text-secondary text-pretty\",\r\n    effect: \"flex items-start gap-1.5 text-2xs text-tertiary\",\r\n    controlWrap: \"flex w-full min-w-0 flex-wrap items-center gap-3\",\r\n    readOnlyBlock: \"flex flex-col gap-1\",\r\n    readOnlyValue: \"font-mono text-sm text-secondary break-words\",\r\n    readOnlyReason: \"flex items-start gap-1.5 text-2xs text-tertiary\",\r\n    /* DX-5125: every rendered DOM child gets the group's rhythm as padding (`py-4`,\r\n       a hairline above all but the first, the padding cancelled at the two\r\n       ends), EXCEPT a boxed `Callout`. It owns its padding (`p-3`), which\r\n       `[&>*]:py-4` used to overwrite: it read as having no top padding as the\r\n       first child. A Callout is spaced with vertical margins instead, so its own\r\n       box is left alone. Selected by DOM and `data-slot`, never by React child,\r\n       so a component rendering a fragment of rows is still rows here. */\r\n    rows: [\r\n      \"flex flex-col\",\r\n      \"divide-y divide-border-subtle\",\r\n      \"[&>:not([data-slot=callout])]:py-4 [&>:not([data-slot=callout]):first-child]:pt-0 [&>:not([data-slot=callout]):last-child]:pb-0\",\r\n      \"[&>[data-slot=callout]]:my-4 [&>[data-slot=callout]:first-child]:mt-0 [&>[data-slot=callout]:last-child]:mb-0\",\r\n    ],\r\n  },\r\n  variants: {\r\n    layout: {\r\n      inline: {\r\n        root: \"sm:flex-row sm:items-start sm:justify-between\",\r\n        /* `sm:justify-end` is what puts the control at the row's trailing edge\r\n           once there is room beside the text column, rather than merely below\r\n           it. `sm:w-auto` lets it stop claiming the full row once it no longer\r\n           has to. */\r\n        controlWrap: \"sm:w-auto sm:shrink-0 sm:justify-end sm:pl-4\",\r\n        readOnlyBlock: \"items-end text-right\",\r\n      },\r\n      /* DX-4968: label and description on top, the control under them across the whole row at every width. */\r\n      stacked: { readOnlyBlock: \"items-start text-left\" },\r\n    },\r\n  },\r\n  defaultVariants: { layout: \"inline\" },\r\n});\r\n\r\n/**\r\n * What `SettingRow` hands to a `control` supplied as a render function —\r\n * two ARIA id references to place on the control's own focusable element(s).\r\n *\r\n * WHY A RENDER PROP, NOT AN AUTOMATIC ASSOCIATION LIKE `Field`.\r\n *\r\n * `Field` (this library's other labelled wrapper) gets the label/description\r\n * link for free, but only because every control it has ever wrapped is one of\r\n * THIS library's own Base UI–backed primitives — `Checkbox`, `Switch`,\r\n * `Input`, `Select`… — and those read Base UI's internal field context\r\n * themselves to pick up `aria-describedby`. That mechanism is a private\r\n * implementation detail of Base UI (there is no public hook a third-party\r\n * control could subscribe to), so it silently does NOTHING for anything that\r\n * is not one of those primitives.\r\n *\r\n * `SettingRow.control` is typed to accept literally anything a settings page\r\n * might need in that slot — a bare `<input>`, a third-party widget, a\r\n * composite the CONSUMER wrote that has never heard of this library, let\r\n * alone Base UI's field internals. Wrapping arbitrary children in the same\r\n * context-based `Field` would look correct and associate nothing, which is\r\n * the worse failure: it fails silently, exactly the thing this component\r\n * exists to prevent for settings prose.\r\n *\r\n * So the association is made an explicit VALUE instead of an implicit\r\n * context read: `SettingRow` generates the ids, and a `control` passed as a\r\n * function receives them and is responsible for spreading them onto the\r\n * element that actually receives focus (the switch's button, the input\r\n * itself, a slider's thumb — for a multi-thumb control, every thumb).\r\n *\r\n * `control` may also be passed as a plain `ReactNode` — the escape hatch for\r\n * a control that already carries its own accessible name and description\r\n * through some other channel (for example a `SwitchField`/`Field`-wrapped\r\n * control, or a composite region where per-control labelling does not apply)\r\n * — in which case NEITHER id is wired anywhere, and getting the control\r\n * properly named and described is entirely the caller's responsibility.\r\n */\r\nexport interface SettingRowControlRenderProps {\r\n  /** Always present — `label` is required, so the row always has a name to give. */\r\n  \"aria-labelledby\": string;\r\n  /** `undefined` when this row has no `description` — nothing to describe with. */\r\n  \"aria-describedby\": string | undefined;\r\n}\r\n\r\nexport interface SettingRowBaseProps {\r\n  /** The setting's name. Always rendered as visible text and always given an id. */\r\n  label: ReactNode;\r\n  /**\r\n   * What the setting actually DOES, in one line. Always visible — see the\r\n   * module doc comment for why this is not a tooltip. Rendered with a\r\n   * generated id and, when `control` is a render function, offered to it via\r\n   * `SettingRowControlRenderProps[\"aria-describedby\"]`.\r\n   */\r\n  description?: ReactNode;\r\n  /**\r\n   * The long-form \"why this matters\" — collapsed by default, revealed by a\r\n   * disclosure built on this library's `Collapsible`. Omit entirely when\r\n   * `description` alone says everything worth saying; not every setting earns\r\n   * a second paragraph.\r\n   */\r\n  details?: ReactNode;\r\n  /** Accessible name + visible label of the `details` disclosure trigger. */\r\n  detailsLabel?: ReactNode;\r\n  /** Renders the `details` disclosure already open — for a setting a caller deep-links to. */\r\n  detailsDefaultOpen?: boolean;\r\n  /**\r\n   * The CONSEQUENCE of changing this setting, stated plainly — \"takes effect\r\n   * on next dispatch\", \"requires a worker restart\" — never the mechanism. See\r\n   * the module doc comment: this is what stops a setting from silently not\r\n   * applying yet.\r\n   */\r\n  effect?: ReactNode;\r\n  /**\r\n   * Where the control sits. DX-4968.\r\n   *\r\n   * `inline` (the default): beside the text from `sm` (640px) up, under it below. Right for a switch, a select or a short input,\r\n   * which keeps its own width at the row's trailing edge.\r\n   *\r\n   * `stacked`: ALWAYS under the text, the full width of the row. Use it for a control whose value is long and must be seen or\r\n   * copied whole, such as a `CopyValue` holding a URL. Beside the text, a control that cannot shrink takes the row's whole width and\r\n   * leaves the label and description a word-per-line sliver (or runs past the card edge); stacked gives the value box the width\r\n   * to truncate or wrap inside, with the copy button still in view.\r\n   */\r\n  layout?: \"inline\" | \"stacked\";\r\n  /**\r\n   * Right-aligned indicator — a `Badge` showing the setting's current derived\r\n   * state, most often. Rendered beside the control, not inside it, so it\r\n   * survives a `readOnly` row where there is no control at all.\r\n   */\r\n  status?: ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport interface SettingRowEditableProps extends SettingRowBaseProps {\r\n  readOnly?: undefined;\r\n  /**\r\n   * The setting's control. Either a plain node, or a function receiving the\r\n   * ids to associate — see `SettingRowControlRenderProps`.\r\n   */\r\n  control: ReactNode | ((renderProps: SettingRowControlRenderProps) => ReactNode);\r\n}\r\n\r\nexport interface SettingRowReadOnlyProps extends SettingRowBaseProps {\r\n  /**\r\n   * Presents this row as READ-ONLY instead of rendering `control` at all —\r\n   * see the module doc comment for why this is a first-class state rather\r\n   * than a disabled control. `reason` is required; `value`, when given, is\r\n   * the setting's current value, shown as plain text beside it.\r\n   */\r\n  readOnly: { reason: ReactNode; value?: ReactNode };\r\n  control?: undefined;\r\n}\r\n\r\nexport type SettingRowProps = SettingRowEditableProps | SettingRowReadOnlyProps;\r\n\r\nexport function SettingRow(props: SettingRowProps) {\r\n  const {\r\n    label,\r\n    description,\r\n    details,\r\n    detailsLabel,\r\n    detailsDefaultOpen,\r\n    effect,\r\n    status,\r\n    layout = \"inline\",\r\n    className,\r\n  } = props;\r\n  const s = settingRow({ layout });\r\n  const strings = useUiStrings().settingRow;\r\n\r\n  /* Two ids, generated unconditionally so their identity never depends on\r\n     which branch below actually uses them — a stable `useId()` call cannot be\r\n     skipped by a runtime condition without breaking React's hook rules, and\r\n     there is no cost to generating an id that happens to go unused. */\r\n  const labelId = useId();\r\n  const descriptionId = useId();\r\n  const hasDescription = description != null;\r\n\r\n  const controlNode = props.readOnly\r\n    ? null\r\n    : typeof props.control === \"function\"\r\n      ? props.control({\r\n          \"aria-labelledby\": labelId,\r\n          \"aria-describedby\": hasDescription ? descriptionId : undefined,\r\n        })\r\n      : props.control;\r\n\r\n  return (\r\n    <div className={cn(s.root(), className)} data-slot=\"setting-row\" data-layout={layout}>\r\n      <div className={s.text()}>\r\n        <span id={labelId} className={s.label()}>\r\n          {label}\r\n        </span>\r\n\r\n        {hasDescription && (\r\n          <p id={descriptionId} className={s.description()}>\r\n            {description}\r\n          </p>\r\n        )}\r\n\r\n        {effect && (\r\n          <p className={s.effect()}>\r\n            <Icon name=\"info\" size=\"xs\" className=\"mt-px shrink-0\" aria-hidden />\r\n            <span>{effect}</span>\r\n          </p>\r\n        )}\r\n\r\n        {details && (\r\n          <Collapsible\r\n            trigger={detailsLabel ?? strings.detailsLabel}\r\n            defaultOpen={detailsDefaultOpen}\r\n            triggerClassName=\"text-2xs\"\r\n          >\r\n            <div className=\"text-sm text-secondary text-pretty\">{details}</div>\r\n          </Collapsible>\r\n        )}\r\n      </div>\r\n\r\n      <div className={s.controlWrap()}>\r\n        {status}\r\n        {props.readOnly ? (\r\n          /* No `role`/`aria-*` layered on here on purpose — `aria-readonly`\r\n             has no defined mapping on a generic container and is not a\r\n             reliable channel. Real text is: the reason and the value are\r\n             plain content, so every screen reader announces them the same\r\n             way it announces anything else on the page, with no assistive\r\n             -tech-specific behaviour to get wrong or fail to verify. */\r\n          <div className={s.readOnlyBlock()}>\r\n            {props.readOnly.value != null && (\r\n              <span className={s.readOnlyValue()}>{props.readOnly.value}</span>\r\n            )}\r\n            <span className={s.readOnlyReason()}>\r\n              <Icon name=\"lock\" size=\"xs\" className=\"mt-px shrink-0\" aria-hidden />\r\n              <span>{props.readOnly.reason}</span>\r\n            </span>\r\n          </div>\r\n        ) : (\r\n          controlNode\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface SettingGroupProps {\r\n  /** DOM id on the group's root element, so a URL anchor (`#designs`) can target it. */\r\n  id?: string;\r\n  /** The group's name — e.g. \"Notifications\", \"Dispatch limits\". */\r\n  title: ReactNode;\r\n  /** One line of context for the whole group. */\r\n  description?: ReactNode;\r\n  /** @default \"h3\" — see `CardHeader`'s own doc comment on why this is the caller's call. */\r\n  titleAs?: CardHeaderProps[\"titleAs\"];\r\n  /** Where a Save button or a \"last changed\" line lives. Rendered as a `CardFooter`. */\r\n  footer?: ReactNode;\r\n  className?: string;\r\n  /** `SettingRow` elements, in display order. */\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * A titled card holding several `SettingRow`s.\r\n *\r\n * `SettingGroup` simply IS a `Card` — a fixed shape (`CardHeader` for the\r\n * title/description, a divided list of rows, an optional `CardFooter`) built\r\n * from parts this library already ships, rather than a new container\r\n * component that happens to look like one. Nesting, theming, radius\r\n * arithmetic and padding all come from `Card` for free, and any future fix to\r\n * that component (the nested-radius correction, for one) reaches every\r\n * settings page without this file changing at all. The rows themselves supply\r\n * only the divider and the per-row padding — everything else about \"a card\r\n * with a header\" was already solved.\r\n */\r\nexport function SettingGroup({\r\n  id,\r\n  title,\r\n  description,\r\n  titleAs,\r\n  footer,\r\n  className,\r\n  children,\r\n}: SettingGroupProps) {\r\n  const s = settingRow();\r\n\r\n  return (\r\n    <Card id={id} className={className}>\r\n      <CardHeader title={title} description={description} titleAs={titleAs} />\r\n      <div className={s.rows()}>{children}</div>\r\n      {footer && <CardFooter>{footer}</CardFooter>}\r\n    </Card>\r\n  );\r\n}\r\n"],"names":["settingRow","tv","SettingRow","props","label","description","details","detailsLabel","detailsDefaultOpen","effect","status","layout","className","s","strings","useUiStrings","labelId","useId","descriptionId","hasDescription","controlNode","jsxs","cn","jsx","Icon","Collapsible","SettingGroup","id","title","titleAs","footer","children","Card","CardHeader","CardFooter"],"mappings":"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"}

package/dist/components/SignOffRings.js

@@ -0,0 +1,36 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as a } from "../lib/cn.js";
+import { ConcentricRing as m } from "./ConcentricRing.js";
+import { percentOf as p } from "./Progress.js";
+const t = {
+  person: "success",
+  agent: "brand"
+}, h = {
+  person: "text-success-text",
+  agent: "text-brand-text"
+};
+function i(n, e) {
+  if (e <= 0) throw new Error(`signOffFill needs a positive total, got ${e}`);
+  return n === e ? 100 : Math.min(99, Math.max(n > 0 ? 1 : 0, p(n, e)));
+}
+function O({ total: n, person: e, agent: s, label: o, className: c, testId: f }) {
+  return (
+    /* -my-1: the 28px ring borrows 4px above and below from a tab's own padding, so a ringed tab is as tall as a plain-label one. */
+    /* @__PURE__ */ r("span", { className: a("-my-1 inline-flex shrink-0", c), "data-testid": f, children: /* @__PURE__ */ r(
+      m,
+      {
+        label: o,
+        outer: { value: i(e, n), tone: t.person },
+        inner: { value: i(s, n), tone: t.agent },
+        children: /* @__PURE__ */ r("span", { className: "text-[0.75em]", children: n })
+      }
+    ) })
+  );
+}
+export {
+  h as SIGN_OFF_TEXT_CLASS,
+  t as SIGN_OFF_TONE,
+  O as SignOffRings,
+  i as signOffFill
+};
+//# sourceMappingURL=SignOffRings.js.map

package/dist/components/SignOffRings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignOffRings.js","sources":["../../src/components/SignOffRings.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { ConcentricRing } from \"./ConcentricRing\";\nimport { percentOf, type ProgressTone } from \"./Progress\";\n\n/* ============================================================================\n   THE DOUBLE SIGN-OFF RING (DX-5428, from danxbot DX-4118) — one glyph for\n   \"how many of a set have been signed off, and by whom\".\n\n     OUTER ring  fills with what a PERSON signed off   (`SIGN_OFF_TONE.person`)\n     INNER ring  fills with what an AGENT verified     (`SIGN_OFF_TONE.agent`)\n     CENTRE      how many there are\n\n   It is `ConcentricRing`, which owns the geometry; this file owns what the two\n   rings MEAN (which actor, which colour). Every word arrives from the caller: the\n   ring's `label` is the whole sentence naming both fractions, since colour is\n   never the only carrier. A set with no members draws no ring: that is the\n   caller's call (an empty circle with a 0 in it says nothing), and `signOffFill`\n   refuses a total of 0 rather than invent a fraction.\n\n   The tones are the library's own theme tokens (`success`, `brand`), so the pair\n   is theme-aware without this file knowing either theme. Green is the person's\n   \"approved\" act; violet is the one library hue that is neither a status colour\n   nor close to green, so two nested rings never blur into one.\n   ========================================================================= */\n\nexport type SignOffActor = \"person\" | \"agent\";\n\n/** The ring/badge tone of each actor. */\nexport const SIGN_OFF_TONE = {\n  person: \"success\",\n  agent: \"brand\",\n} as const satisfies Record<SignOffActor, ProgressTone>;\n\n/** The same two colours as text, for a label that names an actor beside its ring. Literal class names so Tailwind's source scan sees them. */\nexport const SIGN_OFF_TEXT_CLASS = {\n  person: \"text-success-text\",\n  agent: \"text-brand-text\",\n} as const satisfies Record<SignOffActor, string>;\n\n/**\n * How full a ring is, 0-100: the share of `total` that is `done`, floored. Only a complete set reaches 100: 199 of 200\n * rounds to 100 but is not done, so it reads 99. Any sign-off at all shows at least a 1% sliver. `total` is never 0 here.\n */\nexport function signOffFill(done: number, total: number): number {\n  if (total <= 0) throw new Error(`signOffFill needs a positive total, got ${total}`);\n  if (done === total) return 100;\n  return Math.min(99, Math.max(done > 0 ? 1 : 0, percentOf(done, total)));\n}\n\nexport interface SignOffRingsProps {\n  /** How many there are: drawn in the centre. Must be positive; a caller with none draws no ring. */\n  total: number;\n  /** How many a person signed off (the outer ring). */\n  person: number;\n  /** How many an agent verified (the inner ring). */\n  agent: number;\n  /** The ring's accessible name: one sentence naming both fractions, in the caller's words. */\n  label: string;\n  className?: string;\n  testId?: string;\n}\n\nexport function SignOffRings({ total, person, agent, label, className, testId }: SignOffRingsProps) {\n  return (\n    /* -my-1: the 28px ring borrows 4px above and below from a tab's own padding, so a ringed tab is as tall as a plain-label one. */\n    <span className={cn(\"-my-1 inline-flex shrink-0\", className)} data-testid={testId}>\n      <ConcentricRing\n        label={label}\n        outer={{ value: signOffFill(person, total), tone: SIGN_OFF_TONE.person }}\n        inner={{ value: signOffFill(agent, total), tone: SIGN_OFF_TONE.agent }}\n      >\n        {/* The ring's own centre type is 12px, which leaves \"14\" touching the 15px inner disc; 0.75em of it (9px) keeps two digits clear of the ring and one digit legible. */}\n        <span className=\"text-[0.75em]\">{total}</span>\n      </ConcentricRing>\n    </span>\n  );\n}\n"],"names":["SIGN_OFF_TONE","SIGN_OFF_TEXT_CLASS","signOffFill","done","total","percentOf","SignOffRings","person","agent","label","className","testId","jsx","cn","ConcentricRing"],"mappings":";;;;AA4BO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,OAAO;AACT,GAGaC,IAAsB;AAAA,EACjC,QAAQ;AAAA,EACR,OAAO;AACT;AAMO,SAASC,EAAYC,GAAcC,GAAuB;AAC/D,MAAIA,KAAS,EAAG,OAAM,IAAI,MAAM,2CAA2CA,CAAK,EAAE;AAClF,SAAID,MAASC,IAAc,MACpB,KAAK,IAAI,IAAI,KAAK,IAAID,IAAO,IAAI,IAAI,GAAGE,EAAUF,GAAMC,CAAK,CAAC,CAAC;AACxE;AAeO,SAASE,EAAa,EAAE,OAAAF,GAAO,QAAAG,GAAQ,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,QAAAC,KAA6B;AAClG;AAAA;AAAA,IAEE,gBAAAC,EAAC,UAAK,WAAWC,EAAG,8BAA8BH,CAAS,GAAG,eAAaC,GACzE,UAAA,gBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAL;AAAA,QACA,OAAO,EAAE,OAAOP,EAAYK,GAAQH,CAAK,GAAG,MAAMJ,EAAc,OAAA;AAAA,QAChE,OAAO,EAAE,OAAOE,EAAYM,GAAOJ,CAAK,GAAG,MAAMJ,EAAc,MAAA;AAAA,QAG/D,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAR,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA,EACzC,CACF;AAAA;AAEJ;"}