@shadow-garden/bapbong-ui 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,10 +1,24 @@
 // packages/ui/src/lib/internal.ts
 function injectStyle(id, css) {
   if (document.getElementById(id)) return;
-  const el = document.createElement("style");
-  el.id = id;
-  el.textContent = css;
-  document.head.appendChild(el);
+  const el2 = document.createElement("style");
+  el2.id = id;
+  el2.textContent = css;
+  document.head.appendChild(el2);
+}
+function placeFloating(el2, anchor) {
+  const r = el2.getBoundingClientRect();
+  const pad = 6;
+  const gap = 6;
+  const x = Math.max(
+    pad,
+    Math.min(anchor.x, window.innerWidth - r.width - pad)
+  );
+  const below = anchor.y + anchor.height + gap;
+  const above = anchor.y - gap - r.height;
+  const y = below + r.height <= window.innerHeight - pad || above < pad ? Math.min(below, window.innerHeight - r.height - pad) : above;
+  el2.style.left = `${x}px`;
+  el2.style.top = `${y}px`;
 }
 
 // packages/ui/src/lib/dialog.ts
@@ -20,9 +34,9 @@ var STYLE = `
 .bb-dialog-close:hover{opacity:1;background:var(--bb-ui-hover,#f1efe8)}
 .bb-dialog-body{padding:12px}
 .bb-prompt{display:flex;flex-direction:column;gap:10px;min-width:280px}
-.bb-prompt-input{height:30px;padding:0 9px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;font:inherit;font-size:13px}
+.bb-prompt-input{height:30px;padding:0 9px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;font:inherit;font-size:13px}
 .bb-prompt-actions{display:flex;justify-content:flex-end;gap:8px}
-.bb-prompt-btn{height:30px;padding:0 14px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-prompt-btn{height:30px;padding:0 14px;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));color:inherit;font:inherit;font-size:13px;cursor:pointer}
 .bb-prompt-btn[data-primary]{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#b5d4f4);color:var(--bb-ui-active-fg,#0c447c)}
 .bb-prompt-btn:hover{filter:brightness(.97)}
 `;
