@shadow-garden/bapbong-ui 0.16.0 → 0.18.0

package/dist/index.cjs

@@ -33,11 +33,13 @@ __export(index_exports, {
   createFindDialog: () => createFindDialog,
   createSectionChip: () => createSectionChip,
   createSymbolDialog: () => createSymbolDialog,
+  createTableStylePanel: () => createTableStylePanel,
   defaultMenus: () => defaultMenus,
   defaultToolbarGroups: () => defaultToolbarGroups,
   equationGallery: () => equationGallery,
   equationPanel: () => equationPanel,
   equationPreviewSvg: () => equationPreviewSvg,
+  foldPlan: () => foldPlan,
   installScrollbars: () => installScrollbars,
   marginPresetPicker: () => marginPresetPicker,
   mountMenubar: () => mountMenubar,
@@ -78,6 +80,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");
@@ -687,6 +696,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)}
@@ -695,6 +705,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}
@@ -719,6 +732,25 @@ function defaultToolbarGroups(commands) {
   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 ?? {} };
@@ -729,17 +761,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");
@@ -765,12 +805,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);
@@ -931,19 +983,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;
@@ -955,6 +1040,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;
@@ -2222,17 +2316,10 @@ for (const [name, ch] of Object.entries(import_bapbong_contracts3.MATH_AUTOCORRE
   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{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.is-collapsed .bb-eqp-body{display:none}
-.bb-eqp-set{width:100%;height:30px;margin-bottom:7px;font:inherit;font-size:13px}
+.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)}
@@ -2247,32 +2334,32 @@ var STYLE10 = `
 .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-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-eqp-tabs";
+  tabs.className = "bb-tabs";
   tabs.setAttribute("role", "tablist");
+  strip.append(tabs);
   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.className = "bb-tab";
     b.textContent = label;
     b.setAttribute("role", "tab");
     b.addEventListener("click", () => {
       current3 = id;
-      if (collapsed) setCollapsed(false);
       render();
     });
     tabEls[id] = b;
@@ -2280,22 +2367,7 @@ function equationPanel(options) {
   };
   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));
-  }
+  root.append(strip, body);
   function symbolsBody() {
     const set = document.createElement("select");
     set.className = "bb-eqp-set";
@@ -2376,14 +2448,9 @@ function equationPanel(options) {
     if (current3 === "symbols") symbolsBody();
     else structuresBody();
   }
-  setCollapsed(false);
   render();
   return {
     el: root,
-    setCollapsed,
-    get collapsed() {
-      return collapsed;
-    },
     destroy() {
       root.remove();
     }
@@ -2435,6 +2502,176 @@ function tableGridPicker(options) {
   return root;
 }
 
+// packages/ui/src/lib/table-style-panel.ts
+var import_bapbong_contracts4 = require("@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 = (0, import_bapbong_contracts4.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;
@@ -2442,7 +2679,7 @@ var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
 function fmtCm(cm) {
   return `${Number(cm.toFixed(3))} cm`;
 }
-var STYLE12 = `
+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}
@@ -2568,7 +2805,7 @@ function customRow(icon, title, description, onPick) {
   return presetRow(icon, title, captionLine(description), false, onPick);
 }
 function pageSizePicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2597,7 +2834,7 @@ function pageSizePicker(options) {
   return root;
 }
 function orientationPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2620,7 +2857,7 @@ function orientationPicker(options) {
   return root;
 }
 function marginPresetPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2695,7 +2932,7 @@ function readPx(input, fallbackPx) {
   return Number.isFinite(n) && n > 0 ? cmToPx(n) : fallbackPx;
 }
 function openPageSizeDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const dialog = new Dialog({ title: "Paper size", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2722,7 +2959,7 @@ function openPageSizeDialog(options) {
   width.input.select();
 }
 function openMarginsDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const dialog = new Dialog({ title: "Margins", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -2779,7 +3016,7 @@ var PGNUM_FORMATS = [
   ["upperLetter", "A, B, C, D\u2026", "A"]
 ];
 function pageNumberPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2880,7 +3117,7 @@ function pageNumberPicker(options) {
   return root;
 }
 function sectionPaperPanel(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE12);
+  injectStyle("bb-ui-pagesetup-styles", STYLE13);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -2949,7 +3186,7 @@ function sectionPaperPanel(options) {
 }
 
 // packages/ui/src/lib/section-chip.ts
-var STYLE13 = `
+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}
@@ -2962,7 +3199,7 @@ var STYLE13 = `
 .bb-secchip-x:hover{background:var(--bb-ui-hover,#f1efe8);opacity:1}
 `;
 function createSectionChip(options) {
-  injectStyle("bb-ui-section-chip-styles", STYLE13);
+  injectStyle("bb-ui-section-chip-styles", STYLE14);
   const el5 = document.createElement("div");
   el5.className = "bb-secchip";
   const title = document.createElement("span");
@@ -3019,17 +3256,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 STYLE14 = `
+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. */
@@ -3101,13 +3334,14 @@ function openFontDialog({
   sizes,
   onApply
 }) {
-  injectStyle("bb-font-dialog", STYLE14);
+  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");
@@ -3342,7 +3576,7 @@ function openFontDialog({
 }
 
 // packages/ui/src/lib/symbol-sets.ts
-var import_bapbong_contracts4 = require("@shadow-garden/bapbong-contracts");
+var import_bapbong_contracts5 = require("@shadow-garden/bapbong-contracts");
 var g = (id, label, short, pairs) => ({
   id,
   label,
@@ -3678,7 +3912,7 @@ var SYMBOL_GROUPS = [
   ])
 ];
 function autoCorrectHint(char) {
-  return import_bapbong_contracts4.AUTOCORRECT_RULES.find((r) => r.to === char)?.seq ?? "";
+  return import_bapbong_contracts5.AUTOCORRECT_RULES.find((r) => r.to === char)?.seq ?? "";
 }
 var SPECIAL_CHARACTERS = [
   { char: "\u2014", name: "Em dash", hint: "" },
@@ -3743,7 +3977,7 @@ function searchSymbols(query) {
 }
 
 // packages/ui/src/lib/symbol-dialog.ts
-var STYLE15 = `
+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}
@@ -3804,7 +4038,7 @@ function glyphFor(char) {
   return char;
 }
 function createSymbolDialog(options) {
-  injectStyle("bb-symbol-dialog", STYLE15);
+  injectStyle("bb-symbol-dialog", STYLE16);
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let selected = null;
   const root = el2("div", "bb-sd");
@@ -4082,7 +4316,7 @@ function createSymbolDialog(options) {
 }
 
 // packages/ui/src/lib/symbol-popover.ts
-var STYLE16 = `
+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}
@@ -4115,7 +4349,7 @@ function el3(tag, cls, text) {
   return n;
 }
 function openSymbolPopover(options) {
-  injectStyle("bb-ui-symbol-popover", STYLE16);
+  injectStyle("bb-ui-symbol-popover", STYLE17);
   const { anchor } = options;
   let recent = [...options.recent ?? []].slice(0, RECENT_MAX);
   let groupId = SYMBOL_GROUPS[0].id;
@@ -4276,8 +4510,8 @@ function openSymbolPopover(options) {
 }
 
 // packages/ui/src/lib/shortcuts-dialog.ts
-var import_bapbong_contracts5 = require("@shadow-garden/bapbong-contracts");
-var STYLE17 = `
+var import_bapbong_contracts6 = require("@shadow-garden/bapbong-contracts");
+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}
@@ -4335,7 +4569,7 @@ function highlight(text, q) {
   return out;
 }
 function openKeyboardShortcutsDialog(options) {
-  injectStyle("bb-ui-shortcuts-dialog", STYLE17);
+  injectStyle("bb-ui-shortcuts-dialog", STYLE18);
   const dialog = new Dialog({
     title: options.title ?? "Keyboard shortcuts",
     modal: true,
@@ -4394,7 +4628,7 @@ function openKeyboardShortcutsDialog(options) {
     const rows = [];
     for (const src of options.sources)
       rows.push(
-        ...(0, import_bapbong_contracts5.keybindingRows)(src.keybindings, (c2) => src.commands.get(c2)?.title)
+        ...(0, import_bapbong_contracts6.keybindingRows)(src.keybindings, (c2) => src.commands.get(c2)?.title)
       );
     return rows;
   };
@@ -4402,13 +4636,13 @@ function openKeyboardShortcutsDialog(options) {
     const td = el4("td");
     keys.forEach((k, i) => {
       if (i > 0) td.append(el4("span", "or", "or"));
-      for (const part of (0, import_bapbong_contracts5.formatKey)(k, IS_MAC))
+      for (const part of (0, import_bapbong_contracts6.formatKey)(k, IS_MAC))
         td.append(el4("kbd", void 0, part));
     });
     return td;
   };
   const sortRows = (rows) => {
-    const val = (r) => sortKey === "title" ? r.title : sortKey === "keys" ? r.keys.map((k) => (0, import_bapbong_contracts5.formatKey)(k, IS_MAC).join("")).join(" ") : sortKey === "when" ? r.when ?? "" : r.source;
+    const val = (r) => sortKey === "title" ? r.title : sortKey === "keys" ? r.keys.map((k) => (0, import_bapbong_contracts6.formatKey)(k, IS_MAC).join("")).join(" ") : sortKey === "when" ? r.when ?? "" : r.source;
     const sorted = [...rows].sort(
       (a, b) => val(a).localeCompare(val(b), void 0, { sensitivity: "base" })
     );
@@ -4417,7 +4651,7 @@ function openKeyboardShortcutsDialog(options) {
   const render = () => {
     const q = search.value.trim().toLowerCase();
     const rows = allRows();
-    const shown = sortRows((0, import_bapbong_contracts5.filterKeybindingRows)(rows, q, IS_MAC));
+    const shown = sortRows((0, import_bapbong_contracts6.filterKeybindingRows)(rows, q, IS_MAC));
     for (const [key, th] of ths) {
       if (key === sortKey)
         th.setAttribute("aria-sort", sortAsc ? "ascending" : "descending");
@@ -4461,7 +4695,7 @@ function openKeyboardShortcutsDialog(options) {
 }
 
 // packages/ui/src/lib/scrollbars.ts
-var STYLE18 = `
+var STYLE19 = `
 @property --bb-scroll-thumb-now {
   syntax: '<color>';
   /* MUST inherit: the thumb pseudo-element never matches .bb-scrolling
@@ -4493,7 +4727,7 @@ var STYLE18 = `
 var installed = null;
 function installScrollbars(root = document) {
   if (installed) return installed;
-  injectStyle("bb-ui-scrollbars", STYLE18);
+  injectStyle("bb-ui-scrollbars", STYLE19);
   const quiet = /* @__PURE__ */ new WeakMap();
   const onScroll = (ev) => {
     const el5 = ev.target instanceof HTMLElement ? ev.target : root.documentElement;
@@ -4526,11 +4760,13 @@ function installScrollbars(root = document) {
   createFindDialog,
   createSectionChip,
   createSymbolDialog,
+  createTableStylePanel,
   defaultMenus,
   defaultToolbarGroups,
   equationGallery,
   equationPanel,
   equationPreviewSvg,
+  foldPlan,
   installScrollbars,
   marginPresetPicker,
   mountMenubar,