@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/SandboxedFrame.js

@@ -0,0 +1,135 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as r, useState as H, useMemo as W, useLayoutEffect as b } from "react";
+import { cn as A } from "../lib/cn.js";
+import { prepareDesignDocument as $ } from "../lib/design-frame/document.js";
+import { readAppearance as O, parseInboundMessage as z, DESIGN_FRAME_READY as U, DESIGN_FRAME_ERROR as Y, DESIGN_FRAME_ERROR_MAX_LENGTH as V, DESIGN_FRAME_HEIGHT as X, DESIGN_FRAME_APPEARANCE as q, APPEARANCE_ATTRIBUTES as J } from "../lib/design-frame/protocol.js";
+const F = { colorScheme: "normal" }, G = 150;
+let K = 0;
+const Q = () => `doc-${++K}`;
+function Z(n, l, o) {
+  return l !== null && n.viewport !== l && n.height !== o;
+}
+const ee = Object.values(J).map((n) => `data-${n}`);
+function se({
+  html: n,
+  title: l,
+  fit: o,
+  viewportWidth: h,
+  onReady: _,
+  onError: I,
+  className: T
+}) {
+  const s = r(null), p = r(null), R = r({ onReady: _, onError: I });
+  R.current = { onReady: _, onError: I };
+  const M = r(o);
+  M.current = o;
+  const [C, P] = H(G), N = r(G), d = r(null), x = r(null), f = r(!1), y = r(""), w = W(() => {
+    const e = Q();
+    return { id: e, srcdoc: $(n, O(document.documentElement), e) };
+  }, [n]), { srcdoc: L } = w;
+  y.current = L;
+  const v = () => {
+    const e = s.current?.contentWindow;
+    if (!e) return;
+    const c = {
+      type: q,
+      ...O(document.documentElement)
+    };
+    e.postMessage(c, "*");
+  };
+  b(() => {
+    const e = s.current;
+    if (!e) return;
+    const c = (D) => {
+      if (D.source !== e.contentWindow) return;
+      const t = z(D.data);
+      if (t) {
+        if (t.type === U)
+          v(), R.current.onReady?.();
+        else if (t.type === Y)
+          R.current.onError?.(t.message.slice(0, V));
+        else if (t.type === X) {
+          if (t.doc !== x.current || M.current !== "content") return;
+          const B = Z(t, d.current, N.current);
+          if (d.current = t.viewport, B) return;
+          N.current = t.height, P(t.height);
+        }
+      }
+    };
+    f.current = !1;
+    const a = () => {
+      if (!f.current) {
+        f.current = !0, e.removeAttribute("src"), e.srcdoc = y.current;
+        return;
+      }
+      v();
+    };
+    window.addEventListener("message", c), e.addEventListener("load", a), e.src = "about:blank";
+    const S = new MutationObserver(v);
+    return S.observe(document.documentElement, { attributes: !0, attributeFilter: ee }), () => {
+      window.removeEventListener("message", c), e.removeEventListener("load", a), S.disconnect();
+    };
+  }, []), b(() => {
+    s.current && f.current && (s.current.srcdoc = L), x.current = w.id, d.current = null;
+  }, [w]);
+  const g = o === "content";
+  b(() => {
+    g && (d.current = null);
+  }, [g]);
+  const u = typeof o == "object" ? o.scaleToWidth : null, [i, k] = H(null);
+  if (b(() => {
+    if (u === null) return;
+    const e = p.current;
+    if (!e) return;
+    const c = () => k({ width: e.clientWidth, height: e.clientHeight });
+    c();
+    const a = new ResizeObserver(c);
+    return a.observe(e), () => a.disconnect();
+  }, [u]), u !== null) {
+    const e = i && i.width > 0 ? i.width / u : null;
+    return /* @__PURE__ */ E("div", { ref: p, className: A("relative size-full overflow-hidden", T), children: /* @__PURE__ */ E(
+      "iframe",
+      {
+        ref: s,
+        "aria-label": l,
+        sandbox: "allow-scripts",
+        referrerPolicy: "no-referrer",
+        allow: "",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        className: "absolute left-0 top-0 border-0 bg-transparent",
+        style: {
+          ...F,
+          width: u,
+          height: i && e ? i.height / e : "100%",
+          transform: e ? `scale(${e})` : void 0,
+          transformOrigin: "top left",
+          pointerEvents: "none",
+          visibility: e ? void 0 : "hidden"
+        }
+      }
+    ) });
+  }
+  const m = g, j = h === void 0 ? "w-full" : m ? "mx-auto max-w-full" : "absolute inset-y-0 left-1/2 max-w-full -translate-x-1/2";
+  return /* @__PURE__ */ E("div", { ref: p, className: A("relative w-full", !m && "h-full", T), children: /* @__PURE__ */ E(
+    "iframe",
+    {
+      ref: s,
+      "aria-label": l,
+      sandbox: "allow-scripts",
+      referrerPolicy: "no-referrer",
+      allow: "",
+      className: A("border-0 bg-transparent", m ? "block" : "h-full", j),
+      style: {
+        ...F,
+        ...h === void 0 ? null : { width: h },
+        ...m ? { height: C } : null
+      }
+    }
+  ) });
+}
+export {
+  se as SandboxedFrame,
+  Z as followsOwnViewport
+};
+//# sourceMappingURL=SandboxedFrame.js.map

