@shadow-garden/bapbong-ui 0.8.0 → 0.10.0

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
   cmToPx: () => cmToPx,
   colorButton: () => colorButton,
   createFindDialog: () => createFindDialog,
+  createSectionChip: () => createSectionChip,
   defaultMenus: () => defaultMenus,
   defaultToolbarGroups: () => defaultToolbarGroups,
   marginPresetPicker: () => marginPresetPicker,
@@ -36,11 +37,15 @@ __export(index_exports, {
   openMarginsDialog: () => openMarginsDialog,
   openPageSizeDialog: () => openPageSizeDialog,
   orientationPicker: () => orientationPicker,
+  pageNumberPicker: () => pageNumberPicker,
   pageSizePicker: () => pageSizePicker,
   promptDialog: () => promptDialog,
   pxToCm: () => pxToCm,
+  sectionPaperPanel: () => sectionPaperPanel,
   showContextMenu: () => showContextMenu,
   showLinkPanel: () => showLinkPanel,
+  showMenu: () => showMenu,
+  showPopup: () => showPopup,
   tableGridPicker: () => tableGridPicker
 });
 module.exports = __toCommonJS(index_exports);
@@ -946,10 +951,185 @@ var STYLE4 = `
 .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-popup{position:fixed;top:auto;left:auto;margin-top:0;z-index:1200;font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);color:var(--bb-ui-fg,#2c2c2a);font-size:13px}
 .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 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 };
+}
+function buildMenuEntries(entries, container, ctx) {
+  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");
+        const build = () => flyout.replaceChildren(entry.widget(() => ctx.close()));
+        wrap.addEventListener("mouseenter", build);
+        wrap.addEventListener("focusin", build);
+      } else {
+        buildMenuEntries(entry.submenu, flyout, ctx);
+      }
+      wrap.append(item, flyout);
+      container.appendChild(wrap);
+    } else if ("command" in entry) {
+      const editor = ctx.editor;
+      const cmd = editor?.commands.get(entry.command);
+      if (!editor || !cmd) continue;
+      const { item, check } = makeRow(
+        entry.label ?? ctx.labels[entry.command] ?? entry.command,
+        {}
+      );
+      item.setAttribute("role", "menuitemcheckbox");
+      item.addEventListener("click", () => {
+        const s = ctx.state();
+        if (s)
+          editor.commands.get(entry.command)?.run(s, (tr) => editor.dispatch(tr));
+        ctx.close();
+        editor.focus();
+      });
+      ctx.check(check, (s) => cmd.isActive?.(s) ?? false);
+      if (cmd.isEnabled) ctx.enable(item, (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();
+        ctx.close();
+      });
+      if (entry.isActive) ctx.check(check, () => entry.isActive());
+      if (entry.isEnabled) ctx.enable(item, () => entry.isEnabled());
+      container.appendChild(item);
+    }
+  }
+}
+var currentPopup = null;
+function closeCurrentPopup() {
+  if (currentPopup) {
+    const dispose = currentPopup;
+    currentPopup = null;
+    dispose();
+  }
+}
+function showPopup(content, at, onClose) {
+  injectStyle("bb-ui-menubar-styles", STYLE4);
+  closeCurrentPopup();
+  const el2 = document.createElement("div");
+  el2.className = "bb-menu bb-popup";
+  el2.setAttribute("role", "menu");
+  el2.appendChild(content);
+  document.body.appendChild(el2);
+  const place = () => {
+    const r = el2.getBoundingClientRect();
+    el2.style.left = `${Math.max(4, Math.min(at.x, window.innerWidth - r.width - 4))}px`;
+    el2.style.top = `${Math.max(4, Math.min(at.y, window.innerHeight - r.height - 4))}px`;
+  };
+  place();
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    document.removeEventListener("pointerdown", onPointer, true);
+    document.removeEventListener("keydown", onKey, true);
+    document.removeEventListener("scroll", onScroll, true);
+    el2.remove();
+    onClose?.();
+  };
+  const close = () => {
+    if (currentPopup === dispose) currentPopup = null;
+    dispose();
+  };
+  const onPointer = (e) => {
+    if (!el2.contains(e.target)) close();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    }
+  };
+  const onScroll = (e) => {
+    if (!el2.contains(e.target)) close();
+  };
+  document.addEventListener("pointerdown", onPointer, true);
+  document.addEventListener("keydown", onKey, true);
+  document.addEventListener("scroll", onScroll, true);
+  currentPopup = dispose;
+  return { close, el: el2 };
+}
+function showMenu(entries, at, options = {}) {
+  const labels = { ...DEFAULT_LABELS, ...options.labels ?? {} };
+  const stateOf = () => {
+    try {
+      return options.editor?.state ?? null;
+    } catch {
+      return null;
+    }
+  };
+  const container = document.createElement("div");
+  let handle = null;
+  const evalNow = (fn, fallback) => {
+    try {
+      return fn(stateOf());
+    } catch {
+      return fallback;
+    }
+  };
+  buildMenuEntries(entries, container, {
+    close: () => handle?.close(),
+    labels,
+    editor: options.editor,
+    state: stateOf,
+    check: (el2, active) => {
+      el2.textContent = evalNow(active, false) ? "\u2713" : "";
+    },
+    enable: (el2, enabled) => {
+      el2.disabled = !evalNow(enabled, true);
+    }
+  });
+  handle = showPopup(container, at, options.onClose);
+  return handle;
+}
 function defaultMenus(commands) {
   const names = [...commands].map((c) => c.name);
   const marks = ["bold", "italic", "underline", "strike"].filter(
@@ -996,94 +1176,15 @@ function mountMenubar(host, editor, options = {}) {
     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");
-          const build = () => flyout.replaceChildren(entry.widget(() => close()));
-          wrap.addEventListener("mouseenter", build);
-          wrap.addEventListener("focusin", build);
-        } 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);
-      }
-    }
+  const buildCtx = {
+    close: () => close(),
+    labels,
+    editor,
+    state: () => latest,
+    check: (el2, active) => checks.push({ el: el2, active }),
+    enable: (el2, enabled) => enables.push({ el: el2, enabled })
   };
+  const buildEntries = (entries, container) => buildMenuEntries(entries, container, buildCtx);
   menus.forEach((menu, idx) => {
     const wrap = document.createElement("div");
     wrap.className = "bb-menubar-menu";
@@ -1856,6 +1957,7 @@ function fmtCm(cm) {
 }
 var STYLE10 = `
 .bb-ps{display:flex;flex-direction:column;min-width:250px;max-height:min(70vh,460px);overflow-y:auto}
