@wildwinter/app-shell 0.38.0 → 0.40.0

package/dist/confirm.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/confirm.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n   The themed confirm (confirm.ts): panel + scrim in the host's palette and\n   the shared motion tokens. The scrim derives from --ink so it stays\n   palette-aware on any theme (the family's modal-scrim treatment). Requires\n   the host to supply --danger alongside the standard palette tokens.\n   --------------------------------------------------------------------------- */\n\n.confirm-dialog {\n  background: var(--surface); color: var(--ink);\n  border: 1px solid var(--line); border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-3); padding: 1.1rem 1.2rem; max-width: 24rem;\n  display: flex; flex-direction: column; gap: 0.5rem;\n  font-family: var(--font-ui);\n  animation: var(--anim-panel-in);\n}\n.confirm-dialog::backdrop {\n  background: color-mix(in oklab, var(--ink) 28%, transparent);\n  backdrop-filter: blur(3px);\n  animation: var(--anim-backdrop-in);\n}\n.confirm-title { font: 700 0.95rem var(--font-ui); }\n.confirm-body { font: 0.82rem/1.45 var(--font-ui); color: var(--muted); }\n.confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; }\n.confirm-btn {\n  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;\n  padding: 0.35rem 0.8rem; font: 600 0.78rem var(--font-ui);\n  background: var(--bg); color: var(--ink);\n  transition: background var(--dur-quick) var(--ease-standard),\n    filter var(--dur-quick) var(--ease-standard);\n}\n.confirm-btn.cancel:hover { background: color-mix(in oklab, var(--line) 30%, transparent); }\n.confirm-btn.danger { background: var(--danger); border-color: var(--danger); color: var(--surface); }\n.confirm-btn.danger:hover { filter: brightness(1.06); }\n\n/* Exit: .closing swaps enter keyframes for their reverse; the fading panel\n   must not catch a stray click. */\n.confirm-dialog.closing { animation: var(--anim-panel-out); pointer-events: none; }\n.confirm-dialog.closing::backdrop { animation: var(--anim-backdrop-out); }\n"],"mappings":";AAOA,CAAC;AACC,cAAY,IAAI;AAAY,SAAO,IAAI;AACvC,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAClD,cAAY,IAAI;AAAa,WAAS,OAAO;AAAQ,aAAW;AAChE,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAC5C,eAAa,IAAI;AACjB,aAAW,IAAI;AACjB;AACA,CARC,cAQc;AACb,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,OAAO,GAAG,EAAE;AAChD,mBAAiB,KAAK;AACtB,aAAW,IAAI;AACjB;AACA,CAAC;AAAgB,QAAM,IAAI,QAAQ,IAAI;AAAY;AACnD,CAAC;AAAe,QAAM,OAAO,CAAC,KAAK,IAAI;AAAY,SAAO,IAAI;AAAU;AACxE,CAAC;AAAkB,WAAS;AAAM,mBAAiB;AAAU,OAAK;AAAQ,cAAY;AAAQ;AAC9F,CAAC;AACC,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAAc,UAAQ;AACxE,WAAS,QAAQ;AAAQ,QAAM,IAAI,QAAQ,IAAI;AAC/C,cAAY,IAAI;AAAO,SAAO,IAAI;AAClC,cAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB,EAC1D,OAAO,IAAI,aAAa,IAAI;AAChC;AACA,CAPC,WAOW,CAAC,MAAM;AAAS,cAAY,UAAU,GAAG,KAAK,EAAE,IAAI,QAAQ,GAAG,EAAE;AAAc;AAC3F,CARC,WAQW,CAAC;AAAS,cAAY,IAAI;AAAW,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAY;AACrG,CATC,WASW,CADC,MACM;AAAS,UAAQ,WAAW;AAAO;AAItD,CA7BC,cA6Bc,CAAC;AAAU,aAAW,IAAI;AAAmB,kBAAgB;AAAM;AAClF,CA9BC,cA8Bc,CADC,OACO;AAAa,aAAW,IAAI;AAAsB;","names":[]}
+{"version":3,"sources":["../src/confirm.css"],"sourcesContent":["/* ---------------------------------------------------------------------------\n   The themed confirm (confirm.ts): what is confirm's own. The panel, the\n   scrim, the motion and the actions row are the dialog frame's (dialog.css);\n   the buttons are controls.css's `.btn` and `.btn.danger`. Import those two\n   beside this file. Requires the host to supply --danger alongside the\n   standard palette tokens.\n   --------------------------------------------------------------------------- */\n\n.confirm-dialog { --dialog-width: 384px; }\n.confirm-body { font: 13px/1.45 var(--font-ui); color: var(--muted); }\n"],"mappings":";AAQA,CAAC;AAAiB,kBAAgB;AAAO;AACzC,CAAC;AAAe,QAAM,IAAI,CAAC,KAAK,IAAI;AAAY,SAAO,IAAI;AAAU;","names":[]}

package/dist/context-menu.cjs