package/dist/components/SandboxedFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SandboxedFrame.js","sources":["../../src/components/SandboxedFrame.tsx"],"sourcesContent":["import { useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { prepareDesignDocument } from \"../lib/design-frame/document\";\nimport {\n  APPEARANCE_ATTRIBUTES,\n  DESIGN_FRAME_APPEARANCE,\n  DESIGN_FRAME_ERROR,\n  DESIGN_FRAME_ERROR_MAX_LENGTH,\n  DESIGN_FRAME_HEIGHT,\n  DESIGN_FRAME_READY,\n  parseInboundMessage,\n  readAppearance,\n  type DesignFrameAppearanceMessage,\n} from \"../lib/design-frame/protocol\";\n\n/* ============================================================================\n   SANDBOXED FRAME — renders an UNTRUSTED single-file HTML document, isolated,\n   in the viewer's Appearance (DX-4075).\n\n   WHY THE LIBRARY OWNS IT. An application that shows a document an agent wrote\n   has nothing it can safely reuse: the only frame in a typical app is its own\n   same-origin one. Hand-rolling this per screen is how an `allow-same-origin`\n   gets added \"just to make fonts work\", and that single token hands the document\n   the viewer's session.\n\n   ISOLATION IS THE POINT, AND IT IS FOUR INDEPENDENT LAYERS:\n     1. `sandbox=\"allow-scripts\"` and NOTHING else. No `allow-same-origin`, so the\n        frame's origin is opaque (\"null\"): no cookies, no storage, no parent DOM.\n        No top navigation, popups, forms or modals.\n     2. `srcdoc`, never `src`. A `src` navigation carries the host's cookie on\n        the request and serves the design as a page on the host's origin; `srcdoc`\n        makes no request at all.\n     3. A Content-Security-Policy `<meta>` as the FIRST child of the document's\n        head, inserted by parsing and self-verified (`prepareDesignDocument`), so\n        the document cannot fetch, beacon or submit anywhere.\n     4. `referrerpolicy=\"no-referrer\"` and an empty `allow` (no camera, mic,\n        geolocation, ...).\n\n   A `srcdoc` document INHERITS its embedder's CSP. If the host ever sends one\n   whose `script-src` lacks inline script, every design stops running: check any\n   such change against this frame.\n\n   THE MESSAGE CHANNEL. The frame's origin is the string \"null\", so an origin\n   check on an inbound message proves nothing. What proves it is `event.source`:\n   only the iframe's own `contentWindow` is believed. Outbound, the host posts the\n   four Appearance values to targetOrigin \"*\", which is safe because the message\n   carries no secret.\n\n   THE FRAMED DOCUMENT INSTALLS NOTHING (DXUI-6). `prepareDesignDocument` injects one dependency-free\n   script that defines `window.danxMiniApp`: it applies the Appearance, says the page is ready,\n   reports errors and reports the document's height, so a page built on any version of this\n   library, or on another framework, needs no client code.\n   ========================================================================= */\n\n/* DX-4693: the iframe ELEMENT's color-scheme is always `normal`, never the host page's. Measured in the\n   desktop app's Chromium 152 on a design with no colours of its own: an element whose used scheme is `dark`\n   does not paint its out-of-process srcdoc content at all (blank, even after a real wheel scroll), while\n   `light` and `normal` paint, and toggling `light` back to `dark` blanks it again. `normal` isolates the\n   element from the host's scheme; the framed document picks its own canvas through the scheme it declares\n   (`prepareDesignDocument`). */\nconst FRAME_ELEMENT_STYLE = { colorScheme: \"normal\" } as const;\n\nexport type SandboxedFrameFit = \"fill\" | \"content\" | { scaleToWidth: number };\n\n/**\n * DXUI-6: the height a `fit=\"content\"` frame has before the page reports one. Never 0: a page whose\n * root is `100vh` takes its height from the frame, so a frame that started at 0 would report 0 and\n * stay there.\n */\nconst CONTENT_INITIAL_HEIGHT = 150;\n\n/**\n * DXUI-6: a fresh id for every document the host sets. A counter is enough: the id only tells this frame's\n * successive documents apart (a framed page can send any id it likes, so it is never a secret).\n */\nlet documentCounter = 0;\nconst nextDocumentId = () => `doc-${++documentCounter}`;\n\n/**\n * DXUI-6: true when a height report is the page answering the host's own resize rather than a change to the\n * page. A page's height changes together with its viewport height only when it is laid out against that\n * viewport (`min-height: 100vh` plus a margin, `110vh`, `calc(100vh + 2%)`, a shrinking one), and following it\n * resizes the frame, which changes the viewport, which changes the height again, without end. A real content\n * change arrives with the viewport unchanged. So: the viewport moved since the last report (any report, applied\n * or not; the first report has nothing to compare with and always applies) and the height is not the one the\n * frame already has.\n */\nexport function followsOwnViewport(\n  message: { height: number; viewport: number },\n  lastViewport: number | null,\n  currentHeight: number,\n): boolean {\n  return lastViewport !== null && message.viewport !== lastViewport && message.height !== currentHeight;\n}\n\nexport interface SandboxedFrameProps {\n  /** A complete HTML document. Empty or non-string throws, and so does a document the policy cannot be proven first in. */\n  html: string;\n  /** The accessible name of the frame. */\n  title: string;\n  /**\n   * `\"fill\"` fills its box. `\"content\"` is as tall as the document reports itself (the page's `<html>` element), so\n   * the frame grows and shrinks with the page and the surrounding layout scrolls; a page whose root is `100vh` stays at\n   * the frame's own height. `{ scaleToWidth }` is a thumbnail: the document lays out at that viewport width and is\n   * scaled by a CSS transform to fit the box; it is not interactive, not focusable and hidden from assistive tech.\n   */\n  fit: SandboxedFrameFit;\n  /** Fill and content modes: lay the document out at this device width (px), centred in the box. */\n  viewportWidth?: number;\n  /** The framed document has mounted. */\n  onReady?: () => void;\n  /** The framed document reported a failure. The message is capped at 500 characters and is text, never markup. */\n  onError?: (message: string) => void;\n  className?: string;\n}\n\n/** The four attributes the host mirrors. `data-motion-suspend` is deliberately absent: it is transient and never posts. */\nconst MIRRORED_ATTRIBUTES = Object.values(APPEARANCE_ATTRIBUTES).map((name) => `data-${name}`);\n\ntype BoxSize = { width: number; height: number };\n\nexport function SandboxedFrame({\n  html,\n  title,\n  fit,\n  viewportWidth,\n  onReady,\n  onError,\n  className,\n}: SandboxedFrameProps) {\n  /* The accessible name is `aria-label`, not `title`: a native `title` is the banned browser tooltip\n     (`no-native-tooltip.test.ts`), and on an iframe it would also pop over the document. */\n  const frameRef = useRef<HTMLIFrameElement>(null);\n  const boxRef = useRef<HTMLDivElement>(null);\n  const callbacks = useRef({ onReady, onError });\n  callbacks.current = { onReady, onError };\n  /* DXUI-6: the message handler is attached once, so it reads the fit mode through a ref, like `callbacks`. */\n  const fitRef = useRef(fit);\n  fitRef.current = fit;\n  const [contentHeight, setContentHeight] = useState(CONTENT_INITIAL_HEIGHT);\n  const contentHeightRef = useRef(CONTENT_INITIAL_HEIGHT);\n  const lastViewportRef = useRef<number | null>(null);\n  const docIdRef = useRef<string | null>(null);\n  /* DX-5652: false until the frame's own `about:blank` load has fired; `srcdocRef` is the document waiting for it. */\n  const blankLoadedRef = useRef(false);\n  const srcdocRef = useRef(\"\");\n\n  /* Prepared in render so a document that cannot be made safe throws to the\n     caller's ErrorBoundary rather than rendering. Keyed on `html` alone: the\n     Appearance it stamps is only the first paint; the mirror below keeps the\n     frame current after that. */\n  const prepared = useMemo(() => {\n    const id = nextDocumentId();\n    return { id, srcdoc: prepareDesignDocument(html, readAppearance(document.documentElement), id) };\n  }, [html]);\n  const { srcdoc } = prepared;\n  srcdocRef.current = srcdoc;\n\n  const postAppearance = () => {\n    const target = frameRef.current?.contentWindow;\n    if (!target) return;\n    const message: DesignFrameAppearanceMessage = {\n      type: DESIGN_FRAME_APPEARANCE,\n      ...readAppearance(document.documentElement),\n    };\n    target.postMessage(message, \"*\");\n  };\n\n  /* A LAYOUT effect declared BEFORE the srcdoc layout effect below. Layout effects run in declaration order,\n     so the listeners exist before `srcdoc` starts the navigation and neither the frame's first `ready`, an early\n     `error` nor its `load` can be missed. A passive `useEffect` would not do: React runs every layout effect of a\n     commit before any passive one, so it would attach after the srcdoc assignment. */\n  useLayoutEffect(() => {\n    const frame = frameRef.current;\n    if (!frame) return;\n\n    const onMessage = (event: MessageEvent) => {\n      if (event.source !== frame.contentWindow) return;\n      const message = parseInboundMessage(event.data);\n      if (!message) return;\n      if (message.type === DESIGN_FRAME_READY) {\n        /* The host's Appearance may have moved between the stamp and now. */\n        postAppearance();\n        callbacks.current.onReady?.();\n      } else if (message.type === DESIGN_FRAME_ERROR) {\n        callbacks.current.onError?.(message.message.slice(0, DESIGN_FRAME_ERROR_MAX_LENGTH));\n      } else if (message.type === DESIGN_FRAME_HEIGHT) {\n        /* DXUI-6: setting `srcdoc` only starts a navigation. The old document stays live, in the same window object,\n           until the new one commits, so a late report from it (answering a resize, with its own height and\n           viewport) can arrive after the swap and look like the new document's feedback loop. Only the document the\n           host set last is believed. */\n        if (message.doc !== docIdRef.current) return;\n        if (fitRef.current !== \"content\") return;\n        /* DXUI-6: the viewport is recorded on every report, applied or not, so a refused report still moves the\n           baseline and a later real content change (same viewport, new height) applies. */\n        const follows = followsOwnViewport(message, lastViewportRef.current, contentHeightRef.current);\n        lastViewportRef.current = message.viewport;\n        if (follows) return;\n        contentHeightRef.current = message.height;\n        setContentHeight(message.height);\n      }\n    };\n    /* DX-5652: `srcdoc` must never be the iframe's FIRST navigation. Measured in headless Chrome with a 2 MB\n       design: a frame whose first navigation was the `srcdoc` assignment right after attach stayed unlaid-out\n       (every rect 0x0, the iframe element itself correctly sized) in 8 of 9 tries, while `about:blank` first and\n       `srcdoc` set from that load event laid out 9 of 9. So the frame is sent to `about:blank` here, after the\n       listeners exist, and the document is assigned when that load fires (the srcdoc effect below covers every\n       later document, once the blank load has happened). The blank load posts no Appearance: nothing is there. */\n    blankLoadedRef.current = false;\n    const onLoad = () => {\n      if (!blankLoadedRef.current) {\n        blankLoadedRef.current = true;\n        frame.removeAttribute(\"src\");\n        frame.srcdoc = srcdocRef.current;\n        return;\n      }\n      postAppearance();\n    };\n    window.addEventListener(\"message\", onMessage);\n    frame.addEventListener(\"load\", onLoad);\n    frame.src = \"about:blank\";\n\n    const observer = new MutationObserver(postAppearance);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: MIRRORED_ATTRIBUTES });\n\n    return () => {\n      window.removeEventListener(\"message\", onMessage);\n      frame.removeEventListener(\"load\", onLoad);\n      observer.disconnect();\n    };\n  }, []);\n\n  /* THE DOM PROPERTY, never markup assembled around the document. */\n  useLayoutEffect(() => {\n    /* DX-5652: before the blank load the document waits in `srcdocRef`; the load handler above assigns it. */\n    if (frameRef.current && blankLoadedRef.current) frameRef.current.srcdoc = srcdoc;\n    /* DXUI-6: a new document starts with no viewport memory, so its first report always applies. The frame keeps\n       its current height across the swap (shrinking it would resize the old document, which is still live). */\n    docIdRef.current = prepared.id;\n    lastViewportRef.current = null;\n  }, [prepared]);\n\n  /* DXUI-6: viewports are recorded only in content mode, so one recorded before a switch to fill mode is stale\n     when the frame returns to content. */\n  const contentMode = fit === \"content\";\n  useLayoutEffect(() => {\n    if (contentMode) lastViewportRef.current = null;\n  }, [contentMode]);\n\n  const scaleToWidth = typeof fit === \"object\" ? fit.scaleToWidth : null;\n  const [box, setBox] = useState<BoxSize | null>(null);\n  useLayoutEffect(() => {\n    if (scaleToWidth === null) return;\n    const el = boxRef.current;\n    if (!el) return;\n    const measure = () => setBox({ width: el.clientWidth, height: el.clientHeight });\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [scaleToWidth]);\n\n  if (scaleToWidth !== null) {\n    const scale = box && box.width > 0 ? box.width / scaleToWidth : null;\n    return (\n      <div ref={boxRef} className={cn(\"relative size-full overflow-hidden\", className)}>\n        <iframe\n          ref={frameRef}\n          aria-label={title}\n          sandbox=\"allow-scripts\"\n          referrerPolicy=\"no-referrer\"\n          allow=\"\"\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          className=\"absolute left-0 top-0 border-0 bg-transparent\"\n          style={{\n            ...FRAME_ELEMENT_STYLE,\n            width: scaleToWidth,\n            height: box && scale ? box.height / scale : \"100%\",\n            transform: scale ? `scale(${scale})` : undefined,\n            transformOrigin: \"top left\",\n            pointerEvents: \"none\",\n            visibility: scale ? undefined : \"hidden\",\n          }}\n        />\n      </div>\n    );\n  }\n\n  const content = contentMode;\n  /* DXUI-6: content mode keeps the iframe in normal flow so the wrapper takes its height; only fill mode centres a\n     narrower frame with absolute positioning (an absolute child gives its parent no height). */\n  const widthClass =\n    viewportWidth === undefined\n      ? \"w-full\"\n      : content\n        ? \"mx-auto max-w-full\"\n        : \"absolute inset-y-0 left-1/2 max-w-full -translate-x-1/2\";\n  return (\n    <div ref={boxRef} className={cn(\"relative w-full\", !content && \"h-full\", className)}>\n      <iframe\n        ref={frameRef}\n        aria-label={title}\n        sandbox=\"allow-scripts\"\n        referrerPolicy=\"no-referrer\"\n        allow=\"\"\n        className={cn(\"border-0 bg-transparent\", content ? \"block\" : \"h-full\", widthClass)}\n        style={{\n          ...FRAME_ELEMENT_STYLE,\n          ...(viewportWidth === undefined ? null : { width: viewportWidth }),\n          ...(content ? { height: contentHeight } : null),\n        }}\n      />\n    </div>\n  );\n}\n"],"names":["FRAME_ELEMENT_STYLE","CONTENT_INITIAL_HEIGHT","documentCounter","nextDocumentId","followsOwnViewport","message","lastViewport","currentHeight","MIRRORED_ATTRIBUTES","APPEARANCE_ATTRIBUTES","name","SandboxedFrame","html","title","fit","viewportWidth","onReady","onError","className","frameRef","useRef","boxRef","callbacks","fitRef","contentHeight","setContentHeight","useState","contentHeightRef","lastViewportRef","docIdRef","blankLoadedRef","srcdocRef","prepared","useMemo","id","prepareDesignDocument","readAppearance","srcdoc","postAppearance","target","DESIGN_FRAME_APPEARANCE","useLayoutEffect","frame","onMessage","event","parseInboundMessage","DESIGN_FRAME_READY","DESIGN_FRAME_ERROR","DESIGN_FRAME_ERROR_MAX_LENGTH","DESIGN_FRAME_HEIGHT","follows","onLoad","observer","contentMode","scaleToWidth","box","setBox","el","measure","scale","jsx","cn","content","widthClass"],"mappings":";;;;;AA4DA,MAAMA,IAAsB,EAAE,aAAa,SAAA,GASrCC,IAAyB;AAM/B,IAAIC,IAAkB;AACtB,MAAMC,IAAiB,MAAM,OAAO,EAAED,CAAe;AAW9C,SAASE,EACdC,GACAC,GACAC,GACS;AACT,SAAOD,MAAiB,QAAQD,EAAQ,aAAaC,KAAgBD,EAAQ,WAAWE;AAC1F;AAwBA,MAAMC,KAAsB,OAAO,OAAOC,CAAqB,EAAE,IAAI,CAACC,MAAS,QAAQA,CAAI,EAAE;AAItF,SAASC,GAAe;AAAA,EAC7B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAwB;AAGtB,QAAMC,IAAWC,EAA0B,IAAI,GACzCC,IAASD,EAAuB,IAAI,GACpCE,IAAYF,EAAO,EAAE,SAAAJ,GAAS,SAAAC,GAAS;AAC7C,EAAAK,EAAU,UAAU,EAAE,SAAAN,GAAS,SAAAC,EAAA;AAE/B,QAAMM,IAASH,EAAON,CAAG;AACzB,EAAAS,EAAO,UAAUT;AACjB,QAAM,CAACU,GAAeC,CAAgB,IAAIC,EAASzB,CAAsB,GACnE0B,IAAmBP,EAAOnB,CAAsB,GAChD2B,IAAkBR,EAAsB,IAAI,GAC5CS,IAAWT,EAAsB,IAAI,GAErCU,IAAiBV,EAAO,EAAK,GAC7BW,IAAYX,EAAO,EAAE,GAMrBY,IAAWC,EAAQ,MAAM;AAC7B,UAAMC,IAAK/B,EAAA;AACX,WAAO,EAAE,IAAA+B,GAAI,QAAQC,EAAsBvB,GAAMwB,EAAe,SAAS,eAAe,GAAGF,CAAE,EAAA;AAAA,EAC/F,GAAG,CAACtB,CAAI,CAAC,GACH,EAAE,QAAAyB,MAAWL;AACnB,EAAAD,EAAU,UAAUM;AAEpB,QAAMC,IAAiB,MAAM;AAC3B,UAAMC,IAASpB,EAAS,SAAS;AACjC,QAAI,CAACoB,EAAQ;AACb,UAAMlC,IAAwC;AAAA,MAC5C,MAAMmC;AAAA,MACN,GAAGJ,EAAe,SAAS,eAAe;AAAA,IAAA;AAE5C,IAAAG,EAAO,YAAYlC,GAAS,GAAG;AAAA,EACjC;AAMA,EAAAoC,EAAgB,MAAM;AACpB,UAAMC,IAAQvB,EAAS;AACvB,QAAI,CAACuB,EAAO;AAEZ,UAAMC,IAAY,CAACC,MAAwB;AACzC,UAAIA,EAAM,WAAWF,EAAM,cAAe;AAC1C,YAAMrC,IAAUwC,EAAoBD,EAAM,IAAI;AAC9C,UAAKvC;AACL,YAAIA,EAAQ,SAASyC;AAEnB,UAAAR,EAAA,GACAhB,EAAU,QAAQ,UAAA;AAAA,iBACTjB,EAAQ,SAAS0C;AAC1B,UAAAzB,EAAU,QAAQ,UAAUjB,EAAQ,QAAQ,MAAM,GAAG2C,CAA6B,CAAC;AAAA,iBAC1E3C,EAAQ,SAAS4C,GAAqB;AAM/C,cADI5C,EAAQ,QAAQwB,EAAS,WACzBN,EAAO,YAAY,UAAW;AAGlC,gBAAM2B,IAAU9C,EAAmBC,GAASuB,EAAgB,SAASD,EAAiB,OAAO;AAE7F,cADAC,EAAgB,UAAUvB,EAAQ,UAC9B6C,EAAS;AACb,UAAAvB,EAAiB,UAAUtB,EAAQ,QACnCoB,EAAiBpB,EAAQ,MAAM;AAAA,QACjC;AAAA;AAAA,IACF;AAOA,IAAAyB,EAAe,UAAU;AACzB,UAAMqB,IAAS,MAAM;AACnB,UAAI,CAACrB,EAAe,SAAS;AAC3B,QAAAA,EAAe,UAAU,IACzBY,EAAM,gBAAgB,KAAK,GAC3BA,EAAM,SAASX,EAAU;AACzB;AAAA,MACF;AACA,MAAAO,EAAA;AAAA,IACF;AACA,WAAO,iBAAiB,WAAWK,CAAS,GAC5CD,EAAM,iBAAiB,QAAQS,CAAM,GACrCT,EAAM,MAAM;AAEZ,UAAMU,IAAW,IAAI,iBAAiBd,CAAc;AACpD,WAAAc,EAAS,QAAQ,SAAS,iBAAiB,EAAE,YAAY,IAAM,iBAAiB5C,IAAqB,GAE9F,MAAM;AACX,aAAO,oBAAoB,WAAWmC,CAAS,GAC/CD,EAAM,oBAAoB,QAAQS,CAAM,GACxCC,EAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAA,CAAE,GAGLX,EAAgB,MAAM;AAEpB,IAAItB,EAAS,WAAWW,EAAe,YAASX,EAAS,QAAQ,SAASkB,IAG1ER,EAAS,UAAUG,EAAS,IAC5BJ,EAAgB,UAAU;AAAA,EAC5B,GAAG,CAACI,CAAQ,CAAC;AAIb,QAAMqB,IAAcvC,MAAQ;AAC5B,EAAA2B,EAAgB,MAAM;AACpB,IAAIY,QAA6B,UAAU;AAAA,EAC7C,GAAG,CAACA,CAAW,CAAC;AAEhB,QAAMC,IAAe,OAAOxC,KAAQ,WAAWA,EAAI,eAAe,MAC5D,CAACyC,GAAKC,CAAM,IAAI9B,EAAyB,IAAI;AAYnD,MAXAe,EAAgB,MAAM;AACpB,QAAIa,MAAiB,KAAM;AAC3B,UAAMG,IAAKpC,EAAO;AAClB,QAAI,CAACoC,EAAI;AACT,UAAMC,IAAU,MAAMF,EAAO,EAAE,OAAOC,EAAG,aAAa,QAAQA,EAAG,cAAc;AAC/E,IAAAC,EAAA;AACA,UAAMN,IAAW,IAAI,eAAeM,CAAO;AAC3C,WAAAN,EAAS,QAAQK,CAAE,GACZ,MAAML,EAAS,WAAA;AAAA,EACxB,GAAG,CAACE,CAAY,CAAC,GAEbA,MAAiB,MAAM;AACzB,UAAMK,IAAQJ,KAAOA,EAAI,QAAQ,IAAIA,EAAI,QAAQD,IAAe;AAChE,WACE,gBAAAM,EAAC,SAAI,KAAKvC,GAAQ,WAAWwC,EAAG,sCAAsC3C,CAAS,GAC7E,UAAA,gBAAA0C;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKzC;AAAA,QACL,cAAYN;AAAA,QACZ,SAAQ;AAAA,QACR,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,UAAU;AAAA,QACV,WAAU;AAAA,QACV,OAAO;AAAA,UACL,GAAGb;AAAA,UACH,OAAOsD;AAAA,UACP,QAAQC,KAAOI,IAAQJ,EAAI,SAASI,IAAQ;AAAA,UAC5C,WAAWA,IAAQ,SAASA,CAAK,MAAM;AAAA,UACvC,iBAAiB;AAAA,UACjB,eAAe;AAAA,UACf,YAAYA,IAAQ,SAAY;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA,GAEJ;AAAA,EAEJ;AAEA,QAAMG,IAAUT,GAGVU,IACJhD,MAAkB,SACd,WACA+C,IACE,uBACA;AACR,SACE,gBAAAF,EAAC,OAAA,EAAI,KAAKvC,GAAQ,WAAWwC,EAAG,mBAAmB,CAACC,KAAW,UAAU5C,CAAS,GAChF,UAAA,gBAAA0C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKzC;AAAA,MACL,cAAYN;AAAA,MACZ,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,OAAM;AAAA,MACN,WAAWgD,EAAG,2BAA2BC,IAAU,UAAU,UAAUC,CAAU;AAAA,MACjF,OAAO;AAAA,QACL,GAAG/D;AAAA,QACH,GAAIe,MAAkB,SAAY,OAAO,EAAE,OAAOA,EAAA;AAAA,QAClD,GAAI+C,IAAU,EAAE,QAAQtC,MAAkB;AAAA,MAAA;AAAA,IAC5C;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/SearchInput.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useRef as a } from "react";
+import { Icon as c } from "./Icon.js";
+import { IconButton as u } from "./IconButton.js";
+import { Input as p } from "./Input.js";
+import { useUiStrings as f } from "../lib/i18n/provider.js";
+function y({ value: o, onValueChange: i, ref: r, ...e }) {
+  const m = f().searchInput, s = a(null);
+  return /* @__PURE__ */ n(
+    p,
+    {
+      ...e,
+      ref: (t) => {
+        s.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+      },
+      type: "search",
+      value: o,
+      onChange: (t) => i(t.target.value),
+      leading: /* @__PURE__ */ n(c, { name: "search", size: "sm" }),
+      trailing: o === "" ? void 0 : /* @__PURE__ */ n(
+        u,
+        {
+          icon: /* @__PURE__ */ n(c, { name: "x", size: "sm" }),
+          label: m.clear,
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            i(""), s.current?.focus();
+          }
+        }
+      )
+    }
+  );
+}
+export {
+  y as SearchInput
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../src/components/SearchInput.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input, type InputProps } from \"./Input\";\n\n/* ----------------------------------------------------------------------------\n   SEARCH INPUT (DX-5567)\n\n   A keyword search box: the search icon at the leading edge and, only while the\n   box holds text, a clear (x) button at the trailing edge. Clearing empties the\n   value and puts focus back in the box so the next word can be typed at once.\n\n   CONTROLLED, WITH THE VALUE ITSELF. `onValueChange` gets the string (typing and\n   clearing alike), so a host never reads `event.target.value` and clearing is the\n   same call as typing an empty box. The field is `type=\"search\"`; `dx-field`\n   (Input) suppresses the browser's own clear glyph so only this one shows.\n   ---------------------------------------------------------------------------- */\n\nexport interface SearchInputProps extends Omit<InputProps, \"type\" | \"leading\" | \"trailing\" | \"value\" | \"defaultValue\" | \"onChange\"> {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nexport function SearchInput({ value, onValueChange, ref, ...props }: SearchInputProps) {\n  const strings = useUiStrings().searchInput;\n  const own = useRef<HTMLInputElement | null>(null);\n  const attach = (node: HTMLInputElement | null) => {\n    own.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  };\n\n  return (\n    <Input\n      {...props}\n      ref={attach}\n      type=\"search\"\n      value={value}\n      onChange={(event) => onValueChange(event.target.value)}\n      leading={<Icon name=\"search\" size=\"sm\" />}\n      trailing={\n        value === \"\" ? undefined : (\n          <IconButton\n            icon={<Icon name=\"x\" size=\"sm\" />}\n            label={strings.clear}\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => {\n              onValueChange(\"\");\n              own.current?.focus();\n            }}\n          />\n        )\n      }\n    />\n  );\n}\n"],"names":["SearchInput","value","onValueChange","ref","props","strings","useUiStrings","own","useRef","jsx","Input","node","event","Icon","IconButton"],"mappings":";;;;;;AAwBO,SAASA,EAAY,EAAE,OAAAC,GAAO,eAAAC,GAAe,KAAAC,GAAK,GAAGC,KAA2B;AACrF,QAAMC,IAAUC,IAAe,aACzBC,IAAMC,EAAgC,IAAI;AAOhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,KATW,CAACO,MAAkC;AAChD,QAAAJ,EAAI,UAAUI,GACV,OAAOR,KAAQ,aAAYA,EAAIQ,CAAI,IAC9BR,QAAS,UAAUQ;AAAA,MAC9B;AAAA,MAMI,MAAK;AAAA,MACL,OAAAV;AAAA,MACA,UAAU,CAACW,MAAUV,EAAcU,EAAM,OAAO,KAAK;AAAA,MACrD,SAAS,gBAAAH,EAACI,GAAA,EAAK,MAAK,UAAS,MAAK,MAAK;AAAA,MACvC,UACEZ,MAAU,KAAK,SACb,gBAAAQ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAM,gBAAAL,EAACI,GAAA,EAAK,MAAK,KAAI,MAAK,MAAK;AAAA,UAC/B,OAAOR,EAAQ;AAAA,UACf,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM;AACb,YAAAH,EAAc,EAAE,GAChBK,EAAI,SAAS,MAAA;AAAA,UACf;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAKV;"}

