@shadow-garden/bapbong-ui 0.15.0 → 0.16.0

package/dist/index.js

@@ -32,12 +32,12 @@ function placeFloating(el5, anchor) {
 }
 function rovingGrid(cells) {
   let cur = [0, 0];
-  const at = (r, c) => cells[r]?.[c];
-  const focusCell = (r, c) => {
+  const at = (r, c2) => cells[r]?.[c2];
+  const focusCell = (r, c2) => {
     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 nc = Math.min(cells[nr].length - 1, Math.max(0, c2));
     const prev = at(cur[0], cur[1]);
     if (prev) prev.tabIndex = -1;
     const next = at(nr, nc);
@@ -47,9 +47,9 @@ function rovingGrid(cells) {
     cur = [nr, nc];
   };
   cells.forEach(
-    (row, r) => row.forEach((cell, c) => {
+    (row, r) => row.forEach((cell, c2) => {
       cell.setAttribute("role", "gridcell");
-      cell.tabIndex = r === 0 && c === 0 ? 0 : -1;
+      cell.tabIndex = r === 0 && c2 === 0 ? 0 : -1;
       cell.addEventListener("keydown", (e) => {
         const delta = {
           ArrowRight: [0, 1],
@@ -62,10 +62,10 @@ function rovingGrid(cells) {
         const d = delta[e.key];
         if (!d) return;
         e.preventDefault();
-        focusCell(r + d[0], c + d[1]);
+        focusCell(r + d[0], c2 + d[1]);
       });
       cell.addEventListener("focus", () => {
-        cur = [r, c];
+        cur = [r, c2];
       });
     })
   );
@@ -395,9 +395,9 @@ function openColorPicker({
     panel.remove();
     anchor.focus();
   };
-  const pick = (c) => {
-    if (c && !COLOR_PALETTE.some((row) => row.includes(c))) remember(c);
-    onPick(c);
+  const pick = (c2) => {
+    if (c2 && !COLOR_PALETTE.some((row) => row.includes(c2))) remember(c2);
+    onPick(c2);
     close();
   };
   if (clearLabel !== void 0) {
@@ -441,15 +441,15 @@ function openColorPicker({
   );
   const customRow2 = document.createElement("div");
   customRow2.className = "bb-cpk-row";
-  for (const c of customColors) {
+  for (const c2 of customColors) {
     const sw = document.createElement("button");
     sw.type = "button";
     sw.className = "bb-cpk-sw";
-    sw.style.background = c;
-    sw.title = c;
-    sw.setAttribute("aria-label", c);
-    if (c.toUpperCase() === value?.toUpperCase()) sw.classList.add("on");
-    sw.addEventListener("click", () => pick(c));
+    sw.style.background = c2;
+    sw.title = c2;
+    sw.setAttribute("aria-label", c2);
+    if (c2.toUpperCase() === value?.toUpperCase()) sw.classList.add("on");
+    sw.addEventListener("click", () => pick(c2));
     customRow2.append(sw);
   }
   const plus = document.createElement("button");
@@ -533,8 +533,8 @@ function colorButton(o) {
       anchor: el5,
       value: o.value(),
       clearLabel: o.clearLabel,
-      onPick: (c) => {
-        o.onPick(c);
+      onPick: (c2) => {
+        o.onPick(c2);
         sync();
       }
     });
@@ -645,7 +645,7 @@ var STYLE3 = `
 .bb-split-bar{flex:1;height:3px;border-radius:2px;background:var(--bb-ui-border,#d9d9d4)}
 `;
 function defaultToolbarGroups(commands) {
-  const names = [...commands].map((c) => c.name);
+  const names = [...commands].map((c2) => c2.name);
   const aligns = names.filter((n) => n.startsWith("align-"));
   const rest = names.filter((n) => !n.startsWith("align-"));
   return [rest, aligns].filter((g2) => g2.length > 0);
@@ -895,7 +895,7 @@ function mountToolbar(host, editor, options = {}) {
       el5.disabled = cmd.isEnabled ? !cmd.isEnabled(state) : false;
     }
     for (const { spec, el: el5 } of selects) el5.value = spec.value(state);
-    for (const c of colors) c.sync();
+    for (const c2 of colors) c2.sync();
     for (const { spec, cards } of splits) {
       const selected = spec.value(state);
       for (const card of cards)
@@ -905,7 +905,7 @@ function mountToolbar(host, editor, options = {}) {
         );
     }
   };
-  const off = editor.onChange((c) => refresh(c.state));
+  const off = editor.onChange((c2) => refresh(c2.state));
   try {
     refresh(editor.state);
   } catch {
@@ -1149,7 +1149,7 @@ function showMenu(entries, at, options = {}) {
   return handle;
 }
 function defaultMenus(commands) {
-  const names = [...commands].map((c) => c.name);
+  const names = [...commands].map((c2) => c2.name);
   const marks = ["bold", "italic", "underline", "strike"].filter(
     (n) => commands.has(n)
   );
@@ -1263,10 +1263,10 @@ function mountMenubar(host, editor, options = {}) {
   function refresh(state) {
     latest = state;
     if (openIdx < 0) return;
-    for (const c of checks) c.el.textContent = c.active(state) ? "\u2713" : "";
+    for (const c2 of checks) c2.el.textContent = c2.active(state) ? "\u2713" : "";
     for (const e of enables) e.el.disabled = !e.enabled(state);
   }
-  const off = editor.onChange((c) => refresh(c.state));
+  const off = editor.onChange((c2) => refresh(c2.state));
   try {
     latest = editor.state;
   } catch {
@@ -1594,13 +1594,13 @@ function showLinkPanel(opts) {
       row.appendChild(icon);
       const label = document.createElement("span");
       label.className = "bb-linkpanel-href";
-      label.textContent = internal.label ?? "V\u1ECB tr\xED kh\xF4ng c\xF2n trong t\xE0i li\u1EC7u";
+      label.textContent = internal.label ?? "This place is no longer in the document";
       label.title = internal.label ?? existing.href;
       if (!internal.label) label.classList.add("bb-linkpanel-stale");
       row.appendChild(label);
       if (internal.label) {
         row.appendChild(
-          iconBtn(ICONS.goTo, "\u0110i t\u1EDBi v\u1ECB tr\xED n\xE0y", () => {
+          iconBtn(ICONS.goTo, "Go to this place", () => {
             closeCurrent2();
             internal.onGo();
           })
@@ -1814,8 +1814,8 @@ function openCellProperties({
     label: "Fill",
     clearLabel: "No fill",
     value: () => background,
-    onPick: (c) => {
-      background = c;
+    onPick: (c2) => {
+      background = c2;
     }
   });
   fill.append(fillBtn.el);
@@ -1868,8 +1868,8 @@ function openCellProperties({
     title: "Border colour",
     label: "Colour",
     value: () => penColor,
-    onPick: (c) => {
-      if (c) penColor = c;
+    onPick: (c2) => {
+      if (c2) penColor = c2;
     }
   });
   penRow.append(widthSel, styleSel, penBtn.el);
@@ -1933,8 +1933,400 @@ function openCellProperties({
   dialog.open();
 }
 
-// packages/ui/src/lib/table-grid.ts
+// packages/ui/src/lib/equation-gallery.ts
+import { astToLinear } from "@shadow-garden/bapbong-contracts";
+var c = (s) => [...s].map((ch) => ({ t: "chr", ch }));
+var sup = (base, exp) => ({
+  t: "scr",
+  base,
+  sub: [],
+  sup: c(exp)
+});
+var subsup = (base, lo, hi) => ({
+  t: "scr",
+  base,
+  sub: c(lo),
+  sup: c(hi)
+});
+var BUILT_IN_EQUATIONS = [
+  {
+    name: "Area of a circle",
+    ast: [...c("\u{1D434} = \u{1D70B}"), sup(c("\u{1D45F}"), "2")]
+  },
+  {
+    name: "Pythagorean theorem",
+    ast: [
+      sup(c("\u{1D44E}"), "2"),
+      ...c(" + "),
+      sup(c("\u{1D44F}"), "2"),
+      ...c(" = "),
+      sup(c("\u{1D450}"), "2")
+    ]
+  },
+  {
+    name: "Quadratic formula",
+    ast: [
+      ...c("\u{1D465} = "),
+      {
+        t: "frac",
+        num: [
+          ...c("\u2212\u{1D44F} \xB1 "),
+          {
+            t: "rad",
+            deg: [],
+            body: [sup(c("\u{1D44F}"), "2"), ...c(" \u2212 4\u{1D44E}\u{1D450}")]
+          }
+        ],
+        den: c("2\u{1D44E}")
+      }
+    ]
+  },
+  {
+    name: "Law of cosines",
+    ast: [
+      sup(c("\u{1D44E}"), "2"),
+      ...c(" = "),
+      sup(c("\u{1D44F}"), "2"),
+      ...c(" + "),
+      sup(c("\u{1D450}"), "2"),
+      ...c(" \u2212 2\u{1D44F}\u{1D450} cos \u{1D434}")
+    ]
+  },
+  {
+    name: "Binomial theorem",
+    ast: [
+      // The exponent belongs ON the bracket: a script with an empty base
+      // would render its own empty slot — the dotted placeholder box.
+      {
+        t: "scr",
+        base: [{ t: "fence", l: "(", r: ")", body: c("\u{1D44E} + \u{1D44F}") }],
+        sub: [],
+        sup: c("\u{1D45B}")
+      },
+      ...c(" = "),
+      {
+        t: "big",
+        op: "\u2211",
+        lo: c("\u{1D458} = 0"),
+        hi: c("\u{1D45B}"),
+        body: [
+          subsup(c("\u{1D436}"), "\u{1D45B}", "\u{1D458}"),
+          sup(c("\u{1D44E}"), "\u{1D458}"),
+          { t: "scr", base: c("\u{1D44F}"), sub: [], sup: c("\u{1D45B}\u2212\u{1D458}") }
+        ]
+      }
+    ]
+  }
+];
+var SVG_NS = "http://www.w3.org/2000/svg";
+function equationPreviewSvg(spec, opts = {}) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", `0 0 ${spec.width} ${spec.height}`);
+  const max = opts.maxWidth ?? spec.width;
+  const scale = Math.min(1, max / Math.max(1, spec.width));
+  svg.setAttribute("width", String(Math.round(spec.width * scale)));
+  svg.setAttribute("height", String(Math.round(spec.height * scale)));
+  svg.setAttribute("aria-hidden", "true");
+  for (const op of spec.ops) svg.append(opElement(op));
+  return svg;
+}
+function opElement(op) {
+  if (op.kind === "line") {
+    const el6 = document.createElementNS(SVG_NS, "line");
+    el6.setAttribute("x1", String(op.x1));
+    el6.setAttribute("y1", String(op.y1));
+    el6.setAttribute("x2", String(op.x2));
+    el6.setAttribute("y2", String(op.y2));
+    el6.setAttribute("stroke", op.color);
+    el6.setAttribute("stroke-width", String(Math.max(op.width, 0.75)));
+    return el6;
+  }
+  if (op.kind === "polygon") {
+    const el6 = document.createElementNS(SVG_NS, "polygon");
+    el6.setAttribute("points", op.points.map((p) => `${p.x},${p.y}`).join(" "));
+    el6.setAttribute("fill", op.fill ?? "none");
+    if (op.stroke) {
+      el6.setAttribute("stroke", op.stroke);
+      el6.setAttribute("stroke-width", String(op.strokeWidth ?? 1));
+    }
+    return el6;
+  }
+  const el5 = document.createElementNS(SVG_NS, "text");
+  el5.setAttribute("x", String(op.x));
+  el5.setAttribute("y", String(op.y));
+  el5.setAttribute("font-size", String(op.size));
+  el5.setAttribute("font-family", op.family);
+  el5.setAttribute("fill", op.color);
+  if (op.bold) el5.setAttribute("font-weight", "bold");
+  if (op.italic) el5.setAttribute("font-style", "italic");
+  if (op.vAlign === "top") el5.setAttribute("dominant-baseline", "hanging");
+  if (op.dx) {
+    let x = op.x;
+    for (const [i, ch] of [...op.text].entries()) {
+      const t = document.createElementNS(SVG_NS, "tspan");
+      t.setAttribute("x", String(x));
+      t.textContent = ch;
+      el5.append(t);
+      x += op.dx[i] ?? 0;
+    }
+  } else {
+    el5.textContent = op.text;
+  }
+  return el5;
+}
 var STYLE9 = `
+.bb-eqg{display:flex;flex-direction:column;min-width:236px;max-width:300px;user-select:none}
+.bb-eqg-head{font-size:11px;font-weight:600;opacity:.55;padding:2px 8px 6px}
+.bb-eqg-list{display:flex;flex-direction:column;max-height:320px;overflow-y:auto}
+.bb-eqg-item{display:flex;flex-direction:column;gap:3px;align-items:flex-start;width:100%;padding:7px 9px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
+.bb-eqg-item:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-eqg-name{font-size:11px;opacity:.6}
+/* The preview is the equation TYPESET \u2014 the same display list the canvas
+   paints. The text form is the fallback for a host that cannot lay out. */
+.bb-eqg-prev{display:flex;align-items:center;min-height:22px;max-width:100%;overflow:hidden}
+.bb-eqg-prev svg{display:block}
+.bb-eqg-prev-text{font-family:"Times New Roman",Tinos,serif;font-size:15px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
+.bb-eqg-foot{margin-top:4px;padding-top:5px;border-top:1px solid var(--bb-ui-border,#e3e3e0)}
+.bb-eqg-new{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}
+.bb-eqg-new:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-eqg-key{margin-left:auto;opacity:.5;font-size:12px}
+`;
+var PREVIEW_PT = 11;
+var PREVIEW_MAX_W = 264;
+function equationGallery(options) {
+  injectStyle("bb-ui-eqg-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-eqg";
+  const head = document.createElement("div");
+  head.className = "bb-eqg-head";
+  head.textContent = "Built-in";
+  root.append(head);
+  const list = document.createElement("div");
+  list.className = "bb-eqg-list";
+  for (const item of options.items ?? BUILT_IN_EQUATIONS) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "bb-eqg-item";
+    const prev = document.createElement("div");
+    prev.className = "bb-eqg-prev";
+    const spec = options.layout?.(item.ast, PREVIEW_PT) ?? null;
+    if (spec && spec.ops.length)
+      prev.append(equationPreviewSvg(spec, { maxWidth: PREVIEW_MAX_W }));
+    else {
+      prev.classList.add("bb-eqg-prev-text");
+      prev.textContent = astToLinear(item.ast);
+    }
+    const name = document.createElement("div");
+    name.className = "bb-eqg-name";
+    name.textContent = item.name;
+    btn.append(prev, name);
+    btn.addEventListener("mousedown", (e) => e.preventDefault());
+    btn.addEventListener("click", () => options.onPick(item.ast));
+    list.append(btn);
+  }
+  root.append(list);
+  const foot = document.createElement("div");
+  foot.className = "bb-eqg-foot";
+  const neu = document.createElement("button");
+  neu.type = "button";
+  neu.className = "bb-eqg-new";
+  const label = document.createElement("span");
+  label.textContent = "Insert new equation";
+  neu.append(label);
+  if (options.newShortcut) {
+    const key = document.createElement("span");
+    key.className = "bb-eqg-key";
+    key.textContent = options.newShortcut;
+    neu.append(key);
+  }
+  neu.addEventListener("mousedown", (e) => e.preventDefault());
+  neu.addEventListener("click", () => options.onNew());
+  foot.append(neu);
+  root.append(foot);
+  return root;
+}
+
+// packages/ui/src/lib/equation-panel.ts
+import {
+  eqStructureGroups,
+  MATH_AUTOCORRECT,
+  MATH_SYMBOL_SETS
+} from "@shadow-garden/bapbong-contracts";
+var SHORTHAND = /* @__PURE__ */ new Map();
+for (const [name, ch] of Object.entries(MATH_AUTOCORRECT))
+  if (!SHORTHAND.has(ch)) SHORTHAND.set(ch, `\\${name}`);
+var PREVIEW_PT2 = 10;
+var STYLE10 = `
+.bb-eqp{width:352px;display:flex;flex-direction:column;background:var(--bb-ui-bg,#fff);border:0.5px solid var(--bb-ui-border,#e3e3e0);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.13);user-select:none;overflow:hidden}
+.bb-eqp-tabs{display:flex;align-items:flex-end;gap:2px;padding:5px 5px 0;border-bottom:0.5px solid var(--bb-ui-border,#e3e3e0)}
+.bb-eqp.is-collapsed .bb-eqp-tabs{border-bottom:0}
+.bb-eqp-tab{padding:6px 11px;border:0;border-radius:6px 6px 0 0;background:transparent;color:inherit;font:inherit;font-size:13px;opacity:.65;cursor:pointer}
+.bb-eqp-tab:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-eqp-tab[aria-selected="true"]{opacity:1;background:var(--bb-ui-sel,#e6f1fb);color:var(--bb-ui-sel-fg,#0c447c)}
+.bb-eqp-fold{margin-left:auto;margin-bottom:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;opacity:.5;cursor:pointer}
+.bb-eqp-fold:hover{background:var(--bb-ui-hover,#f1efe8);opacity:.9}
+.bb-eqp-body{padding:8px}
+.bb-eqp.is-collapsed .bb-eqp-body{display:none}
+.bb-eqp-set{width:100%;height:30px;margin-bottom:7px;font:inherit;font-size:13px}
+.bb-eqp-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;max-height:190px;overflow-y:auto}
+.bb-eqp-sym{padding:5px 0;border:0;border-radius:5px;background:transparent;color:inherit;font-family:"Cambria Math","Times New Roman",Tinos,serif;font-size:16px;line-height:1.2;cursor:pointer}
+.bb-eqp-sym:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-eqp-hint{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin-top:7px;padding-top:6px;border-top:0.5px solid var(--bb-ui-border,#e3e3e0);font-size:12px;opacity:.6}
+.bb-eqp-hint-g{font-family:"Cambria Math","Times New Roman",Tinos,serif;font-size:15px}
+.bb-eqp-hint-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
+.bb-eqp-scroll{max-height:230px;overflow-y:auto}
+.bb-eqp-group{font-size:11px;font-weight:600;opacity:.5;padding:6px 2px 3px}
+.bb-eqp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
+.bb-eqp-st{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;min-height:52px;padding:6px 2px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;cursor:pointer}
+.bb-eqp-st:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-eqp-st-name{font-size:10px;opacity:.6;text-align:center;line-height:1.25}
+.bb-eqp-st svg{display:block}
+`;
+var CHEVRON_UP = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 15l6-6 6 6"/></svg>';
+var CHEVRON_DOWN = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>';
+function equationPanel(options) {
+  injectStyle("bb-ui-eqp-styles", STYLE10);
+  const root = document.createElement("div");
+  root.className = "bb-eqp";
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", "Equation palette");
+  root.addEventListener("mousedown", (e) => e.preventDefault());
+  const tabs = document.createElement("div");
+  tabs.className = "bb-eqp-tabs";
+  tabs.setAttribute("role", "tablist");
+  const body = document.createElement("div");
+  body.className = "bb-eqp-body";
+  let collapsed = false;
+  let current3 = "symbols";
+  const tabEls = {};
+  const mkTab = (id, label) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-eqp-tab";
+    b.textContent = label;
+    b.setAttribute("role", "tab");
+    b.addEventListener("click", () => {
+      current3 = id;
+      if (collapsed) setCollapsed(false);
+      render();
+    });
+    tabEls[id] = b;
+    tabs.append(b);
+  };
+  mkTab("symbols", "Symbols");
+  mkTab("structures", "Structures");
+  const fold = document.createElement("button");
+  fold.type = "button";
+  fold.className = "bb-eqp-fold";
+  fold.addEventListener("click", () => setCollapsed(!collapsed));
+  tabs.append(fold);
+  root.append(tabs, body);
+  function setCollapsed(next) {
+    collapsed = next;
+    root.classList.toggle("is-collapsed", collapsed);
+    fold.innerHTML = collapsed ? CHEVRON_DOWN : CHEVRON_UP;
+    fold.setAttribute(
+      "aria-label",
+      collapsed ? "Show palette" : "Hide palette"
+    );
+    fold.setAttribute("aria-expanded", String(!collapsed));
+  }
+  function symbolsBody() {
+    const set = document.createElement("select");
+    set.className = "bb-eqp-set";
+    set.setAttribute("aria-label", "Symbol set");
+    for (const [i, s] of MATH_SYMBOL_SETS.entries()) {
+      const o = document.createElement("option");
+      o.value = String(i);
+      o.textContent = s.name;
+      set.append(o);
+    }
+    set.value = String(setIndex);
+    const grid = document.createElement("div");
+    grid.className = "bb-eqp-grid";
+    const hint = document.createElement("div");
+    hint.className = "bb-eqp-hint";
+    const hintG = document.createElement("span");
+    hintG.className = "bb-eqp-hint-g";
+    const hintK = document.createElement("span");
+    hintK.className = "bb-eqp-hint-k";
+    hint.append(hintG, hintK);
+    const fill = () => {
+      grid.replaceChildren();
+      const chars = MATH_SYMBOL_SETS[setIndex]?.chars ?? "";
+      for (const ch of chars) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "bb-eqp-sym";
+        b.textContent = ch;
+        const key = SHORTHAND.get(ch);
+        b.title = key ? `${ch}   ${key}` : ch;
+        b.addEventListener("mouseenter", () => {
+          hintG.textContent = ch;
+          hintK.textContent = key ?? "";
+        });
+        b.addEventListener("click", () => options.onSymbol(ch));
+        grid.append(b);
+      }
+    };
+    set.addEventListener("change", () => {
+      setIndex = Number(set.value) || 0;
+      fill();
+    });
+    fill();
+    body.replaceChildren(set, grid, hint);
+  }
+  function structuresBody() {
+    const scroll = document.createElement("div");
+    scroll.className = "bb-eqp-scroll";
+    for (const group of eqStructureGroups()) {
+      const h = document.createElement("div");
+      h.className = "bb-eqp-group";
+      h.textContent = group.name;
+      const row = document.createElement("div");
+      row.className = "bb-eqp-row";
+      for (const item of group.items) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.className = "bb-eqp-st";
+        b.title = `${group.name} \u2014 ${item.name}`;
+        const spec = options.layout?.([item.node], PREVIEW_PT2) ?? null;
+        if (spec && spec.ops.length)
+          b.append(equationPreviewSvg(spec, { maxWidth: 60 }));
+        const name = document.createElement("span");
+        name.className = "bb-eqp-st-name";
+        name.textContent = item.name;
+        b.append(name);
+        b.addEventListener("click", () => options.onStructure(item));
+        row.append(b);
+      }
+      scroll.append(h, row);
+    }
+    body.replaceChildren(scroll);
+  }
+  let setIndex = 0;
+  function render() {
+    for (const [id, el5] of Object.entries(tabEls))
+      el5.setAttribute("aria-selected", String(id === current3));
+    if (current3 === "symbols") symbolsBody();
+    else structuresBody();
+  }
+  setCollapsed(false);
+  render();
+  return {
+    el: root,
+    setCollapsed,
+    get collapsed() {
+      return collapsed;
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+}
+
+// packages/ui/src/lib/table-grid.ts
+var STYLE11 = `
 .bb-grid{display:flex;flex-direction:column;gap:6px;user-select:none}
 .bb-grid-cells{display:grid;gap:2px}
 .bb-grid-cell{width:15px;height:15px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:2px;background:var(--bb-ui-bg,#fff);cursor:pointer;padding:0}
@@ -1942,7 +2334,7 @@ var STYLE9 = `
 .bb-grid-label{font-size:12px;text-align:center;opacity:.7}
 `;
 function tableGridPicker(options) {
-  injectStyle("bb-ui-grid-styles", STYLE9);
+  injectStyle("bb-ui-grid-styles", STYLE11);
   const maxRows = options.maxRows ?? 8;
   const maxCols = options.maxCols ?? 10;
   const root = document.createElement("div");
@@ -1954,22 +2346,22 @@ function tableGridPicker(options) {
   label.className = "bb-grid-label";
   label.textContent = "0 \xD7 0";
   const cells = [];
-  const highlight2 = (r, c) => {
+  const highlight2 = (r, c2) => {
     for (let i = 0; i < cells.length; i++) {
       const row = Math.floor(i / maxCols);
       const col = i % maxCols;
-      cells[i].classList.toggle("on", row <= r && col <= c);
+      cells[i].classList.toggle("on", row <= r && col <= c2);
     }
-    label.textContent = `${r + 1} \xD7 ${c + 1}`;
+    label.textContent = `${r + 1} \xD7 ${c2 + 1}`;
   };
   for (let r = 0; r < maxRows; r++) {
-    for (let c = 0; c < maxCols; c++) {
+    for (let c2 = 0; c2 < maxCols; c2++) {
       const cell = document.createElement("button");
       cell.type = "button";
       cell.className = "bb-grid-cell";
       cell.addEventListener("mousedown", (e) => e.preventDefault());
-      cell.addEventListener("mouseenter", () => highlight2(r, c));
-      cell.addEventListener("click", () => options.onPick(r + 1, c + 1));
+      cell.addEventListener("mouseenter", () => highlight2(r, c2));
+      cell.addEventListener("click", () => options.onPick(r + 1, c2 + 1));
       cells.push(cell);
       cellsEl.appendChild(cell);
     }
@@ -1985,7 +2377,7 @@ var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
 function fmtCm(cm) {
   return `${Number(cm.toFixed(3))} cm`;
 }
-var STYLE10 = `
+var STYLE12 = `
 .bb-ps{display:flex;flex-direction:column;min-width:250px;max-height:min(70vh,460px);overflow-y:auto}
 .bb-ps,.bb-ps *{box-sizing:border-box}
 .bb-ps-row{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
@@ -2015,9 +2407,9 @@ var STYLE10 = `
 .bb-ps-tile:hover,.bb-ps-tile:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
 .bb-ps-tile[aria-checked="true"]{background:var(--bb-ui-active-bg,#e6f1fb)}
 `;
-var SVG_NS = "http://www.w3.org/2000/svg";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 function svgEl(name, attrs) {
-  const el5 = document.createElementNS(SVG_NS, name);
+  const el5 = document.createElementNS(SVG_NS2, name);
   for (const [k, v] of Object.entries(attrs)) el5.setAttribute(k, String(v));
   return el5;
 }
@@ -2111,7 +2503,7 @@ function customRow(icon, title, description, onPick) {
   return presetRow(icon, title, captionLine(description), false, onPick);
 }
 function pageSizePicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2140,7 +2532,7 @@ function pageSizePicker(options) {
   return root;
 }
 function orientationPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2163,7 +2555,7 @@ function orientationPicker(options) {
   return root;
 }
 function marginPresetPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2238,7 +2630,7 @@ function readPx(input, fallbackPx) {
   return Number.isFinite(n) && n > 0 ? cmToPx(n) : fallbackPx;
 }
 function openPageSizeDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const dialog = new Dialog({ title: "Paper size", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2265,7 +2657,7 @@ function openPageSizeDialog(options) {
   width.input.select();
 }
 function openMarginsDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const dialog = new Dialog({ title: "Margins", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2322,7 +2714,7 @@ var PGNUM_FORMATS = [
   ["upperLetter", "A, B, C, D\u2026", "A"]
 ];
 function pageNumberPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2423,7 +2815,7 @@ function pageNumberPicker(options) {
   return root;
 }
 function sectionPaperPanel(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE12);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2492,7 +2884,7 @@ function sectionPaperPanel(options) {
 }
 
 // packages/ui/src/lib/section-chip.ts
-var STYLE11 = `
+var STYLE13 = `
 .bb-secchip{position:absolute;z-index:8;display:inline-flex;align-items:center;transform:translate(-50%,-50%);white-space:nowrap;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;padding:1px 2px;box-shadow:0 2px 10px rgba(0,0,0,.12);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);font-size:11px;color:var(--bb-ui-fg,#2c2c2a)}
 .bb-secchip *{box-sizing:border-box}
 .bb-secchip-title{padding:0 7px;font-size:11px;font-weight:600;opacity:.8}
@@ -2505,7 +2897,7 @@ var STYLE11 = `
 .bb-secchip-x:hover{background:var(--bb-ui-hover,#f1efe8);opacity:1}
 `;
 function createSectionChip(options) {
-  injectStyle("bb-ui-section-chip-styles", STYLE11);
+  injectStyle("bb-ui-section-chip-styles", STYLE13);
   const el5 = document.createElement("div");
   el5.className = "bb-secchip";
   const title = document.createElement("span");
@@ -2562,7 +2954,7 @@ var halfToPt = (hp) => hp / 2;
 var ptToHalf = (pt) => Math.round(pt * 2);
 var SCALE_PRESETS = [200, 150, 100, 90, 80, 66, 50, 33];
 var SUPERSUB_SCALE = 0.66;
-var STYLE12 = `
+var STYLE14 = `
 .bb-fd{display:flex;flex-direction:column;gap:15px;min-width:396px;max-width:430px;color:var(--bb-ui-fg,#2c2c2a)}
 .bb-fd *{box-sizing:border-box}
 /* A segmented control, not a "tab joined to its pane": that pattern needs the
@@ -2644,7 +3036,7 @@ function openFontDialog({
   sizes,
   onApply
 }) {
-  injectStyle("bb-font-dialog", STYLE12);
+  injectStyle("bb-font-dialog", STYLE14);
   const dialog = new Dialog({ title: "Font", modal: true });
   const root = el("div", "bb-fd");
   const tabs = el("div", "bb-fd-tabs");
@@ -2708,8 +3100,8 @@ function openFontDialog({
     label: "Text color",
     clearLabel: "Automatic",
     value: () => color,
-    onPick: (c) => {
-      color = c;
+    onPick: (c2) => {
+      color = c2;
       paint();
     }
   });
@@ -2718,8 +3110,8 @@ function openFontDialog({
     label: "Highlight",
     clearLabel: "No highlight",
     value: () => highlight2,
-    onPick: (c) => {
-      highlight2 = c;
+    onPick: (c2) => {
+      highlight2 = c2;
       paint();
     }
   });
@@ -2844,8 +3236,8 @@ function openFontDialog({
     s.transform = scale === 100 ? "none" : `scaleX(${scale / 100})`;
     s.verticalAlign = supCb.checked ? "super" : subCb.checked ? "sub" : `${positionPt}pt`;
   }
-  for (const c of [familySel, sizeSel, scaleSel])
-    c.addEventListener("change", paint);
+  for (const c2 of [familySel, sizeSel, scaleSel])
+    c2.addEventListener("change", paint);
   for (const i of [spacingInput, positionInput])
     i.addEventListener("input", paint);
   const foot = el("div", "bb-fd-foot");
@@ -3266,7 +3658,7 @@ function parseCodePoint(input) {
 }
 var RECENT_MAX = 16;
 function pushRecent(recent, char, max = RECENT_MAX) {
-  return [char, ...recent.filter((c) => c !== char)].slice(0, max);
+  return [char, ...recent.filter((c2) => c2 !== char)].slice(0, max);
 }
 function searchSymbols(query) {
   const q = query.trim().toLowerCase();
@@ -3286,7 +3678,7 @@ function searchSymbols(query) {
 }
 
 // packages/ui/src/lib/symbol-dialog.ts
-var STYLE13 = `
+var STYLE15 = `
 .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}
@@ -3347,7 +3739,7 @@ function glyphFor(char) {
   return char;
 }
 function createSymbolDialog(options) {
-  injectStyle("bb-symbol-dialog", STYLE13);
+  injectStyle("bb-symbol-dialog", STYLE15);
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let selected = null;
   const root = el2("div", "bb-sd");
@@ -3536,9 +3928,9 @@ function createSymbolDialog(options) {
   function renderRecent() {
     fillGrid(
       recentGrid,
-      recent.map((c) => ({
-        char: c,
-        name: SYMBOL_NAMES.get(c) ?? "Character"
+      recent.map((c2) => ({
+        char: c2,
+        name: SYMBOL_NAMES.get(c2) ?? "Character"
       })),
       RECENT_COLS,
       "Nothing yet \u2014 inserted symbols appear here."
@@ -3582,7 +3974,7 @@ function createSymbolDialog(options) {
       code.removeAttribute("aria-invalid");
       const cell = Array.from(
         grid.querySelectorAll(".bb-sd-cell")
-      ).find((c) => c.textContent === glyphFor(ch));
+      ).find((c2) => c2.textContent === glyphFor(ch));
       select2(ch, cell ?? null);
     } else {
       code.setAttribute("aria-invalid", code.value.trim() ? "true" : "false");
@@ -3625,7 +4017,7 @@ function createSymbolDialog(options) {
 }
 
 // packages/ui/src/lib/symbol-popover.ts
-var STYLE14 = `
+var STYLE16 = `
 .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}
@@ -3658,7 +4050,7 @@ function el3(tag, cls, text) {
   return n;
 }
 function openSymbolPopover(options) {
-  injectStyle("bb-ui-symbol-popover", STYLE14);
+  injectStyle("bb-ui-symbol-popover", STYLE16);
   const { anchor } = options;
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let groupId = SYMBOL_GROUPS[0].id;
@@ -3689,16 +4081,16 @@ function openSymbolPopover(options) {
   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", () => {
+    const c2 = el3("button", "bb-spk-chip", grp.short);
+    c2.type = "button";
+    c2.title = grp.label;
+    c2.addEventListener("click", () => {
       groupId = grp.id;
       search.value = "";
       render();
     });
-    chips.append(c);
-    chipEls.set(grp.id, c);
+    chips.append(c2);
+    chipEls.set(grp.id, c2);
   }
   const grid = el3("div", "bb-spk-grid");
   grid.setAttribute("role", "grid");
@@ -3769,9 +4161,9 @@ function openSymbolPopover(options) {
   };
   const renderRecent = () => fill(
     recentGrid,
-    recent.slice(0, RECENT_ROW).map((c) => ({
-      char: c,
-      name: SYMBOL_NAMES.get(c) ?? "Character"
+    recent.slice(0, RECENT_ROW).map((c2) => ({
+      char: c2,
+      name: SYMBOL_NAMES.get(c2) ?? "Character"
     })),
     "Nothing yet."
   );
@@ -3779,8 +4171,8 @@ function openSymbolPopover(options) {
     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));
+    for (const [id, c2] of chipEls)
+      c2.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);
@@ -3824,7 +4216,7 @@ import {
   formatKey,
   keybindingRows
 } from "@shadow-garden/bapbong-contracts";
-var STYLE15 = `
+var STYLE17 = `
 .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}
@@ -3882,7 +4274,7 @@ function highlight(text, q) {
   return out;
 }
 function openKeyboardShortcutsDialog(options) {
-  injectStyle("bb-ui-shortcuts-dialog", STYLE15);
+  injectStyle("bb-ui-shortcuts-dialog", STYLE17);
   const dialog = new Dialog({
     title: options.title ?? "Keyboard shortcuts",
     modal: true,
@@ -3909,19 +4301,19 @@ function openKeyboardShortcutsDialog(options) {
   let sortKey = "title";
   let sortAsc = true;
   const ths = /* @__PURE__ */ new Map();
-  for (const c of columns) {
+  for (const c2 of columns) {
     const th = el4("th");
-    th.append(el4("span", void 0, c.label));
+    th.append(el4("span", void 0, c2.label));
     th.addEventListener("click", () => {
-      if (sortKey === c.key) sortAsc = !sortAsc;
+      if (sortKey === c2.key) sortAsc = !sortAsc;
       else {
-        sortKey = c.key;
+        sortKey = c2.key;
         sortAsc = true;
       }
       render();
     });
     headRow.append(th);
-    ths.set(c.key, th);
+    ths.set(c2.key, th);
   }
   thead.append(headRow);
   const tbody = el4("tbody");
@@ -3941,7 +4333,7 @@ function openKeyboardShortcutsDialog(options) {
     const rows = [];
     for (const src of options.sources)
       rows.push(
-        ...keybindingRows(src.keybindings, (c) => src.commands.get(c)?.title)
+        ...keybindingRows(src.keybindings, (c2) => src.commands.get(c2)?.title)
       );
     return rows;
   };
@@ -3998,7 +4390,7 @@ function openKeyboardShortcutsDialog(options) {
       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`;
+    footL.textContent = `Sorted by ${columns.find((c2) => c2.key === sortKey)?.label.toLowerCase()} \xB7 click a header to sort`;
   };
   search.addEventListener("input", render);
   dialog.onClose(() => dialog.destroy());
@@ -4008,7 +4400,7 @@ function openKeyboardShortcutsDialog(options) {
 }
 
 // packages/ui/src/lib/scrollbars.ts
-var STYLE16 = `
+var STYLE18 = `
 @property --bb-scroll-thumb-now {
   syntax: '<color>';
   /* MUST inherit: the thumb pseudo-element never matches .bb-scrolling
@@ -4040,7 +4432,7 @@ var STYLE16 = `
 var installed = null;
 function installScrollbars(root = document) {
   if (installed) return installed;
-  injectStyle("bb-ui-scrollbars", STYLE16);
+  injectStyle("bb-ui-scrollbars", STYLE18);
   const quiet = /* @__PURE__ */ new WeakMap();
   const onScroll = (ev) => {
     const el5 = ev.target instanceof HTMLElement ? ev.target : root.documentElement;
@@ -4059,6 +4451,7 @@ function installScrollbars(root = document) {
   return installed;
 }
 export {
+  BUILT_IN_EQUATIONS,
   COLOR_PALETTE,
   Dialog,
   RECENT_MAX,
@@ -4073,6 +4466,9 @@ export {
   createSymbolDialog,
   defaultMenus,
   defaultToolbarGroups,
+  equationGallery,
+  equationPanel,
+  equationPreviewSvg,
   installScrollbars,
   marginPresetPicker,
   mountMenubar,