@tangle-network/agent-app 0.42.5 → 0.42.6

package/dist/{chunk-YYYXGLLQ.js → chunk-6JYDS34Y.js}

@@ -1,8 +1,12 @@
 import {
   BleedTrimOverlay,
-  DesignCanvas
-} from "./chunk-YEWTVDDT.js";
+  BrandKnot,
+  DesignCanvas,
+  PlusGlyph,
+  ShapesGlyph
+} from "./chunk-OVUQNKLM.js";
 import {
+  DEFAULT_INSERT_TEMPLATES,
   collectGridTargets,
   createSnapEngine,
   createZoomPanMath,
@@ -12,7 +16,7 @@ import {
   isExportHiddenNodeName,
   marqueeSelect,
   resolveExportParams
-} from "./chunk-V5XZKHCL.js";
+} from "./chunk-AFQXKJAE.js";
 import {
   addElementCommand,
   createSceneCommandStack,
@@ -123,6 +127,82 @@ function downloadDataUrl(dataUrl, filename) {
   globalThis.document.body.removeChild(a);
 }
 
+// src/design-canvas-react/components/CanvasEmptyState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SparkleGlyph({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1" }) });
+}
+function CanvasEmptyState({
+  onStartTemplate,
+  onAddElement,
+  onAskAgent,
+  title = "Start your design",
+  subtitle = "Drop in a template, add an element by hand, or let the agent draft it for you.",
+  className
+}) {
+  const doors = [
+    {
+      key: "template",
+      label: "Start with a template",
+      hint: "A headline, shape, or block to build on",
+      Icon: ShapesGlyph,
+      onClick: onStartTemplate
+    },
+    {
+      key: "element",
+      label: "Add an element",
+      hint: "Place text on the page and edit it",
+      Icon: PlusGlyph,
+      onClick: onAddElement
+    }
+  ];
+  if (onAskAgent) {
+    doors.push({
+      key: "agent",
+      label: "Ask the agent",
+      hint: "Describe what you want made",
+      Icon: SparkleGlyph,
+      onClick: onAskAgent
+    });
+  }
+  return (
+    // Overlay is non-interactive so empty-space clicks reach the canvas; the
+    // centered card re-enables pointer events for its own controls.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `pointer-events-none absolute inset-0 z-20 flex items-center justify-center p-4 ${className ?? ""}`,
+        role: "group",
+        "aria-label": "Start your design",
+        children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex w-full max-w-lg flex-col items-center gap-5 rounded-xl border border-[var(--border-default)] bg-[var(--bg-input)]/95 px-6 py-7 text-center shadow-xl backdrop-blur sm:px-8", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-[var(--text-muted)]", children: [
+            /* @__PURE__ */ jsx(BrandKnot, { size: 22, className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-[0.14em]", children: "Tangle Design" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-[var(--text-secondary)]", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid w-full gap-2 sm:grid-cols-3", children: doors.map(({ key, label, hint, Icon, onClick }) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick,
+              className: "group flex min-h-[44px] flex-col items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[hsl(var(--card))] px-3 py-4 text-center transition-colors hover:border-[var(--brand-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 items-center justify-center rounded-full bg-[var(--brand-primary)]/10 text-[var(--brand-primary)] transition-colors group-hover:bg-[var(--brand-primary)]/15", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[var(--text-primary)]", children: label }),
+                /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-4 text-[var(--text-muted)]", children: hint })
+              ]
+            },
+            key
+          )) })
+        ] })
+      }
+    )
+  );
+}
+
 // src/design-canvas-react/components/ElementNode.tsx
 import { memo, useEffect, useRef, useState } from "react";
 import { Group, Rect, Ellipse, Line, Text, Image as KonvaImage } from "react-konva";