@@ -0,0 +1,250 @@
+'use strict';
+
+// src/tooltip.ts
+function renderTip(host, text) {
+  host.textContent = "";
+  const re = /\u0002([^\u0003]*)\u0003/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) host.append(text.slice(last, m.index));
+    const strong = document.createElement("strong");
+    strong.textContent = m[1] ?? "";
+    host.append(strong);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) host.append(text.slice(last));
+}
+var inited = false;
+var checked = false;
+var suppressed;
+var SHOW_DELAY = 350;
+var EDGE = 6;
+var GAP = 7;
+var tip = null;
+var timer = 0;
+var active = null;
+function ensureEl() {
+  if (tip) return tip;
+  const el2 = document.createElement("div");
+  el2.className = "tooltip";
+  el2.setAttribute("role", "tooltip");
+  el2.hidden = true;
+  document.body.appendChild(el2);
+  tip = el2;
+  return el2;
+}
+var rectOf = (anchor) => anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
+function place(anchor) {
+  const t = ensureEl();
+  const r = rectOf(anchor);
+  const tr = t.getBoundingClientRect();
+  let top = r.top - tr.height - GAP;
+  if (top < EDGE) top = r.top + r.height + GAP;
+  let left = r.left + r.width / 2 - tr.width / 2;
+  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));
+  t.style.left = `${Math.round(left)}px`;
+  t.style.top = `${Math.round(top)}px`;
+}
+function show(anchor) {
+  const text = anchor.dataset["tip"];
+  if (!text) return;
+  paint(anchor, text);
+}
+function paint(anchor, text) {
+  if (suppressed?.()) return;
+  const t = ensureEl();
+  const host = (anchor instanceof HTMLElement ? anchor.closest("dialog[open]") : null) ?? document.body;
+  if (t.parentElement !== host) host.appendChild(t);
+  active = anchor instanceof HTMLElement ? anchor : null;
+  renderTip(t, text);
+  t.hidden = false;
+  t.classList.remove("show");
+  void t.offsetWidth;
+  place(anchor);
+  t.classList.add("show");
+}
+function hide() {
+  if (timer) {
+    window.clearTimeout(timer);
+    timer = 0;
+  }
+  active = null;
+  if (tip) {
+    tip.hidden = true;
+    tip.classList.remove("show");
+  }
+}
+function schedule(anchor) {
+  if (anchor === active) return;
+  if (timer) window.clearTimeout(timer);
+  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);
+}
+function ensureTooltipHost() {
+  initTooltips();
+}
+function checkTooltipHost() {
+  if (checked) return;
+  checked = true;
+  setTimeout(() => {
+    if (inited || typeof document === "undefined") return;
+    if (document.querySelector("[data-tip]")) {
+      console.warn("app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.");
+    }
+  }, 0);
+}
+var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
+function initTooltips(opts = {}) {
+  if (opts.suppressed !== void 0) suppressed = opts.suppressed;
+  if (inited) return;
+  inited = true;
+  document.addEventListener("pointerover", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("pointerout", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (!el2) return;
+    const to = e.relatedTarget;
+    if (to instanceof Node && el2.contains(to)) return;
+    hide();
+  });
+  document.addEventListener("focusin", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("focusout", () => hide());
+  document.addEventListener("pointerdown", () => hide(), true);
+  document.addEventListener("scroll", () => {
+    if (active) hide();
+  }, true);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") hide();
+  });
+  window.addEventListener("blur", () => hide());
+}
+
+// src/dom.ts
+function el(tag, classNameOrProps, ...children) {
+  const node = document.createElement(tag);
+  const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
+  if (props.className) node.className = props.className;
+  if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
+  if (props.title !== void 0) node.title = props.title;
+  if (props.tip !== void 0) {
+    node.dataset["tip"] = props.tip;
+    node.setAttribute("aria-label", props.tip);
+    ensureTooltipHost();
+  }
+  if (props.onClick) node.addEventListener("click", props.onClick);
+  for (const child of children) {
+    if (child === null || child === void 0) continue;
+    node.append(child);
+  }
+  checkTooltipHost();
+  return node;
+}
+
+// src/exit.ts
+function closeWithExit(element, done) {
+  element.classList.add("closing");
+  const seconds = parseFloat(getComputedStyle(element).animationDuration) || 0;
+  if (seconds === 0) {
+    done();
+    return;
+  }
+  let fired = false;
+  const finish = () => {
+    if (fired) return;
+    fired = true;
+    element.removeEventListener("animationend", onEnd);
+    clearTimeout(timer2);
+    done();
+  };
+  const onEnd = (e) => {
+    if (e.target === element) finish();
+  };
+  element.addEventListener("animationend", onEnd);
+  const timer2 = setTimeout(finish, seconds * 1e3 + 120);
+}
+
+// src/context-menu.ts
+var EDGE2 = 6;
+var current = null;
+function floating(node, onDismiss) {
+  let gone = false;
+  const dismiss = () => {
+    if (gone) return;
+    gone = true;
+    if (current === dismiss) current = null;
+    window.removeEventListener("pointerdown", onAway, true);
+    window.removeEventListener("keydown", onKey, true);
+    closeWithExit(node, () => node.remove());
+    onDismiss?.();
+  };
+  const onAway = (e) => {
+    if (!node.contains(e.target)) dismiss();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      dismiss();
+    }
+  };
+  window.addEventListener("pointerdown", onAway, true);
+  window.addEventListener("keydown", onKey, true);
+  current?.();
+  current = dismiss;
+  return { dismiss };
+}
+function placeBelow(node, anchor) {
+  node.style.left = `${anchor.left}px`;
+  node.style.top = `${anchor.bottom + 4}px`;
+  const r = node.getBoundingClientRect();
+  if (r.right > window.innerWidth) node.style.left = `${Math.max(EDGE2, window.innerWidth - r.width - EDGE2)}px`;
+  if (r.bottom > window.innerHeight) node.style.top = `${Math.max(EDGE2, anchor.top - r.height - 4)}px`;
+}
+function openPopover(anchor, build, onClose, opts = {}) {
+  const pop = el("div", "popover");
+  let closed = false;
+  const finish = () => {
+    if (closed) return;
+    closed = true;
+    onClose?.();
+  };
+  const { dismiss } = floating(pop, finish);
+  pop.append(build(dismiss));
+  (opts.host ?? document.body).append(pop);
+  placeBelow(pop, anchor.getBoundingClientRect());
+}
+function openContextMenu(x, y, items) {
+  const menu = el("div", "ctxmenu");
+  menu.setAttribute("role", "menu");
+  const { dismiss } = floating(menu);
+  for (const item of items) {
+    const button = el("button", {
+      className: `ctxmenu-item${item.danger ? " danger" : ""}`,
+      text: item.label,
+      onClick: () => {
+        if (item.disabled === true) return;
+        dismiss();
+        item.onClick();
+      }
+    });
+    button.type = "button";
+    button.setAttribute("role", "menuitem");
+    if (item.disabled === true) button.disabled = true;
+    menu.append(button);
+  }
+  menu.style.left = `${x}px`;
+  menu.style.top = `${y}px`;
+  document.body.append(menu);
+  const r = menu.getBoundingClientRect();
+  if (r.right > window.innerWidth) menu.style.left = `${Math.max(EDGE2, window.innerWidth - r.width - EDGE2)}px`;
+  if (r.bottom > window.innerHeight) menu.style.top = `${Math.max(EDGE2, window.innerHeight - r.height - EDGE2)}px`;
+}
+
+exports.openContextMenu = openContextMenu;
+exports.openPopover = openPopover;
+//# sourceMappingURL=context-menu.cjs.map
+//# sourceMappingURL=context-menu.cjs.map

