wordinweb 0.1.13 → 0.1.15

package/dist/index.js

@@ -10,8 +10,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+var __commonJS = (cb, mod2) => function __require2() {
+  return mod2 || (0, cb[__getOwnPropNames(cb)[0]])((mod2 = { exports: {} }).exports, mod2), mod2.exports;
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -21,13 +21,13 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod2, isNodeMode, target) => (target = mod2 != null ? __create(__getProtoOf(mod2)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
+  isNodeMode || !mod2 || !mod2.__esModule ? __defProp(target, "default", { value: mod2, enumerable: true }) : target,
+  mod2
 ));
 
 // (disabled):fs
@@ -1923,7 +1923,7 @@ var require_cfb = __commonJS({
 });
 
 // src/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // ../core/src/units.ts
 var PX_PER_PT = 96 / 72;
@@ -4484,7 +4484,7 @@ function parseDrawing(drawing, ctx) {
       }
     };
   }
-  if (anchor && (paths.length > 0 || lines.length + images.length > 1 || texts.length > 0)) {
+  if (anchor && (paths.length > 0 || lines.length > 0 || images.length > 1 || texts.length > 0)) {
     const docPr = child(anchor, "docPr");
     const docPrName = attr(docPr, "name") ?? "";
     const ink = attr(docPr, "descr") === "WordInWeb ink" || /^Ink(?:\s|$)/i.test(docPrName);
@@ -6906,7 +6906,95 @@ var DocxDocument = class _DocxDocument {
     const xml = serializeXml(root, true);
     if (xml !== this.originalModeledXml.get(part)) files[part] = strToU82(xml);
   }
+  /**
+   * Canonicalize producer shorthand that Google Docs otherwise interprets as
+   * a fixed, few-twip table. Word treats `tblW="100%"` plus a placeholder
+   * grid as autofit; Google needs the standard pct value and a usable cached
+   * grid. The cached widths follow the same content-dominant shape and do not
+   * change Word's autofit result.
+   */
+  normalizePercentageTableGrids() {
+    const setAttr = (element, name, value) => {
+      const key = Object.keys(element.attrs).find((item) => localName(item) === name);
+      element.attrs[key ?? `${element.name.includes(":") ? element.name.split(":")[0] + ":" : ""}${name}`] = value;
+    };
+    const textLength = (blocks) => {
+      let length = 0;
+      for (const block of blocks) {
+        if (block.type === "table") {
+          for (const row of block.rows) {
+            for (const cell of row.cells) length += textLength(cell.blocks);
+          }
+          continue;
+        }
+        for (const item of block.children) {
+          const runs = item.type === "run" ? [item] : item.runs;
+          for (const run of runs) {
+            for (const content of run.content) {
+              if (content.kind === "text") length += content.text.length;
+              else if (content.kind === "tab") length += 4;
+            }
+          }
+        }
+      }
+      return length;
+    };
+    const normalize = (table2, available) => {
+      const source = table2.src;
+      if (!source) return;
+      const tableProps = child(source, "tblPr");
+      const tableWidth = child(tableProps, "tblW");
+      const rawWidth = attr(tableWidth, "w")?.trim();
+      if (attr(tableWidth, "type") !== "pct" || !rawWidth?.endsWith("%")) return;
+      const percent = Number.parseFloat(rawWidth);
+      if (!Number.isFinite(percent) || percent <= 0) return;
+      setAttr(tableWidth, "w", String(Math.round(percent * 50)));
+      const grid = child(source, "tblGrid");
+      const columns = children(grid, "gridCol");
+      if (columns.length === 0) return;
+      const target = Math.round(pxToTwips(available) * percent / 100);
+      const authoredTotal = columns.reduce((sum2, column) => sum2 + (intAttr(column, "w") ?? 0), 0);
+      if (target <= 0 || authoredTotal >= target * 0.1) return;
+      const floor = 600;
+      const widths = new Array(columns.length).fill(floor);
+      for (const row of table2.rows) {
+        let column = 0;
+        for (const cell of row.cells) {
+          const span = Math.max(1, Math.min(cell.props.gridSpan, columns.length - column));
+          const demand = Math.max(floor * span, textLength(cell.blocks) * 100 + 300);
+          for (let offset = 0; offset < span; offset++) {
+            widths[column + offset] = Math.max(widths[column + offset], demand / span);
+          }
+          column += cell.props.gridSpan;
+          if (column >= columns.length) break;
+        }
+      }
+      const dominant = widths.indexOf(Math.max(...widths));
+      const total = widths.reduce((sum2, width) => sum2 + width, 0);
+      if (total < target) {
+        widths[dominant] += target - total;
+      } else if (total > target) {
+        const slack = widths.reduce((sum2, width) => sum2 + Math.max(0, width - floor), 0);
+        const scale = slack > 0 ? Math.min(1, (total - target) / slack) : 0;
+        for (let index = 0; index < widths.length; index++) {
+          widths[index] -= Math.max(0, widths[index] - floor) * scale;
+        }
+      }
+      const rounded = widths.map(Math.round);
+      rounded[dominant] += target - rounded.reduce((sum2, width) => sum2 + width, 0);
+      columns.forEach((column, index) => setAttr(column, "w", String(rounded[index])));
+    };
+    for (const section of this.sections) {
+      const contentWidth = section.props.pageWidth - section.props.marginLeft - section.props.marginRight - section.props.gutter;
+      const columnCount = Math.max(1, section.props.columns.count);
+      const available = section.props.columns.widths?.[0] ?? (contentWidth - section.props.columns.space * (columnCount - 1)) / columnCount;
+      for (const block of section.blocks) {
+        if (block.type === "table") normalize(block, available);
+      }
+    }
+  }
   save() {
+    this.normalizePercentageTableGrids();
     const files = { ...this.pkg.raw() };
     if (files["docProps/custom.xml"] && this.contentTypesRoot && !this.contentTypesRoot.children.some(
       (item) => localName(item.name) === "Override" && item.attrs.PartName === "/docProps/custom.xml"
@@ -11327,7 +11415,12 @@ function laidOutPage(p) {
     items: p.items,
     bodyTop: p.bodyTop,
     bodyBottom: p.bodyBottom,
-    hfStart: p.hfStart ?? p.items.length
+    hfStart: p.hfStart ?? p.items.length,
+    columnBands: p.bands.map((band) => ({
+      top: band.top,
+      colXs: [...band.colXs],
+      colWidths: [...band.colWidths]
+    }))
   };
 }
 var PAGE_FMT = {
@@ -14961,19 +15054,19 @@ var Engine = class {
         for (const pth of shape.paths) {
           const x = ox + pth.x - fx;
           const y = oy + pth.y - fy;
-          page.items.push({ kind: "path", x, y, width: pth.width, height: pth.height, d: pth.d, viewW: pth.viewW, viewH: pth.viewH, fill: pth.fill, stroke: pth.stroke, ...rotate ? { rotate: rotate(x, y) } : {}, z: shape.z });
+          page.items.push({ kind: "path", x, y, width: pth.width, height: pth.height, d: pth.d, viewW: pth.viewW, viewH: pth.viewH, fill: pth.fill, stroke: pth.stroke, ...rotate ? { rotate: rotate(x, y) } : {}, ...shape.behind ? { behind: true } : { front: true }, z: shape.z });
         }
         for (const l of shape.lines) {
           const x1 = ox + l.x1 - fx;
           const y1 = oy + l.y1 - fy;
           const x2 = ox + l.x2 - fx;
           const y2 = oy + l.y2 - fy;
-          page.items.push({ kind: "edge", x1, y1, x2, y2, border: { style: "single", width: l.weight, color: l.color, space: 0 }, ...rotate ? { rotate: rotate(Math.min(x1, x2), Math.min(y1, y2)) } : {}, z: shape.z });
+          page.items.push({ kind: "edge", x1, y1, x2, y2, border: { style: "single", width: l.weight, color: l.color, space: 0 }, ...rotate ? { rotate: rotate(Math.min(x1, x2), Math.min(y1, y2)) } : {}, ...shape.behind ? { behind: true } : { front: true }, z: shape.z });
         }
         for (const img of shape.images) {
           const x = ox + img.x - fx;
           const y = oy + img.y - fy;
-          page.items.push({ kind: "image", x, y, width: img.width, height: img.height, part: img.part, behind: shape.behind, ...rotate ? { rotate: rotate(x, y) } : {}, z: shape.z });
+          page.items.push({ kind: "image", x, y, width: img.width, height: img.height, part: img.part, behind: shape.behind, ...!shape.behind ? { front: true } : {}, ...rotate ? { rotate: rotate(x, y) } : {}, z: shape.z });
         }
         if (shape.srcDrawing) {
           page.items.push({
@@ -14986,6 +15079,7 @@ var Engine = class {
             anchored: true,
             ink: shape.ink,
             belowText: !shape.behind,
+            behind: shape.behind,
             ...rotate ? { rotate: rotate(ox - fx, oy - fy) } : {},
             z: shape.z
           });
@@ -15125,6 +15219,7 @@ var Engine = class {
             y2,
             border: b,
             ...rotate ? { rotate: rotate(Math.min(x1, x2), Math.min(y1, y2)) } : {},
+            ...behind ? { behind: true } : {},
             ...front ? { front: true } : {},
             z: shape.z
           });
@@ -15145,7 +15240,7 @@ var Engine = class {
           const texts = inner.items.filter((it) => it.kind === "text");
           const str = texts.map((it) => it.text).join("").replace(/\s+/g, " ").trim();
           if (str) {
-            if (front && shape.srcDrawing) {
+            if (shape.srcDrawing) {
               page.items.push({
                 kind: "drawingHit",
                 x: ox - fx,
@@ -15155,8 +15250,9 @@ var Engine = class {
                 src: shape.srcDrawing,
                 anchored: true,
                 belowText: true,
+                ...behind ? { behind: true } : {},
                 ...rotate ? { rotate: rotate(ox - fx, oy - fy) } : {},
-                z: shape.z
+                z: shape.wordArt ? (shape.z ?? 0) + 1 : shape.z
               });
             }
             const f = texts[0].font;
@@ -15194,7 +15290,7 @@ var Engine = class {
           this.textboxChains.set(shape.chainId, { blocks: storyBlocks, consumedY: cut });
         }
         const independentStory = !!shape.textboxStory && !shape.wordArt;
-        if (front && shape.srcDrawing) {
+        if (shape.srcDrawing) {
           page.items.push({
             kind: "drawingHit",
             x: ox - fx,
@@ -15204,9 +15300,10 @@ var Engine = class {
             src: shape.srcDrawing,
             anchored: true,
             belowText: !shape.wordArt,
+            ...behind ? { behind: true } : {},
             ...independentStory ? { textboxStory: true } : {},
             ...rotate ? { rotate: rotate(ox - fx, oy - fy) } : {},
-            z: shape.z
+            z: shape.wordArt ? (shape.z ?? 0) + 1 : shape.z
           });
         }
         for (const it of inner.items) {
@@ -15223,7 +15320,7 @@ var Engine = class {
           } else if (rotate && it.kind === "edge") {
             it.rotate = rotate(Math.min(it.x1, it.x2), Math.min(it.y1, it.y2));
           }
-          if (behind && (it.kind === "text" || it.kind === "rect")) it.behind = true;
+          if (behind && (it.kind === "text" || it.kind === "rect" || it.kind === "edge" || it.kind === "image" || it.kind === "path" || it.kind === "drawingHit")) it.behind = true;
           if (front && (it.kind === "text" || it.kind === "rect" || it.kind === "edge")) it.front = true;
           if (it.kind === "text" || it.kind === "rect" || it.kind === "edge" || it.kind === "image" || it.kind === "path" || it.kind === "drawingHit") it.z = shape.z;
           page.items.push(it);
@@ -17571,7 +17668,7 @@ function itemEq(a, b, depth) {
 }
 function pageEq(a, b) {
   if (a === b) return true;
-  if (a.width !== b.width || a.height !== b.height || a.number !== b.number || a.index !== b.index || a.bodyTop !== b.bodyTop || a.bodyBottom !== b.bodyBottom || a.hfStart !== b.hfStart || a.items.length !== b.items.length) {
+  if (a.width !== b.width || a.height !== b.height || a.number !== b.number || a.index !== b.index || a.bodyTop !== b.bodyTop || a.bodyBottom !== b.bodyBottom || a.hfStart !== b.hfStart || JSON.stringify(a.columnBands) !== JSON.stringify(b.columnBands) || a.items.length !== b.items.length) {
     return false;
   }
   for (let i = 0; i < a.items.length; i++) {
@@ -17715,6 +17812,7 @@ function renderPageShell(page, zoom, options) {
   }
   el16.dataset.bodyTop = String(page.bodyTop);
   el16.dataset.bodyBottom = String(page.bodyBottom);
+  el16.dataset.columnBands = JSON.stringify(page.columnBands);
   return el16;
 }
 function renderEmptyPageRecord(page, zoom, options) {
@@ -18398,6 +18496,7 @@ function ensureStylesheet() {
 .dxw-body-mode .dxw-page span[data-dxw-hf]:not([data-dxw-textbox-story]),
 .dxw-body-mode .dxw-page a[data-dxw-hf]:not([data-dxw-textbox-story]),
 .dxw-body-mode .dxw-page img[data-dxw-hf] { opacity: .55; }
+.dxw-body-mode .dxw-page [data-dxw-drawing][data-dxw-hf]:not([data-dxw-textbox-story-object]) { pointer-events: none; }
 .dxw-comment-hl { background: var(--dxw-comment-hl, rgba(255, 200, 90, .38)); }
 .dxw-comment-hl.dxw-hot { background: var(--dxw-comment-hl-active, rgba(255, 170, 0, .55)); }
 .dxw-comment-card {
@@ -18655,7 +18754,7 @@ function renderItem(doc, item, urls, interactive) {
       hit.style.width = `${item.width}px`;
       hit.style.height = `${item.height}px`;
       hit.style.cursor = "move";
-      hit.style.zIndex = item.z !== void 0 ? String(item.z) : item.belowText ? "1" : "6";
+      hit.style.zIndex = item.behind ? "-1" : item.z !== void 0 ? String(item.z) : item.belowText ? "1" : "6";
       if (item.rotate) {
         hit.style.transform = `rotate(${item.rotate.deg}deg)`;
         hit.style.transformOrigin = `${item.rotate.ox}px ${item.rotate.oy}px`;
@@ -18969,7 +19068,7 @@ function renderItem(doc, item, urls, interactive) {
       return node;
     }
     case "text":
-      return renderText(item);
+      return renderText(item, interactive);
     case "wordart":
       return renderWordArt(item);
     case "warptext":
@@ -19234,7 +19333,7 @@ function renderWarpText(item) {
   svg.appendChild(text);
   return svg;
 }
-function renderText(item) {
+function renderText(item, interactive) {
   const tag = item.href ? "a" : "span";
   const el16 = document.createElement(tag);
   el16.style.position = "absolute";
@@ -19325,9 +19424,22 @@ function renderText(item) {
     el16.style.cursor = "pointer";
   }
   if (item.href) {
-    el16.href = item.href;
-    el16.target = "_blank";
-    el16.rel = "noreferrer noopener";
+    const anchor = el16;
+    anchor.href = item.href;
+    anchor.target = "_blank";
+    anchor.rel = "noreferrer noopener";
+    anchor.title = item.href;
+    if (interactive) {
+      anchor.addEventListener("mouseup", (event) => {
+        if (event.metaKey || event.ctrlKey) event.stopPropagation();
+      });
+      anchor.addEventListener("click", (event) => {
+        event.preventDefault();
+        if (event.metaKey || event.ctrlKey) {
+          window.open(anchor.href, "_blank", "noopener,noreferrer");
+        }
+      });
+    }
     if (!props.color) el16.style.color = "#0563c1";
   }
   if (item.rotate) {
@@ -19653,7 +19765,11 @@ function setPageLayout(doc, patch, target) {
     if (patch.columns !== void 0) {
       sectPr.children = sectPr.children.filter((c) => localName(c.name) !== "cols");
       if (patch.columns > 1) {
-        const cols = el2(`${w}cols`, { [`${w}num`]: String(patch.columns), [`${w}space`]: "720" });
+        const cols = el2(`${w}cols`, {
+          [`${w}num`]: String(patch.columns),
+          [`${w}space`]: "720",
+          ...patch.columnSeparator ? { [`${w}sep`]: "1" } : {}
+        });
         const idx = sectPr.children.indexOf(pgMar);
         sectPr.children.splice(idx + 1, 0, cols);
       }
@@ -20638,12 +20754,26 @@ function resizeDrawing(doc, drawingEl, widthPx, heightPx) {
   const EMU = 9525;
   const cx = String(Math.max(Math.round(widthPx * EMU), EMU));
   const cy = String(Math.max(Math.round(heightPx * EMU), EMU));
+  let lineExtent;
+  const findLineExtent = (node) => {
+    if (lineExtent) return;
+    if (localName(node.name) === "spPr") {
+      const preset = attr(child(node, "prstGeom"), "prst") ?? "";
+      if (preset === "line" || preset.startsWith("straightConnector")) {
+        lineExtent = child(child(node, "xfrm"), "ext");
+        return;
+      }
+    }
+    for (const childNode of node.children) findLineExtent(childNode);
+  };
+  findLineExtent(drawingEl);
+  const keepHorizontal = lineExtent ? parseInt(lineExtent.attrs[Object.keys(lineExtent.attrs).find((key) => localName(key) === "cy") ?? "cy"] ?? "0", 10) === 0 : false;
   let touched = false;
   const setExt = (el16) => {
     const cxKey = Object.keys(el16.attrs).find((k) => localName(k) === "cx") ?? "cx";
     const cyKey = Object.keys(el16.attrs).find((k) => localName(k) === "cy") ?? "cy";
     el16.attrs[cxKey] = cx;
-    el16.attrs[cyKey] = cy;
+    el16.attrs[cyKey] = el16 === lineExtent && keepHorizontal ? "0" : cy;
     touched = true;
   };
   const walk2 = (el16, insideGroup) => {
@@ -20919,10 +21049,23 @@ function sectPrAt(doc, t) {
   }
   return seen ? bodySectPr : bodySectPr;
 }
+function sectionContextAt(doc, t) {
+  const body = bodyOf(doc);
+  const target = sectPrAt(doc, t);
+  if (!body || !target) return null;
+  const sections = [];
+  const visit = (node) => {
+    if (localName(node.name) === "sectPr") sections.push(node);
+    else for (const child4 of node.children) visit(child4);
+  };
+  visit(body);
+  const index = sections.indexOf(target);
+  return index < 0 ? null : { index: index + 1, count: sections.length };
+}
 function insertBreakAt(doc, t, offset, kind) {
   const rEl = doc.findParentOf(t);
   const pEl = rEl && doc.findParentOf(rEl);
-  if (!rEl || !pEl || localName(rEl.name) !== "r") return false;
+  if (!rEl || !pEl || localName(rEl.name) !== "r") return null;
   const rw = rEl.name.includes(":") ? rEl.name.slice(0, rEl.name.indexOf(":") + 1) : "";
   const rPr = rEl.children.find((c) => localName(c.name) === "rPr");
   const brRun = el4(`${rw}r`, {}, [
@@ -20930,8 +21073,11 @@ function insertBreakAt(doc, t, offset, kind) {
     el4(`${rw}br`, { [`${rw}type`]: kind })
   ]);
   const rIdx = pEl.children.indexOf(rEl);
+  let destination = t;
   if (offset >= t.text.length) {
-    pEl.children.splice(rIdx + 1, 0, brRun);
+    destination = el4(`${rw}t`, { "xml:space": "preserve" }, [], "");
+    const tail = el4(`${rw}r`, {}, [...rPr ? [cloneDeep(rPr)] : [], destination]);
+    pEl.children.splice(rIdx + 1, 0, brRun, tail);
   } else if (offset <= 0) {
     pEl.children.splice(rIdx, 0, brRun);
   } else {
@@ -20939,9 +21085,10 @@ function insertBreakAt(doc, t, offset, kind) {
     t.text = t.text.slice(0, offset);
     const tail = el4(`${rw}r`, {}, [...rPr ? [cloneDeep(rPr)] : [], tailT]);
     pEl.children.splice(rIdx + 1, 0, brRun, tail);
+    destination = tailT;
   }
   doc.refresh();
-  return true;
+  return { t: destination, offset: 0 };
 }
 function insertBlankPageAt(doc, t, offset) {
   const rEl = doc.findParentOf(t);
@@ -21626,13 +21773,14 @@ function insertShapeAt(doc, caretT, preset, text = "") {
   const height = isLine ? 2 : preset === "textBox" ? 72 : 96;
   const cx = String(Math.round(width * EMU_PER_PX4));
   const cy = String(Math.round(height * EMU_PER_PX4));
+  const shapeCy = isLine ? "0" : cy;
   const geometry = preset === "roundedRectangle" ? "roundRect" : preset === "rectangle" || preset === "textBox" ? "rect" : preset;
   const isTextBox = preset === "textBox";
   const shapeName = isLine ? `Line ${id}` : isTextBox ? `Text Box ${id}` : `Shape ${id}`;
   const spPr = [
     el6("a:xfrm", {}, [
       el6("a:off", { x: "0", y: "0" }),
-      el6("a:ext", { cx, cy })
+      el6("a:ext", { cx, cy: shapeCy })
     ]),
     el6("a:prstGeom", { prst: geometry }, [el6("a:avLst")]),
     isTextBox || isLine ? el6("a:noFill") : el6("a:solidFill", {}, [el6("a:srgbClr", { val: "4472C4" })]),
@@ -21734,6 +21882,10 @@ function insertWordArtAt(doc, caretT, text, preset = "plain") {
 function isDrawingWordArt(drawing) {
   return (descendant3(drawing, "docPr")?.attrs.name ?? "").startsWith("WordArt ");
 }
+function isDrawingLine(drawing) {
+  const preset = descendant3(drawing, "prstGeom")?.attrs.prst ?? "";
+  return preset === "line" || preset.startsWith("straightConnector");
+}
 function drawingWordArtText(drawing) {
   return isDrawingWordArt(drawing) ? descendant3(drawing, "t")?.text ?? "" : "";
 }
@@ -21746,15 +21898,42 @@ function setDrawingWordArtText(doc, drawing, text) {
   return true;
 }
 function drawingLineStyle(drawing) {
+  const spPr = descendant3(drawing, "spPr");
+  if (!spPr) return null;
   const line2 = descendant3(drawing, "ln");
-  if (!line2) return null;
+  if (!line2) return { color: "#000000", width: 0.75 };
   const color = descendant3(line2, "srgbClr")?.attrs.val ?? "000000";
   const width = Math.max((parseInt(line2.attrs.w ?? "0", 10) || 0) / EMU_PER_PX4, 0.75);
   return { color: `#${color.toUpperCase()}`, width };
 }
+function drawingFillColor(drawing) {
+  const spPr = descendant3(drawing, "spPr");
+  if (!spPr || spPr.children.some((child4) => localName(child4.name) === "noFill")) return null;
+  const solidFill = spPr.children.find((child4) => localName(child4.name) === "solidFill");
+  const color = solidFill ? descendant3(solidFill, "srgbClr")?.attrs.val : void 0;
+  return color ? `#${color.toUpperCase()}` : null;
+}
+function setDrawingFill(doc, drawing, color) {
+  const spPr = descendant3(drawing, "spPr");
+  if (!spPr) return false;
+  spPr.children = spPr.children.filter((child4) => {
+    const name = localName(child4.name);
+    return name !== "solidFill" && name !== "noFill";
+  });
+  const fill = color ? el6("a:solidFill", {}, [el6("a:srgbClr", { val: color.replace(/^#/, "").toUpperCase() })]) : el6("a:noFill");
+  const lineIndex = spPr.children.findIndex((child4) => localName(child4.name) === "ln");
+  spPr.children.splice(lineIndex === -1 ? spPr.children.length : lineIndex, 0, fill);
+  doc.refresh();
+  return true;
+}
 function setDrawingLineStyle(doc, drawing, color, widthPx) {
-  const line2 = descendant3(drawing, "ln");
-  if (!line2) return false;
+  const spPr = descendant3(drawing, "spPr");
+  if (!spPr) return false;
+  let line2 = spPr.children.find((child4) => localName(child4.name) === "ln");
+  if (!line2) {
+    line2 = el6("a:ln");
+    spPr.children.push(line2);
+  }
   line2.attrs.w = String(Math.max(1, Math.round(widthPx * EMU_PER_PX4)));
   line2.children = line2.children.filter((child4) => {
     const name = localName(child4.name);
@@ -23194,7 +23373,14 @@ function emptyParagraphLike(el16) {
   };
 }
 function removeDrawingRun(doc, src) {
-  let run = doc.findParentOf(src);
+  let drawing = src;
+  while (drawing) {
+    const name = localName(drawing.name);
+    if (name === "drawing" || name === "pict" || name === "object" || name === "AlternateContent") break;
+    drawing = doc.findParentOf(drawing);
+  }
+  if (!drawing) return false;
+  let run = doc.findParentOf(drawing);
   while (run && localName(run.name) !== "r") run = doc.findParentOf(run);
   const parent = run ? doc.findParentOf(run) : void 0;
   if (!run || !parent) return false;
@@ -23516,7 +23702,7 @@ var _DocxEditor = class _DocxEditor {
         this.focusText();
         return;
       }
-      if (this.imageOverlay?.contains(e.target)) return;
+      if (this.imageOverlay?.contains(e.target) || this.imageToolbar?.contains(e.target)) return;
       if (this.wordArtOverlay?.contains(e.target)) return;
       if (this.wordArtTextEditor?.input.contains(e.target)) return;
       if (this.selectedInkGroup?.overlay.contains(e.target)) return;
@@ -23541,6 +23727,9 @@ var _DocxEditor = class _DocxEditor {
       }
       const onGlyph = this.caretFromPoint(e.clientX, e.clientY);
       let caret = onGlyph ?? this.nearestCaret(e.clientX, e.clientY);
+      if (!onGlyph && !this.inHeaderFooter && e.detail === 1 && !e.shiftKey) {
+        caret = this.extendCaretAfterPageTable(e.clientX, e.clientY) ?? caret;
+      }
       let region = caret ? this.regionOf(caret.t) : "body";
       const storyObject = e.target?.closest?.(
         "[data-dxw-textbox-story-object]"
@@ -23617,7 +23806,8 @@ var _DocxEditor = class _DocxEditor {
         this.hfPage = null;
       }
       if (caret && region === "body" && !onGlyph && e.detail === 1 && !e.shiftKey) {
-        caret = this.extendCaretBelowFloatingTable(caret, e.clientX, e.clientY) ?? this.extendCaretIntoBodyWhitespace(caret, e.clientX, e.clientY) ?? caret;
+        const columnCaret = this.extendCaretIntoLaterColumn(caret, e.clientX, e.clientY);
+        caret = columnCaret ? this.extendCaretIntoBodyWhitespace(columnCaret, e.clientX, e.clientY, false) ?? columnCaret : this.extendCaretBelowFloatingTable(caret, e.clientX, e.clientY) ?? this.extendCaretIntoBodyWhitespace(caret, e.clientX, e.clientY) ?? caret;
       }
       if (caret && e.shiftKey) {
         const anchor = this.anchorPoint();
@@ -23677,7 +23867,7 @@ var _DocxEditor = class _DocxEditor {
       menu.setAttribute("role", "menu");
       menu.style.cssText = `position:fixed;left:${event.clientX}px;top:${event.clientY}px;z-index:2147483647;min-width:210px;padding:5px;background:#fff;border:1px solid #dadce0;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.2);font:13px system-ui,sans-serif;color:#202124;`;
       const isApplePlatform = /Mac|iPhone|iPad/.test(navigator.platform);
-      const mod = isApplePlatform ? "\u2318" : "Ctrl+";
+      const mod2 = isApplePlatform ? "\u2318" : "Ctrl+";
       const item = (label, shortcut, disabled, action) => {
         const button = document.createElement("button");
         button.type = "button";
@@ -23712,35 +23902,35 @@ var _DocxEditor = class _DocxEditor {
       const selectedText = selectionTextLogical(this.host.doc, this.getSelectionSegments());
       const clipboard = navigator.clipboard;
       const copy = () => clipboard.writeText(selectedText);
-      item("Copy", `${mod}C`, !selectedText || !clipboard?.writeText, () => void copy());
-      item("Cut", `${mod}X`, !selectedText || !clipboard?.writeText, () => {
+      item("Copy", `${mod2}C`, !selectedText || !clipboard?.writeText, () => void copy());
+      item("Cut", `${mod2}X`, !selectedText || !clipboard?.writeText, () => {
         void copy().then(() => {
           this.host.history?.checkpoint();
           this.removeSelectedText();
           this.commit();
         });
       });
-      item("Paste", `${mod}V`, !clipboard?.readText, () => {
+      item("Paste", `${mod2}V`, !clipboard?.readText, () => {
         void clipboard.readText().then((text) => {
           if (text) this.insertText(text);
         });
       });
       separator();
-      item("Bold", `${mod}B`, !selectedText, () => this.host.onFormatShortcut?.("bold"));
-      item("Italic", `${mod}I`, !selectedText, () => this.host.onFormatShortcut?.("italic"));
-      item("Underline", `${mod}U`, !selectedText, () => this.host.onFormatShortcut?.("underline"));
+      item("Bold", `${mod2}B`, !selectedText, () => this.host.onFormatShortcut?.("bold"));
+      item("Italic", `${mod2}I`, !selectedText, () => this.host.onFormatShortcut?.("italic"));
+      item("Underline", `${mod2}U`, !selectedText, () => this.host.onFormatShortcut?.("underline"));
       separator();
-      item("Link\u2026", `${mod}K`, !selectedText, () => this.host.onTextCommand?.("link"));
+      item("Link\u2026", `${mod2}K`, !selectedText, () => this.host.onTextCommand?.("link"));
       item("New comment\u2026", isApplePlatform ? "\u2318\u2325A" : "Ctrl+Alt+M", !selectedText, () => this.host.onTextCommand?.("comment"));
-      item("Bulleted list", `${mod}Shift+L`, false, () => this.host.onTextCommand?.("bullet"));
-      item("Numbered list", `${mod}Shift+7`, false, () => this.host.onTextCommand?.("number"));
+      item("Bulleted list", `${mod2}Shift+L`, false, () => this.host.onTextCommand?.("bullet"));
+      item("Numbered list", `${mod2}Shift+7`, false, () => this.host.onTextCommand?.("number"));
       separator();
-      item("Align left", `${mod}L`, false, () => this.host.onTextCommand?.("alignLeft"));
-      item("Center", `${mod}E`, false, () => this.host.onTextCommand?.("alignCenter"));
-      item("Align right", `${mod}R`, false, () => this.host.onTextCommand?.("alignRight"));
-      item("Justify", `${mod}J`, false, () => this.host.onTextCommand?.("justify"));
+      item("Align left", `${mod2}L`, false, () => this.host.onTextCommand?.("alignLeft"));
+      item("Center", `${mod2}E`, false, () => this.host.onTextCommand?.("alignCenter"));
+      item("Align right", `${mod2}R`, false, () => this.host.onTextCommand?.("alignRight"));
+      item("Justify", `${mod2}J`, false, () => this.host.onTextCommand?.("justify"));
       separator();
-      item("Select all", `${mod}A`, false, () => this.selectAll());
+      item("Select all", `${mod2}A`, false, () => this.selectAll());
       document.body.appendChild(menu);
       const rect = menu.getBoundingClientRect();
       menu.style.left = `${Math.max(6, Math.min(event.clientX, window.innerWidth - rect.width - 6))}px`;
@@ -23839,7 +24029,11 @@ var _DocxEditor = class _DocxEditor {
       if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && this.caret) {
         e.preventDefault();
         this.host.history?.checkpoint();
-        if (insertBreakAt(this.host.doc, this.caret.t, this.caret.offset, "page")) this.commit();
+        const destination = insertBreakAt(this.host.doc, this.caret.t, this.caret.offset, e.shiftKey ? "column" : "page");
+        if (destination) {
+          this.caret = { ...this.caret, ...destination };
+          this.commit();
+        }
         return;
       }
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
@@ -24611,6 +24805,13 @@ var _DocxEditor = class _DocxEditor {
   getSelectedDrawingSource() {
     return this.selectedImage?.src ?? null;
   }
+  /** Whether Layout's contextual object commands currently have a target. */
+  hasSelectedObject() {
+    return this.selectedImage !== null || this.selectedInkGroup !== null;
+  }
+  notifyObjectSelection() {
+    document.dispatchEvent(new CustomEvent("dxw-object-selection", { detail: this.hasSelectedObject() }));
+  }
   /** Restore an object selection after a render replaced its DOM element. */
   reselectDrawing(src) {
     this.reselectImage(src);
@@ -25235,8 +25436,10 @@ var _DocxEditor = class _DocxEditor {
     return setImageWrap(this.host.doc, drawingEl, "square", { x, y: 0 });
   }
   deselectInkGroup() {
+    const changed = this.selectedInkGroup !== null;
     this.selectedInkGroup?.overlay.remove();
     this.selectedInkGroup = null;
+    if (changed) this.notifyObjectSelection();
   }
   selectInkGroup(bindings) {
     this.deselectInkGroup();
@@ -25254,6 +25457,7 @@ var _DocxEditor = class _DocxEditor {
     overlay.style.cssText = `position:absolute;left:${left}px;top:${top}px;width:${right - left}px;height:${bottom - top}px;border:1.5px dashed #1a73e8;background:rgba(26,115,232,.04);box-sizing:border-box;cursor:move;z-index:9;`;
     surface.appendChild(overlay);
     this.selectedInkGroup = { sources, bindings, overlay };
+    this.notifyObjectSelection();
     this.hideCaret();
     this.focusText();
   }
@@ -25351,12 +25555,14 @@ var _DocxEditor = class _DocxEditor {
     return true;
   }
   deselectImage() {
+    const changed = this.selectedImage !== null;
     this.wordArtTextEditor?.finish(true, false);
     this.imageOverlay?.remove();
     this.imageToolbar?.remove();
     this.imageOverlay = null;
     this.imageToolbar = null;
     this.selectedImage = null;
+    if (changed) this.notifyObjectSelection();
   }
   /** Re-select the same drawing after a re-render replaced its element.
    * A header/footer drawing paints one instance per page from the same src;
@@ -25397,13 +25603,32 @@ var _DocxEditor = class _DocxEditor {
     overlay.style.boxSizing = "border-box";
     overlay.style.pointerEvents = "none";
     overlay.style.zIndex = "2147483647";
+    const line2 = kind === "drawing" && isDrawingLine(src);
+    if (line2) {
+      const move = document.createElement("div");
+      move.dataset.dxwObjectMove = "1";
+      move.title = "Drag to move line";
+      move.style.cssText = "position:absolute;left:5px;right:5px;top:calc(50% - 7px);height:14px;pointer-events:auto;cursor:move;";
+      overlay.appendChild(move);
+    }
     for (const [dir, fx, fy] of _DocxEditor.HANDLE_DIRS) {
+      if (line2 && dir !== "e" && dir !== "w") continue;
       const h = document.createElement("div");
       const corner = dir.length === 2;
       h.style.cssText = `position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #1a73e8;box-sizing:border-box;border-radius:${corner ? "50%" : "2px"};pointer-events:auto;left:calc(${fx * 100}% - 5px);top:calc(${fy * 100}% - 5px);cursor:${_DocxEditor.handleCursor(dir)};box-shadow:0 1px 2px rgba(0,0,0,.25);`;
       h.dataset.dxwImgHandle = dir;
       overlay.appendChild(h);
     }
+    if (el16.dataset.dxwModel3d) {
+      const move = document.createElement("button");
+      move.type = "button";
+      move.dataset.dxwObjectMove = "1";
+      move.title = "Drag to move 3D object";
+      move.setAttribute("aria-label", "Move 3D object");
+      move.textContent = "Move";
+      move.style.cssText = "position:absolute;left:6px;top:6px;border:1px solid #8ab4f8;border-radius:4px;padding:3px 7px;background:rgba(255,255,255,.94);color:#174ea6;font:600 11px system-ui,sans-serif;pointer-events:auto;cursor:move;box-shadow:0 1px 3px rgba(0,0,0,.2);";
+      overlay.appendChild(move);
+    }
     const bar = document.createElement("div");
     bar.style.cssText = "position:absolute;display:flex;gap:2px;background:#fff;border:1px solid #dadce0;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.18);padding:2px;pointer-events:auto;font:11px system-ui,sans-serif;white-space:nowrap;z-index:2147483647;";
     const isFloating = isFloatingDrawing(src);
@@ -25507,6 +25732,42 @@ var _DocxEditor = class _DocxEditor {
       });
     });
     if (kind === "drawing") {
+      extra("Rotate", "Set rotation (degrees)", () => {
+        void requestTextInputDialog(this.host.container, {
+          title: "Rotation",
+          label: "Degrees clockwise",
+          value: String(drawingRotation(src)),
+          placeholder: "90"
+        }).then((next) => {
+          if (next === null) return;
+          const degrees = parseFloat(next);
+          if (!Number.isFinite(degrees)) return;
+          this.host.history?.checkpoint();
+          if (setDrawingRotation(this.host.doc, src, degrees)) {
+            this.host.rerender(void 0, "global");
+            this.reselectImage(src);
+          }
+        });
+      });
+      if (!isDrawingLine(src)) {
+        extra("Fill", "Shape fill color", () => {
+          void requestTextInputDialog(this.host.container, {
+            title: "Fill",
+            label: "Color or none",
+            value: drawingFillColor(src) ?? "none",
+            placeholder: "#4472C4 or none"
+          }).then((next) => {
+            if (next === null) return;
+            const color = /^\s*none\s*$/i.test(next) ? null : /^\s*#?([0-9a-f]{6})\s*$/i.exec(next)?.[1];
+            if (color === void 0) return;
+            this.host.history?.checkpoint();
+            if (setDrawingFill(this.host.doc, src, color ? `#${color}` : null)) {
+              this.host.rerender();
+              this.reselectImage(src);
+            }
+          });
+        });
+      }
       extra("Outline", "Outline color and weight", () => {
         const style = drawingLineStyle(src);
         if (!style) return;
@@ -25525,10 +25786,11 @@ var _DocxEditor = class _DocxEditor {
           }
         });
       });
+      extra("Delete", "Delete shape", () => this.deleteSelectedImage());
     }
     const drawingBinding = kind === "drawing" ? this.host.getHandle()?.drawings.find((binding) => binding.item.src === src) : void 0;
     if (drawingBinding?.item.textboxStory && !isDrawingWordArt(src)) {
-      extra("Edit text", "Edit shape text", () => {
+      extra("Edit text", "Edit shape text with the Home font controls", () => {
         const rect = drawingBinding.el.getBoundingClientRect();
         this.enterTextboxStory(src, rect.left + rect.width / 2, rect.top + rect.height / 2);
       });
@@ -25578,6 +25840,7 @@ var _DocxEditor = class _DocxEditor {
     bar.style.left = `${left}px`;
     this.imageOverlay = overlay;
     this.imageToolbar = bar;
+    this.notifyObjectSelection();
     this.focusText();
   }
   deleteSelectedImage() {
@@ -25586,7 +25849,7 @@ var _DocxEditor = class _DocxEditor {
     this.host.history?.checkpoint();
     if (removeDrawingRun(this.host.doc, src)) {
       this.host.doc.refresh();
-      this.host.rerender();
+      this.host.rerender(void 0, "global");
     }
     this.deselectImage();
   }
@@ -25774,12 +26037,18 @@ var _DocxEditor = class _DocxEditor {
   /** Handle mousedown on images / their resize handle. Returns true if consumed. */
   startImageInteraction(e, target) {
     const zoom = this.host.zoom ?? 1;
+    const objectMove = target.closest?.("[data-dxw-object-move]");
+    if (this.imageToolbar?.contains(target)) {
+      this.suppressNextMouseUp = true;
+      return true;
+    }
     if (target.closest?.("[data-dxw-model3d-viewer]")) return true;
     if (target.dataset.dxwImgHandle && this.selectedImage) {
       e.preventDefault();
       e.stopPropagation();
       const dir = target.dataset.dxwImgHandle;
       const { el: el16, src } = this.selectedImage;
+      const line2 = this.selectedImage.kind === "drawing" && isDrawingLine(src);
       const nearPt = { x: el16.getBoundingClientRect().left, y: el16.getBoundingClientRect().top };
       const w0 = parseFloat(el16.style.width);
       const h0 = parseFloat(el16.style.height);
@@ -25806,7 +26075,7 @@ var _DocxEditor = class _DocxEditor {
           h = h0 * scale;
         }
         w = Math.max(8, w);
-        h = Math.max(8, h);
+        h = line2 ? h0 : Math.max(8, h);
         apply(el16);
         if (this.imageOverlay) apply(this.imageOverlay);
       };
@@ -25841,8 +26110,8 @@ var _DocxEditor = class _DocxEditor {
     }
     const mathTarget = target.closest?.("[data-dxw-math]");
     if (mathTarget) {
-      const handle = this.host.getHandle();
-      const mathBinding = handle?.bindings.find((b) => b.el === mathTarget);
+      const handle2 = this.host.getHandle();
+      const mathBinding = handle2?.bindings.find((b) => b.el === mathTarget);
       const oMathEl = mathBinding?.item.mathSrc;
       if (oMathEl) {
         e.preventDefault();
@@ -25869,9 +26138,21 @@ var _DocxEditor = class _DocxEditor {
         return true;
       }
     }
-    if (target.dataset.dxwDrawing) {
-      const handle = this.host.getHandle();
-      const binding = handle?.drawings.find((b) => b.el === target);
+    const drawingTarget = objectMove && this.selectedImage?.kind === "drawing" ? this.selectedImage.el : target.closest?.("[data-dxw-drawing]");
+    const handle = this.host.getHandle();
+    let drawingBinding = drawingTarget ? handle?.drawings.find((b) => b.el === drawingTarget) : void 0;
+    if (!drawingBinding && !target.closest("button")) {
+      const pointCaret2 = this.caretFromPoint(e.clientX, e.clientY);
+      if (!pointCaret2 || !this.inActiveRegion(pointCaret2.t)) {
+        drawingBinding = handle?.drawings.find((candidate) => {
+          if (!candidate.item.behind) return false;
+          const rect = candidate.el.getBoundingClientRect();
+          return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+        });
+      }
+    }
+    if (drawingBinding) {
+      const binding = drawingBinding;
       if (!binding) return false;
       const textboxStory = binding.item.textboxStory === true;
       if (!textboxStory && this.regionOf(binding.item.src) === "hf" !== this.inHeaderFooter) return false;
@@ -25891,11 +26172,41 @@ var _DocxEditor = class _DocxEditor {
       }
       const startX = e.clientX;
       const startY = e.clientY;
+      const el16 = binding.el;
+      const left0 = parseFloat(el16.style.left) || 0;
+      const top0 = parseFloat(el16.style.top) || 0;
       const rect0 = binding.el.getBoundingClientRect();
       let moved = false;
+      let toolbarLeft0 = 0;
+      let toolbarTop0 = 0;
       const onMove = (me) => {
-        if (!moved && Math.hypot(me.clientX - startX, me.clientY - startY) > 5) moved = true;
-        if (moved && !binding.item.anchored) this.showDropIndicator(me.clientX, me.clientY);
+        if (!moved && Math.hypot(me.clientX - startX, me.clientY - startY) > 5) {
+          moved = true;
+          if (binding.item.anchored) {
+            if (this.selectedImage?.src !== binding.item.src) {
+              this.selectImage(el16, binding.item.src, void 0, "drawing");
+            }
+            toolbarLeft0 = parseFloat(this.imageToolbar?.style.left ?? "") || 0;
+            toolbarTop0 = parseFloat(this.imageToolbar?.style.top ?? "") || 0;
+          }
+        }
+        if (!moved) return;
+        if (binding.item.anchored) {
+          const dx = (me.clientX - startX) / zoom;
+          const dy = (me.clientY - startY) / zoom;
+          el16.style.left = `${left0 + dx}px`;
+          el16.style.top = `${top0 + dy}px`;
+          if (this.imageOverlay) {
+            this.imageOverlay.style.left = `${left0 + dx}px`;
+            this.imageOverlay.style.top = `${top0 + dy}px`;
+          }
+          if (this.imageToolbar) {
+            this.imageToolbar.style.left = `${toolbarLeft0 + dx}px`;
+            this.imageToolbar.style.top = `${toolbarTop0 + dy}px`;
+          }
+        } else {
+          this.showDropIndicator(me.clientX, me.clientY);
+        }
       };
       const onUp = (me) => {
         document.removeEventListener("mousemove", onMove);
@@ -25903,15 +26214,31 @@ var _DocxEditor = class _DocxEditor {
         this.hideDropIndicator();
         this.suppressNextMouseUp = false;
         if (!moved) {
-          this.selectImage(target, binding.item.src, void 0, "drawing");
+          this.selectImage(binding.el, binding.item.src, void 0, "drawing");
           return;
         }
         if (binding.item.anchored) {
           this.host.history?.checkpoint();
-          const want = { x: rect0.left + me.clientX - startX, y: rect0.top + me.clientY - startY };
-          if (this.moveFloatingDrawing(binding, me.clientX - startX, me.clientY - startY)) {
+          const dxClient = me.clientX - startX;
+          const dyClient = me.clientY - startY;
+          const want = { x: rect0.left + dxClient, y: rect0.top + dyClient };
+          const pageRect = el16.closest(".dxw-page")?.getBoundingClientRect();
+          const centerX = want.x + rect0.width / 2;
+          const centerY = want.y + rect0.height / 2;
+          const staysOnPage = !!pageRect && centerX >= pageRect.left && centerX <= pageRect.right && centerY >= pageRect.top && centerY <= pageRect.bottom;
+          el16.style.left = `${left0}px`;
+          el16.style.top = `${top0}px`;
+          const changed = staysOnPage ? setFloatingPagePosition(
+            this.host.doc,
+            binding.item.src,
+            left0 + dxClient / zoom,
+            top0 + dyClient / zoom
+          ) : this.moveFloatingDrawing(binding, dxClient, dyClient);
+          if (changed) {
             this.host.rerender();
             this.reselectImage(binding.item.src, want);
+          } else {
+            this.reselectImage(binding.item.src, { x: rect0.left, y: rect0.top });
           }
           return;
         }
@@ -25930,12 +26257,18 @@ var _DocxEditor = class _DocxEditor {
       return true;
     }
     let imageBinding;
-    if (target.tagName === "IMG") {
-      const handle = this.host.getHandle();
-      imageBinding = handle?.images.find((b) => b.el === target || b.el.contains(target));
-    } else if (!target.closest("button") && !target.dataset.dxwImgHandle && !this.imageOverlay?.contains(target) && !this.caretFromPoint(e.clientX, e.clientY)) {
-      const handle = this.host.getHandle();
-      imageBinding = handle?.images.find((b) => {
+    const pointCaret = this.caretFromPoint(e.clientX, e.clientY);
+    if (objectMove && this.selectedImage?.kind === "image") {
+      const selected = this.selectedImage;
+      imageBinding = this.host.getHandle()?.images.find(
+        (binding) => binding.el === selected.el && binding.item.src === selected.src
+      );
+    } else if (target.tagName === "IMG") {
+      const handle2 = this.host.getHandle();
+      imageBinding = handle2?.images.find((b) => b.el === target || b.el.contains(target));
+    } else if (!target.closest("button") && !target.dataset.dxwImgHandle && !this.imageOverlay?.contains(target) && (!pointCaret || !this.inActiveRegion(pointCaret.t))) {
+      const handle2 = this.host.getHandle();
+      imageBinding = handle2?.images.find((b) => {
         if (!b.item.behind) return false;
         const r = b.el.getBoundingClientRect();
         return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
@@ -25950,30 +26283,37 @@ var _DocxEditor = class _DocxEditor {
       const startX = e.clientX;
       const startY = e.clientY;
       const floating = isFloatingDrawing(binding.item.src);
+      const moveAsObject = !!objectMove;
       const el16 = binding.el;
       const left0 = parseFloat(el16.style.left) || 0;
       const top0 = parseFloat(el16.style.top) || 0;
       const rect0 = el16.getBoundingClientRect();
       let moved = false;
       let ghost = null;
+      let toolbarLeft0 = parseFloat(this.imageToolbar?.style.left ?? "") || 0;
+      let toolbarTop0 = parseFloat(this.imageToolbar?.style.top ?? "") || 0;
       const grabX = e.clientX - el16.getBoundingClientRect().left;
       const grabY = e.clientY - el16.getBoundingClientRect().top;
       const onMove = (me) => {
         if (!moved && Math.hypot(me.clientX - startX, me.clientY - startY) > 5) {
           moved = true;
-          if (!floating) {
+          if (!floating && !moveAsObject) {
             ghost = el16.cloneNode(true);
             ghost.style.position = "fixed";
             ghost.style.opacity = "0.5";
             ghost.style.pointerEvents = "none";
             ghost.style.zIndex = "1000";
             document.body.appendChild(ghost);
-          } else if (this.imageOverlay === null) {
+          } else if (this.selectedImage?.src !== binding.item.src) {
             this.selectImage(el16, binding.item.src, binding.item);
           }
+          if (floating || moveAsObject) {
+            toolbarLeft0 = parseFloat(this.imageToolbar?.style.left ?? "") || 0;
+            toolbarTop0 = parseFloat(this.imageToolbar?.style.top ?? "") || 0;
+          }
         }
         if (!moved) return;
-        if (floating) {
+        if (floating || moveAsObject) {
           const nl = left0 + (me.clientX - startX) / zoom;
           const nt = top0 + (me.clientY - startY) / zoom;
           el16.style.left = `${nl}px`;
@@ -25982,6 +26322,10 @@ var _DocxEditor = class _DocxEditor {
             this.imageOverlay.style.left = `${nl}px`;
             this.imageOverlay.style.top = `${nt}px`;
           }
+          if (this.imageToolbar) {
+            this.imageToolbar.style.left = `${toolbarLeft0 + (me.clientX - startX) / zoom}px`;
+            this.imageToolbar.style.top = `${toolbarTop0 + (me.clientY - startY) / zoom}px`;
+          }
         } else if (ghost) {
           ghost.style.left = `${me.clientX - grabX}px`;
           ghost.style.top = `${me.clientY - grabY}px`;
@@ -26049,6 +26393,18 @@ var _DocxEditor = class _DocxEditor {
             el16.style.top = `${top0}px`;
             this.reselectImage(src, { x: rect0.left, y: rect0.top });
           }
+        } else if (moveAsObject) {
+          const src = binding.item.src;
+          const dx = (me.clientX - startX) / zoom;
+          const dy = (me.clientY - startY) / zoom;
+          const want = { x: rect0.left + me.clientX - startX, y: rect0.top + me.clientY - startY };
+          el16.style.left = `${left0}px`;
+          el16.style.top = `${top0}px`;
+          setImageWrap(this.host.doc, src, "square", { x: 0, y: 0 });
+          if (setFloatingPagePosition(this.host.doc, src, binding.item.x + dx, binding.item.y + dy)) {
+            this.host.rerender();
+            this.reselectImage(src, want);
+          }
         } else {
           const imgRegion = this.regionOf(binding.item.src);
           let dest = this.caretFromPoint(me.clientX, me.clientY) ?? this.nearestCaret(me.clientX, me.clientY);
@@ -26482,6 +26838,154 @@ var _DocxEditor = class _DocxEditor {
       bias: logicalAfter && item.text.length > 0 ? "end" : void 0
     };
   }
+  columnAtPoint(page, x, y) {
+    const bands = JSON.parse(page.dataset.columnBands ?? "[]");
+    let band = bands[0];
+    for (const candidate of bands) {
+      if (candidate.top <= y + 0.01) band = candidate;
+      else break;
+    }
+    if (!band || band.colXs.length < 2) return null;
+    let best = 0;
+    let bestDistance = Infinity;
+    for (let i = 0; i < band.colXs.length; i++) {
+      const left = band.colXs[i];
+      const right = left + band.colWidths[i];
+      const distance = x < left ? left - x : x > right ? x - right : 0;
+      if (distance < bestDistance) {
+        best = i;
+        bestDistance = distance;
+      }
+    }
+    return {
+      index: best,
+      left: band.colXs[best],
+      right: band.colXs[best] + band.colWidths[best]
+    };
+  }
+  /** Word columns are one text flow. Clicking an empty later column inserts
+   * the column break that Word otherwise exposes through Layout > Breaks, then
+   * keeps click-and-type's vertical placement inside that column. */
+  extendCaretIntoLaterColumn(caret, x, y) {
+    const handle = this.host.getHandle();
+    const page = document.elementFromPoint(x, y)?.closest(".dxw-page");
+    const surface = page?.firstElementChild;
+    if (!handle || !page || !surface) return null;
+    const rect = surface.getBoundingClientRect();
+    const zoom = this.host.zoom ?? 1;
+    const lx = (x - rect.left) / zoom;
+    const ly = (y - rect.top) / zoom;
+    const targetColumn = this.columnAtPoint(page, lx, ly);
+    if (!targetColumn) return null;
+    const binding = handle.bindings.filter(
+      (candidate) => candidate.el.parentElement === surface && candidate.item.src?.t === caret.t && caret.offset >= candidate.item.src.offset && caret.offset <= candidate.item.src.offset + candidate.item.text.length
+    ).sort((a, b) => Math.abs(a.item.lineTop - ly) - Math.abs(b.item.lineTop - ly))[0];
+    if (!binding) return null;
+    const sourceColumn = this.columnAtPoint(
+      page,
+      binding.item.x + Math.max(1, binding.item.width) / 2,
+      binding.item.lineTop
+    );
+    if (!sourceColumn || targetColumn.index <= sourceColumn.index) return null;
+    const rEl = this.host.doc.findParentOf(caret.t);
+    const pEl = rEl && this.host.doc.findParentOf(rEl);
+    if (!rEl || !pEl || localName(rEl.name) !== "r" || localName(pEl.name) !== "p") return null;
+    const prefix = rEl.name.includes(":") ? rEl.name.slice(0, rEl.name.indexOf(":") + 1) : "";
+    const rPr = rEl.children.find((child4) => localName(child4.name) === "rPr");
+    const breakRuns = [];
+    for (let i = sourceColumn.index; i < targetColumn.index; i++) {
+      breakRuns.push({
+        name: `${prefix}r`,
+        attrs: {},
+        children: [
+          ...rPr ? [cloneXml(rPr)] : [],
+          { name: `${prefix}br`, attrs: { [`${prefix}type`]: "column" }, children: [], text: "" }
+        ],
+        text: ""
+      });
+    }
+    const runIndex = pEl.children.indexOf(rEl);
+    const oldText = caret.t.text;
+    let targetText = caret.t;
+    this.host.history?.checkpoint();
+    if (caret.offset <= 0) {
+      pEl.children.splice(runIndex, 0, ...breakRuns);
+    } else {
+      const tailText = {
+        name: caret.t.name,
+        attrs: { ...caret.t.attrs, "xml:space": "preserve" },
+        children: [],
+        text: oldText.slice(caret.offset)
+      };
+      const tailRun = {
+        name: rEl.name,
+        attrs: {},
+        children: [...rPr ? [cloneXml(rPr)] : [], tailText],
+        text: ""
+      };
+      caret.t.text = oldText.slice(0, caret.offset);
+      pEl.children.splice(runIndex + 1, 0, ...breakRuns, tailRun);
+      targetText = tailText;
+    }
+    this.caret = { t: targetText, run: caret.run, offset: 0 };
+    this.pendingClickTypeCheckpoint = true;
+    this.commit(false, "global");
+    return this.nearestCaret(x, y, "body") ?? this.caret;
+  }
+  /** A table can end partway through an intermediate page while the next body
+   * block starts on a later page. Word still lets the user click the open body
+   * area below that table. Materialize ordinary empty paragraphs between the
+   * table and the following block so the requested line becomes editable. */
+  extendCaretAfterPageTable(x, y) {
+    const handle = this.host.getHandle();
+    const page = document.elementFromPoint(x, y)?.closest(".dxw-page");
+    const surface = page?.firstElementChild;
+    if (!handle || !page || !surface) return null;
+    const rect = surface.getBoundingClientRect();
+    const zoom = this.host.zoom ?? 1;
+    const lx = (x - rect.left) / zoom;
+    const ly = (y - rect.top) / zoom;
+    const bodyTop = parseFloat(page.dataset.bodyTop ?? "0");
+    const bodyBottom = parseFloat(page.dataset.bodyBottom ?? "0");
+    if (ly < bodyTop || ly > bodyBottom) return null;
+    if (this.nearestCaret(x, y, "body")) return null;
+    const table2 = handle.grips.filter((grip) => {
+      if (grip.item.axis !== "move" || grip.el.parentElement !== surface) return false;
+      if (ly <= grip.item.y2 + 1 || lx < grip.item.x || lx > (grip.item.x2 ?? grip.item.x)) return false;
+      const parent2 = this.host.doc.findParentOf(grip.item.tbl);
+      if (!parent2 || localName(parent2.name) !== "body") return false;
+      const tblPr = grip.item.tbl.children.find((child4) => localName(child4.name) === "tblPr");
+      return tblPr?.children.some((child4) => localName(child4.name) === "tblpPr") !== true;
+    }).sort((a, b) => b.item.y2 - a.item.y2)[0];
+    if (!table2) return null;
+    const parent = this.host.doc.findParentOf(table2.item.tbl);
+    const nearby = handle.bindings.filter(
+      (binding2) => binding2.el.parentElement === surface && binding2.item.src?.t && this.regionOf(binding2.item.src.t) === "body" && binding2.item.lineTop <= table2.item.y2 + 1
+    ).sort((a, b) => b.item.lineTop - a.item.lineTop)[0];
+    const lineHeight = Math.max(1, nearby?.item.lineHeight ?? 16);
+    const lineCount = Math.max(1, Math.round((ly - table2.item.y2) / lineHeight) + 1);
+    const w = table2.item.tbl.name.includes(":") ? table2.item.tbl.name.slice(0, table2.item.tbl.name.indexOf(":") + 1) : "";
+    const paragraphs = [];
+    let targetText = null;
+    for (let i = 0; i < lineCount; i++) {
+      const created = emptyParagraphLike(table2.item.tbl);
+      if (i === 0) {
+        created.paragraph.children.unshift({ name: `${w}pPr`, attrs: {}, children: [], text: "" });
+      }
+      paragraphs.push(created.paragraph);
+      targetText = created.text;
+    }
+    this.host.history?.checkpoint();
+    parent.children.splice(parent.children.indexOf(table2.item.tbl) + 1, 0, ...paragraphs);
+    this.pendingClickTypeCheckpoint = true;
+    this.host.doc.refresh();
+    this.host.rerender(void 0, "global");
+    const binding = targetText ? this.host.getHandle()?.bindingsByText.get(targetText)?.[0] : void 0;
+    if (!targetText || !binding?.item.src) return null;
+    this.caret = { t: targetText, run: binding.item.src.run, offset: 0 };
+    this.focusText();
+    return this.caret;
+  }
   /** Materialize Word's click-and-type position below a moved floating table. */
   extendCaretBelowFloatingTable(caret, x, y) {
     const handle = this.host.getHandle();
@@ -26545,7 +27049,7 @@ var _DocxEditor = class _DocxEditor {
   /** Word-style click-and-type: clicking below the final body line on a page
    * creates the intervening empty paragraphs so vertical arrows visit every
    * visible line instead of jumping across synthetic paragraph spacing. */
-  extendCaretIntoBodyWhitespace(caret, x, y) {
+  extendCaretIntoBodyWhitespace(caret, x, y, checkpoint = true) {
     const handle = this.host.getHandle();
     const page = document.elementFromPoint(x, y)?.closest(".dxw-page");
     const surface = page?.firstElementChild;
@@ -26570,7 +27074,7 @@ var _DocxEditor = class _DocxEditor {
     );
     if (hasLaterLine) return null;
     const lineCount = Math.max(1, Math.round((ly - binding.item.lineTop) / lineHeight));
-    this.host.history?.checkpoint();
+    if (checkpoint) this.host.history?.checkpoint();
     this.caret = {
       t: endText,
       run: binding.item.src.run,
@@ -26661,7 +27165,7 @@ var _DocxEditor = class _DocxEditor {
     const binding = this.host.getHandle()?.bindings.find((b) => b.el === el16 || el16 !== null && b.el === el16.parentElement);
     if (!binding?.item.src?.t) return null;
     const r = binding.el.getBoundingClientRect();
-    if (y < r.top - 4 || y > r.bottom + 4) return null;
+    if (x < r.left - 4 || x > r.right + 4 || y < r.top - 4 || y > r.bottom + 4) return null;
     const local = Math.min(offset, binding.item.text.length);
     return {
       t: binding.item.src.t,
@@ -28187,7 +28691,10 @@ function setParagraphSpacing(doc, targets, patch) {
       sp = { name: `${w}spacing`, attrs: {}, children: [], text: "" };
       pPr.children.push(sp);
     }
-    if (patch.lineMultiple !== void 0) {
+    if (patch.exactLinePt !== void 0) {
+      sp.attrs[attrKey(sp, "line", w)] = String(Math.round(patch.exactLinePt * 20));
+      sp.attrs[attrKey(sp, "lineRule", w)] = "exact";
+    } else if (patch.lineMultiple !== void 0) {
       sp.attrs[attrKey(sp, "line", w)] = String(Math.round(patch.lineMultiple * 240));
       sp.attrs[attrKey(sp, "lineRule", w)] = "auto";
     }
@@ -28758,81 +29265,543 @@ function detectMissingFonts(layout) {
 }
 
 // src/toolbar.tsx
-import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// src/help.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
-var T = {
-  bg: "var(--dxw-toolbar-bg, #f9fbfd)",
-  fg: "var(--dxw-toolbar-fg, #3c4043)",
-  border: "var(--dxw-toolbar-border, #dadce0)",
-  muted: "var(--dxw-toolbar-muted, #5f6368)",
-  accent: "var(--dxw-accent, #1a73e8)",
-  accentFg: "var(--dxw-accent-fg, #fff)",
-  activeBg: "var(--dxw-btn-active-bg, #dfe7f5)",
-  hoverBg: "var(--dxw-btn-hover-bg, #f1f3f4)",
-  tabActiveBg: "var(--dxw-tab-active-bg, #e8f0fe)",
-  popoverBg: "var(--dxw-popover-bg, #fff)",
-  popoverShadow: "var(--dxw-popover-shadow, 0 4px 16px rgba(0,0,0,.15))"
-};
-var FONT_CANDIDATES = [
-  "Arial",
-  "Arial Black",
-  "Arial Narrow",
-  "Avenir",
-  "Avenir Next",
-  "Baskerville",
-  "Bookman Old Style",
-  "Brush Script MT",
-  "Calibri",
-  "Cambria",
-  "Century Gothic",
-  "Chalkboard",
-  "Charter",
-  "Comic Sans MS",
-  "Copperplate",
-  "Courier New",
-  "Didot",
-  "Futura",
-  "Garamond",
-  "Georgia",
-  "Gill Sans",
-  "Helvetica",
-  "Helvetica Neue",
-  "Hoefler Text",
-  "Impact",
-  "Lucida Grande",
-  "Menlo",
-  "Monaco",
-  "Optima",
-  "Palatino",
-  "Rockwell",
-  "Seravek",
-  "Tahoma",
-  "Times New Roman",
-  "Trebuchet MS",
-  "Verdana"
-];
-var availableFonts = null;
-function detectFonts() {
-  if (availableFonts) return availableFonts;
-  try {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const probe = "mmmwwwlliiWQ@";
-    const widthIn = (family) => {
-      ctx.font = `16px ${family.includes(" ") ? `"${family}"` : family}, monospace`;
-      return ctx.measureText(probe).width;
-    };
-    ctx.font = "16px monospace";
-    const base = ctx.measureText(probe).width;
-    const always = /* @__PURE__ */ new Set(["Calibri", "Cambria"]);
-    availableFonts = FONT_CANDIDATES.filter((f) => always.has(f) || Math.abs(widthIn(f) - base) > 0.5);
-  } catch {
-    availableFonts = FONT_CANDIDATES;
-  }
-  return availableFonts;
-}
-var SIZES = [8, 9, 10, 10.5, 11, 12, 14, 16, 18, 20, 24, 28, 36, 48];
+import { jsx, jsxs } from "react/jsx-runtime";
+var GUIDE_GROUPS = [
+  {
+    title: "Start editing",
+    items: [
+      {
+        title: "Type and select text",
+        description: "Click text or available white space to place the caret. Drag across text to select it, then use Home or the right-click menu to format it."
+      },
+      {
+        title: "Right-click text",
+        description: "The text menu includes cut, copy, paste, formatting, links, comments, lists, alignment, and Select all. Selection-dependent actions become available after selecting text."
+      },
+      {
+        title: "Move through the document",
+        description: "Use the arrow keys for character and line movement. Home and End move to visual line edges. Modified arrow keys jump to line edges or adjacent paragraphs."
+      },
+      {
+        title: "Save your work",
+        description: "Use Download to save the edited DOCX. Hosts can also persist drafts from the editor's saved DOCX bytes."
+      }
+    ]
+  },
+  {
+    title: "Demo workspace",
+    items: [
+      {
+        title: "Open or upload a document",
+        description: "Choose a sample from Try a template or use Upload .docx to edit a local Word file in the browser."
+      },
+      {
+        title: "Zoom, review, and author",
+        description: "Change Zoom without changing the DOCX. Switch between Editing and Suggesting, set the author stamped on comments and revisions, and show or hide comment balloons."
+      },
+      {
+        title: "Find and replace",
+        description: "Press Cmd/Ctrl+F in the demo to open Find. Step through matches, replace the current match, or replace every match."
+      },
+      {
+        title: "Save, download, print",
+        description: "Save keeps the demo workspace in this browser, Download writes a DOCX file, and Print opens the browser's print or PDF workflow."
+      }
+    ]
+  },
+  {
+    title: "Home tools",
+    items: [
+      {
+        title: "Undo and redo",
+        description: "Reverse or restore text, formatting, layout, and object edits with the arrow buttons or keyboard shortcuts."
+      },
+      {
+        title: "Styles, font, and size",
+        description: "Apply document paragraph styles, choose an available typeface, and set the selected text size."
+      },
+      {
+        title: "Character formatting",
+        description: "Bold, italicize, underline, strike, superscript, subscript, change case, clear formatting, or change text and highlight colors."
+      },
+      {
+        title: "Paragraph formatting",
+        description: "Align text, adjust indentation, and set line or paragraph spacing. These controls apply to the selected paragraphs or the paragraph containing the caret."
+      },
+      {
+        title: "Lists",
+        description: "Start or remove bulleted and numbered lists. Tab changes the level of the current list item; Shift+Tab promotes it."
+      }
+    ]
+  },
+  {
+    title: "Insert tools",
+    items: [
+      {
+        title: "Pages, breaks, and sections",
+        description: "Insert a cover page, full blank page, page break, column break, or next-page/continuous section break at the caret."
+      },
+      {
+        title: "Tables",
+        description: "Choose a row and column count from the Table grid. Tab moves to the next cell, Shift+Tab moves back, and Tab in the last cell adds a row."
+      },
+      {
+        title: "Images, icons, and screenshots",
+        description: "Insert an image or SVG file, or capture a screen, window, or browser tab. Select the result to resize, position, wrap, layer, replace, or add alternative text."
+      },
+      {
+        title: "3D models",
+        description: "Insert a GLB file. Drag the model itself to rotate it, use the move grip to reposition it, resize from the handles, and use Reset 3D to restore its original view."
+      },
+      {
+        title: "Shapes and lines",
+        description: "Insert a line, rectangle, rounded rectangle, ellipse, arrow, or callout. Select it to move, resize, rotate, change wrapping and layering, or edit fill and outline."
+      },
+      {
+        title: "Text boxes and WordArt",
+        description: "Insert positioned text. Double-click a text box or text-bearing shape to edit its story, then use Home for font and text color. Escape returns to object selection for fill, outline, position, rotation, and wrapping."
+      },
+      {
+        title: "Charts and SmartArt",
+        description: "Insert native editable charts or diagrams. Select an existing chart or SmartArt object before opening its Insert control to update its data or layout."
+      },
+      {
+        title: "Links, comments, and notes",
+        description: "Select text before adding a hyperlink or comment. Footnotes insert at the caret and remain editable in the note area."
+      },
+      {
+        title: "Bookmarks and cross-references",
+        description: "Create a named bookmark at a selection, then insert a live text or page reference to that bookmark elsewhere."
+      },
+      {
+        title: "Headers, footers, and page numbers",
+        description: "Open the repeating header or footer layer, type or insert page fields and objects, then choose Close or press Escape to return to the body."
+      },
+      {
+        title: "Dates, fields, symbols, and drop caps",
+        description: "Insert updating date/time and page fields, Unicode or custom symbols, and dropped or margin capitals at the caret."
+      },
+      {
+        title: "Equations",
+        description: "Choose Insert \u2192 Equation and enter linear math. Use / for fractions, ^ for powers, \u221A for roots, [a&b;c&d] for matrices, and braces to group expressions."
+      },
+      {
+        title: "Media and embedded files",
+        description: "Insert online-video metadata with a browser-safe poster, or embed another file in the DOCX package."
+      }
+    ]
+  },
+  {
+    title: "Draw tools",
+    items: [
+      {
+        title: "Pen and highlighter",
+        description: "Choose Pen or Highlighter, then drag on a page. Set color and width before drawing. Escape or Select returns to normal editing."
+      },
+      {
+        title: "Erase and select ink",
+        description: "Stroke eraser removes a whole touched stroke. Lasso surrounds ink to select it as a group; drag or nudge the selected group to reposition it."
+      }
+    ]
+  },
+  {
+    title: "Layout tools",
+    items: [
+      {
+        title: "Document or section scope",
+        description: "Choose Whole document for a global change or This section when only the caret's current section should change."
+      },
+      {
+        title: "Margins, orientation, and page size",
+        description: "Choose presets or exact custom page dimensions and margins. Orientation swaps the page between portrait and landscape."
+      },
+      {
+        title: "Columns",
+        description: "Choose one, two, two with divider, or three columns. Insert a column break when text should begin in the next column immediately."
+      },
+      {
+        title: "Page borders and line numbers",
+        description: "Apply a repeating page border and enable continuous, per-page, per-section, or interval-based line numbering."
+      },
+      {
+        title: "Arrange selected objects",
+        description: "With a floating object selected, align it to the page, rotate it by 90\xB0, or change its stacking order with Bring to front and Send to back."
+      }
+    ]
+  },
+  {
+    title: "Object controls",
+    items: [
+      {
+        title: "Move, resize, rotate, and delete",
+        description: "Click an object to select it. Drag its body or move grip, drag a square handle to resize, choose Rotate for an exact angle, and press Delete or Backspace to remove it."
+      },
+      {
+        title: "Text wrapping and layering",
+        description: "Inline moves with text. Wrap lets text flow around the object. Top+Bottom clears text from its sides. In front and Behind control its relationship to text."
+      },
+      {
+        title: "Exact object properties",
+        description: "Use Size to set the object's width \xD7 height, Position for exact page coordinates, Fill for a shape's interior color, and Outline for its border or line color and thickness."
+      }
+    ]
+  },
+  {
+    title: "Special-case recipes",
+    items: [
+      {
+        title: "California pleading paper",
+        description: "Create the fixed 1\u201328 pleading grid in the repeating header layer. Place the numbers in a text box as separate paragraphs, set paragraph spacing to 0 pt, and set the exact line height to 24 pt.",
+        steps: [
+          "Open Insert \u2192 Header, then insert a text box in the repeating header layer.",
+          "Enter 1 through 28 as separate paragraphs and select all of those numbered paragraphs.",
+          "Open Home \u2192 Line & paragraph spacing \u2192 Exactly 24 pt, then choose Remove space before and Remove space after.",
+          "Use Insert \u2192 Shape \u2192 Line for each vertical rule, rotate and position it in the same repeating header layer.",
+          "Choose Close to return to body text."
+        ]
+      },
+      {
+        title: "Magazine columns with a middle rule",
+        description: "Use the document's native column divider so the rule tracks layout automatically.",
+        steps: [
+          "Open Layout \u2192 Columns & divider \u2192 Two + divider line.",
+          "Type normally to flow from the first column into the second.",
+          "Use Insert \u2192 Break \u2192 Column break to move to the second column early."
+        ]
+      },
+      {
+        title: "Resume horizontal rule",
+        description: "Use a body line when the rule belongs to one location in the document.",
+        steps: [
+          "Place the caret near the intended rule and choose Insert \u2192 Shape \u2192 Line.",
+          "Drag to position and size it; use Position for exact placement.",
+          "Choose Inline, Wrap, In front, or Behind according to how nearby text should flow."
+        ]
+      },
+      {
+        title: "Repeating page art",
+        description: "Put lines, logos, and other repeating objects in the header or footer layer. A body object belongs to one page location; a header/footer object repeats with that section."
+      },
+      {
+        title: "Border around every page",
+        description: "Choose Layout \u2192 Page border for a true page border. Use header shapes when the design needs custom partial rules or ornaments."
+      }
+    ]
+  }
+];
+var mod = (apple, key) => apple ? `\u2318${key}` : `Ctrl+${key}`;
+var modShift = (apple, key) => apple ? `\u21E7\u2318${key}` : `Ctrl+Shift+${key}`;
+var SHORTCUT_GROUPS = [
+  {
+    title: "History and clipboard",
+    items: [
+      { action: "Undo", keys: (apple) => mod(apple, "Z") },
+      { action: "Redo", keys: (apple) => apple ? "\u21E7\u2318Z" : "Ctrl+Y or Ctrl+Shift+Z" },
+      { action: "Cut", keys: (apple) => mod(apple, "X") },
+      { action: "Copy", keys: (apple) => mod(apple, "C") },
+      { action: "Paste", keys: (apple) => mod(apple, "V") },
+      { action: "Select all in the active story", keys: (apple) => mod(apple, "A") },
+      { action: "Find and replace in the demo", keys: (apple) => mod(apple, "F") }
+    ]
+  },
+  {
+    title: "Text and paragraphs",
+    items: [
+      { action: "Bold", keys: (apple) => mod(apple, "B"), detail: "Requires selected text." },
+      { action: "Italic", keys: (apple) => mod(apple, "I"), detail: "Requires selected text." },
+      { action: "Underline", keys: (apple) => mod(apple, "U"), detail: "Requires selected text." },
+      { action: "Insert or edit link", keys: (apple) => mod(apple, "K"), detail: "Requires selected text." },
+      { action: "New comment", keys: (apple) => apple ? "\u2318\u2325A" : "Ctrl+Alt+M", detail: "Requires selected text." },
+      { action: "Bulleted list", keys: (apple) => modShift(apple, "L") },
+      { action: "Numbered list", keys: (apple) => modShift(apple, "7") },
+      { action: "Align left", keys: (apple) => mod(apple, "L") },
+      { action: "Center", keys: (apple) => mod(apple, "E") },
+      { action: "Align right", keys: (apple) => mod(apple, "R") },
+      { action: "Justify", keys: (apple) => mod(apple, "J") },
+      { action: "Heading 1\u20136", keys: (apple) => apple ? "\u2318\u23251\u20136" : "Ctrl+Alt+1\u20136" },
+      { action: "Normal paragraph", keys: (apple) => apple ? "\u2318\u23250" : "Ctrl+Alt+0" }
+    ]
+  },
+  {
+    title: "Structure and navigation",
+    items: [
+      { action: "Page break", keys: (apple) => mod(apple, "Enter") },
+      { action: "Column break", keys: (apple) => modShift(apple, "Enter") },
+      { action: "Move by character or visual line", keys: () => "Arrow keys" },
+      { action: "Select by character or visual line", keys: () => "Shift+Arrow keys" },
+      { action: "Move to visual line edge", keys: () => "Home / End" },
+      { action: "Select to visual line edge", keys: () => "Shift+Home / Shift+End" },
+      { action: "Move to line edge or adjacent paragraph", keys: (apple) => apple ? "\u2318+Arrow keys" : "Ctrl+Arrow keys" },
+      { action: "Extend to line edge or adjacent paragraph", keys: (apple) => apple ? "\u21E7\u2318+Arrow keys" : "Ctrl+Shift+Arrow keys" },
+      { action: "Next or previous table cell", keys: () => "Tab / Shift+Tab" },
+      { action: "Change list level", keys: () => "Tab / Shift+Tab" }
+    ]
+  },
+  {
+    title: "Objects and editing modes",
+    items: [
+      { action: "Nudge selected floating object or ink", keys: () => "Arrow keys", detail: "Moves one pixel." },
+      { action: "Nudge selected object farther", keys: () => "Shift+Arrow keys", detail: "Moves ten pixels." },
+      { action: "Delete selected object", keys: () => "Delete / Backspace" },
+      { action: "Leave drawing, text-box, header/footer, or object selection", keys: () => "Escape" },
+      { action: "Open this help guide", keys: (apple) => `${mod(apple, "/")} or F1` }
+    ]
+  }
+];
+var panel = {
+  background: "var(--dxw-popover-bg, #fff)",
+  color: "var(--dxw-toolbar-fg, #3c4043)",
+  border: "1px solid var(--dxw-toolbar-border, #dadce0)",
+  borderRadius: 12
+};
+function HelpGuide({ open, onClose, returnFocus }) {
+  const [tab, setTab] = useState("guides");
+  const [query, setQuery] = useState("");
+  const searchRef = useRef(null);
+  const previousFocus = useRef(null);
+  const apple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+  useEffect(() => {
+    if (!open) return;
+    previousFocus.current = document.activeElement;
+    const frame = requestAnimationFrame(() => searchRef.current?.focus());
+    const keydown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", keydown);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener("keydown", keydown);
+      requestAnimationFrame(() => (returnFocus?.current ?? previousFocus.current)?.focus({ preventScroll: true }));
+    };
+  }, [open, onClose, returnFocus]);
+  const needle = query.trim().toLowerCase();
+  const guideGroups = useMemo(() => GUIDE_GROUPS.map((group) => ({
+    ...group,
+    items: group.items.filter(
+      (item) => !needle || `${group.title} ${item.title} ${item.description} ${(item.steps ?? []).join(" ")}`.toLowerCase().includes(needle)
+    )
+  })).filter((group) => group.items.length > 0), [needle]);
+  const shortcutGroups = useMemo(() => SHORTCUT_GROUPS.map((group) => ({
+    ...group,
+    items: group.items.filter(
+      (item) => !needle || `${group.title} ${item.action} ${item.keys(apple)} ${item.detail ?? ""}`.toLowerCase().includes(needle)
+    )
+  })).filter((group) => group.items.length > 0), [apple, needle]);
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-dxw-help-backdrop": "",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget) onClose();
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          display: "grid",
+          placeItems: "center",
+          padding: 18,
+          background: "rgba(32,33,36,.48)",
+          fontFamily: "system-ui, sans-serif"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "dxw-help-title",
+            "data-dxw-help-dialog": "",
+            style: {
+              ...panel,
+              width: "min(980px, calc(100vw - 36px))",
+              maxHeight: "min(820px, calc(100vh - 36px))",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+              boxShadow: "0 18px 60px rgba(0,0,0,.28)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("header", { style: { padding: "18px 20px 14px", borderBottom: "1px solid var(--dxw-toolbar-border, #dadce0)" }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 16 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                    /* @__PURE__ */ jsx("h2", { id: "dxw-help-title", style: { margin: 0, fontSize: 22, color: "var(--dxw-toolbar-fg, #202124)" }, children: "WordInWeb help" }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", color: "var(--dxw-toolbar-muted, #5f6368)", fontSize: 13 }, children: "Tool guides, editing recipes, and keyboard shortcuts." })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close help",
+                      onClick: onClose,
+                      style: { border: 0, background: "transparent", color: "inherit", cursor: "pointer", fontSize: 24, lineHeight: 1, padding: 4 },
+                      children: "\xD7"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: searchRef,
+                    type: "search",
+                    "aria-label": "Search help",
+                    placeholder: "Search tools, lines, columns, shortcuts\u2026",
+                    value: query,
+                    onChange: (event) => setQuery(event.target.value),
+                    style: {
+                      width: "100%",
+                      boxSizing: "border-box",
+                      marginTop: 14,
+                      padding: "10px 12px",
+                      border: "1px solid var(--dxw-toolbar-border, #c7cbd1)",
+                      borderRadius: 8,
+                      background: "var(--dxw-popover-bg, #fff)",
+                      color: "inherit",
+                      font: "14px system-ui, sans-serif",
+                      outlineColor: "var(--dxw-accent, #1a73e8)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": "Help sections", style: { display: "flex", gap: 6, marginTop: 12 }, children: ["guides", "shortcuts"].map((name) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": tab === name,
+                    onClick: () => setTab(name),
+                    style: {
+                      border: 0,
+                      borderRadius: 7,
+                      padding: "7px 12px",
+                      background: tab === name ? "var(--dxw-tab-active-bg, #e8f0fe)" : "transparent",
+                      color: tab === name ? "var(--dxw-accent, #1a73e8)" : "inherit",
+                      font: "600 13px system-ui, sans-serif",
+                      cursor: "pointer",
+                      textTransform: "capitalize"
+                    },
+                    children: name === "guides" ? "Guides" : "Shortcuts"
+                  },
+                  name
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { overflow: "auto", padding: "18px 20px 24px" }, children: [
+                tab === "guides" && guideGroups.map((group) => /* @__PURE__ */ jsxs("section", { style: { marginBottom: 24 }, children: [
+                  /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 10px", fontSize: 15 }, children: group.title }),
+                  /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 260px), 1fr))", gap: 10 }, children: group.items.map((item) => /* @__PURE__ */ jsxs("article", { style: { ...panel, padding: 14, background: "var(--dxw-help-card-bg, #f8fafd)" }, children: [
+                    /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 6px", fontSize: 14 }, children: item.title }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "var(--dxw-toolbar-muted, #5f6368)", fontSize: 12.5, lineHeight: 1.45 }, children: item.description }),
+                    item.steps && /* @__PURE__ */ jsx("ol", { style: { margin: "9px 0 0", paddingLeft: 19, color: "var(--dxw-toolbar-muted, #5f6368)", fontSize: 12.5, lineHeight: 1.5 }, children: item.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) })
+                  ] }, item.title)) })
+                ] }, group.title)),
+                tab === "shortcuts" && shortcutGroups.map((group) => /* @__PURE__ */ jsxs("section", { style: { marginBottom: 24 }, children: [
+                  /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 15 }, children: group.title }),
+                  /* @__PURE__ */ jsx("div", { style: { ...panel, overflow: "hidden" }, children: group.items.map((item, index) => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "minmax(180px, 1fr) minmax(150px, auto)", gap: 16, alignItems: "center", padding: "10px 12px", borderTop: index ? "1px solid var(--dxw-toolbar-border, #e6e8eb)" : 0 }, children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: 13 }, children: item.action }),
+                      item.detail && /* @__PURE__ */ jsx("div", { style: { color: "var(--dxw-toolbar-muted, #5f6368)", fontSize: 11.5, marginTop: 2 }, children: item.detail })
+                    ] }),
+                    /* @__PURE__ */ jsx("kbd", { style: { justifySelf: "end", padding: "4px 7px", border: "1px solid var(--dxw-toolbar-border, #c7cbd1)", borderBottomWidth: 2, borderRadius: 5, background: "var(--dxw-help-key-bg, #fff)", font: "12px ui-monospace, SFMono-Regular, Menlo, monospace", whiteSpace: "nowrap" }, children: item.keys(apple) })
+                  ] }, item.action)) })
+                ] }, group.title)),
+                (tab === "guides" ? guideGroups.length : shortcutGroups.length) === 0 && /* @__PURE__ */ jsxs("p", { role: "status", style: { color: "var(--dxw-toolbar-muted, #5f6368)", textAlign: "center", padding: 36 }, children: [
+                  "No help topics match \u201C",
+                  query,
+                  "\u201D."
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/toolbar.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var T = {
+  bg: "var(--dxw-toolbar-bg, #f9fbfd)",
+  fg: "var(--dxw-toolbar-fg, #3c4043)",
+  border: "var(--dxw-toolbar-border, #dadce0)",
+  muted: "var(--dxw-toolbar-muted, #5f6368)",
+  accent: "var(--dxw-accent, #1a73e8)",
+  accentFg: "var(--dxw-accent-fg, #fff)",
+  activeBg: "var(--dxw-btn-active-bg, #dfe7f5)",
+  hoverBg: "var(--dxw-btn-hover-bg, #f1f3f4)",
+  tabActiveBg: "var(--dxw-tab-active-bg, #e8f0fe)",
+  popoverBg: "var(--dxw-popover-bg, #fff)",
+  popoverShadow: "var(--dxw-popover-shadow, 0 4px 16px rgba(0,0,0,.15))"
+};
+var FONT_CANDIDATES = [
+  "Arial",
+  "Arial Black",
+  "Arial Narrow",
+  "Avenir",
+  "Avenir Next",
+  "Baskerville",
+  "Bookman Old Style",
+  "Brush Script MT",
+  "Calibri",
+  "Cambria",
+  "Century Gothic",
+  "Chalkboard",
+  "Charter",
+  "Comic Sans MS",
+  "Copperplate",
+  "Courier New",
+  "Didot",
+  "Futura",
+  "Garamond",
+  "Georgia",
+  "Gill Sans",
+  "Helvetica",
+  "Helvetica Neue",
+  "Hoefler Text",
+  "Impact",
+  "Lucida Grande",
+  "Menlo",
+  "Monaco",
+  "Optima",
+  "Palatino",
+  "Rockwell",
+  "Seravek",
+  "Tahoma",
+  "Times New Roman",
+  "Trebuchet MS",
+  "Verdana"
+];
+var availableFonts = null;
+function detectFonts() {
+  if (availableFonts) return availableFonts;
+  try {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    const probe = "mmmwwwlliiWQ@";
+    const widthIn = (family) => {
+      ctx.font = `16px ${family.includes(" ") ? `"${family}"` : family}, monospace`;
+      return ctx.measureText(probe).width;
+    };
+    ctx.font = "16px monospace";
+    const base = ctx.measureText(probe).width;
+    const always = /* @__PURE__ */ new Set(["Calibri", "Cambria"]);
+    availableFonts = FONT_CANDIDATES.filter((f) => always.has(f) || Math.abs(widthIn(f) - base) > 0.5);
+  } catch {
+    availableFonts = FONT_CANDIDATES;
+  }
+  return availableFonts;
+}
+var SIZES = [8, 9, 10, 10.5, 11, 12, 14, 16, 18, 20, 24, 28, 36, 48];
 var HIGHLIGHTS = [
   { name: "yellow", css: "#ffff00" },
   { name: "green", css: "#00ff00" },
@@ -28867,10 +29836,11 @@ var PAGE_SIZES = [
   { value: "a6", label: "A6", description: '4.13" \xD7 5.83"', width: 4.13, height: 5.83 },
   { value: "envelope10", label: "Envelope #10", description: '4.13" \xD7 9.5"', width: 4.13, height: 9.5 }
 ];
-function Btn({ label, title, active, onClick }) {
-  return /* @__PURE__ */ jsx(
+function Btn({ label, title, active, onClick, buttonRef }) {
+  return /* @__PURE__ */ jsx2(
     "button",
     {
+      ref: buttonRef,
       title,
       style: btnStyle(!!active),
       onMouseDown: (e) => e.preventDefault(),
@@ -28882,19 +29852,19 @@ function Btn({ label, title, active, onClick }) {
   );
 }
 function Sep() {
-  return /* @__PURE__ */ jsx("span", { style: { width: 1, height: 18, background: T.border, margin: "0 4px", flexShrink: 0 } });
+  return /* @__PURE__ */ jsx2("span", { style: { width: 1, height: 18, background: T.border, margin: "0 4px", flexShrink: 0 } });
 }
 function OverflowIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "currentColor", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "3", r: "1.4" }),
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1.4" }),
-    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "13", r: "1.4" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "3", r: "1.4" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "1.4" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "13", r: "1.4" })
   ] });
 }
 function OverflowMenu({ children: children2 }) {
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (e) => {
       if (!rootRef.current?.contains(e.target)) setOpen(false);
@@ -28902,8 +29872,8 @@ function OverflowMenu({ children: children2 }) {
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, [open]);
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-flex", marginLeft: "auto" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-flex", marginLeft: "auto" }, children: [
+    /* @__PURE__ */ jsx2(
       "button",
       {
         title: "More tools",
@@ -28911,10 +29881,10 @@ function OverflowMenu({ children: children2 }) {
         style: btnStyle(open),
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx(OverflowIcon, {})
+        children: /* @__PURE__ */ jsx2(OverflowIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx2(
       "div",
       {
         "data-dxw-overflow-menu": "",
@@ -28942,16 +29912,16 @@ function OverflowMenu({ children: children2 }) {
 }
 var icon = { width: 16, height: 16, display: "block" };
 function ImageIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2.5", width: "13", height: "11", rx: "1" }),
-    /* @__PURE__ */ jsx("circle", { cx: "5.2", cy: "6", r: "1.2", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M2.5 12l3.5-4 2.8 3 2-2.4 2.7 3.4" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("rect", { x: "1.5", y: "2.5", width: "13", height: "11", rx: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "5.2", cy: "6", r: "1.2", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2.5 12l3.5-4 2.8 3 2-2.4 2.7 3.4" })
   ] });
 }
 function HighlightIcon({ color }) {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 9.5L9.5 3l3.5 3.5L6.5 13H4.5L3 11.5v-2z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("rect", { x: "2", y: "13.5", width: "12", height: "2.5", rx: "0.5", fill: color })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 9.5L9.5 3l3.5 3.5L6.5 13H4.5L3 11.5v-2z", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "13.5", width: "12", height: "2.5", rx: "0.5", fill: color })
   ] });
 }
 function ToolbarMenuSelect({
@@ -28967,12 +29937,12 @@ function ToolbarMenuSelect({
   className,
   style
 }) {
-  const [open, setOpen] = useState(false);
-  const [position, setPosition] = useState({ left: 8, top: 8, width: menuWidth ?? 180, maxHeight: 320 });
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const keyboardOpen = useRef(null);
+  const [open, setOpen] = useState2(false);
+  const [position, setPosition] = useState2({ left: 8, top: 8, width: menuWidth ?? 180, maxHeight: 320 });
+  const rootRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const menuRef = useRef2(null);
+  const keyboardOpen = useRef2(null);
   const id = useId();
   const selected = options.find((option) => option.value === value);
   useLayoutEffect(() => {
@@ -29055,7 +30025,7 @@ function ToolbarMenuSelect({
     items[next]?.focus({ preventScroll: true });
   };
   let previousGroup;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "span",
     {
       ref: rootRef,
@@ -29063,7 +30033,7 @@ function ToolbarMenuSelect({
       "data-dxw-menu-select": "",
       style: { position: "relative", display: "inline-flex", width },
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "select",
           {
             tabIndex: -1,
@@ -29082,12 +30052,12 @@ function ToolbarMenuSelect({
               pointerEvents: "none"
             },
             children: [
-              !options.some((option) => option.value === value) && /* @__PURE__ */ jsx("option", { value: "", children: String(placeholder) }),
-              options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: String(option.label) }, option.value))
+              !options.some((option) => option.value === value) && /* @__PURE__ */ jsx2("option", { value: "", children: String(placeholder) }),
+              options.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, disabled: option.disabled, children: String(option.label) }, option.value))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "button",
           {
             ref: triggerRef,
@@ -29126,12 +30096,12 @@ function ToolbarMenuSelect({
               ...style
             },
             children: [
-              /* @__PURE__ */ jsx("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: selected?.fontFamily }, children: selected?.label ?? placeholder }),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dxw-menu-select-chevron", style: { flexShrink: 0, fontSize: 10 }, children: "\u2304" })
+              /* @__PURE__ */ jsx2("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: selected?.fontFamily }, children: selected?.label ?? placeholder }),
+              /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "dxw-menu-select-chevron", style: { flexShrink: 0, fontSize: 10 }, children: "\u2304" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx(
+        open && /* @__PURE__ */ jsx2(
           "div",
           {
             ref: menuRef,
@@ -29162,9 +30132,9 @@ function ToolbarMenuSelect({
               const groupChanged = option.group !== previousGroup;
               previousGroup = option.group;
               const active = option.value === value;
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                groupChanged && option.group && /* @__PURE__ */ jsx("div", { className: "dxw-menu-select-group", style: { padding: "6px 8px 3px", color: T.muted, font: "600 10.5px system-ui, sans-serif" }, children: option.group }),
-                /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsxs2(Fragment, { children: [
+                groupChanged && option.group && /* @__PURE__ */ jsx2("div", { className: "dxw-menu-select-group", style: { padding: "6px 8px 3px", color: T.muted, font: "600 10.5px system-ui, sans-serif" }, children: option.group }),
+                /* @__PURE__ */ jsxs2(
                   "button",
                   {
                     type: "button",
@@ -29199,8 +30169,8 @@ function ToolbarMenuSelect({
                       if (!active) event.currentTarget.style.background = "transparent";
                     },
                     children: [
-                      /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: option.label }),
-                      active && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: T.accent, fontWeight: 700 }, children: "\u2713" })
+                      /* @__PURE__ */ jsx2("span", { style: { flex: 1 }, children: option.label }),
+                      active && /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { color: T.accent, fontWeight: 700 }, children: "\u2713" })
                     ]
                   }
                 )
@@ -29219,7 +30189,7 @@ function ActionMenu({
   onPick,
   width
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     ToolbarMenuSelect,
     {
       title,
@@ -29238,9 +30208,9 @@ function ActionMenu({
   );
 }
 function HighlightMenu({ current, onPick }) {
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (e) => {
       if (!rootRef.current?.contains(e.target)) setOpen(false);
@@ -29248,18 +30218,18 @@ function HighlightMenu({ current, onPick }) {
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, [open]);
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2(
       "button",
       {
         title: "Highlight color",
         style: btnStyle(open),
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx(HighlightIcon, { color: current ?? "#ffff00" })
+        children: /* @__PURE__ */ jsx2(HighlightIcon, { color: current ?? "#ffff00" })
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         onMouseDown: (e) => e.preventDefault(),
@@ -29278,7 +30248,7 @@ function HighlightMenu({ current, onPick }) {
           alignItems: "center"
         },
         children: [
-          HIGHLIGHTS.map((h) => /* @__PURE__ */ jsx(
+          HIGHLIGHTS.map((h) => /* @__PURE__ */ jsx2(
             "div",
             {
               title: h.name,
@@ -29290,7 +30260,7 @@ function HighlightMenu({ current, onPick }) {
             },
             h.name
           )),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "div",
             {
               title: "No highlight",
@@ -29359,12 +30329,12 @@ function ColorMenu({
   trigger,
   onPick
 }) {
-  const [open, setOpen] = useState(false);
-  const [custom, setCustom] = useState(current);
-  const [position, setPosition] = useState({ left: 8, top: 8 });
-  const rootRef = useRef(null);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
+  const [open, setOpen] = useState2(false);
+  const [custom, setCustom] = useState2(current);
+  const [position, setPosition] = useState2({ left: 8, top: 8 });
+  const rootRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const menuRef = useRef2(null);
   const valid = normalizedColor(custom);
   useLayoutEffect(() => {
     if (!open) return;
@@ -29404,8 +30374,8 @@ function ColorMenu({
     onPick(value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: "dxw-color-control", style: { position: "relative", display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, className: "dxw-color-control", style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx2(
       "button",
       {
         ref: triggerRef,
@@ -29421,7 +30391,7 @@ function ColorMenu({
         children: trigger
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         ref: menuRef,
@@ -29444,7 +30414,7 @@ function ColorMenu({
           boxShadow: T.popoverShadow
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "dxw-color-swatches", style: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 4 }, children: COLOR_SWATCHES.map((color) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("div", { className: "dxw-color-swatches", style: { display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 4 }, children: COLOR_SWATCHES.map((color) => /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -29466,9 +30436,9 @@ function ColorMenu({
             },
             color
           )) }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 8 }, children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 24, height: 24, borderRadius: 4, border: `1px solid ${T.border}`, background: valid ?? current, flexShrink: 0 } }),
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 8 }, children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { width: 24, height: 24, borderRadius: 4, border: `1px solid ${T.border}`, background: valid ?? current, flexShrink: 0 } }),
+            /* @__PURE__ */ jsx2(
               "input",
               {
                 "aria-label": "Custom hex color",
@@ -29483,7 +30453,7 @@ function ColorMenu({
                 style: { minWidth: 0, flex: 1, height: 28, boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 5, padding: "3px 6px", color: T.fg, background: T.popoverBg }
               }
             ),
-            /* @__PURE__ */ jsx("button", { type: "button", disabled: !valid, onClick: () => valid && pick(valid), style: pillBtn, children: "Apply" })
+            /* @__PURE__ */ jsx2("button", { type: "button", disabled: !valid, onClick: () => valid && pick(valid), style: pillBtn, children: "Apply" })
           ] })
         ]
       }
@@ -29491,46 +30461,46 @@ function ColorMenu({
   ] });
 }
 function BulletListIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "8", r: "1.1", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "12", r: "1.1", fill: "currentColor", stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M6.5 4h8M6.5 8h8M6.5 12h8", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "8", r: "1.1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "3", cy: "12", r: "1.1", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("path", { d: "M6.5 4h8M6.5 8h8M6.5 12h8", strokeLinecap: "round" })
   ] });
 }
 function NumberListIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("text", { x: "1", y: "5.6", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "1" }),
-    /* @__PURE__ */ jsx("text", { x: "1", y: "9.9", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "2" }),
-    /* @__PURE__ */ jsx("text", { x: "1", y: "14.2", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "3" }),
-    /* @__PURE__ */ jsx("path", { d: "M6.5 4h8M6.5 8h8M6.5 12h8", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("text", { x: "1", y: "5.6", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "1" }),
+    /* @__PURE__ */ jsx2("text", { x: "1", y: "9.9", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "2" }),
+    /* @__PURE__ */ jsx2("text", { x: "1", y: "14.2", fontSize: "5.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M6.5 4h8M6.5 8h8M6.5 12h8", strokeLinecap: "round" })
   ] });
 }
 function LinkIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("path", { d: "M6.5 9.5l3-3", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx("path", { d: "M7.5 4.5l1.2-1.2a2.6 2.6 0 013.7 3.7L11.2 8.2", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx("path", { d: "M8.5 11.5l-1.2 1.2a2.6 2.6 0 01-3.7-3.7l1.2-1.2", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M6.5 9.5l3-3", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx2("path", { d: "M7.5 4.5l1.2-1.2a2.6 2.6 0 013.7 3.7L11.2 8.2", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8.5 11.5l-1.2 1.2a2.6 2.6 0 01-3.7-3.7l1.2-1.2", strokeLinecap: "round" })
   ] });
 }
 function ClearFormatIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 3h8M9 3l-2.5 9", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 13.5l3.5-3.5M3 10l3.5 3.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M5 3h8M9 3l-2.5 9", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 13.5l3.5-3.5M3 10l3.5 3.5", strokeLinecap: "round" })
   ] });
 }
 function IndentIcon({ dir }) {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("path", { d: "M2 3h12M8 6.5h6M8 9.5h6M2 13h12", strokeLinecap: "round" }),
-    dir === 1 ? /* @__PURE__ */ jsx("path", { d: "M2.5 6l3 2-3 2z", fill: "currentColor", stroke: "none" }) : /* @__PURE__ */ jsx("path", { d: "M5.5 6l-3 2 3 2z", fill: "currentColor", stroke: "none" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2 3h12M8 6.5h6M8 9.5h6M2 13h12", strokeLinecap: "round" }),
+    dir === 1 ? /* @__PURE__ */ jsx2("path", { d: "M2.5 6l3 2-3 2z", fill: "currentColor", stroke: "none" }) : /* @__PURE__ */ jsx2("path", { d: "M5.5 6l-3 2 3 2z", fill: "currentColor", stroke: "none" })
   ] });
 }
 function LinkMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [url, setUrl] = useState("");
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [url, setUrl] = useState2("");
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     setUrl(api?.getLinkAt() ?? "");
     inputRef.current?.focus();
@@ -29545,9 +30515,9 @@ function LinkMenu({ api }) {
     if (v) api?.setLink(/^[a-z][a-z0-9+.-]*:/i.test(v) ? v : `https://${v}`);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert link", style: btnStyle(open), onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx(LinkIcon, {}) }),
-    open && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert link", style: btnStyle(open), onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx2(LinkIcon, {}) }),
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -29566,7 +30536,7 @@ function LinkMenu({ api }) {
           alignItems: "center"
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "input",
             {
               ref: inputRef,
@@ -29577,8 +30547,8 @@ function LinkMenu({ api }) {
               style: { flex: 1, border: `1px solid ${T.border}`, borderRadius: 6, padding: "5px 8px", font: "13px system-ui, sans-serif", outline: "none" }
             }
           ),
-          /* @__PURE__ */ jsx("button", { style: pillBtn, disabled: !url.trim(), onClick: submit, children: "Apply" }),
-          api?.getLinkAt() && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("button", { style: pillBtn, disabled: !url.trim(), onClick: submit, children: "Apply" }),
+          api?.getLinkAt() && /* @__PURE__ */ jsx2(
             "button",
             {
               title: "Remove link",
@@ -29596,25 +30566,25 @@ function LinkMenu({ api }) {
   ] });
 }
 function FootnoteIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("path", { d: "M2.5 13V3.5M2.5 3.5h7", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx("text", { x: "10.2", y: "6.6", fontSize: "6.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "1" }),
-    /* @__PURE__ */ jsx("path", { d: "M2.5 13h11", strokeLinecap: "round", strokeDasharray: "1.5 1.6" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M2.5 13V3.5M2.5 3.5h7", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx2("text", { x: "10.2", y: "6.6", fontSize: "6.4", fill: "currentColor", stroke: "none", fontFamily: "system-ui", children: "1" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2.5 13h11", strokeLinecap: "round", strokeDasharray: "1.5 1.6" })
   ] });
 }
 function CommentIcon() {
-  return /* @__PURE__ */ jsxs("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
-    /* @__PURE__ */ jsx("path", { d: "M1.5 3.5h13v8h-7l-3 3v-3h-3z", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx("path", { d: "M8 5.5v4M6 7.5h4", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs2("svg", { style: icon, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", children: [
+    /* @__PURE__ */ jsx2("path", { d: "M1.5 3.5h13v8h-7l-3 3v-3h-3z", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 5.5v4M6 7.5h4", strokeLinecap: "round" })
   ] });
 }
 function FootnoteMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("");
-  const [hint, setHint] = useState("");
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [text, setText] = useState2("");
+  const [hint, setHint] = useState2("");
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     inputRef.current?.focus();
     const close = (e) => {
@@ -29632,9 +30602,9 @@ function FootnoteMenu({ api }) {
       setHint("Click into the text first so the reference has a place to go.");
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert footnote (at the caret)", style: btnStyle(open), onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx(FootnoteIcon, {}) }),
-    open && /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert footnote (at the caret)", style: btnStyle(open), onMouseDown: (e) => e.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx2(FootnoteIcon, {}) }),
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -29650,7 +30620,7 @@ function FootnoteMenu({ api }) {
           width: 240
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "textarea",
             {
               ref: inputRef,
@@ -29676,10 +30646,10 @@ function FootnoteMenu({ api }) {
               }
             }
           ),
-          hint && /* @__PURE__ */ jsx("div", { style: { color: "#c5221f", fontSize: 12, marginTop: 4 }, children: hint }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 6 }, children: [
-            /* @__PURE__ */ jsx("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
-            /* @__PURE__ */ jsx("button", { style: pillBtn, disabled: !text.trim(), onClick: submit, children: "Insert" })
+          hint && /* @__PURE__ */ jsx2("div", { style: { color: "#c5221f", fontSize: 12, marginTop: 4 }, children: hint }),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 6 }, children: [
+            /* @__PURE__ */ jsx2("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx2("button", { style: pillBtn, disabled: !text.trim(), onClick: submit, children: "Insert" })
           ] })
         ]
       }
@@ -29687,11 +30657,11 @@ function FootnoteMenu({ api }) {
   ] });
 }
 function CommentMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("");
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [text, setText] = useState2("");
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     inputRef.current?.focus();
     const close = (e) => {
@@ -29706,18 +30676,18 @@ function CommentMenu({ api }) {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2(
       "button",
       {
         title: "Add comment (select text first)",
         style: btnStyle(open),
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx(CommentIcon, {})
+        children: /* @__PURE__ */ jsx2(CommentIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -29733,7 +30703,7 @@ function CommentMenu({ api }) {
           width: 240
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "textarea",
             {
               ref: inputRef,
@@ -29759,9 +30729,9 @@ function CommentMenu({ api }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 6 }, children: [
-            /* @__PURE__ */ jsx("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
-            /* @__PURE__ */ jsx("button", { style: pillBtn, disabled: !text.trim(), onClick: submit, children: "Comment" })
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 6 }, children: [
+            /* @__PURE__ */ jsx2("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
+            /* @__PURE__ */ jsx2("button", { style: pillBtn, disabled: !text.trim(), onClick: submit, children: "Comment" })
           ] })
         ]
       }
@@ -29778,12 +30748,12 @@ var pillBtn = {
   color: T.accentFg
 };
 function BookmarkMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState("");
-  const [error, setError] = useState("");
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [name, setName] = useState2("");
+  const [error, setError] = useState2("");
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     inputRef.current?.focus();
     const close = (event) => {
@@ -29806,11 +30776,11 @@ function BookmarkMenu({ api }) {
     setError("");
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert bookmark", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Bookmark" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, left: 0, zIndex: 100, width: 280, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx("div", { style: { font: "600 12px system-ui, sans-serif", marginBottom: 6, color: T.fg }, children: "Bookmark name" }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert bookmark", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Bookmark" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, left: 0, zIndex: 100, width: 280, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { font: "600 12px system-ui, sans-serif", marginBottom: 6, color: T.fg }, children: "Bookmark name" }),
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: inputRef,
@@ -29824,21 +30794,21 @@ function BookmarkMenu({ api }) {
           style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "5px 8px", font: "13px system-ui, sans-serif", outline: "none" }
         }
       ),
-      error && /* @__PURE__ */ jsx("div", { style: { color: "#c5221f", fontSize: 11.5, marginTop: 5 }, children: error }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 8 }, children: [
-        /* @__PURE__ */ jsx("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
-        /* @__PURE__ */ jsx("button", { style: pillBtn, disabled: !name.trim(), onClick: submit, children: "Add" })
+      error && /* @__PURE__ */ jsx2("div", { style: { color: "#c5221f", fontSize: 11.5, marginTop: 5 }, children: error }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx2("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => setOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx2("button", { style: pillBtn, disabled: !name.trim(), onClick: submit, children: "Add" })
       ] })
     ] })
   ] });
 }
 function CrossReferenceMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [bookmark, setBookmark] = useState("");
-  const rootRef = useRef(null);
+  const [open, setOpen] = useState2(false);
+  const [bookmark, setBookmark] = useState2("");
+  const rootRef = useRef2(null);
   const bookmarks = open ? api?.listBookmarks() ?? [] : [];
   const selected = bookmarks.includes(bookmark) ? bookmark : bookmarks[0] ?? "";
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -29849,10 +30819,10 @@ function CrossReferenceMenu({ api }) {
   const insert = (kind) => {
     if (selected && api?.insertCrossReference(selected, kind)) setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert cross-reference", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Cross-reference" }),
-    open && /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 28, left: 0, zIndex: 100, width: 260, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: bookmarks.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: T.muted, fontSize: 12 }, children: "Add a bookmark first, then reference its text or page." }) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert cross-reference", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Cross-reference" }),
+    open && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", top: 28, left: 0, zIndex: 100, width: 260, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: bookmarks.length === 0 ? /* @__PURE__ */ jsx2("div", { style: { color: T.muted, fontSize: 12 }, children: "Add a bookmark first, then reference its text or page." }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(
         ToolbarMenuSelect,
         {
           value: selected,
@@ -29864,20 +30834,20 @@ function CrossReferenceMenu({ api }) {
           style: { borderColor: T.border }
         }
       ),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 8 }, children: [
-        /* @__PURE__ */ jsx("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => insert("page"), children: "Page number" }),
-        /* @__PURE__ */ jsx("button", { style: pillBtn, onClick: () => insert("text"), children: "Bookmark text" })
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx2("button", { style: { ...pillBtn, background: T.popoverBg, color: T.fg }, onClick: () => insert("page"), children: "Page number" }),
+        /* @__PURE__ */ jsx2("button", { style: pillBtn, onClick: () => insert("text"), children: "Bookmark text" })
       ] })
     ] }) })
   ] });
 }
 function EquationMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [linear, setLinear] = useState("x={-b\xB1\u221A{b^2-4ac}}/{2a}");
-  const [error, setError] = useState("");
-  const rootRef = useRef(null);
-  const inputRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [linear, setLinear] = useState2("x={-b\xB1\u221A{b^2-4ac}}/{2a}");
+  const [error, setError] = useState2("");
+  const rootRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     inputRef.current?.focus();
     const close = (event) => {
@@ -29894,14 +30864,14 @@ function EquationMenu({ api }) {
       setError("Place the caret in editable text and enter a valid equation.");
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsxs("button", { title: "Insert equation", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: [
-      /* @__PURE__ */ jsx("span", { style: { fontFamily: "'Cambria Math', serif", fontSize: 18 }, children: "\u03C0" }),
-      /* @__PURE__ */ jsx("span", { style: { marginLeft: 5 }, children: "Equation" })
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsxs2("button", { title: "Insert equation", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontFamily: "'Cambria Math', serif", fontSize: 18 }, children: "\u03C0" }),
+      /* @__PURE__ */ jsx2("span", { style: { marginLeft: 5 }, children: "Equation" })
     ] }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 340, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx("div", { style: { font: "600 12px system-ui, sans-serif", marginBottom: 5, color: T.fg }, children: "Linear equation" }),
-      /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 340, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { font: "600 12px system-ui, sans-serif", marginBottom: 5, color: T.fg }, children: "Linear equation" }),
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: inputRef,
@@ -29915,18 +30885,18 @@ function EquationMenu({ api }) {
           style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "15px 'Cambria Math', serif", outline: "none" }
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { color: T.muted, fontSize: 11.5, marginTop: 5 }, children: "Use ^, _, /, \u221A{\u2026}, \u222B, matrices [a&b;c&d], and grouped {\u2026} expressions." }),
-      error && /* @__PURE__ */ jsx("div", { style: { color: "#c5221f", fontSize: 11.5, marginTop: 5 }, children: error }),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ jsx("button", { style: pillBtn, disabled: !linear.trim(), onClick: submit, children: "Insert" }) })
+      /* @__PURE__ */ jsx2("div", { style: { color: T.muted, fontSize: 11.5, marginTop: 5 }, children: "Use ^, _, /, \u221A{\u2026}, \u222B, matrices [a&b;c&d], and grouped {\u2026} expressions." }),
+      error && /* @__PURE__ */ jsx2("div", { style: { color: "#c5221f", fontSize: 11.5, marginTop: 5 }, children: error }),
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ jsx2("button", { style: pillBtn, disabled: !linear.trim(), onClick: submit, children: "Insert" }) })
     ] })
   ] });
 }
 var SYMBOLS = ["\u03A9", "\xB1", "\xD7", "\xF7", "\u2264", "\u2265", "\u2260", "\u2248", "\u221E", "\u2211", "\u221A", "\u222B", "\u2192", "\u2194", "\xA9", "\xAE", "\u2122", "\u20AC", "\xA3", "\xA5", "\u2713", "\u2022", "\xA7", "\xB6"];
 function SymbolMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [custom, setCustom] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [custom, setCustom] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -29942,19 +30912,19 @@ function SymbolMenu({ api }) {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert advanced symbol", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsxs("span", { style: { fontFamily: "serif", fontSize: 14 }, children: [
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert advanced symbol", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsxs2("span", { style: { fontFamily: "serif", fontSize: 14 }, children: [
       "\u03A9 ",
-      /* @__PURE__ */ jsx("span", { style: { fontFamily: "system-ui, sans-serif", fontSize: 12 }, children: "Advanced Symbol" })
+      /* @__PURE__ */ jsx2("span", { style: { fontFamily: "system-ui, sans-serif", fontSize: 12 }, children: "Advanced Symbol" })
     ] }) }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "fixed", top: anchor?.bottom ?? 28, left: popoverLeft, zIndex: 100, width: 264, padding: 8, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(6, 32px)", gap: 5 }, children: SYMBOLS.map((symbol) => /* @__PURE__ */ jsx("button", { title: `Insert ${symbol}`, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "fixed", top: anchor?.bottom ?? 28, left: popoverLeft, zIndex: 100, width: 264, padding: 8, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: "repeat(6, 32px)", gap: 5 }, children: SYMBOLS.map((symbol) => /* @__PURE__ */ jsx2("button", { title: `Insert ${symbol}`, onMouseDown: (event) => event.preventDefault(), onClick: () => {
         if (api?.insertSymbol(symbol)) setOpen(false);
       }, style: { width: 32, height: 30, border: `1px solid ${T.border}`, borderRadius: 5, background: T.popoverBg, color: T.fg, cursor: "pointer", font: "17px 'Cambria Math', serif" }, children: symbol }, symbol)) }),
-      /* @__PURE__ */ jsxs("div", { style: { borderTop: `1px solid ${T.border}`, marginTop: 8, paddingTop: 8 }, children: [
-        /* @__PURE__ */ jsx("label", { style: { display: "block", color: T.muted, font: "11.5px system-ui, sans-serif", marginBottom: 4 }, htmlFor: "dxw-advanced-symbol", children: "Any Unicode symbol" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6 }, children: [
-          /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs2("div", { style: { borderTop: `1px solid ${T.border}`, marginTop: 8, paddingTop: 8 }, children: [
+        /* @__PURE__ */ jsx2("label", { style: { display: "block", color: T.muted, font: "11.5px system-ui, sans-serif", marginBottom: 4 }, htmlFor: "dxw-advanced-symbol", children: "Any Unicode symbol" }),
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ jsx2(
             "input",
             {
               id: "dxw-advanced-symbol",
@@ -29966,7 +30936,7 @@ function SymbolMenu({ api }) {
               style: { minWidth: 0, flex: 1, border: `1px solid ${T.border}`, borderRadius: 5, padding: "5px 7px", background: T.popoverBg, color: T.fg, font: "15px 'Cambria Math', serif" }
             }
           ),
-          /* @__PURE__ */ jsx("button", { type: "button", disabled: !custom, onClick: insertCustom, style: pillBtn, children: "Insert" })
+          /* @__PURE__ */ jsx2("button", { type: "button", disabled: !custom, onClick: insertCustom, style: pillBtn, children: "Insert" })
         ] })
       ] })
     ] })
@@ -29981,10 +30951,10 @@ var SHAPES = [
   ["textBox", "Text box", "T"]
 ];
 function ShapeMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [text, setText] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -29998,10 +30968,10 @@ function ShapeMenu({ api }) {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert shape", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 17 }, children: "\u25C7" }) }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 250, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert shape", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx2("span", { style: { fontSize: 17 }, children: "\u25C7" }) }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 250, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           "aria-label": "Shape text",
@@ -30011,18 +30981,18 @@ function ShapeMenu({ api }) {
           style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "5px 8px", font: "13px system-ui, sans-serif", outline: "none" }
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginTop: 8 }, children: SHAPES.map(([preset, label, glyph]) => /* @__PURE__ */ jsxs("button", { title: `Insert ${label}`, onClick: () => insert(preset), style: { minHeight: 48, border: `1px solid ${T.border}`, borderRadius: 6, background: T.popoverBg, color: T.fg, cursor: "pointer", font: "12px system-ui, sans-serif" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: 20, lineHeight: 1 }, children: glyph }),
-        /* @__PURE__ */ jsx("span", { children: label })
+      /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginTop: 8 }, children: SHAPES.map(([preset, label, glyph]) => /* @__PURE__ */ jsxs2("button", { title: `Insert ${label}`, onClick: () => insert(preset), style: { minHeight: 48, border: `1px solid ${T.border}`, borderRadius: 6, background: T.popoverBg, color: T.fg, cursor: "pointer", font: "12px system-ui, sans-serif" }, children: [
+        /* @__PURE__ */ jsx2("span", { style: { display: "block", fontSize: 20, lineHeight: 1 }, children: glyph }),
+        /* @__PURE__ */ jsx2("span", { children: label })
       ] }, preset)) })
     ] })
   ] });
 }
 function TextBoxMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [text, setText] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30036,11 +31006,11 @@ function TextBoxMenu({ api }) {
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert text box", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Text Box" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 240, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "dxw-text-box-text", style: { display: "block", color: T.muted, font: "11.5px system-ui, sans-serif", marginBottom: 4 }, children: "Initial text" }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert text box", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Text Box" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 240, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2("label", { htmlFor: "dxw-text-box-text", style: { display: "block", color: T.muted, font: "11.5px system-ui, sans-serif", marginBottom: 4 }, children: "Initial text" }),
+      /* @__PURE__ */ jsx2(
         "input",
         {
           id: "dxw-text-box-text",
@@ -30052,7 +31022,7 @@ function TextBoxMenu({ api }) {
           style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "5px 8px", font: "13px system-ui, sans-serif", outline: "none" }
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: insert, style: pillBtn, children: "Insert" }) })
+      /* @__PURE__ */ jsx2("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: insert, style: pillBtn, children: "Insert" }) })
     ] })
   ] });
 }
@@ -30064,10 +31034,10 @@ var WORD_ART = [
   ["chevron", "Chevron", "\u2303"]
 ];
 function WordArtMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [text, setText] = useState("Your text here");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [text, setText] = useState2("Your text here");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30075,10 +31045,10 @@ function WordArtMenu({ api }) {
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, [open]);
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert WordArt", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx("span", { style: { color: "#2e74b5", fontSize: 17, fontStyle: "italic", fontWeight: 700 }, children: "A" }) }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 270, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert WordArt", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: /* @__PURE__ */ jsx2("span", { style: { color: "#2e74b5", fontSize: 17, fontStyle: "italic", fontWeight: 700 }, children: "A" }) }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 270, padding: 10, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           "aria-label": "WordArt text",
@@ -30087,7 +31057,7 @@ function WordArtMenu({ api }) {
           style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "5px 8px", font: "13px system-ui, sans-serif", outline: "none" }
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginTop: 8 }, children: WORD_ART.map(([preset, label, glyph]) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6, marginTop: 8 }, children: WORD_ART.map(([preset, label, glyph]) => /* @__PURE__ */ jsxs2(
         "button",
         {
           title: `Insert WordArt ${label}`,
@@ -30097,8 +31067,8 @@ function WordArtMenu({ api }) {
           },
           style: { minHeight: 48, border: `1px solid ${T.border}`, borderRadius: 6, background: T.popoverBg, color: "#2e74b5", cursor: text ? "pointer" : "default", font: "600 12px system-ui, sans-serif" },
           children: [
-            /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: 19, lineHeight: 1.2 }, children: glyph }),
-            /* @__PURE__ */ jsx("span", { children: label })
+            /* @__PURE__ */ jsx2("span", { style: { display: "block", fontSize: 19, lineHeight: 1.2 }, children: glyph }),
+            /* @__PURE__ */ jsx2("span", { children: label })
           ]
         },
         preset
@@ -30107,14 +31077,14 @@ function WordArtMenu({ api }) {
   ] });
 }
 function ChartMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [type, setType] = useState("column");
-  const [title, setTitle] = useState("Quarterly sales");
-  const [categories, setCategories] = useState("Q1, Q2, Q3, Q4");
-  const [series, setSeries] = useState("Revenue: 12, 19, 15, 24\nCosts: 8, 11, 10, 14");
-  const [error, setError] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [type, setType] = useState2("column");
+  const [title, setTitle] = useState2("Quarterly sales");
+  const [categories, setCategories] = useState2("Q1, Q2, Q3, Q4");
+  const [series, setSeries] = useState2("Revenue: 12, 19, 15, 24\nCosts: 8, 11, 10, 14");
+  const [error, setError] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30142,10 +31112,10 @@ function ChartMenu({ api }) {
     }
   };
   const fieldStyle = { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif", color: T.fg, background: T.popoverBg };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert or edit chart", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Chart" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 320, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert or edit chart", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Chart" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 320, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2(
         ToolbarMenuSelect,
         {
           value: type,
@@ -30162,21 +31132,21 @@ function ChartMenu({ api }) {
           style: fieldStyle
         }
       ),
-      /* @__PURE__ */ jsx("input", { "aria-label": "Chart title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "Chart title", style: fieldStyle }),
-      /* @__PURE__ */ jsx("input", { "aria-label": "Chart categories", value: categories, onChange: (event) => setCategories(event.target.value), placeholder: "Q1, Q2, Q3, Q4", style: fieldStyle }),
-      /* @__PURE__ */ jsx("textarea", { "aria-label": "Chart series", rows: 3, value: series, onChange: (event) => setSeries(event.target.value), style: { ...fieldStyle, resize: "vertical" } }),
-      /* @__PURE__ */ jsx("div", { style: { color: T.muted, font: "11.5px system-ui, sans-serif" }, children: "Each series: Name: value, value, value" }),
-      error && /* @__PURE__ */ jsx("div", { role: "alert", style: { color: "#c5221f", font: "11.5px system-ui, sans-serif" }, children: error }),
-      /* @__PURE__ */ jsx("button", { onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: T.accent, color: T.accentFg, cursor: "pointer", font: "600 12px system-ui, sans-serif" }, children: "Insert or update chart" })
+      /* @__PURE__ */ jsx2("input", { "aria-label": "Chart title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "Chart title", style: fieldStyle }),
+      /* @__PURE__ */ jsx2("input", { "aria-label": "Chart categories", value: categories, onChange: (event) => setCategories(event.target.value), placeholder: "Q1, Q2, Q3, Q4", style: fieldStyle }),
+      /* @__PURE__ */ jsx2("textarea", { "aria-label": "Chart series", rows: 3, value: series, onChange: (event) => setSeries(event.target.value), style: { ...fieldStyle, resize: "vertical" } }),
+      /* @__PURE__ */ jsx2("div", { style: { color: T.muted, font: "11.5px system-ui, sans-serif" }, children: "Each series: Name: value, value, value" }),
+      error && /* @__PURE__ */ jsx2("div", { role: "alert", style: { color: "#c5221f", font: "11.5px system-ui, sans-serif" }, children: error }),
+      /* @__PURE__ */ jsx2("button", { onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: T.accent, color: T.accentFg, cursor: "pointer", font: "600 12px system-ui, sans-serif" }, children: "Insert or update chart" })
     ] })
   ] });
 }
 function SmartArtMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [layout, setLayout] = useState("process");
-  const [items, setItems] = useState("Discover\nDesign\nDeliver");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [layout, setLayout] = useState2("process");
+  const [items, setItems] = useState2("Discover\nDesign\nDeliver");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30191,10 +31161,10 @@ function SmartArtMenu({ api }) {
     if (api?.updateSelectedSmartArt(data) || api?.insertSmartArt(data)) setOpen(false);
   };
   const fieldStyle = { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif", color: T.fg, background: T.popoverBg };
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert or edit SmartArt", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "SmartArt" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 280, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert or edit SmartArt", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "SmartArt" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 280, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2(
         ToolbarMenuSelect,
         {
           value: layout,
@@ -30211,17 +31181,17 @@ function SmartArtMenu({ api }) {
           style: fieldStyle
         }
       ),
-      /* @__PURE__ */ jsx("textarea", { "aria-label": "SmartArt items", rows: 5, value: items, onChange: (event) => setItems(event.target.value), style: { ...fieldStyle, resize: "vertical" } }),
-      /* @__PURE__ */ jsx("div", { style: { color: T.muted, font: "11.5px system-ui, sans-serif" }, children: "One diagram item per line." }),
-      /* @__PURE__ */ jsx("button", { disabled: !items.trim(), onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: items.trim() ? T.accent : T.border, color: T.accentFg, cursor: items.trim() ? "pointer" : "default", font: "600 12px system-ui, sans-serif" }, children: "Insert or update SmartArt" })
+      /* @__PURE__ */ jsx2("textarea", { "aria-label": "SmartArt items", rows: 5, value: items, onChange: (event) => setItems(event.target.value), style: { ...fieldStyle, resize: "vertical" } }),
+      /* @__PURE__ */ jsx2("div", { style: { color: T.muted, font: "11.5px system-ui, sans-serif" }, children: "One diagram item per line." }),
+      /* @__PURE__ */ jsx2("button", { disabled: !items.trim(), onClick: submit, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: items.trim() ? T.accent : T.border, color: T.accentFg, cursor: items.trim() ? "pointer" : "default", font: "600 12px system-ui, sans-serif" }, children: "Insert or update SmartArt" })
     ] })
   ] });
 }
 function MediaMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [url, setUrl] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [url, setUrl] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30229,11 +31199,11 @@ function MediaMenu({ api }) {
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, [open]);
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert online video", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Media" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 300, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
-      /* @__PURE__ */ jsx("input", { "aria-label": "Online video URL", value: url, onChange: (event) => setUrl(event.target.value), placeholder: "https://www.youtube.com/watch?v=\u2026", style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif", color: T.fg, background: T.popoverBg } }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert online video", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Media" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 28, right: 0, zIndex: 100, width: 300, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+      /* @__PURE__ */ jsx2("input", { "aria-label": "Online video URL", value: url, onChange: (event) => setUrl(event.target.value), placeholder: "https://www.youtube.com/watch?v=\u2026", style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif", color: T.fg, background: T.popoverBg } }),
+      /* @__PURE__ */ jsx2(
         "button",
         {
           disabled: !url.trim(),
@@ -30246,62 +31216,70 @@ function MediaMenu({ api }) {
   ] });
 }
 function DrawTab({ api }) {
-  const [color, setColor] = useState("#202124");
-  const [width, setWidth] = useState(2);
+  const [pen, setPen] = useState2({ color: "#202124", width: 2 });
+  const [highlighter, setHighlighter] = useState2({ color: "#F9D949", width: 12 });
   const kindOf = (tool) => tool ? tool.kind === "eraser" ? "eraser" : tool.kind === "lasso" ? "lasso" : tool.kind === "highlighter" ? "highlighter" : "pen" : "select";
-  const [active, setActive] = useState(kindOf(api?.getDrawingTool() ?? null));
-  useEffect(() => {
-    const update = (event) => setActive(kindOf(event.detail));
+  const [active, setActive] = useState2(kindOf(api?.getDrawingTool() ?? null));
+  useEffect2(() => {
+    const update = (event) => {
+      const tool = event.detail;
+      setActive(kindOf(tool));
+      if (tool?.kind === "highlighter") setHighlighter({ color: tool.color, width: tool.width });
+      else if (tool?.kind === "pen") setPen({ color: tool.color, width: tool.width });
+    };
     document.addEventListener("dxw-drawing-tool", update);
     return () => document.removeEventListener("dxw-drawing-tool", update);
   }, []);
-  useEffect(() => () => api?.setDrawingTool(null), [api]);
-  const activate = (kind, nextColor = color, nextWidth = width) => {
-    setColor(nextColor);
-    setWidth(nextWidth);
-    api?.setDrawingTool({ kind, color: nextColor, width: nextWidth });
+  useEffect2(() => () => api?.setDrawingTool(null), [api]);
+  const activate = (kind, patch) => {
+    const next = { ...kind === "highlighter" ? highlighter : pen, ...patch };
+    if (kind === "highlighter") setHighlighter(next);
+    else setPen(next);
+    api?.setDrawingTool({ kind, color: next.color, width: next.width });
   };
-  return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx(Btn, { label: "Select", title: "Select objects", active: active === "select", onClick: () => api?.setDrawingTool(null) }),
-    /* @__PURE__ */ jsx(Btn, { label: "Pen", title: "Draw with pen", active: active === "pen", onClick: () => activate("pen") }),
-    /* @__PURE__ */ jsx(Btn, { label: "Highlighter", title: "Draw with highlighter", active: active === "highlighter", onClick: () => activate("highlighter", "#F9D949", 12) }),
-    /* @__PURE__ */ jsx(Btn, { label: "Eraser", title: "Stroke eraser", active: active === "eraser", onClick: () => api?.setDrawingTool({ kind: "eraser", size: 14 }) }),
-    /* @__PURE__ */ jsx(Btn, { label: "Lasso", title: "Lasso ink", active: active === "lasso", onClick: () => api?.setDrawingTool({ kind: "lasso" }) }),
-    /* @__PURE__ */ jsx(Sep, {}),
-    /* @__PURE__ */ jsx(
+  const inkKind = active === "highlighter" ? "highlighter" : "pen";
+  const ink = inkKind === "highlighter" ? highlighter : pen;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(Btn, { label: "Select", title: "Select objects", active: active === "select", onClick: () => api?.setDrawingTool(null) }),
+    /* @__PURE__ */ jsx2(Btn, { label: "Pen", title: "Draw with pen", active: active === "pen", onClick: () => activate("pen") }),
+    /* @__PURE__ */ jsx2(Btn, { label: "Highlighter", title: "Draw with highlighter", active: active === "highlighter", onClick: () => activate("highlighter") }),
+    /* @__PURE__ */ jsx2(Btn, { label: "Eraser", title: "Stroke eraser", active: active === "eraser", onClick: () => api?.setDrawingTool({ kind: "eraser", size: 14 }) }),
+    /* @__PURE__ */ jsx2(Btn, { label: "Lasso", title: "Lasso ink", active: active === "lasso", onClick: () => api?.setDrawingTool({ kind: "lasso" }) }),
+    /* @__PURE__ */ jsx2(Sep, {}),
+    /* @__PURE__ */ jsx2(
       ColorMenu,
       {
-        current: color,
-        title: "Pen color",
-        trigger: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx("span", { style: { font: "12px system-ui, sans-serif" }, children: "Color" }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 18, height: 18, borderRadius: 4, border: `1px solid ${T.border}`, background: color } })
+        current: ink.color,
+        title: inkKind === "highlighter" ? "Highlighter color" : "Pen color",
+        trigger: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2("span", { style: { font: "12px system-ui, sans-serif" }, children: "Color" }),
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { width: 18, height: 18, borderRadius: 4, border: `1px solid ${T.border}`, background: ink.color } })
         ] }),
-        onPick: (value) => activate(active === "highlighter" ? "highlighter" : "pen", value, width)
+        onPick: (value) => activate(inkKind, { color: value })
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       ActionMenu,
       {
-        label: `${width} px`,
-        title: "Pen width",
+        label: `${ink.width} px`,
+        title: inkKind === "highlighter" ? "Highlighter width" : "Pen width",
         width: 70,
         groups: [{ items: [["1", "1 px"], ["2", "2 px"], ["4", "4 px"], ["8", "8 px"], ["12", "12 px"]] }],
-        onPick: (value) => activate(active === "highlighter" ? "highlighter" : "pen", color, Number(value))
+        onPick: (value) => activate(inkKind, { width: Number(value) })
       }
     )
   ] });
 }
 function ScreenshotButton({ api }) {
-  const [status, setStatus] = useState("");
+  const [status, setStatus] = useState2("");
   const capture = async () => {
     setStatus("Capturing screenshot\u2026");
     const result = await api?.insertScreenshot();
     setStatus(result === "inserted" ? "Screenshot inserted." : result === "unsupported" ? "Screen capture is not supported in this browser." : result === "cancelled" ? "Screen capture was cancelled or denied." : result === "no-caret" ? "Click in the document before inserting a screenshot." : "Screenshot failed. Please try again.");
   };
-  return /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx(Btn, { label: "Screenshot", title: "Capture and insert a screen, window, or tab", onClick: () => void capture() }),
-    status && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx2(Btn, { label: "Screenshot", title: "Capture and insert a screen, window, or tab", onClick: () => void capture() }),
+    status && /* @__PURE__ */ jsx2(
       "span",
       {
         role: status === "Screenshot inserted." ? "status" : "alert",
@@ -30313,12 +31291,12 @@ function ScreenshotButton({ api }) {
   ] });
 }
 function CoverPageMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [title, setTitle] = useState("");
-  const [subtitle, setSubtitle] = useState("");
-  const [author, setAuthor] = useState("");
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [title, setTitle] = useState2("");
+  const [subtitle, setSubtitle] = useState2("");
+  const [author, setAuthor] = useState2("");
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -30333,7 +31311,7 @@ function CoverPageMenu({ api }) {
     setSubtitle("");
     setAuthor("");
   };
-  const input = (label, value, set) => /* @__PURE__ */ jsx(
+  const input = (label, value, set) => /* @__PURE__ */ jsx2(
     "input",
     {
       "aria-label": label,
@@ -30343,21 +31321,21 @@ function CoverPageMenu({ api }) {
       style: { width: "100%", boxSizing: "border-box", border: `1px solid ${T.border}`, borderRadius: 6, padding: "6px 8px", font: "13px system-ui, sans-serif" }
     }
   );
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx("button", { title: "Insert cover page", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Cover page" }),
-    open && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 30, left: 0, zIndex: 100, width: 260, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2("button", { title: "Insert cover page", style: btnStyle(open), onMouseDown: (event) => event.preventDefault(), onClick: () => setOpen(!open), children: "Cover page" }),
+    open && /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 30, left: 0, zIndex: 100, width: 260, padding: 10, display: "grid", gap: 7, background: T.popoverBg, border: `1px solid ${T.border}`, borderRadius: 8, boxShadow: T.popoverShadow }, children: [
       input("Cover title", title, setTitle),
       input("Cover subtitle", subtitle, setSubtitle),
       input("Cover author", author, setAuthor),
-      /* @__PURE__ */ jsx("button", { disabled: !title.trim(), onClick: insert, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: title.trim() ? T.accent : T.border, color: T.accentFg, cursor: title.trim() ? "pointer" : "default", font: "600 12px system-ui, sans-serif" }, children: "Insert cover" })
+      /* @__PURE__ */ jsx2("button", { disabled: !title.trim(), onClick: insert, style: { border: 0, borderRadius: 6, padding: "7px 10px", background: title.trim() ? T.accent : T.border, color: T.accentFg, cursor: title.trim() ? "pointer" : "default", font: "600 12px system-ui, sans-serif" }, children: "Insert cover" })
     ] })
   ] });
 }
 function TableMenu({ api }) {
-  const [open, setOpen] = useState(false);
-  const [hover, setHover] = useState({ r: 0, c: 0 });
-  const rootRef = useRef(null);
-  useEffect(() => {
+  const [open, setOpen] = useState2(false);
+  const [hover, setHover] = useState2({ r: 0, c: 0 });
+  const rootRef = useRef2(null);
+  useEffect2(() => {
     if (!open) return;
     const close = (e) => {
       if (!rootRef.current?.contains(e.target)) setOpen(false);
@@ -30382,8 +31360,8 @@ function TableMenu({ api }) {
     ["deleteTable", "Delete table"]
   ];
   const CELL_FILLS = ["FFF2CC", "D9E2F3", "E2EFDA", "FCE4EC", "F1F3F4"];
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx2(
       "button",
       {
         title: "Table",
@@ -30393,7 +31371,7 @@ function TableMenu({ api }) {
         children: "Table \u25BE"
       }
     ),
-    open && /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -30410,12 +31388,12 @@ function TableMenu({ api }) {
         },
         onMouseDown: (e) => e.preventDefault(),
         children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: T.muted, marginBottom: 4 }, children: hover.r > 0 ? `${hover.r} \xD7 ${hover.c}` : "Insert table" }),
-          /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: `repeat(${COLS}, 16px)`, gap: 2 }, children: Array.from({ length: ROWS * COLS }, (_, i) => {
+          /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: T.muted, marginBottom: 4 }, children: hover.r > 0 ? `${hover.r} \xD7 ${hover.c}` : "Insert table" }),
+          /* @__PURE__ */ jsx2("div", { style: { display: "grid", gridTemplateColumns: `repeat(${COLS}, 16px)`, gap: 2 }, children: Array.from({ length: ROWS * COLS }, (_, i) => {
             const r = Math.floor(i / COLS) + 1;
             const c = i % COLS + 1;
             const lit = r <= hover.r && c <= hover.c;
-            return /* @__PURE__ */ jsx(
+            return /* @__PURE__ */ jsx2(
               "div",
               {
                 onMouseEnter: () => setHover({ r, c }),
@@ -30436,8 +31414,8 @@ function TableMenu({ api }) {
               i
             );
           }) }),
-          /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #eee", marginTop: 8, paddingTop: 4 }, children: [
-            ops.map(([op, label]) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { style: { borderTop: "1px solid #eee", marginTop: 8, paddingTop: 4 }, children: [
+            ops.map(([op, label]) => /* @__PURE__ */ jsx2(
               "div",
               {
                 onClick: () => {
@@ -30455,9 +31433,9 @@ function TableMenu({ api }) {
               },
               op
             )),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "center", padding: "4px 6px" }, children: [
-              /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: T.muted, marginRight: 2 }, children: "Cell fill" }),
-              CELL_FILLS.map((f) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 4, alignItems: "center", padding: "4px 6px" }, children: [
+              /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, color: T.muted, marginRight: 2 }, children: "Cell fill" }),
+              CELL_FILLS.map((f) => /* @__PURE__ */ jsx2(
                 "div",
                 {
                   title: `#${f}`,
@@ -30469,7 +31447,7 @@ function TableMenu({ api }) {
                 },
                 f
               )),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "div",
                 {
                   title: "No fill",
@@ -30501,6 +31479,7 @@ function PagePreview({
   margins,
   mirrored,
   columns,
+  columnSeparator,
   border,
   lineNumbers
 }) {
@@ -30513,14 +31492,14 @@ function PagePreview({
   const inset = margins ?? [0.8, 0.8, 0.8, 0.8];
   const borderWidth = border === "thick" ? 2 : border === "none" ? 0 : 1;
   const borderColor = border === "accent" ? T.accent : T.muted;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "aria-hidden": "true",
       className: "dxw-layout-preview",
       "data-dxw-layout-preview": kind,
       style: { width: 52, height: 46, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 3, flex: "0 0 52px" },
-      children: Array.from({ length: papers }, (_, paper) => /* @__PURE__ */ jsxs(
+      children: Array.from({ length: papers }, (_, paper) => /* @__PURE__ */ jsxs2(
         "span",
         {
           className: "dxw-layout-preview-page",
@@ -30534,7 +31513,7 @@ function PagePreview({
             border: `${Math.max(1, borderWidth)}px solid ${borderWidth ? borderColor : T.border}`
           },
           children: [
-            kind === "margins" && /* @__PURE__ */ jsx("span", { style: {
+            kind === "margins" && /* @__PURE__ */ jsx2("span", { style: {
               position: "absolute",
               top: `${Math.min(35, inset[0] * 18)}%`,
               right: `${Math.min(35, (mirrored && paper === 0 ? inset[3] : inset[1]) * 15)}%`,
@@ -30543,19 +31522,22 @@ function PagePreview({
               border: `1px solid ${T.accent}`,
               boxSizing: "border-box"
             } }),
-            !!columns && /* @__PURE__ */ jsx("span", { style: { position: "absolute", inset: "5px 3px", display: "flex", gap: 2 }, children: Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx("span", { style: { flex: 1, background: `repeating-linear-gradient(to bottom, ${T.muted} 0 1px, transparent 1px 4px)` } }, column)) }),
-            border === "none" && /* @__PURE__ */ jsx("span", { style: { position: "absolute", inset: 4, border: `1px dashed ${T.border}` } }),
-            lineNumbers && /* @__PURE__ */ jsxs("span", { style: { position: "absolute", inset: "4px 3px", display: "grid", gridTemplateColumns: "8px 1fr", gap: 2 }, children: [
-              /* @__PURE__ */ jsxs("span", { style: { fontSize: 5, lineHeight: "6px", color: T.accent }, children: [
+            !!columns && /* @__PURE__ */ jsxs2("span", { style: { position: "absolute", inset: "5px 3px", display: "flex", gap: 2 }, children: [
+              Array.from({ length: columns }, (_2, column) => /* @__PURE__ */ jsx2("span", { style: { flex: 1, background: `repeating-linear-gradient(to bottom, ${T.muted} 0 1px, transparent 1px 4px)` } }, column)),
+              columnSeparator && /* @__PURE__ */ jsx2("span", { style: { position: "absolute", left: "50%", top: 0, bottom: 0, width: 1, background: T.muted } })
+            ] }),
+            border === "none" && /* @__PURE__ */ jsx2("span", { style: { position: "absolute", inset: 4, border: `1px dashed ${T.border}` } }),
+            lineNumbers && /* @__PURE__ */ jsxs2("span", { style: { position: "absolute", inset: "4px 3px", display: "grid", gridTemplateColumns: "8px 1fr", gap: 2 }, children: [
+              /* @__PURE__ */ jsxs2("span", { style: { fontSize: 5, lineHeight: "6px", color: T.accent }, children: [
                 "1",
-                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx2("br", {}),
                 "2",
-                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx2("br", {}),
                 "3",
-                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx2("br", {}),
                 "4"
               ] }),
-              /* @__PURE__ */ jsx("span", { style: { background: `repeating-linear-gradient(to bottom, ${T.muted} 0 1px, transparent 1px 6px)` } })
+              /* @__PURE__ */ jsx2("span", { style: { background: `repeating-linear-gradient(to bottom, ${T.muted} 0 1px, transparent 1px 6px)` } })
             ] })
           ]
         },
@@ -30573,11 +31555,11 @@ function LayoutMenu({
   onPick
 }) {
   const id = useId();
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const keyboardOpen = useRef(null);
-  const [position, setPosition] = useState({ left: 8, top: 8, maxHeight: 480 });
-  const [portalTokens, setPortalTokens] = useState({});
+  const triggerRef = useRef2(null);
+  const menuRef = useRef2(null);
+  const keyboardOpen = useRef2(null);
+  const [position, setPosition] = useState2({ left: 8, top: 8, maxHeight: 480 });
+  const [portalTokens, setPortalTokens] = useState2({});
   useLayoutEffect(() => {
     if (!open) return;
     const update = () => {
@@ -30670,8 +31652,8 @@ function LayoutMenu({
     event.stopPropagation();
     items[next]?.focus({ preventScroll: true });
   };
-  return /* @__PURE__ */ jsxs("span", { className: "dxw-layout-control", style: { display: "inline-flex", minWidth: 0 }, children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("span", { className: "dxw-layout-control", style: { display: "inline-flex", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         ref: triggerRef,
@@ -30705,13 +31687,13 @@ function LayoutMenu({
           fontWeight: 500
         },
         children: [
-          /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { fontSize: 10 }, children: "\u2304" })
+          /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: label }),
+          /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", style: { fontSize: 10 }, children: "\u2304" })
         ]
       }
     ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
+    open && createPortal2(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           ref: menuRef,
@@ -30739,7 +31721,7 @@ function LayoutMenu({
             boxShadow: T.popoverShadow,
             padding: 6
           },
-          children: options.map((option) => /* @__PURE__ */ jsxs(
+          children: options.map((option) => /* @__PURE__ */ jsxs2(
             "button",
             {
               type: "button",
@@ -30771,9 +31753,9 @@ function LayoutMenu({
               onMouseLeave: (event) => event.currentTarget.style.background = "transparent",
               children: [
                 option.preview,
-                /* @__PURE__ */ jsxs("span", { style: { minWidth: 0 }, children: [
-                  /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: 13, fontWeight: 550 }, children: option.label }),
-                  option.description && /* @__PURE__ */ jsx("span", { style: { display: "block", fontSize: 11, color: T.muted, marginTop: 1 }, children: option.description })
+                /* @__PURE__ */ jsxs2("span", { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx2("span", { style: { display: "block", fontSize: 13, fontWeight: 550 }, children: option.label }),
+                  option.description && /* @__PURE__ */ jsx2("span", { style: { display: "block", fontSize: 11, color: T.muted, marginTop: 1 }, children: option.description })
                 ] })
               ]
             },
@@ -30791,11 +31773,11 @@ function MarginMenu({
   open,
   onOpenChange
 }) {
-  const [customOpen, setCustomOpen] = useState(false);
-  const [values, setValues] = useState({ top: "1", bottom: "1", left: "1", right: "1" });
-  const rootRef = useRef(null);
-  const [dialogPosition, setDialogPosition] = useState({ left: 8, top: 8 });
-  useEffect(() => {
+  const [customOpen, setCustomOpen] = useState2(false);
+  const [values, setValues] = useState2({ top: "1", bottom: "1", left: "1", right: "1" });
+  const rootRef = useRef2(null);
+  const [dialogPosition, setDialogPosition] = useState2({ left: 8, top: 8 });
+  useEffect2(() => {
     if (!customOpen) return;
     const positionDialog = () => {
       const trigger = rootRef.current?.querySelector("[data-dxw-layout-menu-trigger]");
@@ -30851,9 +31833,9 @@ function MarginMenu({
     });
     setCustomOpen(false);
   };
-  const field = (side, label) => /* @__PURE__ */ jsxs("label", { style: { display: "grid", gridTemplateColumns: "54px 1fr", gap: 8, alignItems: "center", fontSize: 12 }, children: [
-    /* @__PURE__ */ jsx("span", { children: label }),
-    /* @__PURE__ */ jsx(
+  const field = (side, label) => /* @__PURE__ */ jsxs2("label", { style: { display: "grid", gridTemplateColumns: "54px 1fr", gap: 8, alignItems: "center", fontSize: 12 }, children: [
+    /* @__PURE__ */ jsx2("span", { children: label }),
+    /* @__PURE__ */ jsx2(
       "input",
       {
         "aria-label": `${label} margin (inches)`,
@@ -30871,8 +31853,8 @@ function MarginMenu({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx2(
       LayoutMenu,
       {
         name: "margins",
@@ -30881,16 +31863,16 @@ function MarginMenu({
         onOpenChange,
         onPick: pick,
         options: [
-          { value: "m:normal", label: "Normal", description: '1" on every side', preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [1, 1, 1, 1] }) },
-          { value: "m:narrow", label: "Narrow", description: '0.5" on every side', preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [0.5, 0.5, 0.5, 0.5] }) },
-          { value: "m:moderate", label: "Moderate", description: '1" top/bottom, 0.75" left/right', preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [1, 0.75, 1, 0.75] }) },
-          { value: "m:wide", label: "Wide", description: '1" top/bottom, 2" left/right', preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [1, 2, 1, 2] }) },
-          { value: "m:mirrored", label: "Mirrored", description: 'Facing pages; inside margin 1.25"', preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [1, 1, 1, 1.25], mirrored: true }) },
-          { value: "m:custom", label: "Custom Margins\u2026", description: "Set each side in inches", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "margins", margins: [0.7, 1.2, 0.7, 1.2] }) }
+          { value: "m:normal", label: "Normal", description: '1" on every side', preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [1, 1, 1, 1] }) },
+          { value: "m:narrow", label: "Narrow", description: '0.5" on every side', preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [0.5, 0.5, 0.5, 0.5] }) },
+          { value: "m:moderate", label: "Moderate", description: '1" top/bottom, 0.75" left/right', preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [1, 0.75, 1, 0.75] }) },
+          { value: "m:wide", label: "Wide", description: '1" top/bottom, 2" left/right', preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [1, 2, 1, 2] }) },
+          { value: "m:mirrored", label: "Mirrored", description: 'Facing pages; inside margin 1.25"', preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [1, 1, 1, 1.25], mirrored: true }) },
+          { value: "m:custom", label: "Custom Margins\u2026", description: "Set each side in inches", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "margins", margins: [0.7, 1.2, 0.7, 1.2] }) }
         ]
       }
     ),
-    customOpen && /* @__PURE__ */ jsxs(
+    customOpen && /* @__PURE__ */ jsxs2(
       "div",
       {
         role: "dialog",
@@ -30912,19 +31894,19 @@ function MarginMenu({
           gap: 7
         },
         children: [
-          /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Custom Margins" }),
+          /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: "Custom Margins" }),
           field("top", "Top"),
           field("bottom", "Bottom"),
           field("left", "Left"),
           field("right", "Right"),
-          /* @__PURE__ */ jsxs("span", { style: { color: T.muted, fontSize: 11 }, children: [
+          /* @__PURE__ */ jsxs2("span", { style: { color: T.muted, fontSize: 11 }, children: [
             "Applies to ",
             scope === "section" ? "this section" : "the whole document",
             " and turns mirrored margins off for the whole document."
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 }, children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCustomOpen(false), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Cancel" }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: applyCustom, disabled: !valid, style: pillBtn, children: "Apply" })
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 }, children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setCustomOpen(false), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Cancel" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: applyCustom, disabled: !valid, style: pillBtn, children: "Apply" })
           ] })
         ]
       }
@@ -30937,11 +31919,11 @@ function PageSizeMenu({
   open,
   onOpenChange
 }) {
-  const [customOpen, setCustomOpen] = useState(false);
-  const [values, setValues] = useState({ width: "8.5", height: "11" });
-  const rootRef = useRef(null);
-  const [dialogPosition, setDialogPosition] = useState({ left: 8, top: 8 });
-  useEffect(() => {
+  const [customOpen, setCustomOpen] = useState2(false);
+  const [values, setValues] = useState2({ width: "8.5", height: "11" });
+  const rootRef = useRef2(null);
+  const [dialogPosition, setDialogPosition] = useState2({ left: 8, top: 8 });
+  useEffect2(() => {
     if (!customOpen) return;
     const positionDialog = () => {
       const trigger = rootRef.current?.querySelector("[data-dxw-layout-menu-trigger]");
@@ -30977,9 +31959,9 @@ function PageSizeMenu({
     onApply({ size: { width: Number(values.width), height: Number(values.height) } });
     setCustomOpen(false);
   };
-  const field = (side, label) => /* @__PURE__ */ jsxs("label", { style: { display: "grid", gridTemplateColumns: "54px 1fr", gap: 8, alignItems: "center", fontSize: 12 }, children: [
-    /* @__PURE__ */ jsx("span", { children: label }),
-    /* @__PURE__ */ jsx(
+  const field = (side, label) => /* @__PURE__ */ jsxs2("label", { style: { display: "grid", gridTemplateColumns: "54px 1fr", gap: 8, alignItems: "center", fontSize: 12 }, children: [
+    /* @__PURE__ */ jsx2("span", { children: label }),
+    /* @__PURE__ */ jsx2(
       "input",
       {
         "aria-label": `Page ${side} (inches)`,
@@ -30997,8 +31979,8 @@ function PageSizeMenu({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs("span", { ref: rootRef, style: { position: "relative", display: "inline-flex" }, children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("span", { ref: rootRef, style: { position: "relative", display: "inline-flex" }, children: [
+    /* @__PURE__ */ jsx2(
       LayoutMenu,
       {
         name: "size",
@@ -31010,9 +31992,9 @@ function PageSizeMenu({
             value: size.value,
             label: size.label,
             description: size.description,
-            preview: /* @__PURE__ */ jsx(PagePreview, { kind: "size", width: size.width, height: size.height })
+            preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "size", width: size.width, height: size.height })
           })),
-          { value: "custom", label: "Custom Paper Size\u2026", description: "Set width and height in inches", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "size", width: 7.5, height: 10 }) }
+          { value: "custom", label: "Custom Paper Size\u2026", description: "Set width and height in inches", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "size", width: 7.5, height: 10 }) }
         ],
         onPick: (value) => {
           if (value === "custom") {
@@ -31025,7 +32007,7 @@ function PageSizeMenu({
         }
       }
     ),
-    customOpen && /* @__PURE__ */ jsxs(
+    customOpen && /* @__PURE__ */ jsxs2(
       "div",
       {
         role: "dialog",
@@ -31047,17 +32029,17 @@ function PageSizeMenu({
           gap: 7
         },
         children: [
-          /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Custom Paper Size" }),
+          /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: "Custom Paper Size" }),
           field("width", "Width"),
           field("height", "Height"),
-          /* @__PURE__ */ jsxs("span", { style: { color: T.muted, fontSize: 11 }, children: [
+          /* @__PURE__ */ jsxs2("span", { style: { color: T.muted, fontSize: 11 }, children: [
             "Applies to ",
             scope === "section" ? "this section" : "the whole document",
             "."
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 }, children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setCustomOpen(false), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Cancel" }),
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: applyCustom, disabled: !valid, style: pillBtn, children: "Apply" })
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 6 }, children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => setCustomOpen(false), style: { ...pillBtn, background: T.popoverBg, color: T.fg }, children: "Cancel" }),
+            /* @__PURE__ */ jsx2("button", { type: "button", onClick: applyCustom, disabled: !valid, style: pillBtn, children: "Apply" })
           ] })
         ]
       }
@@ -31065,80 +32047,111 @@ function PageSizeMenu({
   ] });
 }
 function LayoutTab({ api, showArrange }) {
-  const [scope, setScope] = useState("document");
-  const [openMenu, setOpenMenu] = useState(null);
-  const rootRef = useRef(null);
+  const [scope, setScope] = useState2("document");
+  const [section, setSection] = useState2(null);
+  const [objectSelected, setObjectSelected] = useState2(false);
+  const [openMenu, setOpenMenu] = useState2(null);
+  const rootRef = useRef2(null);
+  useEffect2(() => {
+    const refresh = () => {
+      setSection(api?.getSectionContext() ?? null);
+      setObjectSelected(api?.hasSelectedObject() ?? false);
+    };
+    refresh();
+    document.addEventListener("dxw-selection", refresh);
+    document.addEventListener("dxw-object-selection", refresh);
+    return () => {
+      document.removeEventListener("dxw-selection", refresh);
+      document.removeEventListener("dxw-object-selection", refresh);
+    };
+  }, [api]);
   const set = (patch) => api?.setPageLayout(patch, scope);
   const setLn = (patch) => api?.setLineNumbering(patch, scope);
   const menuState = (name) => ({
     open: openMenu === name,
     onOpenChange: (open) => setOpenMenu(open ? name : null)
   });
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "span",
     {
       ref: rootRef,
       className: "dxw-layout-ribbon",
       "data-dxw-layout-ribbon": "",
-      style: { display: "flex", flex: "1 1 640px", minWidth: 0, alignItems: "center", flexWrap: "wrap", gap: 2 },
+      style: {
+        display: "flex",
+        flex: "0 0 100%",
+        order: 2,
+        minWidth: 0,
+        boxSizing: "border-box",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: 2,
+        paddingTop: 4,
+        marginTop: 2,
+        borderTop: `1px solid ${T.border}`
+      },
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           ToolbarMenuSelect,
           {
             title: "Apply layout changes to",
             ariaLabel: "Apply layout changes to",
             value: scope,
-            width: 118,
-            menuWidth: 170,
+            width: section ? 160 : 142,
+            menuWidth: 205,
             options: [
               { value: "document", label: "Whole document" },
-              { value: "section", label: "This section" }
+              {
+                value: "section",
+                label: section ? `This section \xB7 ${section.index} of ${section.count}` : "This section"
+              }
             ],
             onChange: (value) => setScope(value),
             style: { maxWidth: "100%" }
           }
         ),
-        /* @__PURE__ */ jsx(Sep, {}),
-        /* @__PURE__ */ jsx(MarginMenu, { scope, onApply: set, ...menuState("margins") }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(Sep, {}),
+        /* @__PURE__ */ jsx2(MarginMenu, { scope, onApply: set, ...menuState("margins") }),
+        /* @__PURE__ */ jsx2(
           LayoutMenu,
           {
             name: "orientation",
             label: "Orientation",
             ...menuState("orientation"),
             options: [
-              { value: "portrait", label: "Portrait", description: "Vertical page", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "orientation" }) },
-              { value: "landscape", label: "Landscape", description: "Horizontal page", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "orientation", width: 11, height: 8.5 }) }
+              { value: "portrait", label: "Portrait", description: "Vertical page", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "orientation" }) },
+              { value: "landscape", label: "Landscape", description: "Horizontal page", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "orientation", width: 11, height: 8.5 }) }
             ],
             onPick: (value) => set({ orientation: value })
           }
         ),
-        /* @__PURE__ */ jsx(PageSizeMenu, { scope, onApply: set, ...menuState("size") }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(PageSizeMenu, { scope, onApply: set, ...menuState("size") }),
+        /* @__PURE__ */ jsx2(
           LayoutMenu,
           {
             name: "columns",
-            label: "Columns",
+            label: "Columns & divider",
             ...menuState("columns"),
             options: [
-              { value: "1", label: "One", description: "Single text column", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "columns", columns: 1 }) },
-              { value: "2", label: "Two", description: "Two equal columns", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "columns", columns: 2 }) },
-              { value: "3", label: "Three", description: "Three equal columns", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "columns", columns: 3 }) }
+              { value: "1", label: "One", description: "Single text column", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "columns", columns: 1 }) },
+              { value: "2", label: "Two", description: "Two equal columns", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "columns", columns: 2 }) },
+              { value: "2-divider", label: "Two + divider line", description: "Two columns with Word's automatic vertical line between them", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "columns", columns: 2, columnSeparator: true }) },
+              { value: "3", label: "Three", description: "Three equal columns", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "columns", columns: 3 }) }
             ],
-            onPick: (value) => set({ columns: parseInt(value, 10) })
+            onPick: (value) => set({ columns: parseInt(value, 10), columnSeparator: value === "2-divider" })
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           LayoutMenu,
           {
             name: "page-border",
             label: "Page border",
             ...menuState("page-border"),
             options: [
-              { value: "none", label: "None", description: "No page border", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "page-border", border: "none" }) },
-              { value: "thin", label: "Thin box", description: "\xBD pt solid line", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "page-border", border: "thin" }) },
-              { value: "thick", label: "Thick box", description: "1\xBD pt solid line", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "page-border", border: "thick" }) },
-              { value: "accent", label: "Accent box", description: "Blue 1 pt line", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "page-border", border: "accent" }) }
+              { value: "none", label: "None", description: "No page border", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "page-border", border: "none" }) },
+              { value: "thin", label: "Thin box", description: "\xBD pt solid line", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "page-border", border: "thin" }) },
+              { value: "thick", label: "Thick box", description: "1\xBD pt solid line", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "page-border", border: "thick" }) },
+              { value: "accent", label: "Accent box", description: "Blue 1 pt line", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "page-border", border: "accent" }) }
             ],
             onPick: (value) => {
               if (value === "none") set({ pageBorders: null });
@@ -31148,19 +32161,19 @@ function LayoutTab({ api, showArrange }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           LayoutMenu,
           {
             name: "line-numbers",
             label: "Line numbers",
             ...menuState("line-numbers"),
             options: [
-              { value: "off", label: "None", description: "Hide line numbers", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers" }) },
-              { value: "continuous", label: "Continuous", description: "Number every line continuously", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
-              { value: "eachPage", label: "Restart each page", description: "Start at 1 on every page", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
-              { value: "eachSection", label: "Restart each section", description: "Start at 1 in each section", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
-              { value: "by5", label: "Count by 5", description: "Show every fifth line", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
-              { value: "by10", label: "Count by 10", description: "Show every tenth line", preview: /* @__PURE__ */ jsx(PagePreview, { kind: "line-numbers", lineNumbers: true }) }
+              { value: "off", label: "None", description: "Hide line numbers", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers" }) },
+              { value: "continuous", label: "Continuous", description: "Number every line continuously", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
+              { value: "eachPage", label: "Restart each page", description: "Start at 1 on every page", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
+              { value: "eachSection", label: "Restart each section", description: "Start at 1 in each section", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
+              { value: "by5", label: "Count by 5", description: "Show every fifth line", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers", lineNumbers: true }) },
+              { value: "by10", label: "Count by 10", description: "Show every tenth line", preview: /* @__PURE__ */ jsx2(PagePreview, { kind: "line-numbers", lineNumbers: true }) }
             ],
             onPick: (value) => {
               if (value === "off") setLn({ enabled: false });
@@ -31172,9 +32185,9 @@ function LayoutTab({ api, showArrange }) {
             }
           }
         ),
-        showArrange && /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(Sep, {}),
-          /* @__PURE__ */ jsx(
+        showArrange && objectSelected && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Sep, {}),
+          /* @__PURE__ */ jsx2(
             ActionMenu,
             {
               label: "Align",
@@ -31187,7 +32200,7 @@ function LayoutTab({ api, showArrange }) {
               onPick: (value) => api?.arrangeObject(value)
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             ActionMenu,
             {
               label: "Rotate",
@@ -31197,7 +32210,7 @@ function LayoutTab({ api, showArrange }) {
               onPick: (value) => api?.arrangeObject(value)
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             ActionMenu,
             {
               label: "Arrange",
@@ -31221,12 +32234,17 @@ function DocxToolbar({
   style
 }) {
   const on = (k) => features?.[k] !== false;
-  const [tab, setTab] = useState("home");
-  const iconInput = useRef(null);
-  const modelInput = useRef(null);
-  const objectInput = useRef(null);
-  const [tip, setTip] = useState(null);
-  const tipTimer = useRef(null);
+  const [tab, setTab] = useState2("home");
+  const [helpOpen, setHelpOpen] = useState2(false);
+  const apple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+  const shortcut = (key) => apple ? `\u2318${key}` : `Ctrl+${key}`;
+  const closeHelp = useCallback(() => setHelpOpen(false), []);
+  const iconInput = useRef2(null);
+  const modelInput = useRef2(null);
+  const objectInput = useRef2(null);
+  const helpTrigger = useRef2(null);
+  const [tip, setTip] = useState2(null);
+  const tipTimer = useRef2(null);
   const onTipOver = useCallback((e) => {
     const el16 = e.target.closest("[title], [data-tip]");
     if (!el16) return;
@@ -31247,14 +32265,25 @@ function DocxToolbar({
     if (tipTimer.current) clearTimeout(tipTimer.current);
     setTip(null);
   }, []);
-  const [fmt, setFmt] = useState(null);
-  const [curStyle, setCurStyle] = useState(null);
-  const [listKind, setListKind] = useState(null);
-  const savedRange = useRef(null);
-  const imageInput = useRef(null);
-  const rootRef = useRef(null);
-  const [tier, setTier] = useState(0);
-  useEffect(() => {
+  const [fmt, setFmt] = useState2(null);
+  const [curStyle, setCurStyle] = useState2(null);
+  const [listKind, setListKind] = useState2(null);
+  const savedRange = useRef2(null);
+  const imageInput = useRef2(null);
+  const rootRef = useRef2(null);
+  const [tier, setTier] = useState2(0);
+  useEffect2(() => {
+    if (!on("help")) return;
+    const keydown = (event) => {
+      if (event.key === "F1" || (event.metaKey || event.ctrlKey) && event.key === "/") {
+        event.preventDefault();
+        setHelpOpen(true);
+      }
+    };
+    document.addEventListener("keydown", keydown);
+    return () => document.removeEventListener("keydown", keydown);
+  }, [features]);
+  useEffect2(() => {
     const el16 = rootRef.current;
     if (!el16 || typeof ResizeObserver === "undefined") return;
     const measure = () => {
@@ -31279,7 +32308,7 @@ function DocxToolbar({
     setCurStyle(api?.getParagraphStyleId?.() ?? null);
     setListKind(api?.getListType?.() ?? null);
   }, [api]);
-  useEffect(() => {
+  useEffect2(() => {
     document.addEventListener("selectionchange", refresh);
     document.addEventListener("dxw-selection", refresh);
     return () => {
@@ -31307,22 +32336,22 @@ function DocxToolbar({
     if (on("history"))
       groups.push({
         key: "history",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(Btn, { label: "\u21B6", title: "Undo (\u2318Z)", onClick: () => {
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Btn, { label: "\u21B6", title: "Undo (\u2318Z)", onClick: () => {
             api?.undo();
             refresh();
           } }),
-          /* @__PURE__ */ jsx(Btn, { label: "\u21B7", title: "Redo (\u21E7\u2318Z)", onClick: () => {
+          /* @__PURE__ */ jsx2(Btn, { label: "\u21B7", title: "Redo (\u21E7\u2318Z)", onClick: () => {
             api?.redo();
             refresh();
           } }),
-          /* @__PURE__ */ jsx(Sep, {})
+          /* @__PURE__ */ jsx2(Sep, {})
         ] })
       });
     if (on("styles"))
       groups.push({
         key: "styles",
-        node: /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsx2(
           ToolbarMenuSelect,
           {
             title: "Paragraph style",
@@ -31346,7 +32375,7 @@ function DocxToolbar({
     if (on("font"))
       groups.push({
         key: "font",
-        node: /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsx2(
           ToolbarMenuSelect,
           {
             title: "Font",
@@ -31366,8 +32395,8 @@ function DocxToolbar({
     if (on("size"))
       groups.push({
         key: "size",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(
             ToolbarMenuSelect,
             {
               title: "Font size",
@@ -31379,43 +32408,43 @@ function DocxToolbar({
               onChange: (value) => value && apply({ fontSizePt: parseFloat(value) })
             }
           ),
-          /* @__PURE__ */ jsx(Sep, {})
+          /* @__PURE__ */ jsx2(Sep, {})
         ] })
       });
     if (on("format"))
       groups.push({
         key: "format",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx("b", { children: "B" }), title: "Bold (\u2318B)", active: !!fmt?.bold, onClick: () => apply({ bold: !fmt?.bold }) }),
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx("i", { children: "I" }), title: "Italic", active: !!fmt?.italic, onClick: () => apply({ italic: !fmt?.italic }) }),
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx("u", { children: "U" }), title: "Underline", active: !!fmt?.underline, onClick: () => apply({ underline: !fmt?.underline }) }),
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx("s", { children: "S" }), title: "Strikethrough", active: !!fmt?.strike, onClick: () => apply({ strike: !fmt?.strike }) }),
-          /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2("b", { children: "B" }), title: "Bold (\u2318B)", active: !!fmt?.bold, onClick: () => apply({ bold: !fmt?.bold }) }),
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2("i", { children: "I" }), title: "Italic", active: !!fmt?.italic, onClick: () => apply({ italic: !fmt?.italic }) }),
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2("u", { children: "U" }), title: "Underline", active: !!fmt?.underline, onClick: () => apply({ underline: !fmt?.underline }) }),
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2("s", { children: "S" }), title: "Strikethrough", active: !!fmt?.strike, onClick: () => apply({ strike: !fmt?.strike }) }),
+          /* @__PURE__ */ jsx2(
             Btn,
             {
-              label: /* @__PURE__ */ jsxs("span", { style: { fontSize: 12 }, children: [
+              label: /* @__PURE__ */ jsxs2("span", { style: { fontSize: 12 }, children: [
                 "x",
-                /* @__PURE__ */ jsx("sup", { style: { fontSize: 9 }, children: "2" })
+                /* @__PURE__ */ jsx2("sup", { style: { fontSize: 9 }, children: "2" })
               ] }),
               title: "Superscript",
               active: fmt?.verticalAlign === "superscript",
               onClick: () => apply({ verticalAlign: fmt?.verticalAlign === "superscript" ? null : "superscript" })
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             Btn,
             {
-              label: /* @__PURE__ */ jsxs("span", { style: { fontSize: 12 }, children: [
+              label: /* @__PURE__ */ jsxs2("span", { style: { fontSize: 12 }, children: [
                 "x",
-                /* @__PURE__ */ jsx("sub", { style: { fontSize: 9 }, children: "2" })
+                /* @__PURE__ */ jsx2("sub", { style: { fontSize: 9 }, children: "2" })
               ] }),
               title: "Subscript",
               active: fmt?.verticalAlign === "subscript",
               onClick: () => apply({ verticalAlign: fmt?.verticalAlign === "subscript" ? null : "subscript" })
             }
           ),
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx(ClearFormatIcon, {}), title: "Clear formatting", onClick: () => apply({ clear: true }) }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2(ClearFormatIcon, {}), title: "Clear formatting", onClick: () => apply({ clear: true }) }),
+          /* @__PURE__ */ jsx2(
             ActionMenu,
             {
               label: "Aa",
@@ -31433,12 +32462,12 @@ function DocxToolbar({
     if (on("color"))
       groups.push({
         key: "color",
-        node: /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsx2(
           ColorMenu,
           {
             current: fmt?.color && fmt.color !== "auto" ? fmt.color : "#000000",
             title: "Text color",
-            trigger: /* @__PURE__ */ jsx("span", { style: { fontSize: 13, borderBottom: `3px solid ${fmt?.color && fmt.color !== "auto" ? fmt.color : "#000"}`, padding: "0 3px", color: T.fg }, children: "A" }),
+            trigger: /* @__PURE__ */ jsx2("span", { style: { fontSize: 13, borderBottom: `3px solid ${fmt?.color && fmt.color !== "auto" ? fmt.color : "#000"}`, padding: "0 3px", color: T.fg }, children: "A" }),
             onPick: (value) => apply({ color: value })
           }
         )
@@ -31446,34 +32475,34 @@ function DocxToolbar({
     if (on("highlight"))
       groups.push({
         key: "highlight",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(HighlightMenu, { current: fmt?.highlight, onPick: (v) => apply({ highlight: v }) }),
-          /* @__PURE__ */ jsx(Sep, {})
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(HighlightMenu, { current: fmt?.highlight, onPick: (v) => apply({ highlight: v }) }),
+          /* @__PURE__ */ jsx2(Sep, {})
         ] })
       });
     if (on("alignment"))
       groups.push({
         key: "alignment",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(Btn, { label: "\u2261", title: "Align left", onClick: () => api?.setAlignment("left") }),
-          /* @__PURE__ */ jsx(Btn, { label: "\u2263", title: "Center", onClick: () => api?.setAlignment("center") }),
-          /* @__PURE__ */ jsx(Btn, { label: "\u2262", title: "Align right", onClick: () => api?.setAlignment("right") }),
-          /* @__PURE__ */ jsx(Btn, { label: "\u2630", title: "Justify", onClick: () => api?.setAlignment("justify") }),
-          /* @__PURE__ */ jsx(Sep, {})
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Btn, { label: "\u2261", title: "Align left", onClick: () => api?.setAlignment("left") }),
+          /* @__PURE__ */ jsx2(Btn, { label: "\u2263", title: "Center", onClick: () => api?.setAlignment("center") }),
+          /* @__PURE__ */ jsx2(Btn, { label: "\u2262", title: "Align right", onClick: () => api?.setAlignment("right") }),
+          /* @__PURE__ */ jsx2(Btn, { label: "\u2630", title: "Justify", onClick: () => api?.setAlignment("justify") }),
+          /* @__PURE__ */ jsx2(Sep, {})
         ] })
       });
     if (on("indent"))
       groups.push({
         key: "indent",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx(IndentIcon, { dir: -1 }), title: "Decrease indent", onClick: () => api?.adjustIndent(-1) }),
-          /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx(IndentIcon, { dir: 1 }), title: "Increase indent", onClick: () => api?.adjustIndent(1) })
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2(IndentIcon, { dir: -1 }), title: "Decrease indent", onClick: () => api?.adjustIndent(-1) }),
+          /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2(IndentIcon, { dir: 1 }), title: "Increase indent", onClick: () => api?.adjustIndent(1) })
         ] })
       });
     if (on("spacing"))
       groups.push({
         key: "spacing",
-        node: /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsx2(
           ActionMenu,
           {
             label: "\u2195",
@@ -31481,14 +32510,30 @@ function DocxToolbar({
             width: 44,
             groups: [
               { label: "Line spacing", items: [["l:1", "Single"], ["l:1.15", "1.15"], ["l:1.5", "1.5"], ["l:2", "Double"]] },
+              { label: "Exact line height", items: [["e:12", "Exactly 12 pt"], ["e:18", "Exactly 18 pt"], ["e:24", "Exactly 24 pt"], ["e:custom", "Custom exact height\u2026"]] },
               { label: "Paragraph", items: [["b:add", "Add space before"], ["b:none", "Remove space before"], ["a:add", "Add space after"], ["a:none", "Remove space after"]] }
             ],
             onPick: (v) => {
               if (v.startsWith("l:")) api?.setParagraphSpacing({ lineMultiple: parseFloat(v.slice(2)) });
+              else if (v === "e:custom") {
+                const anchor = rootRef.current;
+                if (!anchor) return;
+                void requestTextInputDialog(anchor, {
+                  title: "Exact line height",
+                  label: "Line height (points)",
+                  value: "24",
+                  placeholder: "24",
+                  submitLabel: "Apply"
+                }).then((next) => {
+                  if (next === null) return;
+                  const points = Number(next.trim());
+                  if (Number.isFinite(points) && points > 0) api?.setParagraphSpacing({ exactLinePt: points });
+                });
+              } else if (v.startsWith("e:")) api?.setParagraphSpacing({ exactLinePt: parseFloat(v.slice(2)) });
               else if (v === "b:add") api?.setParagraphSpacing({ beforePt: 10 });
-              else if (v === "b:none") api?.setParagraphSpacing({ beforePt: null });
+              else if (v === "b:none") api?.setParagraphSpacing({ beforePt: 0 });
               else if (v === "a:add") api?.setParagraphSpacing({ afterPt: 10 });
-              else if (v === "a:none") api?.setParagraphSpacing({ afterPt: null });
+              else if (v === "a:none") api?.setParagraphSpacing({ afterPt: 0 });
             }
           }
         )
@@ -31496,11 +32541,11 @@ function DocxToolbar({
     if (on("lists"))
       groups.push({
         key: "lists",
-        node: /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx(
+        node: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(
             Btn,
             {
-              label: /* @__PURE__ */ jsx(BulletListIcon, {}),
+              label: /* @__PURE__ */ jsx2(BulletListIcon, {}),
               title: "Bulleted list",
               active: listKind === "bullet",
               onClick: () => {
@@ -31509,10 +32554,10 @@ function DocxToolbar({
               }
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             Btn,
             {
-              label: /* @__PURE__ */ jsx(NumberListIcon, {}),
+              label: /* @__PURE__ */ jsx2(NumberListIcon, {}),
               title: "Numbered list",
               active: listKind === "number",
               onClick: () => {
@@ -31521,18 +32566,18 @@ function DocxToolbar({
               }
             }
           ),
-          /* @__PURE__ */ jsx(Sep, {})
+          /* @__PURE__ */ jsx2(Sep, {})
         ] })
       });
     const overflowKeys = tier === 0 ? /* @__PURE__ */ new Set() : tier === 1 ? /* @__PURE__ */ new Set(["styles", "indent", "spacing"]) : /* @__PURE__ */ new Set(["styles", "font", "size", "color", "highlight", "alignment", "indent", "spacing"]);
     const inline = groups.filter((g) => !overflowKeys.has(g.key));
     const overflow = groups.filter((g) => overflowKeys.has(g.key));
-    return /* @__PURE__ */ jsxs(Fragment2, { children: [
-      inline.map((g) => /* @__PURE__ */ jsx(Fragment, { children: g.node }, g.key)),
-      overflow.length > 0 && /* @__PURE__ */ jsx(OverflowMenu, { children: overflow.map((g) => /* @__PURE__ */ jsx(Fragment, { children: g.node }, g.key)) })
+    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      inline.map((g) => /* @__PURE__ */ jsx2(Fragment, { children: g.node }, g.key)),
+      overflow.length > 0 && /* @__PURE__ */ jsx2(OverflowMenu, { children: overflow.map((g) => /* @__PURE__ */ jsx2(Fragment, { children: g.node }, g.key)) })
     ] });
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: rootRef,
@@ -31559,7 +32604,7 @@ function DocxToolbar({
         ...style
       },
       children: [
-        tip && /* @__PURE__ */ jsx(
+        tip && /* @__PURE__ */ jsx2(
           "div",
           {
             style: {
@@ -31580,55 +32625,80 @@ function DocxToolbar({
             children: tip.text
           }
         ),
-        mode === "advanced" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 2, marginRight: 8 }, children: ["home", "insert", "draw", "layout"].filter((t) => (t !== "draw" || on("drawing")) && (t !== "layout" || on("layout"))).map((t) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              "data-tab": t,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => setTab(t),
-              style: {
-                border: "none",
-                background: tab === t ? T.tabActiveBg : "transparent",
-                color: tab === t ? T.accent : T.fg,
-                font: "600 12.5px system-ui, sans-serif",
-                padding: "5px 10px",
-                borderRadius: 6,
-                cursor: "pointer",
-                textTransform: "capitalize"
+        mode === "advanced" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 2, marginRight: 8 }, children: [
+            ["home", "insert", "draw", "layout"].filter((t) => (t !== "draw" || on("drawing")) && (t !== "layout" || on("layout"))).map((t) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                "data-tab": t,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => setTab(t),
+                style: {
+                  border: "none",
+                  background: tab === t ? T.tabActiveBg : "transparent",
+                  color: tab === t ? T.accent : T.fg,
+                  font: "600 12.5px system-ui, sans-serif",
+                  padding: "5px 10px",
+                  borderRadius: 6,
+                  cursor: "pointer",
+                  textTransform: "capitalize"
+                },
+                children: t
               },
-              children: t
-            },
-            t
-          )) }),
-          /* @__PURE__ */ jsx(Sep, {})
+              t
+            )),
+            on("help") && /* @__PURE__ */ jsx2(
+              "button",
+              {
+                ref: helpTrigger,
+                type: "button",
+                title: `Help and keyboard shortcuts (${shortcut("/")})`,
+                "aria-haspopup": "dialog",
+                "aria-expanded": helpOpen,
+                "data-dxw-help-trigger": "",
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => setHelpOpen(true),
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  color: T.fg,
+                  font: "600 12.5px system-ui, sans-serif",
+                  padding: "5px 10px",
+                  borderRadius: 6,
+                  cursor: "pointer"
+                },
+                children: "Help"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(Sep, {})
         ] }),
         (mode === "simple" || tab === "home") && renderHome(),
-        mode === "advanced" && tab === "insert" && /* @__PURE__ */ jsxs(Fragment2, { children: [
-          on("coverPage") && /* @__PURE__ */ jsx(CoverPageMenu, { api }),
-          on("table") && /* @__PURE__ */ jsx(TableMenu, { api }),
-          on("image") && /* @__PURE__ */ jsx(Btn, { label: /* @__PURE__ */ jsx(ImageIcon, {}), title: "Insert image", onClick: () => imageInput.current?.click() }),
-          on("icon") && /* @__PURE__ */ jsx(Btn, { label: "Icons", title: "Insert SVG icon", onClick: () => iconInput.current?.click() }),
-          on("screenshot") && /* @__PURE__ */ jsx(ScreenshotButton, { api }),
-          tier === 0 ? /* @__PURE__ */ jsxs(Fragment2, { children: [
-            on("model3D") && /* @__PURE__ */ jsx(Btn, { label: "3D Models", title: "Insert a GLB 3D model", onClick: () => modelInput.current?.click() }),
-            on("smartArt") && /* @__PURE__ */ jsx(SmartArtMenu, { api }),
-            on("chart") && /* @__PURE__ */ jsx(ChartMenu, { api }),
-            on("media") && /* @__PURE__ */ jsx(MediaMenu, { api }),
-            on("shape") && /* @__PURE__ */ jsx(ShapeMenu, { api }),
-            on("textBox") && /* @__PURE__ */ jsx(TextBoxMenu, { api }),
-            on("wordArt") && /* @__PURE__ */ jsx(WordArtMenu, { api }),
-            on("link") && /* @__PURE__ */ jsx(LinkMenu, { api }),
-            on("comment") && /* @__PURE__ */ jsx(CommentMenu, { api }),
-            on("footnote") && /* @__PURE__ */ jsx(FootnoteMenu, { api }),
-            on("bookmark") && /* @__PURE__ */ jsx(BookmarkMenu, { api }),
-            on("crossReference") && /* @__PURE__ */ jsx(CrossReferenceMenu, { api }),
-            on("headerFooter") && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx(Btn, { label: "Header", title: "Edit header", onClick: () => api?.openHeaderFooter("header") }),
-              /* @__PURE__ */ jsx(Btn, { label: "Footer", title: "Edit footer", onClick: () => api?.openHeaderFooter("footer") })
+        mode === "advanced" && tab === "insert" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          on("coverPage") && /* @__PURE__ */ jsx2(CoverPageMenu, { api }),
+          on("table") && /* @__PURE__ */ jsx2(TableMenu, { api }),
+          on("image") && /* @__PURE__ */ jsx2(Btn, { label: /* @__PURE__ */ jsx2(ImageIcon, {}), title: "Insert image", onClick: () => imageInput.current?.click() }),
+          on("icon") && /* @__PURE__ */ jsx2(Btn, { label: "Icons", title: "Insert SVG icon", onClick: () => iconInput.current?.click() }),
+          on("screenshot") && /* @__PURE__ */ jsx2(ScreenshotButton, { api }),
+          tier === 0 ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            on("model3D") && /* @__PURE__ */ jsx2(Btn, { label: "3D Models", title: "Insert a GLB 3D model", onClick: () => modelInput.current?.click() }),
+            on("smartArt") && /* @__PURE__ */ jsx2(SmartArtMenu, { api }),
+            on("chart") && /* @__PURE__ */ jsx2(ChartMenu, { api }),
+            on("media") && /* @__PURE__ */ jsx2(MediaMenu, { api }),
+            on("shape") && /* @__PURE__ */ jsx2(ShapeMenu, { api }),
+            on("textBox") && /* @__PURE__ */ jsx2(TextBoxMenu, { api }),
+            on("wordArt") && /* @__PURE__ */ jsx2(WordArtMenu, { api }),
+            on("link") && /* @__PURE__ */ jsx2(LinkMenu, { api }),
+            on("comment") && /* @__PURE__ */ jsx2(CommentMenu, { api }),
+            on("footnote") && /* @__PURE__ */ jsx2(FootnoteMenu, { api }),
+            on("bookmark") && /* @__PURE__ */ jsx2(BookmarkMenu, { api }),
+            on("crossReference") && /* @__PURE__ */ jsx2(CrossReferenceMenu, { api }),
+            on("headerFooter") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2(Btn, { label: "Header", title: "Edit header", onClick: () => api?.openHeaderFooter("header") }),
+              /* @__PURE__ */ jsx2(Btn, { label: "Footer", title: "Edit footer", onClick: () => api?.openHeaderFooter("footer") })
             ] }),
-            /* @__PURE__ */ jsx(Sep, {}),
-            on("pageNumber") && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(Sep, {}),
+            on("pageNumber") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Page number",
@@ -31641,9 +32711,9 @@ function DocxToolbar({
                 }
               }
             ),
-            on("break") && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx(Btn, { label: "Blank page", title: "Insert blank page", onClick: () => api?.insertBlankPage() }),
-              /* @__PURE__ */ jsx(
+            on("break") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2(Btn, { label: "Blank page", title: "Insert blank page", onClick: () => api?.insertBlankPage() }),
+              /* @__PURE__ */ jsx2(
                 ActionMenu,
                 {
                   label: "Break",
@@ -31662,7 +32732,7 @@ function DocxToolbar({
                 }
               )
             ] }),
-            on("dateTime") && /* @__PURE__ */ jsx(
+            on("dateTime") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Date & time",
@@ -31681,7 +32751,7 @@ function DocxToolbar({
                 }
               }
             ),
-            on("field") && /* @__PURE__ */ jsx(
+            on("field") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Field",
@@ -31691,9 +32761,9 @@ function DocxToolbar({
                 onPick: (value) => api?.insertField(`${value} \\* MERGEFORMAT`)
               }
             ),
-            on("equation") && /* @__PURE__ */ jsx(EquationMenu, { api }),
-            on("symbol") && /* @__PURE__ */ jsx(SymbolMenu, { api }),
-            on("dropCap") && /* @__PURE__ */ jsx(
+            on("equation") && /* @__PURE__ */ jsx2(EquationMenu, { api }),
+            on("symbol") && /* @__PURE__ */ jsx2(SymbolMenu, { api }),
+            on("dropCap") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Drop cap",
@@ -31703,25 +32773,25 @@ function DocxToolbar({
                 onPick: (value) => api?.setDropCap(value === "none" ? null : value)
               }
             ),
-            on("object") && /* @__PURE__ */ jsx(Btn, { label: "Object", title: "Embed a file in this document", onClick: () => objectInput.current?.click() })
-          ] }) : /* @__PURE__ */ jsxs(OverflowMenu, { children: [
-            on("model3D") && /* @__PURE__ */ jsx(Btn, { label: "3D Models", title: "Insert a GLB 3D model", onClick: () => modelInput.current?.click() }),
-            on("smartArt") && /* @__PURE__ */ jsx(SmartArtMenu, { api }),
-            on("chart") && /* @__PURE__ */ jsx(ChartMenu, { api }),
-            on("media") && /* @__PURE__ */ jsx(MediaMenu, { api }),
-            on("shape") && /* @__PURE__ */ jsx(ShapeMenu, { api }),
-            on("textBox") && /* @__PURE__ */ jsx(TextBoxMenu, { api }),
-            on("wordArt") && /* @__PURE__ */ jsx(WordArtMenu, { api }),
-            on("link") && /* @__PURE__ */ jsx(LinkMenu, { api }),
-            on("comment") && /* @__PURE__ */ jsx(CommentMenu, { api }),
-            on("footnote") && /* @__PURE__ */ jsx(FootnoteMenu, { api }),
-            on("bookmark") && /* @__PURE__ */ jsx(BookmarkMenu, { api }),
-            on("crossReference") && /* @__PURE__ */ jsx(CrossReferenceMenu, { api }),
-            on("headerFooter") && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx(Btn, { label: "Header", title: "Edit header", onClick: () => api?.openHeaderFooter("header") }),
-              /* @__PURE__ */ jsx(Btn, { label: "Footer", title: "Edit footer", onClick: () => api?.openHeaderFooter("footer") })
+            on("object") && /* @__PURE__ */ jsx2(Btn, { label: "Object", title: "Embed a file in this document", onClick: () => objectInput.current?.click() })
+          ] }) : /* @__PURE__ */ jsxs2(OverflowMenu, { children: [
+            on("model3D") && /* @__PURE__ */ jsx2(Btn, { label: "3D Models", title: "Insert a GLB 3D model", onClick: () => modelInput.current?.click() }),
+            on("smartArt") && /* @__PURE__ */ jsx2(SmartArtMenu, { api }),
+            on("chart") && /* @__PURE__ */ jsx2(ChartMenu, { api }),
+            on("media") && /* @__PURE__ */ jsx2(MediaMenu, { api }),
+            on("shape") && /* @__PURE__ */ jsx2(ShapeMenu, { api }),
+            on("textBox") && /* @__PURE__ */ jsx2(TextBoxMenu, { api }),
+            on("wordArt") && /* @__PURE__ */ jsx2(WordArtMenu, { api }),
+            on("link") && /* @__PURE__ */ jsx2(LinkMenu, { api }),
+            on("comment") && /* @__PURE__ */ jsx2(CommentMenu, { api }),
+            on("footnote") && /* @__PURE__ */ jsx2(FootnoteMenu, { api }),
+            on("bookmark") && /* @__PURE__ */ jsx2(BookmarkMenu, { api }),
+            on("crossReference") && /* @__PURE__ */ jsx2(CrossReferenceMenu, { api }),
+            on("headerFooter") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2(Btn, { label: "Header", title: "Edit header", onClick: () => api?.openHeaderFooter("header") }),
+              /* @__PURE__ */ jsx2(Btn, { label: "Footer", title: "Edit footer", onClick: () => api?.openHeaderFooter("footer") })
             ] }),
-            on("pageNumber") && /* @__PURE__ */ jsx(
+            on("pageNumber") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Page number",
@@ -31734,9 +32804,9 @@ function DocxToolbar({
                 }
               }
             ),
-            on("break") && /* @__PURE__ */ jsxs(Fragment2, { children: [
-              /* @__PURE__ */ jsx(Btn, { label: "Blank page", title: "Insert blank page", onClick: () => api?.insertBlankPage() }),
-              /* @__PURE__ */ jsx(
+            on("break") && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2(Btn, { label: "Blank page", title: "Insert blank page", onClick: () => api?.insertBlankPage() }),
+              /* @__PURE__ */ jsx2(
                 ActionMenu,
                 {
                   label: "Break",
@@ -31755,7 +32825,7 @@ function DocxToolbar({
                 }
               )
             ] }),
-            on("dateTime") && /* @__PURE__ */ jsx(
+            on("dateTime") && /* @__PURE__ */ jsx2(
               ActionMenu,
               {
                 label: "Date & time",
@@ -31774,15 +32844,15 @@ function DocxToolbar({
                 }
               }
             ),
-            on("field") && /* @__PURE__ */ jsx(ActionMenu, { label: "Field", title: "Insert a Word field", width: 68, groups: [{ items: [["PAGE", "Current page"], ["NUMPAGES", "Number of pages"], ["DATE", "Current date"], ["TIME", "Current time"]] }], onPick: (value) => api?.insertField(`${value} \\* MERGEFORMAT`) }),
-            on("equation") && /* @__PURE__ */ jsx(EquationMenu, { api }),
-            on("symbol") && /* @__PURE__ */ jsx(SymbolMenu, { api }),
-            on("dropCap") && /* @__PURE__ */ jsx(ActionMenu, { label: "Drop cap", title: "Drop cap", width: 84, groups: [{ items: [["drop", "Dropped"], ["margin", "In margin"], ["none", "None"]] }], onPick: (value) => api?.setDropCap(value === "none" ? null : value) }),
-            on("object") && /* @__PURE__ */ jsx(Btn, { label: "Object", title: "Embed a file in this document", onClick: () => objectInput.current?.click() })
+            on("field") && /* @__PURE__ */ jsx2(ActionMenu, { label: "Field", title: "Insert a Word field", width: 68, groups: [{ items: [["PAGE", "Current page"], ["NUMPAGES", "Number of pages"], ["DATE", "Current date"], ["TIME", "Current time"]] }], onPick: (value) => api?.insertField(`${value} \\* MERGEFORMAT`) }),
+            on("equation") && /* @__PURE__ */ jsx2(EquationMenu, { api }),
+            on("symbol") && /* @__PURE__ */ jsx2(SymbolMenu, { api }),
+            on("dropCap") && /* @__PURE__ */ jsx2(ActionMenu, { label: "Drop cap", title: "Drop cap", width: 84, groups: [{ items: [["drop", "Dropped"], ["margin", "In margin"], ["none", "None"]] }], onPick: (value) => api?.setDropCap(value === "none" ? null : value) }),
+            on("object") && /* @__PURE__ */ jsx2(Btn, { label: "Object", title: "Embed a file in this document", onClick: () => objectInput.current?.click() })
           ] })
         ] }),
-        mode === "advanced" && tab === "draw" && on("drawing") && /* @__PURE__ */ jsx(DrawTab, { api }),
-        /* @__PURE__ */ jsx(
+        mode === "advanced" && tab === "draw" && on("drawing") && /* @__PURE__ */ jsx2(DrawTab, { api }),
+        /* @__PURE__ */ jsx2(
           "input",
           {
             ref: imageInput,
@@ -31796,7 +32866,7 @@ function DocxToolbar({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "input",
           {
             ref: iconInput,
@@ -31810,7 +32880,7 @@ function DocxToolbar({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "input",
           {
             ref: modelInput,
@@ -31825,7 +32895,7 @@ function DocxToolbar({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "input",
           {
             ref: objectInput,
@@ -31839,18 +32909,20 @@ function DocxToolbar({
             }
           }
         ),
-        mode === "advanced" && tab === "layout" && on("layout") && /* @__PURE__ */ jsx(LayoutTab, { api, showArrange: on("arrange") }),
-        on("download") && onSave && /* @__PURE__ */ jsxs(Fragment2, { children: [
-          /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
-          /* @__PURE__ */ jsx(Btn, { label: "Download", title: "Save edited .docx", onClick: () => api && onSave(api.save()) })
-        ] })
+        mode === "advanced" && tab === "layout" && on("layout") && /* @__PURE__ */ jsx2(LayoutTab, { api, showArrange: on("arrange") }),
+        mode === "simple" && on("help") && /* @__PURE__ */ jsx2("span", { style: { marginLeft: "auto" }, children: /* @__PURE__ */ jsx2(Btn, { buttonRef: helpTrigger, label: "Help", title: `Help and keyboard shortcuts (${shortcut("/")})`, onClick: () => setHelpOpen(true) }) }),
+        on("download") && onSave && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx2(Btn, { label: "Download", title: "Save edited .docx", onClick: () => api && onSave(api.save()) })
+        ] }),
+        /* @__PURE__ */ jsx2(HelpGuide, { open: helpOpen, onClose: closeHelp, returnFocus: helpTrigger })
       ]
     }
   );
 }
 
 // src/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 async function objectPoster(title, subtitle, glyph) {
   const canvas = document.createElement("canvas");
   canvas.width = 640;
@@ -31894,6 +32966,7 @@ function DocxView({
   className,
   style,
   onLoad,
+  onPageCountChange,
   onReady,
   onError,
   commentAuthor = "You",
@@ -31901,17 +32974,19 @@ function DocxView({
   revisions = "final",
   onMissingFonts
 }) {
-  const containerRef = useRef2(null);
-  const [error, setError] = useState2(null);
-  const [layoutBusy, setLayoutBusy] = useState2(false);
-  const [fitZoom, setFitZoom] = useState2(null);
-  const [narrow, setNarrow] = useState2(false);
-  const basePageWidthRef = useRef2(816);
+  const containerRef = useRef3(null);
+  const [error, setError] = useState3(null);
+  const [layoutBusy, setLayoutBusy] = useState3(false);
+  const [fitZoom, setFitZoom] = useState3(null);
+  const [narrow, setNarrow] = useState3(false);
+  const basePageWidthRef = useRef3(816);
   const effectiveZoom = fitWidth && fitZoom != null ? Math.min(zoom, fitZoom) : zoom;
-  const effZoomRef = useRef2(effectiveZoom);
+  const effZoomRef = useRef3(effectiveZoom);
   effZoomRef.current = effectiveZoom;
-  const applyZoomRef = useRef2(null);
-  useEffect2(() => {
+  const applyZoomRef = useRef3(null);
+  const onPageCountChangeRef = useRef3(onPageCountChange);
+  onPageCountChangeRef.current = onPageCountChange;
+  useEffect3(() => {
     if (editable && typeof window !== "undefined" && !customElements.get("model-viewer")) {
       void import("@google/model-viewer");
     }
@@ -31925,7 +33000,7 @@ function DocxView({
     setFitZoom((cw - gutter) / basePageWidthRef.current);
     setNarrow(cw <= narrowWidth);
   }, [narrowWidth]);
-  useEffect2(() => {
+  useEffect3(() => {
     const c = containerRef.current;
     if (!c || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver(() => recomputeFit());
@@ -31933,13 +33008,13 @@ function DocxView({
     recomputeFit();
     return () => ro.disconnect();
   }, [recomputeFit]);
-  useEffect2(() => {
+  useEffect3(() => {
     applyZoomRef.current?.(effectiveZoom);
   }, [effectiveZoom]);
-  useEffect2(() => {
+  useEffect3(() => {
     containerRef.current?.classList.toggle("dxw-narrow", narrow);
   }, [narrow]);
-  useEffect2(() => {
+  useEffect3(() => {
     const c = containerRef.current;
     if (!c) return;
     const onTap = (e) => {
@@ -31959,17 +33034,17 @@ function DocxView({
     c.addEventListener("click", onTap);
     return () => c.removeEventListener("click", onTap);
   }, []);
-  const [hfMode, setHfMode] = useState2(false);
-  const apiRef = useRef2(null);
-  const docCacheRef = useRef2(null);
-  useEffect2(() => {
+  const [hfMode, setHfMode] = useState3(false);
+  const apiRef = useRef3(null);
+  const docCacheRef = useRef3(null);
+  useEffect3(() => {
     const c = containerRef.current;
     if (!c) return;
     const onHf = (e) => setHfMode(!!e.detail?.active);
     c.addEventListener("dxw-hfmode", onHf);
     return () => c.removeEventListener("dxw-hfmode", onHf);
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     let cancelled = false;
     let handle = null;
     let editor = null;
@@ -32033,6 +33108,7 @@ function DocxView({
           totalPages: layout.totalPages
         };
       }
+      if (pages !== layout.totalPages) onPageCountChangeRef.current?.(layout.totalPages);
       pages = layout.totalPages;
       return layout.totalPages;
     };
@@ -32446,6 +33522,7 @@ function DocxView({
           setDrawingTool: (tool) => editor?.setDrawingTool(tool),
           getDrawingTool: () => editor?.getDrawingTool() ?? null,
           arrangeObject: (action) => editor?.arrangeSelectedObject(action) ?? false,
+          hasSelectedObject: () => editor?.hasSelectedObject() ?? false,
           addComment: (text) => {
             const segs = editor?.getSelectionSegments() ?? [];
             const segments = segs.length > 0 ? segs : handle ? selectionToSegments(handle.bindings) : [];
@@ -32561,7 +33638,7 @@ function DocxView({
             history.checkpoint();
             const done = kind === "page" || kind === "column" ? insertBreakAt(doc, target.t, target.offset, kind) : insertSectionBreak(doc, target.t, kind === "sectionNextPage" ? "nextPage" : "continuous");
             if (done) pages = rerender(doc);
-            return done;
+            return !!done;
           },
           insertBlankPage: () => {
             const target = insertionTarget();
@@ -32586,6 +33663,10 @@ function DocxView({
             }
             if (setPageLayout(doc, patch, target)) pages = rerender(doc);
           },
+          getSectionContext: () => {
+            const t = editor?.getCaretTarget()?.t ?? editor?.getSelectionSegments()?.[0]?.t;
+            return t ? sectionContextAt(doc, t) : null;
+          },
           setLineNumbering: (patch, scope) => {
             history.checkpoint();
             let target;
@@ -32779,7 +33860,7 @@ function DocxView({
       handle = null;
     };
   }, [source, editable, commentAuthor, showComments, revisions]);
-  const hotBtn = (label, title, onClick) => /* @__PURE__ */ jsx2(
+  const hotBtn = (label, title, onClick) => /* @__PURE__ */ jsx3(
     "button",
     {
       title,
@@ -32798,71 +33879,105 @@ function DocxView({
       children: label
     }
   );
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", ...style?.height ? { height: style.height } : {} }, children: [
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        ref: containerRef,
-        className,
-        style: { background: "var(--dxw-canvas-bg, #e8eaed)", overflow: "auto", height: "100%", ...style },
-        children: error && /* @__PURE__ */ jsxs2("div", { style: { padding: 16, color: "#b00020", fontFamily: "system-ui" }, children: [
-          "Failed to render document: ",
-          error.message
-        ] })
-      }
-    ),
-    layoutBusy && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-dxw-layout-status": "",
-        "aria-live": "polite",
-        style: {
-          position: "absolute",
-          top: 10,
-          right: 12,
-          zIndex: 45,
-          padding: "5px 10px",
-          borderRadius: 14,
-          background: "rgba(32,33,36,.88)",
-          color: "#fff",
-          font: "12px system-ui,sans-serif",
-          pointerEvents: "none"
-        },
-        children: "Repaginating\u2026"
-      }
-    ),
-    editable && hfMode && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        "data-dxw-hf-hotbar": "",
-        style: {
-          position: "absolute",
-          top: 10,
-          left: "50%",
-          transform: "translateX(-50%)",
-          display: "flex",
-          gap: 6,
-          zIndex: 40,
-          background: "rgba(249,251,253,.96)",
-          border: "1px solid #dadce0",
-          borderRadius: 18,
-          padding: "5px 8px",
-          boxShadow: "0 2px 10px rgba(0,0,0,.15)",
-          alignItems: "center"
-        },
-        children: [
-          /* @__PURE__ */ jsx2("span", { style: { font: "600 11.5px system-ui, sans-serif", color: "#5f6368", padding: "0 4px" }, children: "Header & footer \xB7 repeats on pages" }),
-          hotBtn("Line", "Insert a reusable line in the repeating page layer", () => apiRef.current?.insertShape("line")),
-          hotBtn("Page number", "Insert a dynamic page number at the caret", () => apiRef.current?.insertPageNumber("page")),
-          hotBtn("Page X of Y", "Insert 'Page X of Y' at the caret", () => apiRef.current?.insertPageNumber("pageOfTotal")),
-          hotBtn("Close", "Return to the document body", () => {
-            apiRef.current?.closeHeaderFooter();
-            setHfMode(false);
-          })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        ...style?.height ? { height: style.height } : {}
+      },
+      children: [
+        editable && hfMode && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-dxw-editor-context-row": "",
+            style: {
+              flex: "0 0 52px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "var(--dxw-canvas-bg, #e8eaed)",
+              position: "relative",
+              zIndex: 40,
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                "data-dxw-hf-hotbar": "",
+                style: {
+                  display: "flex",
+                  gap: 6,
+                  background: "rgba(249,251,253,.96)",
+                  border: "1px solid #dadce0",
+                  borderRadius: 18,
+                  padding: "5px 8px",
+                  boxShadow: "0 2px 10px rgba(0,0,0,.15)",
+                  alignItems: "center",
+                  pointerEvents: "auto"
+                },
+                children: [
+                  /* @__PURE__ */ jsx3("span", { style: { font: "600 11.5px system-ui, sans-serif", color: "#5f6368", padding: "0 4px" }, children: "Header & footer \xB7 repeats on pages" }),
+                  hotBtn("Page number", "Insert a dynamic page number at the caret", () => apiRef.current?.insertPageNumber("page")),
+                  hotBtn("Page X of Y", "Insert 'Page X of Y' at the caret", () => apiRef.current?.insertPageNumber("pageOfTotal")),
+                  hotBtn("Close", "Return to the document body", () => {
+                    apiRef.current?.closeHeaderFooter();
+                    setHfMode(false);
+                  })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: containerRef,
+            className,
+            style: {
+              background: "var(--dxw-canvas-bg, #e8eaed)",
+              overflow: "auto",
+              height: "100%",
+              ...style,
+              ...editable ? {
+                height: "auto",
+                flex: "1 1 auto",
+                minHeight: 0,
+                boxSizing: "border-box"
+              } : {}
+            },
+            children: error && /* @__PURE__ */ jsxs3("div", { style: { padding: 16, color: "#b00020", fontFamily: "system-ui" }, children: [
+              "Failed to render document: ",
+              error.message
+            ] })
+          }
+        ),
+        layoutBusy && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            "data-dxw-layout-status": "",
+            "aria-live": "polite",
+            style: {
+              position: "absolute",
+              top: editable ? 62 : 10,
+              right: 12,
+              zIndex: 45,
+              padding: "5px 10px",
+              borderRadius: 14,
+              background: "rgba(32,33,36,.88)",
+              color: "#fff",
+              font: "12px system-ui,sans-serif",
+              pointerEvents: "none"
+            },
+            children: "Repaginating\u2026"
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   DocxDocument,