@shadow-garden/bapbong-ui 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -21,13 +21,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Dialog: () => Dialog,
+  cmToPx: () => cmToPx,
   createFindDialog: () => createFindDialog,
   defaultMenus: () => defaultMenus,
   defaultToolbarGroups: () => defaultToolbarGroups,
+  marginPresetPicker: () => marginPresetPicker,
   mountMenubar: () => mountMenubar,
   mountToolbar: () => mountToolbar,
   openCellProperties: () => openCellProperties,
+  openMarginsDialog: () => openMarginsDialog,
+  openPageSizeDialog: () => openPageSizeDialog,
+  orientationPicker: () => orientationPicker,
+  pageSizePicker: () => pageSizePicker,
   promptDialog: () => promptDialog,
+  pxToCm: () => pxToCm,
   showContextMenu: () => showContextMenu,
   showLinkPanel: () => showLinkPanel,
   tableGridPicker: () => tableGridPicker
@@ -670,7 +677,9 @@ var STYLE3 = `
 `;
 function defaultMenus(commands) {
   const names = [...commands].map((c) => c.name);
-  const marks = ["bold", "italic", "underline", "strike"].filter((n) => commands.has(n));
+  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 })),
@@ -709,7 +718,8 @@ function mountMenubar(host, editor, options = {}) {
     p.title.setAttribute("aria-expanded", "true");
     openIdx = idx;
     if (latest) refresh(latest);
-    if (focusFirst) p.dropdown.querySelector(".bb-menu-item")?.focus();
+    if (focusFirst)
+      p.dropdown.querySelector(".bb-menu-item")?.focus();
   };
   const makeRow = (label, opts) => {
     const item = document.createElement("button");
@@ -753,7 +763,9 @@ function mountMenubar(host, editor, options = {}) {
         flyout.setAttribute("role", "menu");
         if ("widget" in entry) {
           flyout.classList.add("bb-submenu-widget");
-          flyout.appendChild(entry.widget(() => close()));
+          const build = () => flyout.replaceChildren(entry.widget(() => close()));
+          wrap.addEventListener("mouseenter", build);
+          wrap.addEventListener("focusin", build);
         } else {
           buildEntries(entry.submenu, flyout);
         }
@@ -762,25 +774,37 @@ function mountMenubar(host, editor, options = {}) {
       } 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, {});
+        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));
+          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) });
+        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");
+        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() });
+        if (entry.isActive)
+          checks.push({ el: check, active: () => entry.isActive() });
+        if (entry.isEnabled)
+          enables.push({ el: item, enabled: () => entry.isEnabled() });
         container.appendChild(item);
       }
     }