package/dist/context-menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip.ts","../src/dom.ts","../src/exit.ts","../src/context-menu.ts"],"names":["el","timer","EDGE"],"mappings":"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","file":"context-menu.cjs","sourcesContent":["// ---------------------------------------------------------------------------\n// A single themed tooltip the family controls, replacing native `title`\n// rollovers: those are unstyled OS chrome and appear on the platform's slow\n// (~1s) delay, which is exactly the seam design-language section 4 (\"coherent\n// to the edges\") says not to leave showing.\n//\n// ONE floating bubble, document-DELEGATED: any element carrying a `data-tip`\n// attribute gets it, so a caller just sets `data-tip=\"...\"` anywhere and wires\n// nothing. The bubble anchors above the element (flipping below near the top\n// edge), uses our own snappy delay and the shared panel-enter motion.\n// `initTooltips()` is idempotent, so it is safe to call from more than one\n// place in an app that has several entry points.\n//\n// Lifted from Patterpad's patterpad-surface/web/tooltip.ts, which proved it,\n// with the one app-specific rule (suppressed in Writing View) generalised into\n// the `suppressed` option so the shell knows nothing about either app's modes.\n// ---------------------------------------------------------------------------\n\n// Bold markers: a producer wraps a span in these PRIVATE control chars (U+0002 STX / U+0003 ETX,\n// never present in user text) and the renderer turns it into a <strong>. Lets a data-tip bold part\n// of itself (a name, a \"VO:\" prefix) without any HTML, and each segment is still set via\n// textContent, so there is no injection risk from user content.\nconst B_OPEN = \"\\u0002\";\nconst B_CLOSE = \"\\u0003\";\n\n/** Wrap `s` so it renders bold inside a tooltip (see the marker note above). */\nexport function tipBold(s: string): string { return `${B_OPEN}${s}${B_CLOSE}`; }\n\n/** Render `text` into `host`, turning `\\u0002…\\u0003`-marked spans into <strong>; all set as text (safe). */\nfunction renderTip(host: HTMLElement, text: string): void {\n  host.textContent = \"\";\n  const re = /\\u0002([^\\u0003]*)\\u0003/g;\n  let last = 0;\n  let m: RegExpExecArray | null;\n  while ((m = re.exec(text)) !== null) {\n    if (m.index > last) host.append(text.slice(last, m.index));\n    const strong = document.createElement(\"strong\");\n    strong.textContent = m[1] ?? \"\";\n    host.append(strong);\n    last = m.index + m[0].length;\n  }\n  if (last < text.length) host.append(text.slice(last));\n}\n\nexport interface TooltipOptions {\n  /** Called before every show: return true to keep the bubble down. For a mode\n   *  that wants no chrome at all (Patterpad's Writing View). */\n  suppressed?: () => boolean;\n}\n\nlet inited = false;\nlet checked = false; // the one-shot no-host warning below has been scheduled\nlet suppressed: (() => boolean) | undefined;\nconst SHOW_DELAY = 350; // ms - snappier than the OS title delay, slow enough not to flicker on pass-through\nconst EDGE = 6;         // viewport inset so the bubble never touches the window edge\nconst GAP = 7;          // px between the anchor and the bubble\n\nlet tip: HTMLDivElement | null = null;\nlet timer = 0;\nlet active: HTMLElement | null = null;\n/** The subject of a rect-anchored tip (see `tipAt`), when there is one. */\nlet activeKey: string | null = null;\n\nfunction ensureEl(): HTMLDivElement {\n  if (tip) return tip;\n  const el = document.createElement(\"div\");\n  el.className = \"tooltip\";\n  el.setAttribute(\"role\", \"tooltip\");\n  el.hidden = true;\n  document.body.appendChild(el);\n  tip = el;\n  return el;\n}\n\n/** A rectangle in VIEWPORT coordinates, for anchoring a tip to something that is\n *  not a DOM element: a shape on a canvas, a run of text inside one. */\nexport interface TipRect { left: number; top: number; width: number; height: number }\n\nconst rectOf = (anchor: HTMLElement | TipRect): TipRect =>\n  (anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor);\n\n/** Anchor the (already-visible, so measurable) bubble above the anchor, flipping below near the top. */\nfunction place(anchor: HTMLElement | TipRect): void {\n  const t = ensureEl();\n  const r = rectOf(anchor);\n  const tr = t.getBoundingClientRect();\n  let top = r.top - tr.height - GAP;\n  if (top < EDGE) top = r.top + r.height + GAP; // not enough room above -> below\n  let left = r.left + r.width / 2 - tr.width / 2;\n  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));\n  t.style.left = `${Math.round(left)}px`;\n  t.style.top = `${Math.round(top)}px`;\n}\n\nfunction show(anchor: HTMLElement): void {\n  const text = anchor.dataset[\"tip\"];\n  if (!text) return;\n  paint(anchor, text);\n}\n\n/** Fill, place and reveal the bubble. The one path: both the delegated\n *  `data-tip` route and `tipAt` end up here, so a canvas tip and a button tip\n *  are the same bubble with the same look and the same motion. */\nfunction paint(anchor: HTMLElement | TipRect, text: string): void {\n  if (suppressed?.()) return;\n  const t = ensureEl();\n  // A modal <dialog> (settings, a confirm) renders in the browser TOP LAYER, above every normal-flow\n  // element whatever its z-index. If the anchor is inside one, move the bubble into that dialog so it\n  // shares the top layer; otherwise keep it on <body>. Re-parenting per show also moves it back out\n  // once the modal closes.\n  const host: HTMLElement = (anchor instanceof HTMLElement ? anchor.closest<HTMLElement>(\"dialog[open]\") : null)\n    ?? document.body;\n  if (t.parentElement !== host) host.appendChild(t);\n  active = anchor instanceof HTMLElement ? anchor : null;\n  renderTip(t, text);\n  t.hidden = false;\n  t.classList.remove(\"show\"); void t.offsetWidth; // restart the enter animation\n  place(anchor);                                  // measure + position now it has content + is visible\n  t.classList.add(\"show\");\n}\n\nfunction hide(): void {\n  if (timer) { window.clearTimeout(timer); timer = 0; }\n  active = null;\n  activeKey = null;\n  if (tip) { tip.hidden = true; tip.classList.remove(\"show\"); }\n}\n\nfunction schedule(anchor: HTMLElement): void {\n  if (anchor === active) return;\n  if (timer) window.clearTimeout(timer);\n  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);\n}\n\n/**\n * Show a tip for something that has no DOM node of its own: a card on a canvas,\n * a zone, a pin. The caller says WHERE (a viewport rectangle) and WHAT, and\n * identifies the subject with `key`.\n *\n * The key is what makes this usable from a canvas. Re-calling with the same key\n * re-places the bubble WITHOUT restarting the delay, so a tip can follow its\n * shape while the camera moves; calling with a different key starts the wait\n * again, so sweeping the pointer across a dense board does not strobe.\n *\n * The bubble is ordinary DOM, so it holds its size whatever the canvas is\n * zoomed to. That is the point of it: the label it stands in for is the one\n * thing on a canvas that must not shrink with everything else.\n */\nexport function tipAt(key: string, rect: TipRect, text: string): void {\n  if (key === activeKey) {\n    // Already up for this subject: move it, do not re-animate it.\n    if (tip && !tip.hidden) { renderTip(tip, text); place(rect); }\n    return;\n  }\n  // A different subject: down first, then wait again. Leaving the old bubble up\n  // during the wait would put one card's name over another card, which is worse\n  // than no name at all - and it matches the delegated route, where leaving an\n  // element hides the tip before the next one is scheduled.\n  hide();\n  activeKey = key;\n  timer = window.setTimeout(() => { timer = 0; paint(rect, text); }, SHOW_DELAY);\n}\n\n/** Take any tip down: the pointer has left, or a gesture has started. */\nexport function hideTip(): void { hide(); }\n\n/**\n * Mount the renderer because something is about to speak the grammar.\n *\n * The themed tooltip is not a feature a host turns on; it is the renderer for a grammar the shell's own\n * components already speak, and `data-tip` with nothing listening draws NOTHING - not the themed\n * bubble, not the platform one. That silence cost Patterpad two releases of a pin with no tooltip, and\n * cost it again when a `title` was converted to `data-tip` in a window that had never mounted this.\n *\n * So `el` calls this whenever it sets a tip. Mounting a delegated listener is the same class of act as\n * `confirmDialog` appending to `document.body`, which this package has always done.\n */\nexport function ensureTooltipHost(): void { initTooltips(); }\n\n/**\n * One deferred check that an app writing `data-tip` ITSELF has a host, warning if not.\n *\n * `ensureTooltipHost` covers anything built through `el`. It cannot cover a `data-tip` written straight\n * into markup or set by hand, which is the case that leaves a whole window of dead tips with no shell\n * component involved - so that one gets a warning rather than silence. Scheduled once, after the\n * current task, so it sees a rendered document rather than an empty one.\n */\nexport function checkTooltipHost(): void {\n  if (checked) return;\n  checked = true;\n  setTimeout(() => {\n    if (inited || typeof document === \"undefined\") return;\n    if (document.querySelector(\"[data-tip]\")) {\n      console.warn(\"app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.\");\n    }\n  }, 0);\n}\n\nconst tipAncestor = (n: EventTarget | null): HTMLElement | null =>\n  (n instanceof Element ? n.closest<HTMLElement>(\"[data-tip]\") : null);\n\n/**\n * Wire the one delegated controller. Mounting happens once; OPTIONS do not.\n *\n * An explicit call is always authoritative about its options, even after something else has already\n * mounted the listener. That ordering is not hypothetical, and Storyletter caught it before it shipped:\n * once components self-mount (see `ensureTooltipHost`), a host's own\n * `initTooltips({ suppressed })` could land second and be dropped by an early return, silently taking\n * a rule like \"no tooltips in Writing View\" with it. Nothing would fail and nothing would show.\n *\n * Components therefore call this with NO arguments: they mount the renderer without claiming the\n * options, and the host keeps the last word on behaviour.\n */\nexport function initTooltips(opts: TooltipOptions = {}): void {\n  if (opts.suppressed !== undefined) suppressed = opts.suppressed; // an explicit call always wins\n  if (inited) return;\n  inited = true;\n\n  document.addEventListener(\"pointerover\", (e) => {\n    const el = tipAncestor(e.target);\n    if (el) schedule(el);\n  });\n  document.addEventListener(\"pointerout\", (e) => {\n    const el = tipAncestor(e.target);\n    if (!el) return;\n    const to = (e as PointerEvent).relatedTarget;\n    if (to instanceof Node && el.contains(to)) return; // still inside the same anchor\n    hide();\n  });\n  // Keyboard parity: reveal on focus, dismiss on blur.\n  document.addEventListener(\"focusin\", (e) => { const el = tipAncestor(e.target); if (el) schedule(el); });\n  document.addEventListener(\"focusout\", () => hide());\n  // It's ANCHORED (not cursor-following), so anything that moves the layout or context dismisses it.\n  document.addEventListener(\"pointerdown\", () => hide(), true);\n  document.addEventListener(\"scroll\", () => { if (active) hide(); }, true);\n  document.addEventListener(\"keydown\", (e) => { if (e.key === \"Escape\") hide(); });\n  window.addEventListener(\"blur\", () => hide());\n}\n","// ---------------------------------------------------------------------------\n// `el`: the tiny tag-typed element factory both apps build their imperative,\n// idempotent views with.\n//\n// A SUPERSET of the two apps' prior signatures, so neither rewrites call sites:\n//   - Patterpad:       el(tag, cls?, text?)                       (positional)\n//   - Storylet Studio: el(tag, { className, text, ... }, ...kids) (options bag)\n// A string second argument is the className; an object is the props bag; string\n// children become text nodes. So `el(\"div\", \"c\", \"t\")` and\n// `el(\"div\", { className: \"c\" }, \"t\")` produce identical DOM.\n// ---------------------------------------------------------------------------\n\nimport { ensureTooltipHost, checkTooltipHost } from \"./tooltip.js\";\nimport { iconNode, iconNameOfGlyph, isIconName, type IconName } from \"./icons.js\";\n\nexport type Child = Node | string | null | undefined;\n\nexport interface ElProps {\n  className?: string;\n  text?: string;\n  /** A NATIVE rollover. Prefer `tip`: `title` is OS chrome on the platform's own\n   *  slow delay, which is the seam the themed tooltip exists to close. */\n  title?: string;\n  /** A themed rollover (`data-tip`, picked up by the delegated controller that\n   *  `initTooltips()` wires). Also the accessible name, since the elements that\n   *  want one are usually icon buttons with no text of their own. */\n  tip?: string;\n  onClick?: (event: MouseEvent) => void;\n}\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  classNameOrProps?: string | ElProps,\n  ...children: Child[]\n): HTMLElementTagNameMap[K] {\n  const node = document.createElement(tag);\n  const props: ElProps = typeof classNameOrProps === \"string\"\n    ? { className: classNameOrProps }\n    : classNameOrProps ?? {};\n  if (props.className) node.className = props.className;\n  if (props.text !== undefined && props.text !== null) node.textContent = props.text;\n  if (props.title !== undefined) node.title = props.title;\n  if (props.tip !== undefined) {\n    node.dataset[\"tip\"] = props.tip;\n    node.setAttribute(\"aria-label\", props.tip);\n    // Setting a tip mounts the renderer. Without this, `data-tip` draws nothing at all in a window whose\n    // host never called `initTooltips()`, which is a silent failure rather than a degraded one. No\n    // options passed: the host stays authoritative about behaviour (see tooltip.ts).\n    ensureTooltipHost();\n  }\n  if (props.onClick) node.addEventListener(\"click\", props.onClick as EventListener);\n  for (const child of children) {\n    if (child === null || child === undefined) continue;\n    node.append(child);\n  }\n  checkTooltipHost(); // one-shot: warns if the APP wrote data-tip and nothing mounted a host\n  return node;\n}\n\n/** A small square icon button (the move/delete controls list editors share).\n *  Its rollover is the THEMED one (`data-tip`), so an app that has called\n *  `initTooltips()` gets our bubble rather than the platform's.\n *\n *  `name` is a word from the vocabulary (\"up\", \"close\"), drawn at 14px. A\n *  typed glyph from the deprecated `icon` table (\"↑\", \"✕\") is accepted for\n *  now and drawn as the word it stood for, so an app that has not moved its\n *  call sites yet still gets the drawn set; any other string is set as text,\n *  which is the old behaviour and on its way out. */\nexport function iconBtn(name: IconName | (string & {}), title: string, onClick: () => void, disabled = false, danger = false): HTMLButtonElement {\n  const b = el(\"button\", `shell-icon${danger ? \" danger\" : \"\"}`);\n  b.type = \"button\"; b.dataset[\"tip\"] = title; b.setAttribute(\"aria-label\", title);\n  const word = isIconName(name) ? name : iconNameOfGlyph(name);\n  if (word) b.append(iconNode(word)); else b.textContent = name;\n  b.disabled = disabled;\n  b.addEventListener(\"click\", onClick);\n  return b;\n}\n\n/**\n * A captioned field: `<label class=\"shell-labelled\"><span class=\"shell-fieldcap\">…</span>control</label>`.\n *\n * The label is pointed at the field it captions, EXPLICITLY, and never at a button. A `<label>` with no\n * `for` forwards a click to its first labelable descendant, and buttons are labelable - so a caption\n * wrapped around a control containing buttons (`tagChips`, whose every chip carries a remove button)\n * turns every click on the row's dead space into a press of the FIRST button in it. That shipped:\n * patterkit/patter#44, where clicking a Game Data list value anywhere but its ✕ deleted the first value\n * in the list. Reported as \"clicking a value removes the wrong one\", which is not a wrong-index bug at\n * all - the click never reached the chip.\n *\n * When the control holds no labelable field (a chips editor with the add input removed, say), this is a\n * plain `<div>`: no caption behaviour is better than a caption that presses something.\n */\nexport function labelled(label: string, control: HTMLElement): HTMLElement {\n  const target = control.matches(\"input, select, textarea\")\n    ? control\n    : control.querySelector<HTMLElement>(\"input:not([type=button]):not([type=submit]), select, textarea\");\n  const w = el(target ? \"label\" : \"div\", \"shell-labelled\");\n  w.append(el(\"span\", \"shell-fieldcap\", label), control);\n  if (target) {\n    if (!target.id) target.id = `shell-f-${Math.random().toString(36).slice(2, 9)}`;\n    (w as HTMLLabelElement).htmlFor = target.id;\n  }\n  return w;\n}\n\n/** Swap item `i` with its neighbour `i + delta` IN PLACE (the up/down reorder list editors share);\n *  a no-op when the target is out of range. Returns whether anything moved. */\nexport function moveItem<T>(arr: T[], i: number, delta: number): boolean {\n  const j = i + delta;\n  if (j < 0 || j >= arr.length) return false;\n  [arr[i], arr[j]] = [arr[j]!, arr[i]!];\n  return true;\n}\n\n/** The icon size inside a chip's remove / move buttons: the chip is set at\n *  0.76rem, so its controls draw smaller than a toolbar button's 14px. */\nconst CHIP_ICON = 10;\n\n/** A tag-style editor for a string-list field (an enum's allowed values / flags): removable chips + an\n *  add input (Enter or \",\" commits; blank / duplicate ignored). Mutates `holder.values` in place (read\n *  back on save). `onChange` fires after any add / remove so callers can refresh a dependent control. */\nexport function tagChips(holder: { values?: string[] }, onChange?: () => void): HTMLElement {\n  const wrap = el(\"div\", \"shell-tags\");\n  const input = el(\"input\", \"shell-tag-input\");\n  // Sentence-cased like every other hint (the microcopy ruling, 2026-08-28):\n  // lowercase fragments read as adrift, and a placeholder is a hint speaking.\n  input.type = \"text\"; input.placeholder = \"Add value\"; input.spellcheck = false;\n  const makeChip = (v: string): HTMLElement => {\n    const chip = el(\"span\", \"shell-tag\", v);\n    const x = el(\"button\", \"shell-tag-x\", iconNode(\"close\", CHIP_ICON));\n    x.type = \"button\"; x.dataset[\"tip\"] = `Remove ${v}`; x.setAttribute(\"aria-label\", `Remove ${v}`);\n    x.addEventListener(\"click\", () => { holder.values = (holder.values ?? []).filter((o) => o !== v); chip.remove(); onChange?.(); });\n    chip.append(x);\n    return chip;\n  };\n  const commit = (): void => {\n    const v = input.value.trim();\n    if (v && !(holder.values ?? []).includes(v)) { (holder.values ??= []).push(v); wrap.insertBefore(makeChip(v), input); onChange?.(); }\n    input.value = \"\";\n  };\n  input.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" || e.key === \",\") { e.preventDefault(); commit(); } });\n  input.addEventListener(\"blur\", commit);\n  for (const v of holder.values ?? []) wrap.append(makeChip(v));\n  wrap.append(input);\n  return wrap;\n}\n\n/**\n * An ORDERED chips editor for a string-list field whose order means something\n * (a quality's stages: `advance()` walks them, so 2 comes after 1): numbered\n * chips, each with move-earlier / move-later / remove, plus an add input\n * (Enter or \",\" commits; blank / duplicate ignored). Mutates `holder.stages`\n * in place; `onChange` fires after any add / move / remove.\n *\n * Patterpad's, lifted (ui-review-2026-09, finding 3); Storyletter had been\n * faking it with `tagChips` over a `values` holder, which loses the order\n * controls. Same class family as `tagChips` (`.shell-tags`), so it is styled by\n * settings.css already.\n */\nexport function stageChips(holder: { stages?: string[] }, onChange?: () => void): HTMLElement {\n  const wrap = el(\"div\", \"shell-tags shell-stages\");\n  const input = el(\"input\", \"shell-tag-input\");\n  input.type = \"text\"; input.placeholder = \"Add stage\"; input.spellcheck = false;\n  const control = (name: IconName, tip: string, disabled: boolean, onClick: () => void): HTMLButtonElement => {\n    const b = el(\"button\", \"shell-tag-x shell-tag-move\", iconNode(name, CHIP_ICON));\n    b.type = \"button\"; b.dataset[\"tip\"] = tip; b.setAttribute(\"aria-label\", tip);\n    b.disabled = disabled;\n    b.addEventListener(\"click\", onClick);\n    return b;\n  };\n  const rebuild = (): void => {\n    for (const c of Array.from(wrap.children)) if (c !== input) c.remove();\n    const stages = holder.stages ?? [];\n    stages.forEach((v, i) => {\n      const chip = el(\"span\", \"shell-tag\", `${i + 1}. ${v}`);\n      chip.dataset[\"stage\"] = v;\n      chip.append(\n        control(\"back\", `Move ${v} earlier`, i === 0,\n          () => { if (moveItem(stages, i, -1)) { rebuild(); onChange?.(); } }),\n        control(\"forward\", `Move ${v} later`, i === stages.length - 1,\n          () => { if (moveItem(stages, i, 1)) { rebuild(); onChange?.(); } }),\n      );\n      const x = el(\"button\", \"shell-tag-x\", iconNode(\"close\", CHIP_ICON));\n      x.type = \"button\"; x.dataset[\"tip\"] = `Remove ${v}`; x.setAttribute(\"aria-label\", `Remove ${v}`);\n      x.addEventListener(\"click\", () => { holder.stages = (holder.stages ?? []).filter((o) => o !== v); rebuild(); onChange?.(); });\n      chip.append(x);\n      wrap.insertBefore(chip, input);\n    });\n  };\n  const commit = (): void => {\n    const v = input.value.trim();\n    if (v && !(holder.stages ?? []).includes(v)) { (holder.stages ??= []).push(v); rebuild(); onChange?.(); }\n    input.value = \"\";\n  };\n  input.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" || e.key === \",\") { e.preventDefault(); commit(); } });\n  input.addEventListener(\"blur\", commit);\n  wrap.append(input);\n  rebuild();\n  return wrap;\n}\n\n// --- drag-to-reorder ---------------------------------------------------------\n// One drag at a time per window, shared across every wired list, so the\n// midpoint test knows what is being carried without a dataTransfer round trip.\nlet reorderDragId: string | null = null;\nconst clearDropMarks = (host: ParentNode): void =>\n  host.querySelectorAll(\".drop-before, .drop-after\").forEach((e) => e.classList.remove(\"drop-before\", \"drop-after\"));\n\n/**\n * Make `el` a drag source and a drop target for HTML5 drag-to-reorder among\n * its siblings. While carried it wears `.dragging`; a hovered target wears\n * `.drop-before` or `.drop-after` by the midpoint test on `axis` (\"y\" for\n * rows, \"x\" for a wrapping grid); a drop calls `onMove(draggedId, before,\n * targetId)` and the caller reorders its model and re-renders.\n *\n * Storyletter's `wireCardDrag`, lifted (ui-review-2026-09, finding 30);\n * Patterpad's `wireSceneDrag` is the same idea fixed on \"y\". The marks are\n * classes only: the app draws them (Patterpad's `box-shadow: 0 -2px 0 0\n * var(--accent)` pair is the family's look).\n */\nexport function wireReorder(el: HTMLElement, id: string, axis: \"x\" | \"y\", onMove: (id: string, before: boolean, targetId: string) => void): void {\n  el.draggable = true;\n  el.dataset[\"reorderId\"] = id;\n  const host = (): ParentNode => el.parentElement ?? el;\n  el.addEventListener(\"dragstart\", (e) => {\n    reorderDragId = id; el.classList.add(\"dragging\");\n    if (e.dataTransfer) { e.dataTransfer.effectAllowed = \"move\"; e.dataTransfer.setData(\"text/plain\", id); }\n  });\n  el.addEventListener(\"dragend\", () => { reorderDragId = null; el.classList.remove(\"dragging\"); clearDropMarks(host()); });\n  el.addEventListener(\"dragover\", (e) => {\n    if (!reorderDragId || reorderDragId === id) return;\n    e.preventDefault();\n    if (e.dataTransfer) e.dataTransfer.dropEffect = \"move\";\n    const r = el.getBoundingClientRect();\n    const before = axis === \"y\" ? e.clientY < r.top + r.height / 2 : e.clientX < r.left + r.width / 2;\n    clearDropMarks(host());\n    el.classList.add(before ? \"drop-before\" : \"drop-after\");\n  });\n  el.addEventListener(\"dragleave\", () => el.classList.remove(\"drop-before\", \"drop-after\"));\n  el.addEventListener(\"drop\", (e) => {\n    e.preventDefault();\n    const before = el.classList.contains(\"drop-before\");\n    clearDropMarks(host());\n    if (reorderDragId && reorderDragId !== id) onMove(reorderDragId, before, id);\n  });\n}\n\n// --- metadata and breadcrumbs ---------------------------------------------------\n// \"Icons are drawn, and so are separators\" (design-language.md section 4,\n// 2026-09-16): metadata is never joined with \"·\" and a breadcrumb is never a\n// string with \"›\" in it. Both apps had been building exactly those strings\n// (ui-review-2026-09, marker A); these two helpers make the same lines as DOM,\n// with the separator drawn by CSS (controls.css) or by the icon vocabulary.\n\n/**\n * A metadata line: `parts` as spans in a flex row, separated by a drawn\n * 3px disc (a `::before` on every part after the first, in controls.css),\n * so `metaLine([\"6 runs\", \"200 max steps\", \"seed 4\"])` is what\n * \"6 runs · 200 max steps · seed 4\" used to be, without the typed dot.\n * Empty, null and undefined parts are skipped, so a caller can pass an\n * optional segment without branching.\n */\nexport function metaLine(parts: (string | Node | null | undefined)[]): HTMLElement {\n  const row = el(\"span\", \"shell-meta\");\n  for (const part of parts) {\n    if (part === null || part === undefined || part === \"\") continue;\n    const seg = el(\"span\", \"shell-meta-part\");\n    seg.append(part);\n    row.append(seg);\n  }\n  return row;\n}\n\nexport interface Crumb {\n  label: string;\n  /** Makes the crumb a button. Ignored on the last crumb, which is where the\n   *  reader already is. */\n  onClick?: (event: MouseEvent) => void;\n}\n\n/**\n * A breadcrumb trail: each crumb a span, or a button when it carries\n * `onClick` and is not the last, with `iconNode(\"forward\", 12)` drawn between\n * them. `breadcrumb([\"Box\", \"Deck\", \"Card\"])` is what \"Box › Deck › Card\"\n * used to be; the chevrons are the family's own drawing, not a symbol-font\n * character.\n */\nexport function breadcrumb(parts: (string | Crumb)[]): HTMLElement {\n  const trail = el(\"nav\", \"shell-crumbs\");\n  trail.setAttribute(\"aria-label\", \"Where this is\");\n  parts.forEach((part, i) => {\n    const crumb: Crumb = typeof part === \"string\" ? { label: part } : part;\n    const last = i === parts.length - 1;\n    if (i > 0) {\n      const sep = iconNode(\"forward\", 12);\n      sep.classList.add(\"shell-crumb-sep\");\n      trail.append(sep);\n    }\n    if (crumb.onClick && !last) {\n      const b = el(\"button\", { className: \"shell-crumb shell-crumb-link\", text: crumb.label, onClick: crumb.onClick });\n      b.type = \"button\";\n      trail.append(b);\n    } else {\n      const s = el(\"span\", \"shell-crumb\", crumb.label);\n      if (last) s.setAttribute(\"aria-current\", \"location\");\n      trail.append(s);\n    }\n  });\n  return trail;\n}\n","// ---------------------------------------------------------------------------\n// The exit half of the panel motion vocabulary.\n//\n// Enters are pure CSS: they run on insertion. Exits cannot be, because the node\n// has to OUTLIVE the close for the animation to play and then be torn down. So\n// every closing surface routes its teardown through here instead of removing\n// itself directly.\n//\n// Patterpad's `closeWithExit`, lifted. It was already app-agnostic, and the\n// shell had grown a second copy of the same twelve lines inside `confirm.ts`,\n// which is the drift this package exists to stop: one motion vocabulary, drawn\n// one way. `tokens.css` already carried the keyframes and the durations; this\n// is the missing half that plays them.\n// ---------------------------------------------------------------------------\n\n/**\n * Play the close animation on `element`, then run `done` exactly once.\n *\n * `done` does the real teardown: remove the node, drop listeners, unmount\n * whatever was inside it. Under `prefers-reduced-motion` the duration reads 0\n * and `done` runs synchronously, so reduced motion means instant rather than\n * an invisible wait.\n */\nexport function closeWithExit(element: HTMLElement, done: () => void): void {\n  element.classList.add(\"closing\");\n  // getComputedStyle flushes pending style, so this reflects the `.closing`\n  // rule we just added rather than the state before it.\n  const seconds = parseFloat(getComputedStyle(element).animationDuration) || 0;\n  if (seconds === 0) { done(); return; }\n\n  let fired = false;\n  const finish = (): void => {\n    if (fired) return;\n    fired = true;\n    element.removeEventListener(\"animationend\", onEnd);\n    clearTimeout(timer);\n    done();\n  };\n  // Only OUR animation ending counts. Content inside the panel (rows, pills,\n  // spinners) raises its own animationend, and an inner one firing first would\n  // tear the panel down mid-fade.\n  const onEnd = (e: AnimationEvent): void => { if (e.target === element) finish(); };\n  element.addEventListener(\"animationend\", onEnd);\n  // Fallback: animationend is missed if the element is hidden or the animation\n  // is interrupted, and a panel that never tears down is worse than an abrupt one.\n  const timer = setTimeout(finish, seconds * 1000 + 120);\n}\n","// ---------------------------------------------------------------------------\n// A right-click context menu and a small anchored popover: a floating list of\n// actions at the cursor (or a panel under a control), dismissed on outside\n// click or Escape, clamped to the viewport, closed with the family's exit\n// motion.\n//\n// Storyletter's, lifted (ui-review-2026-09, finding 11): its own header had\n// named itself an extraction candidate, and it had the two things Patterpad's\n// inline `sceneContextMenu` lacked, a `disabled` item and the clamp. A DOM\n// popover, not a native menu, so it is themed like everything else.\n//\n// Styles ship as context-menu.css; import it wherever the module is used,\n// including tool windows, which is the bug that made Storyletter give the\n// menu its own stylesheet in the first place.\n// ---------------------------------------------------------------------------\n\nimport { el } from \"./dom.js\";\nimport { closeWithExit } from \"./exit.js\";\n\nexport interface ContextItem {\n  label: string;\n  /** Drawn in --danger: a destructive action, which names its object. */\n  danger?: boolean;\n  /** Shown greyed and unclickable. For an action that belongs on this menu\n   *  but cannot apply right now (Move up on the first row), so the menu keeps\n   *  the same shape and the same item stays in the same place every time. */\n  disabled?: boolean;\n  onClick: () => void;\n}\n\nconst EDGE = 6;\n\n/** The one open menu or popover. Only ever one, so a fresh open replaces it\n *  and a re-render that removed the anchor cannot leave one hanging in the air. */\nlet current: (() => void) | null = null;\n\n/** Outside-click / Escape wiring shared by the menu and the popover. The\n *  returned `dismiss` plays the exit and removes the node; `onDismiss` fires\n *  for every way out so a caller can flush on all of them. */\nfunction floating(node: HTMLElement, onDismiss?: () => void): { dismiss: () => void } {\n  let gone = false;\n  const dismiss = (): void => {\n    if (gone) return;\n    gone = true;\n    if (current === dismiss) current = null;\n    window.removeEventListener(\"pointerdown\", onAway, true);\n    window.removeEventListener(\"keydown\", onKey, true);\n    // A node mid-fade must not take a second click.\n    closeWithExit(node, () => node.remove());\n    onDismiss?.();\n  };\n  const onAway = (e: PointerEvent): void => { if (!node.contains(e.target as Node)) dismiss(); };\n  const onKey = (e: KeyboardEvent): void => { if (e.key === \"Escape\") { e.preventDefault(); dismiss(); } };\n  window.addEventListener(\"pointerdown\", onAway, true);\n  window.addEventListener(\"keydown\", onKey, true);\n  current?.();\n  current = dismiss;\n  return { dismiss };\n}\n\n/** Clamp a floating node into the viewport, preferring below `anchor` and\n *  flipping above it when there is no room. */\nfunction placeBelow(node: HTMLElement, anchor: DOMRect): void {\n  node.style.left = `${anchor.left}px`;\n  node.style.top = `${anchor.bottom + 4}px`;\n  const r = node.getBoundingClientRect();\n  if (r.right > window.innerWidth) node.style.left = `${Math.max(EDGE, window.innerWidth - r.width - EDGE)}px`;\n  if (r.bottom > window.innerHeight) node.style.top = `${Math.max(EDGE, anchor.top - r.height - 4)}px`;\n}\n\nexport interface PopoverOptions {\n  /** Where the popover is appended. Default <body>. A popover opened from\n   *  inside a modal <dialog> passes the dialog: a body-level node sits behind\n   *  the scrim, inert, while one inside the dialog paints in its top layer\n   *  (Patterpad's colour swatch popover in Project settings). */\n  host?: HTMLElement;\n}\n\n/** Open a small panel anchored to an element; `build` gets a close callback.\n *  `onClose` runs however it closes (Escape, outside click, or `close`), the\n *  place to flush an edit the panel was collecting. Only one is ever open. */\nexport function openPopover(\n  anchor: HTMLElement, build: (close: () => void) => HTMLElement, onClose?: () => void, opts: PopoverOptions = {},\n): void {\n  const pop = el(\"div\", \"popover\");\n  let closed = false;\n  const finish = (): void => { if (closed) return; closed = true; onClose?.(); };\n  const { dismiss } = floating(pop, finish);\n  pop.append(build(dismiss));\n  (opts.host ?? document.body).append(pop);\n  placeBelow(pop, anchor.getBoundingClientRect());\n}\n\n/** Open a context menu at (x, y). Only one is ever open. */\nexport function openContextMenu(x: number, y: number, items: ContextItem[]): void {\n  const menu = el(\"div\", \"ctxmenu\");\n  menu.setAttribute(\"role\", \"menu\");\n  const { dismiss } = floating(menu);\n\n  for (const item of items) {\n    const button = el(\"button\", {\n      className: `ctxmenu-item${item.danger ? \" danger\" : \"\"}`, text: item.label,\n      onClick: () => { if (item.disabled === true) return; dismiss(); item.onClick(); },\n    });\n    button.type = \"button\";\n    button.setAttribute(\"role\", \"menuitem\");\n    if (item.disabled === true) button.disabled = true;\n    menu.append(button);\n  }\n\n  menu.style.left = `${x}px`;\n  menu.style.top = `${y}px`;\n  document.body.append(menu);\n  // Keep it on-screen.\n  const r = menu.getBoundingClientRect();\n  if (r.right > window.innerWidth) menu.style.left = `${Math.max(EDGE, window.innerWidth - r.width - EDGE)}px`;\n  if (r.bottom > window.innerHeight) menu.style.top = `${Math.max(EDGE, window.innerHeight - r.height - EDGE)}px`;\n}\n"]}

