@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/InlineMarkdownEdit.js

@@ -0,0 +1,184 @@
+import { jsx as i, jsxs as p, Fragment as H } from "react/jsx-runtime";
+import { useRef as c, useEffect as E, useState as U, useId as q } from "react";
+import { cn as P } from "../lib/cn.js";
+import { Markdown as G } from "./Markdown.js";
+import { MarkdownEditor as J } from "./MarkdownEditor.js";
+import { Tooltip as Q } from "./Popover.js";
+import { ReadMore as V } from "./ReadMore.js";
+import { Spinner as X } from "./Spinner.js";
+import { assertActivationPair as Y } from "./edit/activation.js";
+import { OutcomeMessage as Z } from "./edit/outcome.js";
+import { useEditSession as _ } from "./edit/use-edit-session.js";
+import { useUiStrings as M } from "../lib/i18n/provider.js";
+import { chordLabel as $ } from "../lib/i18n/areas/keys.js";
+function ge(e) {
+  Y("InlineMarkdownEdit", e.editing, e.onEditingChange);
+  const { inlineEdit: a, keyNames: u } = M(), o = a.failure($("ctrl+enter", u)), { editing: t, onEditingChange: r } = e, l = e.readOnly !== void 0, d = c(null), s = _({
+    component: "InlineMarkdownEdit",
+    value: e.value,
+    onCommit: e.onCommit,
+    onError: e.onError,
+    failureMessage: e.failureMessage ?? o,
+    close: () => r(!1),
+    refocus: () => d.current?.focus(),
+    commitMode: e.commitMode,
+    reopen: () => r(!0)
+  });
+  return E(() => {
+    t && l && r(!1);
+  }, [t, l, r]), t && !l ? /* @__PURE__ */ i(ee, { ...e, session: s, editorRef: d }) : /* @__PURE__ */ i(O, { ...e });
+}
+function O({
+  value: e,
+  label: a,
+  placeholder: u,
+  collapsedLines: o,
+  restingFooter: t,
+  readOnly: r,
+  className: l
+}) {
+  const d = M().inlineMarkdownEdit, s = q(), f = e.length === 0 ? /* @__PURE__ */ i("p", { className: "text-sm text-tertiary", children: u ?? d.empty }) : /* @__PURE__ */ i(G, { children: e }), g = /* @__PURE__ */ p(H, { children: [
+    f,
+    t
+  ] }), w = e.length > 0 || t != null, v = /* @__PURE__ */ p(
+    "div",
+    {
+      role: "group",
+      "aria-label": a,
+      "aria-disabled": r !== void 0 || void 0,
+      "aria-describedby": r !== void 0 ? s : void 0,
+      "data-slot": "inline-markdown-edit",
+      className: P("min-w-0 rounded-lg border border-transparent", l),
+      children: [
+        o !== void 0 && w ? /* @__PURE__ */ i(V, { lines: o, children: g }) : g,
+        r !== void 0 && /* @__PURE__ */ i("span", { id: s, className: "sr-only", children: r.reason })
+      ]
+    }
+  );
+  return r === void 0 ? v : /* @__PURE__ */ i(Q, { content: r.reason, children: v });
+}
+function ee({
+  value: e,
+  onEditingChange: a,
+  label: u,
+  placeholder: o,
+  toolbar: t,
+  uploadImage: r,
+  uploadFile: l,
+  imageTypes: d,
+  isFileUrl: s,
+  onUploadStateChange: f,
+  initialDraft: g,
+  onDraftChange: w,
+  className: v,
+  session: m,
+  editorRef: R
+}) {
+  const k = M().inlineMarkdownEdit, [C] = U(() => m.restored()), y = C?.text ?? g ?? e, [W, j] = U(y), I = c(y), S = c(w);
+  S.current = w;
+  const D = c(0), { pending: h, refusal: A, blocked: b } = m, F = c(b);
+  F.current = b;
+  function N() {
+    m.commit(I.current, () => D.current > 0 ? k.unstoredImageRefusal : null);
+  }
+  const L = c(f);
+  L.current = f;
+  const T = c(!1);
+  function x(n) {
+    T.current !== n && (T.current = n, L.current?.(n));
+  }
+  E(() => () => x(!1), []);
+  const B = ne({
+    shouldCommit: () => !m.isPending() && F.current === null,
+    commit: N
+  });
+  E(() => {
+    m.begin(e, null, C);
+    const n = R.current;
+    if (!n) throw new Error("InlineMarkdownEdit: the editor was not mounted when the field opened.");
+    return n.focus("end"), () => m.end();
+  }, []);
+  function K(n) {
+    I.current = n, j(n), S.current?.(n), m.setRefusal(null), m.clearFailure();
+  }
+  function z(n) {
+    if (!(n.defaultPrevented || h || n.nativeEvent.isComposing) && n.currentTarget.contains(n.target) && n.key === "Escape") {
+      n.preventDefault(), a(!1);
+      return;
+    }
+  }
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-slot": "inline-markdown-edit",
+      "data-editing": "true",
+      "aria-busy": h || void 0,
+      className: P("relative min-w-0 rounded-lg border", A !== null ? "border-danger" : "border-border-subtle", v),
+      onFocus: B.onFocus,
+      onBlur: B.onBlur,
+      onKeyDown: z,
+      children: [
+        /* @__PURE__ */ i("div", { inert: h || void 0, children: /* @__PURE__ */ i(
+          J,
+          {
+            ref: R,
+            label: u,
+            hideLabel: !0,
+            value: W,
+            onChange: K,
+            placeholder: o ?? k.empty,
+            toolbar: t,
+            minHeight: 0,
+            uploadImage: r,
+            uploadFile: l,
+            imageTypes: d,
+            isFileUrl: s,
+            onImageUploadStateChange: (n) => {
+              D.current = n.unstored, x(n.unstored > 0);
+            },
+            chrome: "flush",
+            submit: { onSubmit: N, label: k.saveAction, disabled: h }
+          }
+        ) }),
+        h && /* @__PURE__ */ i("span", { className: "pointer-events-none absolute top-2 right-2", "data-slot": "inline-markdown-edit-saving", children: /* @__PURE__ */ i(X, { size: "sm" }) }),
+        b !== null && /* @__PURE__ */ i(Z, { children: b })
+      ]
+    }
+  );
+}
+function ne({ shouldCommit: e, commit: a }) {
+  const u = c(!1), o = c(null), t = c(null), r = c({ shouldCommit: e, commit: a });
+  r.current = { shouldCommit: e, commit: a };
+  function l() {
+    o.current !== null && clearTimeout(o.current), o.current = null, t.current !== null && window.removeEventListener("focus", t.current), t.current = null;
+  }
+  E(() => l, []);
+  function d() {
+    o.current !== null && clearTimeout(o.current), o.current = setTimeout(s, 0);
+  }
+  function s() {
+    if (o.current = null, !u.current) {
+      if (!document.hasFocus()) {
+        if (t.current !== null) return;
+        const f = () => {
+          window.removeEventListener("focus", f), t.current = null, d();
+        };
+        t.current = f, window.addEventListener("focus", f);
+        return;
+      }
+      r.current.shouldCommit() && r.current.commit();
+    }
+  }
+  return {
+    onFocus() {
+      u.current = !0;
+    },
+    onBlur() {
+      u.current = !1, d();
+    }
+  };
+}
+export {
+  ge as InlineMarkdownEdit
+};
+//# sourceMappingURL=InlineMarkdownEdit.js.map