+.bb-ps,.bb-ps *{box-sizing:border-box}
 .bb-ps-row{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
 .bb-ps-row:hover,.bb-ps-row:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
 .bb-ps-row[aria-checked="true"]{background:var(--bb-ui-active-bg,#e6f1fb)}
@@ -1872,6 +1974,16 @@ var STYLE10 = `
 .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}
+.bb-pn-input{width:66px;height:24px;padding:0 6px;border:1px solid var(--bb-ui-control-border,var(--bb-ui-border,#d8d6cf));border-radius:5px;background:var(--bb-ui-control-bg,var(--bb-ui-bg,#fff));color:inherit;font:inherit;font-size:12px}
+.bb-pn-input:focus{outline:2px solid var(--bb-ui-active-border,#7fb2ec);outline-offset:-1px}
+.bb-pn-check{flex:none;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--bb-ui-border,#b4b2a9);border-radius:4px;background:var(--bb-ui-bg,#fff);color:#fff;font-size:10px;line-height:1}
+.bb-pn-check[data-on="true"]{background:var(--bb-ui-active-fg,#0c447c);border-color:var(--bb-ui-active-fg,#0c447c)}
+.bb-pn-body[data-disabled="true"]{opacity:.35;pointer-events:none}
+.bb-ps-group{padding:5px 10px 2px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;opacity:.55}
+.bb-ps-tiles{display:flex;gap:6px;padding:2px 6px 4px}
+.bb-ps-tile{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 5px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
+.bb-ps-tile:hover,.bb-ps-tile:focus{background:var(--bb-ui-hover,#f1efe8);outline:none}
+.bb-ps-tile[aria-checked="true"]{background:var(--bb-ui-active-bg,#e6f1fb)}
 `;
 var SVG_NS = "http://www.w3.org/2000/svg";
 function svgEl(name, attrs) {
@@ -2158,6 +2270,260 @@ function openMarginsDialog(options) {
   top.input.focus();
   top.input.select();
 }
+function numberPreview(sample) {
+  const svg = pagePreview(0.773);
+  const t = svgEl("text", {
+    x: 17,
+    y: 25,
+    "text-anchor": "middle",
+    "font-size": 11,
+    fill: "var(--bb-ui-fg,#2c2c2a)",
+    "fill-opacity": 0.75
+  });
+  t.textContent = sample;
+  svg.appendChild(t);
+  return svg;
+}
+var PGNUM_FORMATS = [
+  [void 0, "1, 2, 3, 4\u2026", "1"],
+  ["lowerRoman", "i, ii, iii, iv\u2026", "i"],
+  ["upperRoman", "I, II, III, IV\u2026", "I"],
+  ["lowerLetter", "a, b, c, d\u2026", "a"],
+  ["upperLetter", "A, B, C, D\u2026", "A"]
+];
+function pageNumberPicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  let body = root;
+  if (options.onToggleShown) {
+    const on = options.shown !== false;
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "bb-ps-row";
+    row.setAttribute("role", "menuitemcheckbox");
+    row.setAttribute("aria-checked", String(on));
+    const box = document.createElement("span");
+    box.className = "bb-pn-check";
+    box.dataset["on"] = String(on);
+    box.textContent = on ? "\u2713" : "";
+    const name = document.createElement("span");
+    name.className = "bb-ps-name";
+    name.textContent = options.labels?.shown ?? "Show page numbers";
+    row.append(box, name);
+    row.addEventListener("mousedown", (e) => e.preventDefault());
+    row.addEventListener("click", () => options.onToggleShown?.(!on));
+    root.appendChild(row);
+    const sep0 = document.createElement("div");
+    sep0.className = "bb-ps-sep";
+    root.appendChild(sep0);
+    body = document.createElement("div");
+    body.className = "bb-pn-body";
+    if (!on) body.dataset["disabled"] = "true";
+    root.appendChild(body);
+  }
+  const curFmt = options.fmt === "decimal" ? void 0 : options.fmt;
+  const emit = (fmt, start) => {
+    options.onPick(
+      fmt == null && start == null ? null : {
+        ...fmt != null ? { fmt } : {},
+        ...start != null ? { start } : {}
+      }
+    );
+  };
+  for (const [key, label, sample] of PGNUM_FORMATS) {
+    body.appendChild(
+      presetRow(
+        numberPreview(sample),
+        label,
+        captionLine(""),
+        curFmt === key,
+        () => emit(key, options.start)
+      )
+    );
+  }
+  const sep = document.createElement("div");
+  sep.className = "bb-ps-sep";
+  root.appendChild(sep);
+  const restart = document.createElement("div");
+  restart.className = "bb-ps-row";
+  restart.setAttribute("role", "menuitemradio");
+  restart.setAttribute("aria-checked", String(options.start != null));
+  const restartName = document.createElement("span");
+  restartName.className = "bb-ps-name";
+  restartName.style.flex = "1 1 auto";
+  restartName.textContent = options.labels?.restart ?? "Restart at";
+  const input = document.createElement("input");
+  input.type = "number";
+  input.min = "0";
+  input.step = "1";
+  input.className = "bb-pn-input";
+  input.value = String(options.start ?? 1);
+  const readStart = () => {
+    const v = Math.floor(Number(input.value));
+    return Number.isFinite(v) && v >= 0 && input.value.trim() !== "" ? v : options.start ?? 1;
+  };
+  restart.append(restartName, input);
+  restart.addEventListener("mousedown", (e) => {
+    if (e.target !== input) e.preventDefault();
+  });
+  restart.addEventListener("click", (e) => {
+    if (e.target !== input) emit(curFmt, readStart());
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      emit(curFmt, readStart());
+    }
+  });
+  input.addEventListener("wheel", (e) => e.preventDefault(), {
+    passive: false
+  });
+  body.appendChild(restart);
+  body.appendChild(
+    presetRow(
+      numberPreview("\u2192"),
+      options.labels?.continueFrom ?? "Continue from previous section",
+      captionLine(options.continueHint ?? ""),
+      options.start == null,
+      () => emit(curFmt, void 0)
+    )
+  );
+  return root;
+}
+function sectionPaperPanel(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE10);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  const group = (text) => {
+    const el2 = document.createElement("div");
+    el2.className = "bb-ps-group";
+    el2.textContent = text;
+    return el2;
+  };
+  const sep = () => {
+    const el2 = document.createElement("div");
+    el2.className = "bb-ps-sep";
+    return el2;
+  };
+  root.appendChild(group(options.labels?.orientation ?? "Orientation"));
+  const tiles = document.createElement("div");
+  tiles.className = "bb-ps-tiles";
+  const landscapeNow = options.page.width > options.page.height;
+  const short = Math.min(options.page.width, options.page.height);
+  const long = Math.max(options.page.width, options.page.height);
+  for (const [key, label, ratio] of [
+    ["portrait", "Portrait", short / long],
+    ["landscape", "Landscape", long / short]
+  ]) {
+    const tile = document.createElement("button");
+    tile.type = "button";
+    tile.className = "bb-ps-tile";
+    tile.setAttribute("role", "menuitemradio");
+    tile.setAttribute(
+      "aria-checked",
+      String(landscapeNow === (key === "landscape"))
+    );
+    const icon = pagePreview(ratio);
+    icon.setAttribute("style", "width:26px;height:32px");
+    const name = document.createElement("span");
+    name.textContent = label;
+    tile.append(icon, name);
+    tile.addEventListener("mousedown", (e) => e.preventDefault());
+    tile.addEventListener("click", () => options.onOrientation(key));
+    tiles.appendChild(tile);
+  }
+  root.appendChild(tiles);
+  root.appendChild(sep());
+  root.appendChild(group(options.labels?.pageSize ?? "Page size"));
+  for (const item of options.items) {
+    root.appendChild(
+      presetRow(
+        pagePreview(item.px[0] / item.px[1]),
+        item.label,
+        captionLine(`${fmtCm(item.cm[0])} x ${fmtCm(item.cm[1])}`),
+        !!item.active,
+        () => options.onPick(item.key)
+      )
+    );
+  }
+  root.appendChild(sep());
+  root.appendChild(
+    customRow(
+      pagePreview(0.773),
+      options.labels?.custom ?? "Custom page size",
+      "Define custom page size",
+      options.onCustom
+    )
+  );
+  return root;
+}
+
+// packages/ui/src/lib/section-chip.ts
+var STYLE11 = `
+.bb-secchip{position:absolute;z-index:8;display:inline-flex;align-items:center;transform:translate(-50%,-50%);white-space:nowrap;background:var(--bb-ui-menu-bg,#fff);-webkit-backdrop-filter:var(--bb-ui-pop-filter,none);backdrop-filter:var(--bb-ui-pop-filter,none);border:1px solid var(--bb-ui-pop-border,var(--bb-ui-border,#e3e3e0));border-radius:10px;padding:1px 2px;box-shadow:0 2px 10px rgba(0,0,0,.12);font-family:var(--bb-ui-font,system-ui,-apple-system,sans-serif);font-size:11px;color:var(--bb-ui-fg,#2c2c2a)}
+.bb-secchip *{box-sizing:border-box}
+.bb-secchip-title{padding:0 7px;font-size:11px;font-weight:600;opacity:.8}
+.bb-secchip-seg{display:inline-flex;align-items:center;gap:4px;height:16px;padding:0 7px;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer}
+.bb-secchip-seg:hover,.bb-secchip-seg[aria-expanded="true"]{background:var(--bb-ui-hover,#f1efe8)}
+.bb-secchip-caret{font-size:8px;opacity:.55}
+.bb-secchip-seg[data-muted="true"] .bb-secchip-seglabel{font-style:italic;opacity:.55}
+.bb-secchip-div{flex:none;width:1px;height:11px;margin:0 2px;background:var(--bb-ui-border,#e3e3e0)}
+.bb-secchip-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:16px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;opacity:.65;cursor:pointer}
+.bb-secchip-x:hover{background:var(--bb-ui-hover,#f1efe8);opacity:1}
+`;
+function createSectionChip(options) {
+  injectStyle("bb-ui-section-chip-styles", STYLE11);
+  const el2 = document.createElement("div");
+  el2.className = "bb-secchip";
+  const title = document.createElement("span");
+  title.className = "bb-secchip-title";
+  title.textContent = options.title;
+  const divider = () => {
+    const d = document.createElement("span");
+    d.className = "bb-secchip-div";
+    return d;
+  };
+  const segment = (aria, onOpen) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "bb-secchip-seg";
+    btn.setAttribute("aria-haspopup", "true");
+    if (aria) btn.setAttribute("aria-label", aria);
+    const label = document.createElement("span");
+    label.className = "bb-secchip-seglabel";
+    const caret = document.createElement("span");
+    caret.className = "bb-secchip-caret";
+    caret.textContent = "\u25BE";
+    btn.append(label, caret);
+    btn.addEventListener("mousedown", (e) => e.preventDefault());
+    btn.addEventListener("click", () => onOpen(btn));
+    return { btn, label };
+  };
+  const nums = segment(options.ariaPageNumbers, options.onPageNumbers);
+  const paper = segment(options.ariaPaper, options.onPaper);
+  const x = document.createElement("button");
+  x.type = "button";
+  x.className = "bb-secchip-x";
+  x.setAttribute("aria-label", options.ariaDelete ?? "Remove section break");
+  x.innerHTML = '<svg viewBox="0 0 16 16" width="9" height="9" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M3 3l10 10M13 3 3 13"/></svg>';
+  x.addEventListener("mousedown", (e) => e.preventDefault());
+  x.addEventListener("click", () => options.onDelete());
+  el2.append(title, divider(), nums.btn, divider(), paper.btn, divider(), x);
+  return {
+    el: el2,
+    update(data) {
+      nums.label.textContent = data.pageNumbers;
+      nums.btn.dataset["muted"] = String(!!data.pageNumbersMuted);
+      paper.label.textContent = data.paper;
+    },
+    destroy() {
+      el2.remove();
+    }
+  };
+}
 
 // packages/ui/src/lib/font-dialog.ts
 var twipsToPt = (tw) => tw / 20;