package/dist/context-menu.css

@@ -0,0 +1,64 @@
+/* src/context-menu.css */
+.ctxmenu {
+  position: fixed;
+  z-index: 300;
+  min-width: 160px;
+  padding: 4px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-3);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  animation: var(--anim-panel-in);
+}
+.ctxmenu-item {
+  text-align: left;
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 13.5px;
+  color: var(--ink);
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);
+}
+.ctxmenu-item:hover {
+  background: var(--accent-soft, color-mix(in oklab, var(--accent) 10%, transparent));
+  color: var(--accent);
+}
+.ctxmenu-item:disabled {
+  color: var(--muted);
+  opacity: 0.55;
+  cursor: default;
+}
+.ctxmenu-item:disabled:hover {
+  background: none;
+  color: var(--muted);
+}
+.ctxmenu-item.danger {
+  color: var(--danger);
+}
+.ctxmenu-item.danger:hover {
+  background: var(--danger);
+  color: var(--surface);
+}
+.popover {
+  position: fixed;
+  z-index: 300;
+  padding: 10px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-3);
+  animation: var(--anim-panel-in);
+}
+.ctxmenu.closing,
+.popover.closing {
+  animation: var(--anim-panel-out);
+  pointer-events: none;
+}
+/*# sourceMappingURL=context-menu.css.map */