package/dist/components/InlineMarkdownEdit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineMarkdownEdit.js","sources":["../../src/components/InlineMarkdownEdit.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { chordLabel, useUiStrings } from \"../lib/i18n\";\nimport type { ImageUploader } from \"../lib/markdown/image-pipeline\";\nimport { Markdown } from \"./Markdown\";\nimport { MarkdownEditor, type MarkdownEditorHandle } from \"./MarkdownEditor\";\nimport { Tooltip } from \"./Popover\";\nimport { ReadMore } from \"./ReadMore\";\nimport { Spinner } from \"./Spinner\";\nimport { assertActivationPair, type EditActivation } from \"./edit/activation\";\nimport { OutcomeMessage, type EditCommit } from \"./edit/outcome\";\nimport { useEditSession, type CommitMode, type EditSession } from \"./edit/use-edit-session\";\n\n/* ============================================================================\n   INLINE MARKDOWN EDIT — markdown, read in place, edited in place. DX-3372.\n\n   `InlineEdit`'s markdown sibling, for the danxbot fields that hold a document\n   rather than a line (a card's context, a plan record's body, an architecture\n   section, a comment). At rest it IS the rendered `Markdown` — optionally\n   collapsed in a `ReadMore` — and it becomes the library's own\n   `MarkdownEditor`, in the same place, only when its caller says so.\n\n   ACTIVATION IS ALWAYS EXTERNAL. Unlike `InlineEdit` there is no self-opening\n   mode: rendered markdown holds links, task boxes and code blocks, so a click\n   on it already means something, and hijacking that click to open an editor is\n   exactly the \"click text and it turns into an input\" pattern the operator\n   ruled out (DX-3371). `editing` + `onEditingChange` (`EditActivation`) are\n   therefore REQUIRED — the pair `EditGutter` hands out, so the pencil wiring\n   is identical for either field.\n\n   OPENING MOVES FOCUS INTO THE EDITOR, OR THROWS. `MarkdownEditorHandle.focus`\n   throws when focus cannot land, and the field only counts itself \"inside\"\n   once a real focus event says so — before DX-3372 review P0 a focus that\n   silently missed left an open field that could never blur, so never commit.\n\n   COMMIT WHEN FOCUS LEAVES THE WHOLE FIELD — not the editable surface. The\n   editor's own toolbar, its line handle and menus, and any popover rendered\n   through a portal are all part of the field; focus moving into any of them\n   must not commit. A DOM `contains` check cannot see a portal, so this follows\n   the REACT tree instead: `onFocus`/`onBlur` bubble through portals to this\n   component, a blur only schedules the check, and a focus arriving anywhere\n   inside (portal included) before the check runs cancels it. `focusout` fires\n   before `focusin` in the same task, so the check is a macrotask, not a\n   microtask.\n\n   A BLUR WHILE THE WINDOW ITSELF HAS LOST FOCUS IS NOT LEAVING (review H1).\n   The OS file picker the Attach file button opens, a tab switch and an app switch\n   all blur the editor with no `relatedTarget` while `document.activeElement`\n   stays inside. Committing then closed the field under the picker, losing the\n   picked file (or saving the text before it). So while `document.hasFocus()`\n   is false the check waits, and runs again once the window's `focus` fires —\n   by which time focus is back inside (no commit) or somewhere else (commit).\n\n   THE SAME OUTCOME CONTRACT AS `InlineEdit`, through the same edit session\n   (`edit/use-edit-session.ts`): an unchanged value is not a write;\n   `onCommit(next, base)` may return a promise (the field freezes, text intact,\n   until it settles), resolve `{ refusal }` to keep the editor open showing the\n   caller's reason, or reject to keep it open showing `failureMessage` and\n   reporting to `onError`; either way focus returns to the editor. An empty\n   refusal reason throws. After a refusal or failure, blur does not re-attempt\n   the same text — it would fail identically and the field could never be\n   left; the next edit re-arms it, and Ctrl/Cmd+Enter retries explicitly. At\n   most one save is out at a time, and a save that settles after its opening\n   ended is dropped (see `editing` below).\n\n   IMAGES ARE A SAVE GATE (PLN-10 R-1, the consumer obligation\n   `MarkdownEditorProps.onImageUploadStateChange` documents): a value still\n   holding an image that is not stored anywhere is refused locally rather than\n   committed with a `blob:` URL no other reader can load.\n\n   NAVIGATION HOLD WHILE AN UPLOAD IS PENDING — DX-3388. The commit-time REFUSAL\n   above is not enough on its own: nothing stops the reader navigating AWAY from\n   the open field entirely while an image is mid-upload, which drops the draft\n   with no refusal ever firing (there is no commit to refuse — the field just\n   unmounts). Before this app-side navigation guards (`useNavigationGuard` /\n   `useMarkdownImageGate` in the danxbot frontend, DX-3136) held this for the\n   library's OWN `MarkdownEditor` via its `onImageUploadStateChange` prop; this\n   component wrapped that same editor but never re-exposed the count, so a card's\n   title/context/comment fields built on `InlineMarkdownEdit` had no way to arm\n   the app's guard at all.\n\n   THE DESIGN CHOICE: `onUploadStateChange?: (uploading: boolean) => void`, a\n   plain callback, NOT a router hook. A library cannot know which router (or\n   whether ANY router) the host app uses — this repo's own demo has none, and\n   the danxbot app's `useNavigationGuard` is a hand-rolled click/popstate\n   interceptor because `<BrowserRouter>` has no data-router `useBlocker` to hand\n   a hook off to (see that file's own header). A callback needs no such\n   knowledge: it reports one fact — \"this field currently holds an unstored\n   image\" — collapsed from the same per-image counts `unstored > 0` already\n   drives for the local commit refusal, and the caller decides what \"hold\n   navigation\" means for it. It fires `false` on UNMOUNT too (the field closing\n   while an upload is still out, exactly the case that motivated this), so a\n   caller wiring it straight into a guard's `blocked` flag can never leave that\n   guard armed after the field that armed it is gone.\n\n   KEYS. Escape cancels: the draft is dropped, nothing is written, the rendered\n   view returns. Ctrl/Cmd+Enter commits. Neither acts during IME composition\n   (review M3), nor when the key was pressed inside a portalled layer the field\n   owns — Escape in a menu closes the menu, not the edit (review M4).\n   ========================================================================= */\n\nexport interface InlineMarkdownEditProps extends EditActivation {\n  /** The committed markdown. Controlled — the field only ever holds a draft. */\n  value: string;\n  /**\n   * Commit a new value — the same contract as `InlineEdit.onCommit`: called\n   * only when the draft differs from `value`, with `base` = the value editing\n   * began from; return/resolve `{ refusal }` to refuse with a reason, throw or\n   * reject to report a failed save.\n   */\n  onCommit: EditCommit;\n  /**\n   * Whether the editor is open — REQUIRED, see the module comment. The field\n   * hands the closed state back through `onEditingChange(false)` once a commit\n   * lands, on Escape, and when asked to open while `readOnly`. Setting it\n   * `false` yourself drops the draft exactly as Escape does. A save already\n   * out when you do cannot be recalled: your `onCommit` promise still settles,\n   * but its outcome no longer touches the field — no message, no focus move,\n   * no `onEditingChange(false)` — and a commit from the next opening waits for\n   * it before starting.\n   */\n  editing: boolean;\n  /**\n   * What each opening starts from instead of `value` — a draft the caller kept\n   * from an earlier, unfinished edit (DX-5229). `value` stays the committed text\n   * and `onCommit`'s `base`, so \"unchanged\" and conflict checks still measure\n   * against the record, not the draft. Read once per opening.\n   */\n  initialDraft?: string;\n  /**\n   * Fires with the whole draft after each change the reader makes in the open\n   * editor (not on opening, not on a commit). It is how a caller keeps an\n   * unsent edit somewhere durable; cancelling is the caller's own\n   * `onEditingChange(false)`.\n   */\n  onDraftChange?: (draft: string) => void;\n  /** The accessible name of the field and of its editor. */\n  label: string;\n  /** Shown at rest and in the editor when the value is empty. Omit for the built-in text. */\n  placeholder?: string;\n  /** Collapse the rendered view to this many lines behind a `ReadMore`. */\n  collapsedLines?: number;\n  /**\n   * Shown at rest after the rendered value, never in the editor. With\n   * `collapsedLines` it sits inside the same `ReadMore`, under the fold: a\n   * card's description lists its decisions there (DX-6416).\n   */\n  restingFooter?: ReactNode;\n  /** Extra toolbar content for the editor, after its built-in groups. */\n  toolbar?: ReactNode;\n  /** Stores a pasted/dropped/picked image — see `MarkdownEditorProps.uploadImage`. */\n  uploadImage?: ImageUploader;\n  /** DXUI-74: stores any other file as a link — see `MarkdownEditorProps.uploadFile`. */\n  uploadFile?: ImageUploader;\n  /** DXUI-74: the picture types `uploadImage` stores — see `MarkdownEditorProps.imageTypes`. */\n  imageTypes?: readonly string[];\n  /** DXUI-74: whether a link's destination is a stored file, so it gets a tile — see `MarkdownEditorProps.isFileUrl`. */\n  isFileUrl?: (url: string) => boolean;\n  /**\n   * Fires whenever the open draft's image-upload state changes: `true` while\n   * any image in it is uploading, failed, or otherwise unstored; `false` once\n   * none are — INCLUDING when the field closes or unmounts with an upload\n   * still pending, so a caller wiring this straight into its own navigation\n   * guard can never get stuck armed after the field that armed it is gone.\n   * See the module comment (\"NAVIGATION HOLD WHILE AN UPLOAD IS PENDING\") for\n   * why this is a callback rather than a router hook.\n   */\n  onUploadStateChange?: (uploading: boolean) => void;\n  /**\n   * This value cannot be edited at all, AND WHY — `InlineEdit.readOnly`'s\n   * shape and rule: asked to open, the field hands `onEditingChange(false)`\n   * straight back, and the reason is the rest view's accessible description.\n   */\n  readOnly?: { reason: string };\n  /**\n   * What is shown when the commit REJECTS (never a `{ refusal }`, which\n   * renders its own text).\n   *\n   * Omit for the built-in sentence, which names Ctrl+Enter as the retry key.\n   */\n  failureMessage?: string;\n  /** The rejected error, handed on so it can be logged or reported. */\n  onError?: (error: unknown) => void;\n  /**\n   * `\"close\"` closes the field (`onEditingChange(false)`) the moment a commit\n   * that returns a promise is sent, instead of freezing it until the promise\n   * settles. A refusal or failure that lands afterwards reopens it\n   * (`onEditingChange(true)`) with the text that was sent and the message under\n   * it, unless the field was opened again meanwhile. Default `\"wait\"`.\n   */\n  commitMode?: CommitMode;\n  className?: string;\n}\n\nexport function InlineMarkdownEdit(props: InlineMarkdownEditProps) {\n  assertActivationPair(\"InlineMarkdownEdit\", props.editing, props.onEditingChange);\n  /* The one retry sentence both inline editors share; this field commits on Ctrl+Enter. */\n  const { inlineEdit, keyNames } = useUiStrings();\n  const retryMessage = inlineEdit.failure(chordLabel(\"ctrl+enter\", keyNames));\n  const { editing, onEditingChange } = props;\n  const unavailable = props.readOnly !== undefined;\n  const editorRef = useRef<MarkdownEditorHandle>(null);\n\n  /* THE SESSION OUTLIVES EVERY OPENING. The open editor mounts and unmounts\n     with each opening, but a save it sent can still be out after it closes —\n     so the session (and its record of that save) lives here, where a\n     reopening sees it and waits for it. */\n  const session = useEditSession({\n    component: \"InlineMarkdownEdit\",\n    value: props.value,\n    onCommit: props.onCommit,\n    onError: props.onError,\n    failureMessage: props.failureMessage ?? retryMessage,\n    close: () => onEditingChange(false),\n    refocus: () => editorRef.current?.focus(),\n    commitMode: props.commitMode,\n    reopen: () => onEditingChange(true),\n  });\n\n  /* H3 parity: a read-only field asked to open hands the closed state back. */\n  useEffect(() => {\n    if (editing && unavailable) onEditingChange(false);\n  }, [editing, unavailable, onEditingChange]);\n\n  if (editing && !unavailable) return <OpenMarkdownEdit {...props} session={session} editorRef={editorRef} />;\n  return <RestingMarkdown {...props} />;\n}\n\nfunction RestingMarkdown({\n  value,\n  label,\n  placeholder,\n  collapsedLines,\n  restingFooter,\n  readOnly,\n  className,\n}: InlineMarkdownEditProps) {\n  const strings = useUiStrings().inlineMarkdownEdit;\n  const reasonId = useId();\n  const body =\n    value.length === 0 ? <p className=\"text-sm text-tertiary\">{placeholder ?? strings.empty}</p> : <Markdown>{value}</Markdown>;\n  const rendered = (\n    <>\n      {body}\n      {restingFooter}\n    </>\n  );\n  const foldable = value.length > 0 || restingFooter != null;\n  const view = (\n    <div\n      role=\"group\"\n      aria-label={label}\n      aria-disabled={readOnly !== undefined || undefined}\n      aria-describedby={readOnly !== undefined ? reasonId : undefined}\n      data-slot=\"inline-markdown-edit\"\n      className={cn(\"min-w-0 rounded-lg border border-transparent\", className)}\n    >\n      {collapsedLines !== undefined && foldable ? <ReadMore lines={collapsedLines}>{rendered}</ReadMore> : rendered}\n      {readOnly !== undefined && (\n        <span id={reasonId} className=\"sr-only\">\n          {readOnly.reason}\n        </span>\n      )}\n    </div>\n  );\n  if (readOnly === undefined) return view;\n  /* The visual twin of the `sr-only` reason — the same call `InlineEdit` makes. */\n  return <Tooltip content={readOnly.reason}>{view}</Tooltip>;\n}\n\n/**\n * The open field. Mounted once per opening, so every opening is one edit\n * session from mount to unmount: `begin` on mount, `end` on unmount.\n */\nfunction OpenMarkdownEdit({\n  value,\n  onEditingChange,\n  label,\n  placeholder,\n  toolbar,\n  uploadImage,\n  uploadFile,\n  imageTypes,\n  isFileUrl,\n  onUploadStateChange,\n  initialDraft,\n  onDraftChange,\n  className,\n  session,\n  editorRef,\n}: InlineMarkdownEditProps & { session: EditSession; editorRef: RefObject<MarkdownEditorHandle | null> }) {\n  const strings = useUiStrings().inlineMarkdownEdit;\n  /* A save refused after the field closed reopens it with the text it sent. */\n  const [restore] = useState(() => session.restored());\n  const startDraft = restore?.text ?? initialDraft ?? value;\n  const [draft, setDraft] = useState(startDraft);\n  const draftRef = useRef(startDraft);\n  const onDraftChangeRef = useRef(onDraftChange);\n  onDraftChangeRef.current = onDraftChange;\n  const unstoredRef = useRef(0);\n  const { pending, refusal, blocked } = session;\n  const liveBlocked = useRef(blocked);\n  liveBlocked.current = blocked;\n\n  function commit() {\n    session.commit(draftRef.current, () => (unstoredRef.current > 0 ? strings.unstoredImageRefusal : null));\n  }\n\n  /* DX-3388 — see the module comment (\"NAVIGATION HOLD WHILE AN UPLOAD IS\n     PENDING\"). `onUploadStateChangeRef` reads the CURRENT callback rather than\n     whatever was in scope when the field opened — the same `latest.current`\n     pattern `markdown-image-gate.ts`'s own `guardClose` uses, for the same\n     reason: the unmount cleanup below fires from React's teardown, long after\n     the render that created it, and must not call a stale closure.\n     `reportedUploadingRef` collapses the per-image counts to ONE edge-triggered\n     boolean so a caller that turns this straight into `setState` is not\n     re-rendered on every unrelated keystroke. */\n  const onUploadStateChangeRef = useRef(onUploadStateChange);\n  onUploadStateChangeRef.current = onUploadStateChange;\n  const reportedUploadingRef = useRef(false);\n\n  function reportUploadState(uploading: boolean) {\n    if (reportedUploadingRef.current === uploading) return;\n    reportedUploadingRef.current = uploading;\n    onUploadStateChangeRef.current?.(uploading);\n  }\n\n  /* The field closing/unmounting with an upload still pending is exactly the\n     case this exists for: nothing else will ever report `false` for it once\n     the editor is gone. */\n  useEffect(() => () => reportUploadState(false), []);\n\n  const leave = useLeaveDetection({\n    shouldCommit: () => !session.isPending() && liveBlocked.current === null,\n    commit,\n  });\n\n  /* THE START-OF-EDIT SNAPSHOT, and focus into the editor with the caret at\n     the end. Runs once per opening (this component mounts once per opening);\n     `value` moving underneath an open editor must not reset the draft — that\n     is what `base` is for. `focus` throws if it cannot land (review P0). */\n  useEffect(() => {\n    session.begin(value, null, restore);\n    const editor = editorRef.current;\n    if (!editor) throw new Error(\"InlineMarkdownEdit: the editor was not mounted when the field opened.\");\n    editor.focus(\"end\");\n    return () => session.end();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function handleChange(next: string) {\n    draftRef.current = next;\n    setDraft(next);\n    onDraftChangeRef.current?.(next);\n    session.setRefusal(null);\n    session.clearFailure();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (event.defaultPrevented || pending || event.nativeEvent.isComposing) return;\n    /* A key pressed inside a portalled layer (a menu, a consumer popover)\n       bubbles here through React but belongs to that layer (review M4). */\n    if (!event.currentTarget.contains(event.target as Node)) return;\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      onEditingChange(false);\n      return;\n    }\n  }\n\n  return (\n    <div\n      data-slot=\"inline-markdown-edit\"\n      data-editing=\"true\"\n      aria-busy={pending || undefined}\n      /* DX-3374: the border lives HERE now, not on `MarkdownEditor`'s own root\n         (`chrome=\"flush\"` below strips that) — the exact geometry `RestingMarkdown`\n         draws its own `rounded-lg border` on, so the box the reader sees is the\n         SAME box in both states, 1px border reserved at all times, only its\n         colour changing (transparent at rest, `border-border-subtle` open,\n         `border-danger` refused) — the identical technique `InlineEdit`'s own\n         module comment documents for the same reason: a border that appears\n         only in one state moves the text by its own width. */\n      className={cn(\"relative min-w-0 rounded-lg border\", refusal !== null ? \"border-danger\" : \"border-border-subtle\", className)}\n      onFocus={leave.onFocus}\n      onBlur={leave.onBlur}\n      onKeyDown={handleKeyDown}\n    >\n      {/* `inert` while a save is out: the draft stays on screen, but no further\n          keystroke can land in text that is already on its way to the server. */}\n      <div inert={pending || undefined}>\n        <MarkdownEditor\n          ref={editorRef}\n          label={label}\n          hideLabel\n          value={draft}\n          onChange={handleChange}\n          placeholder={placeholder ?? strings.empty}\n          toolbar={toolbar}\n          minHeight={0}\n          uploadImage={uploadImage}\n          uploadFile={uploadFile}\n          imageTypes={imageTypes}\n          isFileUrl={isFileUrl}\n          onImageUploadStateChange={(state) => {\n            unstoredRef.current = state.unstored;\n            reportUploadState(state.unstored > 0);\n          }}\n          /* DX-3374: `flush` — no border/background/padding of its own, the\n             toolbar floats outside instead of pushing the text down, and the\n             line handle moves into the external gutter. The border above is\n             what the reader sees; this component draws none. */\n          chrome=\"flush\"\n          /* DX-5596: Ctrl/Cmd+Enter saves, through the editor's own submit contract so the hint line names it. */\n          submit={{ onSubmit: commit, label: strings.saveAction, disabled: pending }}\n        />\n      </div>\n      {pending && (\n        <span className=\"pointer-events-none absolute top-2 right-2\" data-slot=\"inline-markdown-edit-saving\">\n          <Spinner size=\"sm\" />\n        </span>\n      )}\n      {blocked !== null && <OutcomeMessage>{blocked}</OutcomeMessage>}\n    </div>\n  );\n}\n\n/**\n * \"Has focus left the whole field?\" — see the module comment for why this is\n * React-tree focus tracking plus a macrotask, and why a blur while the window\n * is unfocused waits for the window to come back (review H1).\n */\nfunction useLeaveDetection({ shouldCommit, commit }: { shouldCommit: () => boolean; commit: () => void }) {\n  const insideRef = useRef(false);\n  const checkRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const windowWaitRef = useRef<(() => void) | null>(null);\n  /* Read through a ref: the check runs a task after the render that\n     scheduled it, and a save or refusal may have landed in between. */\n  const latest = useRef({ shouldCommit, commit });\n  latest.current = { shouldCommit, commit };\n\n  function stopWaiting() {\n    if (checkRef.current !== null) clearTimeout(checkRef.current);\n    checkRef.current = null;\n    if (windowWaitRef.current !== null) window.removeEventListener(\"focus\", windowWaitRef.current);\n    windowWaitRef.current = null;\n  }\n\n  useEffect(() => stopWaiting, []);\n\n  function schedule() {\n    if (checkRef.current !== null) clearTimeout(checkRef.current);\n    checkRef.current = setTimeout(check, 0);\n  }\n\n  function check() {\n    checkRef.current = null;\n    if (insideRef.current) return;\n    if (!document.hasFocus()) {\n      if (windowWaitRef.current !== null) return;\n      const onWindowFocus = () => {\n        window.removeEventListener(\"focus\", onWindowFocus);\n        windowWaitRef.current = null;\n        schedule();\n      };\n      windowWaitRef.current = onWindowFocus;\n      window.addEventListener(\"focus\", onWindowFocus);\n      return;\n    }\n    /* BLUR DOES NOT RE-ATTEMPT A VALUE THAT WAS JUST REFUSED OR FAILED, and\n       never starts a second save while one is out. */\n    if (latest.current.shouldCommit()) latest.current.commit();\n  }\n\n  return {\n    onFocus() {\n      insideRef.current = true;\n    },\n    onBlur() {\n      insideRef.current = false;\n      schedule();\n    },\n  };\n}\n"],"names":["InlineMarkdownEdit","props","assertActivationPair","inlineEdit","keyNames","useUiStrings","retryMessage","chordLabel","editing","onEditingChange","unavailable","editorRef","useRef","session","useEditSession","useEffect","OpenMarkdownEdit","jsx","RestingMarkdown","value","label","placeholder","collapsedLines","restingFooter","readOnly","className","strings","reasonId","useId","body","Markdown","rendered","jsxs","Fragment","foldable","view","cn","ReadMore","Tooltip","toolbar","uploadImage","uploadFile","imageTypes","isFileUrl","onUploadStateChange","initialDraft","onDraftChange","restore","useState","startDraft","draft","setDraft","draftRef","onDraftChangeRef","unstoredRef","pending","refusal","blocked","liveBlocked","commit","onUploadStateChangeRef","reportedUploadingRef","reportUploadState","uploading","leave","useLeaveDetection","editor","handleChange","next","handleKeyDown","event","MarkdownEditor","state","Spinner","OutcomeMessage","shouldCommit","insideRef","checkRef","windowWaitRef","latest","stopWaiting","schedule","check","onWindowFocus"],"mappings":";;;;;;;;;;;;;AAkMO,SAASA,GAAmBC,GAAgC;AACjE,EAAAC,EAAqB,sBAAsBD,EAAM,SAASA,EAAM,eAAe;AAE/E,QAAM,EAAE,YAAAE,GAAY,UAAAC,EAAA,IAAaC,EAAA,GAC3BC,IAAeH,EAAW,QAAQI,EAAW,cAAcH,CAAQ,CAAC,GACpE,EAAE,SAAAI,GAAS,iBAAAC,EAAA,IAAoBR,GAC/BS,IAAcT,EAAM,aAAa,QACjCU,IAAYC,EAA6B,IAAI,GAM7CC,IAAUC,EAAe;AAAA,IAC7B,WAAW;AAAA,IACX,OAAOb,EAAM;AAAA,IACb,UAAUA,EAAM;AAAA,IAChB,SAASA,EAAM;AAAA,IACf,gBAAgBA,EAAM,kBAAkBK;AAAA,IACxC,OAAO,MAAMG,EAAgB,EAAK;AAAA,IAClC,SAAS,MAAME,EAAU,SAAS,MAAA;AAAA,IAClC,YAAYV,EAAM;AAAA,IAClB,QAAQ,MAAMQ,EAAgB,EAAI;AAAA,EAAA,CACnC;AAOD,SAJAM,EAAU,MAAM;AACd,IAAIP,KAAWE,KAAaD,EAAgB,EAAK;AAAA,EACnD,GAAG,CAACD,GAASE,GAAaD,CAAe,CAAC,GAEtCD,KAAW,CAACE,sBAAqBM,IAAA,EAAkB,GAAGf,GAAO,SAAAY,GAAkB,WAAAF,GAAsB,IAClG,gBAAAM,EAACC,GAAA,EAAiB,GAAGjB,EAAA,CAAO;AACrC;AAEA,SAASiB,EAAgB;AAAA,EACvB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAUrB,IAAe,oBACzBsB,IAAWC,EAAA,GACXC,IACJV,EAAM,WAAW,sBAAK,KAAA,EAAE,WAAU,yBAAyB,UAAAE,KAAeK,EAAQ,OAAM,IAAO,gBAAAT,EAACa,KAAU,UAAAX,GAAM,GAC5GY,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAJ;AAAA,IACAN;AAAA,EAAA,GACH,GAEIW,IAAWf,EAAM,SAAS,KAAKI,KAAiB,MAChDY,IACJ,gBAAAH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAYZ;AAAA,MACZ,iBAAeI,MAAa,UAAa;AAAA,MACzC,oBAAkBA,MAAa,SAAYG,IAAW;AAAA,MACtD,aAAU;AAAA,MACV,WAAWS,EAAG,gDAAgDX,CAAS;AAAA,MAEtE,UAAA;AAAA,QAAAH,MAAmB,UAAaY,IAAW,gBAAAjB,EAACoB,KAAS,OAAOf,GAAiB,aAAS,IAAcS;AAAA,QACpGP,MAAa,UACZ,gBAAAP,EAAC,QAAA,EAAK,IAAIU,GAAU,WAAU,WAC3B,UAAAH,EAAS,OAAA,CACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIN,SAAIA,MAAa,SAAkBW,IAE5B,gBAAAlB,EAACqB,GAAA,EAAQ,SAASd,EAAS,QAAS,UAAAW,GAAK;AAClD;AAMA,SAASnB,GAAiB;AAAA,EACxB,OAAAG;AAAA,EACA,iBAAAV;AAAA,EACA,OAAAW;AAAA,EACA,aAAAC;AAAA,EACA,SAAAkB;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAArB;AAAA,EACA,SAAAZ;AAAA,EACA,WAAAF;AACF,GAA0G;AACxG,QAAMe,IAAUrB,IAAe,oBAEzB,CAAC0C,CAAO,IAAIC,EAAS,MAAMnC,EAAQ,UAAU,GAC7CoC,IAAaF,GAAS,QAAQF,KAAgB1B,GAC9C,CAAC+B,GAAOC,CAAQ,IAAIH,EAASC,CAAU,GACvCG,IAAWxC,EAAOqC,CAAU,GAC5BI,IAAmBzC,EAAOkC,CAAa;AAC7C,EAAAO,EAAiB,UAAUP;AAC3B,QAAMQ,IAAc1C,EAAO,CAAC,GACtB,EAAE,SAAA2C,GAAS,SAAAC,GAAS,SAAAC,EAAA,IAAY5C,GAChC6C,IAAc9C,EAAO6C,CAAO;AAClC,EAAAC,EAAY,UAAUD;AAEtB,WAASE,IAAS;AAChB,IAAA9C,EAAQ,OAAOuC,EAAS,SAAS,MAAOE,EAAY,UAAU,IAAI5B,EAAQ,uBAAuB,IAAK;AAAA,EACxG;AAWA,QAAMkC,IAAyBhD,EAAOgC,CAAmB;AACzD,EAAAgB,EAAuB,UAAUhB;AACjC,QAAMiB,IAAuBjD,EAAO,EAAK;AAEzC,WAASkD,EAAkBC,GAAoB;AAC7C,IAAIF,EAAqB,YAAYE,MACrCF,EAAqB,UAAUE,GAC/BH,EAAuB,UAAUG,CAAS;AAAA,EAC5C;AAKA,EAAAhD,EAAU,MAAM,MAAM+C,EAAkB,EAAK,GAAG,CAAA,CAAE;AAElD,QAAME,IAAQC,GAAkB;AAAA,IAC9B,cAAc,MAAM,CAACpD,EAAQ,UAAA,KAAe6C,EAAY,YAAY;AAAA,IACpE,QAAAC;AAAA,EAAA,CACD;AAMD,EAAA5C,EAAU,MAAM;AACd,IAAAF,EAAQ,MAAMM,GAAO,MAAM4B,CAAO;AAClC,UAAMmB,IAASvD,EAAU;AACzB,QAAI,CAACuD,EAAQ,OAAM,IAAI,MAAM,uEAAuE;AACpG,WAAAA,EAAO,MAAM,KAAK,GACX,MAAMrD,EAAQ,IAAA;AAAA,EAEvB,GAAG,CAAA,CAAE;AAEL,WAASsD,EAAaC,GAAc;AAClC,IAAAhB,EAAS,UAAUgB,GACnBjB,EAASiB,CAAI,GACbf,EAAiB,UAAUe,CAAI,GAC/BvD,EAAQ,WAAW,IAAI,GACvBA,EAAQ,aAAA;AAAA,EACV;AAEA,WAASwD,EAAcC,GAA4C;AACjE,QAAI,EAAAA,EAAM,oBAAoBf,KAAWe,EAAM,YAAY,gBAGtDA,EAAM,cAAc,SAASA,EAAM,MAAc,KAClDA,EAAM,QAAQ,UAAU;AAC1B,MAAAA,EAAM,eAAA,GACN7D,EAAgB,EAAK;AACrB;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAa;AAAA,MACb,aAAWuB,KAAW;AAAA,MAStB,WAAWnB,EAAG,sCAAsCoB,MAAY,OAAO,kBAAkB,wBAAwB/B,CAAS;AAAA,MAC1H,SAASuC,EAAM;AAAA,MACf,QAAQA,EAAM;AAAA,MACd,WAAWK;AAAA,MAIX,UAAA;AAAA,QAAA,gBAAApD,EAAC,OAAA,EAAI,OAAOsC,KAAW,QACrB,UAAA,gBAAAtC;AAAA,UAACsD;AAAA,UAAA;AAAA,YACC,KAAK5D;AAAA,YACL,OAAAS;AAAA,YACA,WAAS;AAAA,YACT,OAAO8B;AAAA,YACP,UAAUiB;AAAA,YACV,aAAa9C,KAAeK,EAAQ;AAAA,YACpC,SAAAa;AAAA,YACA,WAAW;AAAA,YACX,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,YAAAC;AAAA,YACA,WAAAC;AAAA,YACA,0BAA0B,CAAC6B,MAAU;AACnC,cAAAlB,EAAY,UAAUkB,EAAM,UAC5BV,EAAkBU,EAAM,WAAW,CAAC;AAAA,YACtC;AAAA,YAKA,QAAO;AAAA,YAEP,QAAQ,EAAE,UAAUb,GAAQ,OAAOjC,EAAQ,YAAY,UAAU6B,EAAA;AAAA,UAAQ;AAAA,QAAA,GAE7E;AAAA,QACCA,KACC,gBAAAtC,EAAC,QAAA,EAAK,WAAU,8CAA6C,aAAU,+BACrE,UAAA,gBAAAA,EAACwD,GAAA,EAAQ,MAAK,KAAA,CAAK,EAAA,CACrB;AAAA,QAEDhB,MAAY,QAAQ,gBAAAxC,EAACyD,GAAA,EAAgB,UAAAjB,EAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;AAOA,SAASQ,GAAkB,EAAE,cAAAU,GAAc,QAAAhB,KAA+D;AACxG,QAAMiB,IAAYhE,EAAO,EAAK,GACxBiE,IAAWjE,EAA6C,IAAI,GAC5DkE,IAAgBlE,EAA4B,IAAI,GAGhDmE,IAASnE,EAAO,EAAE,cAAA+D,GAAc,QAAAhB,GAAQ;AAC9C,EAAAoB,EAAO,UAAU,EAAE,cAAAJ,GAAc,QAAAhB,EAAA;AAEjC,WAASqB,IAAc;AACrB,IAAIH,EAAS,YAAY,QAAM,aAAaA,EAAS,OAAO,GAC5DA,EAAS,UAAU,MACfC,EAAc,YAAY,eAAa,oBAAoB,SAASA,EAAc,OAAO,GAC7FA,EAAc,UAAU;AAAA,EAC1B;AAEA,EAAA/D,EAAU,MAAMiE,GAAa,EAAE;AAE/B,WAASC,IAAW;AAClB,IAAIJ,EAAS,YAAY,QAAM,aAAaA,EAAS,OAAO,GAC5DA,EAAS,UAAU,WAAWK,GAAO,CAAC;AAAA,EACxC;AAEA,WAASA,IAAQ;AAEf,QADAL,EAAS,UAAU,MACf,CAAAD,EAAU,SACd;AAAA,UAAI,CAAC,SAAS,YAAY;AACxB,YAAIE,EAAc,YAAY,KAAM;AACpC,cAAMK,IAAgB,MAAM;AAC1B,iBAAO,oBAAoB,SAASA,CAAa,GACjDL,EAAc,UAAU,MACxBG,EAAA;AAAA,QACF;AACA,QAAAH,EAAc,UAAUK,GACxB,OAAO,iBAAiB,SAASA,CAAa;AAC9C;AAAA,MACF;AAGA,MAAIJ,EAAO,QAAQ,aAAA,KAAgBA,EAAO,QAAQ,OAAA;AAAA;AAAA,EACpD;AAEA,SAAO;AAAA,IACL,UAAU;AACR,MAAAH,EAAU,UAAU;AAAA,IACtB;AAAA,IACA,SAAS;AACP,MAAAA,EAAU,UAAU,IACpBK,EAAA;AAAA,IACF;AAAA,EAAA;AAEJ;"}

