@tangle-network/agent-app 0.42.4 → 0.42.6

package/dist/{chunk-YEWTVDDT.js → chunk-OVUQNKLM.js}

@@ -24,6 +24,14 @@ import {
 // src/design-canvas-react/components/DesignCanvas.tsx
 import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef5, useState as useState5, useSyncExternalStore } from "react";
 
+// src/design-canvas-react/components/BrandKnot.tsx
+import { lazy, Suspense } from "react";
+import { jsx } from "react/jsx-runtime";
+var LazyKnot = lazy(() => import("./brand/index.js").then((m) => ({ default: m.TangleKnot })));
+function BrandKnot({ size = 24, className }) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { display: "inline-block", width: size, height: size }, className }), children: /* @__PURE__ */ jsx(LazyKnot, { size, className }) });
+}
+
 // src/design-canvas-react/components/ruler-math.ts
 var TICK_STEP_CANDIDATES_PX = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1e3, 2500, 5e3];
 function selectTickStep(input) {
@@ -89,7 +97,7 @@ function clampIndex(target, ownerLength) {
 }
 
 // src/design-canvas-react/components/BleedTrimOverlay.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var TRIM_MARK_PX = 12;
 var TRIM_MARK_OFFSET_PX = 4;
 function BleedTrimOverlay({ pageWidthPx, pageHeightPx, bleed }) {
@@ -108,38 +116,38 @@ function BleedTrimOverlay({ pageWidthPx, pageHeightPx, bleed }) {
       },
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             className: "absolute bg-rose-500/10",
             style: { top: 0, left: 0, width: totalW, height: bleed.top }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             className: "absolute bg-rose-500/10",
             style: { bottom: 0, left: 0, width: totalW, height: bleed.bottom }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             className: "absolute bg-rose-500/10",
             style: { top: bleed.top, left: 0, width: bleed.left, height: pageHeightPx }
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
             className: "absolute bg-rose-500/10",
             style: { top: bleed.top, right: 0, width: bleed.right, height: pageHeightPx }
           }
         ),
-        /* @__PURE__ */ jsx(TrimMark, { corner: "tl", bleed }),
-        /* @__PURE__ */ jsx(TrimMark, { corner: "tr", bleed, pageWidthPx }),
-        /* @__PURE__ */ jsx(TrimMark, { corner: "bl", bleed, pageHeightPx }),
-        /* @__PURE__ */ jsx(TrimMark, { corner: "br", bleed, pageWidthPx, pageHeightPx })
+        /* @__PURE__ */ jsx2(TrimMark, { corner: "tl", bleed }),
+        /* @__PURE__ */ jsx2(TrimMark, { corner: "tr", bleed, pageWidthPx }),
+        /* @__PURE__ */ jsx2(TrimMark, { corner: "bl", bleed, pageHeightPx }),
+        /* @__PURE__ */ jsx2(TrimMark, { corner: "br", bleed, pageWidthPx, pageHeightPx })
       ]
     }
   );
@@ -154,14 +162,14 @@ function TrimMark({ corner, bleed, pageWidthPx = 0, pageHeightPx = 0 }) {
   const vX = xBase - 0.5;
   const vY = isBottom ? yBase + TRIM_MARK_OFFSET_PX : yBase - TRIM_MARK_OFFSET_PX - TRIM_MARK_PX;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         className: "absolute bg-[var(--text-muted)]",
         style: { left: hX, top: hY, width: TRIM_MARK_PX, height: 1 }
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         className: "absolute bg-[var(--text-muted)]",
@@ -175,10 +183,10 @@ function TrimMark({ corner, bleed, pageWidthPx = 0, pageHeightPx = 0 }) {
 import { useEffect, useRef, useState } from "react";
 
 // src/design-canvas-react/components/glyphs.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function glyph(paths) {
   return function Glyph({ className }) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       "svg",
       {
         className,
@@ -194,147 +202,147 @@ function glyph(paths) {
     );
   };
 }
-var UndoGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M3 7v6h6M3 13a9 9 0 1 0 3-7.7" }));
-var RedoGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M21 7v6h-6M21 13a9 9 0 1 1-3-7.7" }));
-var SwapGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7" }));
+var UndoGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M3 7v6h6M3 13a9 9 0 1 0 3-7.7" }));
+var RedoGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M21 7v6h-6M21 13a9 9 0 1 1-3-7.7" }));
+var SwapGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7" }));
 var EyeGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+    /* @__PURE__ */ jsx3("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" })
   ] })
 );
 var EyeOffGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
-    /* @__PURE__ */ jsx2("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
-    /* @__PURE__ */ jsx2("path", { d: "m1 1 22 22" })
+    /* @__PURE__ */ jsx3("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+    /* @__PURE__ */ jsx3("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+    /* @__PURE__ */ jsx3("path", { d: "m1 1 22 22" })
   ] })
 );
 var LockGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+    /* @__PURE__ */ jsx3("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
   ] })
 );
 var UnlockGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M8 11V7a4 4 0 1 1 8 0" })
+    /* @__PURE__ */ jsx3("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M8 11V7a4 4 0 1 1 8 0" })
   ] })
 );
 var TrashGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6h18M19 6l-1 14H6L5 6M10 6V4h4v2" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M3 6h18M19 6l-1 14H6L5 6M10 6V4h4v2" }) })
 );
 var GroupGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "14", y: "2", width: "8", height: "8", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "2", y: "14", width: "8", height: "8", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "14", y: "14", width: "8", height: "8", rx: "1" })
+    /* @__PURE__ */ jsx3("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx3("rect", { x: "14", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx3("rect", { x: "2", y: "14", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx3("rect", { x: "14", y: "14", width: "8", height: "8", rx: "1" })
   ] })
 );
 var UngroupGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }) })
 );
 var BringFrontGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "8", y: "8", width: "12", height: "12", rx: "1" }),
-    /* @__PURE__ */ jsx2("path", { d: "M4 4h12v4H4z", opacity: ".4" })
+    /* @__PURE__ */ jsx3("rect", { x: "8", y: "8", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ jsx3("path", { d: "M4 4h12v4H4z", opacity: ".4" })
   ] })
 );
 var SendBackGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "12", height: "12", rx: "1", opacity: ".4" }),
-    /* @__PURE__ */ jsx2("path", { d: "M8 8h12v12H8z" })
+    /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "12", height: "12", rx: "1", opacity: ".4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M8 8h12v12H8z" })
   ] })
 );
 var AlignLeftGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 4v16M7 8h10M7 16h6" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M3 4v16M7 8h10M7 16h6" }) })
 );
 var AlignCenterGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M12 4v16M7 8h10M9 16h6" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M12 4v16M7 8h10M9 16h6" }) })
 );
 var AlignRightGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M21 4v16M7 8h10M11 16h6" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M21 4v16M7 8h10M11 16h6" }) })
 );