@@ -800,7 +824,10 @@ function mountMenubar(host, editor, options = {}) {
     dropdown.setAttribute("role", "menu");
     dropdown.hidden = true;
     title.addEventListener("mousedown", (e) => e.preventDefault());
-    title.addEventListener("click", () => openIdx === idx ? close() : open(idx));
+    title.addEventListener(
+      "click",
+      () => openIdx === idx ? close() : open(idx)
+    );
     title.addEventListener("mouseenter", () => {
       if (openIdx >= 0 && openIdx !== idx) open(idx);
     });
@@ -868,8 +895,11 @@ var STYLE4 = `
 .bb-find-btn:hover:not(:disabled){background:var(--bb-ui-hover,#f1efe8)}
 .bb-find-btn:disabled{opacity:.4;cursor:default}
 `;
-function createFindDialog(find, options = {}) {
+function createFindDialog(handle, options = {}) {
   injectStyle("bb-ui-find-styles", STYLE4);
+  const find = typeof handle === "function" ? new Proxy({}, {
+    get: (_t, prop) => handle()[prop]
+  }) : handle;
   const labels = { ...DEFAULT_LABELS2, ...options.labels ?? {} };
   const root = document.createElement("div");
   root.className = "bb-find";
@@ -916,8 +946,14 @@ function createFindDialog(find, options = {}) {
   });
   prev.addEventListener("click", () => find.prev());
   next.addEventListener("click", () => find.next());
-  replaceOne.addEventListener("click", () => find.replaceCurrent(replaceInput.value));
-  replaceAll.addEventListener("click", () => find.replaceAll(replaceInput.value));
+  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;
@@ -945,7 +981,8 @@ function createFindDialog(find, options = {}) {
       openPanel();
     }
   };
-  if (options.shortcut !== false) document.addEventListener("keydown", onHotkey);
+  if (options.shortcut !== false)
+    document.addEventListener("keydown", onHotkey);
   return {
     open: openPanel,
     close() {
@@ -1546,16 +1583,335 @@ function tableGridPicker(options) {
   root.append(cellsEl, label);
   return root;
 }
+
+// packages/ui/src/lib/page-setup.ts
+var PX_PER_CM = 96 / 2.54;
+var pxToCm = (px) => px / PX_PER_CM;
+var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
+function fmtCm(cm) {
+  return `${Number(cm.toFixed(3))} cm`;
+}
+var STYLE9 = `
+.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}
+.bb-ps-row[aria-checked="true"]{background:var(--bb-ui-active-bg,#e6f1fb)}
+.bb-ps-icon{flex:none;width:34px;height:42px;display:block}
+.bb-ps-text{flex:1 1 auto;min-width:0}
+.bb-ps-name{font-size:13px;font-weight:600;line-height:1.3}
+.bb-ps-dims{font-size:11.5px;opacity:.68;line-height:1.45;white-space:nowrap}
+.bb-ps-grid{display:grid;grid-template-columns:auto auto;gap:0 14px;justify-content:start}
+.bb-ps-sep{height:1px;margin:4px 6px;background:var(--bb-ui-border,#e3e3e0)}
+.bb-pd{display:flex;flex-direction:column;gap:14px;min-width:300px}
+.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: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;
+}
+function pagePreview(ratio) {
+  const svg = svgEl("svg", { viewBox: "0 0 34 42", class: "bb-ps-icon" });
+  const maxW = 26;
+  const maxH = 36;
+  const w = Math.min(maxW, maxH * ratio);
+  const h = w / ratio;
+  svg.appendChild(
+    svgEl("rect", {
+      x: (34 - w) / 2,
+      y: (42 - h) / 2,
+      width: w,
+      height: h,
+      rx: 1,
+      fill: "var(--bb-ui-bg,#fff)",
+      stroke: "var(--bb-ui-fg,#2c2c2a)",
+      "stroke-opacity": 0.45,
+      "stroke-width": 1
+    })
+  );
+  return svg;
+}
+function marginPreview(margin, page) {
+  const svg = pagePreview(page.width / page.height);
+  const outline = svg.firstChild;
+  const px = Number(outline.getAttribute("x"));
+  const py = Number(outline.getAttribute("y"));
+  const pw = Number(outline.getAttribute("width"));
+  const ph = Number(outline.getAttribute("height"));
+  const sx = pw / page.width;
+  const sy = ph / page.height;
+  const cw = Math.max(2, pw - (margin.left + margin.right) * sx);
+  const ch = Math.max(2, ph - (margin.top + margin.bottom) * sy);
+  svg.appendChild(
+    svgEl("rect", {
+      x: px + margin.left * sx,
+      y: py + margin.top * sy,
+      width: cw,
+      height: ch,
+      fill: "var(--bb-ui-active-border,#7fb2ec)",
+      "fill-opacity": 0.28,
+      stroke: "var(--bb-ui-active-fg,#0c447c)",
+      "stroke-opacity": 0.55,
+      "stroke-width": 0.8
+    })
+  );
+  return svg;
+}
+function presetRow(icon, name, caption, active, onPick) {
+  const row = document.createElement("button");
+  row.type = "button";
+  row.className = "bb-ps-row";
+  row.setAttribute("role", "menuitemradio");
+  row.setAttribute("aria-checked", String(active));
+  const text = document.createElement("span");
+  text.className = "bb-ps-text";
+  const nameEl = document.createElement("span");
+  nameEl.className = "bb-ps-name";
+  nameEl.textContent = name;
+  text.append(nameEl, caption);
+  row.append(icon, text);
+  row.addEventListener("mousedown", (e) => e.preventDefault());
+  row.addEventListener("click", 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;
+}
+function customRow(icon, title, description, onPick) {
+  icon.appendChild(
+    svgEl("circle", {
+      cx: 26,
+      cy: 34,
+      r: 5.5,
+      fill: "var(--bb-ui-active-fg,#0c447c)"
+    })
+  );
+  const plus = svgEl("path", {
+    d: "M26 31.2v5.6M23.2 34h5.6",
+    stroke: "var(--bb-ui-bg,#fff)",
+    "stroke-width": 1.4,
+    "stroke-linecap": "round"
+  });
+  icon.appendChild(plus);
+  return presetRow(icon, title, captionLine(description), false, onPick);
+}
+function pageSizePicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  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)
+      )
+    );
+  }
+  const sep = document.createElement("div");
+  sep.className = "bb-ps-sep";
+  root.appendChild(sep);
+  root.appendChild(
+    customRow(
+      pagePreview(0.773),
+      "Custom page size",
+      "Define custom page size",
+      options.onCustom
+    )
+  );
+  return root;
+}
+function orientationPicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  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]
+  ]) {
+    root.appendChild(
+      presetRow(
+        pagePreview(ratio),
+        label,
+        captionLine(""),
+        options.active === key,
+        () => options.onPick(key)
+      )
+    );
+  }
+  return root;
+}
+function marginPresetPicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  for (const item of options.items) {
+    const grid = document.createElement("span");
+    grid.className = "bb-ps-dims bb-ps-grid";
+    for (const [label, px] of [
+      ["Top:", item.margin.top],
+      ["Bottom:", item.margin.bottom],
+      ["Left:", item.margin.left],
+      ["Right:", item.margin.right]
+    ]) {
+      const cell = document.createElement("span");
+      cell.textContent = `${label} ${fmtCm(pxToCm(px))}`;
+      grid.appendChild(cell);
+    }
+    root.appendChild(
+      presetRow(
+        marginPreview(item.margin, options.page),
+        item.label,
+        grid,
+        !!item.active,
+        () => options.onPick(item.key)
+      )
+    );
+  }
+  const sep = document.createElement("div");
+  sep.className = "bb-ps-sep";
+  root.appendChild(sep);
+  root.appendChild(
+    customRow(
+      marginPreview({ top: 96, right: 96, bottom: 96, left: 96 }, options.page),
+      "Custom margins",
+      "Define custom margins",
+      options.onCustom
+    )
+  );
+  return root;
+}
+function cmField(label, valuePx, min) {
+  const row = document.createElement("label");
+  row.className = "bb-pd-field";
+  const name = document.createElement("span");
+  name.className = "bb-pd-label";
+  name.textContent = label;
+  const input = document.createElement("input");
+  input.className = "bb-pd-input";
+  input.type = "number";
+  input.step = "0.01";
+  input.min = String(Number(pxToCm(min).toFixed(3)));
+  input.value = String(Number(pxToCm(valuePx).toFixed(3)));
+  row.append(name, input);
+  return { row, input };
+}
+function dialogActions() {
+  const el = document.createElement("div");
+  el.className = "bb-pd-actions";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "bb-prompt-btn";
+  cancel.textContent = "Cancel";
+  const ok = document.createElement("button");
+  ok.type = "submit";
+  ok.className = "bb-prompt-btn";
+  ok.dataset["primary"] = "true";
+  ok.textContent = "OK";
+  el.append(cancel, ok);
+  return { el, 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);
+  const dialog = new Dialog({ title: "Paper size", modal: true });
+  const form = document.createElement("form");
+  form.className = "bb-pd";
+  const fields = document.createElement("div");
+  fields.className = "bb-pd-fields";
+  const width = cmField("Width:", options.initial.width, 96);
+  const height = cmField("Height:", options.initial.height, 96);
+  fields.append(width.row, height.row);
+  const actions = dialogActions();
+  form.append(fields, actions.el);
+  dialog.setContent(form);
+  dialog.onClose(() => dialog.destroy());
+  actions.cancel.addEventListener("click", () => dialog.close());
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    options.onApply({
+      width: readPx(width.input, options.initial.width),
+      height: readPx(height.input, options.initial.height)
+    });
+    dialog.close();
+  });
+  dialog.open();
+  width.input.focus();
+  width.input.select();
+}
+function openMarginsDialog(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const dialog = new Dialog({ title: "Margins", modal: true });
+  const form = document.createElement("form");
+  form.className = "bb-pd";
+  const fields = document.createElement("div");
+  fields.className = "bb-pd-fields";
+  fields.style.gridTemplateColumns = "1fr 1fr";
+  const top = cmField("Top:", options.initial.top, 0);
+  const left = cmField("Left:", options.initial.left, 0);
+  const bottom = cmField("Bottom:", options.initial.bottom, 0);
+  const right = cmField("Right:", options.initial.right, 0);
+  fields.append(top.row, left.row, bottom.row, right.row);
+  const actions = dialogActions();
+  form.append(fields, actions.el);
+  dialog.setContent(form);
+  dialog.onClose(() => dialog.destroy());
+  actions.cancel.addEventListener("click", () => dialog.close());
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const px = (input, fallback) => {
+      const n = Number(input.value);
+      return Number.isFinite(n) && n >= 0 ? cmToPx(n) : fallback;
+    };
+    options.onApply({
+      top: px(top.input, options.initial.top),
+      right: px(right.input, options.initial.right),
+      bottom: px(bottom.input, options.initial.bottom),
+      left: px(left.input, options.initial.left)
+    });
+    dialog.close();
+  });
+  dialog.open();
+  top.input.focus();
+  top.input.select();
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Dialog,
+  cmToPx,
   createFindDialog,
   defaultMenus,
   defaultToolbarGroups,
+  marginPresetPicker,
   mountMenubar,
   mountToolbar,
   openCellProperties,
+  openMarginsDialog,
+  openPageSizeDialog,
+  orientationPicker,
+  pageSizePicker,
   promptDialog,
+  pxToCm,
   showContextMenu,
   showLinkPanel,
   tableGridPicker

package/dist/index.d.ts

@@ -7,4 +7,5 @@ export * from './lib/context-menu.js';
 export * from './lib/link-panel.js';
 export * from './lib/cell-properties.js';
 export * from './lib/table-grid.js';
+export * from './lib/page-setup.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"}
+{"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"}

package/dist/index.js

@@ -634,7 +634,9 @@ var STYLE3 = `
 `;
 function defaultMenus(commands) {
   const names = [...commands].map((c) => c.name);
-  const marks = ["bold", "italic", "underline", "strike"].filter((n) => commands.has(n));
+  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 })),
@@ -673,7 +675,8 @@ function mountMenubar(host, editor, options = {}) {
     p.title.setAttribute("aria-expanded", "true");
     openIdx = idx;
     if (latest) refresh(latest);
-    if (focusFirst) p.dropdown.querySelector(".bb-menu-item")?.focus();
+    if (focusFirst)
+      p.dropdown.querySelector(".bb-menu-item")?.focus();
   };
   const makeRow = (label, opts) => {
     const item = document.createElement("button");
@@ -717,7 +720,9 @@ function mountMenubar(host, editor, options = {}) {
         flyout.setAttribute("role", "menu");
         if ("widget" in entry) {
           flyout.classList.add("bb-submenu-widget");
-          flyout.appendChild(entry.widget(() => close()));
+          const build = () => flyout.replaceChildren(entry.widget(() => close()));
+          wrap.addEventListener("mouseenter", build);
+          wrap.addEventListener("focusin", build);
         } else {
           buildEntries(entry.submenu, flyout);
         }
@@ -726,25 +731,37 @@ function mountMenubar(host, editor, options = {}) {
       } 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, {});
+        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));
+          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) });
+        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");
+        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() });
+        if (entry.isActive)
+          checks.push({ el: check, active: () => entry.isActive() });
+        if (entry.isEnabled)
+          enables.push({ el: item, enabled: () => entry.isEnabled() });
         container.appendChild(item);
       }
     }
@@ -764,7 +781,10 @@ function mountMenubar(host, editor, options = {}) {
     dropdown.setAttribute("role", "menu");
     dropdown.hidden = true;
     title.addEventListener("mousedown", (e) => e.preventDefault());
-    title.addEventListener("click", () => openIdx === idx ? close() : open(idx));
+    title.addEventListener(
+      "click",
+      () => openIdx === idx ? close() : open(idx)
+    );
     title.addEventListener("mouseenter", () => {
       if (openIdx >= 0 && openIdx !== idx) open(idx);
     });
@@ -832,8 +852,11 @@ var STYLE4 = `
 .bb-find-btn:hover:not(:disabled){background:var(--bb-ui-hover,#f1efe8)}
 .bb-find-btn:disabled{opacity:.4;cursor:default}
 `;
-function createFindDialog(find, options = {}) {
+function createFindDialog(handle, options = {}) {
   injectStyle("bb-ui-find-styles", STYLE4);
+  const find = typeof handle === "function" ? new Proxy({}, {
+    get: (_t, prop) => handle()[prop]
+  }) : handle;
   const labels = { ...DEFAULT_LABELS2, ...options.labels ?? {} };
   const root = document.createElement("div");
   root.className = "bb-find";
@@ -880,8 +903,14 @@ function createFindDialog(find, options = {}) {
   });
   prev.addEventListener("click", () => find.prev());
   next.addEventListener("click", () => find.next());
-  replaceOne.addEventListener("click", () => find.replaceCurrent(replaceInput.value));
-  replaceAll.addEventListener("click", () => find.replaceAll(replaceInput.value));
+  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;
@@ -909,7 +938,8 @@ function createFindDialog(find, options = {}) {
       openPanel();
     }
   };
-  if (options.shortcut !== false) document.addEventListener("keydown", onHotkey);
+  if (options.shortcut !== false)
+    document.addEventListener("keydown", onHotkey);
   return {
     open: openPanel,
     close() {
@@ -1510,15 +1540,334 @@ function tableGridPicker(options) {
   root.append(cellsEl, label);
   return root;
 }
+
+// packages/ui/src/lib/page-setup.ts
+var PX_PER_CM = 96 / 2.54;
+var pxToCm = (px) => px / PX_PER_CM;
+var cmToPx = (cm) => Math.round(cm * PX_PER_CM);
+function fmtCm(cm) {
+  return `${Number(cm.toFixed(3))} cm`;
+}
+var STYLE9 = `
+.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}
+.bb-ps-row[aria-checked="true"]{background:var(--bb-ui-active-bg,#e6f1fb)}
+.bb-ps-icon{flex:none;width:34px;height:42px;display:block}
+.bb-ps-text{flex:1 1 auto;min-width:0}
+.bb-ps-name{font-size:13px;font-weight:600;line-height:1.3}
+.bb-ps-dims{font-size:11.5px;opacity:.68;line-height:1.45;white-space:nowrap}
+.bb-ps-grid{display:grid;grid-template-columns:auto auto;gap:0 14px;justify-content:start}
+.bb-ps-sep{height:1px;margin:4px 6px;background:var(--bb-ui-border,#e3e3e0)}
+.bb-pd{display:flex;flex-direction:column;gap:14px;min-width:300px}
+.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: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;
+}
+function pagePreview(ratio) {
+  const svg = svgEl("svg", { viewBox: "0 0 34 42", class: "bb-ps-icon" });
+  const maxW = 26;
+  const maxH = 36;
+  const w = Math.min(maxW, maxH * ratio);
+  const h = w / ratio;
+  svg.appendChild(
+    svgEl("rect", {
+      x: (34 - w) / 2,
+      y: (42 - h) / 2,
+      width: w,
+      height: h,
+      rx: 1,
+      fill: "var(--bb-ui-bg,#fff)",
+      stroke: "var(--bb-ui-fg,#2c2c2a)",
+      "stroke-opacity": 0.45,
+      "stroke-width": 1
+    })
+  );
+  return svg;
+}
+function marginPreview(margin, page) {
+  const svg = pagePreview(page.width / page.height);
+  const outline = svg.firstChild;
+  const px = Number(outline.getAttribute("x"));
+  const py = Number(outline.getAttribute("y"));
+  const pw = Number(outline.getAttribute("width"));
+  const ph = Number(outline.getAttribute("height"));
+  const sx = pw / page.width;
+  const sy = ph / page.height;
+  const cw = Math.max(2, pw - (margin.left + margin.right) * sx);
+  const ch = Math.max(2, ph - (margin.top + margin.bottom) * sy);
+  svg.appendChild(
+    svgEl("rect", {
+      x: px + margin.left * sx,
+      y: py + margin.top * sy,
+      width: cw,
+      height: ch,
+      fill: "var(--bb-ui-active-border,#7fb2ec)",
+      "fill-opacity": 0.28,
+      stroke: "var(--bb-ui-active-fg,#0c447c)",
+      "stroke-opacity": 0.55,
+      "stroke-width": 0.8
+    })
+  );
+  return svg;
+}
+function presetRow(icon, name, caption, active, onPick) {
+  const row = document.createElement("button");
+  row.type = "button";
+  row.className = "bb-ps-row";
+  row.setAttribute("role", "menuitemradio");
+  row.setAttribute("aria-checked", String(active));
+  const text = document.createElement("span");
+  text.className = "bb-ps-text";
+  const nameEl = document.createElement("span");
+  nameEl.className = "bb-ps-name";
+  nameEl.textContent = name;
+  text.append(nameEl, caption);
+  row.append(icon, text);
+  row.addEventListener("mousedown", (e) => e.preventDefault());
+  row.addEventListener("click", 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;
+}
+function customRow(icon, title, description, onPick) {
+  icon.appendChild(
+    svgEl("circle", {
+      cx: 26,
+      cy: 34,
+      r: 5.5,
+      fill: "var(--bb-ui-active-fg,#0c447c)"
+    })
+  );
+  const plus = svgEl("path", {
+    d: "M26 31.2v5.6M23.2 34h5.6",
+    stroke: "var(--bb-ui-bg,#fff)",
+    "stroke-width": 1.4,
+    "stroke-linecap": "round"
+  });
+  icon.appendChild(plus);
+  return presetRow(icon, title, captionLine(description), false, onPick);
+}
+function pageSizePicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  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)
+      )
+    );
+  }
+  const sep = document.createElement("div");
+  sep.className = "bb-ps-sep";
+  root.appendChild(sep);
+  root.appendChild(
+    customRow(
+      pagePreview(0.773),
+      "Custom page size",
+      "Define custom page size",
+      options.onCustom
+    )
+  );
+  return root;
+}
+function orientationPicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  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]
+  ]) {
+    root.appendChild(
+      presetRow(
+        pagePreview(ratio),
+        label,
+        captionLine(""),
+        options.active === key,
+        () => options.onPick(key)
+      )
+    );
+  }
+  return root;
+}
+function marginPresetPicker(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const root = document.createElement("div");
+  root.className = "bb-ps";
+  root.setAttribute("role", "menu");
+  for (const item of options.items) {
+    const grid = document.createElement("span");
+    grid.className = "bb-ps-dims bb-ps-grid";
+    for (const [label, px] of [
+      ["Top:", item.margin.top],
+      ["Bottom:", item.margin.bottom],
+      ["Left:", item.margin.left],
+      ["Right:", item.margin.right]
+    ]) {
+      const cell = document.createElement("span");
+      cell.textContent = `${label} ${fmtCm(pxToCm(px))}`;
+      grid.appendChild(cell);
+    }
+    root.appendChild(
+      presetRow(
+        marginPreview(item.margin, options.page),
+        item.label,
+        grid,
+        !!item.active,
+        () => options.onPick(item.key)
+      )
+    );
+  }
+  const sep = document.createElement("div");
+  sep.className = "bb-ps-sep";
+  root.appendChild(sep);
+  root.appendChild(
+    customRow(
+      marginPreview({ top: 96, right: 96, bottom: 96, left: 96 }, options.page),
+      "Custom margins",
+      "Define custom margins",
+      options.onCustom
+    )
+  );
+  return root;
+}
+function cmField(label, valuePx, min) {
+  const row = document.createElement("label");
+  row.className = "bb-pd-field";
+  const name = document.createElement("span");
+  name.className = "bb-pd-label";
+  name.textContent = label;
+  const input = document.createElement("input");
+  input.className = "bb-pd-input";
+  input.type = "number";
+  input.step = "0.01";
+  input.min = String(Number(pxToCm(min).toFixed(3)));
+  input.value = String(Number(pxToCm(valuePx).toFixed(3)));
+  row.append(name, input);
+  return { row, input };
+}
+function dialogActions() {
+  const el = document.createElement("div");
+  el.className = "bb-pd-actions";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "bb-prompt-btn";
+  cancel.textContent = "Cancel";
+  const ok = document.createElement("button");
+  ok.type = "submit";
+  ok.className = "bb-prompt-btn";
+  ok.dataset["primary"] = "true";
+  ok.textContent = "OK";
+  el.append(cancel, ok);
+  return { el, 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);
+  const dialog = new Dialog({ title: "Paper size", modal: true });
+  const form = document.createElement("form");
+  form.className = "bb-pd";
+  const fields = document.createElement("div");
+  fields.className = "bb-pd-fields";
+  const width = cmField("Width:", options.initial.width, 96);
+  const height = cmField("Height:", options.initial.height, 96);
+  fields.append(width.row, height.row);
+  const actions = dialogActions();
+  form.append(fields, actions.el);
+  dialog.setContent(form);
+  dialog.onClose(() => dialog.destroy());
+  actions.cancel.addEventListener("click", () => dialog.close());
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    options.onApply({
+      width: readPx(width.input, options.initial.width),
+      height: readPx(height.input, options.initial.height)
+    });
+    dialog.close();
+  });
+  dialog.open();
+  width.input.focus();
+  width.input.select();
+}
+function openMarginsDialog(options) {
+  injectStyle("bb-ui-pagesetup-styles", STYLE9);
+  const dialog = new Dialog({ title: "Margins", modal: true });
+  const form = document.createElement("form");
+  form.className = "bb-pd";
+  const fields = document.createElement("div");
+  fields.className = "bb-pd-fields";
+  fields.style.gridTemplateColumns = "1fr 1fr";
+  const top = cmField("Top:", options.initial.top, 0);
+  const left = cmField("Left:", options.initial.left, 0);
+  const bottom = cmField("Bottom:", options.initial.bottom, 0);
+  const right = cmField("Right:", options.initial.right, 0);
+  fields.append(top.row, left.row, bottom.row, right.row);
+  const actions = dialogActions();
+  form.append(fields, actions.el);
+  dialog.setContent(form);
+  dialog.onClose(() => dialog.destroy());
+  actions.cancel.addEventListener("click", () => dialog.close());
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const px = (input, fallback) => {
+      const n = Number(input.value);
+      return Number.isFinite(n) && n >= 0 ? cmToPx(n) : fallback;
+    };
+    options.onApply({
+      top: px(top.input, options.initial.top),
+      right: px(right.input, options.initial.right),
+      bottom: px(bottom.input, options.initial.bottom),
+      left: px(left.input, options.initial.left)
+    });
+    dialog.close();
+  });
+  dialog.open();
+  top.input.focus();
+  top.input.select();
+}
 export {
   Dialog,
+  cmToPx,
   createFindDialog,
   defaultMenus,
   defaultToolbarGroups,
+  marginPresetPicker,
   mountMenubar,
   mountToolbar,
   openCellProperties,
+  openMarginsDialog,
+  openPageSizeDialog,
+  orientationPicker,
+  pageSizePicker,
   promptDialog,
+  pxToCm,
   showContextMenu,
   showLinkPanel,
   tableGridPicker

package/dist/lib/find.d.ts

@@ -49,5 +49,5 @@ export interface FindDialogHandle {
  * closing clears the search so highlights go away. The host (any framework)
  * just opens it from a menu / shortcut.
  */
-export declare function createFindDialog(find: FindHandle, options?: FindDialogOptions): FindDialogHandle;
+export declare function createFindDialog(handle: FindHandle | (() => FindHandle), options?: FindDialogOptions): FindDialogHandle;
 //# sourceMappingURL=find.d.ts.map

package/dist/lib/find.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"find.d.ts","sourceRoot":"","sources":["../../src/lib/find.ts"],"names":[],"mappings":"AAGA,0DAA0D;AAC1D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uEAAuE;IACvE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC9B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAuBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAuGpG"}
+{"version":3,"file":"find.d.ts","sourceRoot":"","sources":["../../src/lib/find.ts"],"names":[],"mappings":"AAGA,0DAA0D;AAC1D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC;IACb,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,uEAAuE;IACvE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB;IAChC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC9B,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAuBD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,UAAU,GAAG,CAAC,MAAM,UAAU,CAAC,EACvC,OAAO,GAAE,iBAAsB,GAC9B,gBAAgB,CA2HlB"}

package/dist/lib/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../src/lib/menubar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,KAAK,YAAY,EAAmC,MAAM,eAAe,CAAC;AAEnF,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,4EAA4E;AAC5E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,yBAAyB;AACzB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AACD,kFAAkF;AAClF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,WAAW,CAAC;CAC5C;AACD,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAE9F,uDAAuD;AACvD,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;+EAE2E;IAC3E,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAmDD;mDACmD;AACnD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,EAAE,CAUlE;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,EACpB,OAAO,GAAE,cAAmB,GAC3B,aAAa,CA0Lf"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../src/lib/menubar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,eAAe,CAAC;AAEvB,kEAAkE;AAClE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,4EAA4E;AAC5E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,yBAAyB;AACzB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AACD,kFAAkF;AAClF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,WAAW,CAAC;CAC5C;AACD,MAAM,MAAM,SAAS,GACjB,WAAW,GACX,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,CAAC;AAEhB,uDAAuD;AACvD,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC;;+EAE2E;IAC3E,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAmDD;mDACmD;AACnD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,EAAE,CAYlE;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,YAAY,EACpB,OAAO,GAAE,cAAmB,GAC3B,aAAa,CAiOf"}

