@shadow-garden/bapbong-ui 0.13.2 → 0.14.0

package/dist/index.js

@@ -1,13 +1,23 @@
 // packages/ui/src/lib/internal.ts
+import { keyLabel } from "@shadow-garden/bapbong-contracts";
+var IS_MAC = typeof navigator !== "undefined" ? /Mac|iP(hone|[oa]d)/.test(navigator.platform) : false;
+function shortcutLabel(command, registries) {
+  for (const r of registries) {
+    if (!r) continue;
+    for (const b of r)
+      if (b.command === command) return keyLabel(b.key, IS_MAC);
+  }
+  return void 0;
+}
 function injectStyle(id, css) {
   if (document.getElementById(id)) return;
-  const el2 = document.createElement("style");
-  el2.id = id;
-  el2.textContent = css;
-  document.head.appendChild(el2);
+  const el5 = document.createElement("style");
+  el5.id = id;
+  el5.textContent = css;
+  document.head.appendChild(el5);
 }
-function placeFloating(el2, anchor) {
-  const r = el2.getBoundingClientRect();
+function placeFloating(el5, anchor) {
+  const r = el5.getBoundingClientRect();
   const pad = 6;
   const gap = 6;
   const x = Math.max(
@@ -17,16 +27,75 @@ function placeFloating(el2, anchor) {
   const below = anchor.y + anchor.height + gap;
   const above = anchor.y - gap - r.height;
   const y = below + r.height <= window.innerHeight - pad || above < pad ? Math.min(below, window.innerHeight - r.height - pad) : above;
-  el2.style.left = `${x}px`;
-  el2.style.top = `${y}px`;
+  el5.style.left = `${x}px`;
+  el5.style.top = `${y}px`;
+}
+function rovingGrid(cells) {
+  let cur = [0, 0];
+  const at = (r, c) => cells[r]?.[c];
+  const focusCell = (r, c) => {
+    const rows = cells.length;
+    if (rows === 0) return;
+    const nr = Math.min(rows - 1, Math.max(0, r));
+    const nc = Math.min(cells[nr].length - 1, Math.max(0, c));
+    const prev = at(cur[0], cur[1]);
+    if (prev) prev.tabIndex = -1;
+    const next = at(nr, nc);
+    if (!next) return;
+    next.tabIndex = 0;
+    next.focus();
+    cur = [nr, nc];
+  };
+  cells.forEach(
+    (row, r) => row.forEach((cell, c) => {
+      cell.setAttribute("role", "gridcell");
+      cell.tabIndex = r === 0 && c === 0 ? 0 : -1;
+      cell.addEventListener("keydown", (e) => {
+        const delta = {
+          ArrowRight: [0, 1],
+          ArrowLeft: [0, -1],
+          ArrowDown: [1, 0],
+          ArrowUp: [-1, 0],
+          Home: [0, -Infinity],
+          End: [0, Infinity]
+        };
+        const d = delta[e.key];
+        if (!d) return;
+        e.preventDefault();
+        focusCell(r + d[0], c + d[1]);
+      });
+      cell.addEventListener("focus", () => {
+        cur = [r, c];
+      });
+    })
+  );
+  return { focusCell };
 }
 
 // packages/ui/src/lib/dialog.ts
+function panelAnchor(o) {
+  return () => {
+    const areaEl = o.area();
+    if (!areaEl) return null;
+    const a = areaEl.getBoundingClientRect();
+    let top = a.top;
+    for (const el5 of o.avoid?.() ?? []) {
+      if (!el5) continue;
+      const b = el5.getBoundingClientRect();
+      const overlapsX = b.right > a.left && b.left < a.right;
+      const overTop = b.top < a.bottom && b.bottom > top;
+      if (overlapsX && overTop) top = Math.max(top, b.bottom);
+    }
+    if (top >= a.bottom) return null;
+    return new DOMRect(a.left, top, a.width, a.bottom - top);
+  };
+}
 var STYLE = `
 .bb-dialog{position:fixed;inset:auto;z-index:1100;margin:0;padding:0;border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;background:var(--bb-ui-dialog-bg,var(--bb-ui-menu-bg,#fff));-webkit-backdrop-filter:var(--bb-ui-dialog-filter,none);backdrop-filter:var(--bb-ui-dialog-filter,none);color:var(--bb-ui-fg,#2c2c2a);box-shadow:0 12px 40px rgba(0,0,0,.18);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);min-width:280px;max-width:min(92vw,440px)}
 .bb-dialog *{box-sizing:border-box}
 .bb-dialog::backdrop{background:rgba(0,0,0,.28)}
 .bb-dialog-modal{top:50%;left:50%;transform:translate(-50%,-50%)}
+.bb-dialog-wide{max-width:min(92vw,640px)}
 .bb-dialog-float{top:62px;right:24px}
 .bb-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px 9px 12px;border-bottom:1px solid var(--bb-ui-border,#e3e3e0)}
 .bb-dialog-title{font-size:13px;font-weight:600}
@@ -60,8 +129,8 @@ var Dialog = class {
     injectStyle("bb-ui-dialog-styles", STYLE);
     this.modal = options.modal ?? false;
     this.anchor = options.anchor;
-    const el2 = document.createElement("dialog");
-    el2.className = `bb-dialog ${this.modal ? "bb-dialog-modal" : "bb-dialog-float"}` + (options.className ? ` ${options.className}` : "");
+    const el5 = document.createElement("dialog");
+    el5.className = `bb-dialog ${this.modal ? "bb-dialog-modal" : "bb-dialog-float"}` + (options.wide ? " bb-dialog-wide" : "") + (options.className ? ` ${options.className}` : "");
     const header = document.createElement("div");
     header.className = "bb-dialog-header";
     this.title = document.createElement("span");
@@ -76,18 +145,18 @@ var Dialog = class {
     header.append(this.title, close);
     this.body = document.createElement("div");
     this.body.className = "bb-dialog-body";
-    el2.append(header, this.body);
-    document.body.appendChild(el2);
-    el2.addEventListener("close", () => {
+    el5.append(header, this.body);
+    document.body.appendChild(el5);
+    el5.addEventListener("close", () => {
       this.detachReposition();
       this.closeListeners.forEach((cb) => cb());
     });
     if (!this.modal) {
-      el2.addEventListener("keydown", (e) => {
+      el5.addEventListener("keydown", (e) => {
         if (e.key === "Escape") this.close();
       });
     }
-    this.el = el2;
+    this.el = el5;
   }
   attachReposition() {
     window.addEventListener("scroll", this.reposition, true);
@@ -346,45 +415,24 @@ function openColorPicker({
   grid.className = "bb-cpk-grid";
   grid.setAttribute("role", "grid");
   const cells = [];
-  COLOR_PALETTE.forEach((row, r2) => {
+  COLOR_PALETTE.forEach((row) => {
     const rowCells = [];
-    row.forEach((color, c) => {
+    row.forEach((color) => {
       const sw = document.createElement("button");
       sw.type = "button";
       sw.className = "bb-cpk-sw";
       sw.style.background = color;
       sw.title = color;
-      sw.setAttribute("role", "gridcell");
       sw.setAttribute("aria-label", color);
-      sw.tabIndex = -1;
       if (color.toUpperCase() === value?.toUpperCase()) sw.classList.add("on");
       sw.addEventListener("click", () => pick(color));
-      sw.addEventListener("keydown", (e) => onGridKey(e, r2, c));
       grid.append(sw);
       rowCells.push(sw);
     });
     cells.push(rowCells);
   });
   panel.append(grid);
-  function onGridKey(e, r2, c) {
-    const delta = {
-      ArrowRight: [0, 1],
-      ArrowLeft: [0, -1],
-      ArrowDown: [1, 0],
-      ArrowUp: [-1, 0]
-    };
-    const d = delta[e.key];
-    if (!d) return;
-    e.preventDefault();
-    const rows = cells.length;
-    const cols = cells[0].length;
-    const nr = Math.min(rows - 1, Math.max(0, r2 + d[0]));
-    const nc = Math.min(cols - 1, Math.max(0, c + d[1]));
-    cells[r2][c].tabIndex = -1;
-    const next = cells[nr][nc];
-    next.tabIndex = 0;
-    next.focus();
-  }
+  const nav = rovingGrid(cells);
   panel.append(
     Object.assign(document.createElement("div"), {
       className: "bb-cpk-cap",
@@ -440,36 +488,38 @@ function openColorPicker({
     if (outside) close();
   });
   window.addEventListener("scroll", close, true);
-  const start = cells.flat().find((el2) => el2.classList.contains("on")) ?? cells[0][0];
-  start.tabIndex = 0;
-  start.focus();
+  const onRow = cells.findIndex(
+    (row) => row.some((el5) => el5.classList.contains("on"))
+  );
+  const onCol = onRow >= 0 ? cells[onRow].findIndex((el5) => el5.classList.contains("on")) : 0;
+  nav.focusCell(Math.max(0, onRow), Math.max(0, onCol));
   return { close };
 }
 function colorButton(o) {
   injectStyle("bb-ui-colorpicker-styles", STYLE2);
-  const el2 = document.createElement("button");
-  el2.type = "button";
-  el2.className = `bb-cpk-btn${o.glyph ? " glyphed" : ""}`;
-  el2.title = o.title;
-  el2.setAttribute("aria-label", o.title);
-  el2.setAttribute("aria-haspopup", "dialog");
+  const el5 = document.createElement("button");
+  el5.type = "button";
+  el5.className = `bb-cpk-btn${o.glyph ? " glyphed" : ""}`;
+  el5.title = o.title;
+  el5.setAttribute("aria-label", o.title);
+  el5.setAttribute("aria-haspopup", "dialog");
   let chip;
   if (o.glyph) {
-    const g = document.createElement("span");
-    g.className = "bb-cpk-btn-glyph";
-    g.innerHTML = o.glyph;
+    const g2 = document.createElement("span");
+    g2.className = "bb-cpk-btn-glyph";
+    g2.innerHTML = o.glyph;
     chip = document.createElement("span");
     chip.className = "bb-cpk-btn-bar";
-    el2.append(g, chip);
+    el5.append(g2, chip);
   } else {
     chip = document.createElement("span");
     chip.className = "bb-cpk-btn-chip";
-    el2.append(chip);
-    if (o.label) el2.append(document.createTextNode(o.label));
+    el5.append(chip);
+    if (o.label) el5.append(document.createTextNode(o.label));
     const caret = document.createElement("span");
     caret.className = "bb-cpk-btn-caret";
     caret.textContent = "\u25BE";
-    el2.append(caret);
+    el5.append(caret);
   }
   function sync() {
     const v = o.value();
@@ -477,10 +527,10 @@ function colorButton(o) {
     chip.classList.toggle("none", !v && !o.glyph);
     chip.textContent = !v && !o.glyph ? "\u29B8" : "";
   }
-  el2.addEventListener("mousedown", (e) => e.preventDefault());
-  el2.addEventListener("click", () => {
+  el5.addEventListener("mousedown", (e) => e.preventDefault());
+  el5.addEventListener("click", () => {
     openColorPicker({
-      anchor: el2,
+      anchor: el5,
       value: o.value(),
       clearLabel: o.clearLabel,
       onPick: (c) => {
@@ -490,7 +540,7 @@ function colorButton(o) {
     });
   });
   sync();
-  return { el: el2, sync };
+  return { el: el5, sync };
 }
 
 // packages/ui/src/lib/toolbar.ts
@@ -598,7 +648,7 @@ function defaultToolbarGroups(commands) {
   const names = [...commands].map((c) => c.name);
   const aligns = names.filter((n) => n.startsWith("align-"));
   const rest = names.filter((n) => !n.startsWith("align-"));
-  return [rest, aligns].filter((g) => g.length > 0);
+  return [rest, aligns].filter((g2) => g2.length > 0);
 }
 function mountToolbar(host, editor, options = {}) {
   injectStyle("bb-ui-toolbar-styles", STYLE3);
@@ -643,6 +693,20 @@ function mountToolbar(host, editor, options = {}) {
         selects.push({ spec: entry, el: sel });
         continue;
       }
+      if (typeof entry !== "string" && entry.kind === "button") {
+        const btn2 = document.createElement("button");
+        btn2.type = "button";
+        btn2.className = "bb-toolbar-btn";
+        btn2.title = entry.title;
+        btn2.setAttribute("aria-label", entry.title);
+        btn2.setAttribute("aria-haspopup", "dialog");
+        if (entry.svg) btn2.innerHTML = entry.svg;
+        else btn2.textContent = entry.label ?? entry.title;
+        btn2.addEventListener("mousedown", (e) => e.preventDefault());
+        btn2.addEventListener("click", () => entry.onClick(btn2));
+        groupEl.appendChild(btn2);
+        continue;
+      }
       if (typeof entry !== "string" && entry.kind === "color") {
         const ctl = colorButton({
           title: entry.title,
@@ -753,6 +817,10 @@ function mountToolbar(host, editor, options = {}) {
       btn.type = "button";
       btn.className = "bb-toolbar-btn" + (item.className ? ` ${item.className}` : "");
       btn.title = item.title;
+      btn.addEventListener("mouseenter", () => {
+        const key = shortcutLabel(entry, [editor.keybindings]);
+        btn.title = key ? `${item.title} (${key})` : item.title;
+      });
       btn.setAttribute("aria-label", item.title);
       if (item.svg) btn.innerHTML = item.svg;
       else btn.textContent = item.label ?? entry;
@@ -803,7 +871,7 @@ function mountToolbar(host, editor, options = {}) {
     if (fits()) return;
     moreBtn.style.display = "";
     const groupEls = Array.from(root.children).filter(
-      (el2) => el2.classList.contains("bb-toolbar-group")
+      (el5) => el5.classList.contains("bb-toolbar-group")
     );
     for (let i = groupEls.length - 1; i >= 0 && !fits(); i--) {
       pop.insertBefore(groupEls[i], pop.firstChild);
@@ -818,15 +886,15 @@ function mountToolbar(host, editor, options = {}) {
   layout();
   const refresh = (state) => {
     latest = state;
-    for (const { name, el: el2 } of buttons) {
+    for (const { name, el: el5 } of buttons) {
       const cmd = editor.commands.get(name);
       if (!cmd) continue;
       const active = cmd.isActive?.(state) ?? false;
-      el2.classList.toggle("is-active", active);
-      el2.setAttribute("aria-pressed", String(active));
-      el2.disabled = cmd.isEnabled ? !cmd.isEnabled(state) : false;
+      el5.classList.toggle("is-active", active);
+      el5.setAttribute("aria-pressed", String(active));
+      el5.disabled = cmd.isEnabled ? !cmd.isEnabled(state) : false;
     }
-    for (const { spec, el: el2 } of selects) el2.value = spec.value(state);
+    for (const { spec, el: el5 } of selects) el5.value = spec.value(state);
     for (const c of colors) c.sync();
     for (const { spec, cards } of splits) {
       const selected = spec.value(state);
@@ -915,19 +983,18 @@ function makeRow(label, opts) {
   text.className = "bb-menu-label";
   text.textContent = label;
   item.append(check, text);
-  if (opts.shortcut) {
-    const sc = document.createElement("span");
-    sc.className = "bb-menu-shortcut";
-    sc.textContent = opts.shortcut;
-    item.appendChild(sc);
-  }
+  const sc = document.createElement("span");
+  sc.className = "bb-menu-shortcut";
+  sc.textContent = opts.shortcut ?? "";
+  if (!opts.shortcut) sc.hidden = true;
+  item.appendChild(sc);
   if (opts.hasSub) {
     const arrow = document.createElement("span");
     arrow.className = "bb-menu-arrow";
     arrow.textContent = "\u203A";
     item.appendChild(arrow);
   }
-  return { item, check };
+  return { item, check, shortcutEl: sc };
 }
 function buildMenuEntries(entries, container, ctx) {
   for (const entry of entries) {
@@ -958,10 +1025,11 @@ function buildMenuEntries(entries, container, ctx) {
       const editor = ctx.editor;
       const cmd = editor?.commands.get(entry.command);
       if (!editor || !cmd) continue;
-      const { item, check } = makeRow(
+      const { item, check, shortcutEl } = makeRow(
         entry.label ?? ctx.labels[entry.command] ?? entry.command,
-        {}
+        { shortcut: ctx.shortcutOf?.(entry.command) }
       );
+      ctx.shortcutRef?.(shortcutEl, entry.command);
       item.setAttribute("role", "menuitemcheckbox");
       item.addEventListener("click", () => {
         const s = ctx.state();
@@ -974,9 +1042,10 @@ function buildMenuEntries(entries, container, ctx) {
       if (cmd.isEnabled) ctx.enable(item, (s) => cmd.isEnabled(s));
       container.appendChild(item);
     } else {
-      const { item, check } = makeRow(entry.label, {
-        shortcut: entry.shortcut
+      const { item, check, shortcutEl } = makeRow(entry.label, {
+        shortcut: (entry.shortcutOf && ctx.shortcutOf?.(entry.shortcutOf)) ?? entry.shortcut
       });
+      if (entry.shortcutOf) ctx.shortcutRef?.(shortcutEl, entry.shortcutOf);
       item.setAttribute(
         "role",
         entry.isActive ? "menuitemcheckbox" : "menuitem"
@@ -1002,15 +1071,15 @@ function closeCurrentPopup() {
 function showPopup(content, at, onClose) {
   injectStyle("bb-ui-menubar-styles", STYLE4);
   closeCurrentPopup();
-  const el2 = document.createElement("div");
-  el2.className = "bb-menu bb-popup";
-  el2.setAttribute("role", "menu");
-  el2.appendChild(content);
-  document.body.appendChild(el2);
+  const el5 = document.createElement("div");
+  el5.className = "bb-menu bb-popup";
+  el5.setAttribute("role", "menu");
+  el5.appendChild(content);
+  document.body.appendChild(el5);
   const place = () => {
-    const r = el2.getBoundingClientRect();
-    el2.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
-    el2.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
+    const r = el5.getBoundingClientRect();
+    el5.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
+    el5.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
   };
   place();
   let disposed = false;
@@ -1020,7 +1089,7 @@ function showPopup(content, at, onClose) {
     document.removeEventListener("pointerdown", onPointer, true);
     document.removeEventListener("keydown", onKey, true);
     document.removeEventListener("scroll", onScroll, true);
-    el2.remove();
+    el5.remove();
     onClose?.();
   };
   const close = () => {
@@ -1028,7 +1097,7 @@ function showPopup(content, at, onClose) {
     dispose();
   };
   const onPointer = (e) => {
-    if (!el2.contains(e.target)) close();
+    if (!el5.contains(e.target)) close();
   };
   const onKey = (e) => {
     if (e.key === "Escape") {
@@ -1037,13 +1106,13 @@ function showPopup(content, at, onClose) {
     }
   };
   const onScroll = (e) => {
-    if (!el2.contains(e.target)) close();
+    if (!el5.contains(e.target)) close();
   };
   document.addEventListener("pointerdown", onPointer, true);
   document.addEventListener("keydown", onKey, true);
   document.addEventListener("scroll", onScroll, true);
   currentPopup = dispose;
-  return { close, el: el2 };
+  return { close, el: el5 };
 }
 function showMenu(entries, at, options = {}) {
   const labels = { ...DEFAULT_LABELS, ...options.labels ?? {} };
@@ -1067,12 +1136,13 @@ function showMenu(entries, at, options = {}) {
     close: () => handle?.close(),
     labels,
     editor: options.editor,
+    shortcutOf: (command) => shortcutLabel(command, [options.editor?.keybindings]),
     state: stateOf,
-    check: (el2, active) => {
-      el2.textContent = evalNow(active, false) ? "\u2713" : "";
+    check: (el5, active) => {
+      el5.textContent = evalNow(active, false) ? "\u2713" : "";
     },
-    enable: (el2, enabled) => {
-      el2.disabled = !evalNow(enabled, true);
+    enable: (el5, enabled) => {
+      el5.disabled = !evalNow(enabled, true);
     }
   });
   handle = showPopup(container, at, options.onClose);
@@ -1116,6 +1186,7 @@ function mountMenubar(host, editor, options = {}) {
   const open = (idx, focusFirst = false) => {
     if (openIdx === idx) return;
     close();
+    refreshShortcuts();
     const p = panels[idx];
     p.dropdown.hidden = false;
     p.title.setAttribute("aria-expanded", "true");
@@ -1124,13 +1195,24 @@ function mountMenubar(host, editor, options = {}) {
     if (focusFirst)
       p.dropdown.querySelector(".bb-menu-item")?.focus();
   };
+  const registries = [editor.keybindings, ...options.keybindings ?? []];
+  const shortcutRefs = [];
+  const refreshShortcuts = () => {
+    for (const { el: el5, command } of shortcutRefs) {
+      const label = shortcutLabel(command, registries);
+      el5.textContent = label ?? "";
+      el5.hidden = !label;
+    }
+  };
   const buildCtx = {
     close: () => close(),
     labels,
     editor,
+    shortcutOf: (command) => shortcutLabel(command, registries),
+    shortcutRef: (el5, command) => shortcutRefs.push({ el: el5, command }),
     state: () => latest,
-    check: (el2, active) => checks.push({ el: el2, active }),
-    enable: (el2, enabled) => enables.push({ el: el2, enabled })
+    check: (el5, active) => checks.push({ el: el5, active }),
+    enable: (el5, enabled) => enables.push({ el: el5, enabled })
   };
   const buildEntries = (entries, container) => buildMenuEntries(entries, container, buildCtx);
   menus.forEach((menu, idx) => {
@@ -1342,15 +1424,15 @@ function closeCurrent() {
 function showContextMenu(entries, at) {
   injectStyle("bb-ui-contextmenu-styles", STYLE6);
   closeCurrent();
-  const el2 = document.createElement("div");
-  el2.className = "bb-ctx";
-  el2.setAttribute("role", "menu");
+  const el5 = document.createElement("div");
+  el5.className = "bb-ctx";
+  el5.setAttribute("role", "menu");
   for (const entry of entries) {
     if (entry === "separator") {
       const sep = document.createElement("div");
       sep.className = "bb-ctx-sep";
       sep.setAttribute("role", "separator");
-      el2.appendChild(sep);
+      el5.appendChild(sep);
       continue;
     }
     const item = document.createElement("button");
@@ -1373,22 +1455,22 @@ function showContextMenu(entries, at) {
       closeCurrent();
       entry.run();
     });
-    el2.appendChild(item);
+    el5.appendChild(item);
   }
-  document.body.appendChild(el2);
-  const r = el2.getBoundingClientRect();
+  document.body.appendChild(el5);
+  const r = el5.getBoundingClientRect();
   const pad = 4;
   const fitsX = (v) => v >= pad && v + r.width <= window.innerWidth - pad;
   const fitsY = (v) => v >= pad && v + r.height <= window.innerHeight - pad;
   const x = fitsX(at.x) ? at.x : fitsX(at.x - r.width) ? at.x - r.width : Math.max(pad, Math.min(at.x, window.innerWidth - r.width - pad));
   const y = fitsY(at.y) ? at.y : fitsY(at.y - r.height) ? at.y - r.height : Math.max(pad, Math.min(at.y, window.innerHeight - r.height - pad));
-  el2.style.left = `${x}px`;
-  el2.style.top = `${y}px`;
+  el5.style.left = `${x}px`;
+  el5.style.top = `${y}px`;
   const items = () => Array.from(
-    el2.querySelectorAll(".bb-ctx-item:not(:disabled)")
+    el5.querySelectorAll(".bb-ctx-item:not(:disabled)")
   );
   const onDown = (e) => {
-    if (!el2.contains(e.target)) closeCurrent();
+    if (!el5.contains(e.target)) closeCurrent();
   };
   const onKey = (e) => {
     if (e.key === "Escape") return closeCurrent();
@@ -1410,7 +1492,7 @@ function showContextMenu(entries, at) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     window.removeEventListener("scroll", onScroll, true);
-    el2.remove();
+    el5.remove();
   };
   items()[0]?.focus();
   return { close: closeCurrent };
@@ -1471,10 +1553,10 @@ function showLinkPanel(opts) {
     return currentHandle;
   }
   closeCurrent2();
-  const el2 = document.createElement("div");
-  el2.className = "bb-linkpanel";
-  el2.setAttribute("role", "dialog");
-  el2.setAttribute("aria-label", "Link");
+  const el5 = document.createElement("div");
+  el5.className = "bb-linkpanel";
+  el5.setAttribute("role", "dialog");
+  el5.setAttribute("aria-label", "Link");
   const iconBtn = (svg, label, onClick) => {
     const b = document.createElement("button");
     b.type = "button";
@@ -1501,7 +1583,7 @@ function showLinkPanel(opts) {
     return { wrap, input };
   };
   const renderView = (existing) => {
-    el2.textContent = "";
+    el5.textContent = "";
     const row = document.createElement("div");
     row.className = "bb-linkpanel-row";
     const internal = opts.internal;
@@ -1548,11 +1630,11 @@ function showLinkPanel(opts) {
         })
       );
     }
-    el2.appendChild(row);
-    placeFloating(el2, opts.anchor);
+    el5.appendChild(row);
+    placeFloating(el5, opts.anchor);
   };
   const renderForm = (prefill) => {
-    el2.textContent = "";
+    el5.textContent = "";
     const form = document.createElement("div");
     form.className = "bb-linkpanel-form";
     const withText = !opts.hasSelection;
@@ -1593,16 +1675,16 @@ function showLinkPanel(opts) {
     }
     row.appendChild(apply);
     form.appendChild(row);
-    el2.appendChild(form);
-    placeFloating(el2, opts.anchor);
+    el5.appendChild(form);
+    placeFloating(el5, opts.anchor);
     u.input.focus();
     u.input.select();
   };
-  document.body.appendChild(el2);
+  document.body.appendChild(el5);
   if (opts.existing) renderView(opts.existing);
   else renderForm(null);
   const onDown = (e) => {
-    if (el2.contains(e.target)) return;
+    if (el5.contains(e.target)) return;
     if (opts.key) {
       cancelPendingClose();
       pendingClose = setTimeout(closeCurrent2, 80);
@@ -1623,7 +1705,7 @@ function showLinkPanel(opts) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     window.removeEventListener("scroll", onScroll, true);
-    el2.remove();
+    el5.remove();
   };
   current2 = dispose;
   currentKey = opts.key ?? null;
@@ -1826,8 +1908,8 @@ function openCellProperties({
     for (const [key, b] of vaBtns) b.classList.toggle("on", vAlign === key);
   }
   function syncPresets() {
-    for (const { el: el2, key } of presetEls)
-      el2.classList.toggle("on", preset === key);
+    for (const { el: el5, key } of presetEls)
+      el5.classList.toggle("on", preset === key);
   }
   syncVAlign();
   syncPresets();
@@ -1872,7 +1954,7 @@ function tableGridPicker(options) {
   label.className = "bb-grid-label";
   label.textContent = "0 \xD7 0";
   const cells = [];
-  const highlight = (r, c) => {
+  const highlight2 = (r, c) => {
     for (let i = 0; i < cells.length; i++) {
       const row = Math.floor(i / maxCols);
       const col = i % maxCols;
@@ -1886,7 +1968,7 @@ function tableGridPicker(options) {
       cell.type = "button";
       cell.className = "bb-grid-cell";
       cell.addEventListener("mousedown", (e) => e.preventDefault());
-      cell.addEventListener("mouseenter", () => highlight(r, c));
+      cell.addEventListener("mouseenter", () => highlight2(r, c));
       cell.addEventListener("click", () => options.onPick(r + 1, c + 1));
       cells.push(cell);
       cellsEl.appendChild(cell);
@@ -1935,9 +2017,9 @@ var STYLE10 = `
 `;
 var SVG_NS = "http://www.w3.org/2000/svg";
 function svgEl(name, attrs) {
-  const el2 = document.createElementNS(SVG_NS, name);
-  for (const [k, v] of Object.entries(attrs)) el2.setAttribute(k, String(v));
-  return el2;
+  const el5 = document.createElementNS(SVG_NS, name);
+  for (const [k, v] of Object.entries(attrs)) el5.setAttribute(k, String(v));
+  return el5;
 }
 function pagePreview(ratio) {
   const svg = svgEl("svg", { viewBox: "0 0 34 42", class: "bb-ps-icon" });
@@ -2004,11 +2086,11 @@ function presetRow(icon, name, caption, active, onPick) {
   return row;
 }
 function captionLine(text) {
-  const el2 = document.createElement("span");
-  el2.className = "bb-ps-dims";
-  el2.style.display = "block";
-  el2.textContent = text;
-  return el2;
+  const el5 = document.createElement("span");
+  el5.className = "bb-ps-dims";
+  el5.style.display = "block";
+  el5.textContent = text;
+  return el5;
 }
 function customRow(icon, title, description, onPick) {
   icon.appendChild(
@@ -2137,8 +2219,8 @@ function cmField(label, valuePx, min) {
   return { row, input };
 }
 function dialogActions() {
-  const el2 = document.createElement("div");
-  el2.className = "bb-pd-actions";
+  const el5 = document.createElement("div");
+  el5.className = "bb-pd-actions";
   const cancel = document.createElement("button");
   cancel.type = "button";
   cancel.className = "bb-prompt-btn";
@@ -2148,8 +2230,8 @@ function dialogActions() {
   ok.className = "bb-prompt-btn";
   ok.dataset["primary"] = "true";
   ok.textContent = "OK";
-  el2.append(cancel, ok);
-  return { el: el2, ok, cancel };
+  el5.append(cancel, ok);
+  return { el: el5, ok, cancel };
 }
 function readPx(input, fallbackPx) {
   const n = Number(input.value);
@@ -2346,15 +2428,15 @@ function sectionPaperPanel(options) {
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
   const group = (text) => {
-    const el2 = document.createElement("div");
-    el2.className = "bb-ps-group";
-    el2.textContent = text;
-    return el2;
+    const el5 = document.createElement("div");
+    el5.className = "bb-ps-group";
+    el5.textContent = text;
+    return el5;
   };
   const sep = () => {
-    const el2 = document.createElement("div");
-    el2.className = "bb-ps-sep";
-    return el2;
+    const el5 = document.createElement("div");
+    el5.className = "bb-ps-sep";
+    return el5;
   };
   root.appendChild(group(options.labels?.orientation ?? "Orientation"));
   const tiles = document.createElement("div");
@@ -2424,8 +2506,8 @@ var STYLE11 = `
 `;
 function createSectionChip(options) {
   injectStyle("bb-ui-section-chip-styles", STYLE11);
-  const el2 = document.createElement("div");
-  el2.className = "bb-secchip";
+  const el5 = document.createElement("div");
+  el5.className = "bb-secchip";
   const title = document.createElement("span");
   title.className = "bb-secchip-title";
   title.textContent = options.title;
@@ -2459,16 +2541,16 @@ function createSectionChip(options) {
   x.innerHTML = '<svg viewBox="0 0 16 16" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 3l10 10M13 3 3 13"/></svg>';
   x.addEventListener("mousedown", (e) => e.preventDefault());
   x.addEventListener("click", () => options.onDelete());
-  el2.append(title, divider(), nums.btn, divider(), paper.btn, divider(), x);
+  el5.append(title, divider(), nums.btn, divider(), paper.btn, divider(), x);
   return {
-    el: el2,
+    el: el5,
     update(data) {
       nums.label.textContent = data.pageNumbers;
       nums.btn.dataset["muted"] = String(!!data.pageNumbersMuted);
       paper.label.textContent = data.paper;
     },
     destroy() {
-      el2.remove();
+      el5.remove();
     }
   };
 }
@@ -2620,7 +2702,7 @@ function openFontDialog({
   const italicBtn = mkSeg("I", initial.italic, "font-style:italic");
   const underBtn = mkSeg("U", initial.underline, "text-decoration:underline");
   let color = initial.color ?? null;
-  let highlight = initial.highlight ?? null;
+  let highlight2 = initial.highlight ?? null;
   const colorBtn = colorButton({
     title: "Text color",
     label: "Text color",
@@ -2635,9 +2717,9 @@ function openFontDialog({
     title: "Highlight",
     label: "Highlight",
     clearLabel: "No highlight",
-    value: () => highlight,
+    value: () => highlight2,
     onPick: (c) => {
-      highlight = c;
+      highlight2 = c;
       paint();
     }
   });
@@ -2757,7 +2839,7 @@ function openFontDialog({
     s.textDecorationStyle = dstrikeCb.checked ? "double" : "solid";
     s.fontVariant = smallCapsCb.checked ? "small-caps" : "normal";
     s.color = color ?? "inherit";
-    s.background = highlight ?? "transparent";
+    s.background = highlight2 ?? "transparent";
     s.letterSpacing = `${spacingPt}pt`;
     s.transform = scale === 100 ? "none" : `scaleX(${scale / 100})`;
     s.verticalAlign = supCb.checked ? "super" : subCb.checked ? "sub" : `${positionPt}pt`;
@@ -2786,7 +2868,7 @@ function openFontDialog({
       smallCaps: checkedOrMixed(smallCapsCb),
       vertAlign: supCb.checked ? "super" : subCb.checked ? "sub" : null,
       color,
-      highlight,
+      highlight: highlight2,
       scalePercent: scale,
       letterSpacingTwips: ptToTwips(spacingPt),
       positionHalfPoints: ptToHalf(positionPt)
@@ -2801,28 +2883,1216 @@ function openFontDialog({
   paint();
   dialog.open();
 }
+
+// packages/ui/src/lib/symbol-sets.ts
+import { AUTOCORRECT_RULES } from "@shadow-garden/bapbong-contracts";
+var g = (id, label, short, pairs) => ({
+  id,
+  label,
+  short,
+  entries: pairs.map(([char, name]) => ({ char, name }))
+});
+var SYMBOL_GROUPS = [
+  g("checks", "Checkboxes & ticks", "Checks", [
+    ["\u2610", "Ballot box"],
+    ["\u2611", "Ballot box with check"],
+    ["\u2612", "Ballot box with X"],
+    ["\u2713", "Check mark"],
+    ["\u2714", "Heavy check mark"],
+    ["\u2717", "Ballot X"],
+    ["\u2718", "Heavy ballot X"],
+    ["\u2715", "Multiplication X"],
+    ["\u2716", "Heavy multiplication X"],
+    ["\u274F", "Lower right drop-shadowed white square"],
+    ["\u2750", "Upper right drop-shadowed white square"],
+    ["\u2751", "Lower right shadowed white square"],
+    ["\u2752", "Upper right shadowed white square"],
+    ["\u25A2", "White square with rounded corners"],
+    ["\u25A3", "White square containing black small square"],
+    ["\u22A0", "Squared times"],
+    ["\u2297", "Circled times"],
+    ["\u29BF", "Circled bullet"],
+    ["\u25C9", "Fisheye"],
+    ["\u25CB", "White circle"],
+    ["\u25CF", "Black circle"],
+    ["\u25EF", "Large circle"],
+    ["\u25FB", "White medium square"],
+    ["\u25FC", "Black medium square"]
+  ]),
+  g("bullets", "Bullets & shapes", "Bullets", [
+    ["\u2022", "Bullet"],
+    ["\u25E6", "White bullet"],
+    ["\u25AA", "Black small square"],
+    ["\u25AB", "White small square"],
+    ["\u25A0", "Black square"],
+    ["\u25A1", "White square"],
+    ["\u25AC", "Black rectangle"],
+    ["\u25C6", "Black diamond"],
+    ["\u25C7", "White diamond"],
+    ["\u25CA", "Lozenge"],
+    ["\u2605", "Black star"],
+    ["\u2606", "White star"],
+    ["\u2726", "Black four pointed star"],
+    ["\u2727", "White four pointed star"],
+    ["\u25BA", "Black right-pointing pointer"],
+    ["\u25B8", "Black right-pointing small triangle"],
+    ["\u25B9", "White right-pointing small triangle"],
+    ["\u25B2", "Black up-pointing triangle"],
+    ["\u25B3", "White up-pointing triangle"],
+    ["\u25BC", "Black down-pointing triangle"],
+    ["\u25BD", "White down-pointing triangle"],
+    ["\u25C4", "Black left-pointing pointer"],
+    ["\u2756", "Black diamond minus white X"],
+    ["\u273D", "Heavy teardrop-spoked asterisk"],
+    ["\u273F", "Black florette"],
+    ["\u2740", "White florette"],
+    ["\u27A2", "Three-D top-lighted rightwards arrowhead"],
+    ["\u27A4", "Black rightwards arrowhead"],
+    ["\u27A3", "Three-D bottom-lighted rightwards arrowhead"],
+    ["\u2713", "Check mark"]
+  ]),
+  g("arrows", "Arrows", "Arrows", [
+    ["\u2190", "Leftwards arrow"],
+    ["\u2191", "Upwards arrow"],
+    ["\u2192", "Rightwards arrow"],
+    ["\u2193", "Downwards arrow"],
+    ["\u2194", "Left right arrow"],
+    ["\u2195", "Up down arrow"],
+    ["\u2196", "North west arrow"],
+    ["\u2197", "North east arrow"],
+    ["\u2198", "South east arrow"],
+    ["\u2199", "South west arrow"],
+    ["\u21D0", "Leftwards double arrow"],
+    ["\u21D1", "Upwards double arrow"],
+    ["\u21D2", "Rightwards double arrow"],
+    ["\u21D3", "Downwards double arrow"],
+    ["\u21D4", "Left right double arrow"],
+    ["\u21D5", "Up down double arrow"],
+    ["\u21A9", "Leftwards arrow with hook"],
+    ["\u21AA", "Rightwards arrow with hook"],
+    ["\u21B5", "Downwards arrow with corner leftwards"],
+    ["\u21C4", "Rightwards arrow over leftwards arrow"],
+    ["\u21C6", "Leftwards arrow over rightwards arrow"],
+    ["\u2794", "Heavy wide-headed rightwards arrow"],
+    ["\u279C", "Heavy round-tipped rightwards arrow"],
+    ["\u279D", "Triangle-headed rightwards arrow"],
+    ["\u279E", "Heavy triangle-headed rightwards arrow"],
+    ["\u27A1", "Black rightwards arrow"],
+    ["\u2B05", "Leftwards black arrow"],
+    ["\u2B06", "Upwards black arrow"],
+    ["\u2B07", "Downwards black arrow"],
+    ["\u21BB", "Clockwise open circle arrow"],
+    ["\u21BA", "Anticlockwise open circle arrow"],
+    ["\u2934", "Arrow pointing rightwards then curving upwards"],
+    ["\u2935", "Arrow pointing rightwards then curving downwards"]
+  ]),
+  g("math", "Math", "Math", [
+    ["\xB1", "Plus-minus sign"],
+    ["\xD7", "Multiplication sign"],
+    ["\xF7", "Division sign"],
+    ["\u2212", "Minus sign"],
+    ["\u2264", "Less-than or equal to"],
+    ["\u2265", "Greater-than or equal to"],
+    ["\u2260", "Not equal to"],
+    ["\u2248", "Almost equal to"],
+    ["\u2261", "Identical to"],
+    ["\u221E", "Infinity"],
+    ["\u221A", "Square root"],
+    ["\u2211", "N-ary summation"],
+    ["\u220F", "N-ary product"],
+    ["\u222B", "Integral"],
+    ["\u2202", "Partial differential"],
+    ["\u2206", "Increment"],
+    ["\u2207", "Nabla"],
+    ["\u2208", "Element of"],
+    ["\u2209", "Not an element of"],
+    ["\u2229", "Intersection"],
+    ["\u222A", "Union"],
+    ["\u2282", "Subset of"],
+    ["\u2283", "Superset of"],
+    ["\u2205", "Empty set"],
+    ["\u2200", "For all"],
+    ["\u2203", "There exists"],
+    ["\xAC", "Not sign"],
+    ["\u2227", "Logical and"],
+    ["\u2228", "Logical or"],
+    ["\xB0", "Degree sign"],
+    ["\u2032", "Prime"],
+    ["\u2033", "Double prime"],
+    ["\u2030", "Per mille sign"],
+    ["\xB5", "Micro sign"],
+    ["\u03C0", "Greek small letter pi"],
+    ["\u221D", "Proportional to"],
+    ["\u2220", "Angle"],
+    ["\u22A5", "Up tack"],
+    ["\u2225", "Parallel to"],
+    ["\xB9", "Superscript one"],
+    ["\xB2", "Superscript two"],
+    ["\xB3", "Superscript three"],
+    ["\xBD", "Vulgar fraction one half"],
+    ["\u2153", "Vulgar fraction one third"],
+    ["\xBC", "Vulgar fraction one quarter"],
+    ["\xBE", "Vulgar fraction three quarters"]
+  ]),
+  g("currency", "Currency", "Currency", [
+    ["\u20AB", "Dong sign"],
+    ["$", "Dollar sign"],
+    ["\u20AC", "Euro sign"],
+    ["\xA3", "Pound sign"],
+    ["\xA5", "Yen sign"],
+    ["\u20A9", "Won sign"],
+    ["\u20B9", "Indian rupee sign"],
+    ["\u20BD", "Ruble sign"],
+    ["\u0E3F", "Thai currency symbol baht"],
+    ["\u20B1", "Peso sign"],
+    ["\xA2", "Cent sign"],
+    ["\xA4", "Currency sign"],
+    ["\u20BF", "Bitcoin sign"]
+  ]),
+  g("punct", "Punctuation & typography", "Punct.", [
+    ["\u2013", "En dash"],
+    ["\u2014", "Em dash"],
+    ["\u2026", "Horizontal ellipsis"],
+    ["\u2018", "Left single quotation mark"],
+    ["\u2019", "Right single quotation mark"],
+    ["\u201C", "Left double quotation mark"],
+    ["\u201D", "Right double quotation mark"],
+    ["\u201A", "Single low-9 quotation mark"],
+    ["\u201E", "Double low-9 quotation mark"],
+    ["\xAB", "Left-pointing double angle quotation mark"],
+    ["\xBB", "Right-pointing double angle quotation mark"],
+    ["\u2039", "Single left-pointing angle quotation mark"],
+    ["\u203A", "Single right-pointing angle quotation mark"],
+    ["\xA7", "Section sign"],
+    ["\xB6", "Pilcrow sign"],
+    ["\u2020", "Dagger"],
+    ["\u2021", "Double dagger"],
+    ["\u2022", "Bullet"],
+    ["\xB7", "Middle dot"],
+    ["\u2116", "Numero sign"],
+    ["\xA9", "Copyright sign"],
+    ["\xAE", "Registered sign"],
+    ["\u2122", "Trade mark sign"],
+    ["\u2120", "Service mark"],
+    ["\xA1", "Inverted exclamation mark"],
+    ["\xBF", "Inverted question mark"],
+    ["\u203D", "Interrobang"],
+    ["\u02C6", "Modifier letter circumflex accent"],
+    ["\u02DC", "Small tilde"],
+    ["\xA6", "Broken bar"]
+  ]),
+  g("greek", "Greek", "Greek", [
+    ["\u03B1", "Alpha"],
+    ["\u03B2", "Beta"],
+    ["\u03B3", "Gamma"],
+    ["\u03B4", "Delta"],
+    ["\u03B5", "Epsilon"],
+    ["\u03B6", "Zeta"],
+    ["\u03B7", "Eta"],
+    ["\u03B8", "Theta"],
+    ["\u03B9", "Iota"],
+    ["\u03BA", "Kappa"],
+    ["\u03BB", "Lambda"],
+    ["\u03BC", "Mu"],
+    ["\u03BD", "Nu"],
+    ["\u03BE", "Xi"],
+    ["\u03BF", "Omicron"],
+    ["\u03C0", "Pi"],
+    ["\u03C1", "Rho"],
+    ["\u03C3", "Sigma"],
+    ["\u03C2", "Final sigma"],
+    ["\u03C4", "Tau"],
+    ["\u03C5", "Upsilon"],
+    ["\u03C6", "Phi"],
+    ["\u03C7", "Chi"],
+    ["\u03C8", "Psi"],
+    ["\u03C9", "Omega"],
+    ["\u0391", "Capital alpha"],
+    ["\u0392", "Capital beta"],
+    ["\u0393", "Capital gamma"],
+    ["\u0394", "Capital delta"],
+    ["\u0395", "Capital epsilon"],
+    ["\u0396", "Capital zeta"],
+    ["\u0397", "Capital eta"],
+    ["\u0398", "Capital theta"],
+    ["\u0399", "Capital iota"],
+    ["\u039A", "Capital kappa"],
+    ["\u039B", "Capital lambda"],
+    ["\u039C", "Capital mu"],
+    ["\u039D", "Capital nu"],
+    ["\u039E", "Capital xi"],
+    ["\u039F", "Capital omicron"],
+    ["\u03A0", "Capital pi"],
+    ["\u03A1", "Capital rho"],
+    ["\u03A3", "Capital sigma"],
+    ["\u03A4", "Capital tau"],
+    ["\u03A5", "Capital upsilon"],
+    ["\u03A6", "Capital phi"],
+    ["\u03A7", "Capital chi"],
+    ["\u03A8", "Capital psi"],
+    ["\u03A9", "Capital omega"]
+  ]),
+  g("latin", "Latin (Vietnamese & accents)", "Latin", [
+    ["\u0110", "Capital D with stroke"],
+    ["\u0111", "Small d with stroke"],
+    ["\u0102", "Capital A with breve"],
+    ["\u0103", "Small a with breve"],
+    ["\xC2", "Capital A with circumflex"],
+    ["\xE2", "Small a with circumflex"],
+    ["\xCA", "Capital E with circumflex"],
+    ["\xEA", "Small e with circumflex"],
+    ["\xD4", "Capital O with circumflex"],
+    ["\xF4", "Small o with circumflex"],
+    ["\u01A0", "Capital O with horn"],
+    ["\u01A1", "Small o with horn"],
+    ["\u01AF", "Capital U with horn"],
+    ["\u01B0", "Small u with horn"],
+    ["\xC0", "Capital A with grave"],
+    ["\xE0", "Small a with grave"],
+    ["\xC1", "Capital A with acute"],
+    ["\xE1", "Small a with acute"],
+    ["\xC3", "Capital A with tilde"],
+    ["\xE3", "Small a with tilde"],
+    ["\u1EA2", "Capital A with hook above"],
+    ["\u1EA3", "Small a with hook above"],
+    ["\u1EA0", "Capital A with dot below"],
+    ["\u1EA1", "Small a with dot below"],
+    ["\xC8", "Capital E with grave"],
+    ["\xE9", "Small e with acute"],
+    ["\xCC", "Capital I with grave"],
+    ["\xED", "Small i with acute"],
+    ["\xD2", "Capital O with grave"],
+    ["\xF3", "Small o with acute"],
+    ["\xD9", "Capital U with grave"],
+    ["\xFA", "Small u with acute"],
+    ["\xDD", "Capital Y with acute"],
+    ["\u1EF9", "Small y with tilde"],
+    ["\xC7", "Capital C with cedilla"],
+    ["\xE7", "Small c with cedilla"],
+    ["\xD1", "Capital N with tilde"],
+    ["\xF1", "Small n with tilde"],
+    ["\xD6", "Capital O with diaeresis"],
+    ["\xF6", "Small o with diaeresis"],
+    ["\xDC", "Capital U with diaeresis"],
+    ["\xFC", "Small u with diaeresis"],
+    ["\xDF", "Small sharp s"],
+    ["\xC6", "Capital AE"],
+    ["\xE6", "Small ae"],
+    ["\xD8", "Capital O with stroke"],
+    ["\xF8", "Small o with stroke"],
+    ["\u0152", "Capital ligature OE"],
+    ["\u0153", "Small ligature oe"]
+  ]),
+  g("misc", "Misc", "Misc", [
+    ["\u260E", "Black telephone"],
+    ["\u2706", "Telephone location sign"],
+    ["\u2709", "Envelope"],
+    ["\u2702", "Black scissors"],
+    ["\u270E", "Lower right pencil"],
+    ["\u270F", "Pencil"],
+    ["\u270D", "Writing hand"],
+    ["\u263A", "White smiling face"],
+    ["\u2639", "White frowning face"],
+    ["\u2660", "Black spade suit"],
+    ["\u2663", "Black club suit"],
+    ["\u2665", "Black heart suit"],
+    ["\u2666", "Black diamond suit"],
+    ["\u266A", "Eighth note"],
+    ["\u266B", "Beamed eighth notes"],
+    ["\u2600", "Black sun with rays"],
+    ["\u2601", "Cloud"],
+    ["\u2602", "Umbrella"],
+    ["\u2691", "Black flag"],
+    ["\u2690", "White flag"],
+    ["\u26A0", "Warning sign"],
+    ["\u26D4", "No entry"],
+    ["\u2640", "Female sign"],
+    ["\u2642", "Male sign"],
+    ["\u2318", "Place of interest sign"],
+    ["\u2325", "Option key"],
+    ["\u21E7", "Upwards white arrow"],
+    ["\u23CE", "Return symbol"],
+    ["\u232B", "Erase to the left"],
+    ["\u23CF", "Eject symbol"],
+    ["\u267B", "Black universal recycling symbol"],
+    ["\u2708", "Airplane"],
+    ["\u2696", "Scales"],
+    ["\u2695", "Staff of aesculapius"]
+  ])
+];
+function autoCorrectHint(char) {
+  return AUTOCORRECT_RULES.find((r) => r.to === char)?.seq ?? "";
+}
+var SPECIAL_CHARACTERS = [
+  { char: "\u2014", name: "Em dash", hint: "" },
+  { char: "\u2013", name: "En dash", hint: "" },
+  { char: "\u2011", name: "Nonbreaking hyphen", hint: "" },
+  { char: "\xAD", name: "Optional hyphen", hint: "" },
+  { char: "\xA0", name: "Nonbreaking space", hint: "" },
+  { char: "\u2003", name: "Em space", hint: "" },
+  { char: "\u2002", name: "En space", hint: "" },
+  { char: "\u2009", name: "Thin space", hint: "" },
+  { char: "\xA9", name: "Copyright", hint: autoCorrectHint("\xA9") },
+  { char: "\xAE", name: "Registered", hint: autoCorrectHint("\xAE") },
+  { char: "\u2122", name: "Trademark", hint: autoCorrectHint("\u2122") },
+  { char: "\xA7", name: "Section", hint: "" },
+  { char: "\xB6", name: "Paragraph", hint: "" },
+  { char: "\u2026", name: "Ellipsis", hint: autoCorrectHint("\u2026") },
+  { char: "\u2018", name: "Single opening quote", hint: "" },
+  { char: "\u2019", name: "Single closing quote", hint: "" },
+  { char: "\u201C", name: "Double opening quote", hint: "" },
+  { char: "\u201D", name: "Double closing quote", hint: "" },
+  { char: "\u20AB", name: "Dong sign", hint: "" },
+  { char: "\u2116", name: "Numero sign", hint: "" }
+];
+var SYMBOL_NAMES = (() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const grp of SYMBOL_GROUPS)
+    for (const e of grp.entries) if (!m.has(e.char)) m.set(e.char, e.name);
+  for (const e of SPECIAL_CHARACTERS) if (!m.has(e.char)) m.set(e.char, e.name);
+  return m;
+})();
+function codePointLabel(char) {
+  const cp = char.codePointAt(0) ?? 0;
+  return `U+${cp.toString(16).toUpperCase().padStart(4, "0")}`;
+}
+function parseCodePoint(input) {
+  const m = /^\s*(?:u\+|0x)?([0-9a-f]{1,6})\s*$/i.exec(input);
+  if (!m) return null;
+  const cp = parseInt(m[1], 16);
+  if (cp > 1114111 || cp >= 55296 && cp <= 57343) return null;
+  if (cp < 32 || cp >= 127 && cp < 160) return null;
+  return String.fromCodePoint(cp);
+}
+var RECENT_MAX = 16;
+function pushRecent(recent, char, max = RECENT_MAX) {
+  return [char, ...recent.filter((c) => c !== char)].slice(0, max);
+}
+function searchSymbols(query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const ranked = [];
+  for (const grp of SYMBOL_GROUPS) {
+    const groupHit = grp.label.toLowerCase().includes(q);
+    for (const e of grp.entries) {
+      const name = e.name.toLowerCase();
+      if (seen.has(e.char) || !name.includes(q)) continue;
+      seen.add(e.char);
+      ranked.push({ e, rank: groupHit ? 0 : name.startsWith(q) ? 1 : 2 });
+    }
+  }
+  return ranked.sort((a, b) => a.rank - b.rank).map((r) => r.e);
+}
+
+// packages/ui/src/lib/symbol-dialog.ts
+var STYLE13 = `
+.bb-sd{display:flex;flex-direction:column;gap:12px;width:412px;max-width:100%;color:var(--bb-ui-fg,#2c2c2a)}
+.bb-sd *{box-sizing:border-box}
+.bb-sd-tabs{display:inline-flex;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;overflow:hidden;align-self:flex-start}
+.bb-sd-tab{height:30px;padding:0 18px;border:0;border-right:0.5px solid var(--bb-ui-border,#e3e3e0);background:transparent;color:inherit;opacity:.65;font:inherit;font-size:13px;cursor:pointer}
+.bb-sd-tab:last-child{border-right:0}
+.bb-sd-tab[aria-selected="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);opacity:1}
+.bb-sd-pane{display:flex;flex-direction:column;gap:12px}
+.bb-sd-pane[hidden]{display:none}
+.bb-sd-lbl{font-size:12px;opacity:.7;margin-bottom:5px}
+.bb-sd-row{display:flex;gap:10px;align-items:flex-end}
+.bb-sd-ctl::placeholder{color:inherit;opacity:.45}
+.bb-sd-ctl{width:100%;height:32px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;padding:0 8px}
+.bb-sd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:8px;padding:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));max-height:196px;overflow:auto}
+.bb-sd-grid.recent{grid-template-columns:repeat(16,1fr);max-height:none;border-color:transparent;padding:0;background:transparent;min-height:26px}
+.bb-sd-cell{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;padding:0;font-family:inherit,"Noto Sans Symbols 2"}
+.bb-sd-grid.recent .bb-sd-cell{border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));font-size:15px}
+.bb-sd-cell:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-sd-cell:focus{outline:none}
+.bb-sd-cell[aria-selected="true"]{background:var(--bb-ui-active-bg,#e6f1fb);box-shadow:inset 0 0 0 1.5px var(--bb-ui-active-border,#7fb2ec);color:var(--bb-ui-active-fg,#0c447c)}
+.bb-sd-empty{grid-column:1/-1;font-size:12px;opacity:.55;padding:6px 2px}
+.bb-sd-meta{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:10px;align-items:end}
+.bb-sd-info{min-width:0;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:8px;padding:8px 10px;display:flex;gap:12px;align-items:center;min-height:56px}
+.bb-sd-big{font-size:30px;line-height:1;width:44px;text-align:center;font-family:inherit,"Noto Sans Symbols 2"}
+.bb-sd-name{font-size:13px}
+.bb-sd-cp{font-size:11px;opacity:.55;font-family:ui-monospace,Menlo,Consolas,monospace}
+.bb-sd-code{font-family:ui-monospace,Menlo,Consolas,monospace}
+.bb-sd-code[aria-invalid="true"]{border-color:#c0392b}
+.bb-sd-list{border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:8px;max-height:280px;overflow:auto}
+.bb-sd-list table{width:100%;border-collapse:collapse;font-size:13px}
+.bb-sd-list td{padding:6px 8px;border-bottom:0.5px solid var(--bb-ui-border,#e3e3e0)}
+.bb-sd-list tr:last-child td{border-bottom:0}
+.bb-sd-list tr{cursor:pointer}
+.bb-sd-list tr:hover td{background:var(--bb-ui-hover,#f1efe8)}
+.bb-sd-list tr[aria-selected="true"] td{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c)}
+.bb-sd-list td.ch{width:36px;text-align:center;font-size:16px;font-family:inherit,"Noto Sans Symbols 2"}
+.bb-sd-list td.k{width:120px;font-size:11px;opacity:.6;font-family:ui-monospace,Menlo,Consolas,monospace;text-align:right}
+.bb-sd-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
+.bb-sd-hint{font-size:11px;opacity:.55}
+.bb-sd-btns{display:flex;gap:8px}
+.bb-sd-btn{height:31px;padding:0 17px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-sd-btn.primary{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#7fb2ec);color:var(--bb-ui-active-fg,#0c447c)}
+.bb-sd-btn:disabled{opacity:.5;cursor:default}
+`;
+var GRID_COLS = 12;
+var RECENT_COLS = 16;
+function el2(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function glyphFor(char) {
+  const cp = char.codePointAt(0) ?? 0;
+  if (char === " " || char === "\xA0") return "\u2423";
+  if (cp === 8194 || cp === 8195 || cp === 8201) return "\u2423";
+  if (cp === 173) return "-";
+  if (cp === 8209) return "\u2011";
+  return char;
+}
+function createSymbolDialog(options) {
+  injectStyle("bb-symbol-dialog", STYLE13);
+  let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
+  let selected = null;
+  const root = el2("div", "bb-sd");
+  const tabs = el2("div", "bb-sd-tabs");
+  tabs.setAttribute("role", "tablist");
+  const symTab = el2("button", "bb-sd-tab", "Symbols");
+  const spcTab = el2("button", "bb-sd-tab", "Special characters");
+  for (const t of [symTab, spcTab]) {
+    t.type = "button";
+    t.setAttribute("role", "tab");
+    tabs.append(t);
+  }
+  const symPane = el2("div", "bb-sd-pane");
+  const spcPane = el2("div", "bb-sd-pane");
+  const showTab = (special) => {
+    symTab.setAttribute("aria-selected", String(!special));
+    spcTab.setAttribute("aria-selected", String(special));
+    symPane.hidden = special;
+    spcPane.hidden = !special;
+  };
+  symTab.addEventListener("click", () => showTab(false));
+  spcTab.addEventListener("click", () => showTab(true));
+  const recentWrap = el2("div");
+  recentWrap.append(el2("div", "bb-sd-lbl", "Recently used"));
+  const recentGrid = el2("div", "bb-sd-grid recent");
+  recentGrid.setAttribute("role", "grid");
+  recentGrid.setAttribute("aria-label", "Recently used symbols");
+  recentWrap.append(recentGrid);
+  const controls = el2("div", "bb-sd-row");
+  const groupCell = el2("div");
+  groupCell.style.flex = "1";
+  groupCell.append(el2("div", "bb-sd-lbl", "Group"));
+  const groupSel = el2("select", "bb-sd-ctl");
+  groupSel.setAttribute("aria-label", "Group");
+  for (const grp of SYMBOL_GROUPS) {
+    const o = el2("option", void 0, grp.label);
+    o.value = grp.id;
+    groupSel.append(o);
+  }
+  groupCell.append(groupSel);
+  const searchCell = el2("div");
+  searchCell.style.width = "160px";
+  searchCell.append(el2("div", "bb-sd-lbl", "Search name"));
+  const search = el2("input", "bb-sd-ctl");
+  search.type = "search";
+  search.placeholder = "e.g. ballot, arrow";
+  search.setAttribute("aria-label", "Search symbols by name");
+  searchCell.append(search);
+  controls.append(groupCell, searchCell);
+  const grid = el2("div", "bb-sd-grid");
+  grid.setAttribute("role", "grid");
+  grid.setAttribute("aria-label", "Symbols");
+  const meta = el2("div", "bb-sd-meta");
+  const info = el2("div", "bb-sd-info");
+  const big = el2("div", "bb-sd-big", "");
+  const infoText = el2("div");
+  const nameEl = el2("div", "bb-sd-name", "Select a symbol");
+  const cpEl = el2("div", "bb-sd-cp", "");
+  infoText.append(nameEl, cpEl);
+  info.append(big, infoText);
+  const codeCell = el2("div");
+  codeCell.append(el2("div", "bb-sd-lbl", "Character code (hex)"));
+  const code = el2("input", "bb-sd-ctl bb-sd-code");
+  code.placeholder = "e.g. 2611";
+  code.setAttribute("aria-label", "Character code, hexadecimal");
+  code.spellcheck = false;
+  codeCell.append(code);
+  meta.append(info, codeCell);
+  symPane.append(recentWrap, controls, grid, meta);
+  const list = el2("div", "bb-sd-list");
+  const table = el2("table");
+  const tbody = el2("tbody");
+  const rows = [];
+  for (const sc of SPECIAL_CHARACTERS) {
+    const tr = el2("tr");
+    tr.tabIndex = -1;
+    tr.setAttribute("role", "option");
+    const ch = el2("td", "ch", glyphFor(sc.char));
+    const nm = el2("td", void 0, sc.name);
+    const k = el2("td", "k", sc.hint);
+    tr.append(ch, nm, k);
+    tr.addEventListener("click", () => select2(sc.char, tr));
+    tr.addEventListener("dblclick", () => insert(sc.char));
+    tr.addEventListener("keydown", (e) => {
+      const i = rows.indexOf(tr);
+      if (e.key === "ArrowDown" && rows[i + 1]) {
+        e.preventDefault();
+        rows[i + 1].focus();
+        select2(SPECIAL_CHARACTERS[i + 1].char, rows[i + 1]);
+      } else if (e.key === "ArrowUp" && rows[i - 1]) {
+        e.preventDefault();
+        rows[i - 1].focus();
+        select2(SPECIAL_CHARACTERS[i - 1].char, rows[i - 1]);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        insert(sc.char);
+      }
+    });
+    tbody.append(tr);
+    rows.push(tr);
+  }
+  table.append(tbody);
+  list.append(table);
+  list.setAttribute("role", "listbox");
+  spcPane.append(list);
+  const foot = el2("div", "bb-sd-foot");
+  const hint = el2(
+    "span",
+    "bb-sd-hint",
+    "Double-click a cell to insert \xB7 Enter inserts the selection"
+  );
+  const btns = el2("div", "bb-sd-btns");
+  const closeBtn = el2("button", "bb-sd-btn", "Close");
+  closeBtn.type = "button";
+  const insertBtn = el2("button", "bb-sd-btn primary", "Insert");
+  insertBtn.type = "button";
+  insertBtn.disabled = true;
+  btns.append(closeBtn, insertBtn);
+  foot.append(hint, btns);
+  root.append(tabs, symPane, spcPane, foot);
+  const dialog = new Dialog({
+    title: "Symbol",
+    modal: false,
+    anchor: options.anchor,
+    className: "bb-symbol-dialog"
+  });
+  dialog.setContent(root);
+  let selectedEl = null;
+  function select2(char, cell) {
+    selected = char;
+    if (selectedEl) selectedEl.removeAttribute("aria-selected");
+    selectedEl = cell ?? null;
+    if (selectedEl) selectedEl.setAttribute("aria-selected", "true");
+    big.textContent = glyphFor(char);
+    nameEl.textContent = SYMBOL_NAMES.get(char) ?? "Character";
+    cpEl.textContent = codePointLabel(char);
+    if (document.activeElement !== code)
+      code.value = codePointLabel(char).slice(2);
+    code.removeAttribute("aria-invalid");
+    insertBtn.disabled = false;
+  }
+  function insert(char) {
+    const active = document.activeElement;
+    options.onInsert(char);
+    recent = pushRecent(recent, char);
+    options.onRecentChange?.([...recent]);
+    renderRecent();
+    if (active instanceof HTMLElement && root.contains(active))
+      queueMicrotask(() => {
+        if (active.isConnected) active.focus();
+        else search.focus();
+      });
+  }
+  function cellFor(e) {
+    const b = el2("button", "bb-sd-cell", glyphFor(e.char));
+    b.type = "button";
+    b.title = `${e.name} \xB7 ${codePointLabel(e.char)}`;
+    b.setAttribute("aria-label", e.name);
+    b.addEventListener("click", () => select2(e.char, b));
+    b.addEventListener("dblclick", () => insert(e.char));
+    b.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        select2(e.char, b);
+        insert(e.char);
+      }
+    });
+    b.addEventListener("focus", () => select2(e.char, b));
+    return b;
+  }
+  function fillGrid(target, entries, cols, empty) {
+    target.replaceChildren();
+    if (entries.length === 0) {
+      target.append(el2("div", "bb-sd-empty", empty));
+      return;
+    }
+    const cells = [];
+    entries.forEach((e, i) => {
+      const b = cellFor(e);
+      target.append(b);
+      if (i % cols === 0) cells.push([]);
+      cells[cells.length - 1].push(b);
+    });
+    rovingGrid(cells);
+  }
+  function renderRecent() {
+    fillGrid(
+      recentGrid,
+      recent.map((c) => ({
+        char: c,
+        name: SYMBOL_NAMES.get(c) ?? "Character"
+      })),
+      RECENT_COLS,
+      "Nothing yet \u2014 inserted symbols appear here."
+    );
+  }
+  function renderGroup() {
+    const q = search.value.trim();
+    const entries = q ? searchSymbols(q) : SYMBOL_GROUPS.find((g2) => g2.id === groupSel.value)?.entries ?? [];
+    fillGrid(grid, entries, GRID_COLS, "No symbol matches that name.");
+    const first = grid.querySelector(".bb-sd-cell");
+    if (q && first && entries[0]) select2(entries[0].char, first);
+    else clearSelection();
+  }
+  function clearSelection() {
+    selected = null;
+    selectedEl?.removeAttribute("aria-selected");
+    selectedEl = null;
+    big.textContent = "";
+    nameEl.textContent = "Select a symbol";
+    cpEl.textContent = "";
+    if (document.activeElement !== code) code.value = "";
+    insertBtn.disabled = true;
+  }
+  groupSel.addEventListener("change", () => {
+    search.value = "";
+    renderGroup();
+  });
+  search.addEventListener("input", renderGroup);
+  search.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && selected) {
+      e.preventDefault();
+      insert(selected);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      grid.querySelector(".bb-sd-cell")?.focus();
+    }
+  });
+  code.addEventListener("input", () => {
+    const ch = parseCodePoint(code.value);
+    if (ch) {
+      code.removeAttribute("aria-invalid");
+      const cell = Array.from(
+        grid.querySelectorAll(".bb-sd-cell")
+      ).find((c) => c.textContent === glyphFor(ch));
+      select2(ch, cell ?? null);
+    } else {
+      code.setAttribute("aria-invalid", code.value.trim() ? "true" : "false");
+      insertBtn.disabled = true;
+      selected = null;
+    }
+  });
+  code.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && selected) {
+      e.preventDefault();
+      insert(selected);
+    }
+  });
+  insertBtn.addEventListener("click", () => {
+    if (selected) insert(selected);
+  });
+  closeBtn.addEventListener("click", () => dialog.close());
+  showTab(false);
+  renderRecent();
+  renderGroup();
+  return {
+    open() {
+      dialog.open();
+      showTab(false);
+      queueMicrotask(() => {
+        search.focus();
+        search.select();
+      });
+    },
+    close() {
+      dialog.close();
+    },
+    destroy() {
+      dialog.destroy();
+    },
+    get isOpen() {
+      return dialog.isOpen;
+    }
+  };
+}
+
+// packages/ui/src/lib/symbol-popover.ts
+var STYLE14 = `
+.bb-spk{position:fixed;margin:0;max-width:none;max-height:none;z-index:1300;width:276px;padding:10px;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);color:var(--bb-ui-fg,#2c2c2a);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);font-size:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
+.bb-spk *{box-sizing:border-box}
+.bb-spk::backdrop{background:transparent}
+.bb-spk-search{width:100%;height:28px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:12px;padding:0 8px}
+.bb-spk-search::placeholder{color:inherit;opacity:.45}
+.bb-spk-lbl{font-size:10.5px;opacity:.65;margin:0 0 4px}
+.bb-spk-recent{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;min-height:26px}
+.bb-spk-recent .bb-spk-cell{border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));font-size:14px}
+.bb-spk-empty{grid-column:1/-1;font-size:11px;opacity:.5;padding:4px 2px}
+.bb-spk-chips{display:flex;flex-wrap:wrap;gap:3px}
+.bb-spk-chip{padding:2px 6px;border-radius:10px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:10px;opacity:.8;cursor:pointer}
+.bb-spk-chip:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-spk-chip[aria-pressed="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);border-color:var(--bb-ui-active-border,#7fb2ec);opacity:1}
+.bb-spk-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:7px;padding:4px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));max-height:150px;overflow:auto}
+.bb-spk-cell{aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:inherit;font-size:16px;line-height:1;padding:0;cursor:pointer;font-family:inherit,"Noto Sans Symbols 2"}
+.bb-spk-cell:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-spk-cell:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--bb-ui-active-border,#7fb2ec)}
+.bb-spk-cell[aria-selected="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c)}
+.bb-spk-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}
+.bb-spk-name{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.bb-spk-more{border:0;background:transparent;color:var(--bb-ui-active-fg,#0c447c);font:inherit;font-size:11px;cursor:pointer;padding:2px 4px;border-radius:4px;white-space:nowrap}
+.bb-spk-more:hover{background:var(--bb-ui-hover,#f1efe8)}
+`;
+var COLS = 8;
+var RECENT_ROW = COLS;
+function el3(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function openSymbolPopover(options) {
+  injectStyle("bb-ui-symbol-popover", STYLE14);
+  const { anchor } = options;
+  let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
+  let groupId = SYMBOL_GROUPS[0].id;
+  let selected = null;
+  const panel = document.createElement("dialog");
+  panel.className = "bb-spk";
+  panel.setAttribute("aria-label", "Insert symbol");
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    window.removeEventListener("scroll", close, true);
+    if (panel.open) panel.close();
+    panel.remove();
+    options.onClose?.();
+  };
+  const search = el3("input", "bb-spk-search");
+  search.type = "search";
+  search.placeholder = "Search name or code (U+2611)";
+  search.setAttribute("aria-label", "Search symbols by name or code");
+  search.spellcheck = false;
+  const recentWrap = el3("div");
+  recentWrap.append(el3("div", "bb-spk-lbl", "Recent"));
+  const recentGrid = el3("div", "bb-spk-recent");
+  recentGrid.setAttribute("role", "grid");
+  recentGrid.setAttribute("aria-label", "Recently used symbols");
+  recentWrap.append(recentGrid);
+  const chips = el3("div", "bb-spk-chips");
+  const chipEls = /* @__PURE__ */ new Map();
+  for (const grp of SYMBOL_GROUPS) {
+    const c = el3("button", "bb-spk-chip", grp.short);
+    c.type = "button";
+    c.title = grp.label;
+    c.addEventListener("click", () => {
+      groupId = grp.id;
+      search.value = "";
+      render();
+    });
+    chips.append(c);
+    chipEls.set(grp.id, c);
+  }
+  const grid = el3("div", "bb-spk-grid");
+  grid.setAttribute("role", "grid");
+  grid.setAttribute("aria-label", "Symbols");
+  const foot = el3("div", "bb-spk-foot");
+  const nameEl = el3("span", "bb-spk-name", "");
+  const more = el3("button", "bb-spk-more", "More symbols\u2026");
+  more.type = "button";
+  more.addEventListener("click", () => {
+    close();
+    options.onMore?.();
+  });
+  foot.append(nameEl, more);
+  if (!options.onMore) more.hidden = true;
+  panel.append(search, recentWrap, chips, grid, foot);
+  let selectedEl = null;
+  const select2 = (char, cell) => {
+    selected = char;
+    selectedEl?.removeAttribute("aria-selected");
+    selectedEl = cell;
+    selectedEl?.setAttribute("aria-selected", "true");
+    nameEl.textContent = `${SYMBOL_NAMES.get(char) ?? "Character"} \xB7 ${codePointLabel(char)}`;
+  };
+  const insert = (char) => {
+    const active = document.activeElement;
+    options.onInsert(char);
+    recent = pushRecent(recent, char);
+    options.onRecentChange?.([...recent]);
+    renderRecent();
+    queueMicrotask(() => {
+      if (active instanceof HTMLElement && active.isConnected) active.focus();
+      else search.focus();
+    });
+  };
+  const cellFor = (e) => {
+    const b = el3("button", "bb-spk-cell", e.char);
+    b.type = "button";
+    b.title = `${e.name} \xB7 ${codePointLabel(e.char)}`;
+    b.setAttribute("aria-label", e.name);
+    b.addEventListener("focus", () => select2(e.char, b));
+    b.addEventListener("click", () => {
+      select2(e.char, b);
+      insert(e.char);
+    });
+    b.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        select2(e.char, b);
+        insert(e.char);
+      }
+    });
+    return b;
+  };
+  const fill = (target, entries, empty) => {
+    target.replaceChildren();
+    if (entries.length === 0) {
+      target.append(el3("div", "bb-spk-empty", empty));
+      return;
+    }
+    const cells = [];
+    entries.forEach((e, i) => {
+      const b = cellFor(e);
+      target.append(b);
+      if (i % COLS === 0) cells.push([]);
+      cells[cells.length - 1].push(b);
+    });
+    rovingGrid(cells);
+  };
+  const renderRecent = () => fill(
+    recentGrid,
+    recent.slice(0, RECENT_ROW).map((c) => ({
+      char: c,
+      name: SYMBOL_NAMES.get(c) ?? "Character"
+    })),
+    "Nothing yet."
+  );
+  const render = () => {
+    const q = search.value.trim();
+    const byCode = q ? parseCodePoint(q) : null;
+    const entries = q ? byCode && !searchSymbols(q).length ? [{ char: byCode, name: SYMBOL_NAMES.get(byCode) ?? "Character" }] : searchSymbols(q) : SYMBOL_GROUPS.find((g2) => g2.id === groupId)?.entries ?? [];
+    for (const [id, c] of chipEls)
+      c.setAttribute("aria-pressed", String(!q && id === groupId));
+    fill(grid, entries, "No match.");
+    const first = grid.querySelector(".bb-spk-cell");
+    if (q && first && entries[0]) select2(entries[0].char, first);
+    else {
+      selected = null;
+      selectedEl?.removeAttribute("aria-selected");
+      selectedEl = null;
+      nameEl.textContent = "";
+    }
+  };
+  search.addEventListener("input", render);
+  search.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && selected) {
+      e.preventDefault();
+      insert(selected);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      grid.querySelector(".bb-spk-cell")?.focus();
+    }
+  });
+  document.body.append(panel);
+  panel.showModal();
+  const r = anchor.getBoundingClientRect();
+  placeFloating(panel, { x: r.left, y: r.top, height: r.height });
+  panel.addEventListener("close", close);
+  panel.addEventListener("pointerdown", (e) => {
+    const b = panel.getBoundingClientRect();
+    const outside = e.clientX < b.left || e.clientX > b.right || e.clientY < b.top || e.clientY > b.bottom;
+    if (outside) close();
+  });
+  window.addEventListener("scroll", close, true);
+  renderRecent();
+  render();
+  search.focus();
+  return { close };
+}
+
+// packages/ui/src/lib/shortcuts-dialog.ts
+import {
+  filterKeybindingRows,
+  formatKey,
+  keybindingRows
+} from "@shadow-garden/bapbong-contracts";
+var STYLE15 = `
+.bb-ks{display:flex;flex-direction:column;gap:10px;width:600px;max-width:100%;color:var(--bb-ui-fg,#2c2c2a);font-size:12px}
+.bb-ks *{box-sizing:border-box}
+.bb-ks-top{display:flex;gap:8px;align-items:center}
+.bb-ks-search{flex:1;height:30px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:12px;padding:0 8px}
+.bb-ks-search::placeholder{color:inherit;opacity:.45}
+.bb-ks-count{font-size:11px;opacity:.6;white-space:nowrap}
+/* No box around the list: a bordered, tinted scroller turns the scrollbar's
+   gutter into a blank column at its edge. Flat on the dialog surface, the
+   rail reads like the app's own (idle-hidden overlay on a plain ground). */
+.bb-ks-wrap{overflow:auto;max-height:min(60vh,420px);margin:0 -12px;padding:0 12px;scrollbar-gutter:stable}
+.bb-ks table{width:100%;border-collapse:collapse}
+.bb-ks th{position:sticky;top:0;z-index:1;text-align:left;font-size:11px;font-weight:600;padding:7px 10px;border-bottom:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));cursor:pointer;user-select:none;white-space:nowrap;background-color:var(--bb-ui-bg,#fff);background-image:linear-gradient(var(--bb-ui-dialog-bg,transparent),var(--bb-ui-dialog-bg,transparent))}
+/* Opaque surface UNDER the dialog's own tint: a sticky header on the glass
+   alone let the rows scrolling beneath show through it. The dimming goes on
+   the text, not the cell, for the same reason. */
+.bb-ks th span{opacity:.75}
+.bb-ks th[aria-sort]{color:var(--bb-ui-active-fg,#0c447c)}
+.bb-ks th[aria-sort] span{opacity:1}
+.bb-ks td{padding:7px 10px;border-bottom:0.5px solid var(--bb-ui-border,#e3e3e0);vertical-align:middle}
+.bb-ks tr:last-child td{border-bottom:0}
+.bb-ks tbody tr:hover td{background:var(--bb-ui-hover,#f1efe8)}
+.bb-ks tbody tr:hover td:first-child{border-radius:6px 0 0 6px}
+.bb-ks tbody tr:hover td:last-child{border-radius:0 6px 6px 0}
+.bb-ks td.cmd{width:42%}
+.bb-ks td.cmd small{display:block;font-size:10px;opacity:.5;font-family:ui-monospace,Menlo,Consolas,monospace}
+.bb-ks kbd{display:inline-block;min-width:20px;padding:1px 6px;margin-right:3px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-bottom-width:1.5px;border-radius:5px;background:var(--bb-ui-bg,#fff);font:inherit;font-size:11px;text-align:center}
+.bb-ks .or{opacity:.5;margin:0 4px 0 1px;font-size:11px}
+.bb-ks td.when{font-size:11px;opacity:.7;width:24%}
+.bb-ks td.src{width:12%}
+.bb-ks-chip{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));opacity:.85;white-space:nowrap}
+.bb-ks-chip.core{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#7fb2ec);color:var(--bb-ui-active-fg,#0c447c);opacity:1}
+.bb-ks-empty{padding:16px;text-align:center;font-size:12px;opacity:.55}
+.bb-ks-foot{display:flex;justify-content:space-between;font-size:11px;opacity:.6}
+.bb-ks mark{background:transparent;color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--bb-ui-active-border,#7fb2ec);text-underline-offset:2px}
+`;
+function el4(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function highlight(text, q) {
+  if (!q) return [text];
+  const out = [];
+  const lower = text.toLowerCase();
+  let i = 0;
+  for (; ; ) {
+    const j = lower.indexOf(q, i);
+    if (j < 0) break;
+    if (j > i) out.push(text.slice(i, j));
+    out.push(el4("mark", void 0, text.slice(j, j + q.length)));
+    i = j + q.length;
+  }
+  if (i < text.length) out.push(text.slice(i));
+  return out;
+}
+function openKeyboardShortcutsDialog(options) {
+  injectStyle("bb-ui-shortcuts-dialog", STYLE15);
+  const dialog = new Dialog({
+    title: options.title ?? "Keyboard shortcuts",
+    modal: true,
+    wide: true
+  });
+  const root = el4("div", "bb-ks");
+  const top = el4("div", "bb-ks-top");
+  const search = el4("input", "bb-ks-search");
+  search.type = "search";
+  search.placeholder = "Search command, key, when or source\u2026";
+  search.setAttribute("aria-label", "Search shortcuts");
+  const count = el4("span", "bb-ks-count", "");
+  top.append(search, count);
+  const wrap = el4("div", "bb-ks-wrap");
+  const table = el4("table");
+  const thead = el4("thead");
+  const headRow = el4("tr");
+  const columns = [
+    { key: "title", label: "Command" },
+    { key: "keys", label: "Keybinding" },
+    { key: "when", label: "When" },
+    { key: "source", label: "Source" }
+  ];
+  let sortKey = "title";
+  let sortAsc = true;
+  const ths = /* @__PURE__ */ new Map();
+  for (const c of columns) {
+    const th = el4("th");
+    th.append(el4("span", void 0, c.label));
+    th.addEventListener("click", () => {
+      if (sortKey === c.key) sortAsc = !sortAsc;
+      else {
+        sortKey = c.key;
+        sortAsc = true;
+      }
+      render();
+    });
+    headRow.append(th);
+    ths.set(c.key, th);
+  }
+  thead.append(headRow);
+  const tbody = el4("tbody");
+  table.append(thead, tbody);
+  wrap.append(table);
+  const foot = el4("div", "bb-ks-foot");
+  const footL = el4(
+    "span",
+    void 0,
+    "Sorted by command \xB7 click a header to sort"
+  );
+  const footR = el4("span", void 0, "Esc closes");
+  foot.append(footL, footR);
+  root.append(top, wrap, foot);
+  dialog.setContent(root);
+  const allRows = () => {
+    const rows = [];
+    for (const src of options.sources)
+      rows.push(
+        ...keybindingRows(src.keybindings, (c) => src.commands.get(c)?.title)
+      );
+    return rows;
+  };
+  const kbdCell = (keys) => {
+    const td = el4("td");
+    keys.forEach((k, i) => {
+      if (i > 0) td.append(el4("span", "or", "or"));
+      for (const part of formatKey(k, IS_MAC))
+        td.append(el4("kbd", void 0, part));
+    });
+    return td;
+  };
+  const sortRows = (rows) => {
+    const val = (r) => sortKey === "title" ? r.title : sortKey === "keys" ? r.keys.map((k) => formatKey(k, IS_MAC).join("")).join(" ") : sortKey === "when" ? r.when ?? "" : r.source;
+    const sorted = [...rows].sort(
+      (a, b) => val(a).localeCompare(val(b), void 0, { sensitivity: "base" })
+    );
+    return sortAsc ? sorted : sorted.reverse();
+  };
+  const render = () => {
+    const q = search.value.trim().toLowerCase();
+    const rows = allRows();
+    const shown = sortRows(filterKeybindingRows(rows, q, IS_MAC));
+    for (const [key, th] of ths) {
+      if (key === sortKey)
+        th.setAttribute("aria-sort", sortAsc ? "ascending" : "descending");
+      else th.removeAttribute("aria-sort");
+    }
+    tbody.replaceChildren();
+    if (shown.length === 0) {
+      const tr = el4("tr");
+      const td = el4("td", "bb-ks-empty", "No shortcut matches.");
+      td.colSpan = 4;
+      tr.append(td);
+      tbody.append(tr);
+    }
+    for (const r of shown) {
+      const tr = el4("tr");
+      const cmd = el4("td", "cmd");
+      cmd.append(...highlight(r.title, q));
+      const small = el4("small");
+      small.append(...highlight(r.command, q));
+      cmd.append(small);
+      const when = el4("td", "when");
+      when.append(...highlight(r.when ?? "", q));
+      const src = el4("td", "src");
+      const chip = el4(
+        "span",
+        "bb-ks-chip" + (r.source === "core" ? " core" : "")
+      );
+      chip.append(...highlight(r.source, q));
+      src.append(chip);
+      tr.append(cmd, kbdCell(r.keys), when, src);
+      tbody.append(tr);
+    }
+    count.textContent = shown.length === rows.length ? `${rows.length} shortcuts` : `${shown.length} of ${rows.length}`;
+    footL.textContent = `Sorted by ${columns.find((c) => c.key === sortKey)?.label.toLowerCase()} \xB7 click a header to sort`;
+  };
+  search.addEventListener("input", render);
+  dialog.onClose(() => dialog.destroy());
+  render();
+  dialog.open();
+  search.focus();
+}
+
+// packages/ui/src/lib/scrollbars.ts
+var STYLE16 = `
+@property --bb-scroll-thumb-now {
+  syntax: '<color>';
+  /* MUST inherit: the thumb pseudo-element never matches .bb-scrolling
+     itself \u2014 it only ever INHERITS the value from its owner. */
+  inherits: true;
+  initial-value: transparent;
+}
+* { transition: --bb-scroll-thumb-now 0.35s ease; }
+.bb-scrolling { --bb-scroll-thumb-now: var(--bb-ui-scroll-thumb, rgba(64,52,28,.28)); }
+::-webkit-scrollbar { width: 13px; height: 13px; background: transparent; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-corner { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background-color: var(--bb-scroll-thumb-now);
+  background-clip: content-box;
+  border: 3px solid transparent;
+  border-radius: 99px;
+  min-height: 40px; /* a 277-page doc must not shrink the thumb to a dot */
+}
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:active {
+  background-color: var(--bb-ui-scroll-thumb-hover, rgba(64,52,28,.45));
+}
+@supports not selector(::-webkit-scrollbar) {
+  /* non-WebKit (Firefox): native thin overlay, same colours */
+  * { scrollbar-width: thin; scrollbar-color: var(--bb-ui-scroll-thumb, rgba(64,52,28,.28)) transparent; }
+}
+`;
+var installed = null;
+function installScrollbars(root = document) {
+  if (installed) return installed;
+  injectStyle("bb-ui-scrollbars", STYLE16);
+  const quiet = /* @__PURE__ */ new WeakMap();
+  const onScroll = (ev) => {
+    const el5 = ev.target instanceof HTMLElement ? ev.target : root.documentElement;
+    el5.classList.add("bb-scrolling");
+    clearTimeout(quiet.get(el5));
+    quiet.set(
+      el5,
+      window.setTimeout(() => el5.classList.remove("bb-scrolling"), 1e3)
+    );
+  };
+  root.addEventListener("scroll", onScroll, { capture: true, passive: true });
+  installed = () => {
+    root.removeEventListener("scroll", onScroll, { capture: true });
+    installed = null;
+  };
+  return installed;
+}
 export {
   COLOR_PALETTE,
   Dialog,
+  RECENT_MAX,
+  SPECIAL_CHARACTERS,
+  SYMBOL_GROUPS,
+  SYMBOL_NAMES,
   cmToPx,
+  codePointLabel,
   colorButton,
   createFindDialog,
   createSectionChip,
+  createSymbolDialog,
   defaultMenus,
   defaultToolbarGroups,
+  installScrollbars,
   marginPresetPicker,
   mountMenubar,
   mountToolbar,
   openCellProperties,
   openColorPicker,
   openFontDialog,
+  openKeyboardShortcutsDialog,
   openMarginsDialog,
   openPageSizeDialog,
+  openSymbolPopover,
   orientationPicker,
   pageNumberPicker,
   pageSizePicker,
+  panelAnchor,
+  parseCodePoint,
   promptDialog,
+  pushRecent,
   pxToCm,
+  searchSymbols,
   sectionPaperPanel,
   showContextMenu,
   showLinkPanel,