package/dist/components/SecretField.js

@@ -0,0 +1,228 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { useId as R, useState as $ } from "react";
+import { tv as te } from "tailwind-variants";
+import { dateFormat as ne } from "../lib/intl-cache.js";
+import { AlertDialog as re } from "./Dialog.js";
+import { cn as ie } from "../lib/cn.js";
+import { Badge as ae } from "./Badge.js";
+import { Button as k } from "./Button.js";
+import { Field as se } from "./Field.js";
+import { Icon as m } from "./Icon.js";
+import { IconButton as oe } from "./IconButton.js";
+import { Input as ce } from "./Input.js";
+import { useUiStrings as le, useUiLocale as de } from "../lib/i18n/provider.js";
+const A = "••••••••", me = {
+  verified: { tone: "success", icon: "circle-check" },
+  failed: { tone: "danger", icon: "circle-x" },
+  unverifiable: { tone: "neutral", icon: "circle-help" },
+  unchecked: { tone: "neutral", icon: "circle-dashed" },
+  checking: { tone: "neutral", icon: "loader-circle" }
+}, fe = te({
+  slots: {
+    root: "flex w-full min-w-0 flex-col gap-2",
+    group: "flex w-full min-w-0 flex-col gap-1.5",
+    groupLabel: "select-none font-sans text-xs font-medium text-secondary",
+    description: "text-2xs text-tertiary text-balance",
+    error: "flex items-start gap-1.5 text-2xs font-medium text-danger-text",
+    record: "flex min-w-0 flex-col gap-2.5 rounded-md border bg-surface p-3",
+    top: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-2",
+    masked: "min-w-0 font-mono text-sm text-primary [overflow-wrap:anywhere]",
+    status: "flex min-w-0 max-w-full flex-col items-start gap-1",
+    statusReason: "text-xs text-danger-text [overflow-wrap:anywhere]",
+    statusNote: "text-xs text-secondary [overflow-wrap:anywhere]",
+    meta: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-secondary",
+    footer: "flex flex-wrap items-center gap-2 border-t border-border-subtle pt-2",
+    pendingBanner: [
+      "flex items-center gap-2 rounded-md border border-warning-border bg-warning-subtle",
+      "px-2.5 py-1.5 text-2xs font-medium text-warning-text"
+    ]
+  },
+  variants: {
+    /* A status that carries a sentence (the provider's reason, the caller's words) takes its own line under the mask so the sentence
+       wraps at the card's width instead of squeezing the masked value. */
+    wide: { true: { status: "w-full" }, false: {} },
+    failed: {
+      true: { record: "border-danger-border" },
+      false: { record: "border-border" }
+    }
+  },
+  defaultVariants: { failed: !1, wide: !1 }
+});
+function Fe({
+  value: r,
+  onChange: a,
+  configured: l,
+  hint: s,
+  status: L,
+  onVerify: w,
+  clear: j = "staged",
+  updatedAt: E,
+  updatedBy: W,
+  revealable: v = !0,
+  clearConfirmLabel: M,
+  label: b,
+  description: f,
+  error: x,
+  required: y,
+  disabled: c,
+  name: N,
+  placeholder: V,
+  size: K,
+  className: C,
+  ref: P
+}) {
+  const i = fe(), t = le().secretField, S = de(), z = R(), I = R(), [h, F] = $(!1), [_, T] = $(!1), g = j === "staged", G = g && r.kind === "cleared", H = l && r.kind !== "set" && !G, J = r.kind === "set" ? r.value : "", U = v && r.kind === "set", Q = s ? `${s.prefix}${A}${s.suffix}` : A, X = (g ? t.clearDescription : t.clearNowDescription)(s ? `${s.prefix}…${s.suffix}` : null);
+  function Y(n) {
+    const d = n.target.value;
+    a(d === "" ? { kind: l ? "cleared" : "unchanged" } : { kind: "set", value: d });
+  }
+  function Z() {
+    a({ kind: "cleared" }), F(!1), T(!1);
+  }
+  const q = /* @__PURE__ */ e(
+    re,
+    {
+      open: _,
+      onOpenChange: T,
+      trigger: /* @__PURE__ */ e(k, { variant: "outline-danger", size: "sm", disabled: c, leadingIcon: /* @__PURE__ */ e(m, { name: "trash-2", size: "xs" }), children: t.clearStored }),
+      destructive: !0,
+      title: t.clearTitle,
+      description: X,
+      confirmLabel: M ?? t.clearConfirm,
+      onConfirm: Z
+    }
+  );
+  if (H) {
+    const n = L ?? { kind: "unchecked" };
+    ue(n);
+    const d = me[n.kind], u = n.kind === "checking", D = n.kind === "verified" || n.kind === "failed" ? n.checkedAt : void 0, O = [
+      pe(E, W, S, t.updated),
+      D ? t.checked(B(D, S)) : null
+    ].filter((p) => p !== null), ee = {
+      verified: t.statusVerified,
+      failed: t.statusFailed,
+      unverifiable: t.statusUnverifiable,
+      unchecked: t.statusUnchecked,
+      checking: t.statusChecking
+    }[n.kind];
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": z,
+        "aria-describedby": f ? I : void 0,
+        className: ie(i.group(), C),
+        children: [
+          /* @__PURE__ */ e("span", { id: z, className: i.groupLabel(), children: b }),
+          f && /* @__PURE__ */ e("span", { id: I, className: i.description(), children: f }),
+          /* @__PURE__ */ o("div", { className: i.record({ failed: n.kind === "failed" }), children: [
+            /* @__PURE__ */ o("div", { className: i.top(), children: [
+              /* @__PURE__ */ e("span", { className: i.masked(), children: Q }),
+              /* @__PURE__ */ o("div", { role: "status", "data-status": n.kind, className: i.status({ wide: n.kind === "failed" || n.kind === "unverifiable" }), children: [
+                /* @__PURE__ */ e(ae, { tone: d.tone, size: "md", icon: /* @__PURE__ */ e(m, { name: d.icon, size: "xs", className: u ? "animate-spin" : void 0 }), children: ee }),
+                n.kind === "failed" && /* @__PURE__ */ e("span", { className: i.statusReason(), children: n.reason }),
+                n.kind === "unverifiable" && /* @__PURE__ */ e("span", { className: i.statusNote(), children: n.message })
+              ] })
+            ] }),
+            O.length > 0 && /* @__PURE__ */ e("div", { className: i.meta(), children: O.map((p) => /* @__PURE__ */ e("span", { children: p }, p)) }),
+            /* @__PURE__ */ o("div", { className: i.footer(), children: [
+              w && n.kind !== "unverifiable" && /* @__PURE__ */ e(
+                k,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  disabled: c || u,
+                  leadingIcon: /* @__PURE__ */ e(m, { name: u ? "loader-circle" : "refresh-cw", size: "xs", className: u ? "animate-spin" : void 0 }),
+                  onClick: w,
+                  children: t.reverify
+                }
+              ),
+              q
+            ] })
+          ] }),
+          x && /* @__PURE__ */ e("p", { role: "alert", className: i.error(), children: x })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ e(se, { label: b, description: f, error: x, required: y, disabled: c, name: N, className: C, children: /* @__PURE__ */ o("div", { className: i.root(), children: [
+    /* @__PURE__ */ e(
+      ce,
+      {
+        ref: P,
+        type: U && h ? "text" : "password",
+        value: J,
+        onChange: Y,
+        placeholder: V ?? t.notSet,
+        disabled: c,
+        required: y,
+        name: N,
+        size: K,
+        autoComplete: "new-password",
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        spellCheck: !1,
+        trailing: (
+          /* `revealable ? … : undefined` decides whether the slot EXISTS at
+                         all, once, for the component's lifetime — but whether the icon
+                         inside it is a real button `canReveal` decides on every render,
+                         and that half is deliberately NOT expressed as `trailing =
+                         canReveal ? <IconButton/> : undefined`.
+          
+                         `Input.tsx` derives `hasTrailing = Boolean(trailingContent)` and
+                         branches its OWN returned root on it — a bare `<input>` when
+                         false, a wrapping `<div>` when true. Flipping that boolean
+                         therefore changes the element type at the position `Input`
+                         occupies in its parent's tree, and React's reconciler unmounts
+                         and remounts everything at a position whose type changed — the
+                         real `<input>` DOM node included. `canReveal` flips on the FIRST
+                         keystroke that turns `unchanged` into `set`, which is exactly
+                         when the operator is mid-type: a naive `canReveal ? …
+                         : undefined` here was measured to destroy and recreate the input
+                         on that keystroke, dropping focus and the caret out from under
+                         the operator's own typing. (Caught by this component's own
+                         test suite going red on exactly that keystroke, not by
+                         inspection.)
+          
+                         Keeping the slot itself always truthy when `revealable` is on —
+                         a real icon button, or an equally-truthy empty placeholder —
+                         keeps `hasTrailing` CONSTANT across every render this component
+                         produces, so only the icon inside the slot mounts and unmounts,
+                         never the input that owns focus. */
+          v ? U ? /* @__PURE__ */ e(
+            oe,
+            {
+              icon: /* @__PURE__ */ e(m, { name: h ? "eye-off" : "eye", size: "sm" }),
+              label: h ? t.hideTyped : t.showTyped,
+              variant: "ghost",
+              size: "sm",
+              disabledReason: c ? t.disabled : void 0,
+              onClick: () => F((n) => !n)
+            }
+          ) : /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-4" }) : void 0
+        )
+      }
+    ),
+    g && l && /* @__PURE__ */ o("div", { className: i.pendingBanner(), children: [
+      /* @__PURE__ */ e(m, { name: "triangle-alert", size: "xs" }),
+      /* @__PURE__ */ e("span", { className: "flex-1", children: r.kind === "set" ? t.replacedOnSave : t.removedOnSave }),
+      /* @__PURE__ */ e(k, { variant: "link", size: "xs", disabled: c, onClick: () => a({ kind: "unchanged" }), children: t.undo })
+    ] })
+  ] }) });
+}
+function ue(r) {
+  if (r.kind === "failed" && r.reason.trim() === "")
+    throw new Error("SecretField: status.reason must be the provider's reason for the failure, not an empty string");
+  if (r.kind === "unverifiable" && r.message.trim() === "")
+    throw new Error("SecretField: status.message must say why the secret cannot be tested, not an empty string");
+}
+function B(r, a) {
+  return ne(a, { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }).format(new Date(r));
+}
+function pe(r, a, l, s) {
+  return !r && !a ? null : s(r ? B(r, l) : null, a);
+}
+export {
+  Fe as SecretField
+};
+//# sourceMappingURL=SecretField.js.map

package/dist/components/SecretField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecretField.js","sources":["../../src/components/SecretField.tsx"],"sourcesContent":["import type { ChangeEvent, Ref } from \"react\";\nimport { useId, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { dateFormat } from \"../lib/intl-cache\";\nimport { AlertDialog } from \"./Dialog\";\nimport { cn } from \"../lib/cn\";\nimport { Badge } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { Field, type FieldProps } from \"./Field\";\nimport { Icon } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Input, type InputProps } from \"./Input\";\n\n/* ============================================================================\n   SECRET FIELD\n\n   A STORED SECRET HAS THREE STATES, NOT TWO — AND THE TYPE IS WHAT ENFORCES IT.\n\n   Every hand-rolled version of this control in the consuming app modelled its\n   pending edit as a plain `string`, and every one of them carried the same\n   latent bug: an operator opens a settings panel, sees a masked field (because\n   a key IS configured), makes an unrelated change elsewhere on the form, and\n   submits. If \"the field is empty\" and \"the operator asked to remove the key\"\n   are the same value, that submit just deleted a working credential that\n   nobody touched — because a masked field can never render the real secret,\n   so its starting text is ALWAYS empty, and empty-string is indistinguishable\n   from empty-on-purpose.\n\n   The fix is not a smarter default. It is removing the ability to express the\n   ambiguous case at all:\n\n     type SecretValue =\n       | { kind: \"unchanged\" }        // no edit — keep whatever is stored\n       | { kind: \"set\"; value: string } // operator typed a new value\n       | { kind: \"cleared\" };          // operator explicitly asked to remove it\n\n   A consumer's save handler is forced to switch on `kind` — there is no branch\n   where \"the text box reads empty\" and \"please delete this\" resolve to the\n   same code path, because they are not the same VALUE. This is the same\n   argument `Field`'s doc comment makes for delegating label association to\n   Base UI rather than a convention every caller has to remember: a class of\n   bug is not fixed by writing the correct code once, it is fixed by making the\n   incorrect code impossible to write.\n\n   Three consequences fall out of that model:\n\n   1. TYPING THEN DELETING BACK TO EMPTY RETURNS TO `unchanged`, NEVER\n      `cleared`. Backspacing to nothing is \"I changed my mind\", not \"delete\n      this credential\" — those are different operator intents that happen to\n      look identical in an empty text box, so the component reads them apart\n      at the one point it still can (the keystroke that produced the empty\n      string) rather than asking a save handler to guess later.\n\n   2. `cleared` IS REACHABLE ONLY THROUGH A NAMED, CONFIRMED ACTION — never a\n      side effect of the text control. See the confirmation gate below.\n\n   3. THE COMPONENT NEVER HOLDS THE STORED SECRET. `configured` says \"one\n      exists\"; `hint` optionally says \"and it looks like this\" (a prefix/suffix\n      the consumer's own API already returns); neither is the value. Revealing\n      TYPED text is offered because the operator already knows what they just\n      typed and may want to proof it before submitting — revealing the STORED\n      text is not offered because this component was never given it to reveal.\n\n   A STORED SECRET IS SHOWN, NEVER AN INPUT (DX-4985, the operator's rule).\n\n   The version above still drew the password box over a stored value, with a\n   dotted placeholder, and the operator's reading of it was: it invites pasting\n   over a working credential and says nothing about whether that credential\n   works. So the component now has two faces:\n\n     STORED   (`configured`, and not cleared): NO input element at all. The\n              masked value with its first and last characters (`hint`), a\n              status from a real test of the secret, who saved it and when, a\n              Re-verify button and Clear. Replacing is Clear, then paste.\n     ENTRY    (nothing stored, or Cleared): the input, plus — after a staged\n              Clear — a banner with Undo.\n\n   THE STATUS IS THE CALLER'S, NEVER INFERRED. `status` is a server result:\n   verified, failed (with the provider's reason), unverifiable (nothing can\n   test this secret; the caller says why), unchecked, or checking. A filled\n   value is not a verified one, so an absent `status` reads \"Not checked\", and\n   only `{ kind: \"verified\" }` can ever print \"Verified\" or draw green.\n\n   TWO SAVE MODELS, ONE VALUE TYPE. `clear=\"staged\"` (default) is a field in a\n   batch-save form: Clear only reports `cleared`, the form's Save removes it,\n   and Undo is offered until then. `clear=\"immediate\"` is a row that acts by\n   itself: confirming Clear reports `cleared` and the caller deletes at once;\n   the row stays in its stored face until the caller reports `configured`\n   false (so the caller's `disabled` covers the request), and the dialog says\n   \"removed now\", not \"once you save\".\n\n   One edit rule changed with this: emptying the box after a Clear returns to\n   `cleared` (the operator already confirmed the removal), not to\n   `unchanged`, which would bring the stored face back and silently undo it.\n   With nothing stored, emptying the box is still `unchanged`.\n   ========================================================================= */\n\n\n\nexport type SecretValue = { kind: \"unchanged\" } | { kind: \"set\"; value: string } | { kind: \"cleared\" };\n\n/**\n * The result of testing the stored secret, supplied by the caller from a server answer. Never inferred\n * from the value being filled: only `verified` is green.\n */\nexport type SecretStatus =\n  /** The provider accepted it. `checkedAt` is when. */\n  | { kind: \"verified\"; checkedAt?: string | Date }\n  /** The provider refused it or could not be reached; `reason` is its words, printed as text. Never empty. */\n  | { kind: \"failed\"; reason: string; checkedAt?: string | Date }\n  /** Nothing can test this secret (an OAuth client secret); `message` is the caller's words saying so. Never empty. */\n  | { kind: \"unverifiable\"; message: string }\n  /** Never tested. What an absent `status` reads as. */\n  | { kind: \"unchecked\" }\n  /** A test is running. */\n  | { kind: \"checking\" };\n\n/** How Clear acts: `staged` waits for the surrounding form's Save; `immediate` is a row the caller deletes at once. */\nexport type SecretClearMode = \"staged\" | \"immediate\";\n\n/** A fixed run of dots between the visible ends, so the mask never reveals the secret's length. */\nconst MASK = \"••••••••\";\n\nconst STATUS_VIEW = {\n  verified: { tone: \"success\", icon: \"circle-check\" },\n  failed: { tone: \"danger\", icon: \"circle-x\" },\n  unverifiable: { tone: \"neutral\", icon: \"circle-help\" },\n  unchecked: { tone: \"neutral\", icon: \"circle-dashed\" },\n  checking: { tone: \"neutral\", icon: \"loader-circle\" },\n} as const;\n\nconst secretField = tv({\n  slots: {\n    root: \"flex w-full min-w-0 flex-col gap-2\",\n    group: \"flex w-full min-w-0 flex-col gap-1.5\",\n    groupLabel: \"select-none font-sans text-xs font-medium text-secondary\",\n    description: \"text-2xs text-tertiary text-balance\",\n    error: \"flex items-start gap-1.5 text-2xs font-medium text-danger-text\",\n    record: \"flex min-w-0 flex-col gap-2.5 rounded-md border bg-surface p-3\",\n    top: \"flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-2\",\n    masked: \"min-w-0 font-mono text-sm text-primary [overflow-wrap:anywhere]\",\n    status: \"flex min-w-0 max-w-full flex-col items-start gap-1\",\n    statusReason: \"text-xs text-danger-text [overflow-wrap:anywhere]\",\n    statusNote: \"text-xs text-secondary [overflow-wrap:anywhere]\",\n    meta: \"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-secondary\",\n    footer: \"flex flex-wrap items-center gap-2 border-t border-border-subtle pt-2\",\n    pendingBanner: [\n      \"flex items-center gap-2 rounded-md border border-warning-border bg-warning-subtle\",\n      \"px-2.5 py-1.5 text-2xs font-medium text-warning-text\",\n    ],\n  },\n  variants: {\n    /* A status that carries a sentence (the provider's reason, the caller's words) takes its own line under the mask so the sentence\n       wraps at the card's width instead of squeezing the masked value. */\n    wide: { true: { status: \"w-full\" }, false: {} },\n    failed: {\n      true: { record: \"border-danger-border\" },\n      false: { record: \"border-border\" },\n    },\n  },\n  defaultVariants: { failed: false, wide: false },\n});\n\nexport interface SecretFieldProps\n  extends Pick<FieldProps, \"label\" | \"description\" | \"error\" | \"required\" | \"disabled\" | \"name\" | \"className\">,\n    Pick<InputProps, \"size\" | \"placeholder\"> {\n  /** The pending edit. See the module doc comment for why this is not a `string`. */\n  value: SecretValue;\n  onChange: (value: SecretValue) => void;\n  /**\n   * Whether a secret is CURRENTLY stored server-side, independent of `value`.\n   * While one is (and it is not marked cleared) the component draws the stored\n   * face and NO input; Clear is offered only then.\n   */\n  configured: boolean;\n  /**\n   * A partial, already-safe rendering of the stored value — e.g. `{ prefix:\n   * \"sk-ab\", suffix: \"9f4c\" }` for a key the consuming app's own API already\n   * truncates before it ever reaches the client. This is NOT the secret; it\n   * is a frame of reference (\"is this the key I think it is?\"). Absent, the\n   * stored face shows dots only.\n   */\n  hint?: { prefix: string; suffix: string };\n  /**\n   * The result of the last test of the stored secret, from the server. Absent\n   * reads \"Not checked\" — a value being filled is never \"Verified\".\n   */\n  status?: SecretStatus;\n  /**\n   * Tests the stored secret again. Absent, or `status` is `unverifiable`, the\n   * Re-verify button is not drawn. While `status` is `checking` it is busy.\n   */\n  onVerify?: () => void;\n  /** `staged` (default): Clear waits for the form's Save and offers Undo. `immediate`: a row that saves by itself. */\n  clear?: SecretClearMode;\n  /** When the stored value was last written, for the same frame of reference as `hint`. */\n  updatedAt?: string | Date;\n  /** Who wrote it, if the caller's system tracks that. */\n  updatedBy?: string;\n  /**\n   * Offers a show/hide toggle for text the operator just TYPED. Default true.\n   * Never offered for the stored value — see the module doc comment — and\n   * never rendered while there is no typed text to reveal.\n   */\n  revealable?: boolean;\n  /** Label on the destructive confirm button. Absent, the built-in \"Clear\" word of the active `UiLocaleProvider`. */\n  clearConfirmLabel?: string;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function SecretField({\n  value,\n  onChange,\n  configured,\n  hint,\n  status,\n  onVerify,\n  clear = \"staged\",\n  updatedAt,\n  updatedBy,\n  revealable = true,\n  clearConfirmLabel,\n  label,\n  description,\n  error,\n  required,\n  disabled,\n  name,\n  placeholder,\n  size,\n  className,\n  ref,\n}: SecretFieldProps) {\n  const s = secretField();\n  const strings = useUiStrings().secretField;\n  const locale = useUiLocale();\n  const labelId = useId();\n  const descriptionId = useId();\n  const [revealed, setRevealed] = useState(false);\n  const [confirmOpen, setConfirmOpen] = useState(false);\n\n  const staged = clear === \"staged\";\n  const pendingClear = staged && value.kind === \"cleared\";\n  /* DX-4985: a stored secret is never an input. The input exists only when nothing is stored, or once Clear has been\n     confirmed (staged) or a new value was typed after it. */\n  const showStored = configured && value.kind !== \"set\" && !pendingClear;\n  const typedText = value.kind === \"set\" ? value.value : \"\";\n  const canReveal = revealable && value.kind === \"set\";\n  const maskedText = hint ? `${hint.prefix}${MASK}${hint.suffix}` : MASK;\n  const clearDescription = (staged ? strings.clearDescription : strings.clearNowDescription)(hint ? `${hint.prefix}…${hint.suffix}` : null);\n\n  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {\n    const next = event.target.value;\n    /* Emptying the box is never a new intent. With nothing stored it is \"I changed my mind\" (`unchanged`). After a\n       confirmed Clear it is still the Clear (`cleared`): `unchanged` would bring the stored face back and undo the\n       operator's confirmed removal because they backspaced a replacement away. */\n    onChange(next === \"\" ? { kind: configured ? \"cleared\" : \"unchanged\" } : { kind: \"set\", value: next });\n  }\n\n  function handleConfirmClear() {\n    onChange({ kind: \"cleared\" });\n    setRevealed(false);\n    setConfirmOpen(false);\n  }\n\n  const clearAction = (\n    <AlertDialog\n      open={confirmOpen}\n      onOpenChange={setConfirmOpen}\n      trigger={\n        <Button variant=\"outline-danger\" size=\"sm\" disabled={disabled} leadingIcon={<Icon name=\"trash-2\" size=\"xs\" />}>\n          {strings.clearStored}\n        </Button>\n      }\n      destructive\n      title={strings.clearTitle}\n      description={clearDescription}\n      confirmLabel={clearConfirmLabel ?? strings.clearConfirm}\n      onConfirm={handleConfirmClear}\n    />\n  );\n\n  if (showStored) {\n    const current = status ?? { kind: \"unchecked\" as const };\n    assertStatusWords(current);\n    const view = STATUS_VIEW[current.kind];\n    const checking = current.kind === \"checking\";\n    const checkedAt = current.kind === \"verified\" || current.kind === \"failed\" ? current.checkedAt : undefined;\n    const metaParts = [\n      formatUpdatedMeta(updatedAt, updatedBy, locale, strings.updated),\n      checkedAt ? strings.checked(formatInstant(checkedAt, locale)) : null,\n    ].filter((part): part is string => part !== null);\n    const statusWord = {\n      verified: strings.statusVerified,\n      failed: strings.statusFailed,\n      unverifiable: strings.statusUnverifiable,\n      unchecked: strings.statusUnchecked,\n      checking: strings.statusChecking,\n    }[current.kind];\n\n    return (\n      <div\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description ? descriptionId : undefined}\n        className={cn(s.group(), className)}\n      >\n        <span id={labelId} className={s.groupLabel()}>\n          {label}\n        </span>\n        {description && (\n          <span id={descriptionId} className={s.description()}>\n            {description}\n          </span>\n        )}\n        <div className={s.record({ failed: current.kind === \"failed\" })}>\n          <div className={s.top()}>\n            <span className={s.masked()}>{maskedText}</span>\n            {/* A live region: the result of a Re-verify is announced, not only coloured. */}\n            <div role=\"status\" data-status={current.kind} className={s.status({ wide: current.kind === \"failed\" || current.kind === \"unverifiable\" })}>\n              <Badge tone={view.tone} size=\"md\" icon={<Icon name={view.icon} size=\"xs\" className={checking ? \"animate-spin\" : undefined} />}>\n                {statusWord}\n              </Badge>\n              {current.kind === \"failed\" && <span className={s.statusReason()}>{current.reason}</span>}\n              {current.kind === \"unverifiable\" && <span className={s.statusNote()}>{current.message}</span>}\n            </div>\n          </div>\n          {metaParts.length > 0 && (\n            <div className={s.meta()}>\n              {metaParts.map((part) => (\n                <span key={part}>{part}</span>\n              ))}\n            </div>\n          )}\n          <div className={s.footer()}>\n            {onVerify && current.kind !== \"unverifiable\" && (\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                disabled={disabled || checking}\n                leadingIcon={<Icon name={checking ? \"loader-circle\" : \"refresh-cw\"} size=\"xs\" className={checking ? \"animate-spin\" : undefined} />}\n                onClick={onVerify}\n              >\n                {strings.reverify}\n              </Button>\n            )}\n            {clearAction}\n          </div>\n        </div>\n        {error && (\n          <p role=\"alert\" className={s.error()}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <Field label={label} description={description} error={error} required={required} disabled={disabled} name={name} className={className}>\n      <div className={s.root()}>\n        <Input\n          ref={ref}\n          type={canReveal && revealed ? \"text\" : \"password\"}\n          value={typedText}\n          onChange={handleInputChange}\n          placeholder={placeholder ?? strings.notSet}\n          disabled={disabled}\n          required={required}\n          name={name}\n          size={size}\n          autoComplete=\"new-password\"\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          trailing={\n            /* `revealable ? … : undefined` decides whether the slot EXISTS at\n               all, once, for the component's lifetime — but whether the icon\n               inside it is a real button `canReveal` decides on every render,\n               and that half is deliberately NOT expressed as `trailing =\n               canReveal ? <IconButton/> : undefined`.\n\n               `Input.tsx` derives `hasTrailing = Boolean(trailingContent)` and\n               branches its OWN returned root on it — a bare `<input>` when\n               false, a wrapping `<div>` when true. Flipping that boolean\n               therefore changes the element type at the position `Input`\n               occupies in its parent's tree, and React's reconciler unmounts\n               and remounts everything at a position whose type changed — the\n               real `<input>` DOM node included. `canReveal` flips on the FIRST\n               keystroke that turns `unchanged` into `set`, which is exactly\n               when the operator is mid-type: a naive `canReveal ? …\n               : undefined` here was measured to destroy and recreate the input\n               on that keystroke, dropping focus and the caret out from under\n               the operator's own typing. (Caught by this component's own\n               test suite going red on exactly that keystroke, not by\n               inspection.)\n\n               Keeping the slot itself always truthy when `revealable` is on —\n               a real icon button, or an equally-truthy empty placeholder —\n               keeps `hasTrailing` CONSTANT across every render this component\n               produces, so only the icon inside the slot mounts and unmounts,\n               never the input that owns focus. */\n            revealable ? (\n              canReveal ? (\n                <IconButton\n                  icon={<Icon name={revealed ? \"eye-off\" : \"eye\"} size=\"sm\" />}\n                  label={revealed ? strings.hideTyped : strings.showTyped}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  /* `IconButton` has no boolean `disabled` — see its own doc\n                     comment — so the field's `disabled` is threaded through as\n                     a reason rather than dropped on the floor. */\n                  disabledReason={disabled ? strings.disabled : undefined}\n                  onClick={() => setRevealed((r) => !r)}\n                />\n              ) : (\n                <span aria-hidden className=\"size-4\" />\n              )\n            ) : undefined\n          }\n        />\n\n        {staged && configured && (\n          <div className={s.pendingBanner()}>\n            <Icon name=\"triangle-alert\" size=\"xs\" />\n            <span className=\"flex-1\">{value.kind === \"set\" ? strings.replacedOnSave : strings.removedOnSave}</span>\n            <Button variant=\"link\" size=\"xs\" disabled={disabled} onClick={() => onChange({ kind: \"unchanged\" })}>\n              {strings.undo}\n            </Button>\n          </div>\n        )}\n      </div>\n    </Field>\n  );\n}\n\n/** A failed or unverifiable status without its words would draw a state nobody can act on. */\nfunction assertStatusWords(status: SecretStatus): void {\n  if (status.kind === \"failed\" && status.reason.trim() === \"\") {\n    throw new Error(\"SecretField: status.reason must be the provider's reason for the failure, not an empty string\");\n  }\n  if (status.kind === \"unverifiable\" && status.message.trim() === \"\") {\n    throw new Error(\"SecretField: status.message must say why the secret cannot be tested, not an empty string\");\n  }\n}\n\n/**\n * A full date-and-time format of the active locale, not the calendar-safe local-y/m/d construction `DatePicker`\n * insists on — that rule exists to stop a parsed-as-UTC date from silently\n * shifting to the wrong CALENDAR DAY. This is a point-in-time instant (\"last\n * written at\"), not a calendar date being reasoned about, so the ambiguity\n * that rule guards against does not apply here.\n */\nfunction formatInstant(at: string | Date, locale: string): string {\n  return dateFormat(locale, { year: \"numeric\", month: \"numeric\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\" }).format(new Date(at));\n}\n\nfunction formatUpdatedMeta(\n  updatedAt: string | Date | undefined,\n  updatedBy: string | undefined,\n  locale: string,\n  updated: (when: string | null, by: string | undefined) => string,\n): string | null {\n  if (!updatedAt && !updatedBy) return null;\n  return updated(updatedAt ? formatInstant(updatedAt, locale) : null, updatedBy);\n}\n"],"names":["MASK","STATUS_VIEW","secretField","tv","SecretField","value","onChange","configured","hint","status","onVerify","clear","updatedAt","updatedBy","revealable","clearConfirmLabel","label","description","error","required","disabled","name","placeholder","size","className","ref","s","strings","useUiStrings","locale","useUiLocale","labelId","useId","descriptionId","revealed","setRevealed","useState","confirmOpen","setConfirmOpen","staged","pendingClear","showStored","typedText","canReveal","maskedText","clearDescription","handleInputChange","event","next","handleConfirmClear","clearAction","jsx","AlertDialog","Button","Icon","current","assertStatusWords","view","checking","checkedAt","metaParts","formatUpdatedMeta","formatInstant","part","statusWord","jsxs","cn","Badge","Field","Input","IconButton","r","at","dateFormat","updated"],"mappings":"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"}