@@ -229,7 +309,7 @@ function gridVisible(gridSize, zoom, minScreenPx = 4) {
 }
 
 // src/design-canvas-react/components/ElementNode.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var IMAGE_CACHE_MAX = 256;
 var imageCache = /* @__PURE__ */ new Map();
 function imageCacheSet(src, img) {
@@ -262,19 +342,19 @@ function ElementNodeImpl(props) {
   if (!element.visible) return null;
   switch (element.kind) {
     case "rect":
-      return /* @__PURE__ */ jsx(RectNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(RectNode, { ...props, element });
     case "ellipse":
-      return /* @__PURE__ */ jsx(EllipseNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(EllipseNode, { ...props, element });
     case "line":
-      return /* @__PURE__ */ jsx(LineNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(LineNode, { ...props, element });
     case "text":
-      return /* @__PURE__ */ jsx(TextNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(TextNode, { ...props, element });
     case "image":
-      return /* @__PURE__ */ jsx(ImageNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(ImageNode, { ...props, element });
     case "video":
-      return /* @__PURE__ */ jsx(VideoNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(VideoNode, { ...props, element });
     case "group":
-      return /* @__PURE__ */ jsx(GroupNode, { ...props, element });
+      return /* @__PURE__ */ jsx2(GroupNode, { ...props, element });
   }
 }
 var ElementNode = memo(ElementNodeImpl);
@@ -322,7 +402,7 @@ function RectNode({ element, ...rest }) {
   const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
   const ref = useRef(null);
   useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Rect,
     {
       ref,
@@ -346,7 +426,7 @@ function EllipseNode({ element, ...rest }) {
   const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
   const ref = useRef(null);
   useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Ellipse,
     {
       ref,
@@ -368,7 +448,7 @@ function LineNode({ element, ...rest }) {
   const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
   const ref = useRef(null);
   useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Line,
     {
       ref,
@@ -396,7 +476,7 @@ function TextNode({ element, ...rest }) {
   const ref = useRef(null);
   useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
   const { fontStyle, fontWeight } = FONT_STYLE_MAP[element.fontStyle];
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Text,
     {
       ref,
@@ -432,7 +512,7 @@ function ImageNode({ element, ...rest }) {
     `${imgReady}:${element.src}:${element.width}x${element.height}:${element.fit}`
   );
   if (!img || !img.complete || img.naturalWidth === 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       Rect,
       {
         ref,
@@ -476,7 +556,7 @@ function ImageNode({ element, ...rest }) {
       };
     }
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     KonvaImage,
     {
       ref,
@@ -507,7 +587,7 @@ function VideoNode({ element, ...rest }) {
     `${posterReady}:${element.posterSrc ?? ""}:${element.width}x${element.height}`
   );
   if (!element.posterSrc || !img || !img.complete || img.naturalWidth === 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx2(
       Rect,
       {
         ref,
@@ -525,7 +605,7 @@ function VideoNode({ element, ...rest }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     KonvaImage,
     {
       ref,
@@ -544,7 +624,7 @@ function VideoNode({ element, ...rest }) {
 function GroupNode({ element, ...rest }) {
   const { dragging: _dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
   void _dragging;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Group,
     {
       name: element.id,
@@ -553,7 +633,7 @@ function GroupNode({ element, ...rest }) {
       rotation: element.rotation,
       opacity: element.opacity,
       ...drag,
-      children: element.children.map((child) => /* @__PURE__ */ jsx(ElementNode, { ...rest, element: child }, child.id))
+      children: element.children.map((child) => /* @__PURE__ */ jsx2(ElementNode, { ...rest, element: child }, child.id))
     }
   );
 }
@@ -561,7 +641,7 @@ function GroupNode({ element, ...rest }) {
 // src/design-canvas-react/components/SelectionLayer.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { Layer, Transformer } from "react-konva";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var MIN_SIZE = 4;
 function SelectionLayer({
   stageRef,
@@ -612,7 +692,7 @@ function SelectionLayer({
     // regions have no shapes, so pointer hits fall through to the content layer.
     // Export exclusion is unaffected: export.ts hides nodes by the 'overlay:'
     // name prefix, not by `listening` (see export-math.isExportHiddenNodeName).
-    /* @__PURE__ */ jsx2(Layer, { name: "overlay:selection", listening: canWrite, children: /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(Layer, { name: "overlay:selection", listening: canWrite, children: /* @__PURE__ */ jsx3(
       Transformer,
       {
         ref: trRef,
@@ -725,7 +805,7 @@ function bakeNodeToAttrs(node, element) {
 
 // src/design-canvas-react/components/GridLayer.tsx
 import { Layer as Layer2, Group as Group2, Shape } from "react-konva";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function gridVerticalLines(pageWidth, gridSize) {
   const out = [];
   if (gridSize <= 0) return out;
@@ -766,7 +846,7 @@ function GridLayer({
     ctx.stroke();
     void shape;
   };
-  return /* @__PURE__ */ jsx3(Layer2, { name: "overlay:grid", listening: false, children: /* @__PURE__ */ jsx3(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(Layer2, { name: "overlay:grid", listening: false, children: /* @__PURE__ */ jsx4(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx4(
     Shape,
     {
       name: "overlay:grid-shape",
@@ -782,7 +862,7 @@ function GridLayer({
 
 // src/design-canvas-react/components/SnapGuidesOverlay.tsx
 import { Layer as Layer3, Line as Line2 } from "react-konva";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function kindColors(render) {
   return {
     "grid": render.snapGrid,
@@ -804,8 +884,8 @@ function SnapGuidesOverlay({
   if (!activeVertical && !activeHorizontal) return null;
   const KIND_COLOR = kindColors(render);
   const strokeWidth = 1 / zoom;
-  return /* @__PURE__ */ jsxs(Layer3, { name: "overlay:snap", listening: false, children: [
-    activeVertical && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs2(Layer3, { name: "overlay:snap", listening: false, children: [
+    activeVertical && /* @__PURE__ */ jsx5(
       Line2,
       {
         name: "overlay:snap-vertical",
@@ -817,7 +897,7 @@ function SnapGuidesOverlay({
         perfectDrawEnabled: false
       }
     ),
-    activeHorizontal && /* @__PURE__ */ jsx4(
+    activeHorizontal && /* @__PURE__ */ jsx5(
       Line2,
       {
         name: "overlay:snap-horizontal",
@@ -834,7 +914,7 @@ function SnapGuidesOverlay({
 
 // src/design-canvas-react/components/InlineTextEditor.tsx
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function InlineTextEditor({
   element,
   zoom,
@@ -877,7 +957,7 @@ function InlineTextEditor({
   }
   const fontWeight = element.fontStyle.includes("bold") ? "bold" : "normal";
   const fontStyle = element.fontStyle.includes("italic") ? "italic" : "normal";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "textarea",
     {
       ref,
@@ -919,7 +999,7 @@ function InlineTextEditor({
 }
 
 // src/design-canvas-react/components/Workspace.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_SCREEN_PX = 8;
 var DUPLICATE_OFFSET = 10;
 var ZOOM_FACTOR_WHEEL = 0.998;
@@ -938,7 +1018,9 @@ function WorkspaceView({
   onExportRef,
   fitOnMount = true,
   onReady,
-  render = lightTheme.canvasRender
+  render = lightTheme.canvasRender,
+  showEmptyState = true,
+  onAskAgent
 }) {
   const [, setTick] = useState2(0);
   const forceRender = useCallback(() => setTick((t) => t + 1), []);
@@ -1202,6 +1284,43 @@ function WorkspaceView({
     if (!canWrite || entries.length === 0) return;
     await persist(multiSetAttrsCommand(entries));
   }
+  async function handleStartTemplate() {
+    if (!canWrite) return;
+    const template = DEFAULT_INSERT_TEMPLATES[0];
+    if (!template) return;
+    const ops = template.build({ pageId: activePageId, width: activePage.width, height: activePage.height });
+    for (const op of ops) {
+      if (op.type === "add_element") {
+        await persist(addElementCommand({ pageId: op.pageId, element: op.element }));
+      }
+    }
+  }
+  async function handleAddElement() {
+    if (!canWrite) return;
+    const width = Math.min(420, Math.round(activePage.width * 0.6)) || 320;
+    const element = {
+      id: crypto.randomUUID(),
+      kind: "text",
+      name: "Text",
+      x: Math.max(0, Math.round((activePage.width - width) / 2)),
+      y: Math.max(0, Math.round(activePage.height / 2 - 24)),
+      rotation: 0,
+      opacity: 1,
+      locked: false,
+      visible: true,
+      width,
+      text: "Double-click to edit",
+      fontFamily: "Inter",
+      fontSize: 32,
+      fontStyle: "normal",
+      fill: "#111827",
+      align: "left",
+      lineHeight: 1.2,
+      letterSpacing: 0
+    };
+    await persist(addElementCommand({ pageId: activePageId, element }));
+    stack.setView({ selectedElementIds: [element.id] });
+  }
   function handleKeyDown(e) {
     if (e.key === " ") {
       e.preventDefault();
@@ -1407,7 +1526,7 @@ function WorkspaceView({
       (el) => pinned.has(el.id) || boundsIntersect(elementAabb(el), pageRect)
     );
   }, [activePage.elements, activePage.width, activePage.height, selectedElementIds, editingElementId]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: `design-canvas-workspace relative overflow-hidden bg-[var(--canvas-backdrop,#1a1a1a)] outline-none ${className ?? ""}`,
@@ -1419,9 +1538,9 @@ function WorkspaceView({
       onPointerUp: handlePointerUp,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
-      style: { cursor: spaceHeldRef.current ? "grab" : "default" },
+      style: { cursor: spaceHeldRef.current ? "grab" : "default", touchAction: "none" },
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           Stage,
           {
             ref: stageRef,
@@ -1430,7 +1549,7 @@ function WorkspaceView({
             pixelRatio: dpr,
             listening: true,
             children: [
-              gridEnabled && /* @__PURE__ */ jsx6(
+              gridEnabled && /* @__PURE__ */ jsx7(
                 GridLayer,
                 {
                   pageWidth: activePage.width,
@@ -1442,8 +1561,8 @@ function WorkspaceView({
                   color: render.grid
                 }
               ),
-              /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsxs2(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: [
-                /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(Layer4, { children: /* @__PURE__ */ jsxs3(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: [
+                /* @__PURE__ */ jsx7(
                   Rect2,
                   {
                     name: "page-background",
@@ -1458,14 +1577,14 @@ function WorkspaceView({
                     listening: false
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   Group3,
                   {
                     clipX: 0,
                     clipY: 0,
                     clipWidth: activePage.width,
                     clipHeight: activePage.height,
-                    children: visibleElements.map((element) => /* @__PURE__ */ jsx6(
+                    children: visibleElements.map((element) => /* @__PURE__ */ jsx7(
                       ElementNode,
                       {
                         element,
@@ -1483,7 +1602,7 @@ function WorkspaceView({
                   }
                 )
               ] }) }),
-              (activeVerticalGuide || activeHorizontalGuide) && /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsx6(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx6(
+              (activeVerticalGuide || activeHorizontalGuide) && /* @__PURE__ */ jsx7(Layer4, { children: /* @__PURE__ */ jsx7(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx7(
                 SnapGuidesOverlay,
                 {
                   pageWidth: activePage.width,
@@ -1494,7 +1613,7 @@ function WorkspaceView({
                   render
                 }
               ) }) }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 SelectionLayer,
                 {
                   stageRef,
@@ -1509,12 +1628,12 @@ function WorkspaceView({
             ]
           }
         ),
-        showBleed && activePage.bleed && /* @__PURE__ */ jsx6(
+        showBleed && activePage.bleed && /* @__PURE__ */ jsx7(
           "div",
           {
             className: "pointer-events-none absolute",
             style: { left: pageScreenX, top: pageScreenY, width: pageScreenW, height: pageScreenH },
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               BleedTrimOverlay,
               {
                 pageWidthPx: pageScreenW,
@@ -1529,7 +1648,7 @@ function WorkspaceView({
             )
           }
         ),
-        normalizedMarquee && /* @__PURE__ */ jsx6(
+        normalizedMarquee && /* @__PURE__ */ jsx7(
           "div",
           {
             className: "pointer-events-none absolute border border-blue-400 bg-blue-400/10",
@@ -1541,7 +1660,7 @@ function WorkspaceView({
             }
           }
         ),
-        editingTextElement && /* @__PURE__ */ jsx6(
+        editingTextElement && /* @__PURE__ */ jsx7(
           InlineTextEditor,
           {
             element: editingTextElement,
@@ -1551,7 +1670,15 @@ function WorkspaceView({
             onCommit: handleTextCommit,
             onCancel: handleTextCancel
           }
-        )
+        ),
+        showEmptyState && canWrite && activePage.elements.length === 0 && !editingElementId ? /* @__PURE__ */ jsx7(
+          CanvasEmptyState,
+          {
+            onStartTemplate: () => void handleStartTemplate(),
+            onAddElement: () => void handleAddElement(),
+            onAskAgent
+          }
+        ) : null
       ]
     }
   );
@@ -1578,7 +1705,7 @@ function Workspace(props) {
   const state = stackRef.current.getState();
   const activePage = state.document.pages.find((p) => p.id === state.activePageId) ?? state.document.pages[0];
   if (!activePage) return null;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     WorkspaceView,
     {
       stack: stackRef.current,
@@ -1593,7 +1720,7 @@ function Workspace(props) {
 }
 
 // src/design-canvas-react/components/DesignCanvasEditor.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var THUMBNAIL_HEIGHT_PX = 96;
 var thumbnailCache = /* @__PURE__ */ new Map();
 var THUMBNAIL_CACHE_LIMIT = 200;
@@ -1730,13 +1857,13 @@ function paintElements(Konva, parent, elements) {
   }
 }
 function DesignCanvasEditor(props) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     DesignCanvas,
     {
       ...props,
       renderWorkspace: (ctx) => {
         if (!ctx.activePage) return null;
-        return /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx8(
           WorkspaceView,
           {
             stack: ctx.stack,
@@ -1749,7 +1876,9 @@ function DesignCanvasEditor(props) {
             onExportRef: ctx.onExportRef,
             fitOnMount: ctx.fitOnMount,
             onReady: ctx.onReady,
-            render: ctx.render
+            render: ctx.render,
+            showEmptyState: ctx.showEmptyState,
+            onAskAgent: ctx.onAskAgent
           }
         );
       },
@@ -1762,6 +1891,7 @@ export {
   exportPageDataUrl,
   exportDocumentJson,
   downloadDataUrl,
+  CanvasEmptyState,
   bakeRectTransform,
   bakeLineTransform,
   bakeTextTransform,
@@ -1772,4 +1902,4 @@ export {
   Workspace,
   DesignCanvasEditor
 };
-//# sourceMappingURL=chunk-YYYXGLLQ.js.map
+//# sourceMappingURL=chunk-6JYDS34Y.js.map