package/dist/context-menu.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context-menu.css"],"sourcesContent":["/* The right-click menu and the anchored popover (context-menu.ts), styled\n   beside the module that builds them so a tool window that imports the module\n   gets the look as well as the behaviour (Storyletter's Links window once got\n   an unstyled static div and a scrollbar). Tokens only, so both palettes come\n   out right wherever it lands. */\n\n.ctxmenu {\n  position: fixed; z-index: 300; min-width: 160px; padding: 4px;\n  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);\n  box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 1px;\n  /* The family's panel motion, so reduced motion applies here too. */\n  animation: var(--anim-panel-in);\n}\n/* The reset is spelled out here, not inherited from a host stylesheet's\n   `button` rule, for the same reason this file exists. */\n.ctxmenu-item {\n  text-align: left; width: 100%; padding: 6px 10px;\n  font: inherit; font-size: 13.5px; color: var(--ink);\n  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;\n  transition: background var(--dur-quick) var(--ease-standard), color var(--dur-quick) var(--ease-standard);\n}\n.ctxmenu-item:hover { background: var(--accent-soft, color-mix(in oklab, var(--accent) 10%, transparent)); color: var(--accent); }\n/* Greyed and inert, and it must not light up on hover like a live item. */\n.ctxmenu-item:disabled { color: var(--muted); opacity: 0.55; cursor: default; }\n.ctxmenu-item:disabled:hover { background: none; color: var(--muted); }\n.ctxmenu-item.danger { color: var(--danger); }\n.ctxmenu-item.danger:hover { background: var(--danger); color: var(--surface); }\n\n/* An anchored panel: the same floating shell as the menu, hosting content. */\n.popover {\n  position: fixed; z-index: 300; padding: 10px;\n  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);\n  box-shadow: var(--shadow-3);\n  animation: var(--anim-panel-in);\n}\n\n/* Exit: .closing swaps the enter keyframes for their reverse (closeWithExit),\n   and a node on its way out takes no clicks. */\n.ctxmenu.closing, .popover.closing { animation: var(--anim-panel-out); pointer-events: none; }\n"],"mappings":";AAMA,CAAC;AACC,YAAU;AAAO,WAAS;AAAK,aAAW;AAAO,WAAS;AAC1D,cAAY,IAAI;AAAY,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAC9E,cAAY,IAAI;AAAa,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAEzE,aAAW,IAAI;AACjB;AAGA,CAAC;AACC,cAAY;AAAM,SAAO;AAAM,WAAS,IAAI;AAC5C,QAAM;AAAS,aAAW;AAAQ,SAAO,IAAI;AAC7C,cAAY;AAAM,UAAQ;AAAG,iBAAe,IAAI;AAAc,UAAQ;AACtE,cAAY,WAAW,IAAI,aAAa,IAAI,gBAAgB,EAAE,MAAM,IAAI,aAAa,IAAI;AAC3F;AACA,CANC,YAMY;AAAS,cAAY,IAAI,aAAa,EAAE,UAAU,GAAG,KAAK,EAAE,IAAI,UAAU,GAAG,EAAE;AAAe,SAAO,IAAI;AAAW;AAEjI,CARC,YAQY;AAAY,SAAO,IAAI;AAAU,WAAS;AAAM,UAAQ;AAAS;AAC9E,CATC,YASY,SAAS;AAAS,cAAY;AAAM,SAAO,IAAI;AAAU;AACtE,CAVC,YAUY,CAAC;AAAS,SAAO,IAAI;AAAW;AAC7C,CAXC,YAWY,CADC,MACM;AAAS,cAAY,IAAI;AAAW,SAAO,IAAI;AAAY;AAG/E,CAAC;AACC,YAAU;AAAO,WAAS;AAAK,WAAS;AACxC,cAAY,IAAI;AAAY,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AAC9E,cAAY,IAAI;AAChB,aAAW,IAAI;AACjB;AAIA,CAhCC,OAgCO,CAAC;AAAS,CATjB,OASyB,CAAjB;AAA4B,aAAW,IAAI;AAAmB,kBAAgB;AAAM;","names":[]}

