@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/markdown/Affordances.js

@@ -0,0 +1,398 @@
+import { jsx as l, jsxs as b, Fragment as j } from "react/jsx-runtime";
+import { useState as v, useRef as z, useEffect as R, useMemo as N, useCallback as U, useLayoutEffect as I } from "react";
+import { Menu as $, MenuGroup as S, MenuItem as T, MenuSeparator as G } from "../Menu.js";
+import { Button as q } from "../Button.js";
+import { Icon as y } from "../Icon.js";
+import { Tooltip as X } from "../Popover.js";
+import { cn as L } from "../../lib/cn.js";
+import { listLanguages as K } from "../../lib/syntax/index.js";
+import { isAttachmentReference as V } from "../../lib/markdown/attachments.js";
+import { isUnstoredImageSrc as W } from "../../lib/markdown/images.js";
+import { marksAt as F, constructAt as O, blockAt as M, convertBlock as Y, unwrapConstruct as J, setFenceLanguage as Q, editConstruct as Z } from "../../lib/markdown/convert.js";
+import { toggleBold as ee, toggleItalic as te, toggleCode as ne, toggleStrike as oe, alignColumn as B, insertRow as re, insertColumn as le, deleteRow as ie, deleteColumn as ce, deleteTable as ae } from "../../lib/markdown/commands.js";
+import { sourceOffsetAt as D, domPointAt as se } from "../../lib/markdown/position.js";
+import { useUiStrings as C } from "../../lib/i18n/provider.js";
+function Ee(e, t) {
+  const [i, n] = v(0), r = z(null);
+  return R(() => {
+    if (!e) return;
+    const a = e.root.ownerDocument, o = () => n((u) => u + 1);
+    return a.addEventListener("selectionchange", o), () => a.removeEventListener("selectionchange", o);
+  }, [e]), N(() => {
+    if (!e) return { source: "", caret: null, ranged: !1, block: null, construct: null, marks: /* @__PURE__ */ new Set() };
+    const a = e.getSource(), o = e.getSelection();
+    if (!o) {
+      const s = r.current;
+      return !s || s.caret === null || s.caret > a.length ? { source: a, caret: null, ranged: !1, block: null, construct: null, marks: /* @__PURE__ */ new Set() } : {
+        source: a,
+        caret: s.caret,
+        ranged: !1,
+        block: M(a, s.caret),
+        construct: O(e.getProjection(), s.caret),
+        marks: F(e.getProjection(), s.caret)
+      };
+    }
+    const u = Math.min(o.anchor, o.head), c = {
+      source: a,
+      caret: u,
+      ranged: o.anchor !== o.head,
+      block: M(a, u),
+      construct: O(e.getProjection(), u),
+      marks: F(e.getProjection(), u)
+    };
+    return r.current = c, c;
+  }, [e, i, t]);
+}
+const E = [
+  { kind: "paragraph", name: "paragraph", icon: "text" },
+  { kind: "heading", level: 1, name: "heading1", icon: "heading-1" },
+  { kind: "heading", level: 2, name: "heading2", icon: "heading-2" },
+  { kind: "heading", level: 3, name: "heading3", icon: "heading-3" },
+  { kind: "bullet", name: "bulletList", icon: "list" },
+  { kind: "ordered", name: "numberedList", icon: "list-ordered" },
+  { kind: "task", name: "taskList", icon: "list-checks" },
+  { kind: "quote", name: "blockquote", icon: "quote" },
+  { kind: "code", name: "codeBlock", icon: "terminal" },
+  { kind: "table", name: "table", icon: "table" },
+  { kind: "rule", name: "horizontalRule", icon: "minus" }
+], A = (e, t) => !!t && t.kind === e.kind && (e.level === void 0 || t.level === e.level);
+function Ae({ surface: e, state: t, run: i, container: n, external: r }) {
+  const a = C().markdownAffordances, [o, u] = v(null), [c, s] = v(null), [m, p] = v(!1), h = U(
+    (d) => {
+      if (!e || !n) return null;
+      const f = H(e, d);
+      return f === null ? null : { top: f.top - n.getBoundingClientRect().top + n.scrollTop, height: f.height };
+    },
+    [e, n]
+  );
+  R(() => {
+    if (!e || !n || m) return;
+    const d = e.root, f = (x) => {
+      const P = be(e, x.clientX, x.clientY);
+      P !== null && (s(P), u(h(P)));
+    }, w = () => {
+      if (t.caret === null) return u(null);
+      s(t.caret), u(h(t.caret));
+    };
+    return d.addEventListener("pointermove", f), n.addEventListener("pointerleave", w), () => {
+      d.removeEventListener("pointermove", f), n.removeEventListener("pointerleave", w);
+    };
+  }, [e, n, h, m, t.caret]), R(() => {
+    m || t.caret === null || (s(t.caret), u(h(t.caret)));
+  }, [t.caret, h, m]);
+  const g = N(
+    () => e && c !== null ? M(e.getSource(), c) : null,
+    [e, c, t.source]
+  );
+  return o === null || c === null ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      className: L("absolute z-10 flex items-center", r ? "right-full" : "left-0"),
+      style: { top: o.top, height: o.height },
+      children: /* @__PURE__ */ l(
+        $,
+        {
+          open: m,
+          onOpenChange: p,
+          side: "right",
+          align: "start",
+          trigger: (
+            /* `Button`, not a hand-rolled `<button>` — the SAME control
+               `BarButton` (below) and the header toolbar use, which is what
+               gives this a real resting/hover/focus/pressed identity instead
+               of a bare icon with a manual opacity fade standing in for one.
+               The global `:focus-visible` rule (authored.css) covers focus for
+               free; `Button` itself supplies hover, active-press translate and
+               the ripple. `more-vertical` replaces `grip-vertical`: this opens
+               a menu, it does not drag anything, and a grip glyph told the
+               opposite story. */
+            /* @__PURE__ */ l(
+              q,
+              {
+                variant: "ghost",
+                size: "sm",
+                iconOnly: !0,
+                "aria-label": a.lineType(g ? ue(g, a.blockTypes) : a.blockTypes.paragraph),
+                onMouseDown: (d) => d.preventDefault(),
+                onClick: () => p(!0),
+                className: L(m && "bg-control-subtle text-control-text hover:bg-control-subtle-hover"),
+                children: /* @__PURE__ */ l(y, { name: "more-vertical", className: "h-3.5 w-3.5" })
+              }
+            )
+          ),
+          children: /* @__PURE__ */ l(S, { label: a.turnInto, children: E.map((d) => /* @__PURE__ */ b(
+            T,
+            {
+              selected: A(d, g),
+              onClick: () => {
+                e?.root.focus(), e?.apply({ start: c, end: c, text: "" }, { anchor: c, head: c }), i(Y(d.kind, { level: d.level }));
+              },
+              children: [
+                /* @__PURE__ */ l(y, { name: d.icon, className: "mr-2 h-4 w-4 text-tertiary" }),
+                a.blockTypes[d.name]
+              ]
+            },
+            `${d.kind}${d.level ?? ""}`
+          )) })
+        }
+      )
+    }
+  );
+}
+function ue(e, t) {
+  const i = E.find((n) => A(n, e));
+  return i ? t[i.name] : e.kind;
+}
+const de = () => !1;
+function Ie({ surface: e, state: t, run: i, container: n, external: r, isFileUrl: a }) {
+  const o = t.construct && !W(t.construct.target) && !V(t.construct.kind, t.construct.target, { isFileUrl: a ?? de }) ? t.construct : null, u = o ?? (t.block?.kind === "code" || t.block?.kind === "table" ? t.block : null), c = z(null), [s, m] = v(null), [p, h] = v("above");
+  return I(() => {
+    if (h("above"), !e || !n || !u) {
+      m(null);
+      return;
+    }
+    const g = o ? fe(e, o) : null;
+    (() => {
+      const f = o ? g && ke(g) : H(e, u.start);
+      if (!f) {
+        m(null);
+        return;
+      }
+      const w = n.getBoundingClientRect().top, x = r ? n.offsetTop : n.scrollTop;
+      m({
+        top: f.top - w + x,
+        bottom: f.bottom - w + x
+      });
+    })();
+  }, [e, n, u, o, t.source, r]), I(() => {
+    if (!s || p === "below" || !n) return;
+    const g = c.current?.getBoundingClientRect(), d = n.getBoundingClientRect().top;
+    g && g.top < d && h("below");
+  }, [s, p, n]), !u || s === null || !e ? null : /* @__PURE__ */ b(
+    "div",
+    {
+      ref: c,
+      className: L(
+        "absolute left-8 z-20 flex items-center gap-1 rounded-lg border border-border-subtle",
+        "bg-surface px-1.5 py-1 shadow-lg"
+      ),
+      style: p === "above" ? { top: s.top, transform: "translateY(calc(-100% - 6px))" } : { top: s.bottom + 6 },
+      onMouseDown: (g) => g.preventDefault(),
+      children: [
+        o && /* @__PURE__ */ l(me, { surface: e, construct: o, run: i }),
+        !o && t.block?.kind === "code" && /* @__PURE__ */ l(ge, { language: t.block.language ?? "", run: i }),
+        !o && t.block?.kind === "table" && /* @__PURE__ */ l(pe, { run: i })
+      ]
+    }
+  );
+}
+function me({
+  surface: e,
+  construct: t,
+  run: i
+}) {
+  const n = C().markdownAffordances, r = t.start, a = (o) => () => Z(e.getProjection(), r, o);
+  return /* @__PURE__ */ b(j, { children: [
+    /* @__PURE__ */ l(
+      "input",
+      {
+        "aria-label": t.kind === "image" ? n.imageSource : n.linkDestination,
+        defaultValue: t.target,
+        placeholder: "https://…",
+        onMouseDown: (o) => o.stopPropagation(),
+        onKeyDown: (o) => {
+          o.key === "Enter" && (o.preventDefault(), i(a({ target: o.target.value })));
+        },
+        onBlur: (o) => i(a({ target: o.target.value })),
+        className: L(
+          "h-7 w-56 rounded border border-border-subtle bg-surface-inset px-2 text-sm",
+          "text-primary outline-none focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+        )
+      },
+      `${r}-${t.target}`
+    ),
+    /* @__PURE__ */ l(
+      k,
+      {
+        icon: t.kind === "image" ? "link" : "image",
+        label: t.kind === "image" ? n.turnIntoLink : n.turnIntoImage,
+        onClick: () => i(a({ kind: t.kind === "image" ? "link" : "image" }))
+      }
+    ),
+    /* @__PURE__ */ l(
+      k,
+      {
+        icon: "unlink",
+        label: t.kind === "image" ? n.removeImage : n.removeLink,
+        onClick: () => i(() => J(e.getProjection(), r))
+      }
+    )
+  ] });
+}
+function ge({ language: e, run: t }) {
+  const i = C().markdownAffordances, n = N(() => {
+    const r = K().sort();
+    return e && !r.includes(e) ? [e, ...r] : r;
+  }, [e]);
+  return /* @__PURE__ */ b("label", { className: "flex items-center gap-1.5 px-1 text-xs text-tertiary", children: [
+    i.language,
+    /* @__PURE__ */ b(
+      "select",
+      {
+        "aria-label": i.codeBlockLanguage,
+        value: e,
+        onMouseDown: (r) => r.stopPropagation(),
+        onChange: (r) => t(Q(r.target.value)),
+        className: L(
+          "h-7 rounded border border-border-subtle bg-surface-inset px-1.5 text-sm",
+          "text-primary outline-none focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+        ),
+        children: [
+          /* @__PURE__ */ l("option", { value: "", children: i.noLanguage }),
+          n.map((r) => /* @__PURE__ */ l("option", { value: r, children: r }, r))
+        ]
+      }
+    )
+  ] });
+}
+function pe({ run: e }) {
+  const t = C().markdownAffordances, i = C().markdownEditor.newColumnHeader;
+  return /* @__PURE__ */ b(j, { children: [
+    /* @__PURE__ */ l(k, { icon: "align-left", label: t.alignLeft, onClick: () => e(B("left")) }),
+    /* @__PURE__ */ l(k, { icon: "align-center", label: t.alignCenter, onClick: () => e(B("center")) }),
+    /* @__PURE__ */ l(k, { icon: "align-right", label: t.alignRight, onClick: () => e(B("right")) }),
+    /* @__PURE__ */ l(_, {}),
+    /* @__PURE__ */ l(k, { icon: "insert-row", label: t.insertRowBelow, onClick: () => e(re(!0)) }),
+    /* @__PURE__ */ l(k, { icon: "insert-column", label: t.insertColumnAfter, onClick: () => e(le(!0, i)) }),
+    /* @__PURE__ */ l(_, {}),
+    /* @__PURE__ */ l(k, { icon: "delete-row", label: t.deleteRow, onClick: () => e(ie) }),
+    /* @__PURE__ */ l(k, { icon: "delete-column", label: t.deleteColumn, onClick: () => e(ce) }),
+    /* @__PURE__ */ l(k, { icon: "trash-2", label: t.deleteTable, onClick: () => e(ae) })
+  ] });
+}
+const _ = () => /* @__PURE__ */ l("span", { className: "mx-0.5 h-4 w-px bg-border-subtle" });
+function k({ icon: e, label: t, onClick: i }) {
+  return /* @__PURE__ */ l(X, { content: t, children: /* @__PURE__ */ l(
+    q,
+    {
+      variant: "ghost",
+      size: "sm",
+      "aria-label": t,
+      onMouseDown: (n) => n.preventDefault(),
+      onClick: i,
+      children: /* @__PURE__ */ l(y, { name: e, className: "size-4" })
+    }
+  ) });
+}
+function Fe({ surface: e, state: t, run: i, container: n }) {
+  const r = C().markdownAffordances, [a, o] = v(null);
+  if (R(() => {
+    if (!e || !n) return;
+    const c = e.root, s = (m) => {
+      const p = e.getSelection();
+      if (!(!!p && p.anchor !== p.head)) return;
+      m.preventDefault();
+      const g = n.getBoundingClientRect();
+      o({ x: m.clientX - g.left, y: m.clientY - g.top + n.scrollTop });
+    };
+    return c.addEventListener("contextmenu", s), () => c.removeEventListener("contextmenu", s);
+  }, [e, n]), !a) return null;
+  const u = [
+    // I18N-ALLOW: format id paired with its toggle command
+    ["bold", "bold", ee],
+    // I18N-ALLOW: format id paired with its toggle command
+    ["italic", "italic", te],
+    // I18N-ALLOW: format id paired with its toggle command
+    ["inlineCode", "code", ne],
+    // I18N-ALLOW: format id paired with its toggle command
+    ["strikethrough", "strikethrough", oe]
+  ];
+  return /* @__PURE__ */ l("div", { className: "absolute z-30", style: { left: a.x, top: a.y }, children: /* @__PURE__ */ b(
+    $,
+    {
+      open: !0,
+      onOpenChange: (c) => !c && o(null),
+      side: "bottom",
+      align: "start",
+      trigger: /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "block h-0 w-0" }),
+      children: [
+        /* @__PURE__ */ l(S, { label: r.formatGroup, children: u.map(([c, s, m]) => /* @__PURE__ */ b(
+          T,
+          {
+            onClick: () => {
+              i(m), o(null);
+            },
+            children: [
+              /* @__PURE__ */ l(y, { name: s, className: "mr-2 h-4 w-4 text-tertiary" }),
+              r.format[c]
+            ]
+          },
+          c
+        )) }),
+        /* @__PURE__ */ l(G, {}),
+        /* @__PURE__ */ l(S, { label: r.turnInto, children: E.map((c) => /* @__PURE__ */ b(
+          T,
+          {
+            selected: A(c, t.block),
+            onClick: () => {
+              i(Y(c.kind, { level: c.level })), o(null);
+            },
+            children: [
+              /* @__PURE__ */ l(y, { name: c.icon, className: "mr-2 h-4 w-4 text-tertiary" }),
+              r.blockTypes[c.name]
+            ]
+          },
+          `${c.kind}${c.level ?? ""}`
+        )) })
+      ]
+    }
+  ) });
+}
+function H(e, t) {
+  const i = e.getSource();
+  let n = Math.max(0, Math.min(t, i.length));
+  for (; n > 0 && i[n - 1] !== `
+`; ) n--;
+  const a = e.getCaretMap().stops.find((s) => s >= n) ?? n, o = he(e, a);
+  if (!o) return null;
+  const u = e.root.ownerDocument.createRange();
+  try {
+    u.setStart(o.node, o.offset), u.collapse(!0);
+  } catch {
+    return null;
+  }
+  const c = u.getBoundingClientRect();
+  return c.height === 0 && c.top === 0 ? null : c;
+}
+function fe(e, t) {
+  const i = t.kind === "image" ? "[data-md-src]" : "[data-md-href]";
+  for (const n of e.root.querySelectorAll(i))
+    if (D(e.root, n, 0) === t.start) return n;
+  return null;
+}
+function ke(e) {
+  const t = e.getBoundingClientRect();
+  return t.width === 0 && t.height === 0 ? null : t;
+}
+function he(e, t) {
+  return se(e.root, t);
+}
+function be(e, t, i) {
+  const n = e.root.ownerDocument;
+  if (typeof n.caretPositionFromPoint == "function") {
+    const r = n.caretPositionFromPoint(t, i);
+    return r ? D(e.root, r.offsetNode, r.offset) : null;
+  }
+  if (typeof n.caretRangeFromPoint == "function") {
+    const r = n.caretRangeFromPoint(t, i);
+    return r ? D(e.root, r.startContainer, r.startOffset) : null;
+  }
+  return null;
+}
+export {
+  Ie as ConstructBar,
+  Fe as ConversionMenu,
+  Ae as LineHandle,
+  Ee as useEditorState
+};
+//# sourceMappingURL=Affordances.js.map