-var BoldGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z", fill: "currentColor", stroke: "none" }));
-var ItalicGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M11 4h6M7 20h6M14 4 8 20" }));
-var PlusGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M12 5v14M5 12h14" }));
-var ChevronDownGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }));
-var RectGlyph = glyph(/* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }));
-var EllipseGlyph = glyph(/* @__PURE__ */ jsx2("ellipse", { cx: "12", cy: "12", rx: "10", ry: "7" }));
-var LineGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M5 19 19 5" }));
-var TextGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }));
+var BoldGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z", fill: "currentColor", stroke: "none" }));
+var ItalicGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M11 4h6M7 20h6M14 4 8 20" }));
+var PlusGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" }));
+var ChevronDownGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }));
+var RectGlyph = glyph(/* @__PURE__ */ jsx3("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }));
+var EllipseGlyph = glyph(/* @__PURE__ */ jsx3("ellipse", { cx: "12", cy: "12", rx: "10", ry: "7" }));
+var LineGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M5 19 19 5" }));
+var TextGlyph = glyph(/* @__PURE__ */ jsx3("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }));
 var ImageGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+    /* @__PURE__ */ jsx3("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
   ] })
 );
 var VideoGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "m10 8 6 4-6 4z", fill: "currentColor", stroke: "none" })
+    /* @__PURE__ */ jsx3("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "m10 8 6 4-6 4z", fill: "currentColor", stroke: "none" })
   ] })
 );
 var SlotGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx2("path", { d: "M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8l2.8-2.8M17 7 19.8 4.2" })
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8l2.8-2.8M17 7 19.8 4.2" })
   ] })
 );
 var PageGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-    /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" })
+    /* @__PURE__ */ jsx3("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx3("polyline", { points: "14 2 14 8 20 8" })
   ] })
 );
 var GridGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18" }) })
 );
 var RulerGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "M1 9v6l12 6V9L1 3z" }),
-    /* @__PURE__ */ jsx2("path", { d: "m13 15 9-4.5V4.5L13 9" }),
-    /* @__PURE__ */ jsx2("path", { d: "M5 12v3M8 13.5v2.5M11 15v3" })
+    /* @__PURE__ */ jsx3("path", { d: "M1 9v6l12 6V9L1 3z" }),
+    /* @__PURE__ */ jsx3("path", { d: "m13 15 9-4.5V4.5L13 9" }),
+    /* @__PURE__ */ jsx3("path", { d: "M5 12v3M8 13.5v2.5M11 15v3" })
   ] })
 );
 var MagnetGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3z" }),
-    /* @__PURE__ */ jsx2("path", { d: "m5 8 4 4M12 15l4 4" })
+    /* @__PURE__ */ jsx3("path", { d: "m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx3("path", { d: "m5 8 4 4M12 15l4 4" })
   ] })
 );
 var BleedGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "16", height: "16", strokeDasharray: "3 2" }),
-    /* @__PURE__ */ jsx2("rect", { x: "7", y: "7", width: "10", height: "10" })
+    /* @__PURE__ */ jsx3("rect", { x: "4", y: "4", width: "16", height: "16", strokeDasharray: "3 2" }),
+    /* @__PURE__ */ jsx3("rect", { x: "7", y: "7", width: "10", height: "10" })
   ] })
 );
 var DuplicateGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "M4 16V4a2 2 0 0 1 2-2h12" })
+    /* @__PURE__ */ jsx3("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M4 16V4a2 2 0 0 1 2-2h12" })
   ] })
 );
 var ZoomFitGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" }) })
 );
 var ExportGlyph = glyph(
-  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" }) })
+  /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" }) })
 );
 var ShapesGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "13", width: "8", height: "8", rx: "1" }),
-    /* @__PURE__ */ jsx2("circle", { cx: "17", cy: "17", r: "4" }),
-    /* @__PURE__ */ jsx2("path", { d: "M8.5 3 13 11H4z" })
+    /* @__PURE__ */ jsx3("rect", { x: "3", y: "13", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "17", cy: "17", r: "4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M8.5 3 13 11H4z" })
   ] })
 );
 
 // src/design-canvas-react/components/icon-button.tsx
 import { forwardRef } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var BTN_BASE = "items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)] disabled:cursor-default disabled:opacity-40";
 var BTN_ACTIVE_EXTRA = " border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]";
 var BTN = `flex h-7 w-7 ${BTN_BASE}`;