package/dist/context-menu.d.cts

@@ -0,0 +1,25 @@
+interface ContextItem {
+    label: string;
+    /** Drawn in --danger: a destructive action, which names its object. */
+    danger?: boolean;
+    /** Shown greyed and unclickable. For an action that belongs on this menu
+     *  but cannot apply right now (Move up on the first row), so the menu keeps
+     *  the same shape and the same item stays in the same place every time. */
+    disabled?: boolean;
+    onClick: () => void;
+}
+interface PopoverOptions {
+    /** Where the popover is appended. Default <body>. A popover opened from
+     *  inside a modal <dialog> passes the dialog: a body-level node sits behind
+     *  the scrim, inert, while one inside the dialog paints in its top layer
+     *  (Patterpad's colour swatch popover in Project settings). */
+    host?: HTMLElement;
+}
+/** Open a small panel anchored to an element; `build` gets a close callback.
+ *  `onClose` runs however it closes (Escape, outside click, or `close`), the
+ *  place to flush an edit the panel was collecting. Only one is ever open. */
+declare function openPopover(anchor: HTMLElement, build: (close: () => void) => HTMLElement, onClose?: () => void, opts?: PopoverOptions): void;
+/** Open a context menu at (x, y). Only one is ever open. */
+declare function openContextMenu(x: number, y: number, items: ContextItem[]): void;
+
+export { type ContextItem, type PopoverOptions, openContextMenu, openPopover };