package/dist/components/markdown/Affordances.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Affordances.js","sources":["../../../src/components/markdown/Affordances.tsx"],"sourcesContent":["/* ============================================================================\n   AFFORDANCES — the controls that reach what the caret no longer can.\n\n   WHY THESE ARE NOT OPTIONAL. With the markdown never shown, every parameter\n   that lives in markup became unreachable: a link's destination has no caret\n   positions at all, and neither does a fence's language, an image's source or a\n   table's alignment row. The editor can render them and cannot edit them. These\n   three surfaces are where that is given back:\n\n     the line handle    what a LINE is — paragraph, heading, quote, list, fence\n     the construct bar  what a CONSTRUCT holds — destination, language, columns\n     the context menu   what a SELECTION should become\n\n   NONE OF THEM LIVE INSIDE THE EDITABLE. A node in there is either text the\n   projection invariant counts, and a\n   per-line control is not that — a frame can span lines and a line can span\n   frames. They are an overlay in the same positioned container, measured from\n   the DOM rather than inserted into it.\n\n   AND NONE OF THEM TAKE THE CARET. Every control cancels `mousedown`, which is\n   the same trick the toolbar uses: the browser moves focus on mousedown, so\n   cancelling it leaves the selection exactly where the user left it and the\n   command has something to act on. A control that steals the caret is a control\n   that cannot edit the thing it was opened for.\n   ========================================================================= */\n\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Menu, MenuGroup, MenuItem, MenuSeparator } from \"../Menu\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Tooltip } from \"../Popover\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings, type UiStrings } from \"../../lib/i18n\";\nimport { listLanguages } from \"../../lib/syntax\";\nimport { isAttachmentReference } from \"../../lib/markdown/attachments\";\nimport { isUnstoredImageSrc } from \"../../lib/markdown/images\";\nimport {\n  blockAt,\n  constructAt,\n  convertBlock,\n  editConstruct,\n  marksAt,\n  setFenceLanguage,\n  unwrapConstruct,\n  type BlockInfo,\n  type BlockKind,\n  type ConstructInfo,\n  type InlineMark,\n} from \"../../lib/markdown/convert\";\nimport {\n  alignColumn,\n  deleteColumn,\n  deleteRow,\n  deleteTable,\n  insertColumn,\n  insertRow,\n  toggleBold,\n  toggleCode,\n  toggleItalic,\n  toggleStrike,\n  type Command,\n} from \"../../lib/markdown/commands\";\nimport { domPointAt, sourceOffsetAt } from \"../../lib/markdown/position\";\nimport type { MarkdownSurface } from \"../../lib/markdown/surface\";\n\n/* --- What the editor is currently looking at ------------------------------ */\n\nexport interface EditorState {\n  source: string;\n  /** Collapsed caret offset, or null when there is no selection in the host. */\n  caret: number | null;\n  /** True when the selection covers something. */\n  ranged: boolean;\n  block: BlockInfo | null;\n  construct: ConstructInfo | null;\n  /**\n   * Inline marks (bold, italic, inline code, strikethrough) surrounding the\n   * caret's own position — the header toolbar's only source for \"is bold\n   * currently active\", so a toggle button never re-derives it from the\n   * source text a second time. Empty, never null, when there is nothing to\n   * report, which is the harder-to-misuse shape for a caller that only ever\n   * does `marks.has(...)`.\n   */\n  marks: Set<InlineMark>;\n}\n\n/**\n * Tracks source and selection, and derives what is under the caret.\n *\n * `selectionchange` is a DOCUMENT event and the only signal for a caret the\n * browser moved on its own — a click, a drag, an arrow key. It fires for the\n * surface's own restore too, which is harmless here because this only reads.\n */\nexport function useEditorState(surface: MarkdownSurface | null, version: number): EditorState {\n  const [tick, setTick] = useState(0);\n  /**\n   * THE LAST KNOWN CARET, HELD ON PURPOSE.\n   *\n   * The moment a control takes focus — typing a URL into the destination field\n   * — the selection is no longer inside the editable, so the surface reports\n   * none and everything derived from it becomes null. The bar would then\n   * unmount the input the user is typing in, which the probe caught as a field\n   * that vanished between `fill` and `Enter`.\n   *\n   * \"No selection\" is not the same as \"nothing to act on\": it means focus is\n   * somewhere else for a moment, and the document has not moved. Holding the\n   * last reading is what makes a control able to edit the thing it was opened\n   * for — the same reason every button here cancels mousedown.\n   */\n  const held = useRef<EditorState | null>(null);\n\n  useEffect(() => {\n    if (!surface) return;\n    const document = surface.root.ownerDocument;\n    const onSelect = () => setTick((n) => n + 1);\n    document.addEventListener(\"selectionchange\", onSelect);\n    return () => document.removeEventListener(\"selectionchange\", onSelect);\n  }, [surface]);\n\n  return useMemo(() => {\n    void tick;\n    if (!surface) return { source: \"\", caret: null, ranged: false, block: null, construct: null, marks: new Set<InlineMark>() };\n    const source = surface.getSource();\n    const selection = surface.getSelection();\n\n    if (!selection) {\n      const last = held.current;\n      /* Re-derived against the CURRENT source: an edit made from a control\n         moves the offsets the held reading was built from. */\n      if (!last || last.caret === null || last.caret > source.length) {\n        return { source, caret: null, ranged: false, block: null, construct: null, marks: new Set<InlineMark>() };\n      }\n      return {\n        source,\n        caret: last.caret,\n        ranged: false,\n        block: blockAt(source, last.caret),\n        construct: constructAt(surface.getProjection(), last.caret),\n        marks: marksAt(surface.getProjection(), last.caret),\n      };\n    }\n\n    const from = Math.min(selection.anchor, selection.head);\n    const next: EditorState = {\n      source,\n      caret: from,\n      ranged: selection.anchor !== selection.head,\n      block: blockAt(source, from),\n      construct: constructAt(surface.getProjection(), from),\n      marks: marksAt(surface.getProjection(), from),\n    };\n    held.current = next;\n    return next;\n  }, [surface, tick, version]);\n}\n\n/* --- The block types a line can be ---------------------------------------- */\n\ninterface TypeChoice {\n  kind: BlockKind;\n  level?: number;\n  /** Which of the active provider's `markdownAffordances.blockTypes` words names this choice. */\n  name: keyof UiStrings[\"markdownAffordances\"][\"blockTypes\"];\n  icon: string;\n}\n\n/**\n * WHAT THE MENU OFFERS, and the omissions are deliberate. Headings stop at\n * three because four, five and six exist in markdown and not in anyone's\n * document; the hotkeys still reach them. There is no \"image\" — an image is\n * something you insert, not something a paragraph becomes.\n */\nconst TYPES: TypeChoice[] = [\n  { kind: \"paragraph\", name: \"paragraph\", icon: \"text\" },\n  { kind: \"heading\", level: 1, name: \"heading1\", icon: \"heading-1\" },\n  { kind: \"heading\", level: 2, name: \"heading2\", icon: \"heading-2\" },\n  { kind: \"heading\", level: 3, name: \"heading3\", icon: \"heading-3\" },\n  { kind: \"bullet\", name: \"bulletList\", icon: \"list\" },\n  { kind: \"ordered\", name: \"numberedList\", icon: \"list-ordered\" },\n  { kind: \"task\", name: \"taskList\", icon: \"list-checks\" },\n  { kind: \"quote\", name: \"blockquote\", icon: \"quote\" },\n  { kind: \"code\", name: \"codeBlock\", icon: \"terminal\" },\n  { kind: \"table\", name: \"table\", icon: \"table\" },\n  { kind: \"rule\", name: \"horizontalRule\", icon: \"minus\" },\n];\n\nconst sameType = (choice: TypeChoice, block: BlockInfo | null): boolean =>\n  !!block && block.kind === choice.kind && (choice.level === undefined || block.level === choice.level);\n\n/* --- The line handle ------------------------------------------------------ */\n\nexport interface LineHandleProps {\n  surface: MarkdownSurface | null;\n  state: EditorState;\n  run: (command: Command) => void;\n  /** The container the handle is positioned inside. */\n  container: HTMLElement | null;\n  /**\n   * DX-3374: render in the EXTERNAL gutter (`right-full`, the same slot\n   * `EditGutter`'s pencil sits in — see `MarkdownEditor`'s `chrome=\"flush\"`)\n   * rather than the INTERNAL one (`left-0`, inset into the editable's own\n   * padding). Both are still positioned relative to the same `container`; only\n   * which side of its left edge the handle renders on changes. Default\n   * (omitted/false) is the original inset gutter, unchanged for every\n   * `chrome=\"panel\"` consumer.\n   */\n  external?: boolean;\n}\n\n/**\n * A type control beside the line under the pointer, or under the caret.\n *\n * ON HOVER AND ON THE CARET'S LINE, never on every line at once: a permanent\n * gutter of forty identical buttons is noise, and one that follows the pointer\n * is discoverable the moment a pointer moves. The caret's line is included so\n * the control exists for someone who is not using a pointer at all.\n */\nexport function LineHandle({ surface, state, run, container, external }: LineHandleProps) {\n  const strings = useUiStrings().markdownAffordances;\n  const [metrics, setMetrics] = useState<{ top: number; height: number } | null>(null);\n  const [offset, setOffset] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n\n  /**\n   * The line holding `at`, as a box relative to the container.\n   *\n   * HEIGHT TRAVELS WITH THE TOP, not just the y-coordinate, because the button\n   * is now a real control sized off `--control-*` (28-44px depending on\n   * pointer, per the density scale) rather than the old fixed 20px glyph —\n   * taller, on a coarse pointer, than most lines of text. Centring it inside\n   * the line's own box (see the render below) is what keeps it from riding\n   * above or below the text it belongs to at every size the button can be,\n   * without hard-coding that size here and having the two drift apart.\n   */\n  const measure = useCallback(\n    (at: number): { top: number; height: number } | null => {\n      if (!surface || !container) return null;\n      const rect = lineRect(surface, at);\n      if (rect === null) return null;\n      return { top: rect.top - container.getBoundingClientRect().top + container.scrollTop, height: rect.height };\n    },\n    [surface, container],\n  );\n\n  useEffect(() => {\n    if (!surface || !container || open) return;\n    const root = surface.root;\n\n    const onMove = (event: PointerEvent) => {\n      const found = offsetFromPoint(surface, event.clientX, event.clientY);\n      if (found === null) return;\n      setOffset(found);\n      setMetrics(measure(found));\n    };\n\n    /* LEAVING IS SCOPED TO THE CONTAINER, NOT THE EDITABLE, and that is the\n       difference between this working and not. The handle sits in the gutter,\n       OUTSIDE the editable's own box — so moving the pointer onto the handle\n       leaves the editable, and a leave handler bound there hid the control the\n       instant you reached for it. The probe caught it as a menu that never\n       opened: the button unmounted between mousedown and click. */\n    const onLeave = () => {\n      if (state.caret === null) return setMetrics(null);\n      setOffset(state.caret);\n      setMetrics(measure(state.caret));\n    };\n\n    root.addEventListener(\"pointermove\", onMove);\n    container.addEventListener(\"pointerleave\", onLeave);\n    return () => {\n      root.removeEventListener(\"pointermove\", onMove);\n      container.removeEventListener(\"pointerleave\", onLeave);\n    };\n  }, [surface, container, measure, open, state.caret]);\n\n  /* Follow the caret when it moves on its own. */\n  useEffect(() => {\n    if (open || state.caret === null) return;\n    setOffset(state.caret);\n    setMetrics(measure(state.caret));\n  }, [state.caret, measure, open]);\n\n  const block = useMemo(\n    () => (surface && offset !== null ? blockAt(surface.getSource(), offset) : null),\n    [surface, offset, state.source],\n  );\n\n  if (metrics === null || offset === null) return null;\n\n  return (\n    <div\n      className={cn(\"absolute z-10 flex items-center\", external ? \"right-full\" : \"left-0\")}\n      style={{ top: metrics.top, height: metrics.height }}\n    >\n      <Menu\n        open={open}\n        onOpenChange={setOpen}\n        side=\"right\"\n        align=\"start\"\n        trigger={\n          /* `Button`, not a hand-rolled `<button>` — the SAME control\n             `BarButton` (below) and the header toolbar use, which is what\n             gives this a real resting/hover/focus/pressed identity instead\n             of a bare icon with a manual opacity fade standing in for one.\n             The global `:focus-visible` rule (authored.css) covers focus for\n             free; `Button` itself supplies hover, active-press translate and\n             the ripple. `more-vertical` replaces `grip-vertical`: this opens\n             a menu, it does not drag anything, and a grip glyph told the\n             opposite story. */\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            /* `iconOnly` — a real square, unlike `BarButton`/the header\n               toolbar (which stay rectangular, unchanged). Those sit in a\n               horizontal row where that reads fine; this one stands alone in\n               a vertical gutter, and the gutter's own reserved width (see\n               `MarkdownEditor`'s `pl-(--control-sm)`) is sized off the SAME\n               `--control-sm` token specifically because a square button's\n               width equals its height — a non-square button here would make\n               that arithmetic wrong. */\n            iconOnly\n            aria-label={strings.lineType(block ? labelOf(block, strings.blockTypes) : strings.blockTypes.paragraph)}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => setOpen(true)}\n            className={cn(open && \"bg-control-subtle text-control-text hover:bg-control-subtle-hover\")}\n          >\n            <Icon name=\"more-vertical\" className=\"h-3.5 w-3.5\" />\n          </Button>\n        }\n      >\n        <MenuGroup label={strings.turnInto}>\n          {TYPES.map((choice) => (\n            <MenuItem\n              key={`${choice.kind}${choice.level ?? \"\"}`}\n              selected={sameType(choice, block)}\n              onClick={() => {\n                surface?.root.focus();\n                surface?.apply({ start: offset, end: offset, text: \"\" }, { anchor: offset, head: offset });\n                run(convertBlock(choice.kind, { level: choice.level }));\n              }}\n            >\n              <Icon name={choice.icon} className=\"mr-2 h-4 w-4 text-tertiary\" />\n              {strings.blockTypes[choice.name]}\n            </MenuItem>\n          ))}\n        </MenuGroup>\n      </Menu>\n    </div>\n  );\n}\n\nfunction labelOf(block: BlockInfo, blockTypes: UiStrings[\"markdownAffordances\"][\"blockTypes\"]): string {\n  const found = TYPES.find((t) => sameType(t, block));\n  return found ? blockTypes[found.name] : block.kind;\n}\n\nconst NO_FILES = () => false;\n\n/* --- The construct bar ---------------------------------------------------- */\n\nexport interface ConstructBarProps {\n  surface: MarkdownSurface | null;\n  state: EditorState;\n  run: (command: Command) => void;\n  container: HTMLElement | null;\n  /**\n   * Rendered as a SIBLING of `container` (under the same positioned root), not inside it: the container is\n   * `overflow-x-auto`, which clips the bar when the field is one line tall (`chrome=\"flush\"`, see `LineHandle`'s\n   * `external`). Offsets are then taken from the container's own position in that root, with no scroll term.\n   */\n  external?: boolean;\n  /** Which links are stored files (the editor's `isFileUrl`, `blob:` included). A reference to a file gets no bar. */\n  isFileUrl?: (url: string) => boolean;\n}\n\n/**\n * The controls for whatever the caret is inside — a link, an image, a fence or\n * a table.\n *\n * IT APPEARS BY ITSELF rather than waiting for a click, and that is a decision\n * the always-hidden markup forces. A destination the caret cannot enter and a\n * control that has to be found are the same thing as no control at all; a small\n * bar anchored to the construct you are already standing in is the shortest\n * path from \"I want to change this URL\" to changing it.\n */\nexport function ConstructBar({ surface, state, run, container, external, isFileUrl }: ConstructBarProps) {\n  /* DX-3134 / DXUI-74: NO BAR FOR A FILE THAT IS NOT STORED YET. Its \"destination\"\n     is an object URL the editor minted - opaque to the author, meaningful only to\n     this tab - and editing it would cut the reference loose from the upload that\n     is about to replace it. Its controls are on its tile in the attachment strip;\n     once stored, the bar returns with the real URL in it. */\n  /* DXUI-74: NO BAR FOR AN ATTACHMENT REFERENCE EITHER. Right after a paste the caret sits beside the new reference, and\n     the bar would open below the line and cover its tile. The tile holds rename, download and remove, and the URL is\n     not the author's to type. The definition is the strip's own (`isAttachmentReference`); an ordinary typed link\n     keeps its bar. */\n  const construct =\n    state.construct &&\n    !isUnstoredImageSrc(state.construct.target) &&\n    !isAttachmentReference(state.construct.kind, state.construct.target, { isFileUrl: isFileUrl ?? NO_FILES })\n      ? state.construct\n      : null;\n  const anchor = construct ?? (state.block?.kind === \"code\" || state.block?.kind === \"table\" ? state.block : null);\n  const barRef = useRef<HTMLDivElement>(null);\n  const [box, setBox] = useState<{ top: number; bottom: number } | null>(null);\n  /* DX-3142: \"above\" is the placement every bar used before this card, kept as\n     the default so nothing changes for the common case; \"below\" is chosen\n     only when \"above\" is measured (not guessed) not to fit — see the second\n     effect. */\n  const [placement, setPlacement] = useState<\"above\" | \"below\">(\"above\");\n\n  useLayoutEffect(() => {\n    setPlacement(\"above\");\n    if (!surface || !container || !anchor) {\n      setBox(null);\n      return;\n    }\n\n    /* DX-3142: THE CONSTRUCT'S OWN RENDERED BOX, not a caret's insertion point:\n       the widget element's rect is the whole rendered construct. A fence or\n       table has no such widget (its controls anchor to `state.block`, always\n       ordinary text), so that path measures the line. Resolved once. */\n    const widget = construct ? findWidget(surface, construct) : null;\n\n    const measure = () => {\n      const rect = construct ? (widget && anchorRect(widget)) : lineRect(surface, anchor.start);\n      if (!rect) {\n        setBox(null);\n        return;\n      }\n      const containerTop = container.getBoundingClientRect().top;\n      const shift = external ? container.offsetTop : container.scrollTop;\n      setBox({\n        top: rect.top - containerTop + shift,\n        bottom: rect.bottom - containerTop + shift,\n      });\n    };\n    measure();\n  }, [surface, container, anchor, construct, state.source, external]);\n\n  /* DX-3142: FLIP BELOW ONLY WHEN \"ABOVE\" IS MEASURED NOT TO FIT, never by a\n     guessed viewport threshold. The bar always tries \"above\" first — same\n     rendered box, same rule the comment below explains — and only after IT\n     HAS PAINTED does this check whether its own top edge went past the\n     clip boundary above it. Growing DOWN from the construct's bottom needs\n     no such trick: `top` alone, no transform, is already correct without\n     knowing the bar's height in advance.\n\n     THE BOUNDARY IS THE CONTAINER'S OWN TOP, not the browser viewport's.\n     `container` (the \"frame\" div `ConstructBar` positions inside) carries\n     Tailwind's `overflow-x-auto` — and setting only ONE axis's `overflow` to\n     a non-`visible` value makes the OTHER axis compute to `auto` too, per the\n     CSS Overflow spec (never both `visible`). So this container clips\n     vertically as a side effect of a class meant to handle a wide table, and\n     a bar pushed far enough above a tall image can go PAST the container's\n     own top — clipped there, still well within the actual browser viewport,\n     with room to spare below the toolbar above it. Comparing against 0 (the\n     viewport) never caught that; comparing against the clip boundary that is\n     ACTUALLY in effect does.\n\n     KNOWN LIMITATION, left as-is: once flipped, there is no symmetric check\n     that \"below\" itself fits above the container's own BOTTOM clip — a\n     construct tall enough to leave no room on either side (a picture taller\n     than a short editor's whole visible height) can still end up with the\n     bar clipped at the bottom instead of the top. Trying \"above\", then\n     \"below\", then some third strategy is a bigger design question than this\n     card's \"never covers the construct\" scope; this flip already turns the\n     common near-the-top case (the one actually reported) into a genuinely\n     usable bar, which the AC 34037 verification confirmed across three\n     viewport widths in both themes. */\n  useLayoutEffect(() => {\n    if (!box || placement === \"below\" || !container) return;\n    const rect = barRef.current?.getBoundingClientRect();\n    const clipTop = container.getBoundingClientRect().top;\n    if (rect && rect.top < clipTop) setPlacement(\"below\");\n  }, [box, placement, container]);\n\n  if (!anchor || box === null || !surface) return null;\n\n  return (\n    <div\n      ref={barRef}\n      className={cn(\n        \"absolute left-8 z-20 flex items-center gap-1 rounded-lg border border-border-subtle\",\n        \"bg-surface px-1.5 py-1 shadow-lg\",\n      )}\n      /* THE PLACEMENT RULE: anchored to the top of the construct it controls,\n         then pushed up by ITS OWN RENDERED HEIGHT plus a fixed 6px gap — never\n         by a guessed pixel count.\n\n         This used to be `top: top - 38`, a constant sized for the narrowest\n         bar (a link's single input) and never revisited when a wider one was\n         added. `TableControls` renders eight icon buttons and two dividers;\n         measured in a real browser it is 46px tall, not 38 — so the bar's own\n         BOTTOM landed 8px BELOW the table's top edge, on every table, at\n         every position in the editor, because the gap was a fixed number that\n         happened to be right for a different bar. `-38` was never a function\n         of the anchor's position (near the top of a short field vs. deep in a\n         tall one) — it under-shot by the same fixed amount everywhere, which\n         is why the overlap reproduced identically table-at-top,\n         table-at-middle and table-at-bottom.\n\n         `translateY(calc(-100% - 6px))` asks the BROWSER for the bar's own\n         box height at paint time instead of assuming one, so it is exactly\n         right for however many controls a given bar renders — two for a\n         fence's language picker, three for a link/image, or eight for a\n         table — and stays right if a future bar adds a ninth.\n\n         DX-3142: the \"below\" branch needs no such trick — growing down from\n         the construct's own bottom edge is already correct with `top` alone. */\n      style={\n        placement === \"above\"\n          ? { top: box.top, transform: \"translateY(calc(-100% - 6px))\" }\n          : { top: box.bottom + 6 }\n      }\n      onMouseDown={(event) => event.preventDefault()}\n    >\n      {construct && <ConstructControls surface={surface} construct={construct} run={run} />}\n      {!construct && state.block?.kind === \"code\" && <FenceControls language={state.block.language ?? \"\"} run={run} />}\n      {!construct && state.block?.kind === \"table\" && <TableControls run={run} />}\n    </div>\n  );\n}\n\nfunction ConstructControls({\n  surface,\n  construct,\n  run,\n}: {\n  surface: MarkdownSurface;\n  construct: ConstructInfo;\n  run: (command: Command) => void;\n}) {\n  const strings = useUiStrings().markdownAffordances;\n  const at = construct.start;\n  const patch = (next: Parameters<typeof editConstruct>[2]): Command => () =>\n    editConstruct(surface.getProjection(), at, next);\n\n  return (\n    <>\n      <input\n        aria-label={construct.kind === \"image\" ? strings.imageSource : strings.linkDestination}\n        defaultValue={construct.target}\n        key={`${at}-${construct.target}`}\n        placeholder=\"https://…\"\n        onMouseDown={(event) => event.stopPropagation()}\n        onKeyDown={(event) => {\n          if (event.key !== \"Enter\") return;\n          event.preventDefault();\n          run(patch({ target: (event.target as HTMLInputElement).value }));\n        }}\n        onBlur={(event) => run(patch({ target: event.target.value }))}\n        className={cn(\n          \"h-7 w-56 rounded border border-border-subtle bg-surface-inset px-2 text-sm\",\n          \"text-primary outline-none focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n        )}\n      />\n      <BarButton\n        icon={construct.kind === \"image\" ? \"link\" : \"image\"}\n        label={construct.kind === \"image\" ? strings.turnIntoLink : strings.turnIntoImage}\n        onClick={() => run(patch({ kind: construct.kind === \"image\" ? \"link\" : \"image\" }))}\n      />\n      <BarButton\n        icon=\"unlink\"\n        label={construct.kind === \"image\" ? strings.removeImage : strings.removeLink}\n        onClick={() => run(() => unwrapConstruct(surface.getProjection(), at))}\n      />\n    </>\n  );\n}\n\nfunction FenceControls({ language, run }: { language: string; run: (command: Command) => void }) {\n  /* THE REAL REGISTRY, not a hand-written list. A picker offering a language\n     the highlighter does not have is a picker that lies, and this package has\n     shipped that exact defect before — the published bundle went out with no\n     grammars at all and nothing noticed.\n\n     THE DOCUMENT'S OWN WORD IS ALWAYS AN OPTION, even when the registry does\n     not list it. `ts` is an ALIAS the highlighter resolves to `typescript`, and\n     plenty of real documents say `ts` — a select whose value matches no option\n     renders blank, so the picker would have claimed a perfectly good fence had\n     no language at all. Showing the word that is actually in the file is the\n     only reading that cannot be wrong. */\n  const strings = useUiStrings().markdownAffordances;\n  const languages = useMemo(() => {\n    const known = listLanguages().sort();\n    return language && !known.includes(language) ? [language, ...known] : known;\n  }, [language]);\n\n  return (\n    <label className=\"flex items-center gap-1.5 px-1 text-xs text-tertiary\">\n      {strings.language}\n      <select\n        aria-label={strings.codeBlockLanguage}\n        value={language}\n        onMouseDown={(event) => event.stopPropagation()}\n        onChange={(event) => run(setFenceLanguage(event.target.value))}\n        className={cn(\n          \"h-7 rounded border border-border-subtle bg-surface-inset px-1.5 text-sm\",\n          \"text-primary outline-none focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n        )}\n      >\n        <option value=\"\">{strings.noLanguage}</option>\n        {languages.map((name) => (\n          <option key={name} value={name}>\n            {name}\n          </option>\n        ))}\n      </select>\n    </label>\n  );\n}\n\n/**\n * EIGHT ICONS, because the library grew rather than this bar improvising.\n *\n * An earlier version said \"Left / Centre / − Row\" in words: the registry had\n * no alignment glyphs and only one trash can, and adding icons to serve one\n * component looked like the larger of two costs. That reads the wrong way\n * round for a DESIGN SYSTEM — a missing primitive is a gap the library fills\n * once, and every later consumer with a table gets it for free. Seven of the\n * eight controls needed a glyph that did not exist; all seven are now curated\n * like everything else, so the bar spends the width of an icon on each control\n * instead of the width of a word.\n *\n * The two the library still could not simply take are the deletions: Lucide\n * draws no delete-row or delete-column, and a second trash can beside the\n * first says nothing about WHICH axis it removes. `delete-row` /\n * `delete-column` are the fold pair, which is axis-legible — a deleted row is\n * the rows either side of it closing together. Every one of these carries a\n * Tooltip regardless, which is what an icon-only control owes a pointer and\n * assistive tech alike.\n */\nfunction TableControls({ run }: { run: (command: Command) => void }) {\n  const strings = useUiStrings().markdownAffordances;\n  const newColumnHeader = useUiStrings().markdownEditor.newColumnHeader;\n  return (\n    <>\n      <BarButton icon=\"align-left\" label={strings.alignLeft} onClick={() => run(alignColumn(\"left\"))} />\n      <BarButton icon=\"align-center\" label={strings.alignCenter} onClick={() => run(alignColumn(\"center\"))} />\n      <BarButton icon=\"align-right\" label={strings.alignRight} onClick={() => run(alignColumn(\"right\"))} />\n      <BarDivider />\n      <BarButton icon=\"insert-row\" label={strings.insertRowBelow} onClick={() => run(insertRow(true))} />\n      <BarButton icon=\"insert-column\" label={strings.insertColumnAfter} onClick={() => run(insertColumn(true, newColumnHeader))} />\n      <BarDivider />\n      <BarButton icon=\"delete-row\" label={strings.deleteRow} onClick={() => run(deleteRow)} />\n      <BarButton icon=\"delete-column\" label={strings.deleteColumn} onClick={() => run(deleteColumn)} />\n      <BarButton icon=\"trash-2\" label={strings.deleteTable} onClick={() => run(deleteTable)} />\n    </>\n  );\n}\n\nconst BarDivider = () => <span className=\"mx-0.5 h-4 w-px bg-border-subtle\" />;\n\n/**\n * `Button` + `Tooltip`, matching the toolbar exactly rather than a hand-rolled\n * pair — an icon-only control needs a name on hover and a name for assistive\n * tech, and this package already decided how both are spelled.\n */\nfunction BarButton({ icon, label, onClick }: { icon: string; label: string; onClick: () => void }) {\n  return (\n    <Tooltip content={label}>\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        aria-label={label}\n        onMouseDown={(event) => event.preventDefault()}\n        onClick={onClick}\n      >\n        <Icon name={icon} className=\"size-4\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\n/* --- The context menu ----------------------------------------------------- */\n\nexport interface ConversionMenuProps {\n  surface: MarkdownSurface | null;\n  state: EditorState;\n  run: (command: Command) => void;\n  container: HTMLElement | null;\n}\n\n/**\n * Right-click conversions for a selection.\n *\n * OURS ONLY WHEN THERE IS SOMETHING TO CONVERT. Swallowing every right-click\n * costs the browser's own spellcheck suggestions, which is a worse trade than\n * this menu is worth — so with no selection and nothing under the pointer, the\n * native menu is left alone.\n */\nexport function ConversionMenu({ surface, state, run, container }: ConversionMenuProps) {\n  const strings = useUiStrings().markdownAffordances;\n  const [point, setPoint] = useState<{ x: number; y: number } | null>(null);\n\n  useEffect(() => {\n    if (!surface || !container) return;\n    const root = surface.root;\n    const onContext = (event: MouseEvent) => {\n      const selection = surface.getSelection();\n      const ranged = !!selection && selection.anchor !== selection.head;\n      if (!ranged) return; /* Native menu, and its spellcheck with it. */\n      event.preventDefault();\n      const box = container.getBoundingClientRect();\n      setPoint({ x: event.clientX - box.left, y: event.clientY - box.top + container.scrollTop });\n    };\n    root.addEventListener(\"contextmenu\", onContext);\n    return () => root.removeEventListener(\"contextmenu\", onContext);\n  }, [surface, container]);\n\n  if (!point) return null;\n\n  const inline: Array<[keyof UiStrings[\"markdownAffordances\"][\"format\"], string, Command]> = [\n    // I18N-ALLOW: format id paired with its toggle command\n    [\"bold\", \"bold\", toggleBold],\n    // I18N-ALLOW: format id paired with its toggle command\n    [\"italic\", \"italic\", toggleItalic],\n    // I18N-ALLOW: format id paired with its toggle command\n    [\"inlineCode\", \"code\", toggleCode],\n    // I18N-ALLOW: format id paired with its toggle command\n    [\"strikethrough\", \"strikethrough\", toggleStrike],\n  ];\n\n  return (\n    <div className=\"absolute z-30\" style={{ left: point.x, top: point.y }}>\n      <Menu\n        open\n        onOpenChange={(next) => !next && setPoint(null)}\n        side=\"bottom\"\n        align=\"start\"\n        trigger={<span aria-hidden=\"true\" className=\"block h-0 w-0\" />}\n      >\n        <MenuGroup label={strings.formatGroup}>\n          {inline.map(([name, icon, command]) => (\n            <MenuItem\n              key={name}\n              onClick={() => {\n                run(command);\n                setPoint(null);\n              }}\n            >\n              <Icon name={icon} className=\"mr-2 h-4 w-4 text-tertiary\" />\n              {strings.format[name]}\n            </MenuItem>\n          ))}\n        </MenuGroup>\n        <MenuSeparator />\n        <MenuGroup label={strings.turnInto}>\n          {TYPES.map((choice) => (\n            <MenuItem\n              key={`${choice.kind}${choice.level ?? \"\"}`}\n              selected={sameType(choice, state.block)}\n              onClick={() => {\n                run(convertBlock(choice.kind, { level: choice.level }));\n                setPoint(null);\n              }}\n            >\n              <Icon name={choice.icon} className=\"mr-2 h-4 w-4 text-tertiary\" />\n              {strings.blockTypes[choice.name]}\n            </MenuItem>\n          ))}\n        </MenuGroup>\n      </Menu>\n    </div>\n  );\n}\n\n/* --- Measuring the document, without writing to it ------------------------ */\n\n/**\n * The viewport box of the line holding `at`.\n *\n * A collapsed Range has no width and a perfectly good height and position,\n * which is the cheapest way to ask the browser where a source offset ended up\n * without putting anything in the document to look at. `lineTop` (below) is\n * the pre-existing y-only reader; `LineHandle` also needs the line's HEIGHT,\n * to centre a control against it rather than pin the control's own top to\n * the line's, so this is the one measurement both build on.\n */\nfunction lineRect(surface: MarkdownSurface, at: number): DOMRect | null {\n  const source = surface.getSource();\n  let start = Math.max(0, Math.min(at, source.length));\n  while (start > 0 && source[start - 1] !== \"\\n\") start--;\n\n  const stops = surface.getCaretMap().stops;\n  const stop = stops.find((s) => s >= start) ?? start;\n  const point = domPoint(surface, stop);\n  if (!point) return null;\n\n  const range = surface.root.ownerDocument.createRange();\n  try {\n    range.setStart(point.node, point.offset);\n    range.collapse(true);\n  } catch {\n    return null;\n  }\n  const rect = range.getBoundingClientRect();\n  return rect.height === 0 && rect.top === 0 ? null : rect;\n}\n\n/**\n * The link/image widget a construct's SOURCE OFFSET identifies — not a DOM\n * point walked out to it. Two things ruled out the obvious \"ask `domPointAt`\n * for `construct.start`\" approach, both found by pasting an image large\n * enough to have a real `data:` URL (tens of thousands of characters), not\n * the tiny fixtures the demo's own sample images use:\n *\n *   1. When the construct sits right after ordinary text (the common case —\n *      \"a note with a picture: ![...]\"), `domPointAt` returns a point INSIDE\n *      that preceding text node, not an element boundary beside the widget —\n *      `visible()` (`position.ts`) explicitly prefers real adjacent content\n *      over a markup boundary \"unless content already ended exactly here\",\n *      which content did. Neither association side changes that.\n *   2. Asking at `construct.end` instead (to at least bound a Range) walks\n *      every stamped node up to it — including, for an image, one per\n *      character of its `src` — and near the far end of a run that long two\n *      boundary-adjacent offsets resolved to visually indistinguishable\n *      points: the same \"middle of the image\" failure this card exists to\n *      fix, arrived at a second way.\n *\n * `sourceOffsetAt` is the INVERSE mapping this module already has, and it has\n * neither problem: it reads a known ELEMENT's position directly, no walk. So\n * this queries every widget of the construct's KIND already in the surface\n * (there are rarely more than a handful) and keeps the one whose own source\n * offset matches — exact, and no adjacency ambiguity to resolve.\n */\nfunction findWidget(surface: MarkdownSurface, construct: ConstructInfo): Element | null {\n  const selector = construct.kind === \"image\" ? \"[data-md-src]\" : \"[data-md-href]\";\n  for (const el of surface.root.querySelectorAll(selector)) {\n    if (sourceOffsetAt(surface.root, el, 0) === construct.start) return el;\n  }\n  return null;\n}\n\n/** A link or image's own rendered box: the widget span's rect, null while it has no size. */\nfunction anchorRect(widget: Element): DOMRect | null {\n  const rect = widget.getBoundingClientRect();\n  return rect.width === 0 && rect.height === 0 ? null : rect;\n}\n\nfunction domPoint(surface: MarkdownSurface, at: number): { node: Node; offset: number } | null {\n  /* The same mapping the surface uses to WRITE the caret, called directly and\n     read-only. Measuring must never move the selection — the whole point of\n     these controls is that the caret is still where the user left it. */\n  return domPointAt(surface.root, at);\n}\n\n/** Maps a viewport point to a source offset, for the pointer-following handle. */\nfunction offsetFromPoint(surface: MarkdownSurface, x: number, y: number): number | null {\n  const document = surface.root.ownerDocument as Document & {\n    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;\n    caretRangeFromPoint?: (x: number, y: number) => Range | null;\n  };\n\n  if (typeof document.caretPositionFromPoint === \"function\") {\n    const position = document.caretPositionFromPoint(x, y);\n    if (!position) return null;\n    return sourceOffsetAt(surface.root, position.offsetNode, position.offset);\n  }\n  /* Safari had only the older spelling until 2024, and it is still the one\n     shipping in every browser built on an older WebKit. */\n  if (typeof document.caretRangeFromPoint === \"function\") {\n    const range = document.caretRangeFromPoint(x, y);\n    if (!range) return null;\n    return sourceOffsetAt(surface.root, range.startContainer, range.startOffset);\n  }\n  return null;\n}\n\nexport const AFFORDANCE_TYPES = TYPES;\n"],"names":["useEditorState","surface","version","tick","setTick","useState","held","useRef","useEffect","document","onSelect","n","useMemo","source","selection","last","blockAt","constructAt","marksAt","from","next","TYPES","sameType","choice","block","LineHandle","state","run","container","external","strings","useUiStrings","metrics","setMetrics","offset","setOffset","open","setOpen","measure","useCallback","at","rect","lineRect","root","onMove","event","found","offsetFromPoint","onLeave","jsx","cn","Menu","Button","labelOf","Icon","MenuGroup","jsxs","MenuItem","convertBlock","blockTypes","t","NO_FILES","ConstructBar","isFileUrl","construct","isUnstoredImageSrc","isAttachmentReference","anchor","barRef","box","setBox","placement","setPlacement","useLayoutEffect","widget","findWidget","anchorRect","containerTop","shift","clipTop","ConstructControls","FenceControls","TableControls","patch","editConstruct","Fragment","BarButton","unwrapConstruct","language","languages","known","listLanguages","setFenceLanguage","name","newColumnHeader","alignColumn","BarDivider","insertRow","insertColumn","deleteRow","deleteColumn","deleteTable","icon","label","onClick","Tooltip","ConversionMenu","point","setPoint","onContext","inline","toggleBold","toggleItalic","toggleCode","toggleStrike","command","MenuSeparator","start","stop","domPoint","range","selector","el","sourceOffsetAt","domPointAt","x","y","position"],"mappings":"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"}