package/dist/components/Input.js

@@ -0,0 +1,156 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { Input as x } from "@base-ui/react/input";
+import { tv as p } from "tailwind-variants";
+import { cn as u } from "../lib/cn.js";
+import { handleSubmitChord as v, SubmitHint as z } from "../lib/submit-shortcut.js";
+import { Spinner as w } from "./Spinner.js";
+const _ = p({
+  base: [
+    /* dx-field carries the WebKit search-clear suppression in components.css —
+       without it a `type="search"` field with a trailing clear action renders
+       two clear buttons side by side. */
+    "dx-field w-full min-w-0 font-sans text-primary",
+    "border border-field-border bg-field",
+    "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+    "placeholder:text-field-placeholder",
+    "hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover",
+    "focus:border-control focus:bg-field focus:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+    "focus:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-45",
+    /* Invalid is driven by the Field wrapper, so a control never has to be told
+       twice and can never disagree with its own error message. */
+    "data-invalid:border-danger data-invalid:focus:shadow-[0_0_0_3px_var(--danger-subtle)]",
+    "read-only:bg-surface-sunken"
+  ],
+  variants: {
+    size: {
+      sm: "h-control-sm rounded-md px-3 text-xs",
+      md: "h-control-md rounded-md px-3.5 text-sm",
+      lg: "h-control-lg rounded-lg px-4 text-md"
+    },
+    hasLeading: { true: "", false: "" },
+    hasTrailing: { true: "", false: "" }
+  },
+  compoundVariants: [
+    /* Padding is widened per SIZE, not by one shared value: an adornment is
+           sized from the icon ramp, so the gap it needs is different at each
+           control height. A single number leaves the text either crowded at lg or
+           adrift at sm.
+    
+           The `pointer-coarse` pairs keep that promise once the adornment is
+           floored to --tap-target: text that stayed at pl-9 would run underneath
+           the widened slot. `lg` needs no pair — 3rem is already past the floor. */
+    { size: "sm", hasLeading: !0, class: "pl-9 pointer-coarse:pl-(--tap-target)" },
+    { size: "md", hasLeading: !0, class: "pl-10 pointer-coarse:pl-(--tap-target)" },
+    { size: "lg", hasLeading: !0, class: "pl-12" },
+    { size: "sm", hasTrailing: !0, class: "pr-9 pointer-coarse:pr-(--tap-target)" },
+    { size: "md", hasTrailing: !0, class: "pr-10 pointer-coarse:pr-(--tap-target)" },
+    { size: "lg", hasTrailing: !0, class: "pr-12" }
+  ],
+  defaultVariants: { size: "md" }
+}), g = p({
+  base: [
+    /* dx-tap on the SLOT, not just on whatever is dropped into it: a trailing
+       clear button is a Button, so it reaches 44px on a coarse pointer from
+       --control-* on its own — and then hangs 4px over each side of a 36px
+       adornment box. The slot has to grow with it. The matching text padding
+       is in the compound variants below. */
+    "dx-tap pointer-events-none absolute inset-y-0 grid place-items-center text-tertiary",
+    "transition-colors duration-(--dur-fast)",
+    /* The adornment tints with the field it belongs to, so focus reads as one
+       object lighting up rather than a border and an icon changing separately. */
+    "group-focus-within/input:text-control-text",
+    "group-has-data-invalid/input:text-danger-text"
+  ],
+  variants: {
+    side: { leading: "left-0", trailing: "right-0" },
+    size: {
+      sm: "w-9",
+      md: "w-10",
+      lg: "w-12"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function j(a) {
+  const {
+    className: i,
+    size: t = "md",
+    leading: s,
+    trailing: d,
+    loading: r = !1,
+    ref: l,
+    ...c
+  } = a, o = r ? /* @__PURE__ */ e(w, { size: "sm" }) : d, n = !!s, f = !!o, b = "leading" in a || "trailing" in a || r, m = /* @__PURE__ */ e(
+    x,
+    {
+      ref: l,
+      className: u(_({ size: t, hasLeading: n, hasTrailing: f }), i),
+      ...c
+    }
+  );
+  return b ? /* @__PURE__ */ h("div", { className: "group/input relative flex w-full min-w-0 items-center", children: [
+    n && /* @__PURE__ */ e("span", { className: g({ side: "leading", size: t }), children: s }),
+    m,
+    f && /* Trailing content is often interactive (a clear button, a reveal
+    toggle), so pointer events are restored here even though the
+    wrapper disables them for the common decorative case. */
+    /* @__PURE__ */ e("span", { className: u(g({ side: "trailing", size: t }), "[&>*]:pointer-events-auto"), children: o })
+  ] }) : m;
+}
+const y = p({
+  base: [
+    "w-full min-w-0 font-sans text-primary",
+    "border border-field-border bg-field",
+    "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+    "placeholder:text-field-placeholder",
+    "hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover",
+    "focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)] focus:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-45",
+    "data-invalid:border-danger data-invalid:focus:shadow-[0_0_0_3px_var(--danger-subtle)]",
+    "read-only:bg-surface-sunken"
+  ],
+  variants: {
+    size: {
+      sm: "rounded-md px-3 py-2 text-xs",
+      md: "rounded-md px-3.5 py-2.5 text-sm",
+      lg: "rounded-lg px-4 py-3 text-md"
+    },
+    /**
+     * `auto` uses field-sizing, which grows the box with its content with no
+     * JS, no hidden mirror element and no scroll-height measuring — the three
+     * things every auto-resize textarea implementation has needed until now.
+     * Engines without it simply keep the fixed height and a scrollbar, which
+     * is the correct graceful degradation.
+     */
+    resize: {
+      none: "resize-none",
+      vertical: "resize-y",
+      auto: "resize-none field-sizing-content"
+    }
+  },
+  defaultVariants: { size: "md", resize: "vertical" }
+});
+function k({ className: a, size: i, resize: t, rows: s = 4, ref: d, submit: r, onKeyDown: l, ...c }) {
+  const o = /* @__PURE__ */ e(
+    x,
+    {
+      ref: d,
+      render: /* @__PURE__ */ e("textarea", { rows: s }),
+      className: u(y({ size: i, resize: t }), a),
+      ...c,
+      onKeyDown: (n) => {
+        l?.(n), v(n, r);
+      }
+    }
+  );
+  return r ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
+    o,
+    /* @__PURE__ */ e(z, { submit: r })
+  ] }) : o;
+}
+export {
+  j as Input,
+  k as Textarea
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { KeyboardEvent, ReactNode, Ref, TextareaHTMLAttributes } from \"react\";\r\nimport { Input as BaseInput } from \"@base-ui/react/input\";\r\nimport { tv, type VariantProps } from \"tailwind-variants\";\r\nimport { cn } from \"../lib/cn\";\r\nimport { handleSubmitChord, SubmitHint, type SubmitAction } from \"../lib/submit-shortcut\";\r\nimport { Spinner } from \"./Spinner\";\r\n\r\n/* ----------------------------------------------------------------------------\r\n   FOCUS ON A TEXT FIELD IS A RING THAT GROWS, NOT A BORDER THAT CHANGES COLOUR.\r\n\r\n   The ring is a `box-shadow` spread rather than an `outline`, for one specific\r\n   reason: box-shadow is animatable and respects border-radius on every engine,\r\n   while `outline` jumps to its final width instantly. Growing from 0 to 3px\r\n   over --dur-fast is what makes focus feel like the field OPENING rather than\r\n   like a state flag being set.\r\n\r\n   Keyboard focus additionally gets the global `:focus-visible` outline from\r\n   index.css on top — this ring is the field's own affordance and applies to\r\n   pointer focus too, where an outline would be wrong.\r\n   -------------------------------------------------------------------------- */\r\n\r\nconst control = tv({\r\n  base: [\r\n    /* dx-field carries the WebKit search-clear suppression in components.css —\r\n       without it a `type=\"search\"` field with a trailing clear action renders\r\n       two clear buttons side by side. */\r\n    \"dx-field w-full min-w-0 font-sans text-primary\",\r\n    \"border border-field-border bg-field\",\r\n    \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\r\n    \"placeholder:text-field-placeholder\",\r\n    \"hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover\",\r\n    \"focus:border-control focus:bg-field focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\r\n    \"focus:outline-none\",\r\n    \"disabled:cursor-not-allowed disabled:opacity-45\",\r\n    /* Invalid is driven by the Field wrapper, so a control never has to be told\r\n       twice and can never disagree with its own error message. */\r\n    \"data-invalid:border-danger data-invalid:focus:shadow-[0_0_0_3px_var(--danger-subtle)]\",\r\n    \"read-only:bg-surface-sunken\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"h-control-sm rounded-md px-3 text-xs\",\r\n      md: \"h-control-md rounded-md px-3.5 text-sm\",\r\n      lg: \"h-control-lg rounded-lg px-4 text-md\",\r\n    },\r\n    hasLeading: { true: \"\", false: \"\" },\r\n    hasTrailing: { true: \"\", false: \"\" },\r\n  },\r\n  compoundVariants: [\r\n    /* Padding is widened per SIZE, not by one shared value: an adornment is\r\n       sized from the icon ramp, so the gap it needs is different at each\r\n       control height. A single number leaves the text either crowded at lg or\r\n       adrift at sm.\r\n\r\n       The `pointer-coarse` pairs keep that promise once the adornment is\r\n       floored to --tap-target: text that stayed at pl-9 would run underneath\r\n       the widened slot. `lg` needs no pair — 3rem is already past the floor. */\r\n    { size: \"sm\", hasLeading: true, class: \"pl-9 pointer-coarse:pl-(--tap-target)\" },\r\n    { size: \"md\", hasLeading: true, class: \"pl-10 pointer-coarse:pl-(--tap-target)\" },\r\n    { size: \"lg\", hasLeading: true, class: \"pl-12\" },\r\n    { size: \"sm\", hasTrailing: true, class: \"pr-9 pointer-coarse:pr-(--tap-target)\" },\r\n    { size: \"md\", hasTrailing: true, class: \"pr-10 pointer-coarse:pr-(--tap-target)\" },\r\n    { size: \"lg\", hasTrailing: true, class: \"pr-12\" },\r\n  ],\r\n  defaultVariants: { size: \"md\" },\r\n});\r\n\r\nconst adornment = tv({\r\n  base: [\r\n    /* dx-tap on the SLOT, not just on whatever is dropped into it: a trailing\r\n       clear button is a Button, so it reaches 44px on a coarse pointer from\r\n       --control-* on its own — and then hangs 4px over each side of a 36px\r\n       adornment box. The slot has to grow with it. The matching text padding\r\n       is in the compound variants below. */\r\n    \"dx-tap pointer-events-none absolute inset-y-0 grid place-items-center text-tertiary\",\r\n    \"transition-colors duration-(--dur-fast)\",\r\n    /* The adornment tints with the field it belongs to, so focus reads as one\r\n       object lighting up rather than a border and an icon changing separately. */\r\n    \"group-focus-within/input:text-control-text\",\r\n    \"group-has-data-invalid/input:text-danger-text\",\r\n  ],\r\n  variants: {\r\n    side: { leading: \"left-0\", trailing: \"right-0\" },\r\n    size: {\r\n      sm: \"w-9\",\r\n      md: \"w-10\",\r\n      lg: \"w-12\",\r\n    },\r\n  },\r\n  defaultVariants: { size: \"md\" },\r\n});\r\n\r\nexport interface InputProps\r\n  extends Omit<BaseInput.Props, \"className\" | \"render\" | \"size\">,\r\n    VariantProps<typeof control> {\r\n  className?: string;\r\n  /** Icon or text shown inside the field's leading edge. */\r\n  leading?: ReactNode;\r\n  /** Icon, unit or action shown inside the field's trailing edge. */\r\n  trailing?: ReactNode;\r\n  /**\r\n   * Replaces the trailing adornment with a spinner — for a field doing its own\r\n   * async work (an availability check, a lookup) rather than a form-wide submit.\r\n   */\r\n  loading?: boolean;\r\n  ref?: Ref<HTMLInputElement>;\r\n}\r\n\r\nexport function Input(allProps: InputProps) {\r\n  const {\r\n    className,\r\n    size = \"md\",\r\n    leading,\r\n    trailing,\r\n    loading = false,\r\n    ref,\r\n    ...props\r\n  } = allProps;\r\n  const trailingContent = loading ? <Spinner size=\"sm\" /> : trailing;\r\n  const hasLeading = Boolean(leading);\r\n  const hasTrailing = Boolean(trailingContent);\r\n\r\n  /* STRUCTURE FOLLOWS PROP PRESENCE; PADDING FOLLOWS CURRENT VALUE. These look\r\n     like the same question and are not, and conflating them cost a real bug.\r\n\r\n     This component returns a BARE <input> when unadorned and a WRAPPED one\r\n     otherwise. React reconciles by element type at a position, so flipping\r\n     between those two shapes unmounts the real <input> and mounts a fresh one\r\n     — the DOM node the user is typing into is destroyed, taking focus and the\r\n     caret with it.\r\n\r\n     That is not hypothetical. A consumer rendering\r\n     `trailing={canReveal ? <IconButton/> : undefined}` — a reveal toggle that\r\n     appears once there is something to reveal — flips `canReveal` on the FIRST\r\n     KEYSTROKE, so the field lost focus on the one keystroke that mattered.\r\n\r\n     Keying the wrapper off whether the prop was PASSED, rather than whether it\r\n     currently holds a node, makes the shape stable for the whole life of the\r\n     component. It has to be `\"trailing\" in allProps` and not\r\n     `trailing !== undefined`: destructuring collapses `trailing={undefined}`\r\n     and an omitted `trailing` into the same `undefined`, and the conditional\r\n     case — the one with the bug — is precisely the one that passes\r\n     `undefined`. The first attempt at this fix used `!== undefined` and was a\r\n     no-op for the exact case it was written for; the test below is what caught\r\n     that. A consumer that never passes an adornment still gets exactly the\r\n     bare input it always got — nothing about that path changes. `hasLeading` /\r\n     `hasTrailing` keep tracking the current value, because the padding really\r\n     should come and go with the icon. */\r\n  const adorned = \"leading\" in allProps || \"trailing\" in allProps || loading;\r\n\r\n  const input = (\r\n    <BaseInput\r\n      ref={ref}\r\n      className={cn(control({ size, hasLeading, hasTrailing }), className)}\r\n      {...props}\r\n    />\r\n  );\r\n\r\n  if (!adorned) return input;\r\n\r\n  return (\r\n    <div className=\"group/input relative flex w-full min-w-0 items-center\">\r\n      {hasLeading && <span className={adornment({ side: \"leading\", size })}>{leading}</span>}\r\n      {input}\r\n      {hasTrailing && (\r\n        /* Trailing content is often interactive (a clear button, a reveal\r\n           toggle), so pointer events are restored here even though the\r\n           wrapper disables them for the common decorative case. */\r\n        <span className={cn(adornment({ side: \"trailing\", size }), \"[&>*]:pointer-events-auto\")}>\r\n          {trailingContent}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst textarea = tv({\r\n  base: [\r\n    \"w-full min-w-0 font-sans text-primary\",\r\n    \"border border-field-border bg-field\",\r\n    \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\r\n    \"placeholder:text-field-placeholder\",\r\n    \"hover:not-disabled:border-field-border-hover hover:not-disabled:bg-field-hover\",\r\n    \"focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)] focus:outline-none\",\r\n    \"disabled:cursor-not-allowed disabled:opacity-45\",\r\n    \"data-invalid:border-danger data-invalid:focus:shadow-[0_0_0_3px_var(--danger-subtle)]\",\r\n    \"read-only:bg-surface-sunken\",\r\n  ],\r\n  variants: {\r\n    size: {\r\n      sm: \"rounded-md px-3 py-2 text-xs\",\r\n      md: \"rounded-md px-3.5 py-2.5 text-sm\",\r\n      lg: \"rounded-lg px-4 py-3 text-md\",\r\n    },\r\n    /**\r\n     * `auto` uses field-sizing, which grows the box with its content with no\r\n     * JS, no hidden mirror element and no scroll-height measuring — the three\r\n     * things every auto-resize textarea implementation has needed until now.\r\n     * Engines without it simply keep the fixed height and a scrollbar, which\r\n     * is the correct graceful degradation.\r\n     */\r\n    resize: {\r\n      none: \"resize-none\",\r\n      vertical: \"resize-y\",\r\n      auto: \"resize-none field-sizing-content\",\r\n    },\r\n  },\r\n  defaultVariants: { size: \"md\", resize: \"vertical\" },\r\n});\r\n\r\nexport interface TextareaProps\r\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">,\r\n    VariantProps<typeof textarea> {\r\n  ref?: Ref<HTMLTextAreaElement>;\r\n  /**\r\n   * DX-5596: Ctrl+Enter (Cmd+Enter on a Mac) runs `onSubmit` and a hint line under the box names it\r\n   * (\"Ctrl+Enter to post\"). Same contract as `MarkdownEditor`'s `submit`: `disabled` is the caller's\r\n   * own can't-submit rule, the chord is swallowed while it is true. Without it the box has no\r\n   * submit shortcut and no hint line.\r\n   */\r\n  submit?: SubmitAction;\r\n}\r\n\r\nexport function Textarea({ className, size, resize, rows = 4, ref, submit, onKeyDown, ...props }: TextareaProps) {\r\n  const box = (\r\n    <BaseInput\r\n      ref={ref as Ref<HTMLInputElement>}\r\n      render={<textarea rows={rows} />}\r\n      className={cn(textarea({ size, resize }), className)}\r\n      {...(props as BaseInput.Props)}\r\n      onKeyDown={(event) => {\r\n        (onKeyDown as ((e: typeof event) => void) | undefined)?.(event);\r\n        handleSubmitChord(event as unknown as KeyboardEvent<HTMLElement>, submit);\r\n      }}\r\n    />\r\n  );\r\n  if (!submit) return box;\r\n  return (\r\n    <div className=\"flex flex-col gap-1\">\r\n      {box}\r\n      <SubmitHint submit={submit} />\r\n    </div>\r\n  );\r\n}\r\n"],"names":["control","tv","adornment","Input","allProps","className","size","leading","trailing","loading","ref","props","trailingContent","jsx","Spinner","hasLeading","hasTrailing","adorned","input","BaseInput","cn","jsxs","textarea","Textarea","resize","rows","submit","onKeyDown","box","event","handleSubmitChord","SubmitHint"],"mappings":"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"}

package/dist/components/LegalDocument.js

@@ -0,0 +1,155 @@
+import { jsxs as n, jsx as t, Fragment as w } from "react/jsx-runtime";
+import { useMemo as h, useState as y, useEffect as I } from "react";
+import { cn as p } from "../lib/cn.js";
+import { countUnconfirmed as C, legalSectionAnchor as o, splitUnconfirmed as S, isAllCaps as A } from "../lib/legal-document.js";
+import { Callout as $ } from "./Callout.js";
+import { SectionNav as k } from "./SectionNav.js";
+import { useUiStrings as D } from "../lib/i18n/provider.js";
+import { useNumberFormat as E } from "../lib/i18n/number-format.js";
+function u() {
+  const e = window.location.hash.slice(1);
+  if (e)
+    try {
+      return decodeURIComponent(e);
+    } catch {
+      return;
+    }
+}
+function T({
+  document: e,
+  titleAs: r = "h1",
+  contentsLabel: a,
+  onNavigate: l,
+  className: c
+}) {
+  const s = D().legalDocument, g = E(), d = h(() => C(e), [e]), [b, f] = B(), v = h(
+    () => [
+      {
+        items: e.sections.map((i) => ({
+          id: o(i.number),
+          label: `${i.number}. ${i.title}`,
+          icon: "file-text",
+          href: `#${o(i.number)}`,
+          onClick: (N) => {
+            const x = o(i.number);
+            f(x), l?.(x, N);
+          }
+        }))
+      }
+    ],
+    [e.sections, l, f]
+  );
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-legal-document": "",
+      className: p("lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-12 xl:grid-cols-[20rem_minmax(0,1fr)]", c),
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-legal-screen-only": "",
+            className: "mb-6 lg:sticky lg:top-[var(--legal-document-toc-top,1rem)] lg:mb-0 lg:max-h-[calc(100dvh-var(--legal-document-toc-top,1rem)-1rem)] lg:self-start lg:overflow-y-auto",
+            children: /* @__PURE__ */ t(k, { label: a ?? s.contents, sections: v, activeId: b })
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "min-w-0", children: [
+          d > 0 ? /* @__PURE__ */ t("div", { "data-legal-screen-only": "", className: "mb-6 max-w-3xl", children: /* @__PURE__ */ t(
+            $,
+            {
+              tone: "warning",
+              title: s.unconfirmedTitle(d, g(d)),
+              children: s.unconfirmedBody
+            }
+          ) }) : null,
+          /* @__PURE__ */ n("article", { className: "max-w-3xl text-sm leading-7 text-primary", children: [
+            /* @__PURE__ */ n("header", { className: "mb-10 border-b border-border-subtle pb-8", children: [
+              /* @__PURE__ */ t(r, { className: "font-display text-2xl font-bold tracking-tight text-primary sm:text-3xl", children: e.title }),
+              /* @__PURE__ */ t("p", { className: "mt-2 font-display text-md font-semibold tracking-wide text-secondary", children: e.issuer }),
+              /* @__PURE__ */ n("p", { className: "mt-4 text-xs text-tertiary", children: [
+                s.effectiveDate,
+                " ",
+                /* @__PURE__ */ t(m, { text: e.effectiveDate })
+              ] }),
+              /* @__PURE__ */ n("p", { className: "text-xs text-tertiary", children: [
+                s.version,
+                " ",
+                /* @__PURE__ */ t(m, { text: e.version })
+              ] })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-10", children: e.sections.map((i) => /* @__PURE__ */ t(F, { section: i }, i.number)) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function F({ section: e }) {
+  const r = o(e.number);
+  return /* @__PURE__ */ n("section", { id: r, "aria-labelledby": `${r}-heading`, className: "scroll-mt-[var(--legal-document-toc-top,1.5rem)]", children: [
+    /* @__PURE__ */ n("h2", { id: `${r}-heading`, className: "mb-4 font-display text-md font-bold tracking-wide text-primary", children: [
+      /* @__PURE__ */ n("span", { className: "tabular-nums text-accent-text", children: [
+        e.number,
+        "."
+      ] }),
+      " ",
+      e.title
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: e.blocks.map((a, l) => /* @__PURE__ */ t(U, { block: a }, l)) })
+  ] });
+}
+function U({ block: e }) {
+  return e.kind === "list" ? /* @__PURE__ */ t("ul", { className: "flex list-disc flex-col gap-2 pl-6 marker:text-tertiary", children: e.items.map((r, a) => /* @__PURE__ */ t("li", { className: "pl-1", children: /* @__PURE__ */ t(m, { text: r }) }, a)) }) : /* @__PURE__ */ n(
+    "p",
+    {
+      id: e.clause ? o(e.clause.number) : void 0,
+      className: p(
+        "scroll-mt-[var(--legal-document-toc-top,1.5rem)]",
+        A(e.text) && "border-l-2 border-border-strong pl-4 text-xs leading-6 tracking-[0.02em] text-secondary"
+      ),
+      children: [
+        e.clause ? /* @__PURE__ */ n(w, { children: [
+          /* @__PURE__ */ n("strong", { className: "font-semibold text-primary", children: [
+            e.clause.number,
+            " ",
+            e.clause.heading
+          ] }),
+          " "
+        ] }) : null,
+        /* @__PURE__ */ t(m, { text: e.text })
+      ]
+    }
+  );
+}
+function m({ text: e }) {
+  return S(e).map(
+    (r, a) => r.unconfirmed ? /* @__PURE__ */ t(
+      "mark",
+      {
+        "data-unconfirmed": "",
+        className: "rounded-sm bg-warning-subtle px-0.5 text-warning-text underline decoration-warning-border decoration-dashed underline-offset-4",
+        children: r.text
+      },
+      a
+    ) : r.text
+  );
+}
+function B() {
+  const e = y(void 0), r = e[1];
+  return I(() => {
+    r(u());
+    const a = requestAnimationFrame(() => {
+      const c = u();
+      c && window.document.getElementById(c)?.scrollIntoView({ block: "start" });
+    }), l = () => {
+      r(u());
+    };
+    return window.addEventListener("hashchange", l), () => {
+      cancelAnimationFrame(a), window.removeEventListener("hashchange", l);
+    };
+  }, [r]), e;
+}
+export {
+  T as LegalDocument
+};
+//# sourceMappingURL=LegalDocument.js.map

package/dist/components/LegalDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LegalDocument.js","sources":["../../src/components/LegalDocument.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type MouseEvent, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport {\n  countUnconfirmed,\n  isAllCaps,\n  legalSectionAnchor,\n  splitUnconfirmed,\n  type LegalBlock,\n  type LegalDocumentValue,\n  type LegalSection,\n} from \"../lib/legal-document\";\nimport type { NavSection } from \"./AppShell\";\nimport { Callout } from \"./Callout\";\nimport { SectionNav } from \"./SectionNav\";\n\n/* ============================================================================\n   LEGAL DOCUMENT — one version of a legal text, rendered. DX-4022.\n\n   THE WORDS COME FROM DATA, THE LOOK COMES FROM HERE. Nothing in this file\n   writes a word of the document: every sentence is a string in a\n   `LegalDocumentValue`, and this only decides how it sits on the page: run-in\n   clause headings, anchors, bullets, a rule beside an all-caps disclaimer, a\n   visible flag on each value the draft has not filled in.\n\n   ANCHORS ARE KEYED ON THE SECTION NUMBER (`section-7`, `section-7-2`), never\n   the title, so a link a lawyer pastes into an email survives a heading being\n   reworded in the next version. `legalSectionAnchor` is exported so a consumer\n   that cites \"Section 4\" elsewhere links to exactly this id.\n\n   THE HEADING LEVELS. Inside an app shell the page's `<h1>` belongs to the\n   shell's top bar, and the shell allows exactly one; there `titleAs=\"p\"` sets\n   the document's own title line as a paragraph. On a page with no bar the title\n   line IS the `<h1>` (the default). Either way each section is an `<h2>`\n   directly under it, so no level is skipped.\n\n   THE CONTENTS ARE `SectionNav`, so they follow its one-form-at-a-time rule: a\n   sticky column from `lg`, one control that opens the list below it. The\n   two-column layout switches at that same `lg` for the same reason, so the\n   column exists exactly when the list is drawn as one.\n\n   PRINTING. `legal-document.css` is keyed on `[data-legal-document]` being on\n   the page: when it is, printing outputs the document and nothing around it,\n   whatever chrome that is.\n   ========================================================================= */\n\nexport interface LegalDocumentProps {\n  document: LegalDocumentValue;\n  /**\n   * The element the title line is. `h1` when the document is the page's own\n   * heading, `p` when something else (an app shell's top bar) already owns the\n   * page's one `h1`.\n   */\n  titleAs?: \"h1\" | \"p\";\n  /** Names the contents list, and is the collapsed control's text until a section is current. */\n  contentsLabel?: string;\n  /**\n   * Runs when a contents link is clicked, with the section's anchor id and the\n   * click. The links are real `<a href=\"#section-N\">`, which a path-based\n   * router leaves to the browser. A router that owns the fragment itself (a\n   * hash router) suppresses the browser's jump here, as `SectionNav` documents\n   * for its own rows, and scrolls the section into view instead.\n   */\n  onNavigate?: (anchor: string, event: MouseEvent<HTMLAnchorElement>) => void;\n  className?: string;\n}\n\n/**\n * The fragment currently in the address bar, as an element id, or `undefined`.\n *\n * A fragment that is not valid percent-encoding (a link cut off mid-escape)\n * names no element, so it reads as no fragment: `decodeURIComponent` would\n * throw on it, and this runs during render.\n */\nfunction readHashId(): string | undefined {\n  const raw = window.location.hash.slice(1);\n  if (!raw) return undefined;\n  try {\n    return decodeURIComponent(raw);\n  } catch {\n    return undefined;\n  }\n}\n\nexport function LegalDocument({\n  document: legal,\n  titleAs: Title = \"h1\",\n  contentsLabel,\n  onNavigate,\n  className,\n}: LegalDocumentProps) {\n  const strings = useUiStrings().legalDocument;\n  const fmt = useNumberFormat();\n  const unconfirmed = useMemo(() => countUnconfirmed(legal), [legal]);\n  const [currentId, setCurrentId] = useCurrentSectionId();\n\n  const contents: NavSection[] = useMemo(\n    () => [\n      {\n        items: legal.sections.map((section) => ({\n          id: legalSectionAnchor(section.number),\n          label: `${section.number}. ${section.title}`,\n          icon: \"file-text\",\n          href: `#${legalSectionAnchor(section.number)}`,\n          onClick: (event: MouseEvent<HTMLAnchorElement>) => {\n            const anchor = legalSectionAnchor(section.number);\n            setCurrentId(anchor);\n            onNavigate?.(anchor, event);\n          },\n        })),\n      },\n    ],\n    [legal.sections, onNavigate, setCurrentId],\n  );\n\n  return (\n    <div\n      data-legal-document=\"\"\n      className={cn(\"lg:grid lg:grid-cols-[16rem_minmax(0,1fr)] lg:gap-12 xl:grid-cols-[20rem_minmax(0,1fr)]\", className)}\n    >\n      <div\n        data-legal-screen-only=\"\"\n        className=\"mb-6 lg:sticky lg:top-[var(--legal-document-toc-top,1rem)] lg:mb-0 lg:max-h-[calc(100dvh-var(--legal-document-toc-top,1rem)-1rem)] lg:self-start lg:overflow-y-auto\"\n      >\n        <SectionNav label={contentsLabel ?? strings.contents} sections={contents} activeId={currentId} />\n      </div>\n\n      <div className=\"min-w-0\">\n        {unconfirmed > 0 ? (\n          <div data-legal-screen-only=\"\" className=\"mb-6 max-w-3xl\">\n            <Callout\n              tone=\"warning\"\n              title={strings.unconfirmedTitle(unconfirmed, fmt(unconfirmed))}\n            >\n              {strings.unconfirmedBody}\n            </Callout>\n          </div>\n        ) : null}\n\n        <article className=\"max-w-3xl text-sm leading-7 text-primary\">\n          <header className=\"mb-10 border-b border-border-subtle pb-8\">\n            <Title className=\"font-display text-2xl font-bold tracking-tight text-primary sm:text-3xl\">\n              {legal.title}\n            </Title>\n            <p className=\"mt-2 font-display text-md font-semibold tracking-wide text-secondary\">{legal.issuer}</p>\n            <p className=\"mt-4 text-xs text-tertiary\">\n              {strings.effectiveDate} <Prose text={legal.effectiveDate} />\n            </p>\n            <p className=\"text-xs text-tertiary\">\n              {strings.version} <Prose text={legal.version} />\n            </p>\n          </header>\n\n          <div className=\"flex flex-col gap-10\">\n            {legal.sections.map((section) => (\n              <Section key={section.number} section={section} />\n            ))}\n          </div>\n        </article>\n      </div>\n    </div>\n  );\n}\n\nfunction Section({ section }: { section: LegalSection }) {\n  const anchor = legalSectionAnchor(section.number);\n  return (\n    <section id={anchor} aria-labelledby={`${anchor}-heading`} className=\"scroll-mt-[var(--legal-document-toc-top,1.5rem)]\">\n      <h2 id={`${anchor}-heading`} className=\"mb-4 font-display text-md font-bold tracking-wide text-primary\">\n        <span className=\"tabular-nums text-accent-text\">{section.number}.</span> {section.title}\n      </h2>\n      <div className=\"flex flex-col gap-4\">\n        {section.blocks.map((block, index) => (\n          <Block key={index} block={block} />\n        ))}\n      </div>\n    </section>\n  );\n}\n\nfunction Block({ block }: { block: LegalBlock }) {\n  if (block.kind === \"list\") {\n    return (\n      <ul className=\"flex list-disc flex-col gap-2 pl-6 marker:text-tertiary\">\n        {block.items.map((item, index) => (\n          <li key={index} className=\"pl-1\">\n            <Prose text={item} />\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  return (\n    <p\n      id={block.clause ? legalSectionAnchor(block.clause.number) : undefined}\n      className={cn(\n        \"scroll-mt-[var(--legal-document-toc-top,1.5rem)]\",\n        isAllCaps(block.text) &&\n          \"border-l-2 border-border-strong pl-4 text-xs leading-6 tracking-[0.02em] text-secondary\",\n      )}\n    >\n      {block.clause ? (\n        <>\n          <strong className=\"font-semibold text-primary\">\n            {block.clause.number} {block.clause.heading}\n          </strong>{\" \"}\n        </>\n      ) : null}\n      <Prose text={block.text} />\n    </p>\n  );\n}\n\n/** Text, with each unfilled bracketed value marked so it cannot pass for an agreed term. */\nfunction Prose({ text }: { text: string }): ReactNode {\n  return splitUnconfirmed(text).map((run, index) =>\n    run.unconfirmed ? (\n      <mark\n        key={index}\n        data-unconfirmed=\"\"\n        className=\"rounded-sm bg-warning-subtle px-0.5 text-warning-text underline decoration-warning-border decoration-dashed underline-offset-4\"\n      >\n        {run.text}\n      </mark>\n    ) : (\n      run.text\n    ),\n  );\n}\n\n/**\n * The section the contents mark as current: the id in the address bar's\n * fragment, scrolled to on arrival, and kept in step as it changes.\n *\n * The browser's own fragment scroll runs at load, before this has rendered the\n * element the fragment names, so a shared deep link would otherwise open at the\n * top. A later in-page jump needs no help: the contents are real\n * `<a href=\"#...\">` links, so the browser scrolls the right box itself and\n * fires `hashchange`, which only moves the contents' current-section marker.\n * The arrival scroll is deferred a frame so a layout that resets its scroller\n * on mount cannot undo it.\n */\nfunction useCurrentSectionId() {\n  /* DX-5411: NO fragment on the first render. A server has no address bar, and a hydrating client must draw what the server\n     drew, so the fragment is read in the effect, after hydration, like every other browser-only read here. */\n  const state = useState<string | undefined>(undefined);\n  const setId = state[1];\n\n  useEffect(() => {\n    setId(readHashId());\n    const frame = requestAnimationFrame(() => {\n      const target = readHashId();\n      if (target) window.document.getElementById(target)?.scrollIntoView({ block: \"start\" });\n    });\n    const onHashChange = () => {\n      setId(readHashId());\n    };\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener(\"hashchange\", onHashChange);\n    };\n  }, [setId]);\n\n  return state;\n}\n"],"names":["readHashId","raw","LegalDocument","legal","Title","contentsLabel","onNavigate","className","strings","useUiStrings","fmt","useNumberFormat","unconfirmed","useMemo","countUnconfirmed","currentId","setCurrentId","useCurrentSectionId","contents","section","legalSectionAnchor","event","anchor","jsxs","cn","jsx","SectionNav","Callout","Prose","Section","block","index","Block","item","isAllCaps","Fragment","text","splitUnconfirmed","run","state","useState","setId","useEffect","frame","target","onHashChange"],"mappings":"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"}