@shadow-garden/bapbong-ui 0.15.0 → 0.17.0

package/dist/index.js

@@ -9,6 +9,13 @@ function shortcutLabel(command, registries) {
   }
   return void 0;
 }
+var TABS_CSS = `
+.bb-tabs{display:inline-flex;align-self:flex-start;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;overflow:hidden}
+.bb-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-tab:last-child{border-right:0}
+.bb-tab:hover{background:var(--bb-ui-hover,#f1efe8);opacity:.9}
+.bb-tab[aria-selected="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);opacity:1}
+`;
 function injectStyle(id, css) {
   if (document.getElementById(id)) return;
   const el5 = document.createElement("style");
@@ -32,12 +39,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 +54,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 +69,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 +402,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 +448,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 +540,8 @@ function colorButton(o) {
       anchor: el5,
       value: o.value(),
       clearLabel: o.clearLabel,
-      onPick: (c) => {
-        o.onPick(c);
+      onPick: (c2) => {
+        o.onPick(c2);
         sync();
       }
     });
@@ -618,6 +625,7 @@ var STYLE3 = `
 .bb-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;overflow:hidden;padding:6px 8px;font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);color:var(--bb-ui-fg,#2c2c2a);background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));border-bottom:1px solid var(--bb-ui-border,#e3e3e0);box-sizing:border-box}
 .bb-toolbar *{box-sizing:border-box}
 .bb-toolbar-group{display:flex;gap:2px;flex:none}
+.bb-toolbar-group[hidden]{display:none}
 .bb-toolbar-group+.bb-toolbar-group{padding-left:10px;border-left:1px solid var(--bb-ui-border,#e3e3e0)}
 .bb-toolbar-more{margin-left:auto;flex:none}
 .bb-toolbar-pop{position:absolute;z-index:1200;top:100%;left:0;right:0;margin-top:4px;display:flex;flex-wrap:wrap;gap:10px;row-gap:6px;align-items:center;padding:6px 8px;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;box-shadow:0 8px 28px rgba(0,0,0,.16);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);color:var(--bb-ui-fg,#2c2c2a)}
@@ -626,6 +634,9 @@ var STYLE3 = `
 .bb-toolbar-btn:hover{background:var(--bb-ui-hover,#f1efe8)}
 .bb-toolbar-btn.is-active{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);border-color:var(--bb-ui-active-border,#b5d4f4)}
 .bb-toolbar-btn:disabled{opacity:.38;cursor:default}
+.bb-toolbar-btn.bb-btn-accent{gap:5px;padding:0 9px;font-size:12.5px;white-space:nowrap;background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);border-color:var(--bb-ui-active-border,#b5d4f4)}
+.bb-toolbar-btn.bb-btn-accent:hover{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-fg,#0c447c)}
+.bb-btn-caret{font-size:9px;opacity:.7;line-height:1}
 .bb-toolbar-select{height:30px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#e3e3e0));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font-family:inherit;font-size:13px;padding:0 6px;cursor:pointer}
 .bb-toolbar-select:hover{background:var(--bb-ui-hover,#f1efe8)}
 .bb-i-bold{font-weight:700}.bb-i-italic{font-style:italic}.bb-i-underline{text-decoration:underline}.bb-i-strike{text-decoration:line-through}
@@ -645,11 +656,30 @@ 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);
 }
+function foldPlan(candidates, avail, moreWidth, gap) {
+  const vis = candidates.filter((c2) => !c2.hidden);
+  const rowWidth = vis.reduce((sum, c2) => sum + c2.width, 0) + gap * Math.max(0, vis.length - 1);
+  const folded = /* @__PURE__ */ new Set();
+  if (rowWidth <= avail + 1) return folded;
+  const order = [
+    ...vis.filter((c2) => !c2.sticky).reverse(),
+    ...vis.filter((c2) => c2.sticky).reverse()
+  ];
+  const fitsRemaining = () => {
+    const rem = vis.filter((c2) => !folded.has(c2.idx));
+    return rem.reduce((sum, c2) => sum + c2.width, 0) + gap * rem.length + moreWidth <= avail + 1;
+  };
+  for (const c2 of order) {
+    if (fitsRemaining()) break;
+    folded.add(c2.idx);
+  }
+  return folded;
+}
 function mountToolbar(host, editor, options = {}) {
   injectStyle("bb-ui-toolbar-styles", STYLE3);
   const items = { ...DEFAULT_ITEMS, ...options.items ?? {} };
@@ -660,17 +690,25 @@ function mountToolbar(host, editor, options = {}) {
   root.className = "bb-toolbar";
   root.setAttribute("role", "toolbar");
   const buttons = [];
+  const groupList = [];
+  const conditionalGroups = [];
   const selects = [];
   const colors = [];
   const splits = [];
   let latest = null;
   for (const group of groups) {
-    const entries = group.filter(
+    const spec = Array.isArray(group) ? { entries: group } : group;
+    const entries = spec.entries.filter(
       (e) => typeof e !== "string" || editor.commands.has(e)
     );
     if (entries.length === 0) continue;
     const groupEl = document.createElement("div");
     groupEl.className = "bb-toolbar-group";
+    groupList.push({ el: groupEl, sticky: !!spec.sticky, lastWidth: 0 });
+    if (spec.visible) {
+      conditionalGroups.push({ el: groupEl, visible: spec.visible });
+      groupEl.hidden = true;
+    }
     for (const entry of entries) {
       if (typeof entry !== "string" && entry.kind === "select") {
         const sel = document.createElement("select");
@@ -696,12 +734,24 @@ function mountToolbar(host, editor, options = {}) {
       if (typeof entry !== "string" && entry.kind === "button") {
         const btn2 = document.createElement("button");
         btn2.type = "button";
-        btn2.className = "bb-toolbar-btn";
+        btn2.className = "bb-toolbar-btn" + (entry.accent ? " bb-btn-accent" : "");
         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;
+        if (entry.text) {
+          const span = document.createElement("span");
+          span.textContent = entry.text;
+          btn2.appendChild(span);
+        }
+        if (entry.caret) {
+          const caret = document.createElement("span");
+          caret.className = "bb-btn-caret";
+          caret.setAttribute("aria-hidden", "true");
+          caret.textContent = "\u25BE";
+          btn2.appendChild(caret);
+        }
         btn2.addEventListener("mousedown", (e) => e.preventDefault());
         btn2.addEventListener("click", () => entry.onClick(btn2));
         groupEl.appendChild(btn2);
@@ -862,19 +912,52 @@ function mountToolbar(host, editor, options = {}) {
     pop.hidden = !pop.hidden;
     moreBtn.setAttribute("aria-expanded", String(!pop.hidden));
   });
-  const fits = () => root.scrollWidth <= root.clientWidth + 1;
+  let gapPx = -1;
+  let moreW = -1;
+  const anchorIn = (container, idx) => {
+    for (let j = idx + 1; j < groupList.length; j++)
+      if (groupList[j].el.parentElement === container) return groupList[j].el;
+    return container === root ? moreBtn : null;
+  };
   const layout = () => {
-    while (pop.firstChild) root.insertBefore(pop.firstChild, moreBtn);
-    moreBtn.style.display = "none";
-    closePop();
-    wrap.querySelectorAll(".bb-split-pop").forEach((p) => p.hidden = true);
-    if (fits()) return;
-    moreBtn.style.display = "";
-    const groupEls = Array.from(root.children).filter(
-      (el5) => el5.classList.contains("bb-toolbar-group")
-    );
-    for (let i = groupEls.length - 1; i >= 0 && !fits(); i--) {
-      pop.insertBefore(groupEls[i], pop.firstChild);
+    if (gapPx < 0)
+      gapPx = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+    if (moreW < 0) {
+      moreBtn.style.visibility = "hidden";
+      const prev = moreBtn.style.display;
+      moreBtn.style.display = "";
+      moreW = moreBtn.offsetWidth;
+      moreBtn.style.display = prev;
+      moreBtn.style.visibility = "";
+    }
+    const avail = root.clientWidth;
+    const candidates = groupList.map((g2, idx) => {
+      const w = g2.el.offsetWidth;
+      if (w > 0) g2.lastWidth = w;
+      return {
+        idx,
+        width: g2.lastWidth,
+        sticky: g2.sticky,
+        hidden: g2.el.hidden
+      };
+    });
+    const folded = foldPlan(candidates, avail, moreW, gapPx);
+    let moved = false;
+    groupList.forEach((g2, idx) => {
+      const inPop = g2.el.parentElement === pop;
+      const should = folded.has(idx);
+      if (inPop === should) return;
+      moved = true;
+      if (should) pop.insertBefore(g2.el, anchorIn(pop, idx));
+      else root.insertBefore(g2.el, anchorIn(root, idx));
+    });
+    const showMore = folded.size > 0;
+    if (moreBtn.style.display !== "none" !== showMore)
+      moreBtn.style.display = showMore ? "" : "none";
+    if (!showMore) closePop();
+    if (moved) {
+      closePop();
+      wrap.querySelectorAll(".bb-split-pop").forEach((p) => p.hidden = true);
     }
   };
   let ro = null;
@@ -886,6 +969,15 @@ function mountToolbar(host, editor, options = {}) {
   layout();
   const refresh = (state) => {
     latest = state;
+    let visibilityChanged = false;
+    for (const g2 of conditionalGroups) {
+      const show = g2.visible(state);
+      if (show === g2.el.hidden) {
+        g2.el.hidden = !show;
+        visibilityChanged = true;
+      }
+    }
+    if (visibilityChanged) layout();
     for (const { name, el: el5 } of buttons) {
       const cmd = editor.commands.get(name);
       if (!cmd) continue;
@@ -895,7 +987,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 +997,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 +1241,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 +1355,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 +1686,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 +1906,8 @@ function openCellProperties({
     label: "Fill",
     clearLabel: "No fill",
     value: () => background,
-    onPick: (c) => {
-      background = c;
+    onPick: (c2) => {
+      background = c2;
     }
   });
   fill.append(fillBtn.el);
@@ -1868,8 +1960,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 +2025,373 @@ 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-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;box-shadow:0 8px 28px rgba(0,0,0,.14);user-select:none;overflow:hidden}
+.bb-eqp-tabs{display:flex;padding:8px 8px 0}
+.bb-eqp-body{padding:8px}
+.bb-eqp-set{width:100%;height:30px;margin-bottom:7px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,#fff);color:inherit;font:inherit;font-size:13px;padding:0 8px}
+.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}
+`;
+function equationPanel(options) {
+  injectStyle("bb-ui-tabs", TABS_CSS);
+  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 strip = document.createElement("div");
+  strip.className = "bb-eqp-tabs";
+  const tabs = document.createElement("div");
+  tabs.className = "bb-tabs";
+  tabs.setAttribute("role", "tablist");
+  strip.append(tabs);
+  const body = document.createElement("div");
+  body.className = "bb-eqp-body";
+  let current3 = "symbols";
+  const tabEls = {};
+  const mkTab = (id, label) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-tab";
+    b.textContent = label;
+    b.setAttribute("role", "tab");
+    b.addEventListener("click", () => {
+      current3 = id;
+      render();
+    });
+    tabEls[id] = b;
+    tabs.append(b);
+  };
+  mkTab("symbols", "Symbols");
+  mkTab("structures", "Structures");
+  root.append(strip, body);
+  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();
+  }
+  render();
+  return {
+    el: root,
+    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 +2399,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 +2411,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);
     }
@@ -1978,6 +2435,178 @@ function tableGridPicker(options) {
   return root;
 }
 
+// packages/ui/src/lib/table-style-panel.ts
+import {
+  cellStyleLayer
+} from "@shadow-garden/bapbong-contracts";
+var GATES = [
+  { key: "firstRow", label: "Header row" },
+  { key: "lastRow", label: "Total row" },
+  { key: "hBand", label: "Banded rows" },
+  { key: "firstCol", label: "First column" },
+  { key: "lastCol", label: "Last column" },
+  { key: "vBand", label: "Banded columns" }
+];
+var THUMB_ROWS = 4;
+var THUMB_COLS = 5;
+var STYLE12 = `
+.bb-tsp{display:flex;gap:16px;width:432px;max-width:100%;color:var(--bb-ui-fg,#2c2c2a)}
+.bb-tsp *{box-sizing:border-box}
+.bb-tsp-opts{flex:0 0 128px;display:flex;flex-direction:column;gap:2px}
+.bb-tsp-lbl{font-size:12px;opacity:.7;margin-bottom:4px}
+.bb-tsp-chk{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 0;cursor:pointer}
+.bb-tsp-chk input{margin:0}
+.bb-tsp-chk.is-disabled{opacity:.4;cursor:default}
+.bb-tsp-sep{height:1px;margin:6px 0;background:var(--bb-ui-border,#e3e3e0)}
+.bb-tsp-main{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
+.bb-tsp-gallery{display:flex;flex-wrap:wrap;gap:6px}
+.bb-tsp-tile{padding:3px;border:1px 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));cursor:pointer;line-height:0}
+.bb-tsp-tile:hover{border-color:var(--bb-ui-fg,#2c2c2a)}
+.bb-tsp-tile.is-selected{padding:2px;border:2px solid var(--bb-ui-active-fg,#0c447c)}
+.bb-tsp-thumb{display:grid;grid-template-columns:repeat(${THUMB_COLS},12px);grid-auto-rows:8px;gap:0}
+.bb-tsp-none{display:flex;align-items:center;justify-content:center;width:60px;height:32px;font-size:11px;opacity:.7;line-height:1.1}
+.bb-tsp-empty{font-size:13px;opacity:.65;padding:8px 0}
+`;
+function edgeCss(side) {
+  if (!side) return "none";
+  return `1px ${side.style === "double" ? "double" : "solid"} ${side.color}`;
+}
+function thumbnail(style, look) {
+  const grid = document.createElement("div");
+  grid.className = "bb-tsp-thumb";
+  const t = style.table.borders ?? {};
+  for (let r = 0; r < THUMB_ROWS; r++) {
+    for (let c2 = 0; c2 < THUMB_COLS; c2++) {
+      const layer = cellStyleLayer(style, look, {
+        row: r,
+        rowCount: THUMB_ROWS,
+        col: c2,
+        colspan: 1,
+        colCount: THUMB_COLS,
+        header: false
+      });
+      const cell = document.createElement("div");
+      const b = layer.borders ?? {};
+      cell.style.borderTop = edgeCss(b.top ?? (r === 0 ? t.top : t.insideH));
+      cell.style.borderBottom = edgeCss(
+        b.bottom ?? (r === THUMB_ROWS - 1 ? t.bottom : void 0)
+      );
+      cell.style.borderLeft = edgeCss(b.left ?? (c2 === 0 ? t.left : t.insideV));
+      cell.style.borderRight = edgeCss(
+        b.right ?? (c2 === THUMB_COLS - 1 ? t.right : void 0)
+      );
+      if (layer.background) cell.style.background = layer.background;
+      grid.appendChild(cell);
+    }
+  }
+  return grid;
+}
+function createTableStylePanel(options) {
+  injectStyle("bb-table-style-panel", STYLE12);
+  const root = document.createElement("div");
+  root.className = "bb-tsp";
+  const opts = document.createElement("div");
+  opts.className = "bb-tsp-opts";
+  const optsLbl = document.createElement("div");
+  optsLbl.className = "bb-tsp-lbl";
+  optsLbl.textContent = "Style options";
+  opts.appendChild(optsLbl);
+  const checks = /* @__PURE__ */ new Map();
+  GATES.forEach((g2, i) => {
+    if (i === 3) {
+      const sep = document.createElement("div");
+      sep.className = "bb-tsp-sep";
+      opts.appendChild(sep);
+    }
+    const label = document.createElement("label");
+    label.className = "bb-tsp-chk";
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.addEventListener(
+      "change",
+      () => options.onLook({ [g2.key]: input.checked })
+    );
+    label.append(input, document.createTextNode(g2.label));
+    opts.appendChild(label);
+    checks.set(g2.key, input);
+  });
+  const main = document.createElement("div");
+  main.className = "bb-tsp-main";
+  const mainLbl = document.createElement("div");
+  mainLbl.className = "bb-tsp-lbl";
+  mainLbl.textContent = "Table styles";
+  const gallery = document.createElement("div");
+  gallery.className = "bb-tsp-gallery";
+  main.append(mainLbl, gallery);
+  root.append(opts, main);
+  const dialog = new Dialog({
+    title: "Table style",
+    modal: false,
+    anchor: options.anchor
+  });
+  dialog.setContent(root);
+  let drawnKey = "";
+  const draw = () => {
+    const current3 = options.current();
+    const items = options.styles();
+    const key = JSON.stringify([current3, items.map((i) => i.id)]);
+    if (key === drawnKey) return;
+    drawnKey = key;
+    const look = current3?.look ?? null;
+    for (const [gate, input] of checks) {
+      input.checked = look?.[gate] ?? false;
+      input.disabled = !current3;
+      input.closest("label")?.classList.toggle("is-disabled", !current3);
+    }
+    gallery.replaceChildren();
+    if (!current3) {
+      const empty = document.createElement("div");
+      empty.className = "bb-tsp-empty";
+      empty.textContent = "Click inside a table to style it.";
+      gallery.appendChild(empty);
+      return;
+    }
+    const noneTile = document.createElement("button");
+    noneTile.type = "button";
+    noneTile.className = "bb-tsp-tile" + (current3.styleId === null ? " is-selected" : "");
+    noneTile.title = "None";
+    const noneInner = document.createElement("span");
+    noneInner.className = "bb-tsp-none";
+    noneInner.textContent = "None";
+    noneTile.appendChild(noneInner);
+    noneTile.addEventListener("click", () => options.onPick(null));
+    gallery.appendChild(noneTile);
+    for (const item of items) {
+      const tile = document.createElement("button");
+      tile.type = "button";
+      tile.className = "bb-tsp-tile" + (current3.styleId === item.id ? " is-selected" : "");
+      tile.title = item.name;
+      tile.appendChild(thumbnail(item.style, current3.look));
+      tile.addEventListener("click", () => options.onPick(item));
+      gallery.appendChild(tile);
+    }
+  };
+  return {
+    open() {
+      drawnKey = "";
+      draw();
+      dialog.open();
+    },
+    close() {
+      dialog.close();
+    },
+    refresh() {
+      if (dialog.isOpen) draw();
+    },
+    destroy() {
+      dialog.destroy();
+    },
+    get isOpen() {
+      return dialog.isOpen;
+    }
+  };
+}
+
 // packages/ui/src/lib/page-setup.ts
 var PX_PER_CM = 96 / 2.54;
 var pxToCm = (px) => px / PX_PER_CM;
@@ -1985,7 +2614,7 @@ var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
 function fmtCm(cm) {
   return `${Number(cm.toFixed(3))} cm`;
 }
-var STYLE10 = `
+var STYLE13 = `
 .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 +2644,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 +2740,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", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2140,7 +2769,7 @@ function pageSizePicker(options) {
   return root;
 }
 function orientationPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2163,7 +2792,7 @@ function orientationPicker(options) {
   return root;
 }
 function marginPresetPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2238,7 +2867,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", STYLE13);
   const dialog = new Dialog({ title: "Paper size", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2265,7 +2894,7 @@ function openPageSizeDialog(options) {
   width.input.select();
 }
 function openMarginsDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const dialog = new Dialog({ title: "Margins", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2322,7 +2951,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", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2423,7 +3052,7 @@ function pageNumberPicker(options) {
   return root;
 }
 function sectionPaperPanel(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2492,7 +3121,7 @@ function sectionPaperPanel(options) {
 }
 
 // packages/ui/src/lib/section-chip.ts
-var STYLE11 = `
+var STYLE14 = `
 .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 +3134,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", STYLE14);
   const el5 = document.createElement("div");
   el5.className = "bb-secchip";
   const title = document.createElement("span");
@@ -2562,17 +3191,13 @@ 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 STYLE15 = `
 .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
    active tab's background to equal the pane's, and this dialog floats on
    frosted glass whose colour the widget cannot know. Same shape cell-properties
    already uses, so the two dialogs read as one product. */
-.bb-fd-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-fd-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-fd-tab:last-child{border-right:0}
-.bb-fd-tab[aria-selected="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c);opacity:1}
 .bb-fd-pane{display:flex;flex-direction:column;gap:13px}
 /* A class-level display beats the UA's [hidden]{display:none}; without this
    both tabs render at once. */
@@ -2644,13 +3269,14 @@ function openFontDialog({
   sizes,
   onApply
 }) {
-  injectStyle("bb-font-dialog", STYLE12);
+  injectStyle("bb-ui-tabs", TABS_CSS);
+  injectStyle("bb-font-dialog", STYLE15);
   const dialog = new Dialog({ title: "Font", modal: true });
   const root = el("div", "bb-fd");
-  const tabs = el("div", "bb-fd-tabs");
+  const tabs = el("div", "bb-tabs");
   tabs.setAttribute("role", "tablist");
-  const fontTab = el("button", "bb-fd-tab", "Font");
-  const advTab = el("button", "bb-fd-tab", "Advanced");
+  const fontTab = el("button", "bb-tab", "Font");
+  const advTab = el("button", "bb-tab", "Advanced");
   for (const t of [fontTab, advTab]) {
     t.type = "button";
     t.setAttribute("role", "tab");
@@ -2708,8 +3334,8 @@ function openFontDialog({
     label: "Text color",
     clearLabel: "Automatic",
     value: () => color,
-    onPick: (c) => {
-      color = c;
+    onPick: (c2) => {
+      color = c2;
       paint();
     }
   });
@@ -2718,8 +3344,8 @@ function openFontDialog({
     label: "Highlight",
     clearLabel: "No highlight",
     value: () => highlight2,
-    onPick: (c) => {
-      highlight2 = c;
+    onPick: (c2) => {
+      highlight2 = c2;
       paint();
     }
   });
@@ -2844,8 +3470,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 +3892,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 +3912,7 @@ function searchSymbols(query) {
 }
 
 // packages/ui/src/lib/symbol-dialog.ts
-var STYLE13 = `
+var STYLE16 = `
 .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 +3973,7 @@ function glyphFor(char) {
   return char;
 }
 function createSymbolDialog(options) {
-  injectStyle("bb-symbol-dialog", STYLE13);
+  injectStyle("bb-symbol-dialog", STYLE16);
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let selected = null;
   const root = el2("div", "bb-sd");
@@ -3536,9 +4162,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 +4208,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 +4251,7 @@ function createSymbolDialog(options) {
 }
 
 // packages/ui/src/lib/symbol-popover.ts
-var STYLE14 = `
+var STYLE17 = `
 .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 +4284,7 @@ function el3(tag, cls, text) {
   return n;
 }
 function openSymbolPopover(options) {
-  injectStyle("bb-ui-symbol-popover", STYLE14);
+  injectStyle("bb-ui-symbol-popover", STYLE17);
   const { anchor } = options;
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let groupId = SYMBOL_GROUPS[0].id;
@@ -3689,16 +4315,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 +4395,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 +4405,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 +4450,7 @@ import {
   formatKey,
   keybindingRows
 } from "@shadow-garden/bapbong-contracts";
-var STYLE15 = `
+var STYLE18 = `
 .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 +4508,7 @@ function highlight(text, q) {
   return out;
 }
 function openKeyboardShortcutsDialog(options) {
-  injectStyle("bb-ui-shortcuts-dialog", STYLE15);
+  injectStyle("bb-ui-shortcuts-dialog", STYLE18);
   const dialog = new Dialog({
     title: options.title ?? "Keyboard shortcuts",
     modal: true,
@@ -3909,19 +4535,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 +4567,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 +4624,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 +4634,7 @@ function openKeyboardShortcutsDialog(options) {
 }
 
 // packages/ui/src/lib/scrollbars.ts
-var STYLE16 = `
+var STYLE19 = `
 @property --bb-scroll-thumb-now {
   syntax: '<color>';
   /* MUST inherit: the thumb pseudo-element never matches .bb-scrolling
@@ -4040,7 +4666,7 @@ var STYLE16 = `
 var installed = null;
 function installScrollbars(root = document) {
   if (installed) return installed;
-  injectStyle("bb-ui-scrollbars", STYLE16);
+  injectStyle("bb-ui-scrollbars", STYLE19);
   const quiet = /* @__PURE__ */ new WeakMap();
   const onScroll = (ev) => {
     const el5 = ev.target instanceof HTMLElement ? ev.target : root.documentElement;
@@ -4059,6 +4685,7 @@ function installScrollbars(root = document) {
   return installed;
 }
 export {
+  BUILT_IN_EQUATIONS,
   COLOR_PALETTE,
   Dialog,
   RECENT_MAX,
@@ -4071,8 +4698,13 @@ export {
   createFindDialog,
   createSectionChip,
   createSymbolDialog,
+  createTableStylePanel,
   defaultMenus,
   defaultToolbarGroups,
+  equationGallery,
+  equationPanel,
+  equationPreviewSvg,
+  foldPlan,
   installScrollbars,
   marginPresetPicker,
   mountMenubar,