@@ -343,11 +351,11 @@ var BTN_SM = `flex h-6 w-6 ${BTN_BASE}`;
 var BTN_SM_ACTIVE = BTN_SM + BTN_ACTIVE_EXTRA;
 var IconButton = forwardRef(function IconButton2({ active = false, size = "md", className = "", type = "button", ...rest }, ref) {
   const base = size === "sm" ? active ? BTN_SM_ACTIVE : BTN_SM : active ? BTN_ACTIVE : BTN;
-  return /* @__PURE__ */ jsx3("button", { ref, type, className: className ? `${base} ${className}` : base, ...rest });
+  return /* @__PURE__ */ jsx4("button", { ref, type, className: className ? `${base} ${className}` : base, ...rest });
 });
 
 // src/design-canvas-react/components/PagesStrip.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var THUMBNAIL_W = 80;
 var THUMBNAIL_H = 56;
 function PagesStrip({
@@ -360,7 +368,8 @@ function PagesStrip({
   onDuplicatePage,
   onDeletePage,
   onReorderPage,
-  canManagePages = true
+  canManagePages = true,
+  label = "Pages"
 }) {
   const [thumbnails, setThumbnails] = useState({});
   const thumbnailVersionRef = useRef(0);
@@ -388,143 +397,149 @@ function PagesStrip({
   }, [pages]);
   const dragIndexRef = useRef(null);
   const [dragOverIndex, setDragOverIndex] = useState(null);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: "flex h-[84px] shrink-0 items-center gap-2 overflow-x-auto border-t border-[var(--border-default)] bg-[var(--bg-input)] px-2",
-      "aria-label": "Pages",
-      children: [
-        pages.map((page, index) => {
-          const isActive = page.id === activePageId;
-          const thumbUrl = thumbnails[page.id];
-          return /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              draggable: canWrite,
-              onDragStart: () => {
-                dragIndexRef.current = index;
-              },
-              onDragOver: (event) => {
-                if (dragIndexRef.current === null) return;
-                event.preventDefault();
-                setDragOverIndex(index);
-              },
-              onDragLeave: () => setDragOverIndex(null),
-              onDrop: () => {
-                const from = dragIndexRef.current;
-                if (from !== null && from !== index) {
-                  onReorderPage(pages[from].id, index);
-                }
-                dragIndexRef.current = null;
-                setDragOverIndex(null);
-              },
-              onDragEnd: () => {
-                dragIndexRef.current = null;
-                setDragOverIndex(null);
-              },
-              className: [
-                "group relative flex shrink-0 flex-col items-center gap-1 rounded p-1 transition",
-                isActive ? "ring-2 ring-[var(--brand-primary)]" : "hover:bg-[var(--border-default)]/40",
-                dragOverIndex === index ? "ring-1 ring-[var(--brand-primary)]/60" : ""
-              ].join(" "),
-              children: [
-                /* @__PURE__ */ jsxs3(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": `Page ${index + 1}: ${page.name}${isActive ? " (active)" : ""}`,
-                    "aria-pressed": isActive,
-                    onClick: () => onSelectPage(page.id),
-                    className: "flex cursor-pointer flex-col items-center gap-1 rounded focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
-                    children: [
-                      /* @__PURE__ */ jsx4(
-                        "div",
-                        {
-                          className: "overflow-hidden rounded border border-[var(--border-default)] bg-[hsl(var(--card))]",
-                          style: { width: THUMBNAIL_W, height: THUMBNAIL_H },
-                          children: thumbUrl ? /* @__PURE__ */ jsx4(
-                            "img",
-                            {
-                              src: thumbUrl,
-                              alt: page.name,
-                              className: "h-full w-full object-cover",
-                              draggable: false
-                            }
-                          ) : /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx4(PageGlyph, { className: "h-5 w-5 text-[var(--text-muted)]" }) })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx4("span", { className: "max-w-[80px] truncate text-[10px] text-[var(--text-secondary)]", children: page.name })
-                    ]
+  return /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 flex-col bg-[var(--bg-input)]", children: [
+    label ? /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5 px-3 pt-1.5 text-[var(--text-muted)]", children: [
+      /* @__PURE__ */ jsx5(PageGlyph, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsx5("span", { className: "text-[10px] font-medium uppercase tracking-[0.08em]", children: label })
+    ] }) : null,
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "flex h-[84px] items-center gap-2 overflow-x-auto px-2 pb-1",
+        "aria-label": "Pages",
+        children: [
+          pages.map((page, index) => {
+            const isActive = page.id === activePageId;
+            const thumbUrl = thumbnails[page.id];
+            return /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                draggable: canWrite,
+                onDragStart: () => {
+                  dragIndexRef.current = index;
+                },
+                onDragOver: (event) => {
+                  if (dragIndexRef.current === null) return;
+                  event.preventDefault();
+                  setDragOverIndex(index);
+                },
+                onDragLeave: () => setDragOverIndex(null),
+                onDrop: () => {
+                  const from = dragIndexRef.current;
+                  if (from !== null && from !== index) {
+                    onReorderPage(pages[from].id, index);
                   }
-                ),
-                canWrite && canManagePages ? /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none absolute -top-1 right-0 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100", children: [
-                  /* @__PURE__ */ jsx4(
+                  dragIndexRef.current = null;
+                  setDragOverIndex(null);
+                },
+                onDragEnd: () => {
+                  dragIndexRef.current = null;
+                  setDragOverIndex(null);
+                },
+                className: [
+                  "group relative flex shrink-0 flex-col items-center gap-1 rounded p-1 transition",
+                  isActive ? "ring-2 ring-[var(--brand-primary)]" : "hover:bg-[var(--border-default)]/40",
+                  dragOverIndex === index ? "ring-1 ring-[var(--brand-primary)]/60" : ""
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsxs3(
                     "button",
                     {
                       type: "button",
-                      "aria-label": `Duplicate page ${page.name}`,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        onDuplicatePage(page.id);
-                      },
-                      className: BTN_SM,
-                      children: /* @__PURE__ */ jsx4(DuplicateGlyph, { className: "h-3 w-3" })
+                      "aria-label": `Page ${index + 1}: ${page.name}${isActive ? " (active)" : ""}`,
+                      "aria-pressed": isActive,
+                      onClick: () => onSelectPage(page.id),
+                      className: "flex cursor-pointer flex-col items-center gap-1 rounded focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+                      children: [
+                        /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            className: "overflow-hidden rounded border border-[var(--border-default)] bg-[hsl(var(--card))]",
+                            style: { width: THUMBNAIL_W, height: THUMBNAIL_H },
+                            children: thumbUrl ? /* @__PURE__ */ jsx5(
+                              "img",
+                              {
+                                src: thumbUrl,
+                                alt: page.name,
+                                className: "h-full w-full object-cover",
+                                draggable: false
+                              }
+                            ) : /* @__PURE__ */ jsx5("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx5(PageGlyph, { className: "h-5 w-5 text-[var(--text-muted)]" }) })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx5("span", { className: "max-w-[80px] truncate text-[10px] text-[var(--text-secondary)]", children: page.name })
+                      ]
                     }
                   ),
-                  /* @__PURE__ */ jsx4(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": `Delete page ${page.name}`,
-                      disabled: pages.length <= 1,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        if (pages.length > 1) onDeletePage(page.id);
-                      },
-                      className: BTN_SM,
-                      children: /* @__PURE__ */ jsx4(TrashGlyph, { className: "h-3 w-3 text-[var(--text-danger)]" })
-                    }
-                  )
-                ] }) : null
+                  canWrite && canManagePages ? /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none absolute -top-1 right-0 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100", children: [
+                    /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Duplicate page ${page.name}`,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          onDuplicatePage(page.id);
+                        },
+                        className: BTN_SM,
+                        children: /* @__PURE__ */ jsx5(DuplicateGlyph, { className: "h-3 w-3" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Delete page ${page.name}`,
+                        disabled: pages.length <= 1,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          if (pages.length > 1) onDeletePage(page.id);
+                        },
+                        className: BTN_SM,
+                        children: /* @__PURE__ */ jsx5(TrashGlyph, { className: "h-3 w-3 text-[var(--text-danger)]" })
+                      }
+                    )
+                  ] }) : null
+                ]
+              },
+              page.id
+            );
+          }),
+          canWrite && canManagePages ? /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Add page",
+              onClick: onAddPage,
+              className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+              children: [
+                /* @__PURE__ */ jsx5(PlusGlyph, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx5("span", { className: "text-[10px]", children: "Add page" })
               ]
-            },
-            page.id
-          );
-        }),
-        canWrite && canManagePages ? /* @__PURE__ */ jsxs3(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Add page",
-            onClick: onAddPage,
-            className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
-            children: [
-              /* @__PURE__ */ jsx4(PlusGlyph, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx4("span", { className: "text-[10px]", children: "Add page" })
-            ]
-          }
-        ) : null
-      ]
-    }
-  );
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
 }
 
 // src/design-canvas-react/components/Rulers.tsx
 import { useRef as useRef2, useState as useState2 } from "react";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var RULER_SIZE_PX = 20;
 var DELETE_THRESHOLD_PX = RULER_SIZE_PX + 4;
 function Rulers({ pageWidth, pageHeight, zoom, scrollLeft, scrollTop, showRulers, guides, onGuidesChange }) {
   if (!showRulers) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         className: "absolute top-0 left-0 z-20 shrink-0 border-b border-r border-[var(--border-default)] bg-[var(--bg-input)]",
         style: { width: RULER_SIZE_PX, height: RULER_SIZE_PX }
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       HorizontalRuler,
       {
         pageWidth,
@@ -534,7 +549,7 @@ function Rulers({ pageWidth, pageHeight, zoom, scrollLeft, scrollTop, showRulers
         onGuidesChange
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       VerticalRuler,
       {
         pageHeight,
@@ -622,18 +637,18 @@ function HorizontalRuler({ pageWidth, zoom, scrollLeft, guides, onGuidesChange }
       children: [
         ticks.map((tick) => {
           const screenX = tick.position * zoom - scrollLeft * zoom;
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx6(
             "div",
             {
               className: `absolute bottom-0 w-px bg-[var(--border-default)] ${tick.label !== null ? "top-1.5" : "top-[14px]"}`,
               style: { left: screenX },
-              children: tick.label !== null ? /* @__PURE__ */ jsx5("span", { className: "absolute -top-1 left-0.5 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]", children: tick.label }) : null
+              children: tick.label !== null ? /* @__PURE__ */ jsx6("span", { className: "absolute -top-1 left-0.5 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]", children: tick.label }) : null
             },
             tick.position
           );
         }),
-        pointerX !== null ? /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]/60", style: { left: pointerX } }) : null,
-        dragGuideX !== null ? /* @__PURE__ */ jsx5(
+        pointerX !== null ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]/60", style: { left: pointerX } }) : null,
+        dragGuideX !== null ? /* @__PURE__ */ jsx6(
           "div",
           {
             className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]",
@@ -716,12 +731,12 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
       children: [
         ticks.map((tick) => {
           const screenY = tick.position * zoom - scrollTop * zoom;
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx6(
             "div",
             {
               className: `absolute right-0 h-px bg-[var(--border-default)] ${tick.label !== null ? "left-1.5" : "left-[14px]"}`,
               style: { top: screenY },
-              children: tick.label !== null ? /* @__PURE__ */ jsx5(
+              children: tick.label !== null ? /* @__PURE__ */ jsx6(
                 "span",
                 {
                   className: "absolute top-0.5 left-0 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]",
@@ -733,8 +748,8 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
             tick.position
           );
         }),
-        pointerY !== null ? /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]/60", style: { top: pointerY } }) : null,
-        dragGuideY !== null ? /* @__PURE__ */ jsx5(
+        pointerY !== null ? /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]/60", style: { top: pointerY } }) : null,
+        dragGuideY !== null ? /* @__PURE__ */ jsx6(
           "div",
           {
             className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]",
@@ -748,7 +763,7 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
 
 // src/design-canvas-react/components/Toolbar.tsx
 import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FONT_FAMILIES = [
   "Inter",
   "Arial",
@@ -763,7 +778,7 @@ var FONT_FAMILIES = [
   "Brush Script MT",
   "Impact"
 ];
-var SEP = /* @__PURE__ */ jsx6("div", { className: "mx-1 h-5 w-px shrink-0 bg-[var(--border-default)]" });
+var SEP = /* @__PURE__ */ jsx7("div", { className: "mx-1 h-5 w-px shrink-0 bg-[var(--border-default)]" });
 var POPOVER_PANEL = "absolute top-full left-0 z-50 mt-1 flex flex-col rounded border border-[var(--border-default)] bg-[var(--bg-input)] shadow-lg";
 function Popover({
   open,
@@ -808,8 +823,8 @@ function NumberInput({
     setRaw(null);
   }
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx7(
       "input",
       {
         type: "number",
@@ -838,8 +853,8 @@ function SelectControl({
   const [open, setOpen] = useState3(false);
   const current = options.find((o) => o.value === value);
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx7(
       Popover,
       {
         open,
@@ -854,12 +869,12 @@ function SelectControl({
             onClick: () => setOpen((v) => !v),
             className: `${buttonClassName} flex items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40`,
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "truncate", children: current?.label ?? value }),
-              /* @__PURE__ */ jsx6("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+              /* @__PURE__ */ jsx7("span", { className: "truncate", children: current?.label ?? value }),
+              /* @__PURE__ */ jsx7("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
             ]
           }
         ),
-        children: /* @__PURE__ */ jsx6("div", { role: "listbox", className: `${POPOVER_PANEL} max-h-64 w-44 overflow-y-auto py-1`, children: options.map((opt) => /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx7("div", { role: "listbox", className: `${POPOVER_PANEL} max-h-64 w-44 overflow-y-auto py-1`, children: options.map((opt) => /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -888,8 +903,8 @@ function FontPicker({
   const families = FONT_FAMILIES.includes(value) ? [...FONT_FAMILIES] : [value, ...FONT_FAMILIES];
   const filtered = families.filter((f) => f.toLowerCase().includes(query.trim().toLowerCase()));
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "Font" }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: "Font" }),
+    /* @__PURE__ */ jsx7(
       Popover,
       {
         open,
@@ -909,13 +924,13 @@ function FontPicker({
             className: "flex w-28 items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40",
             style: { fontFamily: value },
             children: [
-              /* @__PURE__ */ jsx6("span", { className: "truncate", children: value }),
-              /* @__PURE__ */ jsx6("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+              /* @__PURE__ */ jsx7("span", { className: "truncate", children: value }),
+              /* @__PURE__ */ jsx7("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
             ]
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-52`, children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               autoFocus: true,
@@ -926,7 +941,7 @@ function FontPicker({
               className: "m-1 rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
             }
           ),
-          /* @__PURE__ */ jsx6("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -952,13 +967,13 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
   const [open, setOpen] = useState3(false);
   const normalized = value.startsWith("#") ? value : "#ffffff";
   return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx7(
       Popover,
       {
         open,
         onClose: () => setOpen(false),
-        trigger: /* @__PURE__ */ jsx6(
+        trigger: /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -970,7 +985,7 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-40 gap-2 p-2`, children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "color",
@@ -980,7 +995,7 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
               className: "h-8 w-full cursor-pointer rounded border border-[var(--border-default)] p-0.5"
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               type: "text",
@@ -1019,7 +1034,9 @@ function Toolbar({
   onGroup,
   onUngroup,
   onDelete,
-  onBindSlot
+  onBindSlot,
+  pageSizeLabel = "Page size",
+  enableBleedLabel = "Show print bleed"
 }) {
   const hasSelection = selectedElements.length > 0;
   const single = selectedElements.length === 1 ? selectedElements[0] : null;
@@ -1038,19 +1055,24 @@ function Toolbar({
   const review = mode === "review";
   return /* @__PURE__ */ jsxs5("div", { className: "flex min-h-11 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--border-default)] bg-[var(--bg-input)] px-3 py-1", children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN, children: /* @__PURE__ */ jsx6(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN, children: /* @__PURE__ */ jsx6(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", role: "group", "aria-label": "History", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN, children: /* @__PURE__ */ jsx7(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN, children: /* @__PURE__ */ jsx7(RedoGlyph, { className: "h-3.5 w-3.5" }) })
+      ] }),
       !review ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
         SEP,
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(GridGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN, disabled: !page.bleed, children: /* @__PURE__ */ jsx6(BleedGlyph, { className: "h-3.5 w-3.5" }) })
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", role: "group", "aria-label": "View", children: [
+          /* @__PURE__ */ jsx7("span", { className: `${FIELD_LABEL} mr-0.5 hidden md:inline`, "aria-hidden": true, children: "View" }),
+          /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN, title: "Rulers", children: /* @__PURE__ */ jsx7(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN, title: "Grid", children: /* @__PURE__ */ jsx7(GridGlyph, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN, title: "Snap to guides", children: /* @__PURE__ */ jsx7(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN, disabled: !page.bleed, title: "Show print bleed", children: /* @__PURE__ */ jsx7(BleedGlyph, { className: "h-3.5 w-3.5" }) })
+        ] })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: hasSelection ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: hasSelection ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
       SEP,
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         SelectionControls,
         {
           elements: selectedElements,
@@ -1074,13 +1096,15 @@ function Toolbar({
       )
     ] }) : !review ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
       SEP,
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         PagePropsControls,
         {
           page,
           canWrite,
           onSetPageProps,
-          onSetPageGuides
+          onSetPageGuides,
+          pageSizeLabel,
+          enableBleedLabel
         }
       )
     ] }) : null })
@@ -1107,12 +1131,12 @@ function SelectionControls({
   const [slotInput, setSlotInput] = useState3("");
   const firstEl = elements[0];
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    allSameKind && firstKind === "text" && single ? /* @__PURE__ */ jsx6(TextControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
-    allSameKind && firstKind === "rect" && single ? /* @__PURE__ */ jsx6(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: true }) : null,
-    allSameKind && firstKind === "ellipse" && single ? /* @__PURE__ */ jsx6(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: false }) : null,
-    allSameKind && firstKind === "image" && single ? /* @__PURE__ */ jsx6(ImageControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
+    allSameKind && firstKind === "text" && single ? /* @__PURE__ */ jsx7(TextControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
+    allSameKind && firstKind === "rect" && single ? /* @__PURE__ */ jsx7(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: true }) : null,
+    allSameKind && firstKind === "ellipse" && single ? /* @__PURE__ */ jsx7(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: false }) : null,
+    allSameKind && firstKind === "image" && single ? /* @__PURE__ */ jsx7(ImageControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
     SEP,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       NumberInput,
       {
         label: "Opacity",
@@ -1122,7 +1146,7 @@ function SelectionControls({
         className: "w-14"
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       NumberInput,
       {
         label: "Rotation",
@@ -1134,13 +1158,13 @@ function SelectionControls({
     review ? null : /* @__PURE__ */ jsxs5(Fragment4, { children: [
       SEP,
       single ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Bring to front", disabled: !canWrite, onClick: () => reorderSingle("front"), className: BTN, children: /* @__PURE__ */ jsx6(BringFrontGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Send to back", disabled: !canWrite, onClick: () => reorderSingle("back"), className: BTN, children: /* @__PURE__ */ jsx6(SendBackGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Bring to front", disabled: !canWrite, onClick: () => reorderSingle("front"), className: BTN, children: /* @__PURE__ */ jsx7(BringFrontGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Send to back", disabled: !canWrite, onClick: () => reorderSingle("back"), className: BTN, children: /* @__PURE__ */ jsx7(SendBackGlyph, { className: "h-3.5 w-3.5" }) }),
         SEP
       ] }) : null,
-      groupable ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Group elements", disabled: !canWrite, onClick: onGroup, className: BTN, children: /* @__PURE__ */ jsx6(GroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
-      isGroup ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Ungroup", disabled: !canWrite, onClick: onUngroup, className: BTN, children: /* @__PURE__ */ jsx6(UngroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
-      single ? /* @__PURE__ */ jsx6(
+      groupable ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Group elements", disabled: !canWrite, onClick: onGroup, className: BTN, children: /* @__PURE__ */ jsx7(GroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
+      isGroup ? /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Ungroup", disabled: !canWrite, onClick: onUngroup, className: BTN, children: /* @__PURE__ */ jsx7(UngroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
+      single ? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1149,15 +1173,15 @@ function SelectionControls({
           disabled: !canWrite,
           onClick: () => patchAll({ locked: !single.locked }),
           className: single.locked ? BTN_ACTIVE : BTN,
-          children: single.locked ? /* @__PURE__ */ jsx6(LockGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(UnlockGlyph, { className: "h-3.5 w-3.5" })
+          children: single.locked ? /* @__PURE__ */ jsx7(LockGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(UnlockGlyph, { className: "h-3.5 w-3.5" })
         }
       ) : null,
-      single && onBindSlot ? /* @__PURE__ */ jsx6(
+      single && onBindSlot ? /* @__PURE__ */ jsx7(
         Popover,
         {
           open: slotPopoverOpen,
           onClose: () => setSlotPopoverOpen(false),
-          trigger: /* @__PURE__ */ jsx6(
+          trigger: /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -1171,11 +1195,11 @@ function SelectionControls({
               },
               className: currentSlot ? BTN_ACTIVE : BTN,
               title: currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
-              children: /* @__PURE__ */ jsx6(SlotGlyph, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx7(SlotGlyph, { className: "h-3.5 w-3.5" })
             }
           ),
           children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-48 gap-2 p-2`, children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "input",
               {
                 autoFocus: true,
@@ -1186,7 +1210,7 @@ function SelectionControls({
               }
             ),
             /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1198,7 +1222,7 @@ function SelectionControls({
                   children: slotInput.trim() ? "Bind" : "Unbind"
                 }
               ),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -1212,15 +1236,25 @@ function SelectionControls({
         }
       ) : null,
       SEP,
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Delete selection", disabled: !canWrite, onClick: onDelete, className: BTN, children: /* @__PURE__ */ jsx6(TrashGlyph, { className: "h-3.5 w-3.5 text-[var(--text-danger)]" }) })
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Delete selection",
+          disabled: !canWrite,
+          onClick: onDelete,
+          className: `${BTN} text-[var(--text-danger)] hover:border-[var(--text-danger)] hover:text-[var(--text-danger)]`,
+          children: /* @__PURE__ */ jsx7(TrashGlyph, { className: "h-3.5 w-3.5" })
+        }
+      )
     ] })
   ] });
 }
 function TextControls({ element, canWrite, onPatch }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(FontPicker, { value: element.fontFamily, disabled: !canWrite, onChange: (fontFamily) => onPatch({ fontFamily }) }),
-    /* @__PURE__ */ jsx6(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(FontPicker, { value: element.fontFamily, disabled: !canWrite, onChange: (fontFamily) => onPatch({ fontFamily }) }),
+    /* @__PURE__ */ jsx7(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1229,10 +1263,10 @@ function TextControls({ element, canWrite, onPatch }) {
         disabled: !canWrite,
         onClick: () => onPatch({ fontStyle: element.fontStyle === "bold" || element.fontStyle === "bold italic" ? element.fontStyle === "bold italic" ? "italic" : "normal" : element.fontStyle === "italic" ? "bold italic" : "bold" }),
         className: element.fontStyle?.includes("bold") ? BTN_ACTIVE : BTN,
-        children: /* @__PURE__ */ jsx6(BoldGlyph, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx7(BoldGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1241,10 +1275,10 @@ function TextControls({ element, canWrite, onPatch }) {
         disabled: !canWrite,
         onClick: () => onPatch({ fontStyle: element.fontStyle === "italic" || element.fontStyle === "bold italic" ? element.fontStyle === "bold italic" ? "bold" : "normal" : element.fontStyle === "bold" ? "bold italic" : "italic" }),
         className: element.fontStyle?.includes("italic") ? BTN_ACTIVE : BTN,
-        children: /* @__PURE__ */ jsx6(ItalicGlyph, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx7(ItalicGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx6("div", { role: "radiogroup", "aria-label": "Text alignment", className: "flex items-center gap-2", children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("div", { role: "radiogroup", "aria-label": "Text alignment", className: "flex items-center gap-2", children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1254,28 +1288,28 @@ function TextControls({ element, canWrite, onPatch }) {
         disabled: !canWrite,
         onClick: () => onPatch({ align }),
         className: element.align === align ? BTN_ACTIVE : BTN,
-        children: align === "left" ? /* @__PURE__ */ jsx6(AlignLeftGlyph, { className: "h-3.5 w-3.5" }) : align === "center" ? /* @__PURE__ */ jsx6(AlignCenterGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(AlignRightGlyph, { className: "h-3.5 w-3.5" })
+        children: align === "left" ? /* @__PURE__ */ jsx7(AlignLeftGlyph, { className: "h-3.5 w-3.5" }) : align === "center" ? /* @__PURE__ */ jsx7(AlignCenterGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(AlignRightGlyph, { className: "h-3.5 w-3.5" })
       },
       align
     )) }),
-    /* @__PURE__ */ jsx6(NumberInput, { label: "Line H", value: element.lineHeight, step: 0.1, min: 0.5, onCommit: (v) => onPatch({ lineHeight: v }), className: "w-12" }),
-    /* @__PURE__ */ jsx6(NumberInput, { label: "Spacing", value: element.letterSpacing, step: 0.5, onCommit: (v) => onPatch({ letterSpacing: v }), className: "w-14" }),
-    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite })
+    /* @__PURE__ */ jsx7(NumberInput, { label: "Line H", value: element.lineHeight, step: 0.1, min: 0.5, onCommit: (v) => onPatch({ lineHeight: v }), className: "w-12" }),
+    /* @__PURE__ */ jsx7(NumberInput, { label: "Spacing", value: element.letterSpacing, step: 0.5, onCommit: (v) => onPatch({ letterSpacing: v }), className: "w-14" }),
+    /* @__PURE__ */ jsx7(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite })
   ] });
 }
 function ShapeControls({ element, canWrite, onPatch, showCornerRadius }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
-    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
-    /* @__PURE__ */ jsx6(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
-    showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx6(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
+    /* @__PURE__ */ jsx7(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx7(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx7(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
+    showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx7(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
   ] });
 }
 function ImageControls({ element, canWrite, onPatch }) {
   const [swapOpen, setSwapOpen] = useState3(false);
   const [swapUrl, setSwapUrl] = useState3("");
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       SelectControl,
       {
         label: "Fit",
@@ -1290,12 +1324,12 @@ function ImageControls({ element, canWrite, onPatch }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       Popover,
       {
         open: swapOpen,
         onClose: () => setSwapOpen(false),
-        trigger: /* @__PURE__ */ jsx6(
+        trigger: /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1307,11 +1341,11 @@ function ImageControls({ element, canWrite, onPatch }) {
             },
             className: BTN,
             title: "Replace image",
-            children: /* @__PURE__ */ jsx6(SwapGlyph, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx7(SwapGlyph, { className: "h-3.5 w-3.5" })
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-64 gap-2 p-2`, children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "input",
             {
               autoFocus: true,
@@ -1323,7 +1357,7 @@ function ImageControls({ element, canWrite, onPatch }) {
             }
           ),
           /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1336,7 +1370,7 @@ function ImageControls({ element, canWrite, onPatch }) {
                 children: "Replace"
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -1351,7 +1385,7 @@ function ImageControls({ element, canWrite, onPatch }) {
     )
   ] });
 }
-function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides }) {
+function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides, pageSizeLabel = "Page size", enableBleedLabel = "Show print bleed" }) {
   const matchedPreset = matchPreset(page.width, page.height);
   const [customW, setCustomW] = useState3(null);
   const [customH, setCustomH] = useState3(null);
@@ -1366,7 +1400,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
     ...SIZE_PRESETS.map((p) => ({ value: p.id, label: p.label }))
   ];
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "input",
       {
         type: "text",
@@ -1378,10 +1412,10 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       }
     ),
     SEP,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       SelectControl,
       {
-        label: "Preset",
+        label: pageSizeLabel,
         value: matchedPreset?.id ?? "custom",
         disabled: !canWrite,
         onChange: (id) => {
@@ -1392,8 +1426,8 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       }
     ),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "W" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: "W" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "number",
@@ -1410,10 +1444,10 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6("span", { className: "text-[var(--text-muted)]", children: "\xD7" }),
+    /* @__PURE__ */ jsx7("span", { className: "text-[var(--text-muted)]", children: "\xD7" }),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "H" }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7("span", { className: FIELD_LABEL, children: "H" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "number",
@@ -1431,32 +1465,33 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       )
     ] }),
     SEP,
-    /* @__PURE__ */ jsx6(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx7(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }), disabled: !canWrite }),
     SEP,
-    /* @__PURE__ */ jsx6(BleedControls, { page, canWrite, onSetPageProps })
+    /* @__PURE__ */ jsx7(BleedControls, { page, canWrite, onSetPageProps, enableBleedLabel })
   ] });
 }
-function BleedControls({ page, canWrite, onSetPageProps }) {
+function BleedControls({ page, canWrite, onSetPageProps, enableBleedLabel = "Show print bleed" }) {
   const bleed = page.bleed;
   function setBleedSide(side, value) {
     const current = bleed ?? { top: 0, right: 0, bottom: 0, left: 0 };
     onSetPageProps({ bleed: { ...current, [side]: value } });
   }
   if (!bleed) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
+        "aria-label": enableBleedLabel,
         disabled: !canWrite,
         onClick: () => onSetPageProps({ bleed: { top: 3, right: 3, bottom: 3, left: 3 } }),
         className: BTN,
-        title: "Enable bleed",
-        children: /* @__PURE__ */ jsx6(BleedGlyph, { className: "h-3.5 w-3.5" })
+        title: enableBleedLabel,
+        children: /* @__PURE__ */ jsx7(BleedGlyph, { className: "h-3.5 w-3.5" })
       }
     );
   }
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsx6(
+    ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsx7(
       NumberInput,
       {
         label: `Bleed ${side[0].toUpperCase()}`,
@@ -1467,7 +1502,7 @@ function BleedControls({ page, canWrite, onSetPageProps }) {
       },
       side
     )),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1482,11 +1517,11 @@ function BleedControls({ page, canWrite, onSetPageProps }) {
 }
 
 // src/design-canvas-react/components/ZoomControls.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var STEP = 0.1;
 var MIN = 0.05;
 var MAX = 32;
-function ZoomControls({ zoom, onZoom, onFit }) {
+function ZoomControls({ zoom, onZoom, onFit, fitLabel = "Fit to screen" }) {
   function zoomOut() {
     onZoom(Math.max(MIN, parseFloat((zoom - STEP).toFixed(4))));
   }
@@ -1497,18 +1532,18 @@ function ZoomControls({ zoom, onZoom, onFit }) {
     onZoom(1);
   }
   return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2", children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
-        "aria-label": "Fit page to viewport",
+        "aria-label": fitLabel,
         onClick: onFit,
         className: BTN_SM,
-        title: "Fit page (F)",
-        children: /* @__PURE__ */ jsx7(ZoomFitGlyph, { className: "h-3.5 w-3.5" })
+        title: `${fitLabel} (F)`,
+        children: /* @__PURE__ */ jsx8(ZoomFitGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1516,7 +1551,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
         onClick: zoomOut,
         disabled: zoom <= MIN,
         className: BTN_SM,
-        children: /* @__PURE__ */ jsx7("span", { className: "text-base leading-none", children: "\u2212" })
+        children: /* @__PURE__ */ jsx8("span", { className: "text-base leading-none", children: "\u2212" })
       }
     ),
     /* @__PURE__ */ jsxs6(
@@ -1533,7 +1568,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1541,7 +1576,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
         onClick: zoomIn,
         disabled: zoom >= MAX,
         className: BTN_SM,
-        children: /* @__PURE__ */ jsx7("span", { className: "text-sm leading-none", children: "+" })
+        children: /* @__PURE__ */ jsx8("span", { className: "text-sm leading-none", children: "+" })
       }
     )
   ] });
@@ -1549,7 +1584,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
 
 // src/design-canvas-react/components/ExportControl.tsx
 import { useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var FORMATS = [
   { id: "png", label: "PNG" },
   { id: "jpeg", label: "JPEG" }
@@ -1583,9 +1618,9 @@ function ExportControl({ defaults, onExport, className }) {
         },
         className: "flex h-8 items-center gap-1.5 rounded-md border border-[var(--border-default)] px-2.5 text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40",
         children: [
-          /* @__PURE__ */ jsx8(ExportGlyph, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx9(ExportGlyph, { className: "h-3.5 w-3.5" }),
           "Export",
-          /* @__PURE__ */ jsx8(ChevronDownGlyph, { className: "h-3 w-3 text-[var(--text-muted)]" })
+          /* @__PURE__ */ jsx9(ChevronDownGlyph, { className: "h-3 w-3 text-[var(--text-muted)]" })
         ]
       }
     ),
@@ -1602,8 +1637,8 @@ function ExportControl({ defaults, onExport, className }) {
         className: "absolute right-0 top-full z-50 mt-1 flex w-52 flex-col gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] p-3 shadow-lg",
         children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx8("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Format" }),
-            /* @__PURE__ */ jsx8("div", { className: "flex gap-1.5", children: FORMATS.map((f) => /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Format" }),
+            /* @__PURE__ */ jsx9("div", { className: "flex gap-1.5", children: FORMATS.map((f) => /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1616,8 +1651,8 @@ function ExportControl({ defaults, onExport, className }) {
             )) })
           ] }),
           /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx8("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Scale" }),
-            /* @__PURE__ */ jsx8("div", { className: "flex gap-1.5", children: SCALES.map((s) => /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Scale" }),
+            /* @__PURE__ */ jsx9("div", { className: "flex gap-1.5", children: SCALES.map((s) => /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1629,7 +1664,7 @@ function ExportControl({ defaults, onExport, className }) {
               s.value
             )) })
           ] }),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx9(
             "button",
             {
               type: "button",
@@ -1646,7 +1681,7 @@ function ExportControl({ defaults, onExport, className }) {
 }
 
 // src/design-canvas-react/components/DesignCanvas.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function mintId() {
   const uuid = globalThis.crypto && "randomUUID" in globalThis.crypto ? globalThis.crypto.randomUUID() : null;
   return `local-${uuid ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`}`;
@@ -1692,6 +1727,11 @@ function DesignCanvas({
   fitOnMount,
   onReady,
   render,
+  showEmptyState,
+  onAskAgent,
+  pageSizeLabel,
+  enableBleedLabel,
+  fitLabel,
   renderWorkspace,
   renderThumbnail
 }) {
@@ -1934,7 +1974,7 @@ function DesignCanvas({
   }, [activePage, editorState.selectedElementIds]);
   const review = mode === "review";
   if (!activePage) {
-    return /* @__PURE__ */ jsx9("div", { className: `flex h-full items-center justify-center bg-[var(--bg-input)] text-[var(--text-muted)] ${className ?? ""}`, children: "No pages in document" });
+    return /* @__PURE__ */ jsx10("div", { className: `flex h-full items-center justify-center bg-[var(--bg-input)] text-[var(--text-muted)] ${className ?? ""}`, children: "No pages in document" });
   }
   const bleedScreen = editorState.showBleed && activePage.bleed ? {
     top: activePage.bleed.top * editorState.zoom,
@@ -1943,10 +1983,10 @@ function DesignCanvas({
     left: activePage.bleed.left * editorState.zoom
   } : null;
   return /* @__PURE__ */ jsxs8("div", { className: `flex h-full min-h-0 bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
-    renderSidePanel && !review ? /* @__PURE__ */ jsx9("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", children: renderSidePanel() }) : null,
+    renderSidePanel && !review ? /* @__PURE__ */ jsx10("aside", { className: "hidden w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)] lg:flex", children: renderSidePanel() }) : null,
     /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-stretch", children: [
-        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx10(
           Toolbar,
           {
             page: activePage,
@@ -1972,10 +2012,12 @@ function DesignCanvas({
             onGroup: handleGroup,
             onUngroup: handleUngroup,
             onDelete: handleDelete,
-            onBindSlot: handleBindSlot
+            onBindSlot: handleBindSlot,
+            pageSizeLabel,
+            enableBleedLabel
           }
         ) }),
-        onExport ? /* @__PURE__ */ jsx9("div", { className: "flex shrink-0 items-center border-b border-l border-[var(--border-default)] bg-[var(--bg-input)] px-2", children: /* @__PURE__ */ jsx9(
+        onExport ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center border-b border-l border-[var(--border-default)] bg-[var(--bg-input)] px-2", children: /* @__PURE__ */ jsx10(
           ExportControl,
           {
             defaults: exportDefaults,
@@ -1989,8 +2031,8 @@ function DesignCanvas({
           className: "flex shrink-0 items-center justify-between gap-3 border-b border-[hsl(var(--destructive)/0.3)] bg-[hsl(var(--destructive)/0.1)] px-3 py-1.5 text-xs text-[var(--text-danger)]",
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: commitError }),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10("span", { className: "min-w-0 truncate", children: commitError }),
+            /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
@@ -2002,8 +2044,15 @@ function DesignCanvas({
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsxs8("div", { className: "relative min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs8("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-6 text-center sm:hidden", children: [
+        /* @__PURE__ */ jsx10(BrandKnot, { size: 32, className: "shrink-0" }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Best edited on a larger screen" }),
+          /* @__PURE__ */ jsx10("p", { className: "text-xs leading-5 text-[var(--text-secondary)]", children: "The design canvas needs room to work. Open this on a tablet or desktop to edit pages, elements, and export." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "relative hidden min-h-0 flex-1 sm:block", children: [
+        /* @__PURE__ */ jsx10(
           Rulers,
           {
             pageWidth: activePage.width,
@@ -2016,12 +2065,12 @@ function DesignCanvas({
             onGuidesChange: handleSetPageGuides
           }
         ),
-        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx9(
+        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx10(
           "div",
           {
             className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
             "aria-hidden": true,
-            children: /* @__PURE__ */ jsx9(
+            children: /* @__PURE__ */ jsx10(
               "div",
               {
                 style: {
@@ -2029,7 +2078,7 @@ function DesignCanvas({
                   left: editorState.panX,
                   top: editorState.panY
                 },
-                children: /* @__PURE__ */ jsx9(
+                children: /* @__PURE__ */ jsx10(
                   BleedTrimOverlay,
                   {
                     pageWidthPx: activePage.width * editorState.zoom,
@@ -2060,13 +2109,17 @@ function DesignCanvas({
           fitOnMount,
           onReady,
           render,
+          // Review mode hides authoring affordances; the empty state's doors
+          // create content, so they only belong on the editor surface.
+          showEmptyState: review ? false : showEmptyState,
+          onAskAgent,
           onZoomChange: setZoom,
           onPanChange: setPan,
           onSelectElements: setSelectedElements
         })
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-stretch border-t border-[var(--border-default)]", children: [
-        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx10(
           PagesStrip,
           {
             pages: editorState.document.pages,
@@ -2081,22 +2134,24 @@ function DesignCanvas({
             onReorderPage: handleReorderPage
           }
         ) }),
-        /* @__PURE__ */ jsx9("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx10(
           ZoomControls,
           {
             zoom: editorState.zoom,
             onZoom: setZoom,
-            onFit: () => fitRef.current?.()
+            onFit: () => fitRef.current?.(),
+            fitLabel
           }
         ) })
       ] })
     ] }),
-    renderAgentPanel ? /* @__PURE__ */ jsx9("aside", { className: "flex w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)]", children: renderAgentPanel({ selectedElements, activePageId: editorState.activePageId }) }) : null
+    renderAgentPanel ? /* @__PURE__ */ jsx10("aside", { className: "hidden w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)] lg:flex", children: renderAgentPanel({ selectedElements, activePageId: editorState.activePageId }) }) : null
   ] });
 }
 var DesignCanvas_default = DesignCanvas;
 
 export {
+  BrandKnot,
   selectTickStep,
   buildRulerTicks,
   formatRulerLabel,
@@ -2106,6 +2161,7 @@ export {
   LockGlyph,
   UnlockGlyph,
   GroupGlyph,
+  PlusGlyph,
   RectGlyph,
   EllipseGlyph,
   LineGlyph,
@@ -2127,4 +2183,4 @@ export {
   DesignCanvas,
   DesignCanvas_default
 };
-//# sourceMappingURL=chunk-YEWTVDDT.js.map
+//# sourceMappingURL=chunk-OVUQNKLM.js.map