@tangle-network/agent-app 0.23.0 → 0.25.0

package/dist/{chunk-2W4YCAFH.js → chunk-LPAVBGVY.js}

@@ -9,13 +9,13 @@ import {
 } from "./chunk-JZAJE3JL.js";
 
 // src/design-canvas-react/components/DesignCanvas.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef4, useState as useState4, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef5, useState as useState5, useSyncExternalStore } from "react";
 
 // src/design-canvas-react/engine/command-stack.ts
 var SCENE_COMMAND_HISTORY_LIMIT = 200;
-function createSceneCommandStack(document, activePageId) {
+function createSceneCommandStack(document2, activePageId) {
   let state = {
-    document,
+    document: document2,
     activePageId,
     selectedElementIds: [],
     zoom: 1,
@@ -862,6 +862,16 @@ var DuplicateGlyph = glyph(
 var ZoomFitGlyph = glyph(
   /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("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" }) })
+);
+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" })
+  ] })
+);
 
 // src/design-canvas-react/components/PagesStrip.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1263,11 +1273,54 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
 }
 
 // src/design-canvas-react/components/Toolbar.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FONT_FAMILIES = [
+  "Inter",
+  "Arial",
+  "Helvetica",
+  "Verdana",
+  "Tahoma",
+  "Trebuchet MS",
+  "Times New Roman",
+  "Georgia",
+  "Garamond",
+  "Courier New",
+  "Brush Script MT",
+  "Impact"
+];
 var BTN2 = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40";
 var BTN_ACTIVE = `${BTN2} border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]`;
