@tangle-network/agent-app 0.22.0 → 0.23.0

package/dist/design-canvas-react/index.js

@@ -56,6 +56,7 @@ import {
 } from "../chunk-2W4YCAFH.js";
 import {
   SCENE_SCHEMA_VERSION,
+  assertSceneMediaSrc,
   bleedAwareExportBounds,
   scaleForPreset
 } from "../chunk-JZAJE3JL.js";
@@ -175,8 +176,326 @@ function downloadDataUrl(dataUrl, filename) {
   globalThis.document.body.removeChild(a);
 }
 
+// src/design-canvas-react/insert-builders.ts
+var MAX_INSERT_DIMENSION = 600;
+function mintElementId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `el-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+function fittedSize(naturalW, naturalH, pageWidth, pageHeight) {
+  const cap = Math.min(MAX_INSERT_DIMENSION, pageWidth * 0.8, pageHeight * 0.8);
+  const longest = Math.max(naturalW, naturalH);
+  const scale = naturalW > 0 && naturalH > 0 ? Math.min(1, cap / longest) : 1;
+  const width = Math.max(1, Math.round((naturalW || cap) * scale));
+  const height = Math.max(1, Math.round((naturalH || cap) * scale));
+  return { width, height };
+}
+function centeredPosition(width, height, pageWidth, pageHeight) {
+  return {
+    x: Math.round((pageWidth - width) / 2),
+    y: Math.round((pageHeight - height) / 2)
+  };
+}
+function baseAttrs(name, x, y) {
+  return { id: mintElementId(), name, x, y, rotation: 0, opacity: 1, locked: false, visible: true };
+}
+function addElementOp(pageId, element) {
+  return { type: "add_element", pageId, element };
+}
+function buildInsertImageOp(src, naturalSize, page) {
+  assertSceneMediaSrc(src, "image src");
+  const { width, height } = fittedSize(naturalSize.width, naturalSize.height, page.width, page.height);
+  const { x, y } = centeredPosition(width, height, page.width, page.height);
+  const element = {
+    ...baseAttrs("Image", x, y),
+    kind: "image",
+    width,
+    height,
+    src,
+    fit: "contain"
+  };
+  return addElementOp(page.pageId, element);
+}
+var DEFAULT_INSERT_TEMPLATES = [
+  {
+    id: "heading",
+    label: "Heading",
+    build(page) {
+      const width = Math.min(480, Math.round(page.width * 0.7));
+      const { x, y } = centeredPosition(width, 60, page.width, page.height);
+      const element = {
+        ...baseAttrs("Heading", x, y),
+        kind: "text",
+        text: "Add a headline",
+        width,
+        fontFamily: "Inter",
+        fontSize: 48,
+        fontStyle: "bold",
+        fill: "#111827",
+        align: "left",
+        lineHeight: 1.1,
+        letterSpacing: 0
+      };
+      return [addElementOp(page.pageId, element)];
+    }
+  },
+  {
+    id: "body",
+    label: "Body text",
+    build(page) {
+      const width = Math.min(420, Math.round(page.width * 0.6));
+      const { x, y } = centeredPosition(width, 80, page.width, page.height);
+      const element = {
+        ...baseAttrs("Body", x, y),
+        kind: "text",
+        text: "Add a paragraph of supporting copy.",
+        width,
+        fontFamily: "Inter",
+        fontSize: 20,
+        fontStyle: "normal",
+        fill: "#374151",
+        align: "left",
+        lineHeight: 1.4,
+        letterSpacing: 0
+      };
+      return [addElementOp(page.pageId, element)];
+    }
+  },
+  {
+    id: "rect",
+    label: "Rectangle",
+    build(page) {
+      const width = Math.min(320, Math.round(page.width * 0.4));
+      const height = Math.min(200, Math.round(page.height * 0.3));
+      const { x, y } = centeredPosition(width, height, page.width, page.height);
+      const element = {
+        ...baseAttrs("Rectangle", x, y),
+        kind: "rect",
+        width,
+        height,
+        fill: "#6366f1",
+        cornerRadius: 12
+      };
+      return [addElementOp(page.pageId, element)];
+    }
+  },
+  {
+    id: "ellipse",
+    label: "Ellipse",
+    build(page) {
+      const size = Math.min(220, Math.round(Math.min(page.width, page.height) * 0.3));
+      const { x, y } = centeredPosition(size, size, page.width, page.height);
+      const element = {
+        ...baseAttrs("Ellipse", x, y),
+        kind: "ellipse",
+        width: size,
+        height: size,
+        fill: "#10b981"
+      };
+      return [addElementOp(page.pageId, element)];
+    }
+  }
+];
+
+// src/design-canvas-react/components/CanvasInsertPanel.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ACCEPT = "image/png,image/jpeg,image/gif,image/webp";
+var PROBE_TIMEOUT_MS = 4e3;
+function probeImageSize(url) {
+  return new Promise((resolve) => {
+    if (typeof Image === "undefined") return resolve({ width: 0, height: 0 });
+    let settled = false;
+    const finish = (size) => {
+      if (settled) return;
+      settled = true;
+      resolve(size);
+    };
+    const img = new Image();
+    img.onload = () => finish({ width: img.naturalWidth, height: img.naturalHeight });
+    img.onerror = () => finish({ width: 0, height: 0 });
+    setTimeout(() => finish({ width: 0, height: 0 }), PROBE_TIMEOUT_MS);
+    img.src = url;
+  });
+}
+function UploadGlyph({ 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: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 9l5-5 5 5M12 4v12" }) });
+}
+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 SpinnerGlyph({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className: `${className ?? ""} animate-spin`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.2-8.6", strokeLinecap: "round" }) });
+}
+function CanvasInsertPanel({
+  canWrite,
+  page,
+  onInsert,
+  onUploadImage,
+  loadGenerations,
+  templates = DEFAULT_INSERT_TEMPLATES,
+  accept = DEFAULT_ACCEPT,
+  className
+}) {
+  const [tab, setTab] = useState("uploads");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [dragOver, setDragOver] = useState(false);
+  const [generations, setGenerations] = useState([]);
+  const [generationsLoaded, setGenerationsLoaded] = useState(false);
+  const fileInputRef = useRef(null);
+  useEffect(() => {
+    if (tab !== "generations" || generationsLoaded || !loadGenerations) return;
+    let cancelled = false;
+    void (async () => {
+      try {
+        const rows = await loadGenerations();
+        if (!cancelled) setGenerations(rows.filter((g) => g.url));
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : "Could not load generations");
+      } finally {
+        if (!cancelled) setGenerationsLoaded(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [tab, generationsLoaded, loadGenerations]);
+  async function insertImageFromUrl(url) {
+    assertSceneMediaSrc(url, "image src");
+    const natural = await probeImageSize(url);
+    await onInsert([buildInsertImageOp(url, natural, page)]);
+  }
+  async function handleFiles(files) {
+    if (!canWrite || busy) return;
+    const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
+    if (list.length === 0) {
+      setError("Only image files can be added to the canvas");
+      return;
+    }
+    setBusy(true);
+    setError("");
+    try {
+      for (const file of list) {
+        const url = await onUploadImage(file);
+        await insertImageFromUrl(url);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function runInsert(build) {
+    if (!canWrite || busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      await onInsert(await build());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Insert failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  const tabs = [
+    { id: "uploads", label: "Uploads", icon: ImageGlyph, show: true },
+    { id: "templates", label: "Templates", icon: TextGlyph, show: templates.length > 0 },
+    { id: "generations", label: "Generations", icon: SparkleGlyph, show: !!loadGenerations }
+  ];
+  const visibleTabs = tabs.filter((t) => t.show);
+  return /* @__PURE__ */ jsxs("div", { className: `flex h-full min-h-0 flex-col bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 border-b border-[var(--border-default)]", children: visibleTabs.map(({ id, label, icon: Icon }) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setTab(id),
+        className: `flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors ${tab === id ? "border-b-2 border-[var(--brand-primary)] text-[var(--text-primary)]" : "text-[var(--text-muted)] hover:text-[var(--text-primary)]"}`,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
+          label
+        ]
+      },
+      id
+    )) }),
+    !canWrite ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--text-muted)]", children: "You have view-only access to this design." }) : /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: [
+      tab === "uploads" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled: busy,
+            onClick: () => fileInputRef.current?.click(),
+            onDragOver: (e) => {
+              e.preventDefault();
+              setDragOver(true);
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: (e) => {
+              e.preventDefault();
+              setDragOver(false);
+              if (e.dataTransfer?.files?.length) void handleFiles(e.dataTransfer.files);
+            },
+            className: `flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors disabled:opacity-50 ${dragOver ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]/5" : "border-[var(--border-default)] hover:border-[var(--brand-primary)]/40"}`,
+            children: [
+              busy ? /* @__PURE__ */ jsx(SpinnerGlyph, { className: "h-6 w-6 text-[var(--brand-primary)]" }) : /* @__PURE__ */ jsx(UploadGlyph, { className: "h-6 w-6 text-[var(--text-muted)]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: busy ? "Uploading\u2026" : "Drop an image or click to upload" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--text-muted)]", children: "PNG, JPEG, GIF, or WebP" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept,
+            multiple: true,
+            className: "hidden",
+            onChange: (e) => {
+              if (e.target.files?.length) void handleFiles(e.target.files);
+              e.target.value = "";
+            }
+          }
+        )
+      ] }),
+      tab === "templates" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: templates.map((tpl) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => void runInsert(() => tpl.build(page)),
+          className: "flex h-20 flex-col items-center justify-center gap-1.5 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40 disabled:opacity-50",
+          children: /* @__PURE__ */ jsx("span", { children: tpl.label })
+        },
+        tpl.id
+      )) }),
+      tab === "generations" && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: !generationsLoaded ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-[var(--text-muted)]", children: /* @__PURE__ */ jsx(SpinnerGlyph, { className: "h-5 w-5" }) }) : generations.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-6 text-center text-sm text-[var(--text-muted)]", children: "No generated images yet. Ask the agent to generate one." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: generations.map((gen) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => {
+            if (busy || !canWrite) return;
+            setBusy(true);
+            setError("");
+            insertImageFromUrl(gen.url).catch((err) => setError(err instanceof Error ? err.message : "Insert failed")).finally(() => setBusy(false));
+          },
+          title: gen.label,
+          className: "group relative aspect-square overflow-hidden rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] transition-colors hover:border-[var(--brand-primary)] disabled:opacity-50",
+          children: /* @__PURE__ */ jsx("img", { src: gen.url, alt: gen.label || "Generated image", className: "h-full w-full object-cover" })
+        },
+        gen.id
+      )) }) }),
+      error ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-xs leading-5 text-[var(--text-danger,#dc2626)]", children: error }) : null
+    ] })
+  ] });
+}
+
 // src/design-canvas-react/components/LayersPanel.tsx
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/design-canvas-react/components/layer-tree.ts
 function flattenLayerTree(page) {
@@ -203,32 +522,32 @@ function flattenLayerTree(page) {
 var LAYERS_PANEL_ROW_LIMIT = 500;
 
 // src/design-canvas-react/components/LayersPanel.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function KindIcon({ kind, className }) {
   switch (kind) {
     case "rect":
-      return /* @__PURE__ */ jsx(RectGlyph, { className });
+      return /* @__PURE__ */ jsx2(RectGlyph, { className });
     case "ellipse":
-      return /* @__PURE__ */ jsx(EllipseGlyph, { className });
+      return /* @__PURE__ */ jsx2(EllipseGlyph, { className });
     case "line":
-      return /* @__PURE__ */ jsx(LineGlyph, { className });
+      return /* @__PURE__ */ jsx2(LineGlyph, { className });
     case "text":
-      return /* @__PURE__ */ jsx(TextGlyph, { className });
+      return /* @__PURE__ */ jsx2(TextGlyph, { className });
     case "image":
-      return /* @__PURE__ */ jsx(ImageGlyph, { className });
+      return /* @__PURE__ */ jsx2(ImageGlyph, { className });
     case "video":
-      return /* @__PURE__ */ jsx(VideoGlyph, { className });
+      return /* @__PURE__ */ jsx2(VideoGlyph, { className });
     case "group":
-      return /* @__PURE__ */ jsx(GroupGlyph, { className });
+      return /* @__PURE__ */ jsx2(GroupGlyph, { className });
   }
 }
 var INDENT_PX = 16;
 function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder, onSelect }) {
   const rows = useMemo(() => flattenLayerTree(page), [page]);
-  const [renamingId, setRenamingId] = useState(null);
-  const [renameValue, setRenameValue] = useState("");
-  const dragRowRef = useRef(null);
-  const [dragOverIndex, setDragOverIndex] = useState(null);
+  const [renamingId, setRenamingId] = useState2(null);
+  const [renameValue, setRenameValue] = useState2("");
+  const dragRowRef = useRef2(null);
+  const [dragOverIndex, setDragOverIndex] = useState2(null);
   function startRename(element) {
     setRenamingId(element.id);
     setRenameValue(element.name);
@@ -239,14 +558,14 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
     setRenamingId(null);
   }
   const visible = rows.length > LAYERS_PANEL_ROW_LIMIT ? rows.slice(0, LAYERS_PANEL_ROW_LIMIT) : rows;
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden text-[var(--text-primary)]", children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-[var(--border-default)] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: "Layers" }),
-    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col overflow-hidden text-[var(--text-primary)]", children: [
+    /* @__PURE__ */ jsx2("div", { className: "shrink-0 border-b border-[var(--border-default)] px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: "Layers" }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
       visible.map((row) => {
         const { element } = row;
         const isSelected = selectedElementIds.includes(element.id);
         const isRenaming = renamingId === element.id;
-        return /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs2(
           "div",
           {
             "data-layer-row": element.id,
@@ -285,9 +604,9 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
             ].join(" "),
             style: { paddingLeft: 8 + row.depth * INDENT_PX },
             children: [
-              /* @__PURE__ */ jsx(KindIcon, { kind: element.kind, className: "h-3.5 w-3.5 shrink-0 opacity-60" }),
-              element.slot ? /* @__PURE__ */ jsx(SlotGlyph, { className: "h-3 w-3 shrink-0 text-[var(--brand-primary)]" }) : null,
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: isRenaming ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(KindIcon, { kind: element.kind, className: "h-3.5 w-3.5 shrink-0 opacity-60" }),
+              element.slot ? /* @__PURE__ */ jsx2(SlotGlyph, { className: "h-3 w-3 shrink-0 text-[var(--brand-primary)]" }) : null,
+              /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: isRenaming ? /* @__PURE__ */ jsx2(
                 "input",
                 {
                   autoFocus: true,
@@ -302,7 +621,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
                   onClick: (event) => event.stopPropagation(),
                   className: "w-full rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0 text-[13px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : /* @__PURE__ */ jsx2(
                 "span",
                 {
                   onDoubleClick: (event) => {
@@ -313,7 +632,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
                   children: element.name
                 }
               ) }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -324,10 +643,10 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
                   },
                   disabled: !canWrite,
                   className: "shrink-0 rounded p-0.5 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 group-hover:opacity-100 [.flex:hover_&]:opacity-60",
-                  children: element.visible ? /* @__PURE__ */ jsx(EyeGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(EyeOffGlyph, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" })
+                  children: element.visible ? /* @__PURE__ */ jsx2(EyeGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx2(EyeOffGlyph, { className: "h-3.5 w-3.5 text-[var(--text-muted)]" })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx2(
                 "button",
                 {
                   type: "button",
@@ -338,7 +657,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
                   },
                   disabled: !canWrite,
                   className: "shrink-0 rounded p-0.5 opacity-0 transition-opacity hover:opacity-100 focus:opacity-100 [.flex:hover_&]:opacity-60",
-                  children: element.locked ? /* @__PURE__ */ jsx(LockGlyph, { className: "h-3.5 w-3.5 text-amber-400" }) : /* @__PURE__ */ jsx(UnlockGlyph, { className: "h-3.5 w-3.5" })
+                  children: element.locked ? /* @__PURE__ */ jsx2(LockGlyph, { className: "h-3.5 w-3.5 text-amber-400" }) : /* @__PURE__ */ jsx2(UnlockGlyph, { className: "h-3.5 w-3.5" })
                 }
               )
             ]
@@ -346,7 +665,7 @@ function LayersPanel({ page, selectedElementIds, canWrite, onSetAttrs, onReorder
           element.id
         );
       }),
-      rows.length > LAYERS_PANEL_ROW_LIMIT ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: [
+      rows.length > LAYERS_PANEL_ROW_LIMIT ? /* @__PURE__ */ jsxs2("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: [
         "+",
         rows.length - LAYERS_PANEL_ROW_LIMIT,
         " more elements \u2014 select a group to scope the list"
@@ -364,6 +683,8 @@ var DesignCanvasChromeLazy = lazy(
   () => import("../DesignCanvas-JTSAL6KX.js").then((m) => ({ default: m.DesignCanvas }))
 );
 export {
+  CanvasInsertPanel,
+  DEFAULT_INSERT_TEMPLATES,
   DUPLICATE_OFFSET,
   DesignCanvas,
   DesignCanvasChromeLazy,
@@ -373,6 +694,7 @@ export {
   GridLayer,
   LAYERS_PANEL_ROW_LIMIT,
   LayersPanel,
+  MAX_INSERT_DIMENSION,
   PagesStrip,
   Rulers,
   SCENE_COMMAND_HISTORY_LIMIT,
@@ -388,7 +710,9 @@ export {
   bakeTextTransform,
   bindSlotCommand,
   bleedAwareExportBounds,
+  buildInsertImageOp,
   buildRulerTicks,
+  centeredPosition,
   collectGridTargets,
   createSceneCommandStack,
   createSnapEngine,
@@ -400,6 +724,7 @@ export {
   duplicatePageCommand,
   exportDocumentJson,
   exportPageDataUrl,
+  fittedSize,
   flattenLayerTree,
   formatRulerLabel,
   groupElementsCommand,
@@ -407,6 +732,7 @@ export {
   isCrossOriginSrc,
   isExportHiddenNodeName,
   marqueeSelect,
+  mintElementId,
   multiSetAttrsCommand,
   nudgeDelta,
   reorderElementCommand,