@@ -2166,7 +2532,7 @@ var halfToPt = (hp) => hp / 2;
 var ptToHalf = (pt) => Math.round(pt * 2);
 var SCALE_PRESETS = [200, 150, 100, 90, 80, 66, 50, 33];
 var SUPERSUB_SCALE = 0.66;
-var STYLE11 = `
+var STYLE12 = `
 .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
@@ -2248,7 +2614,7 @@ function openFontDialog({
   sizes,
   onApply
 }) {
-  injectStyle("bb-font-dialog", STYLE11);
+  injectStyle("bb-font-dialog", STYLE12);
   const dialog = new Dialog({ title: "Font", modal: true });
   const root = el("div", "bb-fd");
   const tabs = el("div", "bb-fd-tabs");
@@ -2494,6 +2860,7 @@ function openFontDialog({
   cmToPx,
   colorButton,
   createFindDialog,
+  createSectionChip,
   defaultMenus,
   defaultToolbarGroups,
   marginPresetPicker,
@@ -2505,10 +2872,14 @@ function openFontDialog({
   openMarginsDialog,
   openPageSizeDialog,
   orientationPicker,
+  pageNumberPicker,
   pageSizePicker,
   promptDialog,
   pxToCm,
+  sectionPaperPanel,
   showContextMenu,
   showLinkPanel,
+  showMenu,
+  showPopup,
   tableGridPicker
 });

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './lib/link-panel.js';
 export * from './lib/cell-properties.js';
 export * from './lib/table-grid.js';
 export * from './lib/page-setup.js';
+export * from './lib/section-chip.js';
 export * from './lib/font-dialog.js';
 export * from './lib/color-picker.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}