-var SEP = /* @__PURE__ */ jsx5("div", { className: "mx-1 h-5 w-px bg-[var(--border-default)]" });
+var SEP = /* @__PURE__ */ jsx5("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,
+  onClose,
+  trigger,
+  children
+}) {
+  const ref = useRef3(null);
+  useEffect2(() => {
+    if (!open) return;
+    function onDocPointer(event) {
+      if (ref.current && !ref.current.contains(event.target)) onClose();
+    }
+    function onKey(event) {
+      if (event.key === "Escape") onClose();
+    }
+    document.addEventListener("pointerdown", onDocPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDocPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ jsxs5("div", { ref, className: "relative", children: [
+    trigger,
+    open ? children : null
+  ] });
+}
+var FIELD_LABEL = "text-[9px] uppercase tracking-wide text-[var(--text-muted)]";
 function NumberInput({
   label,
   value,
@@ -1283,7 +1336,7 @@ function NumberInput({
     setRaw(null);
   }
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: label }),
+    /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
     /* @__PURE__ */ jsx5(
       "input",
       {
@@ -1302,16 +1355,170 @@ function NumberInput({
     )
   ] });
 }
-function ColorSwatch({ label, value, onCommit }) {
-  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5 cursor-pointer", children: [
-    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: label }),
+function SelectControl({
+  label,
+  value,
+  options,
+  disabled,
+  onChange,
+  buttonClassName = "w-24"
+}) {
+  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__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
     /* @__PURE__ */ jsx5(
-      "input",
+      Popover,
       {
-        type: "color",
-        value: value.startsWith("#") ? value : "#ffffff",
-        onChange: (event) => onCommit(event.target.value),
-        className: "h-6 w-10 cursor-pointer rounded border border-[var(--border-default)] p-0.5"
+        open,
+        onClose: () => setOpen(false),
+        trigger: /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            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__ */ jsx5("span", { className: "truncate", children: current?.label ?? value }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsx5("div", { role: "listbox", className: `${POPOVER_PANEL} max-h-64 w-44 overflow-y-auto py-1`, children: options.map((opt) => /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": opt.value === value,
+            onClick: () => {
+              onChange(opt.value);
+              setOpen(false);
+            },
+            className: `px-3 py-1 text-left text-[12px] hover:bg-[var(--brand-primary)]/10 ${opt.value === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
+            children: opt.label
+          },
+          opt.value
+        )) })
+      }
+    )
+  ] });
+}
+function FontPicker({
+  value,
+  disabled,
+  onChange
+}) {
+  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  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__ */ jsx5("span", { className: FIELD_LABEL, children: "Font" }),
+    /* @__PURE__ */ jsx5(
+      Popover,
+      {
+        open,
+        onClose: () => {
+          setOpen(false);
+          setQuery("");
+        },
+        trigger: /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-label": "Font family",
+            onClick: () => setOpen((v) => !v),
+            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__ */ jsx5("span", { className: "truncate", children: value }),
+              /* @__PURE__ */ jsx5("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-52`, children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              autoFocus: true,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              placeholder: "Search fonts",
+              "aria-label": "Search fonts",
+              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__ */ jsx5("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": family === value,
+              onClick: () => {
+                onChange(family);
+                setOpen(false);
+                setQuery("");
+              },
+              style: { fontFamily: family },
+              className: `block w-full px-3 py-1 text-left text-[13px] hover:bg-[var(--brand-primary)]/10 ${family === value ? "text-[var(--brand-primary)]" : "text-[var(--text-primary)]"}`,
+              children: family
+            },
+            family
+          )) })
+        ] })
+      }
+    )
+  ] });
+}
+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__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx5(
+      Popover,
+      {
+        open,
+        onClose: () => setOpen(false),
+        trigger: /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "aria-label": `${label} color`,
+            onClick: () => setOpen((v) => !v),
+            className: "h-6 w-10 rounded border border-[var(--border-default)] disabled:cursor-default disabled:opacity-40",
+            style: { backgroundColor: normalized }
+          }
+        ),
+        children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-40 gap-2 p-2`, children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "color",
+              "aria-label": `${label} color picker`,
+              value: normalized,
+              onChange: (event) => onCommit(event.target.value),
+              className: "h-8 w-full cursor-pointer rounded border border-[var(--border-default)] p-0.5"
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "text",
+              "aria-label": `${label} hex value`,
+              value,
+              onChange: (event) => onCommit(event.target.value),
+              className: "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)]"
+            }
+          )
+        ] })
       }
     )
   ] });
@@ -1355,16 +1562,18 @@ function Toolbar({
   const selectedIds = selectedElements.map((e) => e.id);
   const isGroup = single?.kind === "group";
   const groupable = selectedElements.length >= 2;
-  return /* @__PURE__ */ jsxs5("div", { className: "flex h-11 shrink-0 items-center gap-2 overflow-x-auto border-b border-[var(--border-default)] bg-[var(--bg-input)] px-3", children: [
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN2, children: /* @__PURE__ */ jsx5(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN2, children: /* @__PURE__ */ jsx5(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
-    SEP,
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(GridGlyph, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN2, disabled: !page.bleed, children: /* @__PURE__ */ jsx5(BleedGlyph, { className: "h-3.5 w-3.5" }) }),
+  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__ */ jsx5("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN2, children: /* @__PURE__ */ jsx5(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN2, children: /* @__PURE__ */ jsx5(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
+      SEP,
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(GridGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN2, disabled: !page.bleed, children: /* @__PURE__ */ jsx5(BleedGlyph, { className: "h-3.5 w-3.5" }) })
+    ] }),
     SEP,
-    hasSelection ? /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: hasSelection ? /* @__PURE__ */ jsx5(
       SelectionControls,
       {
         elements: selectedElements,
@@ -1392,7 +1601,7 @@ function Toolbar({
         onSetPageProps,
         onSetPageGuides
       }
-    )
+    ) })
   ] });
 }
 function SelectionControls({
@@ -1458,75 +1667,69 @@ function SelectionControls({
         children: single.locked ? /* @__PURE__ */ jsx5(LockGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(UnlockGlyph, { className: "h-3.5 w-3.5" })
       }
     ) : null,
-    single && onBindSlot ? /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx5(
-        "button",
-        {
-          type: "button",
-          "aria-label": currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
-          onClick: () => {
-            setSlotInput(currentSlot ?? "");
-            setSlotPopoverOpen((v) => !v);
-          },
-          className: currentSlot ? BTN_ACTIVE : BTN2,
-          title: currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
-          children: /* @__PURE__ */ jsx5(SlotGlyph, { className: "h-3.5 w-3.5" })
-        }
-      ),
-      slotPopoverOpen ? /* @__PURE__ */ jsxs5("div", { className: "absolute top-full left-0 z-50 mt-1 flex w-48 flex-col gap-2 rounded border border-[var(--border-default)] bg-[var(--bg-input)] p-2 shadow-lg", children: [
-        /* @__PURE__ */ jsx5(
-          "input",
+    single && onBindSlot ? /* @__PURE__ */ jsx5(
+      Popover,
+      {
+        open: slotPopoverOpen,
+        onClose: () => setSlotPopoverOpen(false),
+        trigger: /* @__PURE__ */ jsx5(
+          "button",
           {
-            autoFocus: true,
-            value: slotInput,
-            onChange: (event) => setSlotInput(event.target.value),
-            placeholder: "slot-name",
-            className: "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)]"
+            type: "button",
+            "aria-label": currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
+            onClick: () => {
+              setSlotInput(currentSlot ?? "");
+              setSlotPopoverOpen((v) => !v);
+            },
+            className: currentSlot ? BTN_ACTIVE : BTN2,
+            title: currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
+            children: /* @__PURE__ */ jsx5(SlotGlyph, { className: "h-3.5 w-3.5" })
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+        children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-48 gap-2 p-2`, children: [
           /* @__PURE__ */ jsx5(
-            "button",
+            "input",
             {
-              type: "button",
-              onClick: () => {
-                onBindSlot(slotInput.trim() || null);
-                setSlotPopoverOpen(false);
-              },
-              className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10",
-              children: slotInput.trim() ? "Bind" : "Unbind"
+              autoFocus: true,
+              value: slotInput,
+              onChange: (event) => setSlotInput(event.target.value),
+              placeholder: "slot-name",
+              className: "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__ */ jsx5(
-            "button",
-            {
-              type: "button",
-              onClick: () => setSlotPopoverOpen(false),
-              className: "rounded border border-[var(--border-default)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]",
-              children: "Cancel"
-            }
-          )
+          /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onBindSlot(slotInput.trim() || null);
+                  setSlotPopoverOpen(false);
+                },
+                className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10",
+                children: slotInput.trim() ? "Bind" : "Unbind"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSlotPopoverOpen(false),
+                className: "rounded border border-[var(--border-default)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]",
+                children: "Cancel"
+              }
+            )
+          ] })
         ] })