package/dist/lib/page-setup.d.ts

@@ -0,0 +1,92 @@
+/** px → cm. */
+export declare const pxToCm: (px: number) => number;
+/** cm → px (rounded — the model is integer px). */
+export declare const cmToPx: (cm: number) => number;
+export interface PaperChoice {
+    /** Stable key echoed back to `onPick` (e.g. a PaperSize name). */
+    key: string;
+    label: string;
+    /** Nominal portrait size in cm — the caption. Exact values, not derived
+     *  from px (rounding would print A4 as 21.006 cm). */
+    cm: readonly [number, number];
+    /** Portrait size in px — drives the preview icon's aspect ratio. */
+    px: readonly [number, number];
+    active?: boolean;
+}
+export interface MarginChoice {
+    key: string;
+    label: string;
+    /** Margins in px; shown in cm and drawn as the preview's content box. */
+    margin: PageMargin;
+    active?: boolean;
+}
+export interface PageMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface PageSizePickerOptions {
+    items: readonly PaperChoice[];
+    /** Called with the chosen item's `key`. */
+    onPick: (key: string) => void;
+    /** Called for the trailing "Custom page size" row. */
+    onCustom: () => void;
+}
+/**
+ * Layout ▸ Page size flyout: one row per paper preset (preview, name, size in
+ * cm) plus a custom row. Returns a detached element for a menu widget slot.
+ */
+export declare function pageSizePicker(options: PageSizePickerOptions): HTMLElement;
+export interface OrientationPickerOptions {
+    /** Current page size in px — the previews are drawn at its aspect ratio. */
+    page: {
+        width: number;
+        height: number;
+    };
+    active: 'portrait' | 'landscape';
+    onPick: (orientation: 'portrait' | 'landscape') => void;
+}
+/**
+ * Layout ▸ Orientation flyout. Same row shape as the other two pickers, so all
+ * three entries of the Layout menu read as one family.
+ */
+export declare function orientationPicker(options: OrientationPickerOptions): HTMLElement;
+export interface MarginPickerOptions {
+    items: readonly MarginChoice[];
+    /** Page size in px — the previews draw each preset's content box to scale. */
+    page: {
+        width: number;
+        height: number;
+    };
+    onPick: (key: string) => void;
+    onCustom: () => void;
+}
+/**
+ * Layout ▸ Margins flyout: one row per preset (a preview showing the content
+ * box to scale, the name, and the four edges in cm) plus a custom row.
+ */
+export declare function marginPresetPicker(options: MarginPickerOptions): HTMLElement;
+export interface PageSizeDialogOptions {
+    /** Current size in px. */
+    initial: {
+        width: number;
+        height: number;
+    };
+    /** Applied size in px. */
+    onApply: (size: {
+        width: number;
+        height: number;
+    }) => void;
+}
+/** Layout ▸ Page size ▸ Custom page size — width/height in cm. */
+export declare function openPageSizeDialog(options: PageSizeDialogOptions): void;
+export interface MarginsDialogOptions {
+    /** Current margins in px. */
+    initial: PageMargin;
+    /** Applied margins in px. */
+    onApply: (margin: PageMargin) => void;
+}
+/** Layout ▸ Margins ▸ Custom margins — the four edges in cm. */
+export declare function openMarginsDialog(options: MarginsDialogOptions): void;
+//# sourceMappingURL=page-setup.d.ts.map