package/dist/components/markdown/AttachmentStrip.js

@@ -0,0 +1,128 @@
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
+import { useMemo as T, useState as y, useRef as O, useLayoutEffect as V } from "react";
+import { attachmentsOf as j } from "../../lib/markdown/attachments.js";
+import { sanitizeImageSrc as q, isUnstoredImageSrc as H } from "../../lib/markdown/images.js";
+import { sanitizeHref as _ } from "../../lib/syntax/markdown/render.js";
+import { AttachmentList as G, AttachmentAction as J } from "../chat/Attachment.js";
+import { downloadChatFile as P } from "../chat/download-file.js";
+import { isImageFile as K } from "../chat/file-icon.js";
+import { Button as Q } from "../Button.js";
+import { Icon as b } from "../Icon.js";
+import { Input as W } from "../Input.js";
+import { Menu as X, MenuItem as S } from "../Menu.js";
+import { Popover as Y } from "../Popover.js";
+import { useUiStrings as R } from "../../lib/i18n/provider.js";
+import { FileViewer as Z } from "../file-viewer/FileViewer.js";
+function $(e) {
+  if (/^data:/i.test(e.trimStart())) return "";
+  const i = e.split(/[?#]/, 1)[0], n = i.slice(i.lastIndexOf("/") + 1);
+  try {
+    return decodeURIComponent(n);
+  } catch {
+    return n;
+  }
+}
+function tt(e, i, n) {
+  const c = n?.file.name ?? ($(e.url) || void 0), p = e.name || c || e.url, s = n?.file.type || (e.image ? "image/*" : void 0), g = n ? e.url : q(e.url) ?? void 0, h = K({ name: p, fileName: c, mimeType: s }), w = n ? e.url : (h ? g : _(e.url)) ?? void 0;
+  return {
+    id: i,
+    name: p,
+    fileName: c,
+    size: n?.file.size,
+    mimeType: s,
+    url: w,
+    thumbnailUrl: h ? g : void 0,
+    /* A `blob:` this editor did not mint can never be stored: it is a failed file, with no reason to give. */
+    status: n?.state === "uploading" ? "uploading" : n?.state === "failed" || !n && H(e.url) ? "error" : "ready",
+    error: n?.state === "failed" ? n.message : void 0
+  };
+}
+function ft({ projection: e, isFileUrl: i, resolve: n, identify: c, textFocus: p, readOnly: s = !1, padded: g = !1, onRename: h, onRemove: w, onRetry: U }) {
+  const l = R().markdownEditor.attachment, z = R().chat.attachment, m = T(() => j(e, { isFileUrl: i }), [e, i]), [A, F] = y(null), [o, f] = y(null), [N, B] = y(null), k = O(null), v = O("trigger"), x = o?.id ?? null;
+  if (V(() => {
+    const t = [...k.current?.querySelectorAll("[data-attachment]") ?? []];
+    B(x === null ? null : t.find((a) => a.getAttribute("data-attachment") === x) ?? null);
+  }, [x, m]), m.length === 0) return null;
+  const M = m.map((t) => n(t.url)), u = m.map((t, a) => tt(t, c(t.url), M[a])), C = new Map(m.map((t, a) => [u[a].id, t.url])), D = new Set(m.flatMap((t, a) => M[a]?.state === "failed" ? [u[a].id] : [])), E = (t) => {
+    t.preventDefault(), t.stopPropagation();
+    const a = o?.draft.trim(), d = o ? C.get(o.id) : void 0;
+    d !== void 0 && a && h(d, a), f(null);
+  }, L = (t) => {
+    const a = t.status !== "uploading" && t.url !== void 0;
+    if (!(s && !a))
+      return /* @__PURE__ */ I(
+        X,
+        {
+          side: "bottom",
+          align: "end",
+          className: "min-w-44",
+          finalFocus: () => {
+            const d = v.current;
+            return v.current = "trigger", d === "text" ? p() : d === "trigger";
+          },
+          trigger: /* @__PURE__ */ r(J, { icon: "more-vertical", label: l.actions(t.name), tinted: !!t.thumbnailUrl }),
+          children: [
+            t.status === "error" && t.error && /* The reason a picture's upload failed: its tile has room for an icon only, and a tooltip is out of reach
+            of touch and keyboard, so the menu says it. */
+            /* @__PURE__ */ r("p", { role: "note", className: "max-w-60 px-2.5 py-1.5 text-xs text-danger-text [overflow-wrap:anywhere]", children: t.error }),
+            a && /* @__PURE__ */ r(S, { icon: /* @__PURE__ */ r(b, { name: "download", size: "sm" }), onClick: () => P(t), children: z.download(t.name) }),
+            !s && /* @__PURE__ */ r(S, { icon: /* @__PURE__ */ r(b, { name: "pencil", size: "sm" }), onClick: () => {
+              v.current = "field", f({ id: t.id, draft: t.name });
+            }, children: l.rename(t.name) }),
+            !s && D.has(t.id) && /* @__PURE__ */ r(S, { icon: /* @__PURE__ */ r(b, { name: "rotate-ccw", size: "sm" }), onClick: () => U(C.get(t.id)), children: l.retry(t.name) }),
+            !s && /* @__PURE__ */ r(S, { tone: "danger", icon: /* @__PURE__ */ r(b, { name: "trash-2", size: "sm" }), onClick: () => {
+              v.current = "text", w(C.get(t.id));
+            }, children: z.remove(t.name) })
+          ]
+        }
+      );
+  };
+  return /* @__PURE__ */ I("div", { ref: k, role: "group", "aria-label": l.strip, "data-md-attachment-strip": "", className: g ? "px-3 pb-2" : void 0, children: [
+    /* @__PURE__ */ r(
+      G,
+      {
+        files: u,
+        layout: "strip",
+        caption: !0,
+        action: L,
+        onPreview: (t) => F(t.id)
+      }
+    ),
+    /* @__PURE__ */ r(
+      Z,
+      {
+        open: A !== null,
+        onOpenChange: (t) => !t && F(null),
+        files: u,
+        initialFileId: A,
+        onDownload: P
+      }
+    ),
+    /* @__PURE__ */ r(
+      Y,
+      {
+        anchor: N,
+        open: o !== null && N !== null,
+        onOpenChange: (t) => !t && f(null),
+        side: "top",
+        "aria-label": o ? l.rename(u.find((t) => t.id === x)?.name ?? "") : void 0,
+        children: o && /* @__PURE__ */ I("form", { onSubmit: E, className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r(
+            W,
+            {
+              autoFocus: !0,
+              value: o.draft,
+              "aria-label": l.renameField,
+              onChange: (t) => f({ ...o, draft: t.target.value })
+            }
+          ),
+          /* @__PURE__ */ r(Q, { type: "submit", size: "sm", disabled: o.draft.trim() === "", children: l.renameSave })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ft as AttachmentStrip
+};
+//# sourceMappingURL=AttachmentStrip.js.map