@@ -46,8 +60,8 @@ var Dialog = class {
     injectStyle("bb-ui-dialog-styles", STYLE);
     this.modal = options.modal ?? false;
     this.anchor = options.anchor;
-    const el = document.createElement("dialog");
-    el.className = `bb-dialog ${this.modal ? "bb-dialog-modal" : "bb-dialog-float"}` + (options.className ? ` ${options.className}` : "");
+    const el2 = document.createElement("dialog");
+    el2.className = `bb-dialog ${this.modal ? "bb-dialog-modal" : "bb-dialog-float"}` + (options.className ? ` ${options.className}` : "");
     const header = document.createElement("div");
     header.className = "bb-dialog-header";
     this.title = document.createElement("span");
@@ -62,18 +76,18 @@ var Dialog = class {
     header.append(this.title, close);
     this.body = document.createElement("div");
     this.body.className = "bb-dialog-body";
-    el.append(header, this.body);
-    document.body.appendChild(el);
-    el.addEventListener("close", () => {
+    el2.append(header, this.body);
+    document.body.appendChild(el2);
+    el2.addEventListener("close", () => {
       this.detachReposition();
       this.closeListeners.forEach((cb) => cb());
     });
     if (!this.modal) {
-      el.addEventListener("keydown", (e) => {
+      el2.addEventListener("keydown", (e) => {
         if (e.key === "Escape") this.close();
       });
     }
-    this.el = el;
+    this.el = el2;
   }
   attachReposition() {
     window.addEventListener("scroll", this.reposition, true);
@@ -158,6 +172,327 @@ function promptDialog(options) {
   });
 }
 
+// packages/ui/src/lib/color-picker.ts
+var COLOR_PALETTE = [
+  [
+    "#000000",
+    "#434343",
+    "#666666",
+    "#999999",
+    "#B7B7B7",
+    "#CCCCCC",
+    "#D9D9D9",
+    "#EFEFEF",
+    "#F3F3F3",
+    "#FFFFFF"
+  ],
+  [
+    "#980000",
+    "#FF0000",
+    "#FF9900",
+    "#FFFF00",
+    "#00FF00",
+    "#00FFFF",
+    "#4A86E8",
+    "#0000FF",
+    "#9900FF",
+    "#FF00FF"
+  ],
+  [
+    "#E6B8AF",
+    "#F4CCCC",
+    "#FCE5CD",
+    "#FFF2CC",
+    "#D9EAD3",
+    "#D0E0E3",
+    "#C9DAF8",
+    "#CFE2F3",
+    "#D9D2E9",
+    "#EAD1DC"
+  ],
+  [
+    "#DD7E6B",
+    "#EA9999",
+    "#F9CB9C",
+    "#FFE599",
+    "#B6D7A8",
+    "#A2C4C9",
+    "#A4C2F4",
+    "#9FC5E8",
+    "#B4A7D6",
+    "#D5A6BD"
+  ],
+  [
+    "#CC4125",
+    "#E06666",
+    "#F6B26B",
+    "#FFD966",
+    "#93C47D",
+    "#76A5AF",
+    "#6D9EEB",
+    "#6FA8DC",
+    "#8E7CC3",
+    "#C27BA0"
+  ],
+  [
+    "#A61C00",
+    "#CC0000",
+    "#E69138",
+    "#F1C232",
+    "#6AA84F",
+    "#45818E",
+    "#3C78D8",
+    "#3D85C6",
+    "#674EA7",
+    "#A64D79"
+  ],
+  [
+    "#85200C",
+    "#990000",
+    "#B45F06",
+    "#BF9000",
+    "#38761D",
+    "#134F5C",
+    "#1155CC",
+    "#0B5394",
+    "#351C75",
+    "#741B47"
+  ],
+  [
+    "#5B0F00",
+    "#660000",
+    "#783F04",
+    "#7F6000",
+    "#274E13",
+    "#0C343D",
+    "#1C4587",
+    "#073763",
+    "#20124D",
+    "#4C1130"
+  ]
+];
+var customColors = [];
+var MAX_CUSTOM = 8;
+function remember(color) {
+  const at = customColors.indexOf(color);
+  if (at !== -1) customColors.splice(at, 1);
+  customColors.unshift(color);
+  if (customColors.length > MAX_CUSTOM) customColors.length = MAX_CUSTOM;
+}
+var isHex = (v) => /^#[0-9a-fA-F]{6}$/.test(v);
+var STYLE2 = `
+.bb-cpk{position:fixed;margin:0;max-width:none;max-height:none;z-index:1300;padding:11px;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);box-sizing:border-box}
+.bb-cpk *{box-sizing:border-box}
+.bb-cpk-grid{display:grid;grid-template-columns:repeat(10,20px);gap:5px}
+.bb-cpk-sw{width:20px;height:20px;padding:0;border-radius:50%;border:1px solid rgba(128,128,128,.35);cursor:pointer}
+.bb-cpk-sw:focus-visible{outline:none}
+.bb-cpk-sw.on,.bb-cpk-sw:focus-visible{box-shadow:0 0 0 2px var(--bb-ui-menu-bg,#fff),0 0 0 4px var(--bb-ui-active-fg,#0c447c)}
+.bb-cpk-cap{font-size:11px;letter-spacing:.04em;opacity:.6;margin:13px 0 7px}
+.bb-cpk-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
+.bb-cpk-none{width:100%;display:flex;align-items:center;gap:8px;height:28px;padding:0 7px;margin-bottom:10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}
+.bb-cpk-none:hover,.bb-cpk-none:focus-visible{background:var(--bb-ui-hover,#f1efe8);outline:none}
+.bb-cpk-none-chip{width:18px;height:18px;border-radius:50%;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));display:flex;align-items:center;justify-content:center;font-size:12px;opacity:.6;flex:none}
+.bb-cpk-plus{width:20px;height:20px;padding:0;border-radius:50%;border:1px dashed var(--bb-ui-border,#d8d6cf);background:transparent;color:inherit;font:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:.75;position:relative;overflow:hidden}
+.bb-cpk-plus input{position:absolute;inset:0;opacity:0;cursor:pointer;border:0;padding:0}
+.bb-cpk-hex{height:26px;width:96px;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));color:inherit;font:inherit;font-size:12px;padding:0 7px;font-family:var(--bb-ui-mono,ui-monospace,monospace)}
+
+.bb-cpk-btn{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;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));color:inherit;font:inherit;font-size:13px;padding:0 7px;cursor:pointer}
+.bb-cpk-btn-chip{width:14px;height:14px;border-radius:50%;border:1px solid rgba(128,128,128,.4);flex:none}
+.bb-cpk-btn-chip.none{background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));display:flex;align-items:center;justify-content:center;font-size:10px;opacity:.6}
+.bb-cpk-btn-caret{opacity:.5;font-size:10px}
+/* Toolbar shape: a glyph with the colour as a bar beneath it. */
+.bb-cpk-btn.glyphed{flex-direction:column;gap:1px;min-width:30px;padding:0 6px;border-color:transparent;background:transparent}
+.bb-cpk-btn.glyphed:hover{background:var(--bb-ui-hover,#f1efe8)}
+.bb-cpk-btn-glyph{font-size:13px;line-height:1}
+.bb-cpk-btn-bar{width:16px;height:4px;border-radius:1px;border:0.5px solid rgba(128,128,128,.35)}
+.bb-cpk::backdrop{background:transparent}
+`;
+function openColorPicker({
+  anchor,
+  value,
+  clearLabel,
+  onPick
+}) {
+  injectStyle("bb-ui-colorpicker-styles", STYLE2);
+  const panel = document.createElement("dialog");
+  panel.className = "bb-cpk";
+  panel.setAttribute("aria-label", "Colour");
+  let closed = false;
+  const close = () => {
+    if (closed) return;
+    closed = true;
+    window.removeEventListener("scroll", close, true);
+    if (panel.open) panel.close();
+    panel.remove();
+    anchor.focus();
+  };
+  const pick = (c) => {
+    if (c && !COLOR_PALETTE.some((row) => row.includes(c))) remember(c);
+    onPick(c);
+    close();
+  };
+  if (clearLabel !== void 0) {
+    const none = document.createElement("button");
+    none.type = "button";
+    none.className = "bb-cpk-none";
+    const chip = document.createElement("span");
+    chip.className = "bb-cpk-none-chip";
+    chip.textContent = "\u29B8";
+    none.append(chip, document.createTextNode(clearLabel));
+    none.addEventListener("click", () => pick(null));
+    panel.append(none);
+  }
+  const grid = document.createElement("div");
+  grid.className = "bb-cpk-grid";
+  grid.setAttribute("role", "grid");
+  const cells = [];
+  COLOR_PALETTE.forEach((row, r2) => {
+    const rowCells = [];
+    row.forEach((color, c) => {
+      const sw = document.createElement("button");
+      sw.type = "button";
+      sw.className = "bb-cpk-sw";
+      sw.style.background = color;
+      sw.title = color;
+      sw.setAttribute("role", "gridcell");
+      sw.setAttribute("aria-label", color);
+      sw.tabIndex = -1;
+      if (color.toUpperCase() === value?.toUpperCase()) sw.classList.add("on");
+      sw.addEventListener("click", () => pick(color));
+      sw.addEventListener("keydown", (e) => onGridKey(e, r2, c));
+      grid.append(sw);
+      rowCells.push(sw);
+    });
+    cells.push(rowCells);
+  });
+  panel.append(grid);
+  function onGridKey(e, r2, c) {
+    const delta = {
+      ArrowRight: [0, 1],
+      ArrowLeft: [0, -1],
+      ArrowDown: [1, 0],
+      ArrowUp: [-1, 0]
+    };
+    const d = delta[e.key];
+    if (!d) return;
+    e.preventDefault();
+    const rows = cells.length;
+    const cols = cells[0].length;
+    const nr = Math.min(rows - 1, Math.max(0, r2 + d[0]));
+    const nc = Math.min(cols - 1, Math.max(0, c + d[1]));
+    cells[r2][c].tabIndex = -1;
+    const next = cells[nr][nc];
+    next.tabIndex = 0;
+    next.focus();
+  }
+  panel.append(
+    Object.assign(document.createElement("div"), {
+      className: "bb-cpk-cap",
+      textContent: "CUSTOM"
+    })
+  );
+  const customRow2 = document.createElement("div");
+  customRow2.className = "bb-cpk-row";
+  for (const c 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));
+    customRow2.append(sw);
+  }
+  const plus = document.createElement("button");
+  plus.type = "button";
+  plus.className = "bb-cpk-plus";
+  plus.title = "Custom colour";
+  plus.append(document.createTextNode("+"));
+  const native = document.createElement("input");
+  native.type = "color";
+  native.value = value && isHex(value) ? value : "#000000";
+  native.addEventListener("input", () => pick(native.value.toUpperCase()));
+  plus.append(native);
+  customRow2.append(plus);
+  const hex = document.createElement("input");
+  hex.type = "text";
+  hex.className = "bb-cpk-hex";
+  hex.placeholder = "#RRGGBB";
+  hex.spellcheck = false;
+  hex.value = value ?? "";
+  hex.addEventListener("keydown", (e) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    const v = hex.value.trim();
+    if (isHex(v)) pick(v.toUpperCase());
+  });
+  customRow2.append(hex);
+  panel.append(customRow2);
+  document.body.append(panel);
+  panel.showModal();
+  const r = anchor.getBoundingClientRect();
+  placeFloating(panel, { x: r.left, y: r.top, height: r.height });
+  panel.addEventListener("close", close);
+  panel.addEventListener("pointerdown", (e) => {
+    const b = panel.getBoundingClientRect();
+    const outside = e.clientX < b.left || e.clientX > b.right || e.clientY < b.top || e.clientY > b.bottom;
+    if (outside) close();
+  });
+  window.addEventListener("scroll", close, true);
+  const start = cells.flat().find((el2) => el2.classList.contains("on")) ?? cells[0][0];
+  start.tabIndex = 0;
+  start.focus();
+  return { close };
+}
+function colorButton(o) {
+  injectStyle("bb-ui-colorpicker-styles", STYLE2);
+  const el2 = document.createElement("button");
+  el2.type = "button";
+  el2.className = `bb-cpk-btn${o.glyph ? " glyphed" : ""}`;
+  el2.title = o.title;
+  el2.setAttribute("aria-label", o.title);
+  el2.setAttribute("aria-haspopup", "dialog");
+  let chip;
+  if (o.glyph) {
+    const g = document.createElement("span");
+    g.className = "bb-cpk-btn-glyph";
+    g.innerHTML = o.glyph;
+    chip = document.createElement("span");
+    chip.className = "bb-cpk-btn-bar";
+    el2.append(g, chip);
+  } else {
+    chip = document.createElement("span");
+    chip.className = "bb-cpk-btn-chip";
+    el2.append(chip);
+    if (o.label) el2.append(document.createTextNode(o.label));
+    const caret = document.createElement("span");
+    caret.className = "bb-cpk-btn-caret";
+    caret.textContent = "\u25BE";
+    el2.append(caret);
+  }
+  function sync() {
+    const v = o.value();
+    chip.style.background = v ?? "transparent";
+    chip.classList.toggle("none", !v && !o.glyph);
+    chip.textContent = !v && !o.glyph ? "\u29B8" : "";
+  }
+  el2.addEventListener("mousedown", (e) => e.preventDefault());
+  el2.addEventListener("click", () => {
+    openColorPicker({
+      anchor: el2,
+      value: o.value(),
+      clearLabel: o.clearLabel,
+      onPick: (c) => {
+        o.onPick(c);
+        sync();
+      }
+    });
+  });
+  sync();
+  return { el: el2, sync };
+}
+
 // packages/ui/src/lib/toolbar.ts
 var alignSvg = (spans) => `<svg width="15" height="15" viewBox="0 0 16 16" aria-hidden="true"><g stroke="currentColor" stroke-width="1.6" stroke-linecap="round">` + spans.map(
   ([x1, x2], i) => `<line x1="${x1}" y1="${4 + i * 4}" x2="${x2}" y2="${4 + i * 4}"/>`
@@ -228,9 +563,9 @@ var DEFAULT_ITEMS = {
     svg: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 4h8M6 8h8M6 12h8"/><text x="0.5" y="5.6" font-size="5.5" fill="currentColor" stroke="none">1</text><text x="0.5" y="9.6" font-size="5.5" fill="currentColor" stroke="none">2</text><text x="0.5" y="13.6" font-size="5.5" fill="currentColor" stroke="none">3</text></svg>'
   }
 };
-var STYLE2 = `
+var STYLE3 = `
 .bb-toolbar-wrap{position:relative}
-.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-bg,#fff);border-bottom:1px solid var(--bb-ui-border,#e3e3e0);box-sizing:border-box}
+.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+.bb-toolbar-group{padding-left:10px;border-left:1px solid var(--bb-ui-border,#e3e3e0)}
@@ -241,16 +576,8 @@ var STYLE2 = `
 .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-select{height:30px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font-family:inherit;font-size:13px;padding:0 6px;cursor:pointer}
+.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-toolbar-color{position:relative}
-.bb-toolbar-color .bb-color-glyph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;font-size:13px}
-.bb-toolbar-color .bb-color-bar{width:16px;height:3px;border-radius:1px;background:currentColor}
-.bb-color-pop{position:absolute;z-index:1200;display:grid;grid-template-columns:repeat(8,16px);gap:4px;padding: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:8px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
-.bb-color-pop[hidden]{display:none}
-.bb-color-swatch{width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.18);border-radius:3px;cursor:pointer}
-.bb-color-none{grid-column:1/-1;font:inherit;font-size:12px;padding:3px 0;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:5px;background:var(--bb-ui-bg,#fff);cursor:pointer}
-.bb-color-none: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}
 .bb-toolbar-split{display:flex;align-items:center;gap:0}
 .bb-toolbar-split .bb-toolbar-btn{min-width:26px;padding:0 5px}
@@ -258,7 +585,7 @@ var STYLE2 = `
 .bb-split-arrow svg{display:block}
 .bb-split-pop{position:absolute;z-index:1200;display:grid;grid-template-columns:repeat(3,auto);gap:8px;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);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)}
 .bb-split-pop[hidden]{display:none}
-.bb-split-card{display:flex;flex-direction:column;gap:6px;width:76px;padding:9px 8px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:6px;background:transparent;cursor:pointer;font-family:inherit}
+.bb-split-card{display:flex;flex-direction:column;gap:6px;width:76px;padding:9px 8px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#e3e3e0));border-radius:6px;background:transparent;cursor:pointer;font-family:inherit}
 .bb-split-card:hover{background:var(--bb-ui-hover,#f1efe8)}
 .bb-split-card.is-selected{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#b5d4f4)}
 .bb-split-row{display:flex;align-items:center;gap:4px}
@@ -274,7 +601,7 @@ function defaultToolbarGroups(commands) {
   return [rest, aligns].filter((g) => g.length > 0);
 }
 function mountToolbar(host, editor, options = {}) {
-  injectStyle("bb-ui-toolbar-styles", STYLE2);
+  injectStyle("bb-ui-toolbar-styles", STYLE3);
   const items = { ...DEFAULT_ITEMS, ...options.items ?? {} };
   const groups = options.groups ?? defaultToolbarGroups(editor.commands);
   const wrap = document.createElement("div");
@@ -317,77 +644,20 @@ function mountToolbar(host, editor, options = {}) {
         continue;
       }
       if (typeof entry !== "string" && entry.kind === "color") {
-        const colorWrap = document.createElement("div");
-        colorWrap.className = "bb-toolbar-color";
-        const btn2 = document.createElement("button");
-        btn2.type = "button";
-        btn2.className = "bb-toolbar-btn";
-        btn2.title = entry.title;
-        btn2.setAttribute("aria-label", entry.title);
-        const glyph = document.createElement("span");
-        glyph.className = "bb-color-glyph";
-        glyph.innerHTML = entry.glyph;
-        const bar = document.createElement("span");
-        bar.className = "bb-color-bar";
-        glyph.appendChild(bar);
-        btn2.appendChild(glyph);
-        const pop2 = document.createElement("div");
-        pop2.className = "bb-color-pop";
-        pop2.hidden = true;
-        const pick = (color) => {
-          entry.onSelect(color);
-          pop2.hidden = true;
-          editor.focus();
-        };
-        for (const c of entry.swatches) {
-          const sw = document.createElement("button");
-          sw.type = "button";
-          sw.className = "bb-color-swatch";
-          sw.style.background = c;
-          sw.title = c;
-          sw.addEventListener("mousedown", (e) => e.preventDefault());
-          sw.addEventListener("click", () => pick(c));
-          pop2.appendChild(sw);
-        }
-        if (entry.allowNone) {
-          const none = document.createElement("button");
-          none.type = "button";
-          none.className = "bb-color-none";
-          none.textContent = "None";
-          none.addEventListener("mousedown", (e) => e.preventDefault());
-          none.addEventListener("click", () => pick(null));
-          pop2.appendChild(none);
-        }
-        btn2.addEventListener("mousedown", (e) => e.preventDefault());
-        btn2.addEventListener("click", () => {
-          const open = pop2.hidden;
-          wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
-          pop2.hidden = !open;
-          if (!pop2.hidden) {
-            const wrapRect = wrap.getBoundingClientRect();
-            const btnRect = btn2.getBoundingClientRect();
-            pop2.style.top = `${btnRect.bottom - wrapRect.top + 4}px`;
-            const left = Math.max(
-              0,
-              Math.min(
-                btnRect.left - wrapRect.left,
-                wrap.clientWidth - pop2.offsetWidth - 4
-              )
-            );
-            pop2.style.left = `${left}px`;
-            const onDoc = (ev) => {
-              if (!colorWrap.contains(ev.target) && !pop2.contains(ev.target)) {
-                pop2.hidden = true;
-                document.removeEventListener("pointerdown", onDoc, true);
-              }
-            };
-            document.addEventListener("pointerdown", onDoc, true);
+        const ctl = colorButton({
+          title: entry.title,
+          glyph: entry.glyph,
+          clearLabel: entry.clearLabel,
+          // `latest`, not `editor.state`: the toolbar mounts before any
+          // document exists, and reading state then throws.
+          value: () => latest ? entry.value(latest) : null,
+          onPick: (color) => {
+            entry.onSelect(color);
+            editor.focus();
           }
         });
-        colorWrap.appendChild(btn2);
-        wrap.appendChild(pop2);
-        groupEl.appendChild(colorWrap);
-        colors.push({ spec: entry, bar });
+        groupEl.appendChild(ctl.el);
+        colors.push(ctl);
         continue;
       }
       if (typeof entry !== "string" && entry.kind === "split") {
@@ -449,7 +719,7 @@ function mountToolbar(host, editor, options = {}) {
         arrow.addEventListener("mousedown", (e) => e.preventDefault());
         arrow.addEventListener("click", () => {
           const open = pop2.hidden;
-          wrap.querySelectorAll(".bb-split-pop,.bb-color-pop").forEach((p) => p.hidden = true);
+          wrap.querySelectorAll(".bb-split-pop").forEach((p) => p.hidden = true);
           pop2.hidden = !open;
           if (!pop2.hidden) {
             const wrapRect = wrap.getBoundingClientRect();
@@ -529,11 +799,11 @@ function mountToolbar(host, editor, options = {}) {
     while (pop.firstChild) root.insertBefore(pop.firstChild, moreBtn);
     moreBtn.style.display = "none";
     closePop();
-    wrap.querySelectorAll(".bb-color-pop,.bb-split-pop").forEach((p) => p.hidden = true);
+    wrap.querySelectorAll(".bb-split-pop").forEach((p) => p.hidden = true);
     if (fits()) return;
     moreBtn.style.display = "";
     const groupEls = Array.from(root.children).filter(
-      (el) => el.classList.contains("bb-toolbar-group")
+      (el2) => el2.classList.contains("bb-toolbar-group")
     );
     for (let i = groupEls.length - 1; i >= 0 && !fits(); i--) {
       pop.insertBefore(groupEls[i], pop.firstChild);
@@ -548,17 +818,16 @@ function mountToolbar(host, editor, options = {}) {
   layout();
   const refresh = (state) => {
     latest = state;
-    for (const { name, el } of buttons) {
+    for (const { name, el: el2 } of buttons) {
       const cmd = editor.commands.get(name);
       if (!cmd) continue;
       const active = cmd.isActive?.(state) ?? false;
-      el.classList.toggle("is-active", active);
-      el.setAttribute("aria-pressed", String(active));
-      el.disabled = cmd.isEnabled ? !cmd.isEnabled(state) : false;
+      el2.classList.toggle("is-active", active);
+      el2.setAttribute("aria-pressed", String(active));
+      el2.disabled = cmd.isEnabled ? !cmd.isEnabled(state) : false;
     }
-    for (const { spec, el } of selects) el.value = spec.value(state);
-    for (const { spec, bar } of colors)
-      bar.style.background = spec.value(state) ?? "";
+    for (const { spec, el: el2 } of selects) el2.value = spec.value(state);
+    for (const c of colors) c.sync();
     for (const { spec, cards } of splits) {
       const selected = spec.value(state);
       for (const card of cards)
@@ -592,6 +861,8 @@ var DEFAULT_LABELS = {
   strike: "Strikethrough",
   superscript: "Superscript",
   subscript: "Subscript",
+  "small-caps": "Small caps",
+  "double-strike": "Double strikethrough",
   "align-left": "Align left",
   "align-center": "Center",
   "align-right": "Align right",
@@ -608,8 +879,8 @@ var DEFAULT_LABELS = {
   redo: "Redo",
   "page-break": "Page break"
 };
-var STYLE3 = `
-.bb-menubar{display:flex;gap:2px;align-items:center;padding:2px 6px;font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);color:var(--bb-ui-fg,#2c2c2a);background:var(--bb-ui-bg,#fff);border-bottom:1px solid var(--bb-ui-border,#e3e3e0);box-sizing:border-box}
+var STYLE4 = `
+.bb-menubar{display:flex;gap:2px;align-items:center;padding:2px 6px;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-menubar *{box-sizing:border-box}
 .bb-menubar-menu{position:relative}
 .bb-menubar-title{height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
@@ -646,7 +917,7 @@ function defaultMenus(commands) {
   return entries.length ? [{ label: "Format", entries }] : [];
 }
 function mountMenubar(host, editor, options = {}) {
-  injectStyle("bb-ui-menubar-styles", STYLE3);
+  injectStyle("bb-ui-menubar-styles", STYLE4);
   const labels = { ...DEFAULT_LABELS, ...options.labels ?? {} };
   const menus = options.menus ?? defaultMenus(editor.commands);
   const vertical = options.orientation === "vertical";
@@ -842,18 +1113,18 @@ var DEFAULT_LABELS2 = {
   replaceOne: "Replace",
   replaceAll: "Replace all"
 };
-var STYLE4 = `
+var STYLE5 = `
 .bb-find{display:flex;flex-direction:column;gap:8px;min-width:300px}
 .bb-find *{box-sizing:border-box}
 .bb-find-row{display:flex;gap:6px;align-items:center}
-.bb-find-input{flex:1 1 auto;height:30px;padding:0 9px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;font:inherit;font-size:13px;background:var(--bb-ui-bg,#fff);color:inherit}
+.bb-find-input{flex:1 1 auto;height:30px;padding:0 9px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;font:inherit;font-size:13px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit}
 .bb-find-count{min-width:44px;text-align:center;font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
-.bb-find-btn{height:30px;min-width:30px;padding:0 10px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-find-btn{height:30px;min-width:30px;padding:0 10px;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));color:inherit;font:inherit;font-size:13px;cursor:pointer}
 .bb-find-btn:hover:not(:disabled){background:var(--bb-ui-hover,#f1efe8)}
 .bb-find-btn:disabled{opacity:.4;cursor:default}
 `;
 function createFindDialog(handle, options = {}) {
-  injectStyle("bb-ui-find-styles", STYLE4);
+  injectStyle("bb-ui-find-styles", STYLE5);
   const find = typeof handle === "function" ? new Proxy({}, {
     get: (_t, prop) => handle()[prop]
   }) : handle;
@@ -954,7 +1225,7 @@ function createFindDialog(handle, options = {}) {
 }
 
 // packages/ui/src/lib/context-menu.ts
-var STYLE5 = `
+var STYLE6 = `
 .bb-ctx{position:fixed;z-index:1200;min-width:208px;padding:4px;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:8px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif)}
 .bb-ctx *{box-sizing:border-box}
 .bb-ctx-item{display:flex;align-items:center;gap:16px;width:100%;height:30px;padding:0 10px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;white-space:nowrap;cursor:pointer}
@@ -973,17 +1244,17 @@ function closeCurrent() {
   }
 }
 function showContextMenu(entries, at) {
-  injectStyle("bb-ui-contextmenu-styles", STYLE5);
+  injectStyle("bb-ui-contextmenu-styles", STYLE6);
   closeCurrent();
-  const el = document.createElement("div");
-  el.className = "bb-ctx";
-  el.setAttribute("role", "menu");
+  const el2 = document.createElement("div");
+  el2.className = "bb-ctx";
+  el2.setAttribute("role", "menu");
   for (const entry of entries) {
     if (entry === "separator") {
       const sep = document.createElement("div");
       sep.className = "bb-ctx-sep";
       sep.setAttribute("role", "separator");
-      el.appendChild(sep);
+      el2.appendChild(sep);
       continue;
     }
     const item = document.createElement("button");
@@ -1006,22 +1277,22 @@ function showContextMenu(entries, at) {
       closeCurrent();
       entry.run();
     });
-    el.appendChild(item);
+    el2.appendChild(item);
   }
-  document.body.appendChild(el);
-  const r = el.getBoundingClientRect();
+  document.body.appendChild(el2);
+  const r = el2.getBoundingClientRect();
   const pad = 4;
   const fitsX = (v) => v >= pad && v + r.width <= window.innerWidth - pad;
   const fitsY = (v) => v >= pad && v + r.height <= window.innerHeight - pad;
   const x = fitsX(at.x) ? at.x : fitsX(at.x - r.width) ? at.x - r.width : Math.max(pad, Math.min(at.x, window.innerWidth - r.width - pad));
   const y = fitsY(at.y) ? at.y : fitsY(at.y - r.height) ? at.y - r.height : Math.max(pad, Math.min(at.y, window.innerHeight - r.height - pad));
-  el.style.left = `${x}px`;
-  el.style.top = `${y}px`;
+  el2.style.left = `${x}px`;
+  el2.style.top = `${y}px`;
   const items = () => Array.from(
-    el.querySelectorAll(".bb-ctx-item:not(:disabled)")
+    el2.querySelectorAll(".bb-ctx-item:not(:disabled)")
   );
   const onDown = (e) => {
-    if (!el.contains(e.target)) closeCurrent();
+    if (!el2.contains(e.target)) closeCurrent();
   };
   const onKey = (e) => {
     if (e.key === "Escape") return closeCurrent();
@@ -1043,19 +1314,19 @@ function showContextMenu(entries, at) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     window.removeEventListener("scroll", onScroll, true);
-    el.remove();
+    el2.remove();
   };
   items()[0]?.focus();
   return { close: closeCurrent };
 }
 
 // packages/ui/src/lib/link-panel.ts
-var STYLE6 = `
+var STYLE7 = `
 .bb-linkpanel{position:fixed;z-index:1200;width:300px;padding: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);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);box-sizing:border-box}
 .bb-linkpanel *{box-sizing:border-box}
 .bb-linkpanel-row{display:flex;align-items:center;gap:8px}
 .bb-linkpanel-form{display:flex;flex-direction:column;gap:8px}
-.bb-linkpanel-field{display:flex;align-items:center;gap:7px;border:1px solid var(--bb-ui-border,#e3e3e0);border-radius:7px;padding:0 9px;background:var(--bb-ui-bg,#fff)}
+.bb-linkpanel-field{display:flex;align-items:center;gap:7px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#e3e3e0));border-radius:7px;padding:0 9px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff))}
 .bb-linkpanel-field:focus-within{border-color:var(--bb-ui-accent,#d85a30)}
 .bb-linkpanel-field svg{flex:none;opacity:.55}
 .bb-linkpanel-input{flex:1;min-width:0;height:30px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;outline:none}
@@ -1097,31 +1368,17 @@ function closeCurrent2() {
     dispose();
   }
 }
-function place(el, anchor) {
-  const r = el.getBoundingClientRect();
-  const pad = 6;
-  const gap = 6;
-  const x = Math.max(
-    pad,
-    Math.min(anchor.x, window.innerWidth - r.width - pad)
-  );
-  const below = anchor.y + anchor.height + gap;
-  const above = anchor.y - gap - r.height;
-  const y = below + r.height <= window.innerHeight - pad || above < pad ? Math.min(below, window.innerHeight - r.height - pad) : above;
-  el.style.left = `${x}px`;
-  el.style.top = `${y}px`;
-}
 function showLinkPanel(opts) {
-  injectStyle("bb-ui-linkpanel-styles", STYLE6);
+  injectStyle("bb-ui-linkpanel-styles", STYLE7);
   if (opts.key && current2 && currentKey === opts.key && currentHandle) {
     cancelPendingClose();
     return currentHandle;
   }
   closeCurrent2();
-  const el = document.createElement("div");
-  el.className = "bb-linkpanel";
-  el.setAttribute("role", "dialog");
-  el.setAttribute("aria-label", "Link");
+  const el2 = document.createElement("div");
+  el2.className = "bb-linkpanel";
+  el2.setAttribute("role", "dialog");
+  el2.setAttribute("aria-label", "Link");
   const iconBtn = (svg, label, onClick) => {
     const b = document.createElement("button");
     b.type = "button";
@@ -1148,7 +1405,7 @@ function showLinkPanel(opts) {
     return { wrap, input };
   };
   const renderView = (existing) => {
-    el.textContent = "";
+    el2.textContent = "";
     const row = document.createElement("div");
     row.className = "bb-linkpanel-row";
     const internal = opts.internal;
@@ -1195,11 +1452,11 @@ function showLinkPanel(opts) {
         })
       );
     }
-    el.appendChild(row);
-    place(el, opts.anchor);
+    el2.appendChild(row);
+    placeFloating(el2, opts.anchor);
   };
   const renderForm = (prefill) => {
-    el.textContent = "";
+    el2.textContent = "";
     const form = document.createElement("div");
     form.className = "bb-linkpanel-form";
     const withText = !opts.hasSelection;
@@ -1240,16 +1497,16 @@ function showLinkPanel(opts) {
     }
     row.appendChild(apply);
     form.appendChild(row);
-    el.appendChild(form);
-    place(el, opts.anchor);
+    el2.appendChild(form);
+    placeFloating(el2, opts.anchor);
     u.input.focus();
     u.input.select();
   };
-  document.body.appendChild(el);
+  document.body.appendChild(el2);
   if (opts.existing) renderView(opts.existing);
   else renderForm(null);
   const onDown = (e) => {
-    if (el.contains(e.target)) return;
+    if (el2.contains(e.target)) return;
     if (opts.key) {
       cancelPendingClose();
       pendingClose = setTimeout(closeCurrent2, 80);
@@ -1270,7 +1527,7 @@ function showLinkPanel(opts) {
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
     window.removeEventListener("scroll", onScroll, true);
-    el.remove();
+    el2.remove();
   };
   current2 = dispose;
   currentKey = opts.key ?? null;
@@ -1285,8 +1542,6 @@ function showLinkPanel(opts) {
 }
 
 // packages/ui/src/lib/cell-properties.ts
-var FILL_PRESETS = ["#FCEBEB", "#FAEEDA", "#EAF3DE", "#E6F1FB", "#EEEDFE", "#FBEAF0", "#E1F5EE", "#F1EFE8", "#D3D1C7"];
-var PEN_COLORS = ["#000000", "#5F5E5A", "#B0B0B0", "#E24B4A", "#185FA5", "#1D9E75", "#BA7517"];
 var PT_WIDTHS = [0.5, 0.75, 1, 1.5, 2.25, 3];
 var STYLES = [
   { key: "solid", label: "Solid" },
@@ -1300,43 +1555,53 @@ var VALIGNS = [
   { key: "bottom", label: "Bottom" }
 ];
 var PRESETS = [
-  { key: "all", label: "All borders", sides: [1, 1, 1, 1, 1, 1], inside: false },
+  {
+    key: "all",
+    label: "All borders",
+    sides: [1, 1, 1, 1, 1, 1],
+    inside: false
+  },
   { key: "none", label: "No border", sides: [0, 0, 0, 0, 0, 0], inside: false },
-  { key: "outside", label: "Outside", sides: [1, 1, 1, 1, 0, 0], inside: false },
+  {
+    key: "outside",
+    label: "Outside",
+    sides: [1, 1, 1, 1, 0, 0],
+    inside: false
+  },
   { key: "inside", label: "Inside", sides: [0, 0, 0, 0, 1, 1], inside: true },
   { key: "top", label: "Top", sides: [1, 0, 0, 0, 0, 0], inside: false },
   { key: "bottom", label: "Bottom", sides: [0, 0, 1, 0, 0, 0], inside: false },
   { key: "left", label: "Left", sides: [0, 0, 0, 1, 0, 0], inside: false },
   { key: "right", label: "Right", sides: [0, 1, 0, 0, 0, 0], inside: false },
-  { key: "insideH", label: "Inside horizontal", sides: [0, 0, 0, 0, 1, 0], inside: true },
-  { key: "insideV", label: "Inside vertical", sides: [0, 0, 0, 0, 0, 1], inside: true }
+  {
+    key: "insideH",
+    label: "Inside horizontal",
+    sides: [0, 0, 0, 0, 1, 0],
+    inside: true
+  },
+  {
+    key: "insideV",
+    label: "Inside vertical",
+    sides: [0, 0, 0, 0, 0, 1],
+    inside: true
+  }
 ];
-var STYLE7 = `
+var STYLE8 = `
 .bb-cp{display:flex;flex-direction:column;gap:16px;min-width:320px;color:var(--bb-ui-fg,#2c2c2a)}
 .bb-cp *{box-sizing:border-box}
 .bb-cp-label{font-size:12px;opacity:.7;margin-bottom:8px}
-.bb-cp-swatches{display:flex;flex-wrap:wrap;gap:7px}
-.bb-cp-swatch{width:26px;height:26px;border-radius:6px;border:0.5px solid var(--bb-ui-border,#d8d6cf);padding:0;cursor:pointer}
-.bb-cp-swatch.on{box-shadow:0 0 0 2px var(--bb-ui-active-fg,#0c447c)}
-.bb-cp-none{display:flex;align-items:center;justify-content:center;background:var(--bb-ui-bg,#fff);font-size:15px;color:#b4b2a9}
-.bb-cp-hexrow{display:flex;align-items:center;gap:8px;margin-top:10px}
-.bb-cp-hexpreview{width:26px;height:26px;border-radius:6px;border:0.5px solid var(--bb-ui-border,#d8d6cf);flex:none}
-.bb-cp-hex{height:30px;width:120px;font-size:13px;padding:0 8px;border:0.5px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit}
-.bb-cp-seg{display:inline-flex;border:0.5px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;overflow:hidden}
+.bb-cp-seg{display:inline-flex;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;overflow:hidden}
 .bb-cp-segbtn{height:32px;padding:0 16px;border:0;border-right:0.5px solid var(--bb-ui-border,#e3e3e0);background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
 .bb-cp-segbtn:last-child{border-right:0}
 .bb-cp-segbtn.on{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c)}
 .bb-cp-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
-.bb-cp-preset{display:flex;align-items:center;justify-content:center;height:32px;border:0.5px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);cursor:pointer;padding:0}
+.bb-cp-preset{display:flex;align-items:center;justify-content:center;height:32px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));cursor:pointer;padding:0}
 .bb-cp-preset.on{border-color:var(--bb-ui-active-border,#7fb2ec);background:var(--bb-ui-active-bg,#e6f1fb)}
 .bb-cp-preset:disabled{opacity:.35;cursor:default}
 .bb-cp-penrow{display:flex;gap:10px;margin-bottom:10px}
-.bb-cp-select{flex:1;height:32px;border:0.5px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font:inherit;font-size:13px;padding:0 8px}
-.bb-cp-colors{display:flex;gap:7px}
-.bb-cp-color{width:24px;height:24px;border-radius:6px;border:0.5px solid var(--bb-ui-border,#d8d6cf);padding:0;cursor:pointer}
-.bb-cp-color.on{box-shadow:0 0 0 2px var(--bb-ui-active-fg,#0c447c)}
+.bb-cp-select{flex:1;height:32px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;padding:0 8px}
 .bb-cp-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
-.bb-cp-btn{height:32px;padding:0 16px;border:0.5px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-cp-btn{height:32px;padding:0 16px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;cursor:pointer}
 .bb-cp-primary{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#b5d4f4);color:var(--bb-ui-active-fg,#0c447c)}
 `;
 var ACTIVE = "#378ADD";
@@ -1351,8 +1616,12 @@ var section = (label) => {
   sec.appendChild(l);
   return sec;
 };
-function openCellProperties({ initial, singleCell, onApply }) {
-  injectStyle("bb-ui-cellprops-styles", STYLE7);
+function openCellProperties({
+  initial,
+  singleCell,
+  onApply
+}) {
+  injectStyle("bb-ui-cellprops-styles", STYLE8);
   let background = initial.background;
   let vAlign = initial.vAlign;
   let penWidthPt = 1;
@@ -1362,48 +1631,16 @@ function openCellProperties({ initial, singleCell, onApply }) {
   const root = document.createElement("div");
   root.className = "bb-cp";
   const fill = section("Fill");
-  const swatches = document.createElement("div");
-  swatches.className = "bb-cp-swatches";
-  const swatchEls = [];
-  const addSwatch = (el, color) => {
-    el.addEventListener("click", () => {
-      background = color;
-      syncFill();
-    });
-    swatches.appendChild(el);
-    swatchEls.push({ el, color });
-  };
-  const none = document.createElement("button");
-  none.type = "button";
-  none.className = "bb-cp-swatch bb-cp-none";
-  none.title = "No fill";
-  none.textContent = "\u29B8";
-  addSwatch(none, null);
-  for (const color of FILL_PRESETS) {
-    const sw = document.createElement("button");
-    sw.type = "button";
-    sw.className = "bb-cp-swatch";
-    sw.style.background = color;
-    sw.title = color;
-    addSwatch(sw, color);
-  }
-  const hexRow = document.createElement("div");
-  hexRow.className = "bb-cp-hexrow";
-  const hexPreview = document.createElement("span");
-  hexPreview.className = "bb-cp-hexpreview";
-  const hex = document.createElement("input");
-  hex.type = "text";
-  hex.className = "bb-cp-hex";
-  hex.placeholder = "#RRGGBB";
-  hex.addEventListener("input", () => {
-    const v = hex.value.trim();
-    if (/^#[0-9a-fA-F]{6}$/.test(v)) {
-      background = v;
-      syncFill();
+  const fillBtn = colorButton({
+    title: "Cell fill",
+    label: "Fill",
+    clearLabel: "No fill",
+    value: () => background,
+    onPick: (c) => {
+      background = c;
     }
   });
-  hexRow.append(hexPreview, hex);
-  fill.append(swatches, hexRow);
+  fill.append(fillBtn.el);
   const valign = section("Vertical alignment");
   const seg = document.createElement("div");
   seg.className = "bb-cp-seg";
@@ -1433,7 +1670,10 @@ function openCellProperties({ initial, singleCell, onApply }) {
     if (pt === penWidthPt) o.selected = true;
     widthSel.appendChild(o);
   }
-  widthSel.addEventListener("change", () => penWidthPt = Number(widthSel.value));
+  widthSel.addEventListener(
+    "change",
+    () => penWidthPt = Number(widthSel.value)
+  );
   const styleSel = document.createElement("select");
   styleSel.className = "bb-cp-select";
   for (const { key, label } of STYLES) {
@@ -1442,24 +1682,19 @@ function openCellProperties({ initial, singleCell, onApply }) {
     o.textContent = label;
     styleSel.appendChild(o);
   }
-  styleSel.addEventListener("change", () => penStyle = styleSel.value);
-  penRow.append(widthSel, styleSel);
-  const colors = document.createElement("div");
-  colors.className = "bb-cp-colors";
-  const colorEls = [];
-  for (const color of PEN_COLORS) {
-    const c = document.createElement("button");
-    c.type = "button";
-    c.className = "bb-cp-color";
-    c.style.background = color;
-    c.title = color;
-    c.addEventListener("click", () => {
-      penColor = color;
-      syncColors();
-    });
-    colors.appendChild(c);
-    colorEls.push({ el: c, color });
-  }
+  styleSel.addEventListener(
+    "change",
+    () => penStyle = styleSel.value
+  );
+  const penBtn = colorButton({
+    title: "Border colour",
+    label: "Colour",
+    value: () => penColor,
+    onPick: (c) => {
+      if (c) penColor = c;
+    }
+  });
+  penRow.append(widthSel, styleSel, penBtn.el);
   const grid = document.createElement("div");
   grid.className = "bb-cp-presets";
   const presetEls = [];
@@ -1478,7 +1713,7 @@ function openCellProperties({ initial, singleCell, onApply }) {
     grid.appendChild(btn);
     presetEls.push({ el: btn, key: p.key });
   }
-  borders.append(grid, penRow, colors);
+  borders.append(grid, penRow);
   const footer = document.createElement("div");
   footer.className = "bb-cp-footer";
   const cancel = document.createElement("button");
@@ -1491,23 +1726,14 @@ function openCellProperties({ initial, singleCell, onApply }) {
   apply.textContent = "Apply";
   footer.append(cancel, apply);
   root.append(fill, valign, borders, footer);
-  function syncFill() {
-    for (const { el, color } of swatchEls) el.classList.toggle("on", color === background);
-    hexPreview.style.background = background ?? "transparent";
-    if (document.activeElement !== hex) hex.value = background ?? "";
-  }
   function syncVAlign() {
     for (const [key, b] of vaBtns) b.classList.toggle("on", vAlign === key);
   }
-  function syncColors() {
-    for (const { el, color } of colorEls) el.classList.toggle("on", color === penColor);
-  }
   function syncPresets() {
-    for (const { el, key } of presetEls) el.classList.toggle("on", preset === key);
+    for (const { el: el2, key } of presetEls)
+      el2.classList.toggle("on", preset === key);
   }
-  syncFill();
   syncVAlign();
-  syncColors();
   syncPresets();
   const dialog = new Dialog({ title: "Cell properties", modal: true });
   dialog.setContent(root);
@@ -1516,7 +1742,12 @@ function openCellProperties({ initial, singleCell, onApply }) {
   apply.addEventListener("click", () => {
     const result = { background, vAlign };
     if (preset) {
-      result.border = { preset, width: penWidthPt * 96 / 72, style: penStyle, color: penColor };
+      result.border = {
+        preset,
+        width: penWidthPt * 96 / 72,
+        style: penStyle,
+        color: penColor
+      };
     }
     onApply(result);
     dialog.close();
@@ -1525,15 +1756,15 @@ function openCellProperties({ initial, singleCell, onApply }) {
 }
 
 // packages/ui/src/lib/table-grid.ts
-var STYLE8 = `
+var STYLE9 = `
 .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-border,#d8d6cf);border-radius:2px;background:var(--bb-ui-bg,#fff);cursor:pointer;padding:0}
+.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}
 .bb-grid-cell.on{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#7fb2ec)}
 .bb-grid-label{font-size:12px;text-align:center;opacity:.7}
 `;
 function tableGridPicker(options) {
-  injectStyle("bb-ui-grid-styles", STYLE8);
+  injectStyle("bb-ui-grid-styles", STYLE9);
   const maxRows = options.maxRows ?? 8;
   const maxCols = options.maxCols ?? 10;
   const root = document.createElement("div");
@@ -1576,7 +1807,7 @@ var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
 function fmtCm(cm) {
   return `${Number(cm.toFixed(3))} cm`;
 }
-var STYLE9 = `
+var STYLE10 = `
 .bb-ps{display:flex;flex-direction:column;min-width:250px;max-height:min(70vh,460px);overflow-y:auto}
 .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}
 .bb-ps-row:hover,.bb-ps-row:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
@@ -1591,15 +1822,15 @@ var STYLE9 = `
 .bb-pd-fields{display:grid;gap:10px 18px}
 .bb-pd-field{display:flex;align-items:center;gap:8px}
 .bb-pd-label{flex:0 0 74px;font-size:13px}
-.bb-pd-input{flex:1 1 auto;min-width:0;width:100%;height:30px;padding:0 8px;border:1px solid var(--bb-ui-border,#d8d6cf);border-radius:6px;background:var(--bb-ui-bg,#fff);color:inherit;font:inherit;font-size:13px}
+.bb-pd-input{flex:1 1 auto;min-width:0;width:100%;height:30px;padding:0 8px;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));color:inherit;font:inherit;font-size:13px}
 .bb-pd-input:focus{outline:2px solid var(--bb-ui-active-border,#7fb2ec);outline-offset:-1px}
 .bb-pd-actions{display:flex;justify-content:flex-end;gap:8px}
 `;
 var SVG_NS = "http://www.w3.org/2000/svg";
 function svgEl(name, attrs) {
-  const el = document.createElementNS(SVG_NS, name);
-  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
-  return el;
+  const el2 = document.createElementNS(SVG_NS, name);
+  for (const [k, v] of Object.entries(attrs)) el2.setAttribute(k, String(v));
+  return el2;
 }
 function pagePreview(ratio) {
   const svg = svgEl("svg", { viewBox: "0 0 34 42", class: "bb-ps-icon" });
@@ -1666,11 +1897,11 @@ function presetRow(icon, name, caption, active, onPick) {
   return row;
 }
 function captionLine(text) {
-  const el = document.createElement("span");
-  el.className = "bb-ps-dims";
-  el.style.display = "block";
-  el.textContent = text;
-  return el;
+  const el2 = document.createElement("span");
+  el2.className = "bb-ps-dims";
+  el2.style.display = "block";
+  el2.textContent = text;
+  return el2;
 }
 function customRow(icon, title, description, onPick) {
   icon.appendChild(
@@ -1691,7 +1922,7 @@ function customRow(icon, title, description, onPick) {
   return presetRow(icon, title, captionLine(description), false, onPick);
 }
 function pageSizePicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -1720,7 +1951,7 @@ function pageSizePicker(options) {
   return root;
 }
 function orientationPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -1743,7 +1974,7 @@ function orientationPicker(options) {
   return root;
 }
 function marginPresetPicker(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
   const root = document.createElement("div");
   root.className = "bb-ps";
   root.setAttribute("role", "menu");
@@ -1799,8 +2030,8 @@ function cmField(label, valuePx, min) {
   return { row, input };
 }
 function dialogActions() {
-  const el = document.createElement("div");
-  el.className = "bb-pd-actions";
+  const el2 = document.createElement("div");
+  el2.className = "bb-pd-actions";
   const cancel = document.createElement("button");
   cancel.type = "button";
   cancel.className = "bb-prompt-btn";
@@ -1810,15 +2041,15 @@ function dialogActions() {
   ok.className = "bb-prompt-btn";
   ok.dataset["primary"] = "true";
   ok.textContent = "OK";
-  el.append(cancel, ok);
-  return { el, ok, cancel };
+  el2.append(cancel, ok);
+  return { el: el2, ok, cancel };
 }
 function readPx(input, fallbackPx) {
   const n = Number(input.value);
   return Number.isFinite(n) && n > 0 ? cmToPx(n) : fallbackPx;
 }
 function openPageSizeDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
   const dialog = new Dialog({ title: "Paper size", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -1845,7 +2076,7 @@ function openPageSizeDialog(options) {
   width.input.select();
 }
 function openMarginsDialog(options) {
-  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
   const dialog = new Dialog({ title: "Margins", modal: true });
   const form = document.createElement("form");
   form.className = "bb-pd";
@@ -1880,9 +2111,340 @@ function openMarginsDialog(options) {
   top.input.focus();
   top.input.select();
 }
+
+// packages/ui/src/lib/font-dialog.ts
+var twipsToPt = (tw) => tw / 20;
+var ptToTwips = (pt) => Math.round(pt * 20);
+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 STYLE11 = `
+.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. */
+.bb-fd-pane[hidden]{display:none}
+.bb-fd-lbl{font-size:12px;opacity:.7;margin-bottom:5px}
+.bb-fd-sec{font-size:12px;opacity:.7;margin-bottom:9px}
+.bb-fd-grid{display:grid;gap:10px}
+.bb-fd-ctl{width:100%;height:32px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;padding:0 8px}
+.bb-fd-row{display:grid;grid-template-columns:96px 1fr 88px;gap:10px;align-items:center;margin-bottom:10px}
+.bb-fd-row label{font-size:13px}
+.bb-fd-state{font-size:12px;color:var(--bb-ui-active-fg,#0c447c)}
+.bb-fd-state.off{color:inherit;opacity:.5}
+.bb-fd-seg{display:inline-flex;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;overflow:hidden;height:32px}
+.bb-fd-segbtn{width:40px;border:0;border-right:0.5px solid var(--bb-ui-border,#e3e3e0);background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-fd-segbtn:last-child{border-right:0}
+.bb-fd-segbtn[aria-pressed="true"]{background:var(--bb-ui-active-bg,#e6f1fb);color:var(--bb-ui-active-fg,#0c447c)}
+.bb-fd-segbtn[aria-pressed="mixed"]{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--bb-ui-active-bg,#e6f1fb) 4px 8px)}
+.bb-fd-swatch-custom{background:conic-gradient(#c0392b,#ba7517,#1d9e75,#185fa5,#7f77dd,#c0392b)}
+.bb-fd-swatch-custom::-webkit-color-swatch-wrapper{padding:0}
+.bb-fd-swatch-custom::-webkit-color-swatch{border:0;border-radius:5px;opacity:0}
+.bb-fd-eff{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
+.bb-fd-cb{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
+.bb-fd-prev{border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:8px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));padding:13px 14px;overflow:hidden}
+.bb-fd-prev-cap{font-size:11px;opacity:.55;margin-bottom:9px;text-align:center}
+/* The surrounding sentence stays at a fixed size and weight \u2014 it is the ruler
+   the sample is read against, so it must not move when the sample does. */
+.bb-fd-prev-line{font-size:15px;line-height:2;text-align:center}
+.bb-fd-prev-txt{display:inline-block}
+.bb-fd-dim{opacity:.4}
+.bb-fd-note{font-size:11px;opacity:.55;margin-top:5px}
+.bb-fd-foot{display:flex;justify-content:flex-end;gap:8px}
+.bb-fd-btn{height:31px;padding:0 17px;border:0.5px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:6px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:13px;cursor:pointer}
+.bb-fd-btn.primary{background:var(--bb-ui-active-bg,#e6f1fb);border-color:var(--bb-ui-active-border,#7fb2ec);color:var(--bb-ui-active-fg,#0c447c)}
+`;
+function el(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text) n.textContent = text;
+  return n;
+}
+function select(options, value) {
+  const s = el("select", "bb-fd-ctl");
+  for (const [v, label] of options) {
+    const o = document.createElement("option");
+    o.value = v;
+    o.textContent = label;
+    s.append(o);
+  }
+  s.value = value;
+  return s;
+}
+function checkbox(label, on) {
+  const wrap = el("label", "bb-fd-cb");
+  const input = document.createElement("input");
+  input.type = "checkbox";
+  input.checked = on === true;
+  input.indeterminate = on === void 0;
+  input.addEventListener("change", () => {
+    input.indeterminate = false;
+  });
+  wrap.append(input, document.createTextNode(label));
+  input.wrap = wrap;
+  return input;
+}
+var wrapOf = (i) => i.wrap ?? i;
+function openFontDialog({
+  initial,
+  families,
+  sizes,
+  onApply
+}) {
+  injectStyle("bb-font-dialog", STYLE11);
+  const dialog = new Dialog({ title: "Font", modal: true });
+  const root = el("div", "bb-fd");
+  const tabs = el("div", "bb-fd-tabs");
+  tabs.setAttribute("role", "tablist");
+  const fontTab = el("button", "bb-fd-tab", "Font");
+  const advTab = el("button", "bb-fd-tab", "Advanced");
+  for (const t of [fontTab, advTab]) {
+    t.type = "button";
+    t.setAttribute("role", "tab");
+    tabs.append(t);
+  }
+  const fontPane = el("div", "bb-fd-pane");
+  const advPane = el("div", "bb-fd-pane");
+  const showTab = (advanced) => {
+    fontTab.setAttribute("aria-selected", String(!advanced));
+    advTab.setAttribute("aria-selected", String(advanced));
+    fontPane.hidden = advanced;
+    advPane.hidden = !advanced;
+  };
+  fontTab.addEventListener("click", () => showTab(false));
+  advTab.addEventListener("click", () => showTab(true));
+  const famList = families.includes(initial.family ?? "") ? families : initial.family ? [initial.family, ...families] : families;
+  const familySel = select(
+    [["", "Font"], ...famList.map((f) => [f, f])],
+    initial.family ?? ""
+  );
+  const sizeSel = select(
+    [["", "Size"], ...sizes.map((n) => [String(n), String(n)])],
+    initial.sizePt == null ? "" : String(initial.sizePt)
+  );
+  const topGrid = el("div", "bb-fd-grid");
+  topGrid.style.gridTemplateColumns = "1fr 100px";
+  const famCell = el("div");
+  famCell.append(el("div", "bb-fd-lbl", "Font"), familySel);
+  const sizeCell = el("div");
+  sizeCell.append(el("div", "bb-fd-lbl", "Size"), sizeSel);
+  topGrid.append(famCell, sizeCell);
+  const seg = el("div", "bb-fd-seg");
+  const mkSeg = (text, on, style) => {
+    const b = el("button", "bb-fd-segbtn", text);
+    b.type = "button";
+    b.setAttribute("aria-pressed", on === void 0 ? "mixed" : String(on));
+    if (style) b.setAttribute("style", style);
+    b.addEventListener("click", () => {
+      b.setAttribute(
+        "aria-pressed",
+        b.getAttribute("aria-pressed") === "true" ? "false" : "true"
+      );
+      paint();
+    });
+    seg.append(b);
+    return b;
+  };
+  const boldBtn = mkSeg("B", initial.bold, "font-weight:600");
+  const italicBtn = mkSeg("I", initial.italic, "font-style:italic");
+  const underBtn = mkSeg("U", initial.underline, "text-decoration:underline");
+  let color = initial.color ?? null;
+  let highlight = initial.highlight ?? null;
+  const colorBtn = colorButton({
+    title: "Text color",
+    label: "Text color",
+    clearLabel: "Automatic",
+    value: () => color,
+    onPick: (c) => {
+      color = c;
+      paint();
+    }
+  });
+  const hlBtn = colorButton({
+    title: "Highlight",
+    label: "Highlight",
+    clearLabel: "No highlight",
+    value: () => highlight,
+    onPick: (c) => {
+      highlight = c;
+      paint();
+    }
+  });
+  const styleRow = el("div", "bb-fd-grid");
+  styleRow.style.gridTemplateColumns = "auto 1fr 1fr";
+  styleRow.style.alignItems = "end";
+  const styleCell = el("div");
+  styleCell.append(el("div", "bb-fd-lbl", "Style"), seg);
+  const colorCell = el("div");
+  colorCell.append(el("div", "bb-fd-lbl", "Colour"), colorBtn.el);
+  const hlCell = el("div");
+  hlCell.append(el("div", "bb-fd-lbl", "Highlight"), hlBtn.el);
+  styleRow.append(styleCell, colorCell, hlCell);
+  const effWrap = el("div");
+  effWrap.append(el("div", "bb-fd-sec", "Effects"));
+  const effGrid = el("div", "bb-fd-eff");
+  const strikeCb = checkbox("Strikethrough", initial.strike);
+  const dstrikeCb = checkbox("Double strikethrough", initial.doubleStrike);
+  const smallCapsCb = checkbox("Small caps", initial.smallCaps);
+  const supCb = checkbox("Superscript", initial.vertAlign === "super");
+  const subCb = checkbox("Subscript", initial.vertAlign === "sub");
+  const exclusive = (a, b) => {
+    a.addEventListener("change", () => {
+      if (a.checked) b.checked = false;
+      paint();
+    });
+  };
+  exclusive(strikeCb, dstrikeCb);
+  exclusive(dstrikeCb, strikeCb);
+  exclusive(supCb, subCb);
+  exclusive(subCb, supCb);
+  smallCapsCb.addEventListener("change", () => paint());
+  effGrid.append(
+    wrapOf(strikeCb),
+    wrapOf(dstrikeCb),
+    wrapOf(supCb),
+    wrapOf(subCb),
+    wrapOf(smallCapsCb)
+  );
+  effWrap.append(effGrid);
+  fontPane.append(topGrid, styleRow, effWrap);
+  const advWrap = el("div");
+  advWrap.append(el("div", "bb-fd-sec", "Character spacing"));
+  const mkRow = (label, control, stateText, dim = false) => {
+    const row = el("div", "bb-fd-row");
+    if (dim) row.classList.add("bb-fd-dim");
+    const l = el("label", void 0, label);
+    const st = el("span", "bb-fd-state off", stateText);
+    row.append(l, control, st);
+    advWrap.append(row);
+    return st;
+  };
+  const scaleSel = select(
+    SCALE_PRESETS.map((n) => [String(n), `${n}%`]),
+    String(initial.scalePercent)
+  );
+  const scaleState = mkRow("Scale", scaleSel, "");
+  const spacingInput = el("input", "bb-fd-ctl");
+  spacingInput.type = "number";
+  spacingInput.step = "0.05";
+  spacingInput.value = String(twipsToPt(initial.letterSpacingTwips));
+  const spacingState = mkRow("Spacing", spacingInput, "");
+  const positionInput = el("input", "bb-fd-ctl");
+  positionInput.type = "number";
+  positionInput.step = "0.5";
+  positionInput.value = String(halfToPt(initial.positionHalfPoints));
+  const positionState = mkRow("Position", positionInput, "");
+  const kernInput = el("input", "bb-fd-ctl");
+  kernInput.type = "number";
+  kernInput.value = "12";
+  kernInput.disabled = true;
+  mkRow("Kerning", kernInput, "not supported", true);
+  const kernNote = el(
+    "div",
+    "bb-fd-note",
+    "Kerning is read from the file but not reproduced when drawing, so it is shown here rather than silently dropped."
+  );
+  advWrap.append(kernNote);
+  advPane.append(advWrap);
+  const prev = el("div", "bb-fd-prev");
+  const prevLine = el("div", "bb-fd-prev-line");
+  const prevTxt = el("span", "bb-fd-prev-txt", "The quick brown fox");
+  prevLine.append(
+    document.createTextNode("Text before "),
+    prevTxt,
+    document.createTextNode(" and text after.")
+  );
+  prev.append(el("div", "bb-fd-prev-cap", "Preview"), prevLine);
+  const num = (i) => {
+    const v = Number(i.value);
+    return Number.isFinite(v) ? v : 0;
+  };
+  const pressed = (b) => b.getAttribute("aria-pressed") === "true";
+  const pressedOrMixed = (b) => b.getAttribute("aria-pressed") === "mixed" ? void 0 : pressed(b);
+  const checkedOrMixed = (i) => i.indeterminate ? void 0 : i.checked;
+  function paint() {
+    const spacingPt = num(spacingInput);
+    const positionPt = num(positionInput);
+    const scale = Number(scaleSel.value) || 100;
+    scaleState.textContent = scale === 100 ? "normal" : `${scale}%`;
+    scaleState.classList.toggle("off", scale === 100);
+    spacingState.textContent = spacingPt === 0 ? "normal" : spacingPt > 0 ? "expanded" : "condensed";
+    spacingState.classList.toggle("off", spacingPt === 0);
+    positionState.textContent = positionPt === 0 ? "on baseline" : positionPt > 0 ? "raised" : "lowered";
+    positionState.classList.toggle("off", positionPt === 0);
+    const deco = [
+      pressed(underBtn) ? "underline" : "",
+      strikeCb.checked || dstrikeCb.checked ? "line-through" : ""
+    ].filter(Boolean).join(" ");
+    const s = prevTxt.style;
+    s.fontFamily = familySel.value || "inherit";
+    const shrink = supCb.checked || subCb.checked ? SUPERSUB_SCALE : 1;
+    s.fontSize = sizeSel.value ? `${Number(sizeSel.value) * shrink}pt` : `${15 * shrink}px`;
+    s.fontWeight = pressed(boldBtn) ? "700" : "400";
+    s.fontStyle = pressed(italicBtn) ? "italic" : "normal";
+    s.textDecoration = deco || "none";
+    s.textDecorationStyle = dstrikeCb.checked ? "double" : "solid";
+    s.fontVariant = smallCapsCb.checked ? "small-caps" : "normal";
+    s.color = color ?? "inherit";
+    s.background = highlight ?? "transparent";
+    s.letterSpacing = `${spacingPt}pt`;
+    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 i of [spacingInput, positionInput])
+    i.addEventListener("input", paint);
+  const foot = el("div", "bb-fd-foot");
+  const cancel = el("button", "bb-fd-btn", "Cancel");
+  const ok = el("button", "bb-fd-btn primary", "OK");
+  cancel.type = ok.type = "button";
+  cancel.addEventListener("click", () => dialog.close());
+  ok.addEventListener("click", () => {
+    const spacingPt = num(spacingInput);
+    const positionPt = num(positionInput);
+    const scale = Number(scaleSel.value) || 100;
+    onApply({
+      family: familySel.value || void 0,
+      sizePt: sizeSel.value ? Number(sizeSel.value) : void 0,
+      bold: pressedOrMixed(boldBtn),
+      italic: pressedOrMixed(italicBtn),
+      underline: pressedOrMixed(underBtn),
+      strike: checkedOrMixed(strikeCb),
+      doubleStrike: checkedOrMixed(dstrikeCb),
+      smallCaps: checkedOrMixed(smallCapsCb),
+      vertAlign: supCb.checked ? "super" : subCb.checked ? "sub" : null,
+      color,
+      highlight,
+      scalePercent: scale,
+      letterSpacingTwips: ptToTwips(spacingPt),
+      positionHalfPoints: ptToHalf(positionPt)
+    });
+    dialog.close();
+  });
+  foot.append(cancel, ok);
+  root.append(tabs, fontPane, advPane, prev, foot);
+  dialog.body.append(root);
+  dialog.onClose(() => dialog.destroy());
+  showTab(false);
+  paint();
+  dialog.open();
+}
 export {
+  COLOR_PALETTE,
   Dialog,
   cmToPx,
+  colorButton,
   createFindDialog,
   defaultMenus,
   defaultToolbarGroups,
@@ -1890,6 +2452,8 @@ export {
   mountMenubar,
   mountToolbar,
   openCellProperties,
+  openColorPicker,
+  openFontDialog,
   openMarginsDialog,
   openPageSizeDialog,
   orientationPicker,