@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/Panel.js

@@ -0,0 +1,396 @@
+import { jsx as E, jsxs as oe } from "react/jsx-runtime";
+import { useRef as L, useLayoutEffect as J, useState as H, useCallback as k, useMemo as q, useId as Q, useEffect as re, useContext as ie, createContext as se } from "react";
+import { cn as _ } from "../lib/cn.js";
+import { usePersistedState as ae } from "../lib/persist.js";
+import { useBelow as le } from "../lib/use-media-query.js";
+import { Tabs as ce, TabList as ue, Tab as de } from "./Tabs.js";
+const Z = se(null);
+function ee(m) {
+  const n = ie(Z);
+  if (!n)
+    throw new Error(`<${m}> must be rendered inside a <PanelGroup>.`);
+  return n;
+}
+const K = (m, n, b) => Math.min(b, Math.max(n, m)), fe = (m) => typeof m == "object" && m !== null && !Array.isArray(m) && Object.values(m).every((n) => typeof n == "number" && Number.isFinite(n));
+function ze({
+  children: m,
+  direction: n = "horizontal",
+  narrowBelow: b = "md",
+  narrowMode: h = "tabs",
+  persistId: T,
+  onLayout: v,
+  className: i,
+  ref: d
+}) {
+  const N = le(b === !1 ? "sm" : b), a = b !== !1 && N && h, s = L(null), C = L(/* @__PURE__ */ new Map()), [z, x] = H(0), [D, j] = H(!1), [M, y] = H(null), [t, r, w] = ae(T, {}, {
+    isValid: fe
+  }), g = k((e) => (C.current.set(e.id, e), x((o) => o + 1), () => {
+    C.current.delete(e.id), x((o) => o + 1);
+  }), []), f = k(() => [...C.current.values()].sort(
+    (e, o) => e.node.compareDocumentPosition(o.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  ), []), O = q(
+    () => f().map((e) => ({ id: e.id, label: e.label ?? e.id })),
+    // `ordered` reads a ref, so `membership` is what makes this recompute.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [z, f]
+  ), G = O.some((e) => e.id === M) ? M : O[0]?.id ?? null, R = a === "tabs" && O.length >= 2, B = Q(), A = k((e) => `${B}-tab-${e}`, [B]), W = k((e) => `${B}-panel-${e}`, [B]);
+  J(() => {
+    const e = f();
+    if (e.length === 0) return;
+    const o = e.map((u) => u.id), l = Object.keys(t);
+    if (l.length === o.length && o.every((u) => Object.hasOwn(t, u))) return;
+    l.length > 0 && w();
+    const c = e.reduce((u, P) => u + (P.defaultSize ?? 0), 0), I = e.filter((u) => u.defaultSize === void 0), S = I.length > 0 ? Math.max(0, 100 - c) / I.length : 0;
+    r(
+      Object.fromEntries(e.map((u) => [u.id, u.defaultSize ?? S]))
+    );
+  }, [z, f, w, r]), re(() => {
+    Object.keys(t).length > 0 && v?.(t);
+  }, [t, v]);
+  const U = k(
+    (e) => {
+      const o = f(), l = [...o].reverse().find(
+        (c) => !!(c.node.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING)
+      ), p = o.find(
+        (c) => !!(c.node.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING)
+      );
+      return l && p ? [l, p] : null;
+    },
+    [f]
+  ), $ = k(() => {
+    const e = s.current;
+    if (!e) return 0;
+    const o = n === "horizontal" ? e.clientWidth : e.clientHeight, l = [...e.querySelectorAll("[data-panel-resizer]")].reduce(
+      (p, c) => p + (n === "horizontal" ? c.offsetWidth : c.offsetHeight),
+      0
+    );
+    return Math.max(1, o - l);
+  }, [n]), V = k(
+    (e, o, l) => {
+      r((p) => {
+        const c = p[e.id], I = p[o.id];
+        if (c === void 0 || I === void 0) return p;
+        let S = K(l, e.min - c, e.max - c);
+        S = K(S, I - o.max, I - o.min);
+        let u = c + S, P = I - S;
+        if (e.collapsible && l < 0 && u <= e.min) {
+          const F = (e.min + e.collapsedSize) / 2;
+          c + l < F && (P += u - e.collapsedSize, u = e.collapsedSize);
+        }
+        if (o.collapsible && l > 0 && P <= o.min) {
+          const F = (o.min + o.collapsedSize) / 2;
+          I - l < F && (u += P - o.collapsedSize, P = o.collapsedSize);
+        }
+        return u === c && P === I ? p : { ...p, [e.id]: u, [o.id]: P };
+      });
+    },
+    [r]
+  ), X = k(
+    (e, o) => {
+      r((l) => {
+        const p = l[e.id], c = l[o.id];
+        if (p === void 0 || c === void 0) return l;
+        const S = p <= e.collapsedSize + 0.5 ? e.defaultSize ?? e.min : e.collapsedSize;
+        return { ...l, [e.id]: S, [o.id]: c + (p - S) };
+      });
+    },
+    [r]
+  ), Y = k(() => {
+    w(), x((e) => e + 1);
+  }, [w]), te = q(
+    () => ({
+      direction: n,
+      narrow: a,
+      tabbed: R,
+      selected: G,
+      tabDomId: A,
+      panelDomId: W,
+      sizes: t,
+      dragging: D,
+      register: g,
+      neighbours: U,
+      resizeBy: V,
+      toggleCollapse: X,
+      resetLayout: Y,
+      measure: $,
+      setDragging: j
+    }),
+    [
+      n,
+      a,
+      R,
+      G,
+      A,
+      W,
+      t,
+      D,
+      g,
+      U,
+      V,
+      X,
+      Y,
+      $
+    ]
+  ), ne = /* @__PURE__ */ E(
+    "div",
+    {
+      ref: (e) => {
+        s.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
+      },
+      "data-panel-group": "",
+      "data-direction": n,
+      "data-narrow": a || void 0,
+      "data-dragging": D || void 0,
+      className: _(
+        /* Fills the box it is given, in BOTH axes. A layout primitive that
+           sizes to its content is the wrong default: panels have no
+           intrinsic height, so an auto-height group collapses to whatever
+           text happens to be inside it and the splitters end up shorter than
+           the panes they divide. */
+        "flex min-h-0 min-w-0",
+        /* Stacked, the group is as tall as its content and scrolls with the
+           page. Keeping `size-full` would hand every panel a share of a fixed
+           height, which is the same crushing in the other axis. */
+        a === "stack" && "h-auto w-full flex-col",
+        /* Tabbed, the group is one pane deep, and it is a FLEX CHILD of the
+           shell rather than the outermost box — `size-full` here would be
+           100% of the shell on top of the strip above it, so it overflows by
+           exactly the height of the strip. */
+        a === "tabs" && "w-full flex-1 flex-col",
+        !a && "size-full",
+        !a && (n === "horizontal" ? "flex-row" : "flex-col"),
+        /* While dragging, the pointer owns the screen: no text selection
+           anywhere, and the resize cursor stays put even when the pointer
+           outruns the splitter. */
+        D && "select-none",
+        D && (n === "horizontal" ? "cursor-col-resize" : "cursor-row-resize"),
+        /* The caller's classes belong on the OUTERMOST box, because that is
+           what they are sizing. Tabbed, that box is the shell below, not this
+           div: this one is a flex child, so `flex-1` would beat any height set
+           here and the group would collapse to the strip. */
+        a !== "tabs" && i
+      ),
+      children: m
+    }
+  );
+  return /* @__PURE__ */ E(Z, { value: te, children: /* @__PURE__ */ oe(
+    ce,
+    {
+      value: G,
+      onValueChange: (e) => y(typeof e == "string" ? e : null),
+      "data-panel-shell": "",
+      className: _(
+        a === "tabs" ? "size-full min-h-0" : "contents",
+        a === "tabs" && i
+      ),
+      children: [
+        R ? /* @__PURE__ */ E(ue, { children: O.map((e) => /* @__PURE__ */ E(
+          de,
+          {
+            value: e.id,
+            id: A(e.id),
+            "aria-controls": W(e.id),
+            children: e.label
+          },
+          e.id
+        )) }) : null,
+        ne
+      ]
+    }
+  ) });
+}
+function xe({
+  children: m,
+  id: n,
+  label: b,
+  defaultSize: h,
+  minSize: T = 10,
+  maxSize: v = 100,
+  collapsible: i = !1,
+  collapsedSize: d = 0,
+  className: N,
+  ref: a
+}) {
+  const s = ee("Panel"), C = L(null), { register: z } = s;
+  J(() => {
+    const r = C.current;
+    if (r)
+      return z({
+        id: n,
+        node: r,
+        min: T,
+        max: v,
+        collapsible: i,
+        collapsedSize: d,
+        defaultSize: h,
+        label: b
+      });
+  }, [z, n, T, v, i, d, h, b]);
+  const x = s.sizes[n], D = x !== void 0 && x <= d + 0.5, j = {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+    minWidth: 0,
+    minHeight: 0
+  }, M = {
+    flexGrow: s.narrow === "tabs" ? 1 : x ?? 1,
+    flexBasis: 0,
+    /* Without this, a panel containing anything unbreakable — a wide table,
+       a long unwrapped path — refuses to shrink below its content and
+       silently overrides the layout. It is the single most common reason a
+       splitter "stops working" partway along its travel. */
+    minWidth: 0,
+    minHeight: 0,
+    overflow: "hidden"
+  }, y = s.tabbed, t = y && s.selected !== n;
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: (r) => {
+        C.current = r, typeof a == "function" ? a(r) : a && (a.current = r);
+      },
+      "data-panel": n,
+      "data-collapsed": D || void 0,
+      id: y ? s.panelDomId(n) : void 0,
+      role: y ? "tabpanel" : void 0,
+      "aria-labelledby": y ? s.tabDomId(n) : void 0,
+      tabIndex: y && !t ? 0 : void 0,
+      hidden: t || void 0,
+      inert: t || void 0,
+      style: s.narrow === "stack" ? j : M,
+      className: _(
+        /* COLUMN, deliberately. As a row, the cross axis is vertical: content
+           stretches to the panel's height but takes its own WIDTH, so a panel
+           sized to 58% renders its content at whatever the text needed and
+           leaves the rest blank. As a column the cross axis is horizontal and
+           content fills the panel it was given, which is the only thing anyone
+           means by putting it there. */
+        "relative flex flex-col min-h-0 min-w-0",
+        /* Collapsing and keyboard steps animate; dragging must not. During a
+           drag the panel has to track the pointer exactly, and a transition
+           there reads as lag rather than polish — so the group turns it off
+           for the duration. */
+        "transition-[var(--tx-colors),flex-grow] duration-(--dur-base) ease-(--ease-standard)",
+        "[[data-panel-group][data-dragging]_&]:transition-none",
+        /* A focusable tabpanel (WAI-ARIA: so a keyboard user can reach a panel
+           with nothing focusable in it) must not grow a focus ring around the
+           whole pane on click. */
+        y && "outline-none",
+        N
+      ),
+      children: m
+    }
+  );
+}
+function ye({
+  label: m,
+  step: n = 4,
+  withGrip: b = !0,
+  disabled: h = !1,
+  className: T,
+  ref: v
+}) {
+  const i = ee("PanelResizer"), d = L(null), N = L(null), a = Q(), s = i.direction === "horizontal", z = (d.current ? i.neighbours(d.current) : null)?.[0], x = z ? i.sizes[z.id] : void 0, D = (t) => {
+    if (h || t.button !== 0) return;
+    const r = d.current;
+    r && (r.setPointerCapture(t.pointerId), N.current = {
+      position: s ? t.clientX : t.clientY,
+      available: i.measure()
+    }, i.setDragging(!0), t.preventDefault());
+  }, j = (t) => {
+    const r = N.current, w = d.current;
+    if (!r || !w) return;
+    const g = i.neighbours(w);
+    if (!g) return;
+    const f = s ? t.clientX : t.clientY, O = (f - r.position) / r.available * 100;
+    O !== 0 && (i.resizeBy(g[0], g[1], O), r.position = f);
+  }, M = (t) => {
+    N.current && (N.current = null, i.setDragging(!1), d.current?.releasePointerCapture(t.pointerId));
+  }, y = (t) => {
+    const r = d.current;
+    if (h || !r) return;
+    const w = i.neighbours(r);
+    if (!w) return;
+    const [g, f] = w, O = s ? "ArrowLeft" : "ArrowUp", G = s ? "ArrowRight" : "ArrowDown";
+    switch (t.key) {
+      case O:
+        i.resizeBy(g, f, -n);
+        break;
+      case G:
+        i.resizeBy(g, f, n);
+        break;
+      case "Home":
+        i.resizeBy(g, f, -100);
+        break;
+      case "End":
+        i.resizeBy(g, f, 100);
+        break;
+      case "Enter":
+        if (!g.collapsible) return;
+        i.toggleCollapse(g, f);
+        break;
+      case "F6":
+        i.resetLayout();
+        break;
+      default:
+        return;
+    }
+    t.preventDefault();
+  };
+  return i.narrow ? null : /* @__PURE__ */ E(
+    "div",
+    {
+      ref: (t) => {
+        d.current = t, typeof v == "function" ? v(t) : v && (v.current = t);
+      },
+      "data-panel-resizer": "",
+      id: a,
+      role: "separator",
+      "aria-label": m,
+      "aria-orientation": s ? "vertical" : "horizontal",
+      "aria-valuenow": x === void 0 ? void 0 : Math.round(x),
+      "aria-valuemin": z?.min,
+      "aria-valuemax": z?.max,
+      "aria-disabled": h || void 0,
+      tabIndex: h ? -1 : 0,
+      onPointerDown: D,
+      onPointerMove: j,
+      onPointerUp: M,
+      onPointerCancel: M,
+      onKeyDown: y,
+      onDoubleClick: () => !h && i.resetLayout(),
+      className: _(
+        "group/resizer relative flex shrink-0 items-center justify-center",
+        /* The visible line is 1px; the HIT AREA is not. A one-pixel drag
+           target is a well-known way to make a splitter feel broken, so the
+           element is a comfortable band and the line is drawn inside it. */
+        s ? "w-2 cursor-col-resize" : "h-2 cursor-row-resize",
+        h && "pointer-events-none cursor-default opacity-50",
+        "before:absolute before:bg-border before:transition-colors before:duration-(--dur-fast)",
+        s ? "before:inset-y-0 before:w-px" : "before:inset-x-0 before:h-px",
+        "hover:before:bg-accent-border focus-visible:before:bg-accent",
+        "[[data-panel-group][data-dragging]_&]:before:bg-accent",
+        "outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0",
+        T
+      ),
+      children: b && /* @__PURE__ */ E(
+        "span",
+        {
+          "aria-hidden": !0,
+          className: _(
+            "relative rounded-full bg-border-strong opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+            "group-hover/resizer:opacity-100 group-focus-visible/resizer:opacity-100",
+            "[[data-panel-group][data-dragging]_&]:opacity-100",
+            s ? "h-6 w-[3px]" : "h-[3px] w-6"
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  xe as Panel,
+  ze as PanelGroup,
+  ye as PanelResizer
+};
+//# sourceMappingURL=Panel.js.map

package/dist/components/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/components/Panel.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PointerEvent as ReactPointerEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { usePersistedState } from \"../lib/persist\";\nimport { useBelow, type Breakpoint } from \"../lib/use-media-query\";\nimport { Tab, TabList, Tabs } from \"./Tabs\";\n\n/* ============================================================================\n   RESIZABLE PANELS\n   A group of panes separated by draggable splitters, implementing the WAI-ARIA\n   window splitter pattern.\n\n   BUILT RATHER THAN BORROWED. The obvious dependency changed its persistence\n   API between major versions (a prop on the group became a hook with a storage\n   argument), which is the same instability that pushed us off CVA in D-11. The\n   widget itself is a well-specified ARIA pattern, and building it means the\n   layout persists through the same primitive as every other remembered\n   setting, animates on the same curves, and adds nothing to a consumer's\n   bundle.\n\n   SIZES ARE FLEX-GROW, NOT WIDTHS. Growth factors are relative, so the browser\n   does the arithmetic: no resize observer, no pixel bookkeeping, no recompute\n   on window resize, and a group that is correct at every container width for\n   free. Percentages are only how we TALK about them — the numbers are\n   normalised to sum to 100 so `aria-valuenow` means what a person expects.\n   ========================================================================= */\n\nexport type PanelDirection = \"horizontal\" | \"vertical\";\n\n/** What a group turns into below its narrow breakpoint. */\nexport type PanelNarrowMode = \"tabs\" | \"stack\";\n\ntype Registration = {\n  id: string;\n  node: HTMLElement;\n  min: number;\n  max: number;\n  collapsible: boolean;\n  collapsedSize: number;\n  defaultSize?: number;\n  /** Only read in `tabs` mode, but registered always: the group cannot know\n      which mode it is in at the moment a panel registers. */\n  label?: string;\n};\n\ntype Sizes = Record<string, number>;\n\ntype GroupContextValue = {\n  direction: PanelDirection;\n  /** What the group has collapsed to for a narrow viewport, or `false` while it\n      is still a splitter — see `narrowBelow` / `narrowMode`. */\n  narrow: false | PanelNarrowMode;\n  /** True only while a tab strip is actually on screen: tabs mode AND at least\n      two registered panels. A lone panel has nothing to switch to, so it gets\n      no strip and no tabpanel semantics — it simply fills the group. */\n  tabbed: boolean;\n  /** The panel whose tab is selected. Only meaningful while `tabbed`. */\n  selected: string | null;\n  /** DOM ids tying each tab to its panel (`aria-controls` / `aria-labelledby`). */\n  tabDomId: (panelId: string) => string;\n  panelDomId: (panelId: string) => string;\n  sizes: Sizes;\n  dragging: boolean;\n  register: (registration: Registration) => () => void;\n  /** Panels flanking a splitter, resolved from DOM order rather than an index\n      prop — so conditional panels and wrapper elements cannot desynchronise it. */\n  neighbours: (resizer: HTMLElement) => [Registration, Registration] | null;\n  resizeBy: (before: Registration, after: Registration, deltaPercent: number) => void;\n  toggleCollapse: (before: Registration, after: Registration) => void;\n  resetLayout: () => void;\n  measure: () => number;\n  setDragging: (value: boolean) => void;\n};\n\nconst GroupContext = createContext<GroupContextValue | null>(null);\n\nfunction useGroup(component: string) {\n  const context = useContext(GroupContext);\n  if (!context) {\n    throw new Error(`<${component}> must be rendered inside a <PanelGroup>.`);\n  }\n  return context;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst isSizes = (value: unknown): value is Sizes =>\n  typeof value === \"object\" &&\n  value !== null &&\n  !Array.isArray(value) &&\n  Object.values(value).every((entry) => typeof entry === \"number\" && Number.isFinite(entry));\n\nexport interface PanelGroupProps {\n  children: ReactNode;\n  direction?: PanelDirection;\n  /**\n   * Below this width the group stops being a splitter. `narrowMode` decides\n   * what it becomes; either way splitters are not rendered and stored sizes are\n   * ignored until the width comes back.\n   *\n   * A SPLITTER IS A POINTER AFFORDANCE, and phone width has neither the room\n   * nor the precision for it. Left as a splitter, a two-pane chat at 375px\n   * gives each pane about 170px: prose wraps one word per line and the buttons\n   * inside it collide. That is not a narrower version of the layout, it is a\n   * broken one.\n   *\n   * Defaults to `md` (768px) — a portrait tablet is the last width where two\n   * panes and a splitter between them still leave each pane a readable column.\n   * Pass `false` for a group that genuinely must stay split at every width.\n   */\n  narrowBelow?: Breakpoint | false;\n  /**\n   * What the group becomes below `narrowBelow`.\n   *\n   * TABS is the default, for panes a person moves BETWEEN — a conversation and\n   * the thing it is about. Only one of those is being read at any moment, so\n   * giving the active one the whole screen and charging a tap to switch costs\n   * nothing and keeps both reachable at a fixed place on screen.\n   *\n   * STACK is for panes read TOGETHER, where scrolling out of one and into the\n   * next is the point. Tabs there hide half the content behind a control the\n   * reader has no reason to expect, and the two halves can no longer be\n   * compared at all.\n   */\n  narrowMode?: PanelNarrowMode;\n  /**\n   * Remembers this group's layout under `danxbot-<persistId>`.\n   *\n   * A layout stored against a different set of panels is DISCARDED, not merged:\n   * ids are compared as a set on mount, and any mismatch falls back to the\n   * defaults and clears the entry. Merging would produce a broken layout that\n   * survives every refresh, because it keeps getting written back — the one\n   * failure a person cannot fix by dragging.\n   */\n  persistId?: string;\n  onLayout?: (sizes: Sizes) => void;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function PanelGroup({\n  children,\n  direction = \"horizontal\",\n  narrowBelow = \"md\",\n  narrowMode = \"tabs\",\n  persistId,\n  onLayout,\n  className,\n  ref,\n}: PanelGroupProps) {\n  /* Hooks cannot be conditional, so the query always runs and `false` disables\n     the RESULT rather than the subscription. */\n  const belowBreakpoint = useBelow(narrowBelow === false ? \"sm\" : narrowBelow);\n  const narrow: false | PanelNarrowMode = narrowBelow !== false && belowBreakpoint && narrowMode;\n\n  const groupRef = useRef<HTMLDivElement | null>(null);\n  const registry = useRef(new Map<string, Registration>());\n  const [membership, setMembership] = useState(0);\n  const [dragging, setDragging] = useState(false);\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n\n  const [sizes, setSizes, resetSizes] = usePersistedState<Sizes>(persistId, {}, {\n    isValid: isSizes,\n  });\n\n  const register = useCallback((registration: Registration) => {\n    registry.current.set(registration.id, registration);\n    setMembership((n) => n + 1);\n    return () => {\n      registry.current.delete(registration.id);\n      setMembership((n) => n + 1);\n    };\n  }, []);\n\n  /** Registered panels in DOM order. Registration order follows mount order,\n      which conditional rendering can scramble; document position cannot. */\n  const ordered = useCallback(() => {\n    return [...registry.current.values()].sort((a, b) =>\n      a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,\n    );\n  }, []);\n\n  /* The tab strip is built from the REGISTRY, never from `children`: a panel\n     may be wrapped, conditional, or sit beside resizers and fragments, and only\n     registration knows what is actually there. `membership` is the trigger, and\n     panels register in a layout effect, so the strip is correct before paint\n     rather than one frame late. */\n  const tabs = useMemo(\n    () => ordered().map((panel) => ({ id: panel.id, label: panel.label ?? panel.id })),\n    // `ordered` reads a ref, so `membership` is what makes this recompute.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [membership, ordered],\n  );\n\n  /* Derived rather than stored. A panel can disappear while it is the selected\n     one — conditional rendering, or a route swapping the pane out — and a\n     stored id would then match nothing: no tab highlighted and an empty body,\n     with no interaction left that repairs it. Resolving against the current\n     registry fixes that in the same render, so the broken state is never\n     painted. */\n  const selected = tabs.some((tab) => tab.id === selectedId)\n    ? selectedId\n    : (tabs[0]?.id ?? null);\n\n  /* A STRIP OF ONE TAB SWITCHES NOTHING. It costs a row of a phone screen and\n     announces a tablist to a screen reader that has exactly one place to go —\n     so below two panels there is no strip, and the lone panel is not marked up\n     as a tabpanel either. */\n  const tabbed = narrow === \"tabs\" && tabs.length >= 2;\n\n  const domId = useId();\n  const tabDomId = useCallback((panelId: string) => `${domId}-tab-${panelId}`, [domId]);\n  const panelDomId = useCallback((panelId: string) => `${domId}-panel-${panelId}`, [domId]);\n\n  /* Reconcile stored sizes against the panels that actually exist, and fill in\n     defaults for any panel the caller did not size. useLayoutEffect, not\n     useEffect: this runs after registration but BEFORE paint, so the first\n     frame a person sees is already the final layout. In an effect it would\n     paint equal shares and then snap. */\n  useLayoutEffect(() => {\n    const panels = ordered();\n    if (panels.length === 0) return;\n\n    const ids = panels.map((panel) => panel.id);\n    const stored = Object.keys(sizes);\n\n    const matches =\n      stored.length === ids.length && ids.every((id) => Object.hasOwn(sizes, id));\n    if (matches) return;\n\n    if (stored.length > 0) {\n      /* Stored against a different group — a panel was added, removed or\n         renamed since. Nothing here is salvageable. */\n      resetSizes();\n    }\n\n    const explicit = panels.reduce((total, panel) => total + (panel.defaultSize ?? 0), 0);\n    const unsized = panels.filter((panel) => panel.defaultSize === undefined);\n    const share = unsized.length > 0 ? Math.max(0, 100 - explicit) / unsized.length : 0;\n\n    setSizes(\n      Object.fromEntries(panels.map((panel) => [panel.id, panel.defaultSize ?? share])) as Sizes,\n    );\n    // `sizes` is deliberately not a dependency: this reconciles MEMBERSHIP, and\n    // reacting to its own write would loop.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [membership, ordered, resetSizes, setSizes]);\n\n  useEffect(() => {\n    if (Object.keys(sizes).length > 0) onLayout?.(sizes);\n  }, [sizes, onLayout]);\n\n  const neighbours = useCallback(\n    (resizer: HTMLElement): [Registration, Registration] | null => {\n      const panels = ordered();\n      const before = [...panels]\n        .reverse()\n        .find(\n          (panel) =>\n            !!(panel.node.compareDocumentPosition(resizer) & Node.DOCUMENT_POSITION_FOLLOWING),\n        );\n      const after = panels.find(\n        (panel) =>\n          !!(panel.node.compareDocumentPosition(resizer) & Node.DOCUMENT_POSITION_PRECEDING),\n      );\n      return before && after ? [before, after] : null;\n    },\n    [ordered],\n  );\n\n  /** Pixels available to panels — the group minus every splitter. Percentages\n      are of THIS, which is what makes them add to 100. */\n  const measure = useCallback(() => {\n    const node = groupRef.current;\n    if (!node) return 0;\n    const total = direction === \"horizontal\" ? node.clientWidth : node.clientHeight;\n    const resizers = [...node.querySelectorAll<HTMLElement>(\"[data-panel-resizer]\")].reduce(\n      (sum, element) =>\n        sum + (direction === \"horizontal\" ? element.offsetWidth : element.offsetHeight),\n      0,\n    );\n    return Math.max(1, total - resizers);\n  }, [direction]);\n\n  const resizeBy = useCallback(\n    (before: Registration, after: Registration, deltaPercent: number) => {\n      setSizes((current) => {\n        const from = current[before.id];\n        const to = current[after.id];\n        if (from === undefined || to === undefined) return current;\n\n        /* Clamped against BOTH panels: a splitter cannot push its left pane\n           past its own minimum, nor squeeze its right pane past that pane's.\n           Whichever bound is hit first stops the drag — the pointer keeps\n           moving and the layout simply stops, which is what every native\n           splitter does. */\n        let delta = clamp(deltaPercent, before.min - from, before.max - from);\n        delta = clamp(delta, to - after.max, to - after.min);\n\n        let nextFrom = from + delta;\n        let nextTo = to - delta;\n\n        /* Collapse snapping. Dragging a collapsible pane below its minimum\n           should close it, not stall against the minimum — otherwise the only\n           way to collapse is the keyboard, and nobody finds that. */\n        if (before.collapsible && deltaPercent < 0 && nextFrom <= before.min) {\n          const midpoint = (before.min + before.collapsedSize) / 2;\n          if (from + deltaPercent < midpoint) {\n            nextTo += nextFrom - before.collapsedSize;\n            nextFrom = before.collapsedSize;\n          }\n        }\n        if (after.collapsible && deltaPercent > 0 && nextTo <= after.min) {\n          const midpoint = (after.min + after.collapsedSize) / 2;\n          if (to - deltaPercent < midpoint) {\n            nextFrom += nextTo - after.collapsedSize;\n            nextTo = after.collapsedSize;\n          }\n        }\n\n        if (nextFrom === from && nextTo === to) return current;\n        return { ...current, [before.id]: nextFrom, [after.id]: nextTo };\n      });\n    },\n    [setSizes],\n  );\n\n  const toggleCollapse = useCallback(\n    (before: Registration, after: Registration) => {\n      setSizes((current) => {\n        const from = current[before.id];\n        const to = current[after.id];\n        if (from === undefined || to === undefined) return current;\n        const collapsed = from <= before.collapsedSize + 0.5;\n        const target = collapsed ? (before.defaultSize ?? before.min) : before.collapsedSize;\n        return { ...current, [before.id]: target, [after.id]: to + (from - target) };\n      });\n    },\n    [setSizes],\n  );\n\n  const resetLayout = useCallback(() => {\n    resetSizes();\n    setMembership((n) => n + 1);\n  }, [resetSizes]);\n\n  const value = useMemo<GroupContextValue>(\n    () => ({\n      direction,\n      narrow,\n      tabbed,\n      selected,\n      tabDomId,\n      panelDomId,\n      sizes,\n      dragging,\n      register,\n      neighbours,\n      resizeBy,\n      toggleCollapse,\n      resetLayout,\n      measure,\n      setDragging,\n    }),\n    [\n      direction,\n      narrow,\n      tabbed,\n      selected,\n      tabDomId,\n      panelDomId,\n      sizes,\n      dragging,\n      register,\n      neighbours,\n      resizeBy,\n      toggleCollapse,\n      resetLayout,\n      measure,\n    ],\n  );\n\n  const group = (\n    <div\n      ref={(node) => {\n        groupRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      data-panel-group=\"\"\n      data-direction={direction}\n      data-narrow={narrow || undefined}\n      data-dragging={dragging || undefined}\n      className={cn(\n        /* Fills the box it is given, in BOTH axes. A layout primitive that\n           sizes to its content is the wrong default: panels have no\n           intrinsic height, so an auto-height group collapses to whatever\n           text happens to be inside it and the splitters end up shorter than\n           the panes they divide. */\n        \"flex min-h-0 min-w-0\",\n        /* Stacked, the group is as tall as its content and scrolls with the\n           page. Keeping `size-full` would hand every panel a share of a fixed\n           height, which is the same crushing in the other axis. */\n        narrow === \"stack\" && \"h-auto w-full flex-col\",\n        /* Tabbed, the group is one pane deep, and it is a FLEX CHILD of the\n           shell rather than the outermost box — `size-full` here would be\n           100% of the shell on top of the strip above it, so it overflows by\n           exactly the height of the strip. */\n        narrow === \"tabs\" && \"w-full flex-1 flex-col\",\n        !narrow && \"size-full\",\n        !narrow && (direction === \"horizontal\" ? \"flex-row\" : \"flex-col\"),\n        /* While dragging, the pointer owns the screen: no text selection\n           anywhere, and the resize cursor stays put even when the pointer\n           outruns the splitter. */\n        dragging && \"select-none\",\n        dragging && (direction === \"horizontal\" ? \"cursor-col-resize\" : \"cursor-row-resize\"),\n        /* The caller's classes belong on the OUTERMOST box, because that is\n           what they are sizing. Tabbed, that box is the shell below, not this\n           div: this one is a flex child, so `flex-1` would beat any height set\n           here and the group would collapse to the strip. */\n        narrow !== \"tabs\" && className,\n      )}\n    >\n      {children}\n    </div>\n  );\n\n  /* ONE TREE, EVERY WIDTH. The shell is rendered in every mode and the group is\n     always its last child, so the element chain above every panel is identical\n     narrow and wide. It used to be `tabs ? <Tabs>{strip}{group}</Tabs> : group`\n     — the same group under two different parents — and React treats a changed\n     parent chain as a different element: crossing `narrowBelow` (a tablet\n     rotating, a window dragged across 768px) unmounted and remounted every\n     panel, throwing away whatever was inside them. An iframe reloaded from\n     scratch; a scrolled list lost its place.\n\n     Only ATTRIBUTES change with the mode now. Wide or stacked, the shell is\n     `display: contents` — it generates no box, so the group lays out against\n     the caller's container exactly as it would with no shell at all, and the\n     caller's classes stay on the group. Tabbed, the shell is the outermost box\n     (a column holding the strip and the group) and takes the caller's classes\n     instead. The strip is a SIBLING rendered before the group, so adding or\n     removing it never moves the group. */\n  return (\n    <GroupContext value={value}>\n      <Tabs\n        value={selected}\n        onValueChange={(next) => setSelectedId(typeof next === \"string\" ? next : null)}\n        data-panel-shell=\"\"\n        className={cn(\n          narrow === \"tabs\" ? \"size-full min-h-0\" : \"contents\",\n          narrow === \"tabs\" && className,\n        )}\n      >\n        {tabbed ? (\n          <TabList>\n            {tabs.map((tab) => (\n              <Tab\n                key={tab.id}\n                value={tab.id}\n                id={tabDomId(tab.id)}\n                aria-controls={panelDomId(tab.id)}\n              >\n                {tab.label}\n              </Tab>\n            ))}\n          </TabList>\n        ) : null}\n        {group}\n      </Tabs>\n    </GroupContext>\n  );\n}\n\nexport interface PanelProps {\n  children: ReactNode;\n  /** Stable identity — the key its size persists under. Required precisely so\n      a remembered layout can be matched against the panels that exist now. */\n  id: string;\n  /** The panel's name on its tab, once the group is narrow enough to show one.\n      Falls back to `id`, which is readable often enough to be a useful default\n      and obviously wrong when it is not. */\n  label?: string;\n  /** Percent of the group. Omitted panels split whatever is left over. */\n  defaultSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  collapsible?: boolean;\n  collapsedSize?: number;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Panel({\n  children,\n  id,\n  label,\n  defaultSize,\n  minSize = 10,\n  maxSize = 100,\n  collapsible = false,\n  collapsedSize = 0,\n  className,\n  ref,\n}: PanelProps) {\n  // I18N-ALLOW: component name used in the hook developer error message\n  const group = useGroup(\"Panel\");\n  const nodeRef = useRef<HTMLDivElement | null>(null);\n  const { register } = group;\n\n  useLayoutEffect(() => {\n    const node = nodeRef.current;\n    if (!node) return;\n    return register({\n      id,\n      node,\n      min: minSize,\n      max: maxSize,\n      collapsible,\n      collapsedSize,\n      defaultSize,\n      label,\n    });\n  }, [register, id, minSize, maxSize, collapsible, collapsedSize, defaultSize, label]);\n\n  const size = group.sizes[id];\n  const collapsed = size !== undefined && size <= collapsedSize + 0.5;\n\n  /* Stacked: natural height, no share of anything, and content is NOT clipped\n     — `overflow: hidden` on a panel whose height is now its content would cut\n     off whatever did not fit the old layout. */\n  const stackStyle: CSSProperties = {\n    flexGrow: 0,\n    flexShrink: 0,\n    flexBasis: \"auto\",\n    minWidth: 0,\n    minHeight: 0,\n  };\n\n  /* Split, or tabbed. Tabbed panels take a flat share of 1 rather than their\n     stored percentage: only one is on screen, so its size is the whole group,\n     and applying the stored value would give a 30% panel 30% of the width with\n     nothing beside it. The stored size is untouched and comes back with the\n     splitter. */\n  const filledStyle: CSSProperties = {\n    flexGrow: group.narrow === \"tabs\" ? 1 : (size ?? 1),\n    flexBasis: 0,\n    /* Without this, a panel containing anything unbreakable — a wide table,\n       a long unwrapped path — refuses to shrink below its content and\n       silently overrides the layout. It is the single most common reason a\n       splitter \"stops working\" partway along its travel. */\n    minWidth: 0,\n    minHeight: 0,\n    overflow: \"hidden\",\n  };\n\n  /* TABPANEL SEMANTICS ARE ATTRIBUTES ON THIS SAME DIV, never a wrapper. A\n     wrapper that exists only in tabs mode changes the panel's parent chain on\n     the frame the viewport crosses `narrowBelow`, and React remounts everything\n     inside it — see the shell note in `PanelGroup`. So the div is always the\n     same element and the mode only decides its attributes.\n\n     A hidden panel stays MOUNTED, non-negotiable. A panel registers itself on\n     mount and deregisters on unmount, and the tab strip is built from that\n     registry — unmounting the unselected ones would leave one tab the moment\n     one was selected, and no way back to the others. Preflight's\n     `[hidden] { display: none !important }` keeps it out of the layout and\n     `inert` keeps it out of focus order and the accessibility tree. */\n  const tabbed = group.tabbed;\n  const hidden = tabbed && group.selected !== id;\n\n  return (\n    <div\n      ref={(node) => {\n        nodeRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      data-panel={id}\n      data-collapsed={collapsed || undefined}\n      id={tabbed ? group.panelDomId(id) : undefined}\n      role={tabbed ? \"tabpanel\" : undefined}\n      aria-labelledby={tabbed ? group.tabDomId(id) : undefined}\n      tabIndex={tabbed && !hidden ? 0 : undefined}\n      hidden={hidden || undefined}\n      inert={hidden || undefined}\n      style={group.narrow === \"stack\" ? stackStyle : filledStyle}\n      className={cn(\n        /* COLUMN, deliberately. As a row, the cross axis is vertical: content\n           stretches to the panel's height but takes its own WIDTH, so a panel\n           sized to 58% renders its content at whatever the text needed and\n           leaves the rest blank. As a column the cross axis is horizontal and\n           content fills the panel it was given, which is the only thing anyone\n           means by putting it there. */\n        \"relative flex flex-col min-h-0 min-w-0\",\n        /* Collapsing and keyboard steps animate; dragging must not. During a\n           drag the panel has to track the pointer exactly, and a transition\n           there reads as lag rather than polish — so the group turns it off\n           for the duration. */\n        \"transition-[var(--tx-colors),flex-grow] duration-(--dur-base) ease-(--ease-standard)\",\n        \"[[data-panel-group][data-dragging]_&]:transition-none\",\n        /* A focusable tabpanel (WAI-ARIA: so a keyboard user can reach a panel\n           with nothing focusable in it) must not grow a focus ring around the\n           whole pane on click. */\n        tabbed && \"outline-none\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface PanelResizerProps {\n  /** Names the splitter for screen readers — \"Sidebar width\", not \"separator\". */\n  label: string;\n  /** Percent moved per arrow key. */\n  step?: number;\n  /** Shows a grip so the splitter reads as draggable rather than decorative. */\n  withGrip?: boolean;\n  disabled?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The draggable divider.\n *\n * `role=\"separator\"` with `tabindex=\"0\"` is the WAI-ARIA window splitter: the\n * one case where a separator is interactive. Keyboard support is not a bonus\n * here — a pointer-only splitter is unusable for anyone who cannot drag, and\n * \"drag\" is the entire interaction.\n */\nexport function PanelResizer({\n  label,\n  step = 4,\n  withGrip = true,\n  disabled = false,\n  className,\n  ref,\n}: PanelResizerProps) {\n  const group = useGroup(\"PanelResizer\");\n  const nodeRef = useRef<HTMLDivElement | null>(null);\n  const dragOrigin = useRef<{ position: number; available: number } | null>(null);\n  const resizerId = useId();\n\n  const horizontal = group.direction === \"horizontal\";\n\n  const pair = nodeRef.current ? group.neighbours(nodeRef.current) : null;\n  const before = pair?.[0];\n  const current = before ? group.sizes[before.id] : undefined;\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (disabled || event.button !== 0) return;\n    const node = nodeRef.current;\n    if (!node) return;\n    node.setPointerCapture(event.pointerId);\n    dragOrigin.current = {\n      position: horizontal ? event.clientX : event.clientY,\n      available: group.measure(),\n    };\n    group.setDragging(true);\n    event.preventDefault();\n  };\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const origin = dragOrigin.current;\n    const node = nodeRef.current;\n    if (!origin || !node) return;\n    const neighbours = group.neighbours(node);\n    if (!neighbours) return;\n\n    const position = horizontal ? event.clientX : event.clientY;\n    const deltaPercent = ((position - origin.position) / origin.available) * 100;\n    if (deltaPercent === 0) return;\n\n    group.resizeBy(neighbours[0], neighbours[1], deltaPercent);\n    /* Re-anchor every move so the applied delta is always the increment since\n       the last frame. Measuring from the original press instead would double\n       every movement the constraints refused to apply. */\n    origin.position = position;\n  };\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!dragOrigin.current) return;\n    dragOrigin.current = null;\n    group.setDragging(false);\n    nodeRef.current?.releasePointerCapture(event.pointerId);\n  };\n\n  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const node = nodeRef.current;\n    if (disabled || !node) return;\n    const neighbours = group.neighbours(node);\n    if (!neighbours) return;\n    const [first, second] = neighbours;\n\n    const decrease = horizontal ? \"ArrowLeft\" : \"ArrowUp\";\n    const increase = horizontal ? \"ArrowRight\" : \"ArrowDown\";\n\n    switch (event.key) {\n      case decrease:\n        group.resizeBy(first, second, -step);\n        break;\n      case increase:\n        group.resizeBy(first, second, step);\n        break;\n      case \"Home\":\n        group.resizeBy(first, second, -100);\n        break;\n      case \"End\":\n        group.resizeBy(first, second, 100);\n        break;\n      case \"Enter\":\n        if (!first.collapsible) return;\n        group.toggleCollapse(first, second);\n        break;\n      case \"F6\":\n        group.resetLayout();\n        break;\n      default:\n        return;\n    }\n    /* Only after a handled key — swallowing the rest would trap Tab and every\n       shortcut the page owns. */\n    event.preventDefault();\n  };\n\n  /* A NARROW GROUP HAS NOTHING TO DIVIDE — stacked or tabbed alike. Rendering\n     the splitter anyway would leave a focusable `role=\"separator\"` with\n     `aria-valuenow` describing a proportion that no longer applies — a keyboard\n     user tabbing onto a control that reports a state the layout does not have.\n     Hidden with CSS it would still be in the accessibility tree; returning null\n     is the honest form.\n\n     After every hook, deliberately: an early return above them would change the\n     hook order on the frame the viewport crosses the breakpoint. */\n  if (group.narrow) return null;\n\n  return (\n    <div\n      ref={(node) => {\n        nodeRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      data-panel-resizer=\"\"\n      id={resizerId}\n      role=\"separator\"\n      aria-label={label}\n      aria-orientation={horizontal ? \"vertical\" : \"horizontal\"}\n      aria-valuenow={current === undefined ? undefined : Math.round(current)}\n      aria-valuemin={before?.min}\n      aria-valuemax={before?.max}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onKeyDown={onKeyDown}\n      onDoubleClick={() => !disabled && group.resetLayout()}\n      className={cn(\n        \"group/resizer relative flex shrink-0 items-center justify-center\",\n        /* The visible line is 1px; the HIT AREA is not. A one-pixel drag\n           target is a well-known way to make a splitter feel broken, so the\n           element is a comfortable band and the line is drawn inside it. */\n        horizontal ? \"w-2 cursor-col-resize\" : \"h-2 cursor-row-resize\",\n        disabled && \"pointer-events-none cursor-default opacity-50\",\n        \"before:absolute before:bg-border before:transition-colors before:duration-(--dur-fast)\",\n        horizontal ? \"before:inset-y-0 before:w-px\" : \"before:inset-x-0 before:h-px\",\n        \"hover:before:bg-accent-border focus-visible:before:bg-accent\",\n        \"[[data-panel-group][data-dragging]_&]:before:bg-accent\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-0\",\n        className,\n      )}\n    >\n      {withGrip && (\n        <span\n          aria-hidden\n          className={cn(\n            \"relative rounded-full bg-border-strong opacity-0 transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n            \"group-hover/resizer:opacity-100 group-focus-visible/resizer:opacity-100\",\n            \"[[data-panel-group][data-dragging]_&]:opacity-100\",\n            horizontal ? \"h-6 w-[3px]\" : \"h-[3px] w-6\",\n          )}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["GroupContext","createContext","useGroup","component","context","useContext","clamp","value","min","max","isSizes","entry","PanelGroup","children","direction","narrowBelow","narrowMode","persistId","onLayout","className","ref","belowBreakpoint","useBelow","narrow","groupRef","useRef","registry","membership","setMembership","useState","dragging","setDragging","selectedId","setSelectedId","sizes","setSizes","resetSizes","usePersistedState","register","useCallback","registration","n","ordered","a","b","tabs","useMemo","panel","selected","tab","tabbed","domId","useId","tabDomId","panelId","panelDomId","useLayoutEffect","panels","ids","stored","id","explicit","total","unsized","share","useEffect","neighbours","resizer","before","after","measure","node","resizers","sum","element","resizeBy","deltaPercent","current","from","to","delta","nextFrom","nextTo","midpoint","toggleCollapse","target","resetLayout","group","jsx","cn","jsxs","Tabs","next","TabList","Tab","Panel","label","defaultSize","minSize","maxSize","collapsible","collapsedSize","nodeRef","size","collapsed","stackStyle","filledStyle","hidden","PanelResizer","step","withGrip","disabled","dragOrigin","resizerId","horizontal","onPointerDown","event","onPointerMove","origin","position","endDrag","onKeyDown","first","second","decrease","increase"],"mappings":"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"}

package/dist/components/PasswordInput.js

@@ -0,0 +1,32 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { Icon as d } from "./Icon.js";
+import { IconButton as p } from "./IconButton.js";
+import { Input as u } from "./Input.js";
+import { useUiStrings as f } from "../lib/i18n/provider.js";
+function b({ revealable: s = !0, autoComplete: i, ...r }) {
+  const o = f().passwordInput, [t, n] = m(!1);
+  return /* @__PURE__ */ e(
+    u,
+    {
+      ...r,
+      type: s && t ? "text" : "password",
+      autoComplete: i ?? "current-password",
+      trailing: s ? /* @__PURE__ */ e(
+        p,
+        {
+          icon: /* @__PURE__ */ e(d, { name: t ? "eye-off" : "eye", size: "sm" }),
+          label: t ? o.hide : o.show,
+          variant: "ghost",
+          size: "sm",
+          disabledReason: r.disabled ? o.disabled : void 0,
+          onClick: () => n((a) => !a)
+        }
+      ) : void 0
+    }
+  );
+}
+export {
+  b as PasswordInput
+};
+//# sourceMappingURL=PasswordInput.js.map

package/dist/components/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../src/components/PasswordInput.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input, type InputProps } from \"./Input\";\n\n/* ----------------------------------------------------------------------------\n   PASSWORD INPUT\n\n   `Input` already renders correctly with `type=\"password\"` on its own — this\n   component exists for exactly one addition: a show/hide toggle in the\n   trailing slot, wired to local `revealed` state so every password field in\n   an app gets the same control without hand-wiring an `IconButton` next to a\n   plain `Input` each time.\n\n   `type` FLIPS BETWEEN `\"password\"` AND `\"text\"`, NEVER A CSS TRICK. A\n   password manager, a browser's own reveal button and assistive tech all key\n   off the real `type` attribute — faking the reveal with `-webkit-text-\n   security` or a monospace dot font would defeat autofill and announce the\n   field wrong.\n   ---------------------------------------------------------------------------- */\n\nexport interface PasswordInputProps extends Omit<InputProps, \"type\" | \"trailing\"> {\n  /** Hides the show/hide toggle entirely — for a field where the operator\n   *  should never be able to reveal what they typed (rare; default `true`). */\n  revealable?: boolean;\n}\n\nexport function PasswordInput({ revealable = true, autoComplete, ...props }: PasswordInputProps) {\n  const strings = useUiStrings().passwordInput;\n  const [revealed, setRevealed] = useState(false);\n\n  return (\n    <Input\n      {...props}\n      type={revealable && revealed ? \"text\" : \"password\"}\n      autoComplete={autoComplete ?? \"current-password\"}\n      trailing={\n        revealable ? (\n          <IconButton\n            icon={<Icon name={revealed ? \"eye-off\" : \"eye\"} size=\"sm\" />}\n            label={revealed ? strings.hide : strings.show}\n            variant=\"ghost\"\n            size=\"sm\"\n            disabledReason={props.disabled ? strings.disabled : undefined}\n            onClick={() => setRevealed((r) => !r)}\n          />\n        ) : undefined\n      }\n    />\n  );\n}\n"],"names":["PasswordInput","revealable","autoComplete","props","strings","useUiStrings","revealed","setRevealed","useState","jsx","Input","IconButton","Icon","r"],"mappings":";;;;;;AA4BO,SAASA,EAAc,EAAE,YAAAC,IAAa,IAAM,cAAAC,GAAc,GAAGC,KAA6B;AAC/F,QAAMC,IAAUC,IAAe,eACzB,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAE9C,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGP;AAAA,MACJ,MAAMF,KAAcK,IAAW,SAAS;AAAA,MACxC,cAAcJ,KAAgB;AAAA,MAC9B,UACED,IACE,gBAAAQ;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,wBAAOC,GAAA,EAAK,MAAMN,IAAW,YAAY,OAAO,MAAK,MAAK;AAAA,UAC1D,OAAOA,IAAWF,EAAQ,OAAOA,EAAQ;AAAA,UACzC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,gBAAgBD,EAAM,WAAWC,EAAQ,WAAW;AAAA,UACpD,SAAS,MAAMG,EAAY,CAACM,MAAM,CAACA,CAAC;AAAA,QAAA;AAAA,MAAA,IAEpC;AAAA,IAAA;AAAA,EAAA;AAIZ;"}

package/dist/components/PasswordRequirements.js

@@ -0,0 +1,25 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { cn as r } from "../lib/cn.js";
+import { Icon as c } from "./Icon.js";
+import { useUiStrings as o } from "../lib/i18n/provider.js";
+function d({ rules: s, className: i, ref: a }) {
+  const l = o().passwordRequirements;
+  return s.length === 0 ? null : /* @__PURE__ */ t("ul", { ref: a, className: r("flex flex-col gap-1", i), "aria-label": l.label, children: s.map((e) => /* @__PURE__ */ n(
+    "li",
+    {
+      className: r(
+        "flex items-center gap-1.5 text-2xs transition-colors duration-(--dur-fast)",
+        e.met ? "text-success-text" : "text-tertiary"
+      ),
+      children: [
+        /* @__PURE__ */ t(c, { name: e.met ? "circle-check" : "circle-alert", size: "xs", className: "shrink-0" }),
+        /* @__PURE__ */ t("span", { children: e.label })
+      ]
+    },
+    e.label
+  )) });
+}
+export {
+  d as PasswordRequirements
+};
+//# sourceMappingURL=PasswordRequirements.js.map

package/dist/components/PasswordRequirements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordRequirements.js","sources":["../../src/components/PasswordRequirements.tsx"],"sourcesContent":["import type { Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   PASSWORD REQUIREMENTS\n\n   THE RULES ARE NEVER THIS LIBRARY'S TO KNOW. \"At least 12 characters,\" \"one\n   number,\" whatever a consumer's own policy demands — that is domain logic\n   that belongs entirely to the consuming app (danxbot's own\n   `src/lib/auth-rules.ts`, for one), never hardcoded here. This component\n   renders whatever `rules[]` it is handed and nothing more, the same\n   relationship `DataTable` has with its rows and `RolePermissionMatrix` has\n   with its permissions.\n\n   LIVE, BECAUSE THE CONSUMER RECOMPUTES `met` ON EVERY KEYSTROKE. This\n   component holds no state of its own — a controlled password value lives in\n   whatever form composes it (see `ChangePasswordForm`), which re-derives\n   `rules` from that value and passes the new array down each render. The\n   checklist simply reflects whatever it was just given.\n\n   THE ICON CARRIES THE STATE, THE COLOUR CONFIRMS IT — same reasoning as\n   `Callout`'s own header: a met/unmet distinction that relied on colour alone\n   would be unreadable for a red-green colour deficiency, so a check and a\n   dash are two different SHAPES, not just two different hues.\n   ---------------------------------------------------------------------------- */\n\nexport interface PasswordRequirementRule {\n  label: string;\n  met: boolean;\n}\n\nexport interface PasswordRequirementsProps {\n  rules: PasswordRequirementRule[];\n  className?: string;\n  ref?: Ref<HTMLUListElement>;\n}\n\nexport function PasswordRequirements({ rules, className, ref }: PasswordRequirementsProps) {\n  const strings = useUiStrings().passwordRequirements;\n  if (rules.length === 0) return null;\n\n  return (\n    <ul ref={ref} className={cn(\"flex flex-col gap-1\", className)} aria-label={strings.label}>\n      {rules.map((rule) => (\n        <li\n          key={rule.label}\n          className={cn(\n            \"flex items-center gap-1.5 text-2xs transition-colors duration-(--dur-fast)\",\n            rule.met ? \"text-success-text\" : \"text-tertiary\",\n          )}\n        >\n          <Icon name={rule.met ? \"circle-check\" : \"circle-alert\"} size=\"xs\" className=\"shrink-0\" />\n          <span>{rule.label}</span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"names":["PasswordRequirements","rules","className","ref","strings","useUiStrings","jsx","cn","rule","jsxs","Icon"],"mappings":";;;;AAuCO,SAASA,EAAqB,EAAE,OAAAC,GAAO,WAAAC,GAAW,KAAAC,KAAkC;AACzF,QAAMC,IAAUC,IAAe;AAC/B,SAAIJ,EAAM,WAAW,IAAU,OAG7B,gBAAAK,EAAC,MAAA,EAAG,KAAAH,GAAU,WAAWI,EAAG,uBAAuBL,CAAS,GAAG,cAAYE,EAAQ,OAChF,UAAAH,EAAM,IAAI,CAACO,MACV,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAWF;AAAA,QACT;AAAA,QACAC,EAAK,MAAM,sBAAsB;AAAA,MAAA;AAAA,MAGnC,UAAA;AAAA,QAAA,gBAAAF,EAACI,GAAA,EAAK,MAAMF,EAAK,MAAM,iBAAiB,gBAAgB,MAAK,MAAK,WAAU,WAAA,CAAW;AAAA,QACvF,gBAAAF,EAAC,QAAA,EAAM,UAAAE,EAAK,MAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAPbA,EAAK;AAAA,EAAA,CASb,GACH;AAEJ;"}