@shadow-garden/bapbong-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1187 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Dialog: () => Dialog,
+  createFindDialog: () => createFindDialog,
+  defaultMenus: () => defaultMenus,
+  defaultToolbarGroups: () => defaultToolbarGroups,
+  mountMenubar: () => mountMenubar,
+  mountToolbar: () => mountToolbar,
+  openCellProperties: () => openCellProperties,
+  promptDialog: () => promptDialog,
+  showContextMenu: () => showContextMenu,
+  tableGridPicker: () => tableGridPicker
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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);
+}
+
+// packages/ui/src/lib/dialog.ts
+var STYLE = `
+.bb-dialog{position:fixed;inset:auto;z-index:1100;margin:0;padding:0;border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;background:var(--bb-ui-dialog-bg,var(--bb-ui-menu-bg,#fff));-webkit-backdrop-filter:var(--bb-ui-dialog-filter,none);backdrop-filter:var(--bb-ui-dialog-filter,none);color:var(--bb-ui-fg,#2c2c2a);box-shadow:0 12px 40px rgba(0,0,0,.18);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);min-width:280px;max-width:min(92vw,440px)}
+.bb-dialog *{box-sizing:border-box}
+.bb-dialog::backdrop{background:rgba(0,0,0,.28)}
+.bb-dialog-modal{top:50%;left:50%;transform:translate(-50%,-50%)}
+.bb-dialog-float{top:62px;right:24px}
+.bb-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px 9px 12px;border-bottom:1px solid var(--bb-ui-border,#e3e3e0)}
+.bb-dialog-title{font-size:13px;font-weight:600}
+.bb-dialog-close{border:0;background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:14px;width:24px;height:24px;border-radius:5px;line-height:1}
+.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-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[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)}
+`;
+var Dialog = class {
+  el;
+  /** Content slot — put your element(s) here. */
+  body;
+  title;
+  modal;
+  anchor;
+  closeListeners = /* @__PURE__ */ new Set();
+  reposition = () => {
+    if (this.modal || !this.anchor) return;
+    const r = this.anchor();
+    if (!r) return;
+    this.el.style.top = `${Math.max(8, r.top + 8)}px`;
+    this.el.style.left = "auto";
+    this.el.style.right = `${Math.max(8, window.innerWidth - r.right + 8)}px`;
+  };
+  constructor(options = {}) {
+    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 header = document.createElement("div");
+    header.className = "bb-dialog-header";
+    this.title = document.createElement("span");
+    this.title.className = "bb-dialog-title";
+    this.title.textContent = options.title ?? "";
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "bb-dialog-close";
+    close.textContent = "\u2715";
+    close.setAttribute("aria-label", "Close");
+    close.addEventListener("click", () => this.close());
+    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", () => {
+      this.detachReposition();
+      this.closeListeners.forEach((cb) => cb());
+    });
+    if (!this.modal) {
+      el.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") this.close();
+      });
+    }
+    this.el = el;
+  }
+  attachReposition() {
+    window.addEventListener("scroll", this.reposition, true);
+    window.addEventListener("resize", this.reposition);
+  }
+  detachReposition() {
+    window.removeEventListener("scroll", this.reposition, true);
+    window.removeEventListener("resize", this.reposition);
+  }
+  setTitle(text) {
+    this.title.textContent = text;
+  }
+  /** Replace the body content. */
+  setContent(node) {
+    this.body.replaceChildren(node);
+  }
+  open() {
+    if (this.el.open) return;
+    if (this.modal) this.el.showModal();
+    else this.el.show();
+    if (!this.modal && this.anchor) {
+      this.reposition();
+      this.attachReposition();
+    }
+  }
+  close() {
+    if (this.el.open) this.el.close();
+  }
+  get isOpen() {
+    return this.el.open;
+  }
+  /** Subscribe to close (Esc, ✕, backdrop, or `close()`); returns unsubscribe. */
+  onClose(cb) {
+    this.closeListeners.add(cb);
+    return () => this.closeListeners.delete(cb);
+  }
+  destroy() {
+    this.detachReposition();
+    this.closeListeners.clear();
+    this.el.remove();
+  }
+};
+function promptDialog(options) {
+  return new Promise((resolve) => {
+    const dialog = new Dialog({ title: options.title, modal: true });
+    const form = document.createElement("form");
+    form.className = "bb-prompt";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "bb-prompt-input";
+    input.placeholder = options.placeholder ?? "";
+    input.value = options.initial ?? "";
+    const actions = document.createElement("div");
+    actions.className = "bb-prompt-actions";
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "bb-prompt-btn";
+    cancel.textContent = options.cancel ?? "Cancel";
+    const ok = document.createElement("button");
+    ok.type = "submit";
+    ok.className = "bb-prompt-btn";
+    ok.dataset["primary"] = "true";
+    ok.textContent = options.confirm ?? "OK";
+    actions.append(cancel, ok);
+    form.append(input, actions);
+    let settled = false;
+    const done = (value) => {
+      if (settled) return;
+      settled = true;
+      resolve(value);
+      dialog.destroy();
+    };
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      done(input.value.trim() || null);
+    });
+    cancel.addEventListener("click", () => done(null));
+    dialog.onClose(() => done(null));
+    dialog.setContent(form);
+    dialog.open();
+    input.focus();
+  });
+}
+
+// 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}"/>`).join("") + `</g></svg>`;
+var DEFAULT_ITEMS = {
+  undo: {
+    title: "Undo",
+    svg: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h6a3.5 3.5 0 0 1 0 7H6"/><path d="M4 7 7 4M4 7l3 3"/></svg>'
+  },
+  redo: {
+    title: "Redo",
+    svg: '<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7H6a3.5 3.5 0 0 0 0 7h4"/><path d="m12 7-3-3m3 3-3 3"/></svg>'
+  },
+  "clear-format": {
+    title: "Clear formatting",
+    svg: '<svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12 8 4l3 8M6 9.4h4"/><path d="M2.5 14 13.5 3" opacity=".55"/></svg>'
+  },
+  bold: { title: "Bold", label: "B", className: "bb-i-bold" },
+  italic: { title: "Italic", label: "I", className: "bb-i-italic" },
+  underline: { title: "Underline", label: "U", className: "bb-i-underline" },
+  strike: { title: "Strikethrough", label: "S", className: "bb-i-strike" },
+  superscript: {
+    title: "Superscript",
+    svg: '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><text x="0" y="13" font-size="10.5" font-family="serif">x</text><text x="8.5" y="6.5" font-size="7" font-family="serif">2</text></svg>'
+  },
+  subscript: {
+    title: "Subscript",
+    svg: '<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><text x="0" y="11.5" font-size="10.5" font-family="serif">x</text><text x="8.5" y="15.5" font-size="7" font-family="serif">2</text></svg>'
+  },
+  "align-left": { title: "Align left", svg: alignSvg([[2, 14], [2, 9], [2, 12]]) },
+  "align-center": { title: "Center", svg: alignSvg([[2, 14], [4, 12], [3, 13]]) },
+  "align-right": { title: "Align right", svg: alignSvg([[2, 14], [7, 14], [4, 14]]) },
+  "align-justify": { title: "Justify", svg: alignSvg([[2, 14], [2, 14], [2, 14]]) },
+  "bullet-list": {
+    title: "Bullet list",
+    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"/><circle cx="3" cy="4" r="1" fill="currentColor" stroke="none"/><circle cx="3" cy="8" r="1" fill="currentColor" stroke="none"/><circle cx="3" cy="12" r="1" fill="currentColor" stroke="none"/></svg>'
+  },
+  "ordered-list": {
+    title: "Numbered list",
+    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 = `
+.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 *{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)}
+.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)}
+.bb-toolbar-pop[hidden]{display:none}
+.bb-toolbar-btn{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 7px;font-family:inherit}
+.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: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;top:33px;left:0;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}
+`;
+function defaultToolbarGroups(commands) {
+  const names = [...commands].map((c) => c.name);
+  const aligns = names.filter((n) => n.startsWith("align-"));
+  const rest = names.filter((n) => !n.startsWith("align-"));
+  return [rest, aligns].filter((g) => g.length > 0);
+}
+function mountToolbar(host, editor, options = {}) {
+  injectStyle("bb-ui-toolbar-styles", STYLE2);
+  const items = { ...DEFAULT_ITEMS, ...options.items ?? {} };
+  const groups = options.groups ?? defaultToolbarGroups(editor.commands);
+  const wrap = document.createElement("div");
+  wrap.className = "bb-toolbar-wrap";
+  const root = document.createElement("div");
+  root.className = "bb-toolbar";
+  root.setAttribute("role", "toolbar");
+  const buttons = [];
+  const selects = [];
+  const colors = [];
+  let latest = null;
+  for (const group of groups) {
+    const entries = group.filter((e) => typeof e !== "string" || editor.commands.has(e));
+    if (entries.length === 0) continue;
+    const groupEl = document.createElement("div");
+    groupEl.className = "bb-toolbar-group";
+    for (const entry of entries) {
+      if (typeof entry !== "string" && entry.kind === "select") {
+        const sel = document.createElement("select");
+        sel.className = "bb-toolbar-select";
+        sel.title = entry.title;
+        sel.setAttribute("aria-label", entry.title);
+        if (entry.width) sel.style.width = `${entry.width}px`;
+        for (const opt of entry.options) {
+          const o = document.createElement("option");
+          o.value = opt.value;
+          o.textContent = opt.label;
+          sel.appendChild(o);
+        }
+        sel.addEventListener("mousedown", (e) => e.stopPropagation());
+        sel.addEventListener("change", () => {
+          entry.onSelect(sel.value);
+          editor.focus();
+        });
+        groupEl.appendChild(sel);
+        selects.push({ spec: entry, el: sel });
+        continue;
+      }
+      if (typeof entry !== "string" && entry.kind === "color") {
+        const wrap2 = document.createElement("div");
+        wrap2.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;
+          root.querySelectorAll(".bb-color-pop").forEach((p) => p.hidden = true);
+          pop2.hidden = !open;
+          if (!pop2.hidden) {
+            const onDoc = (ev) => {
+              if (!wrap2.contains(ev.target)) {
+                pop2.hidden = true;
+                document.removeEventListener("pointerdown", onDoc, true);
+              }
+            };
+            document.addEventListener("pointerdown", onDoc, true);
+          }
+        });
+        wrap2.append(btn2, pop2);
+        groupEl.appendChild(wrap2);
+        colors.push({ spec: entry, bar });
+        continue;
+      }
+      const item = items[entry] ?? { title: entry };
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "bb-toolbar-btn" + (item.className ? ` ${item.className}` : "");
+      btn.title = item.title;
+      btn.setAttribute("aria-label", item.title);
+      if (item.svg) btn.innerHTML = item.svg;
+      else btn.textContent = item.label ?? entry;
+      btn.addEventListener("mousedown", (e) => e.preventDefault());
+      btn.addEventListener("click", () => {
+        if (!latest) return;
+        editor.commands.get(entry)?.run(latest, (tr) => editor.dispatch(tr));
+        editor.focus();
+      });
+      groupEl.appendChild(btn);
+      buttons.push({ name: entry, el: btn });
+    }
+    root.appendChild(groupEl);
+  }
+  const moreBtn = document.createElement("button");
+  moreBtn.type = "button";
+  moreBtn.className = "bb-toolbar-btn bb-toolbar-more";
+  moreBtn.title = "More tools";
+  moreBtn.setAttribute("aria-label", "More tools");
+  moreBtn.setAttribute("aria-expanded", "false");
+  moreBtn.innerHTML = '<svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true"><circle cx="8" cy="3.2" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="8" cy="12.8" r="1.4"/></svg>';
+  moreBtn.style.display = "none";
+  root.appendChild(moreBtn);
+  const pop = document.createElement("div");
+  pop.className = "bb-toolbar-pop";
+  pop.hidden = true;
+  wrap.append(root, pop);
+  host.appendChild(wrap);
+  const closePop = () => {
+    pop.hidden = true;
+    moreBtn.setAttribute("aria-expanded", "false");
+  };
+  const onDocPointer = (e) => {
+    if (!pop.hidden && !wrap.contains(e.target)) closePop();
+  };
+  document.addEventListener("pointerdown", onDocPointer, true);
+  moreBtn.addEventListener("mousedown", (e) => e.preventDefault());
+  moreBtn.addEventListener("click", () => {
+    pop.hidden = !pop.hidden;
+    moreBtn.setAttribute("aria-expanded", String(!pop.hidden));
+  });
+  const fits = () => root.scrollWidth <= root.clientWidth + 1;
+  const layout = () => {
+    while (pop.firstChild) root.insertBefore(pop.firstChild, moreBtn);
+    moreBtn.style.display = "none";
+    closePop();
+    if (fits()) return;
+    moreBtn.style.display = "";
+    const groupEls = Array.from(root.children).filter((el) => el.classList.contains("bb-toolbar-group"));
+    for (let i = groupEls.length - 1; i >= 0 && !fits(); i--) {
+      pop.insertBefore(groupEls[i], pop.firstChild);
+    }
+  };
+  let ro = null;
+  if (typeof ResizeObserver !== "undefined") {
+    ro = new ResizeObserver(layout);
+    ro.observe(root);
+  }
+  window.addEventListener("resize", layout);
+  layout();
+  const refresh = (state) => {
+    latest = state;
+    for (const { name, el } 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;
+    }
+    for (const { spec, el } of selects) el.value = spec.value(state);
+    for (const { spec, bar } of colors) bar.style.background = spec.value(state) ?? "";
+  };
+  const off = editor.onChange((c) => refresh(c.state));
+  try {
+    refresh(editor.state);
+  } catch {
+  }
+  return {
+    destroy() {
+      off();
+      ro?.disconnect();
+      window.removeEventListener("resize", layout);
+      document.removeEventListener("pointerdown", onDocPointer, true);
+      wrap.remove();
+    }
+  };
+}
+
+// packages/ui/src/lib/menubar.ts
+var DEFAULT_LABELS = {
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  strike: "Strikethrough",
+  superscript: "Superscript",
+  subscript: "Subscript",
+  "align-left": "Align left",
+  "align-center": "Center",
+  "align-right": "Align right",
+  "align-justify": "Justify",
+  "bullet-list": "Bullet list",
+  "ordered-list": "Numbered list",
+  "heading-1": "Heading 1",
+  "heading-2": "Heading 2",
+  "heading-3": "Heading 3",
+  "heading-4": "Heading 4",
+  "heading-5": "Heading 5",
+  "heading-6": "Heading 6",
+  undo: "Undo",
+  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}
+.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}
+.bb-menubar-title:hover,.bb-menubar-title[aria-expanded="true"]{background:var(--bb-ui-hover,#f1efe8)}
+.bb-menu{position:absolute;top:100%;left:0;min-width:200px;margin-top:3px;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);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,.14);z-index:1000}
+.bb-menu[hidden]{display:none}
+.bb-menu-sub{position:relative}
+.bb-submenu{top:-5px;left:100%;margin-left:2px;display:none}
+.bb-menu-sub:hover>.bb-submenu,.bb-menu-sub:focus-within>.bb-submenu{display:block}
+.bb-submenu-widget{padding:8px;min-width:0}
+.bb-menu-item{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 10px 0 6px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;white-space:nowrap;cursor:pointer}
+.bb-menu-item:hover,.bb-menu-item:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
+.bb-menu-item:disabled{opacity:.4;cursor:default}
+.bb-menu-check{width:14px;flex:none;display:inline-flex;justify-content:center;color:var(--bb-ui-active-fg,#0c447c)}
+.bb-menu-label{flex:1 1 auto}
+.bb-menu-shortcut{flex:none;opacity:.5;font-size:12px;padding-left:24px}
+.bb-menu-arrow{flex:none;opacity:.55;padding-left:12px}
+.bb-menu-sep{height:1px;margin:4px 6px;background:var(--bb-ui-border,#e3e3e0)}
+.bb-menubar-v{flex-direction:column;align-items:stretch;gap:1px;border-bottom:none;padding:4px}
+.bb-menubar-v .bb-menubar-title{text-align:left;width:100%}
+.bb-menubar-v .bb-menu{top:auto;bottom:0;left:100%;margin-top:0;margin-left:4px}
+`;
+function defaultMenus(commands) {
+  const names = [...commands].map((c) => c.name);
+  const marks = ["bold", "italic", "underline", "strike"].filter((n) => commands.has(n));
+  const aligns = names.filter((n) => n.startsWith("align-"));
+  const entries = [
+    ...marks.map((command) => ({ command })),
+    ...marks.length && aligns.length ? ["separator"] : [],
+    ...aligns.map((command) => ({ command }))
+  ];
+  return entries.length ? [{ label: "Format", entries }] : [];
+}
+function mountMenubar(host, editor, options = {}) {
+  injectStyle("bb-ui-menubar-styles", STYLE3);
+  const labels = { ...DEFAULT_LABELS, ...options.labels ?? {} };
+  const menus = options.menus ?? defaultMenus(editor.commands);
+  const vertical = options.orientation === "vertical";
+  const root = document.createElement("div");
+  root.className = "bb-menubar" + (vertical ? " bb-menubar-v" : "");
+  root.setAttribute("role", "menubar");
+  if (vertical) root.setAttribute("aria-orientation", "vertical");
+  const panels = [];
+  const checks = [];
+  const enables = [];
+  let openIdx = -1;
+  let latest = null;
+  const close = (refocusTitle = false) => {
+    if (openIdx < 0) return;
+    const p = panels[openIdx];
+    p.dropdown.hidden = true;
+    p.title.setAttribute("aria-expanded", "false");
+    if (refocusTitle) p.title.focus();
+    openIdx = -1;
+  };
+  const open = (idx, focusFirst = false) => {
+    if (openIdx === idx) return;
+    close();
+    const p = panels[idx];
+    p.dropdown.hidden = false;
+    p.title.setAttribute("aria-expanded", "true");
+    openIdx = idx;
+    if (latest) refresh(latest);
+    if (focusFirst) p.dropdown.querySelector(".bb-menu-item")?.focus();
+  };
+  const makeRow = (label, opts) => {
+    const item = document.createElement("button");
+    item.type = "button";
+    item.className = "bb-menu-item" + (opts.hasSub ? " bb-has-sub" : "");
+    item.addEventListener("mousedown", (e) => e.preventDefault());
+    const check = document.createElement("span");
+    check.className = "bb-menu-check";
+    const text = document.createElement("span");
+    text.className = "bb-menu-label";
+    text.textContent = label;
+    item.append(check, text);
+    if (opts.shortcut) {
+      const sc = document.createElement("span");
+      sc.className = "bb-menu-shortcut";
+      sc.textContent = opts.shortcut;
+      item.appendChild(sc);
+    }
+    if (opts.hasSub) {
+      const arrow = document.createElement("span");
+      arrow.className = "bb-menu-arrow";
+      arrow.textContent = "\u203A";
+      item.appendChild(arrow);
+    }
+    return { item, check };
+  };
+  const buildEntries = (entries, container) => {
+    for (const entry of entries) {
+      if (entry === "separator") {
+        const sep = document.createElement("div");
+        sep.className = "bb-menu-sep";
+        sep.setAttribute("role", "separator");
+        container.appendChild(sep);
+      } else if ("submenu" in entry || "widget" in entry) {
+        const wrap = document.createElement("div");
+        wrap.className = "bb-menu-sub";
+        const { item } = makeRow(entry.label, { hasSub: true });
+        item.setAttribute("aria-haspopup", "true");
+        const flyout = document.createElement("div");
+        flyout.className = "bb-menu bb-submenu";
+        flyout.setAttribute("role", "menu");
+        if ("widget" in entry) {
+          flyout.classList.add("bb-submenu-widget");
+          flyout.appendChild(entry.widget(() => close()));
+        } else {
+          buildEntries(entry.submenu, flyout);
+        }
+        wrap.append(item, flyout);
+        container.appendChild(wrap);
+      } else if ("command" in entry) {
+        const cmd = editor.commands.get(entry.command);
+        if (!cmd) continue;
+        const { item, check } = makeRow(entry.label ?? labels[entry.command] ?? entry.command, {});
+        item.setAttribute("role", "menuitemcheckbox");
+        item.addEventListener("click", () => {
+          if (latest) editor.commands.get(entry.command)?.run(latest, (tr) => editor.dispatch(tr));
+          close();
+          editor.focus();
+        });
+        checks.push({ el: check, active: (s) => cmd.isActive?.(s) ?? false });
+        if (cmd.isEnabled) enables.push({ el: item, enabled: (s) => cmd.isEnabled(s) });
+        container.appendChild(item);
+      } else {
+        const { item, check } = makeRow(entry.label, { shortcut: entry.shortcut });
+        item.setAttribute("role", entry.isActive ? "menuitemcheckbox" : "menuitem");
+        item.addEventListener("click", () => {
+          entry.run();
+          close();
+        });
+        if (entry.isActive) checks.push({ el: check, active: () => entry.isActive() });
+        if (entry.isEnabled) enables.push({ el: item, enabled: () => entry.isEnabled() });
+        container.appendChild(item);
+      }
+    }
+  };
+  menus.forEach((menu, idx) => {
+    const wrap = document.createElement("div");
+    wrap.className = "bb-menubar-menu";
+    const title = document.createElement("button");
+    title.type = "button";
+    title.className = "bb-menubar-title";
+    title.textContent = menu.label;
+    title.setAttribute("role", "menuitem");
+    title.setAttribute("aria-haspopup", "true");
+    title.setAttribute("aria-expanded", "false");
+    const dropdown = document.createElement("div");
+    dropdown.className = "bb-menu";
+    dropdown.setAttribute("role", "menu");
+    dropdown.hidden = true;
+    title.addEventListener("mousedown", (e) => e.preventDefault());
+    title.addEventListener("click", () => openIdx === idx ? close() : open(idx));
+    title.addEventListener("mouseenter", () => {
+      if (openIdx >= 0 && openIdx !== idx) open(idx);
+    });
+    title.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " || vertical && e.key === "ArrowRight") {
+        e.preventDefault();
+        open(idx, true);
+      }
+    });
+    buildEntries(menu.entries, dropdown);
+    wrap.append(title, dropdown);
+    root.appendChild(wrap);
+    panels.push({ title, dropdown });
+  });
+  host.appendChild(root);
+  const onDocPointer = (e) => {
+    if (openIdx >= 0 && !root.contains(e.target)) close();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape" && openIdx >= 0) {
+      e.preventDefault();
+      close(true);
+    }
+  };
+  document.addEventListener("pointerdown", onDocPointer);
+  document.addEventListener("keydown", onKey);
+  function refresh(state) {
+    latest = state;
+    if (openIdx < 0) return;
+    for (const c of checks) c.el.textContent = c.active(state) ? "\u2713" : "";
+    for (const e of enables) e.el.disabled = !e.enabled(state);
+  }
+  const off = editor.onChange((c) => refresh(c.state));
+  try {
+    latest = editor.state;
+  } catch {
+  }
+  return {
+    destroy() {
+      off();
+      document.removeEventListener("pointerdown", onDocPointer);
+      document.removeEventListener("keydown", onKey);
+      root.remove();
+    }
+  };
+}
+
+// packages/ui/src/lib/find.ts
+var DEFAULT_LABELS2 = {
+  title: "Find and replace",
+  find: "Find\u2026",
+  replace: "Replace\u2026",
+  prev: "Previous",
+  next: "Next",
+  replaceOne: "Replace",
+  replaceAll: "Replace all"
+};
+var STYLE4 = `
+.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-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:hover:not(:disabled){background:var(--bb-ui-hover,#f1efe8)}
+.bb-find-btn:disabled{opacity:.4;cursor:default}
+`;
+function createFindDialog(find, options = {}) {
+  injectStyle("bb-ui-find-styles", STYLE4);
+  const labels = { ...DEFAULT_LABELS2, ...options.labels ?? {} };
+  const root = document.createElement("div");
+  root.className = "bb-find";
+  const findInput = document.createElement("input");
+  findInput.type = "text";
+  findInput.className = "bb-find-input";
+  findInput.placeholder = labels.find;
+  findInput.setAttribute("aria-label", labels.find);
+  const count = document.createElement("span");
+  count.className = "bb-find-count";
+  count.textContent = "0";
+  const mkBtn = (label, title) => {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-find-btn";
+    b.textContent = label;
+    b.title = title;
+    b.setAttribute("aria-label", title);
+    return b;
+  };
+  const prev = mkBtn("\u25C0", labels.prev);
+  const next = mkBtn("\u25B6", labels.next);
+  const replaceInput = document.createElement("input");
+  replaceInput.type = "text";
+  replaceInput.className = "bb-find-input";
+  replaceInput.placeholder = labels.replace;
+  replaceInput.setAttribute("aria-label", labels.replace);
+  const replaceOne = mkBtn(labels.replaceOne, labels.replaceOne);
+  const replaceAll = mkBtn(labels.replaceAll, labels.replaceAll);
+  const row1 = document.createElement("div");
+  row1.className = "bb-find-row";
+  row1.append(findInput, count, prev, next);
+  const row2 = document.createElement("div");
+  row2.className = "bb-find-row";
+  row2.append(replaceInput, replaceOne, replaceAll);
+  root.append(row1, row2);
+  const matchButtons = [prev, next, replaceOne, replaceAll];
+  findInput.addEventListener("input", () => find.setQuery(findInput.value));
+  findInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      find.next();
+    }
+  });
+  prev.addEventListener("click", () => find.prev());
+  next.addEventListener("click", () => find.next());
+  replaceOne.addEventListener("click", () => find.replaceCurrent(replaceInput.value));
+  replaceAll.addEventListener("click", () => find.replaceAll(replaceInput.value));
+  const off = find.onState((s) => {
+    count.textContent = s.count ? `${s.active}/${s.count}` : "0";
+    for (const b of matchButtons) b.disabled = s.count === 0;
+  });
+  for (const b of matchButtons) b.disabled = true;
+  const dialog = new Dialog({
+    title: labels.title,
+    modal: options.modal ?? false,
+    anchor: options.anchor,
+    className: "bb-find-dialog"
+  });
+  dialog.setContent(root);
+  dialog.onClose(() => {
+    find.clear();
+    findInput.value = "";
+  });
+  const openPanel = () => {
+    dialog.open();
+    findInput.focus();
+    findInput.select();
+  };
+  const onHotkey = (e) => {
+    if ((e.metaKey || e.ctrlKey) && !e.altKey && (e.key === "f" || e.key === "F")) {
+      e.preventDefault();
+      openPanel();
+    }
+  };
+  if (options.shortcut !== false) document.addEventListener("keydown", onHotkey);
+  return {
+    open: openPanel,
+    close() {
+      dialog.close();
+    },
+    destroy() {
+      document.removeEventListener("keydown", onHotkey);
+      off();
+      dialog.destroy();
+    }
+  };
+}
+
+// packages/ui/src/lib/context-menu.ts
+var STYLE5 = `
+.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}
+.bb-ctx-item:hover:not(:disabled),.bb-ctx-item:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
+.bb-ctx-item:disabled{opacity:.4;cursor:default}
+.bb-ctx-label{flex:1 1 auto}
+.bb-ctx-shortcut{flex:none;opacity:.5;font-size:12px}
+.bb-ctx-sep{height:1px;margin:4px 6px;background:var(--bb-ui-border,#e3e3e0)}
+`;
+var current = null;
+function closeCurrent() {
+  if (current) {
+    const dispose = current;
+    current = null;
+    dispose();
+  }
+}
+function showContextMenu(entries, at) {
+  injectStyle("bb-ui-contextmenu-styles", STYLE5);
+  closeCurrent();
+  const el = document.createElement("div");
+  el.className = "bb-ctx";
+  el.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);
+      continue;
+    }
+    const item = document.createElement("button");
+    item.type = "button";
+    item.className = "bb-ctx-item";
+    item.setAttribute("role", "menuitem");
+    item.disabled = entry.enabled === false;
+    const label = document.createElement("span");
+    label.className = "bb-ctx-label";
+    label.textContent = entry.label;
+    item.appendChild(label);
+    if (entry.shortcut) {
+      const sc = document.createElement("span");
+      sc.className = "bb-ctx-shortcut";
+      sc.textContent = entry.shortcut;
+      item.appendChild(sc);
+    }
+    item.addEventListener("mousedown", (e) => e.preventDefault());
+    item.addEventListener("click", () => {
+      closeCurrent();
+      entry.run();
+    });
+    el.appendChild(item);
+  }
+  document.body.appendChild(el);
+  const r = el.getBoundingClientRect();
+  el.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
+  el.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
+  const items = () => Array.from(el.querySelectorAll(".bb-ctx-item:not(:disabled)"));
+  const onDown = (e) => {
+    if (!el.contains(e.target)) closeCurrent();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") return closeCurrent();
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const list = items();
+      const i = list.indexOf(document.activeElement);
+      const next = e.key === "ArrowDown" ? (i + 1) % list.length : (i - 1 + list.length) % list.length;
+      list[next]?.focus();
+    }
+  };
+  const onScroll = () => closeCurrent();
+  setTimeout(() => {
+    document.addEventListener("pointerdown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onScroll, true);
+  }, 0);
+  current = () => {
+    document.removeEventListener("pointerdown", onDown, true);
+    document.removeEventListener("keydown", onKey, true);
+    window.removeEventListener("scroll", onScroll, true);
+    el.remove();
+  };
+  items()[0]?.focus();
+  return { close: closeCurrent };
+}
+
+// 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" },
+  { key: "dashed", label: "Dashed" },
+  { key: "dotted", label: "Dotted" },
+  { key: "double", label: "Double" }
+];
+var VALIGNS = [
+  { key: "top", label: "Top" },
+  { key: "center", label: "Middle" },
+  { key: "bottom", label: "Bottom" }
+];
+var PRESETS = [
+  { 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: "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 }
+];
+var STYLE6 = `
+.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-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.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-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-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";
+var INACTIVE = "#c9c7be";
+var presetLine = (x1, y1, x2, y2, on) => `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${on ? ACTIVE : INACTIVE}" stroke-width="${on ? 1.6 : 1}" ${on ? "" : 'stroke-dasharray="1.5 1.5"'} stroke-linecap="round"/>`;
+var presetIcon = (s) => `<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">` + presetLine(3, 3, 17, 3, s[0]) + presetLine(17, 3, 17, 17, s[1]) + presetLine(3, 17, 17, 17, s[2]) + presetLine(3, 3, 3, 17, s[3]) + presetLine(3, 10, 17, 10, s[4]) + presetLine(10, 3, 10, 17, s[5]) + `</svg>`;
+var section = (label) => {
+  const sec = document.createElement("div");
+  const l = document.createElement("div");
+  l.className = "bb-cp-label";
+  l.textContent = label;
+  sec.appendChild(l);
+  return sec;
+};
+function openCellProperties({ initial, singleCell, onApply }) {
+  injectStyle("bb-ui-cellprops-styles", STYLE6);
+  let background = initial.background;
+  let vAlign = initial.vAlign;
+  let penWidthPt = 1;
+  let penStyle = "solid";
+  let penColor = "#000000";
+  let preset = null;
+  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();
+    }
+  });
+  hexRow.append(hexPreview, hex);
+  fill.append(swatches, hexRow);
+  const valign = section("Vertical alignment");
+  const seg = document.createElement("div");
+  seg.className = "bb-cp-seg";
+  const vaBtns = /* @__PURE__ */ new Map();
+  for (const { key, label } of VALIGNS) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bb-cp-segbtn";
+    b.textContent = label;
+    b.addEventListener("click", () => {
+      vAlign = key;
+      syncVAlign();
+    });
+    seg.appendChild(b);
+    vaBtns.set(key, b);
+  }
+  valign.appendChild(seg);
+  const borders = section("Borders");
+  const penRow = document.createElement("div");
+  penRow.className = "bb-cp-penrow";
+  const widthSel = document.createElement("select");
+  widthSel.className = "bb-cp-select";
+  for (const pt of PT_WIDTHS) {
+    const o = document.createElement("option");
+    o.value = String(pt);
+    o.textContent = `${pt} pt`;
+    if (pt === penWidthPt) o.selected = true;
+    widthSel.appendChild(o);
+  }
+  widthSel.addEventListener("change", () => penWidthPt = Number(widthSel.value));
+  const styleSel = document.createElement("select");
+  styleSel.className = "bb-cp-select";
+  for (const { key, label } of STYLES) {
+    const o = document.createElement("option");
+    o.value = key;
+    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 });
+  }
+  const grid = document.createElement("div");
+  grid.className = "bb-cp-presets";
+  const presetEls = [];
+  for (const p of PRESETS) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "bb-cp-preset";
+    btn.title = p.label;
+    btn.setAttribute("aria-label", p.label);
+    btn.innerHTML = presetIcon(p.sides);
+    btn.disabled = singleCell && p.inside;
+    btn.addEventListener("click", () => {
+      preset = preset === p.key ? null : p.key;
+      syncPresets();
+    });
+    grid.appendChild(btn);
+    presetEls.push({ el: btn, key: p.key });
+  }
+  borders.append(grid, penRow, colors);
+  const footer = document.createElement("div");
+  footer.className = "bb-cp-footer";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "bb-cp-btn";
+  cancel.textContent = "Cancel";
+  const apply = document.createElement("button");
+  apply.type = "button";
+  apply.className = "bb-cp-btn bb-cp-primary";
+  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);
+  }
+  syncFill();
+  syncVAlign();
+  syncColors();
+  syncPresets();
+  const dialog = new Dialog({ title: "Cell properties", modal: true });
+  dialog.setContent(root);
+  dialog.onClose(() => dialog.destroy());
+  cancel.addEventListener("click", () => dialog.close());
+  apply.addEventListener("click", () => {
+    const result = { background, vAlign };
+    if (preset) {
+      result.border = { preset, width: penWidthPt * 96 / 72, style: penStyle, color: penColor };
+    }
+    onApply(result);
+    dialog.close();
+  });
+  dialog.open();
+}
+
+// packages/ui/src/lib/table-grid.ts
+var STYLE7 = `
+.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.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", STYLE7);
+  const maxRows = options.maxRows ?? 8;
+  const maxCols = options.maxCols ?? 10;
+  const root = document.createElement("div");
+  root.className = "bb-grid";
+  const cellsEl = document.createElement("div");
+  cellsEl.className = "bb-grid-cells";
+  cellsEl.style.gridTemplateColumns = `repeat(${maxCols}, 15px)`;
+  const label = document.createElement("div");
+  label.className = "bb-grid-label";
+  label.textContent = "0 \xD7 0";
+  const cells = [];
+  const highlight = (r, c) => {
+    for (let i = 0; i < cells.length; i++) {
+      const row = Math.floor(i / maxCols);
+      const col = i % maxCols;
+      cells[i].classList.toggle("on", row <= r && col <= c);
+    }
+    label.textContent = `${r + 1} \xD7 ${c + 1}`;
+  };
+  for (let r = 0; r < maxRows; r++) {
+    for (let c = 0; c < maxCols; c++) {
+      const cell = document.createElement("button");
+      cell.type = "button";
+      cell.className = "bb-grid-cell";
+      cell.addEventListener("mousedown", (e) => e.preventDefault());
+      cell.addEventListener("mouseenter", () => highlight(r, c));
+      cell.addEventListener("click", () => options.onPick(r + 1, c + 1));
+      cells.push(cell);
+      cellsEl.appendChild(cell);
+    }
+  }
+  root.append(cellsEl, label);
+  return root;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  createFindDialog,
+  defaultMenus,
+  defaultToolbarGroups,
+  mountMenubar,
+  mountToolbar,
+  openCellProperties,
+  promptDialog,
+  showContextMenu,
+  tableGridPicker
+});