package/dist/components/SectionNav.js

@@ -0,0 +1,42 @@
+import { jsxs as d, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { cn as m } from "../lib/cn.js";
+import { Button as g } from "./Button.js";
+import { Icon as s } from "./Icon.js";
+import { NavSections as c } from "./nav-sections.js";
+import { Popover as u } from "./Popover.js";
+function z({ sections: a, activeId: i, label: t, className: l }) {
+  const [f, o] = h(!1);
+  if (a.every((n) => n.items.length === 0)) return null;
+  const r = a.flatMap((n) => n.items).find((n) => n.id === i);
+  return /* @__PURE__ */ d(p, { children: [
+    /* @__PURE__ */ e("nav", { "aria-label": t, "data-section-nav": "list", className: m("hidden flex-col gap-4 lg:flex", l), children: /* @__PURE__ */ e(c, { sections: a, activeId: i }) }),
+    /* @__PURE__ */ e("nav", { "aria-label": t, "data-section-nav": "menu", className: m("min-w-0 lg:hidden", l), children: /* @__PURE__ */ e(
+      u,
+      {
+        open: f,
+        onOpenChange: o,
+        "aria-label": t,
+        align: "start",
+        width: "20rem",
+        className: "p-2",
+        trigger: /* @__PURE__ */ e(
+          g,
+          {
+            variant: "outline",
+            fullWidth: !0,
+            className: "justify-start [&>span]:w-full",
+            leadingIcon: r && /* @__PURE__ */ e(s, { name: r.icon, size: "sm" }),
+            trailingIcon: /* @__PURE__ */ e(s, { name: "chevron-down", size: "sm" }),
+            children: /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate text-left", children: r?.label ?? t })
+          }
+        ),
+        children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ e(c, { sections: a, activeId: i, onNavigate: () => o(!1) }) })
+      }
+    ) })
+  ] });
+}
+export {
+  z as SectionNav
+};
+//# sourceMappingURL=SectionNav.js.map