package/dist/context-menu.d.ts

@@ -0,0 +1,25 @@
+interface ContextItem {
+    label: string;
+    /** Drawn in --danger: a destructive action, which names its object. */
+    danger?: boolean;
+    /** Shown greyed and unclickable. For an action that belongs on this menu
+     *  but cannot apply right now (Move up on the first row), so the menu keeps
+     *  the same shape and the same item stays in the same place every time. */
+    disabled?: boolean;
+    onClick: () => void;
+}
+interface PopoverOptions {
+    /** Where the popover is appended. Default <body>. A popover opened from
+     *  inside a modal <dialog> passes the dialog: a body-level node sits behind
+     *  the scrim, inert, while one inside the dialog paints in its top layer
+     *  (Patterpad's colour swatch popover in Project settings). */
+    host?: HTMLElement;
+}
+/** Open a small panel anchored to an element; `build` gets a close callback.
+ *  `onClose` runs however it closes (Escape, outside click, or `close`), the
+ *  place to flush an edit the panel was collecting. Only one is ever open. */
+declare function openPopover(anchor: HTMLElement, build: (close: () => void) => HTMLElement, onClose?: () => void, opts?: PopoverOptions): void;
+/** Open a context menu at (x, y). Only one is ever open. */
+declare function openContextMenu(x: number, y: number, items: ContextItem[]): void;
+
+export { type ContextItem, type PopoverOptions, openContextMenu, openPopover };

package/dist/context-menu.js

@@ -0,0 +1,5 @@
+export { openContextMenu, openPopover } from './chunk-EHR2KBZC.js';
+import './chunk-UG2P777F.js';
+import './chunk-IU7EY6BI.js';
+//# sourceMappingURL=context-menu.js.map
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"context-menu.js"}