-      ] }) : null
-    ] }) : null,
+      }
+    ) : null,
     SEP,
     /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Delete selection", disabled: !canWrite, onClick: onDelete, className: BTN2, children: /* @__PURE__ */ jsx5(TrashGlyph, { className: "h-3.5 w-3.5 text-rose-400" }) })
   ] });
 }
 function TextControls({ element, canWrite, onPatch }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        type: "text",
-        "aria-label": "Font family",
-        value: element.fontFamily,
-        disabled: !canWrite,
-        onChange: (event) => onPatch({ fontFamily: event.target.value }),
-        className: "w-28 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
-        placeholder: "Font"
-      }
-    ),
+    /* @__PURE__ */ jsx5(FontPicker, { value: element.fontFamily, disabled: !canWrite, onChange: (fontFamily) => onPatch({ fontFamily }) }),
     /* @__PURE__ */ jsx5(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
     /* @__PURE__ */ jsx5(
       "button",
@@ -1564,35 +1767,33 @@ function TextControls({ element, canWrite, onPatch }) {
     )),
     /* @__PURE__ */ jsx5(NumberInput, { label: "Line H", value: element.lineHeight, step: 0.1, min: 0.5, onCommit: (v) => onPatch({ lineHeight: v }), className: "w-12" }),
     /* @__PURE__ */ jsx5(NumberInput, { label: "Spacing", value: element.letterSpacing, step: 0.5, onCommit: (v) => onPatch({ letterSpacing: v }), className: "w-14" }),
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }) })
+    /* @__PURE__ */ jsx5(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__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }) }),
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }) }),
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
     /* @__PURE__ */ jsx5(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
     showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx5(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
   ] });
 }
 function ImageControls({ element, canWrite, onPatch }) {
-  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "Fit" }),
-    /* @__PURE__ */ jsxs5(
-      "select",
-      {
-        value: element.fit,
-        disabled: !canWrite,
-        onChange: (event) => onPatch({ fit: event.target.value }),
-        className: "rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
-        children: [
-          /* @__PURE__ */ jsx5("option", { value: "fill", children: "Fill" }),
-          /* @__PURE__ */ jsx5("option", { value: "cover", children: "Cover" }),
-          /* @__PURE__ */ jsx5("option", { value: "contain", children: "Contain" })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx5(
+    SelectControl,
+    {
+      label: "Fit",
+      value: element.fit,
+      disabled: !canWrite,
+      onChange: (fit) => onPatch({ fit }),
+      buttonClassName: "w-24",
+      options: [
+        { value: "fill", label: "Fill" },
+        { value: "cover", label: "Cover" },
+        { value: "contain", label: "Contain" }
+      ]
+    }
+  );
 }
 function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides }) {
   const matchedPreset = matchPreset(page.width, page.height);
@@ -1604,6 +1805,10 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
     if (dim === "width") setCustomW(null);
     else setCustomH(null);
   }