package/dist/lib/page-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-setup.d.ts","sourceRoot":"","sources":["../../src/lib/page-setup.ts"],"names":[],"mappings":"AAkBA,eAAe;AACf,eAAO,MAAM,MAAM,GAAI,IAAI,MAAM,KAAG,MAAwB,CAAC;AAC7D,mDAAmD;AACnD,eAAO,MAAM,MAAM,GAAI,IAAI,MAAM,KAAG,MAAoC,CAAC;AAOzE,MAAM,WAAW,WAAW;IAC1B,kEAAkE;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd;0DACsD;IACtD,EAAE,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,oEAAoE;IACpE,EAAE,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAqJD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,2CAA2C;IAC3C,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,sDAAsD;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB,GAAG,WAAW,CA8B1E;AAED,MAAM,WAAW,wBAAwB;IACvC,4EAA4E;IAC5E,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,MAAM,EAAE,UAAU,GAAG,WAAW,CAAC;IACjC,MAAM,EAAE,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,KAAK,IAAI,CAAC;CACzD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,GAChC,WAAW,CA0Bb;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,8EAA8E;IAC9E,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,mBAAmB,GAAG,WAAW,CA0C5E;AAkDD,MAAM,WAAW,qBAAqB;IACpC,0BAA0B;IAC1B,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,0BAA0B;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5D;AAED,kEAAkE;AAClE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,CA2BvE;AAED,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,OAAO,EAAE,UAAU,CAAC;IACpB,6BAA6B;IAC7B,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC;AAED,gEAAgE;AAChE,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAuCrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadow-garden/bapbong-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "bapbong — framework-agnostic editor UI (toolbar/menubar) that mounts into a host element and binds to editor.commands",
   "license": "MIT",
   "repository": {
@@ -56,6 +56,6 @@
     }
   },
   "dependencies": {
-    "@shadow-garden/bapbong-contracts": "^0.3.0"
+    "@shadow-garden/bapbong-contracts": "^0.4.0"
   }
 }