package/dist/components/SectionNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.js","sources":["../../src/components/SectionNav.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { NavSection } from \"./AppShell\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { NavSections } from \"./nav-sections\";\nimport { Popover } from \"./Popover\";\n\n/* ============================================================================\n   SECTION NAV — a page's OWN grouped sub-navigation. DX-4001.\n\n   `AppShell` owns the app's eight flat areas. A settings area, a docs\n   sidebar or an account page needs a second list inside the page, grouped by\n   scope, and `AppShell` cannot host it (its items have no children, and its\n   row renderer is private). This renders the same `NavSection[]` the shell\n   takes, through the SAME row piece (`nav-sections.tsx`), so a consumer's one\n   data model feeds both and the two cannot drift.\n\n   BOTH FORMS ARE IN THE HTML, CSS PICKS ONE BY BREAKPOINT (DX-5411). The form\n   used to be chosen in JS (`useBelow(\"lg\")`), whose server answer is \"wide\": a\n   prerendered page held the open list, and a phone swapped it for the dropdown\n   button on its first client render, so the text column jumped (a layout shift\n   of 0.751 on a live legal page). A server has no screen size, so the markup\n   carries both and `lg:` utilities show exactly one. The hidden one is\n   `display: none`, which removes it from the accessibility tree, so there is\n   still one nav landmark and one set of links at every width. Apps and tests\n   select a form by `data-section-nav=\"list\"` (wide) or `\"menu\"` (phone), never\n   by a Tailwind class.\n\n   BELOW `lg` IT IS ONE CONTROL, not a wall of links above the page. The list\n   opens in a `Popover` and its rows are the shared real `<a href>` links —\n   deliberately NOT `Menu`, whose items are `role=\"menuitem\"` divs: that drops\n   link semantics (hover URL, ctrl-click to a new tab, `aria-current`), which\n   is the whole reason this component exists next to a router.\n   ========================================================================= */\n\nexport interface SectionNavProps {\n  /** The AppShell data model, reused: a group `label` is optional per section. */\n  sections: NavSection[];\n  /** The `id` of the current item. Matches nothing → nothing is marked current. */\n  activeId?: string;\n  /**\n   * Names the `<nav>` landmark, the collapsed popup, and is the collapsed\n   * control's text while `activeId` matches no item. Make it say what the list\n   * is (\"Settings\"), not that it is a list.\n   */\n  label: string;\n  className?: string;\n}\n\nexport function SectionNav({ sections, activeId, label, className }: SectionNavProps) {\n  const [open, setOpen] = useState(false);\n\n  if (sections.every((s) => s.items.length === 0)) return null;\n\n  const active = sections.flatMap((s) => s.items).find((item) => item.id === activeId);\n\n  /* The landmark wraps the trigger and stays in the tree while the list is\n     shut, so it is still found by landmark navigation. The links themselves\n     render in the popover's portal, which is its own labelled dialog; a second\n     `nav` with the same name there would be a duplicate landmark (axe\n     `landmark-unique`) while open. */\n  return (\n    <>\n      <nav aria-label={label} data-section-nav=\"list\" className={cn(\"hidden flex-col gap-4 lg:flex\", className)}>\n        <NavSections sections={sections} activeId={activeId} />\n      </nav>\n      <nav aria-label={label} data-section-nav=\"menu\" className={cn(\"min-w-0 lg:hidden\", className)}>\n        <Popover\n          open={open}\n          onOpenChange={setOpen}\n          aria-label={label}\n          align=\"start\"\n          width=\"20rem\"\n          className=\"p-2\"\n          trigger={\n            <Button\n              variant=\"outline\"\n              fullWidth\n              /* The button's content wrapper is an inline-flex that shrinks to its\n                 content, which centres the label; stretching it is what lets the\n                 label take the room and push the chevron to the trailing edge, as\n                 a select does. */\n              className=\"justify-start [&>span]:w-full\"\n              leadingIcon={active && <Icon name={active.icon} size=\"sm\" />}\n              trailingIcon={<Icon name=\"chevron-down\" size=\"sm\" />}\n            >\n              <span className=\"min-w-0 flex-1 truncate text-left\">{active?.label ?? label}</span>\n            </Button>\n          }\n        >\n          <div className=\"flex flex-col gap-4\">\n            <NavSections sections={sections} activeId={activeId} onNavigate={() => setOpen(false)} />\n          </div>\n        </Popover>\n      </nav>\n    </>\n  );\n}\n"],"names":["SectionNav","sections","activeId","label","className","open","setOpen","useState","s","active","item","jsxs","Fragment","jsx","cn","NavSections","Popover","Button","Icon"],"mappings":";;;;;;;AAkDO,SAASA,EAAW,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,WAAAC,KAA8B;AACpF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK;AAEtC,MAAIN,EAAS,MAAM,CAACO,MAAMA,EAAE,MAAM,WAAW,CAAC,EAAG,QAAO;AAExD,QAAMC,IAASR,EAAS,QAAQ,CAACO,MAAMA,EAAE,KAAK,EAAE,KAAK,CAACE,MAASA,EAAK,OAAOR,CAAQ;AAOnF,SACE,gBAAAS,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,OAAA,EAAI,cAAYV,GAAO,oBAAiB,QAAO,WAAWW,EAAG,iCAAiCV,CAAS,GACtG,UAAA,gBAAAS,EAACE,GAAA,EAAY,UAAAd,GAAoB,UAAAC,GAAoB,GACvD;AAAA,IACA,gBAAAW,EAAC,OAAA,EAAI,cAAYV,GAAO,oBAAiB,QAAO,WAAWW,EAAG,qBAAqBV,CAAS,GAC1F,UAAA,gBAAAS;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAAX;AAAA,QACA,cAAcC;AAAA,QACd,cAAYH;AAAA,QACZ,OAAM;AAAA,QACN,OAAM;AAAA,QACN,WAAU;AAAA,QACV,SACE,gBAAAU;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAS;AAAA,YAKT,WAAU;AAAA,YACV,aAAaR,KAAU,gBAAAI,EAACK,GAAA,EAAK,MAAMT,EAAO,MAAM,MAAK,MAAK;AAAA,YAC1D,cAAc,gBAAAI,EAACK,GAAA,EAAK,MAAK,gBAAe,MAAK,MAAK;AAAA,YAElD,4BAAC,QAAA,EAAK,WAAU,qCAAqC,UAAAT,GAAQ,SAASN,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIhF,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA,EAACE,GAAA,EAAY,UAAAd,GAAoB,UAAAC,GAAoB,YAAY,MAAMI,EAAQ,EAAK,GAAG,EAAA,CACzF;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,GACF;AAEJ;"}