+  const presetOptions = [
+    { value: "custom", label: "Custom" },
+    ...SIZE_PRESETS.map((p) => ({ value: p.id, label: p.label }))
+  ];
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     /* @__PURE__ */ jsx5(
       "input",
@@ -1617,27 +1822,21 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       }
     ),
     SEP,
+    /* @__PURE__ */ jsx5(
+      SelectControl,
+      {
+        label: "Preset",
+        value: matchedPreset?.id ?? "custom",
+        disabled: !canWrite,
+        onChange: (id) => {
+          const preset = SIZE_PRESETS.find((p) => p.id === id);
+          if (preset) onSetPageProps({ width: preset.width, height: preset.height });
+        },
+        options: presetOptions
+      }
+    ),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "Preset" }),
-      /* @__PURE__ */ jsxs5(
-        "select",
-        {
-          value: matchedPreset?.id ?? "custom",
-          disabled: !canWrite,
-          onChange: (event) => {
-            const preset = SIZE_PRESETS.find((p) => p.id === event.target.value);
-            if (preset) onSetPageProps({ width: preset.width, height: preset.height });
-          },
-          className: "rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
-          children: [
-            /* @__PURE__ */ jsx5("option", { value: "custom", children: "Custom" }),
-            SIZE_PRESETS.map((p) => /* @__PURE__ */ jsx5("option", { value: p.id, children: p.label }, p.id))
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "W" }),
+      /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: "W" }),
       /* @__PURE__ */ jsx5(
         "input",
         {
@@ -1657,7 +1856,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
     ] }),
     /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)]", children: "\xD7" }),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "H" }),
+      /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: "H" }),
       /* @__PURE__ */ jsx5(
         "input",
         {
@@ -1676,7 +1875,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       )
     ] }),
     SEP,
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }) }),
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }), disabled: !canWrite }),
     SEP,
     /* @__PURE__ */ jsx5(BleedControls, { page, canWrite, onSetPageProps })
   ] });
@@ -1793,8 +1992,106 @@ function ZoomControls({ zoom, onZoom, onFit }) {
   ] });
 }
 
-// src/design-canvas-react/components/DesignCanvas.tsx
+// src/design-canvas-react/components/ExportControl.tsx
+import { useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var FORMATS = [
+  { id: "png", label: "PNG" },
+  { id: "jpeg", label: "JPEG" }
+];
+var SCALES = [
+  { value: 1, label: "1x" },
+  { value: 2, label: "2x" }
+];
+function ExportControl({ defaults, onExport, className }) {
+  const [open, setOpen] = useState4(false);
+  const [format, setFormat] = useState4(defaults?.format ?? "png");
+  const [pixelRatio, setPixelRatio] = useState4(defaults?.pixelRatio ?? 1);
+  const containerRef = useRef4(null);
+  function confirm() {
+    onExport({ format, pixelRatio });
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: `relative ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Export",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        onBlur: (event) => {
+          if (!containerRef.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+          }
+        },
+        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__ */ jsx7(ExportGlyph, { className: "h-3.5 w-3.5" }),
+          "Export",
+          /* @__PURE__ */ jsx7(ChevronDownGlyph, { className: "h-3 w-3 text-[var(--text-muted)]" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Export options",
+        onBlur: (event) => {
+          if (!containerRef.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+          }
+        },
+        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__ */ jsx7("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Format" }),
+            /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5", children: FORMATS.map((f) => /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": format === f.id,
+                onClick: () => setFormat(f.id),
+                className: `flex-1 rounded border px-2 py-1 text-[11px] transition-colors ${format === f.id ? "border-[var(--brand-primary)] text-[var(--brand-primary)]" : "border-[var(--border-default)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
+                children: f.label
+              },
+              f.id
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Scale" }),
+            /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5", children: SCALES.map((s) => /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": pixelRatio === s.value,
+                onClick: () => setPixelRatio(s.value),
+                className: `flex-1 rounded border px-2 py-1 text-[11px] transition-colors ${pixelRatio === s.value ? "border-[var(--brand-primary)] text-[var(--brand-primary)]" : "border-[var(--border-default)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
+                children: s.label
+              },
+              s.value
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Export image",
+              onClick: confirm,
+              className: "rounded border border-[var(--brand-primary)] px-2 py-1 text-[11px] font-medium text-[var(--brand-primary)] transition-colors hover:bg-[var(--brand-primary)]/10",
+              children: "Export"
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// src/design-canvas-react/components/DesignCanvas.tsx
+import { jsx as jsx8, 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)}`}`;
@@ -1834,6 +2131,7 @@ function DesignCanvas({
   renderAgentPanel,
   renderSidePanel,
   onExport,
+  exportDefaults,
   className,
   fitOnMount,
   onReady,
@@ -1846,23 +2144,24 @@ function DesignCanvas({
     []
   );
   const editorState = useSyncExternalStore(stack.subscribe, stack.getState, stack.getState);
-  const appliedDocumentRef = useRef4(initialDocument);
-  useEffect2(() => {
+  const appliedDocumentRef = useRef5(initialDocument);
+  useEffect3(() => {
     if (appliedDocumentRef.current === initialDocument) return;
     appliedDocumentRef.current = initialDocument;
     stack.reset(initialDocument);
   }, [initialDocument, stack]);
-  const [commitError, setCommitError] = useState4(null);
+  const [commitError, setCommitError] = useState5(null);
   const commit = useCommitCommand(stack, onApplyOperations, canWrite, setCommitError);
-  const selectionChangeRef = useRef4(onSelectionChange);
+  const selectionChangeRef = useRef5(onSelectionChange);
   selectionChangeRef.current = onSelectionChange;
-  useEffect2(() => {
+  useEffect3(() => {
     const page = editorState.document.pages.find((p) => p.id === editorState.activePageId);
     if (!page) return;
     const selected = editorState.selectedElementIds.map((id) => page.elements.find((el) => el.id === id)).filter((el) => el !== void 0);
     selectionChangeRef.current?.(selected);
   }, [editorState.selectedElementIds, editorState.activePageId, editorState.document]);
-  const fitRef = useRef4(null);
+  const fitRef = useRef5(null);
+  const exportRef = useRef5(null);
   const setZoom = useCallback2((zoom) => stack.setView({ zoom }), [stack]);
   const setPan = useCallback2((panX, panY) => stack.setView({ panX, panY }), [stack]);
   const setActivePage = useCallback2((activePageId) => stack.setView({ activePageId, selectedElementIds: [] }), [stack]);
@@ -2048,7 +2347,7 @@ function DesignCanvas({
       setCommitError(error instanceof Error ? error.message : String(error));
     });
   }, [stack, canWrite, onApplyOperations]);
-  useEffect2(() => {
+  useEffect3(() => {
     function onKeyDown(event) {
       const mod = event.metaKey || event.ctrlKey;
       if (mod && !isTypingTarget(event.target)) {
@@ -2087,7 +2386,7 @@ function DesignCanvas({
     return editorState.selectedElementIds.map((id) => activePage.elements.find((el) => el.id === id)).filter((el) => el !== void 0);
   }, [activePage, editorState.selectedElementIds]);
   if (!activePage) {
-    return /* @__PURE__ */ jsx7("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__ */ jsx8("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,
@@ -2095,45 +2394,54 @@ function DesignCanvas({
     bottom: activePage.bleed.bottom * editorState.zoom,
     left: activePage.bleed.left * editorState.zoom
   } : null;
-  return /* @__PURE__ */ jsxs7("div", { className: `flex h-full min-h-0 bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
-    renderSidePanel ? /* @__PURE__ */ jsx7("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", children: renderSidePanel() }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx7(
-        Toolbar,
-        {
-          page: activePage,
-          selectedElements,
-          canWrite,
-          canUndo: stack.canUndo(),
-          canRedo: stack.canRedo(),
-          gridEnabled: editorState.gridEnabled,
-          snapEnabled: editorState.snapEnabled,
-          showRulers: editorState.showRulers,
-          showBleed: editorState.showBleed,
-          onUndo: handleUndo,
-          onRedo: handleRedo,
-          onToggleGrid: () => stack.setView({ gridEnabled: !editorState.gridEnabled }),
-          onToggleSnap: () => stack.setView({ snapEnabled: !editorState.snapEnabled }),
-          onToggleRulers: () => stack.setView({ showRulers: !editorState.showRulers }),
-          onToggleBleed: () => stack.setView({ showBleed: !editorState.showBleed }),
-          onSetAttrs: handleSetAttrs,
-          onSetPageProps: handleSetPageProps,
-          onSetPageGuides: handleSetPageGuides,
-          onReorder: handleReorder,
-          onGroup: handleGroup,
-          onUngroup: handleUngroup,
-          onDelete: handleDelete,
-          onBindSlot: handleBindSlot
-        }
-      ),
-      commitError ? /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { className: `flex h-full min-h-0 bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
+    renderSidePanel ? /* @__PURE__ */ jsx8("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", 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__ */ jsx8("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx8(
+          Toolbar,
+          {
+            page: activePage,
+            selectedElements,
+            canWrite,
+            canUndo: stack.canUndo(),
+            canRedo: stack.canRedo(),
+            gridEnabled: editorState.gridEnabled,
+            snapEnabled: editorState.snapEnabled,
+            showRulers: editorState.showRulers,
+            showBleed: editorState.showBleed,
+            onUndo: handleUndo,
+            onRedo: handleRedo,
+            onToggleGrid: () => stack.setView({ gridEnabled: !editorState.gridEnabled }),
+            onToggleSnap: () => stack.setView({ snapEnabled: !editorState.snapEnabled }),
+            onToggleRulers: () => stack.setView({ showRulers: !editorState.showRulers }),
+            onToggleBleed: () => stack.setView({ showBleed: !editorState.showBleed }),
+            onSetAttrs: handleSetAttrs,
+            onSetPageProps: handleSetPageProps,
+            onSetPageGuides: handleSetPageGuides,
+            onReorder: handleReorder,
+            onGroup: handleGroup,
+            onUngroup: handleUngroup,
+            onDelete: handleDelete,
+            onBindSlot: handleBindSlot
+          }
+        ) }),
+        onExport ? /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 items-center border-b border-l border-[var(--border-default)] bg-[var(--bg-input)] px-2", children: /* @__PURE__ */ jsx8(
+          ExportControl,
+          {
+            defaults: exportDefaults,
+            onExport: (opts) => exportRef.current?.(opts)
+          }
+        ) }) : null
+      ] }),
+      commitError ? /* @__PURE__ */ jsxs8(
         "div",
         {
           className: "flex shrink-0 items-center justify-between gap-3 border-b border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs text-rose-300",
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: commitError }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: commitError }),
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -2145,8 +2453,8 @@ function DesignCanvas({
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsxs7("div", { className: "relative min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs8("div", { className: "relative min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx8(
           Rulers,
           {
             pageWidth: activePage.width,
@@ -2159,12 +2467,12 @@ function DesignCanvas({
             onGuidesChange: handleSetPageGuides
           }
         ),
-        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx7(
+        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx8(
           "div",
           {
             className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
             "aria-hidden": true,
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
@@ -2172,7 +2480,7 @@ function DesignCanvas({
                   left: editorState.panX,
                   top: editorState.panY
                 },
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx8(
                   BleedTrimOverlay,
                   {
                     pageWidthPx: activePage.width * editorState.zoom,
@@ -2199,6 +2507,7 @@ function DesignCanvas({
           stack,
           activePage,
           onFitRef: fitRef,
+          onExportRef: exportRef,
           fitOnMount,
           onReady,
           onZoomChange: setZoom,
@@ -2206,8 +2515,8 @@ function DesignCanvas({
           onSelectElements: setSelectedElements
         })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-stretch border-t border-[var(--border-default)]", children: [
-        /* @__PURE__ */ jsx7("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-stretch border-t border-[var(--border-default)]", children: [
+        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx8(
           PagesStrip,
           {
             pages: editorState.document.pages,
@@ -2221,7 +2530,7 @@ function DesignCanvas({
             onReorderPage: handleReorderPage
           }
         ) }),
-        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx8(
           ZoomControls,
           {
             zoom: editorState.zoom,
@@ -2231,7 +2540,7 @@ function DesignCanvas({
         ) })
       ] })
     ] }),
-    renderAgentPanel ? /* @__PURE__ */ jsx7("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__ */ jsx8("aside", { className: "flex w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)]", children: renderAgentPanel({ selectedElements, activePageId: editorState.activePageId }) }) : null
   ] });
 }
 var DesignCanvas_default = DesignCanvas;
@@ -2270,11 +2579,13 @@ export {
   ImageGlyph,
   VideoGlyph,
   SlotGlyph,
+  ShapesGlyph,
   PagesStrip,
   Rulers,
   Toolbar,
   ZoomControls,
+  ExportControl,
   DesignCanvas,
   DesignCanvas_default
 };
-//# sourceMappingURL=chunk-2W4YCAFH.js.map
+//# sourceMappingURL=chunk-LPAVBGVY.js.map