@bendyline/squisq-editor-react 2.2.0 → 2.3.1

package/dist/chunk-V44VP242.js

@@ -0,0 +1,3256 @@
+import {
+  Icon
+} from "./chunk-GS7QWYFT.js";
+
+// src/ImageViewer.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MIN_ZOOM = 0.1;
+var MAX_ZOOM = 16;
+var ZOOM_STEP = 1.25;
+function ImageViewer({ src, alt = "", className, theme = "light" }) {
+  const imgRef = useRef(null);
+  const stageRef = useRef(null);
+  const [naturalSize, setNaturalSize] = useState(null);
+  const [fitZoom, setFitZoom] = useState(1);
+  const [state, setState] = useState({ mode: "fit" });
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setNaturalSize(null);
+    setState({ mode: "fit" });
+    setPan({ x: 0, y: 0 });
+    setError(null);
+  }, [src]);
+  const recomputeFitZoom = useCallback(() => {
+    const stage = stageRef.current;
+    if (!stage || !naturalSize) return;
+    const { clientWidth, clientHeight } = stage;
+    if (clientWidth === 0 || clientHeight === 0) return;
+    const fit = Math.min(clientWidth / naturalSize.w, clientHeight / naturalSize.h, 1);
+    setFitZoom(fit > 0 ? fit : 1);
+  }, [naturalSize]);
+  useEffect(() => {
+    recomputeFitZoom();
+    if (typeof ResizeObserver === "undefined") return;
+    const stage = stageRef.current;
+    if (!stage) return;
+    const ro = new ResizeObserver(() => recomputeFitZoom());
+    ro.observe(stage);
+    return () => ro.disconnect();
+  }, [recomputeFitZoom]);
+  const handleLoad = useCallback(() => {
+    const img = imgRef.current;
+    if (!img) return;
+    setNaturalSize({ w: img.naturalWidth, h: img.naturalHeight });
+  }, []);
+  const handleError = useCallback(() => {
+    setError("Failed to load image");
+  }, []);
+  const effectiveZoom = state.mode === "fit" ? fitZoom : state.zoom;
+  const setZoom = useCallback((next) => {
+    const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, next));
+    setState({ mode: "manual", zoom: clamped });
+  }, []);
+  const onFit = useCallback(() => {
+    setState({ mode: "fit" });
+    setPan({ x: 0, y: 0 });
+  }, []);
+  const onActual = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [setZoom]);
+  const onZoomIn = useCallback(() => setZoom(effectiveZoom * ZOOM_STEP), [effectiveZoom, setZoom]);
+  const onZoomOut = useCallback(() => setZoom(effectiveZoom / ZOOM_STEP), [effectiveZoom, setZoom]);
+  const dragRef = useRef(
+    null
+  );
+  const onMouseDown = useCallback(
+    (e) => {
+      if (effectiveZoom <= fitZoom) return;
+      dragRef.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
+      e.preventDefault();
+    },
+    [effectiveZoom, fitZoom, pan.x, pan.y]
+  );
+  useEffect(() => {
+    const onMove = (e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setPan({
+        x: drag.panX + (e.clientX - drag.startX),
+        y: drag.panY + (e.clientY - drag.startY)
+      });
+    };
+    const onUp = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+  const isPannable = effectiveZoom > fitZoom + 1e-6;
+  const imgStyle = naturalSize ? {
+    width: `${naturalSize.w * effectiveZoom}px`,
+    height: `${naturalSize.h * effectiveZoom}px`,
+    transform: `translate(${pan.x}px, ${pan.y}px)`
+  } : { maxWidth: "100%", maxHeight: "100%" };
+  const containerCls = ["squisq-image-viewer", `squisq-image-viewer--${theme}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: containerCls, "data-testid": "image-viewer", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: stageRef,
+        className: "squisq-image-viewer-stage",
+        onMouseDown,
+        style: { cursor: isPannable ? dragRef.current ? "grabbing" : "grab" : "default" },
+        children: [
+          error ? /* @__PURE__ */ jsx("div", { className: "squisq-image-viewer-error", children: error }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref: imgRef,
+              src,
+              alt,
+              className: "squisq-image-viewer-img",
+              style: imgStyle,
+              onLoad: handleLoad,
+              onError: handleError,
+              draggable: false
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "squisq-image-viewer-toolbar", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-image-viewer-btn",
+                onClick: onZoomOut,
+                "aria-label": "Zoom out",
+                title: "Zoom out",
+                children: "\u2212"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-image-viewer-btn",
+                onClick: onFit,
+                "aria-pressed": state.mode === "fit",
+                title: "Fit to viewport",
+                children: "Fit"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-image-viewer-btn",
+                onClick: onActual,
+                title: "Actual size (100%)",
+                children: "100%"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "squisq-image-viewer-btn",
+                onClick: onZoomIn,
+                "aria-label": "Zoom in",
+                title: "Zoom in",
+                children: "+"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "squisq-image-viewer-status", children: naturalSize ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        naturalSize.w,
+        " \xD7 ",
+        naturalSize.h
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        Math.round(effectiveZoom * 100),
+        "%"
+      ] })
+    ] }) : /* @__PURE__ */ jsx("span", { children: "Loading\u2026" }) })
+  ] });
+}
+
+// src/imageEditor/state.ts
+import {
+  addLayer,
+  removeLayer,
+  reorderLayer,
+  setCanvas,
+  updateLayer,
+  touch
+} from "@bendyline/squisq/imageEdit";
+function initialImageEditorState(doc) {
+  return {
+    doc,
+    selectedLayerId: null,
+    tool: "select",
+    shapeKind: "rectangle",
+    dirty: false
+  };
+}
+function imageEditorReducer(state, action) {
+  switch (action.type) {
+    case "load":
+      return {
+        doc: action.doc,
+        selectedLayerId: null,
+        tool: "select",
+        shapeKind: state.shapeKind,
+        dirty: false
+      };
+    case "mark-clean":
+      return state.dirty ? { ...state, dirty: false } : state;
+    case "set-tool":
+      return state.tool === action.tool ? state : { ...state, tool: action.tool };
+    case "set-shape-kind":
+      return state.shapeKind === action.kind ? state : { ...state, shapeKind: action.kind };
+    case "select":
+      return state.selectedLayerId === action.layerId ? state : { ...state, selectedLayerId: action.layerId };
+    case "set-canvas": {
+      const next = setCanvas(state.doc, action.canvas);
+      return next === state.doc ? state : { ...state, doc: next, dirty: true };
+    }
+    case "add-layer": {
+      const next = addLayer(state.doc, action.layer);
+      const newId = next.layers[next.layers.length - 1].id;
+      return {
+        ...state,
+        doc: next,
+        dirty: true,
+        selectedLayerId: action.select === false ? state.selectedLayerId : newId
+      };
+    }
+    case "remove-layer": {
+      const next = removeLayer(state.doc, action.layerId);
+      if (next === state.doc) return state;
+      return {
+        ...state,
+        doc: next,
+        dirty: true,
+        selectedLayerId: state.selectedLayerId === action.layerId ? null : state.selectedLayerId
+      };
+    }
+    case "update-layer": {
+      const next = updateLayer(state.doc, action.layerId, action.patch);
+      return next === state.doc ? state : { ...state, doc: next, dirty: true };
+    }
+    case "reorder-layer": {
+      const next = reorderLayer(state.doc, action.layerId, action.toIndex);
+      return next === state.doc ? state : { ...state, doc: next, dirty: true };
+    }
+    case "crop": {
+      const { rect } = action;
+      const newCanvas = {
+        ...state.doc.canvas,
+        width: Math.max(1, Math.round(rect.width)),
+        height: Math.max(1, Math.round(rect.height))
+      };
+      const translated = state.doc.layers.map((layer) => {
+        const { position } = layer;
+        const x = typeof position.x === "number" ? position.x - rect.x : position.x;
+        const y = typeof position.y === "number" ? position.y - rect.y : position.y;
+        return { ...layer, position: { ...position, x, y } };
+      });
+      const next = touch({ ...state.doc, canvas: newCanvas, layers: translated });
+      return { ...state, doc: next, dirty: true };
+    }
+  }
+}
+
+// src/imageEditor/useImageEditor.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useReducer, useRef as useRef2, useState as useState2 } from "react";
+import {
+  DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+  fetchResourceBytes
+} from "@bendyline/squisq/markdown";
+import {
+  IMAGE_EDIT_ASSETS_PREFIX,
+  IMAGE_EDIT_STATE_FILENAME,
+  ImageEditVersionManager,
+  createEmptyImageEditDoc,
+  readImageEditDoc,
+  writeImageEditDoc
+} from "@bendyline/squisq/imageEdit";
+function useImageEditor(options) {
+  const {
+    container,
+    initialSrc,
+    resourcePolicy = DEFAULT_INTERACTIVE_RESOURCE_POLICY,
+    stateFilename = IMAGE_EDIT_STATE_FILENAME,
+    allowVersioning = false,
+    versioningAutoSaveIdleMs = 5e3,
+    persistDebounceMs = 500
+  } = options;
+  const [state, dispatch] = useReducer(
+    (s, a) => {
+      if (s === null) return a.type === "load" ? initialImageEditorState(a.doc) : null;
+      return imageEditorReducer(s, a);
+    },
+    null
+  );
+  const [ready, setReady] = useState2(false);
+  const [error, setError] = useState2(null);
+  const seededOnLoadRef = useRef2(false);
+  useEffect2(() => {
+    let cancelled = false;
+    const controller = new AbortController();
+    setReady(false);
+    setError(null);
+    (async () => {
+      try {
+        const existing = await readImageEditDoc(container, stateFilename);
+        if (cancelled) return;
+        if (existing) {
+          dispatch({ type: "load", doc: existing });
+          setReady(true);
+          return;
+        }
+        const seeded = await seedFromSource(
+          container,
+          initialSrc,
+          resourcePolicy,
+          controller.signal
+        );
+        if (cancelled) return;
+        await writeImageEditDoc(container, seeded, stateFilename);
+        if (cancelled) return;
+        dispatch({ type: "load", doc: seeded });
+        setReady(true);
+        seededOnLoadRef.current = true;
+      } catch (err) {
+        if (cancelled) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setReady(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [container, stateFilename, initialSrc, resourcePolicy]);
+  const persistTimerRef = useRef2(null);
+  const docRef = useRef2(null);
+  const dirtyRef = useRef2(false);
+  const revisionRef = useRef2(0);
+  const previousDocRef = useRef2(null);
+  const nextDoc = state?.doc ?? null;
+  if (nextDoc !== previousDocRef.current) {
+    previousDocRef.current = nextDoc;
+    revisionRef.current += 1;
+  }
+  docRef.current = nextDoc;
+  dirtyRef.current = state?.dirty ?? false;
+  const writeQueueRef = useRef2(Promise.resolve());
+  const persistTargetRef = useRef2({ container, stateFilename });
+  persistTargetRef.current = { container, stateFilename };
+  const enqueueWrite = useCallback2(
+    (doc, revision, markClean) => {
+      const write = writeQueueRef.current.catch(() => void 0).then(() => writeImageEditDoc(container, doc, stateFilename));
+      writeQueueRef.current = write.catch(() => void 0);
+      return write.then(() => {
+        if (markClean && revision === revisionRef.current && docRef.current === doc) {
+          dispatch({ type: "mark-clean" });
+        }
+      });
+    },
+    [container, stateFilename]
+  );
+  useEffect2(() => {
+    if (!state?.dirty) return;
+    if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    persistTimerRef.current = setTimeout(() => {
+      const doc = state.doc;
+      if (!doc) return;
+      const revision = revisionRef.current;
+      enqueueWrite(doc, revision, true).catch((err) => {
+        console.warn(
+          "[squisq-editor] image-edit state persist failed:",
+          err instanceof Error ? err.message : err
+        );
+      });
+    }, persistDebounceMs);
+    return () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+    };
+  }, [state?.dirty, state?.doc, persistDebounceMs, enqueueWrite]);
+  const flush = useCallback2(async () => {
+    const doc = docRef.current;
+    if (!doc) return;
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    await enqueueWrite(doc, revisionRef.current, true);
+  }, [enqueueWrite]);
+  useEffect2(
+    () => () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+      const doc = docRef.current;
+      if (!dirtyRef.current || !doc) return;
+      const target = persistTargetRef.current;
+      const write = writeQueueRef.current.catch(() => void 0).then(() => writeImageEditDoc(target.container, doc, target.stateFilename));
+      writeQueueRef.current = write.catch((err) => {
+        console.warn(
+          "[squisq-editor] image-edit final persist failed:",
+          err instanceof Error ? err.message : err
+        );
+      });
+    },
+    []
+  );
+  const versioning = useMemo(
+    () => allowVersioning ? new ImageEditVersionManager(container, { stateFilename }) : null,
+    [allowVersioning, container, stateFilename]
+  );
+  useEffect2(() => {
+    if (!versioning) return;
+    if (!ready) return;
+    if (!seededOnLoadRef.current) return;
+    seededOnLoadRef.current = false;
+    versioning.saveVersion({ force: true }).catch((err) => {
+      console.warn(
+        "[squisq-editor] image-edit initial snapshot failed:",
+        err instanceof Error ? err.message : err
+      );
+    });
+  }, [versioning, ready]);
+  useEffect2(() => {
+    if (!versioning) return;
+    if (versioningAutoSaveIdleMs <= 0) return;
+    if (!state?.doc) return;
+    const timer = setTimeout(() => {
+      versioning.saveVersion({ doc: docRef.current ?? void 0 }).catch((err) => {
+        console.warn(
+          "[squisq-editor] image-edit auto-save version failed:",
+          err instanceof Error ? err.message : err
+        );
+      });
+    }, versioningAutoSaveIdleMs);
+    return () => clearTimeout(timer);
+  }, [versioning, versioningAutoSaveIdleMs, state?.doc]);
+  const urlCacheRef = useRef2(/* @__PURE__ */ new Map());
+  const urlCacheGenerationRef = useRef2(0);
+  const resolveAssetUrl = useCallback2(
+    async (path) => {
+      const cache = urlCacheRef.current;
+      const generation = urlCacheGenerationRef.current;
+      const cached = cache.get(path);
+      if (cached) return cached;
+      const data = await container.readFile(path);
+      if (generation !== urlCacheGenerationRef.current) {
+        throw new Error("useImageEditor: asset resolution cancelled");
+      }
+      if (!data) throw new Error(`useImageEditor: missing asset "${path}"`);
+      const list = await container.listFiles(path);
+      const mime = list.find((e) => e.path === path)?.mimeType ?? "application/octet-stream";
+      const url = URL.createObjectURL(new Blob([data], { type: mime }));
+      if (generation !== urlCacheGenerationRef.current) {
+        URL.revokeObjectURL(url);
+        throw new Error("useImageEditor: asset resolution cancelled");
+      }
+      cache.set(path, url);
+      return url;
+    },
+    [container]
+  );
+  useEffect2(() => {
+    const cache = urlCacheRef.current;
+    return () => {
+      urlCacheGenerationRef.current += 1;
+      for (const url of cache.values()) URL.revokeObjectURL(url);
+      cache.clear();
+    };
+  }, [container]);
+  const uploadAsset = useCallback2(
+    async (file, suggestedName) => {
+      const ext = guessExtensionFromMime(file.type) ?? extensionFromName(suggestedName) ?? "bin";
+      const id = randomId();
+      const path = `${IMAGE_EDIT_ASSETS_PREFIX}${id}.${ext}`;
+      const buf = await file.arrayBuffer();
+      await container.writeFile(path, buf, file.type || void 0);
+      return path;
+    },
+    [container]
+  );
+  return {
+    state,
+    dispatch,
+    flush,
+    resolveAssetUrl,
+    uploadAsset,
+    versioning,
+    ready,
+    error
+  };
+}
+async function seedFromSource(container, initialSrc, resourcePolicy, signal) {
+  if (!initialSrc) {
+    return createEmptyImageEditDoc(800, 600);
+  }
+  const resource = await fetchResourceBytes(initialSrc, {
+    policy: resourcePolicy,
+    signal,
+    contentTypePrefixes: ["image/", "application/octet-stream"]
+  });
+  const mime = resource.contentType || "application/octet-stream";
+  const blob = new Blob([resource.bytes.slice().buffer], { type: mime });
+  const ext = guessExtensionFromMime(mime) ?? extensionFromName(resource.finalUrl) ?? "png";
+  const assetPath = `${IMAGE_EDIT_ASSETS_PREFIX}source.${ext}`;
+  await container.writeFile(assetPath, resource.bytes, mime || void 0);
+  const objectUrl = URL.createObjectURL(blob);
+  const dims = await probeImageDimensions(objectUrl);
+  URL.revokeObjectURL(objectUrl);
+  const w = dims?.width ?? 800;
+  const h = dims?.height ?? 600;
+  if (w * h > 1e8) {
+    throw new Error("useImageEditor: source image exceeds the 100-megapixel safety limit");
+  }
+  const layer = {
+    id: "base",
+    type: "image",
+    name: "Background",
+    position: { x: 0, y: 0, width: w, height: h },
+    content: { src: assetPath, alt: "", fit: "fill" }
+  };
+  return {
+    version: 1,
+    canvas: { width: w, height: h, background: "transparent" },
+    layers: [layer],
+    meta: {
+      sourcePath: assetPath,
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    }
+  };
+}
+function probeImageDimensions(src) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}
+function guessExtensionFromMime(mime) {
+  if (!mime) return null;
+  if (mime.includes("png")) return "png";
+  if (mime.includes("jpeg") || mime.includes("jpg")) return "jpg";
+  if (mime.includes("webp")) return "webp";
+  if (mime.includes("gif")) return "gif";
+  if (mime.includes("svg")) return "svg";
+  return null;
+}
+function extensionFromName(name) {
+  if (!name) return null;
+  const dot = name.lastIndexOf(".");
+  return dot >= 0 ? name.slice(dot + 1).toLowerCase() : null;
+}
+function randomId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+// src/ImageEditor.tsx
+import { useCallback as useCallback5, useRef as useRef8, useState as useState9 } from "react";
+import { exportImageEditDoc as exportImageEditDoc2 } from "@bendyline/squisq/imageEdit";
+
+// src/imageEditor/CanvasSurface.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useId, useLayoutEffect, useRef as useRef3, useState as useState4 } from "react";
+import { PathLayer } from "@bendyline/squisq-react";
+
+// src/imageEditor/layers/EditorImageLayer.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EditorImageLayer({ layer, canvas, resolveAssetUrl }) {
+  const [href, setHref] = useState3(null);
+  const src = layer.content.src;
+  useEffect3(() => {
+    let cancelled = false;
+    resolveAssetUrl(src).then((url) => {
+      if (!cancelled) setHref(url);
+    }).catch(() => {
+      if (!cancelled) setHref(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src, resolveAssetUrl]);
+  if (!href) return null;
+  const p = layer.position;
+  const x = typeof p.x === "number" ? p.x : 0;
+  const y = typeof p.y === "number" ? p.y : 0;
+  const width = typeof p.width === "number" ? p.width : canvas.width;
+  const height = typeof p.height === "number" ? p.height : canvas.height;
+  const fit = layer.content.fit ?? "fill";
+  const par = fit === "cover" ? "xMidYMid slice" : fit === "contain" ? "xMidYMid meet" : "none";
+  return /* @__PURE__ */ jsx2("image", { href, x, y, width, height, preserveAspectRatio: par });
+}
+
+// src/imageEditor/layers/EditorTextLayer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function EditorTextLayer({ layer, canvas: _canvas }) {
+  const p = layer.position;
+  const x = typeof p.x === "number" ? p.x : 0;
+  const y = typeof p.y === "number" ? p.y : 0;
+  const { text, style } = layer.content;
+  const lineHeight = style.lineHeight ?? 1.4;
+  const lineHeightPx = style.fontSize * lineHeight;
+  const lines = (text ?? "").split("\n");
+  const textAnchor = style.textAlign === "center" ? "middle" : style.textAlign === "right" ? "end" : "start";
+  return /* @__PURE__ */ jsx3(
+    "text",
+    {
+      x,
+      y: y + style.fontSize,
+      fontFamily: style.fontFamily ?? "sans-serif",
+      fontSize: style.fontSize,
+      fontWeight: style.fontWeight ?? "normal",
+      fill: style.color,
+      textAnchor,
+      children: lines.map((line, i) => /* @__PURE__ */ jsx3("tspan", { x, dy: i === 0 ? 0 : lineHeightPx, children: line || "\xA0" }, i))
+    }
+  );
+}
+
+// src/imageEditor/layers/EditorShapeLayer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function EditorShapeLayer({ layer, canvas: _canvas }) {
+  const p = layer.position;
+  const x = typeof p.x === "number" ? p.x : 0;
+  const y = typeof p.y === "number" ? p.y : 0;
+  const width = typeof p.width === "number" ? p.width : 100;
+  const height = typeof p.height === "number" ? p.height : 100;
+  const c = layer.content;
+  const fill = c.fill ?? "none";
+  const stroke = c.stroke;
+  const strokeWidth = c.strokeWidth;
+  if (c.shape === "rect") {
+    return /* @__PURE__ */ jsx4(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: c.borderRadius,
+        ry: c.borderRadius,
+        fill,
+        stroke,
+        strokeWidth
+      }
+    );
+  }
+  if (c.shape === "circle") {
+    return /* @__PURE__ */ jsx4(
+      "circle",
+      {
+        cx: x + width / 2,
+        cy: y + height / 2,
+        r: Math.min(width, height) / 2,
+        fill,
+        stroke,
+        strokeWidth
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "line",
+    {
+      x1: x,
+      y1: y,
+      x2: x + width,
+      y2: y + height,
+      stroke: stroke ?? "#000",
+      strokeWidth: strokeWidth ?? 1
+    }
+  );
+}
+
+// src/imageEditor/layers/SelectionHandles.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var HANDLE_SIZE = 10;
+function SelectionHandles({ box, onHandlePointerDown }) {
+  const half = HANDLE_SIZE / 2;
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const handles = [
+    { id: "nw", x: box.x, y: box.y, cursor: "nwse-resize" },
+    { id: "n", x: cx, y: box.y, cursor: "ns-resize" },
+    { id: "ne", x: box.x + box.width, y: box.y, cursor: "nesw-resize" },
+    { id: "e", x: box.x + box.width, y: cy, cursor: "ew-resize" },
+    { id: "se", x: box.x + box.width, y: box.y + box.height, cursor: "nwse-resize" },
+    { id: "s", x: cx, y: box.y + box.height, cursor: "ns-resize" },
+    { id: "sw", x: box.x, y: box.y + box.height, cursor: "nesw-resize" },
+    { id: "w", x: box.x, y: cy, cursor: "ew-resize" }
+  ];
+  return /* @__PURE__ */ jsxs2("g", { className: "squisq-image-editor-selection-handles", pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        fill: "none",
+        stroke: "#ffffff",
+        strokeOpacity: 0.9,
+        strokeWidth: 4,
+        vectorEffect: "non-scaling-stroke"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: box.x,
+        y: box.y,
+        width: box.width,
+        height: box.height,
+        fill: "none",
+        stroke: "#39f",
+        strokeWidth: 2,
+        strokeDasharray: "6 4",
+        vectorEffect: "non-scaling-stroke"
+      }
+    ),
+    handles.map((h) => /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: h.x - half,
+        y: h.y - half,
+        width: HANDLE_SIZE,
+        height: HANDLE_SIZE,
+        fill: "#fff",
+        stroke: "#39f",
+        strokeWidth: 2,
+        vectorEffect: "non-scaling-stroke",
+        style: { cursor: h.cursor, pointerEvents: "all" },
+        onPointerDown: (e) => onHandlePointerDown(e, h.id)
+      },
+      h.id
+    ))
+  ] });
+}
+
+// src/imageEditor/CanvasSurface.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function CanvasSurface({
+  doc,
+  selectedLayerId,
+  tool,
+  resolveAssetUrl,
+  dispatch,
+  onCreateTextAt,
+  onCreateShapeAt,
+  onCreateShapeFromPoints,
+  shapeDragDraw,
+  workspaceBackground,
+  zoom = 1,
+  onSetZoom,
+  surfaceRef,
+  requestEditLayerId
+}) {
+  const checkerId = `squisq-image-editor-checker-${useId().replace(/:/g, "")}`;
+  const svgRef = useRef3(null);
+  const dragRef = useRef3(null);
+  const [, forceRender] = useState4(0);
+  const [cropDrag, setCropDrag] = useState4(null);
+  const [shapeLineDrag, setShapeLineDrag] = useState4(null);
+  const internalWrapRef = useRef3(null);
+  const pendingScrollRef = useRef3(null);
+  const [zoomDrag, setZoomDrag] = useState4(null);
+  const [editingLayerId, setEditingLayerId] = useState4(null);
+  const editTextareaRef = useRef3(null);
+  const toCanvas = useCallback3(
+    (clientX, clientY) => {
+      const svg = svgRef.current;
+      if (!svg) return { x: 0, y: 0 };
+      const rect = svg.getBoundingClientRect();
+      const x = (clientX - rect.left) / rect.width * doc.canvas.width;
+      const y = (clientY - rect.top) / rect.height * doc.canvas.height;
+      return { x, y };
+    },
+    [doc.canvas.width, doc.canvas.height]
+  );
+  useLayoutEffect(() => {
+    const pending = pendingScrollRef.current;
+    if (pending && internalWrapRef.current) {
+      pendingScrollRef.current = null;
+      internalWrapRef.current.scrollLeft = pending.left;
+      internalWrapRef.current.scrollTop = pending.top;
+    }
+  }, [zoom]);
+  const setWrapRefCallback = useCallback3(
+    (el) => {
+      internalWrapRef.current = el;
+      if (surfaceRef) {
+        surfaceRef.current = el;
+      }
+    },
+    [surfaceRef]
+  );
+  useEffect4(() => {
+    if (requestEditLayerId) setEditingLayerId(requestEditLayerId);
+  }, [requestEditLayerId]);
+  useEffect4(() => {
+    if (editingLayerId && selectedLayerId !== editingLayerId) setEditingLayerId(null);
+  }, [selectedLayerId, editingLayerId]);
+  useLayoutEffect(() => {
+    if (editingLayerId && editTextareaRef.current) {
+      editTextareaRef.current.focus();
+      editTextareaRef.current.select();
+    }
+  }, [editingLayerId]);
+  const onPointerDownLayer = useCallback3(
+    (e, layer) => {
+      if (tool !== "select") return;
+      if (layer.locked) return;
+      e.stopPropagation();
+      const pt = toCanvas(e.clientX, e.clientY);
+      dispatch({ type: "select", layerId: layer.id });
+      const box = layerBox(layer, doc);
+      dragRef.current = {
+        layerId: layer.id,
+        startCanvasX: pt.x,
+        startCanvasY: pt.y,
+        startBox: box,
+        handle: "move"
+      };
+      e.target.setPointerCapture?.(e.pointerId);
+    },
+    [tool, dispatch, toCanvas, doc]
+  );
+  const onPointerDownHandle = useCallback3(
+    (e, handle) => {
+      if (!selectedLayerId) return;
+      const layer = doc.layers.find((l) => l.id === selectedLayerId);
+      if (!layer || layer.locked) return;
+      e.stopPropagation();
+      const pt = toCanvas(e.clientX, e.clientY);
+      const box = layerBox(layer, doc);
+      dragRef.current = {
+        layerId: layer.id,
+        startCanvasX: pt.x,
+        startCanvasY: pt.y,
+        startBox: box,
+        handle
+      };
+      e.target.setPointerCapture?.(e.pointerId);
+    },
+    [selectedLayerId, doc, toCanvas]
+  );
+  const onPointerDownEmpty = useCallback3(
+    (e) => {
+      const pt = toCanvas(e.clientX, e.clientY);
+      if (tool === "select") {
+        dispatch({ type: "select", layerId: null });
+        setEditingLayerId(null);
+        return;
+      }
+      if (tool === "zoom-rect") {
+        e.preventDefault();
+        setZoomDrag({ startCanvasX: pt.x, startCanvasY: pt.y, currentX: pt.x, currentY: pt.y });
+        e.target.setPointerCapture?.(e.pointerId);
+        return;
+      }
+      if (tool === "crop") {
+        e.preventDefault();
+        setCropDrag({ startCanvasX: pt.x, startCanvasY: pt.y, currentX: pt.x, currentY: pt.y });
+        e.target.setPointerCapture?.(e.pointerId);
+        return;
+      }
+      if (tool === "text") {
+        onCreateTextAt?.(pt.x, pt.y);
+        return;
+      }
+      if (tool === "shape") {
+        if (shapeDragDraw) {
+          e.preventDefault();
+          setShapeLineDrag({ startX: pt.x, startY: pt.y, currentX: pt.x, currentY: pt.y });
+          e.target.setPointerCapture?.(e.pointerId);
+        } else {
+          onCreateShapeAt?.(pt.x, pt.y);
+        }
+      }
+    },
+    [tool, dispatch, toCanvas, onCreateTextAt, onCreateShapeAt, shapeDragDraw]
+  );
+  useEffect4(() => {
+    function onMove(e) {
+      const drag = dragRef.current;
+      if (drag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        const dx = pt.x - drag.startCanvasX;
+        const dy = pt.y - drag.startCanvasY;
+        const next = applyHandle(drag.startBox, drag.handle, dx, dy);
+        dispatch({
+          type: "update-layer",
+          layerId: drag.layerId,
+          patch: {
+            position: {
+              x: Math.round(next.x),
+              y: Math.round(next.y),
+              width: Math.round(next.width),
+              height: Math.round(next.height)
+            }
+          }
+        });
+        return;
+      }
+      if (shapeLineDrag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        setShapeLineDrag((prev) => prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev);
+        return;
+      }
+      if (zoomDrag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        setZoomDrag((prev) => prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev);
+        return;
+      }
+      if (cropDrag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        setCropDrag((prev) => prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev);
+      }
+    }
+    function onUp() {
+      if (dragRef.current) {
+        dragRef.current = null;
+        forceRender((n) => n + 1);
+      }
+      if (shapeLineDrag) {
+        const dist = Math.hypot(
+          shapeLineDrag.currentX - shapeLineDrag.startX,
+          shapeLineDrag.currentY - shapeLineDrag.startY
+        );
+        if (dist >= 4 && onCreateShapeFromPoints) {
+          onCreateShapeFromPoints(
+            shapeLineDrag.startX,
+            shapeLineDrag.startY,
+            shapeLineDrag.currentX,
+            shapeLineDrag.currentY
+          );
+        } else {
+          onCreateShapeAt?.(shapeLineDrag.startX, shapeLineDrag.startY);
+        }
+        setShapeLineDrag(null);
+      }
+      if (zoomDrag) {
+        const rectW = Math.abs(zoomDrag.currentX - zoomDrag.startCanvasX);
+        const rectH = Math.abs(zoomDrag.currentY - zoomDrag.startCanvasY);
+        if (rectW >= 10 && rectH >= 10 && onSetZoom && internalWrapRef.current) {
+          const wrap = internalWrapRef.current;
+          const viewportW = wrap.clientWidth - 32;
+          const viewportH = wrap.clientHeight - 32;
+          const newZoom = Math.max(
+            0.0625,
+            Math.min(16, Math.min(viewportW / rectW, viewportH / rectH))
+          );
+          const cx = Math.min(zoomDrag.startCanvasX, zoomDrag.currentX) + rectW / 2;
+          const cy = Math.min(zoomDrag.startCanvasY, zoomDrag.currentY) + rectH / 2;
+          pendingScrollRef.current = {
+            left: cx * newZoom - wrap.clientWidth / 2 + 16,
+            top: cy * newZoom - wrap.clientHeight / 2 + 16
+          };
+          onSetZoom(newZoom);
+          dispatch({ type: "set-tool", tool: "select" });
+        }
+        setZoomDrag(null);
+      }
+      if (cropDrag) {
+        const rect = normalizeCropRect(cropDrag);
+        if (rect.width >= 8 && rect.height >= 8) {
+          dispatch({ type: "crop", rect });
+          dispatch({ type: "set-tool", tool: "select" });
+        }
+        setCropDrag(null);
+      }
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [
+    toCanvas,
+    dispatch,
+    cropDrag,
+    shapeLineDrag,
+    zoomDrag,
+    onSetZoom,
+    onCreateShapeFromPoints,
+    onCreateShapeAt
+  ]);
+  const selectedLayer = selectedLayerId ? doc.layers.find((l) => l.id === selectedLayerId) ?? null : null;
+  const selectedBox = selectedLayer ? layerBox(selectedLayer, doc) : null;
+  const selectionBox = selectedLayer && selectedLayer.type === "text" ? measureTextLayerBox(selectedLayer, selectedBox) : selectedBox;
+  const paddedSelectionBox = (() => {
+    if (!selectionBox || !selectedLayer) return null;
+    const sw = selectedLayer.type === "shape" || selectedLayer.type === "path" ? selectedLayer.content["strokeWidth"] ?? 0 : 0;
+    const strokeHalf = sw / 2;
+    const proportional = Math.max(doc.canvas.width, doc.canvas.height) * 7e-3;
+    const p = Math.ceil(strokeHalf + proportional);
+    return {
+      x: selectionBox.x - p,
+      y: selectionBox.y - p,
+      width: selectionBox.width + p * 2,
+      height: selectionBox.height + p * 2
+    };
+  })();
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: setWrapRefCallback,
+      className: "squisq-image-editor-surface",
+      style: { background: workspaceBackground ?? "#1f1f24" },
+      children: /* @__PURE__ */ jsx6("div", { className: "squisq-image-editor-canvas-wrap", children: /* @__PURE__ */ jsxs3(
+        "svg",
+        {
+          ref: svgRef,
+          viewBox: `0 0 ${doc.canvas.width} ${doc.canvas.height}`,
+          width: Math.round(doc.canvas.width * zoom),
+          height: Math.round(doc.canvas.height * zoom),
+          className: `squisq-image-editor-canvas squisq-image-editor-canvas--tool-${tool}`,
+          onPointerDown: onPointerDownEmpty,
+          children: [
+            /* @__PURE__ */ jsx6(
+              "rect",
+              {
+                x: 0,
+                y: 0,
+                width: doc.canvas.width,
+                height: doc.canvas.height,
+                fill: doc.canvas.background && doc.canvas.background !== "transparent" ? doc.canvas.background : `url(#${checkerId})`
+              }
+            ),
+            /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsxs3("pattern", { id: checkerId, width: "16", height: "16", patternUnits: "userSpaceOnUse", children: [
+              /* @__PURE__ */ jsx6("rect", { width: "16", height: "16", fill: "#f0f0f0" }),
+              /* @__PURE__ */ jsx6("rect", { width: "8", height: "8", fill: "#d0d0d0" }),
+              /* @__PURE__ */ jsx6("rect", { x: "8", y: "8", width: "8", height: "8", fill: "#d0d0d0" })
+            ] }) }),
+            doc.layers.map((layer) => {
+              if (layer.visible === false) return null;
+              const onPointerDown = (e) => onPointerDownLayer(e, layer);
+              const onDoubleClick = layer.type === "text" ? (e) => {
+                e.stopPropagation();
+                dispatch({ type: "select", layerId: layer.id });
+                setEditingLayerId(layer.id);
+              } : void 0;
+              const opacity = layer.opacity ?? 1;
+              const isEditing = editingLayerId === layer.id;
+              return /* @__PURE__ */ jsxs3(
+                "g",
+                {
+                  "data-layer-id": layer.id,
+                  opacity,
+                  visibility: isEditing ? "hidden" : void 0,
+                  pointerEvents: isEditing ? "none" : void 0,
+                  style: { cursor: tool === "select" && !layer.locked ? "move" : void 0 },
+                  onPointerDown: isEditing ? void 0 : onPointerDown,
+                  onDoubleClick,
+                  children: [
+                    layer.type === "image" && /* @__PURE__ */ jsx6(
+                      EditorImageLayer,
+                      {
+                        layer,
+                        canvas: doc.canvas,
+                        resolveAssetUrl
+                      }
+                    ),
+                    layer.type === "text" && /* @__PURE__ */ jsx6(EditorTextLayer, { layer, canvas: doc.canvas }),
+                    layer.type === "shape" && /* @__PURE__ */ jsx6(EditorShapeLayer, { layer, canvas: doc.canvas }),
+                    layer.type === "path" && /* @__PURE__ */ jsx6(PathLayer, { layer, viewport: doc.canvas, blockTime: 0 })
+                  ]
+                },
+                layer.id
+              );
+            }),
+            selectedLayer && paddedSelectionBox && tool === "select" && !selectedLayer.locked && editingLayerId !== selectedLayer.id && /* @__PURE__ */ jsx6(
+              SelectionHandles,
+              {
+                box: paddedSelectionBox,
+                onHandlePointerDown: onPointerDownHandle
+              }
+            ),
+            editingLayerId && (() => {
+              const editLayer = doc.layers.find((l) => l.id === editingLayerId);
+              if (!editLayer || editLayer.type !== "text") return null;
+              const pos = layerBox(editLayer, doc);
+              const textLayer = editLayer;
+              const s = textLayer.content;
+              const editBox = measureTextLayerBox(textLayer, pos);
+              return /* @__PURE__ */ jsx6(
+                "foreignObject",
+                {
+                  x: editBox.x,
+                  y: editBox.y,
+                  width: editBox.width,
+                  height: editBox.height,
+                  style: { overflow: "visible" },
+                  children: /* @__PURE__ */ jsx6(
+                    "textarea",
+                    {
+                      ref: editTextareaRef,
+                      value: s.text,
+                      onChange: (e) => {
+                        dispatch({
+                          type: "update-layer",
+                          layerId: editingLayerId,
+                          patch: {
+                            content: { ...s, text: e.target.value }
+                          }
+                        });
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                          e.preventDefault();
+                          setEditingLayerId(null);
+                        }
+                      },
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: (e) => e.stopPropagation(),
+                      wrap: "off",
+                      style: {
+                        display: "block",
+                        width: "100%",
+                        height: "100%",
+                        padding: 0,
+                        margin: 0,
+                        border: "none",
+                        outline: "2px dashed rgba(59,130,246,0.8)",
+                        outlineOffset: "2px",
+                        resize: "none",
+                        background: "transparent",
+                        fontFamily: s.style.fontFamily ?? "sans-serif",
+                        // The foreignObject participates in the SVG viewBox transform, so its
+                        // contents use canvas units and inherit zoom from the SVG exactly once.
+                        fontSize: `${s.style.fontSize}px`,
+                        fontWeight: s.style.fontWeight ?? "normal",
+                        color: s.style.color,
+                        textAlign: s.style.textAlign ?? "left",
+                        lineHeight: s.style.lineHeight ?? 1.4,
+                        caretColor: s.style.color,
+                        overflow: "hidden",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  )
+                },
+                `inline-edit-${editingLayerId}`
+              );
+            })(),
+            shapeLineDrag && /* @__PURE__ */ jsx6(
+              "line",
+              {
+                x1: shapeLineDrag.startX,
+                y1: shapeLineDrag.startY,
+                x2: shapeLineDrag.currentX,
+                y2: shapeLineDrag.currentY,
+                stroke: "#39f",
+                strokeWidth: 2,
+                strokeDasharray: "6 4",
+                pointerEvents: "none"
+              }
+            ),
+            zoomDrag && (() => {
+              const r = normalizeCropRect(zoomDrag);
+              return /* @__PURE__ */ jsx6("g", { pointerEvents: "none", children: /* @__PURE__ */ jsx6(
+                "rect",
+                {
+                  x: r.x,
+                  y: r.y,
+                  width: r.width,
+                  height: r.height,
+                  fill: "rgba(255,200,0,0.08)",
+                  stroke: "#f90",
+                  strokeWidth: 2,
+                  strokeDasharray: "6 4",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ) });
+            })(),
+            cropDrag && (() => {
+              const r = normalizeCropRect(cropDrag);
+              return /* @__PURE__ */ jsx6("g", { pointerEvents: "none", children: /* @__PURE__ */ jsx6(
+                "rect",
+                {
+                  x: r.x,
+                  y: r.y,
+                  width: r.width,
+                  height: r.height,
+                  fill: "rgba(255,255,255,0.05)",
+                  stroke: "#39f",
+                  strokeWidth: 2,
+                  strokeDasharray: "6 4"
+                }
+              ) });
+            })()
+          ]
+        }
+      ) })
+    }
+  );
+}
+function layerBox(layer, doc) {
+  const p = layer.position;
+  const x = typeof p.x === "number" ? p.x : 0;
+  const y = typeof p.y === "number" ? p.y : 0;
+  const width = typeof p.width === "number" ? p.width : doc.canvas.width;
+  const height = typeof p.height === "number" ? p.height : doc.canvas.height;
+  return { x, y, width, height };
+}
+var MIN_DIM = 4;
+function applyHandle(box, handle, dx, dy) {
+  if (handle === "move") return { ...box, x: box.x + dx, y: box.y + dy };
+  let { x, y, width, height } = box;
+  if (handle.includes("w")) {
+    const newWidth = Math.max(MIN_DIM, width - dx);
+    x = x + (width - newWidth);
+    width = newWidth;
+  } else if (handle.includes("e")) {
+    width = Math.max(MIN_DIM, width + dx);
+  }
+  if (handle.includes("n")) {
+    const newHeight = Math.max(MIN_DIM, height - dy);
+    y = y + (height - newHeight);
+    height = newHeight;
+  } else if (handle.includes("s")) {
+    height = Math.max(MIN_DIM, height + dy);
+  }
+  return { x, y, width, height };
+}
+function normalizeCropRect(d) {
+  const x = Math.min(d.startCanvasX, d.currentX);
+  const y = Math.min(d.startCanvasY, d.currentY);
+  const width = Math.abs(d.currentX - d.startCanvasX);
+  const height = Math.abs(d.currentY - d.startCanvasY);
+  return { x, y, width, height };
+}
+var measureCtx;
+function getMeasureCtx() {
+  if (measureCtx !== void 0) return measureCtx;
+  if (typeof document === "undefined") {
+    measureCtx = null;
+    return null;
+  }
+  try {
+    const c = document.createElement("canvas");
+    measureCtx = c.getContext("2d");
+  } catch {
+    measureCtx = null;
+  }
+  return measureCtx ?? null;
+}
+function measureTextLayerBox(layer, fallback) {
+  const ctx = getMeasureCtx();
+  if (!ctx) return fallback;
+  const { text, style } = layer.content;
+  const fontSize = style.fontSize;
+  const fontWeight = style.fontWeight ?? "normal";
+  const fontFamily = style.fontFamily ?? "sans-serif";
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const lines = (text ?? "").split("\n");
+  let maxWidth = 0;
+  for (const line of lines) {
+    const w = ctx.measureText(line || " ").width;
+    if (w > maxWidth) maxWidth = w;
+  }
+  const lineHeight = style.lineHeight ?? 1.4;
+  const lineHeightPx = fontSize * lineHeight;
+  const totalHeight = Math.max(1, lines.length) * lineHeightPx;
+  const anchor = style.textAlign === "center" ? "middle" : style.textAlign === "right" ? "end" : "start";
+  const x = anchor === "middle" ? fallback.x - maxWidth / 2 : anchor === "end" ? fallback.x - maxWidth : fallback.x;
+  return {
+    x,
+    y: fallback.y,
+    width: Math.max(MIN_DIM, Math.ceil(maxWidth)),
+    height: Math.max(MIN_DIM, Math.ceil(totalHeight))
+  };
+}
+
+// src/imageEditor/ImageVersionHistoryDropdown.tsx
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import {
+  exportImageEditDoc
+} from "@bendyline/squisq/imageEdit";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var THUMB_MAX_DIM = 96;
+function ImageVersionHistoryDropdown({
+  versioning,
+  container,
+  onRevert,
+  refreshKey
+}) {
+  const [open, setOpen] = useState5(false);
+  const [versions, setVersions] = useState5([]);
+  const [loading, setLoading] = useState5(false);
+  const [busyTimestamp, setBusyTimestamp] = useState5(null);
+  const [meta, setMeta] = useState5({});
+  const popoverRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const urlsRef = useRef4(/* @__PURE__ */ new Set());
+  useEffect5(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    versioning.listVersions().then((list) => {
+      if (cancelled) return;
+      const sorted = [...list].sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+      setVersions(sorted);
+    }).catch(() => {
+      if (cancelled) return;
+      setVersions([]);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, versioning, refreshKey]);
+  useEffect5(() => {
+    if (!open) return;
+    if (versions.length === 0) return;
+    let cancelled = false;
+    (async () => {
+      for (const v of versions) {
+        if (cancelled) return;
+        if (meta[v.path]) continue;
+        try {
+          const doc = await versioning.readVersion(v);
+          if (cancelled) return;
+          if (!doc) {
+            setMeta((m) => ({ ...m, [v.path]: { doc: emptyDoc(), thumbUrl: null } }));
+            continue;
+          }
+          let thumbUrl = null;
+          try {
+            const scale = computeThumbScale(doc.canvas.width, doc.canvas.height);
+            const blob = await exportImageEditDoc(doc, container, {
+              format: "png",
+              scale
+            });
+            if (cancelled) return;
+            thumbUrl = URL.createObjectURL(blob);
+            urlsRef.current.add(thumbUrl);
+          } catch {
+            thumbUrl = null;
+          }
+          setMeta((m) => ({ ...m, [v.path]: { doc, thumbUrl } }));
+        } catch {
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, versions, versioning, container, meta]);
+  useEffect5(() => {
+    const urls = urlsRef.current;
+    return () => {
+      for (const url of urls) URL.revokeObjectURL(url);
+      urls.clear();
+    };
+  }, []);
+  useEffect5(() => {
+    for (const url of urlsRef.current) URL.revokeObjectURL(url);
+    urlsRef.current.clear();
+    setMeta({});
+  }, [refreshKey]);
+  useEffect5(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      const t = e.target;
+      if (!t) return;
+      if (popoverRef.current?.contains(t)) return;
+      if (triggerRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const handleRevert = useCallback4(
+    async (v) => {
+      setBusyTimestamp(v.timestamp.getTime());
+      try {
+        await onRevert(v);
+        setOpen(false);
+      } catch (err) {
+        console.warn(
+          "[squisq-editor] image-edit revert failed:",
+          err instanceof Error ? err.message : err
+        );
+      } finally {
+        setBusyTimestamp(null);
+      }
+    },
+    [onRevert]
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "squisq-image-editor-version-dropdown", children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        title: "Version history",
+        "data-testid": "image-editor-history-trigger",
+        children: [
+          /* @__PURE__ */ jsx7("span", { children: "History" }),
+          /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", style: { fontSize: "0.8em" }, children: "\u25BE" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: popoverRef,
+        className: "squisq-image-editor-version-popover",
+        role: "menu",
+        "data-testid": "image-editor-history-popover",
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "squisq-image-editor-version-popover__title", children: "Version history" }),
+          loading && /* @__PURE__ */ jsx7("div", { className: "squisq-image-editor-version-popover__empty", children: "Loading\u2026" }),
+          !loading && versions.length === 0 && /* @__PURE__ */ jsx7("div", { className: "squisq-image-editor-version-popover__empty", children: "No snapshots yet" }),
+          !loading && versions.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "squisq-image-editor-version-popover__list", children: versions.map((v, i) => {
+            const ts = v.timestamp.getTime();
+            const m = meta[v.path];
+            const isCurrent = i === 0;
+            const isOriginal = i + 1 >= versions.length;
+            const olderMeta = i + 1 < versions.length ? meta[versions[i + 1].path] : void 0;
+            const summary = isOriginal ? "Original" : m && olderMeta ? summarizeDiff(olderMeta.doc, m.doc) : "";
+            return /* @__PURE__ */ jsxs4(
+              "li",
+              {
+                className: "squisq-image-editor-version-popover__row" + (isCurrent ? " squisq-image-editor-version-popover__row--current" : ""),
+                children: [
+                  /* @__PURE__ */ jsx7("div", { className: "squisq-image-editor-version-popover__thumb", children: m?.thumbUrl ? /* @__PURE__ */ jsx7(
+                    "img",
+                    {
+                      src: m.thumbUrl,
+                      alt: "",
+                      className: "squisq-image-editor-version-popover__thumb-img"
+                    }
+                  ) : /* @__PURE__ */ jsx7(
+                    "div",
+                    {
+                      className: "squisq-image-editor-version-popover__thumb-placeholder",
+                      "aria-hidden": "true"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs4("div", { className: "squisq-image-editor-version-popover__info", children: [
+                    /* @__PURE__ */ jsxs4("div", { className: "squisq-image-editor-version-popover__when", children: [
+                      isCurrent && /* @__PURE__ */ jsx7("span", { className: "squisq-image-editor-version-popover__badge", children: "Current" }),
+                      formatTimestamp(v.timestamp)
+                    ] }),
+                    /* @__PURE__ */ jsx7("div", { className: "squisq-image-editor-version-popover__summary", title: summary, children: summary || (m ? "" : "Loading\u2026") })
+                  ] }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "squisq-image-editor-tool-button",
+                      onClick: () => handleRevert(v),
+                      disabled: isCurrent || busyTimestamp === ts,
+                      title: isCurrent ? "This is the current version" : "Revert to this version",
+                      children: busyTimestamp === ts ? "Loading\u2026" : "Revert"
+                    }
+                  )
+                ]
+              },
+              ts
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+function computeThumbScale(width, height) {
+  const longest = Math.max(width, height);
+  if (longest <= THUMB_MAX_DIM) return 1;
+  return THUMB_MAX_DIM / longest;
+}
+function formatTimestamp(stamp) {
+  if (Number.isNaN(stamp.getTime())) return String(stamp);
+  return stamp.toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function summarizeDiff(prev, next) {
+  const parts = [];
+  if (prev.canvas.width !== next.canvas.width || prev.canvas.height !== next.canvas.height) {
+    parts.push(
+      `Resized ${prev.canvas.width}\xD7${prev.canvas.height} \u2192 ${next.canvas.width}\xD7${next.canvas.height}`
+    );
+  } else if (prev.canvas.background !== next.canvas.background) {
+    parts.push("Changed background");
+  }
+  const prevIds = new Set(prev.layers.map((l) => l.id));
+  const nextIds = new Set(next.layers.map((l) => l.id));
+  const added = next.layers.filter((l) => !prevIds.has(l.id));
+  const removed = prev.layers.filter((l) => !nextIds.has(l.id));
+  for (const l of added) parts.push(`Added ${describeLayer(l)}`);
+  for (const l of removed) parts.push(`Removed ${describeLayer(l)}`);
+  for (const n of next.layers) {
+    const p = prev.layers.find((l) => l.id === n.id);
+    if (!p) continue;
+    const change = describeLayerChange(p, n);
+    if (change) parts.push(change);
+  }
+  if (parts.length === 0) return "No changes";
+  return parts.slice(0, 3).join(" \xB7 ") + (parts.length > 3 ? ` (+${parts.length - 3})` : "");
+}
+function describeLayer(layer) {
+  const name = layer.name?.trim();
+  return name && name.length > 0 ? `\u201C${name}\u201D` : layer.type;
+}
+function describeLayerChange(p, n) {
+  const label = describeLayer(n);
+  const posChanged = p.position.x !== n.position.x || p.position.y !== n.position.y || p.position.width !== n.position.width || p.position.height !== n.position.height;
+  const sizeChanged = p.position.width !== n.position.width || p.position.height !== n.position.height;
+  const contentChanged = JSON.stringify(p.content) !== JSON.stringify(n.content);
+  if (sizeChanged && !contentChanged) return `Resized ${label}`;
+  if (posChanged && !contentChanged) return `Moved ${label}`;
+  if (contentChanged) return `Edited ${label}`;
+  return null;
+}
+function emptyDoc() {
+  return {
+    version: 1,
+    canvas: { width: 0, height: 0, background: "transparent" },
+    layers: []
+  };
+}
+
+// src/imageEditor/LayersPanel.tsx
+import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+
+// src/imageEditor/icons.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-eye", ...props });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-eye-slash", ...props });
+}
+function LockIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-lock", ...props });
+}
+function UnlockIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-lock-open", ...props });
+}
+function ChevronUpIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-chevron-up", ...props });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-chevron-down", ...props });
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-xmark", ...props });
+}
+function CursorIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-arrow-pointer", ...props });
+}
+function TextIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-font", ...props });
+}
+function ShapeIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-shapes", ...props });
+}
+function CropIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-crop-simple", ...props });
+}
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-plus", ...props });
+}
+function ImageIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-image", ...props });
+}
+function NoneIcon(props) {
+  return /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-ban", ...props });
+}
+
+// src/imageEditor/LayersPanel.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var ADD_LAYER_OPTIONS = [
+  { kind: "text", label: "Text layer", icon: /* @__PURE__ */ jsx9(TextIcon, {}) },
+  { kind: "shape", label: "Shape layer", icon: /* @__PURE__ */ jsx9(ShapeIcon, {}) },
+  { kind: "image", label: "Image layer\u2026", icon: /* @__PURE__ */ jsx9(ImageIcon, {}) }
+];
+function LayersPanel({ doc, selectedLayerId, dispatch, onAddLayer }) {
+  const [addMenuOpen, setAddMenuOpen] = useState6(false);
+  const addMenuRef = useRef5(null);
+  useEffect6(() => {
+    if (!addMenuOpen) return;
+    const closeOnOutsideClick = (event) => {
+      if (!addMenuRef.current?.contains(event.target)) setAddMenuOpen(false);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setAddMenuOpen(false);
+    };
+    document.addEventListener("mousedown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("mousedown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [addMenuOpen]);
+  const ordered = doc.layers.slice().reverse();
+  return /* @__PURE__ */ jsxs5("div", { className: "squisq-image-editor-layers", "data-testid": "image-editor-layers", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "squisq-image-editor-panel-header squisq-image-editor-layers-header", children: [
+      /* @__PURE__ */ jsx9("span", { children: "Layers" }),
+      /* @__PURE__ */ jsxs5("span", { ref: addMenuRef, className: "squisq-image-editor-layer-add", children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: "squisq-image-editor-layer-add-button",
+            onClick: () => setAddMenuOpen((open) => !open),
+            "aria-label": "Add layer",
+            title: "Add layer",
+            "aria-haspopup": "menu",
+            "aria-expanded": addMenuOpen,
+            children: /* @__PURE__ */ jsx9(PlusIcon, {})
+          }
+        ),
+        addMenuOpen && /* @__PURE__ */ jsx9("div", { className: "squisq-image-editor-layer-add-menu", role: "menu", children: ADD_LAYER_OPTIONS.map(({ kind, label, icon }) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            className: "squisq-image-editor-layer-add-menu-item",
+            role: "menuitem",
+            onClick: () => {
+              setAddMenuOpen(false);
+              onAddLayer(kind);
+            },
+            children: [
+              icon,
+              /* @__PURE__ */ jsx9("span", { children: label })
+            ]
+          },
+          kind
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("ul", { className: "squisq-image-editor-layer-list", children: [
+      ordered.length === 0 && /* @__PURE__ */ jsx9("li", { className: "squisq-image-editor-layer-empty", children: "No layers yet" }),
+      ordered.map((layer) => {
+        const visible = layer.visible !== false;
+        const locked = !!layer.locked;
+        const stackIndex = doc.layers.findIndex((l) => l.id === layer.id);
+        const canMoveUp = stackIndex < doc.layers.length - 1;
+        const canMoveDown = stackIndex > 0;
+        const isSelected = selectedLayerId === layer.id;
+        const layerName = layer.name ?? defaultLayerName(layer);
+        return /* @__PURE__ */ jsxs5(
+          "li",
+          {
+            className: [
+              "squisq-image-editor-layer-item",
+              isSelected ? "is-selected" : "",
+              visible ? "" : "is-hidden"
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-toggle",
+                  onClick: () => dispatch({
+                    type: "update-layer",
+                    layerId: layer.id,
+                    patch: { visible: !visible }
+                  }),
+                  "aria-label": visible ? "Hide layer" : "Show layer",
+                  title: visible ? "Hide layer" : "Show layer",
+                  children: visible ? /* @__PURE__ */ jsx9(EyeIcon, {}) : /* @__PURE__ */ jsx9(EyeOffIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-toggle",
+                  onClick: () => dispatch({
+                    type: "update-layer",
+                    layerId: layer.id,
+                    patch: { locked: !locked }
+                  }),
+                  "aria-label": locked ? "Unlock layer" : "Lock layer",
+                  title: locked ? "Unlock layer" : "Lock layer",
+                  children: locked ? /* @__PURE__ */ jsx9(LockIcon, {}) : /* @__PURE__ */ jsx9(UnlockIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-name",
+                  onClick: () => dispatch({ type: "select", layerId: layer.id }),
+                  title: layerName,
+                  children: [
+                    /* @__PURE__ */ jsx9("span", { className: "squisq-image-editor-layer-name-text", children: layerName }),
+                    /* @__PURE__ */ jsx9("span", { className: "squisq-image-editor-layer-kind", children: layer.type })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-toggle",
+                  disabled: !canMoveUp,
+                  onClick: () => dispatch({ type: "reorder-layer", layerId: layer.id, toIndex: stackIndex + 1 }),
+                  "aria-label": "Move layer up",
+                  title: "Move layer up",
+                  children: /* @__PURE__ */ jsx9(ChevronUpIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-toggle",
+                  disabled: !canMoveDown,
+                  onClick: () => dispatch({ type: "reorder-layer", layerId: layer.id, toIndex: stackIndex - 1 }),
+                  "aria-label": "Move layer down",
+                  title: "Move layer down",
+                  children: /* @__PURE__ */ jsx9(ChevronDownIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  className: "squisq-image-editor-layer-toggle",
+                  onClick: () => dispatch({ type: "remove-layer", layerId: layer.id }),
+                  "aria-label": "Delete layer",
+                  title: "Delete layer",
+                  children: /* @__PURE__ */ jsx9(CloseIcon, {})
+                }
+              )
+            ]
+          },
+          layer.id
+        );
+      })
+    ] })
+  ] });
+}
+function defaultLayerName(layer) {
+  if (layer.type === "text") {
+    const c = layer.content;
+    return c?.text?.split("\n")[0]?.slice(0, 24) || "Text";
+  }
+  if (layer.type === "image") return "Image";
+  if (layer.type === "shape") {
+    const c = layer.content;
+    return c?.shape ? c.shape[0].toUpperCase() + c.shape.slice(1) : "Shape";
+  }
+  return layer.type;
+}
+
+// src/imageEditor/PropertiesPanel.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function PropertiesPanel({ doc, selectedLayerId, dispatch }) {
+  const selected = selectedLayerId ? doc.layers.find((l) => l.id === selectedLayerId) ?? null : null;
+  return /* @__PURE__ */ jsxs6("div", { className: "squisq-image-editor-properties", "data-testid": "image-editor-properties", children: [
+    /* @__PURE__ */ jsx10("div", { className: "squisq-image-editor-panel-header", children: "Properties" }),
+    /* @__PURE__ */ jsx10(CanvasSection, { doc, dispatch }),
+    selected ? /* @__PURE__ */ jsx10(LayerSection, { layer: selected, dispatch }, selected.id) : /* @__PURE__ */ jsx10("div", { className: "squisq-image-editor-properties-empty", children: "No layer selected" })
+  ] });
+}
+function CanvasSection({
+  doc,
+  dispatch
+}) {
+  const setCanvas2 = (patch) => {
+    dispatch({ type: "set-canvas", canvas: { ...doc.canvas, ...patch } });
+  };
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Canvas" }),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Width",
+        value: doc.canvas.width,
+        min: 1,
+        onChange: (v) => setCanvas2({ width: Math.round(v) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Height",
+        value: doc.canvas.height,
+        min: 1,
+        onChange: (v) => setCanvas2({ height: Math.round(v) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ColorField,
+      {
+        label: "Background",
+        value: doc.canvas.background ?? "transparent",
+        allowTransparent: true,
+        onChange: (v) => setCanvas2({ background: v })
+      }
+    )
+  ] });
+}
+function LayerSection({
+  layer,
+  dispatch
+}) {
+  const update = (patch) => dispatch({ type: "update-layer", layerId: layer.id, patch });
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+      /* @__PURE__ */ jsx10("legend", { children: "Layer" }),
+      /* @__PURE__ */ jsx10(TextField, { label: "Name", value: layer.name ?? "", onChange: (name) => update({ name }) }),
+      /* @__PURE__ */ jsx10(
+        NumberField,
+        {
+          label: "Opacity",
+          value: layer.opacity ?? 1,
+          min: 0,
+          max: 1,
+          step: 0.05,
+          onChange: (opacity) => update({ opacity })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10(PositionFields, { layer, update }),
+    layer.type === "image" && /* @__PURE__ */ jsx10(ImageFields, { layer, update }),
+    layer.type === "text" && /* @__PURE__ */ jsx10(TextFields, { layer, update }),
+    layer.type === "shape" && /* @__PURE__ */ jsx10(ShapeFields, { layer, update }),
+    layer.type === "path" && /* @__PURE__ */ jsx10(PathFields, { layer, update })
+  ] });
+}
+function PositionFields({
+  layer,
+  update
+}) {
+  const p = layer.position;
+  const setPos = (patch) => update({ position: { ...p, ...patch } });
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Position" }),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "X",
+        value: typeof p.x === "number" ? p.x : 0,
+        onChange: (x) => setPos({ x: Math.round(x) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Y",
+        value: typeof p.y === "number" ? p.y : 0,
+        onChange: (y) => setPos({ y: Math.round(y) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Width",
+        value: typeof p.width === "number" ? p.width : 0,
+        onChange: (width) => setPos({ width: Math.round(width) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Height",
+        value: typeof p.height === "number" ? p.height : 0,
+        onChange: (height) => setPos({ height: Math.round(height) })
+      }
+    )
+  ] });
+}
+function ImageFields({
+  layer,
+  update
+}) {
+  const c = layer.content;
+  const setContent = (patch) => update({ content: { ...c, ...patch } });
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Image" }),
+    /* @__PURE__ */ jsx10(TextField, { label: "Alt", value: c.alt ?? "", onChange: (alt) => setContent({ alt }) }),
+    /* @__PURE__ */ jsx10(
+      SelectField,
+      {
+        label: "Fit",
+        value: c.fit ?? "fill",
+        options: [
+          ["fill", "Fill"],
+          ["contain", "Contain"],
+          ["cover", "Cover"]
+        ],
+        onChange: (fit) => setContent({ fit })
+      }
+    )
+  ] });
+}
+function TextFields({
+  layer,
+  update
+}) {
+  const c = layer.content;
+  const setContent = (patch) => update({ content: { ...c, ...patch } });
+  const setStyle = (patch) => setContent({ style: { ...c.style, ...patch } });
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Text" }),
+    /* @__PURE__ */ jsx10(TextAreaField, { label: "Text", value: c.text, onChange: (text) => setContent({ text }) }),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Font size",
+        value: c.style.fontSize,
+        min: 1,
+        onChange: (fontSize) => setStyle({ fontSize: Math.round(fontSize) })
+      }
+    ),
+    /* @__PURE__ */ jsx10(ColorField, { label: "Color", value: c.style.color, onChange: (color) => setStyle({ color }) }),
+    /* @__PURE__ */ jsx10(
+      SelectField,
+      {
+        label: "Weight",
+        value: c.style.fontWeight ?? "normal",
+        options: [
+          ["normal", "Normal"],
+          ["bold", "Bold"]
+        ],
+        onChange: (fontWeight) => setStyle({ fontWeight })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      SelectField,
+      {
+        label: "Align",
+        value: c.style.textAlign ?? "left",
+        options: [
+          ["left", "Left"],
+          ["center", "Center"],
+          ["right", "Right"]
+        ],
+        onChange: (textAlign) => setStyle({ textAlign })
+      }
+    )
+  ] });
+}
+function ShapeFields({
+  layer,
+  update
+}) {
+  const c = layer.content;
+  const setContent = (patch) => update({ content: { ...c, ...patch } });
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Shape" }),
+    /* @__PURE__ */ jsx10(
+      SelectField,
+      {
+        label: "Shape",
+        value: c.shape,
+        options: [
+          ["rect", "Rectangle"],
+          ["circle", "Circle"],
+          ["line", "Line"]
+        ],
+        onChange: (shape) => setContent({ shape })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ColorField,
+      {
+        label: "Fill",
+        value: c.fill ?? "#000000",
+        allowTransparent: true,
+        onChange: (fill) => setContent({ fill })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ColorField,
+      {
+        label: "Stroke",
+        value: c.stroke ?? "#000000",
+        allowTransparent: true,
+        onChange: (stroke) => setContent({ stroke })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Stroke width",
+        value: c.strokeWidth ?? 0,
+        min: 0,
+        onChange: (strokeWidth) => setContent({ strokeWidth })
+      }
+    ),
+    c.shape === "rect" && /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Corner radius",
+        value: c.borderRadius ?? 0,
+        min: 0,
+        onChange: (borderRadius) => setContent({ borderRadius: Math.round(borderRadius) })
+      }
+    )
+  ] });
+}
+function PathFields({
+  layer,
+  update
+}) {
+  const c = layer.content;
+  const setContent = (patch) => update({ content: { ...c, ...patch } });
+  const kindLabel = c.shapeKind ? c.shapeKind.replace(/-/g, " ") : c.endMarker || c.startMarker ? "arrow" : "path";
+  return /* @__PURE__ */ jsxs6("fieldset", { className: "squisq-image-editor-fieldset", children: [
+    /* @__PURE__ */ jsx10("legend", { children: "Shape" }),
+    /* @__PURE__ */ jsxs6("div", { className: "squisq-image-editor-field", children: [
+      /* @__PURE__ */ jsx10("span", { children: "Kind" }),
+      /* @__PURE__ */ jsx10("span", { className: "squisq-image-editor-readonly-value", children: kindLabel })
+    ] }),
+    /* @__PURE__ */ jsx10(
+      ColorField,
+      {
+        label: "Fill",
+        value: c.fill ?? "none",
+        allowTransparent: true,
+        onChange: (fill) => setContent({ fill })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ColorField,
+      {
+        label: "Stroke",
+        value: c.stroke ?? "#000000",
+        allowTransparent: true,
+        onChange: (stroke) => setContent({ stroke })
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      NumberField,
+      {
+        label: "Stroke width",
+        value: c.strokeWidth ?? 0,
+        min: 0,
+        onChange: (strokeWidth) => setContent({ strokeWidth })
+      }
+    )
+  ] });
+}
+function NumberField({
+  label,
+  value,
+  min,
+  max,
+  step,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs6("label", { className: "squisq-image-editor-field", children: [
+    /* @__PURE__ */ jsx10("span", { children: label }),
+    /* @__PURE__ */ jsx10(
+      "input",
+      {
+        type: "number",
+        value: Number.isFinite(value) ? value : 0,
+        min,
+        max,
+        step: step ?? 1,
+        onChange: (e) => {
+          const n = Number(e.target.value);
+          if (Number.isFinite(n)) onChange(n);
+        }
+      }
+    )
+  ] });
+}
+function TextField({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs6("label", { className: "squisq-image-editor-field", children: [
+    /* @__PURE__ */ jsx10("span", { children: label }),
+    /* @__PURE__ */ jsx10("input", { type: "text", value, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function TextAreaField({
+  label,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs6("label", { className: "squisq-image-editor-field squisq-image-editor-field--multiline", children: [
+    /* @__PURE__ */ jsx10("span", { children: label }),
+    /* @__PURE__ */ jsx10("textarea", { rows: 3, value, onChange: (e) => onChange(e.target.value) })
+  ] });
+}
+function SelectField({
+  label,
+  value,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs6("label", { className: "squisq-image-editor-field", children: [
+    /* @__PURE__ */ jsx10("span", { children: label }),
+    /* @__PURE__ */ jsx10("select", { value, onChange: (e) => onChange(e.target.value), children: options.map(([v, l]) => /* @__PURE__ */ jsx10("option", { value: v, children: l }, v)) })
+  ] });
+}
+function ColorField({
+  label,
+  value,
+  allowTransparent,
+  onChange
+}) {
+  const isTransparent = value === "transparent" || value === "none";
+  return /* @__PURE__ */ jsxs6("label", { className: "squisq-image-editor-field", children: [
+    /* @__PURE__ */ jsx10("span", { children: label }),
+    /* @__PURE__ */ jsxs6("span", { className: "squisq-image-editor-color-row", children: [
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          type: "color",
+          value: isTransparent ? "#000000" : normalizeColor(value),
+          onChange: (e) => onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          spellCheck: false
+        }
+      ),
+      allowTransparent && /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange("transparent"),
+          title: "Set transparent",
+          "aria-label": "Set transparent",
+          className: "squisq-image-editor-color-clear",
+          children: /* @__PURE__ */ jsx10(NoneIcon, {})
+        }
+      )
+    ] })
+  ] });
+}
+function normalizeColor(v) {
+  if (/^#[0-9a-f]{6}$/i.test(v)) return v;
+  if (/^#[0-9a-f]{3}$/i.test(v)) {
+    return "#" + v.slice(1).split("").map((c) => c + c).join("");
+  }
+  return "#000000";
+}
+
+// src/imageEditor/Toolbar.tsx
+import { useRef as useRef7, useState as useState8, useEffect as useEffect8 } from "react";
+
+// src/scene/ShapePalette.tsx
+import { useEffect as useEffect7, useId as useId2, useMemo as useMemo2, useRef as useRef6, useState as useState7 } from "react";
+import { shapePath } from "@bendyline/squisq/doc";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var CATALOG = [
+  {
+    category: "Lines",
+    items: [
+      { kind: "line", label: "Line" },
+      { kind: "arrow", label: "Line Arrow" },
+      { kind: "text", label: "Text" }
+    ]
+  },
+  {
+    category: "Basic Shapes",
+    items: [
+      { kind: "rectangle", label: "Rectangle" },
+      { kind: "circle", label: "Ellipse" },
+      { kind: "triangle", label: "Triangle" },
+      { kind: "right-triangle", label: "Right Triangle" },
+      { kind: "diamond", label: "Diamond" },
+      { kind: "pentagon", label: "Pentagon" },
+      { kind: "hexagon", label: "Hexagon" },
+      { kind: "octagon", label: "Octagon" },
+      { kind: "parallelogram", label: "Parallelogram" },
+      { kind: "trapezoid", label: "Trapezoid" },
+      { kind: "plus", label: "Cross" },
+      { kind: "chevron", label: "Chevron" },
+      { kind: "cylinder", label: "Cylinder" },
+      { kind: "callout", label: "Speech Bubble" },
+      { kind: "cloud", label: "Cloud" },
+      { kind: "heart", label: "Heart" },
+      { kind: "lightning", label: "Lightning" }
+    ]
+  },
+  {
+    category: "Stars",
+    items: [
+      { kind: "star", label: "5-Point Star" },
+      { kind: "star4", label: "4-Point Star" },
+      { kind: "star6", label: "6-Point Star" }
+    ]
+  },
+  {
+    category: "Block Arrows",
+    items: [
+      { kind: "arrow-right", label: "Arrow Right" },
+      { kind: "arrow-left", label: "Arrow Left" },
+      { kind: "arrow-up", label: "Arrow Up" },
+      { kind: "arrow-down", label: "Arrow Down" },
+      { kind: "double-arrow", label: "Double Arrow" }
+    ]
+  }
+];
+function ShapePalette({
+  onPick,
+  onClose,
+  ignoreOutsideSelector = ".squisq-scene-block-toolbar"
+}) {
+  const [query, setQuery] = useState7("");
+  const ref = useRef6(null);
+  useEffect7(() => {
+    const onDocPointer = (e) => {
+      const target = e.target;
+      if (ignoreOutsideSelector && target?.closest?.(ignoreOutsideSelector)) return;
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", onDocPointer);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onDocPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [onClose, ignoreOutsideSelector]);
+  const sections = useMemo2(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return CATALOG;
+    return CATALOG.map((s) => ({
+      category: s.category,
+      items: s.items.filter((i) => i.label.toLowerCase().includes(q) || i.kind.includes(q))
+    })).filter((s) => s.items.length > 0);
+  }, [query]);
+  return /* @__PURE__ */ jsxs7("div", { className: "squisq-shape-palette", ref, role: "dialog", "aria-label": "Shapes", children: [
+    /* @__PURE__ */ jsx11(
+      "input",
+      {
+        className: "squisq-shape-palette-search",
+        type: "text",
+        placeholder: "Search shapes\u2026",
+        value: query,
+        autoFocus: true,
+        onChange: (e) => setQuery(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx11("div", { className: "squisq-shape-palette-scroll", children: sections.map((section) => /* @__PURE__ */ jsxs7("div", { className: "squisq-shape-palette-section", children: [
+      /* @__PURE__ */ jsx11("div", { className: "squisq-shape-palette-heading", children: section.category }),
+      /* @__PURE__ */ jsx11("div", { className: "squisq-shape-palette-grid", children: section.items.map((item) => /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          className: "squisq-shape-palette-item",
+          title: item.label,
+          "aria-label": item.label,
+          onClick: () => onPick(item.kind),
+          children: /* @__PURE__ */ jsx11(ShapeThumb, { kind: item.kind })
+        },
+        item.kind
+      )) })
+    ] }, section.category)) })
+  ] });
+}
+function ShapeThumb({ kind }) {
+  const d = shapePath(kind, 4, 4, 40, 30);
+  const arrowId = `squisq-shape-thumb-arrow-${useId2().replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 48 38", width: 36, height: 28, "aria-hidden": "true", children: [
+    kind === "arrow" ? /* @__PURE__ */ jsx11("defs", { children: /* @__PURE__ */ jsx11(
+      "marker",
+      {
+        id: arrowId,
+        viewBox: "0 0 10 10",
+        refX: 9,
+        refY: 5,
+        markerWidth: 4,
+        markerHeight: 4,
+        children: /* @__PURE__ */ jsx11("path", { d: "M 0 0 L 10 5 L 0 10 z", className: "squisq-shape-thumb-line" })
+      }
+    ) }) : null,
+    d ? /* @__PURE__ */ jsx11("path", { d, className: "squisq-shape-thumb" }) : kind === "circle" ? /* @__PURE__ */ jsx11("ellipse", { cx: 24, cy: 19, rx: 20, ry: 15, className: "squisq-shape-thumb" }) : kind === "line" ? /* @__PURE__ */ jsx11("line", { x1: 4, y1: 34, x2: 44, y2: 4, className: "squisq-shape-thumb-line" }) : kind === "arrow" ? /* @__PURE__ */ jsx11(
+      "line",
+      {
+        x1: 4,
+        y1: 34,
+        x2: 44,
+        y2: 4,
+        className: "squisq-shape-thumb-line",
+        markerEnd: `url(#${arrowId})`
+      }
+    ) : kind === "text" ? /* @__PURE__ */ jsx11("text", { x: 24, y: 26, textAnchor: "middle", className: "squisq-shape-thumb-text", children: "T" }) : /* @__PURE__ */ jsx11("rect", { x: 4, y: 6, width: 40, height: 26, rx: 3, className: "squisq-shape-thumb" })
+  ] });
+}
+
+// src/imageEditor/Toolbar.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function RedlineArrowIcon() {
+  return /* @__PURE__ */ jsxs8("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12(
+      "line",
+      {
+        x1: "3",
+        y1: "12",
+        x2: "12",
+        y2: "3",
+        stroke: "#cc0000",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "polyline",
+      {
+        points: "7,3 12,3 12,8",
+        stroke: "#cc0000",
+        strokeWidth: "1.8",
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        fill: "none"
+      }
+    )
+  ] });
+}
+function RedlineRectIcon() {
+  return /* @__PURE__ */ jsx12("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("rect", { x: "1.5", y: "3", width: "12", height: "9", stroke: "#cc0000", strokeWidth: "1.8", rx: "0.5" }) });
+}
+function RedlineTextIcon() {
+  return /* @__PURE__ */ jsx12("svg", { width: "15", height: "15", viewBox: "0 0 15 15", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("text", { x: "1.5", y: "13", fill: "#cc0000", fontSize: "13", fontFamily: "sans-serif", fontWeight: "bold", children: "A" }) });
+}
+function ZoomRectIcon() {
+  return /* @__PURE__ */ jsxs8("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx12("circle", { cx: "6", cy: "6", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx12(
+      "line",
+      {
+        x1: "9.5",
+        y1: "9.5",
+        x2: "13.5",
+        y2: "13.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "line",
+      {
+        x1: "4",
+        y1: "6",
+        x2: "8",
+        y2: "6",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "line",
+      {
+        x1: "6",
+        y1: "4",
+        x2: "6",
+        y2: "8",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+var REDLINE_TOOLS = [
+  { kind: "redline-arrow", icon: /* @__PURE__ */ jsx12(RedlineArrowIcon, {}), title: "Redline arrow" },
+  { kind: "redline-rect", icon: /* @__PURE__ */ jsx12(RedlineRectIcon, {}), title: "Redline rectangle" },
+  { kind: "redline-text", icon: /* @__PURE__ */ jsx12(RedlineTextIcon, {}), title: "Redline text" }
+];
+var TOOLS = [
+  { id: "select", icon: /* @__PURE__ */ jsx12(CursorIcon, {}), title: "Select / move (V)" },
+  { id: "text", icon: /* @__PURE__ */ jsx12(TextIcon, {}), title: "Add text (T)" },
+  { id: "shape", icon: /* @__PURE__ */ jsx12(ShapeIcon, {}), title: "Add shape (S)" },
+  { id: "crop", icon: /* @__PURE__ */ jsx12(CropIcon, {}), title: "Crop (C)" },
+  { id: "zoom-rect", icon: /* @__PURE__ */ jsx12(ZoomRectIcon, {}), title: "Zoom to rectangle (Z)" }
+];
+function Toolbar({
+  doc,
+  tool,
+  shapeKind,
+  dispatch,
+  uploadAsset,
+  imageInputRef,
+  onExport,
+  onSave,
+  saveLabel = "Save",
+  saveTitle = "Save state.json",
+  extraTools,
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onZoomSet,
+  onZoomFit,
+  onZoom1to1
+}) {
+  const internalImageInputRef = useRef7(null);
+  const fileInputRef = imageInputRef ?? internalImageInputRef;
+  const [shapePaletteOpen, setShapePaletteOpen] = useState8(false);
+  const onFilePicked = async (file) => {
+    try {
+      const path = await uploadAsset(file, file.name);
+      const dims = await probeDims(file);
+      const w = Math.min(dims.width, doc.canvas.width);
+      const h = Math.min(dims.height, doc.canvas.height);
+      dispatch({
+        type: "add-layer",
+        layer: {
+          type: "image",
+          name: file.name,
+          position: {
+            x: Math.round((doc.canvas.width - w) / 2),
+            y: Math.round((doc.canvas.height - h) / 2),
+            width: w,
+            height: h
+          },
+          content: { src: path, alt: file.name, fit: "fill" }
+        }
+      });
+    } catch (err) {
+      console.warn(
+        "[squisq-editor] image upload failed:",
+        err instanceof Error ? err.message : err
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "squisq-image-editor-toolbar", "data-testid": "image-editor-toolbar", children: [
+    /* @__PURE__ */ jsx12("div", { className: "squisq-image-editor-tool-group", role: "radiogroup", "aria-label": "Tools", children: TOOLS.map((t) => {
+      const button = /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": tool === t.id,
+          className: ["squisq-image-editor-tool-button", tool === t.id ? "is-active" : ""].filter(Boolean).join(" "),
+          onClick: () => {
+            if (t.id === "shape") {
+              dispatch({ type: "set-tool", tool: "shape" });
+              setShapePaletteOpen((o) => !o);
+              return;
+            }
+            setShapePaletteOpen(false);
+            dispatch({ type: "set-tool", tool: t.id });
+          },
+          title: t.title,
+          "aria-label": t.title,
+          "aria-haspopup": t.id === "shape" ? "dialog" : void 0,
+          "aria-expanded": t.id === "shape" ? shapePaletteOpen : void 0,
+          children: t.icon
+        },
+        t.id
+      );
+      if (t.id !== "shape") return button;
+      return /* @__PURE__ */ jsxs8("span", { className: "squisq-image-editor-shape-trigger", children: [
+        button,
+        shapePaletteOpen && /* @__PURE__ */ jsx12(
+          ShapePalette,
+          {
+            ignoreOutsideSelector: ".squisq-image-editor-toolbar",
+            onPick: (kind) => {
+              dispatch({ type: "set-shape-kind", kind });
+              dispatch({ type: "set-tool", tool: "shape" });
+              setShapePaletteOpen(false);
+            },
+            onClose: () => setShapePaletteOpen(false)
+          }
+        )
+      ] }, t.id);
+    }) }),
+    /* @__PURE__ */ jsx12("div", { className: "squisq-image-editor-tool-group", role: "group", "aria-label": "Redline shortcuts", children: REDLINE_TOOLS.map((rt) => {
+      const active = tool === "shape" && shapeKind === rt.kind;
+      return /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: ["squisq-image-editor-tool-button", active ? "is-active" : ""].filter(Boolean).join(" "),
+          onClick: () => {
+            dispatch({ type: "set-shape-kind", kind: rt.kind });
+            dispatch({ type: "set-tool", tool: "shape" });
+            setShapePaletteOpen(false);
+          },
+          title: rt.title,
+          "aria-label": rt.title,
+          "aria-pressed": active,
+          children: rt.icon
+        },
+        rt.kind
+      );
+    }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "squisq-image-editor-tool-group", children: [
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label",
+          onClick: () => fileInputRef.current?.click(),
+          title: "Import image as new layer",
+          "aria-label": "Import image as new layer",
+          children: [
+            /* @__PURE__ */ jsx12(PlusIcon, {}),
+            /* @__PURE__ */ jsx12("span", { children: "Image" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          hidden: true,
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file) void onFilePicked(file);
+            e.target.value = "";
+          }
+        }
+      )
+    ] }),
+    (onZoomIn || onZoomOut) && /* @__PURE__ */ jsxs8("div", { className: "squisq-image-editor-tool-group squisq-image-editor-tool-group--zoom", children: [
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button",
+          onClick: onZoomOut,
+          title: "Zoom out",
+          "aria-label": "Zoom out",
+          children: "\u2212"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "input",
+        {
+          type: "number",
+          className: "squisq-image-editor-zoom-input",
+          value: Math.round((zoom ?? 1) * 100),
+          min: 6,
+          max: 1600,
+          step: 1,
+          onChange: (e) => {
+            const v = parseInt(e.target.value, 10);
+            if (!isNaN(v) && v > 0) onZoomSet?.(v / 100);
+          },
+          "aria-label": "Zoom percentage",
+          title: "Zoom %"
+        }
+      ),
+      /* @__PURE__ */ jsx12("span", { className: "squisq-image-editor-zoom-label", children: "%" }),
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button",
+          onClick: onZoomIn,
+          title: "Zoom in",
+          "aria-label": "Zoom in",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label",
+          onClick: onZoom1to1,
+          title: "1:1 pixels",
+          children: "1:1"
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label",
+          onClick: onZoomFit,
+          title: "Fit to window",
+          children: "Fit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "squisq-image-editor-tool-group squisq-image-editor-tool-group--right", children: [
+      extraTools,
+      onSave && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "squisq-image-editor-tool-button",
+          onClick: onSave,
+          title: saveTitle,
+          children: saveLabel
+        }
+      ),
+      /* @__PURE__ */ jsx12(ExportDropdown, { onExport })
+    ] })
+  ] });
+}
+function ExportDropdown({ onExport }) {
+  const [open, setOpen] = useState8(false);
+  const wrapRef = useRef7(null);
+  const triggerRef = useRef7(null);
+  useEffect8(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      const t = e.target;
+      if (!t) return;
+      if (wrapRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const pick = (f) => {
+    setOpen(false);
+    onExport(f);
+  };
+  return /* @__PURE__ */ jsxs8("span", { ref: wrapRef, className: "squisq-image-editor-version-dropdown", children: [
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label",
+        onClick: () => setOpen((o) => !o),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        title: "Export image",
+        children: [
+          /* @__PURE__ */ jsx12("span", { children: "Export" }),
+          /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", style: { fontSize: "0.8em" }, children: "\u25BE" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx12("div", { className: "squisq-image-editor-version-popover", role: "menu", style: { minWidth: 160 }, children: /* @__PURE__ */ jsx12("ul", { className: "squisq-image-editor-version-popover__list", style: { maxHeight: "none" }, children: [
+      { f: "png", label: "PNG" },
+      { f: "jpeg", label: "JPEG" },
+      { f: "webp", label: "WebP" }
+    ].map(({ f, label }) => /* @__PURE__ */ jsx12("li", { className: "squisq-image-editor-version-popover__row", children: /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        role: "menuitem",
+        className: "squisq-image-editor-tool-button squisq-image-editor-tool-button--menu",
+        onClick: () => pick(f),
+        children: [
+          "Export as ",
+          label
+        ]
+      }
+    ) }, f)) }) })
+  ] });
+}
+function probeDims(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      resolve({ width: 200, height: 200 });
+    };
+    img.src = url;
+  });
+}
+
+// src/imageEditor/useImageEditorTokens.ts
+import { useMemo as useMemo3 } from "react";
+import {
+  applySurface,
+  resolveFontFamily
+} from "@bendyline/squisq/schemas";
+import { DEFAULT_THEME } from "@bendyline/squisq/doc";
+import { useAutoSurface } from "@bendyline/squisq-react";
+function useImageEditorTokens(theme, surface) {
+  const auto = useAutoSurface(surface === "auto");
+  const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
+  return useMemo3(() => {
+    const baseTheme = theme ?? DEFAULT_THEME;
+    const finalTheme = effectiveSurface ? applySurface(baseTheme, effectiveSurface) : baseTheme;
+    const bg = finalTheme.colors.background;
+    const text = finalTheme.colors.text;
+    const muted = finalTheme.colors.textMuted;
+    const accent = finalTheme.colors.primary;
+    const panelBg = `color-mix(in srgb, ${bg} 92%, ${text} 8%)`;
+    const panelBorder = `color-mix(in srgb, ${bg} 80%, ${text} 20%)`;
+    const controlBg = `color-mix(in srgb, ${bg} 86%, ${text} 14%)`;
+    const controlBorder = `color-mix(in srgb, ${bg} 72%, ${text} 28%)`;
+    const workspaceBg = `color-mix(in srgb, ${bg} 95%, ${text} 5%)`;
+    const bodyFont = resolveFontFamily(
+      finalTheme.typography.bodyFont,
+      "system-ui, -apple-system, sans-serif"
+    );
+    const style = {
+      ["--squisq-image-editor-bg"]: bg,
+      ["--squisq-image-editor-panel-bg"]: panelBg,
+      ["--squisq-image-editor-panel-border"]: panelBorder,
+      ["--squisq-image-editor-text"]: text,
+      ["--squisq-image-editor-text-muted"]: muted,
+      ["--squisq-image-editor-accent"]: accent,
+      ["--squisq-image-editor-control-bg"]: controlBg,
+      ["--squisq-image-editor-control-border"]: controlBorder,
+      ["--squisq-image-editor-workspace-bg"]: workspaceBg,
+      ["--squisq-image-editor-body-font"]: bodyFont
+    };
+    return { style, theme: finalTheme };
+  }, [theme, effectiveSurface]);
+}
+
+// src/imageEditor/createShapeLayer.ts
+import { shapePath as shapePath2 } from "@bendyline/squisq/doc";
+var DEFAULT_WIDTH = 120;
+var DEFAULT_HEIGHT = 80;
+var DEFAULT_FILL = "#3399ff";
+var DEFAULT_STROKE = "#1a4d80";
+var DEFAULT_STROKE_WIDTH = 2;
+var REDLINE_COLOR = "#cc0000";
+var REDLINE_STROKE_WIDTH = 15;
+var LINEAR_KINDS = /* @__PURE__ */ new Set(["line", "arrow", "redline-arrow", "redline-rect"]);
+function isLinearShapeKind(kind) {
+  return LINEAR_KINDS.has(kind);
+}
+var NATIVE = {
+  rectangle: "rect",
+  circle: "circle",
+  line: "line"
+};
+function createShapeLayer(kind, x, y) {
+  const width = DEFAULT_WIDTH;
+  const height = DEFAULT_HEIGHT;
+  const px = Math.round(x - width / 2);
+  const py = Math.round(y - height / 2);
+  const position = { x: px, y: py, width, height };
+  const name = prettifyKind(kind);
+  if (kind === "text") {
+    return {
+      type: "text",
+      name: "Text",
+      position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
+      content: {
+        text: "New text",
+        style: { fontSize: 32, color: "#111111", fontFamily: "sans-serif" }
+      }
+    };
+  }
+  if (kind === "redline-arrow") {
+    return {
+      type: "path",
+      name: "Redline Arrow",
+      position,
+      content: {
+        d: `M ${px} ${py} L ${px + width} ${py + height}`,
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        fill: "none",
+        endMarker: "arrow"
+      }
+    };
+  }
+  if (kind === "redline-rect") {
+    return {
+      type: "shape",
+      name: "Redline Rectangle",
+      position,
+      content: {
+        shape: "rect",
+        fill: "none",
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        borderRadius: 0
+      }
+    };
+  }
+  if (kind === "redline-text") {
+    return {
+      type: "text",
+      name: "Redline Text",
+      position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
+      content: {
+        text: "Annotation",
+        style: {
+          fontSize: 24,
+          color: REDLINE_COLOR,
+          fontFamily: "sans-serif",
+          fontWeight: "bold"
+        }
+      }
+    };
+  }
+  const native = NATIVE[kind];
+  if (native === "rect") {
+    return {
+      type: "shape",
+      name,
+      position,
+      content: {
+        shape: "rect",
+        fill: DEFAULT_FILL,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        borderRadius: 8
+      }
+    };
+  }
+  if (native === "circle") {
+    return {
+      type: "shape",
+      name,
+      position,
+      content: {
+        shape: "circle",
+        fill: DEFAULT_FILL,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH
+      }
+    };
+  }
+  if (native === "line") {
+    return {
+      type: "shape",
+      name,
+      position,
+      content: { shape: "line", stroke: DEFAULT_STROKE, strokeWidth: DEFAULT_STROKE_WIDTH }
+    };
+  }
+  if (kind === "arrow") {
+    return {
+      type: "path",
+      name: "Arrow",
+      position,
+      content: {
+        d: `M ${px} ${py} L ${px + width} ${py + height}`,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        fill: "none",
+        endMarker: "arrow"
+      }
+    };
+  }
+  const d = shapePath2(kind, px, py, width, height) ?? `M ${px} ${py} L ${px + width} ${py + height}`;
+  return {
+    type: "path",
+    name,
+    position,
+    content: {
+      d,
+      shapeKind: kind,
+      fill: DEFAULT_FILL,
+      stroke: DEFAULT_STROKE,
+      strokeWidth: DEFAULT_STROKE_WIDTH
+    }
+  };
+}
+function createLinearShapeLayer(kind, x1, y1, x2, y2) {
+  const rx1 = Math.round(x1);
+  const ry1 = Math.round(y1);
+  const rx2 = Math.round(x2);
+  const ry2 = Math.round(y2);
+  const bx = Math.min(rx1, rx2);
+  const by = Math.min(ry1, ry2);
+  const bw = Math.max(Math.abs(rx2 - rx1), 4);
+  const bh = Math.max(Math.abs(ry2 - ry1), 4);
+  const position = { x: bx, y: by, width: bw, height: bh };
+  if (kind === "line") {
+    return {
+      type: "shape",
+      name: "Line",
+      position: {
+        x: rx1,
+        y: ry1,
+        width: rx2 - rx1,
+        height: ry2 - ry1
+      },
+      content: { shape: "line", stroke: DEFAULT_STROKE, strokeWidth: DEFAULT_STROKE_WIDTH }
+    };
+  }
+  if (kind === "arrow") {
+    return {
+      type: "path",
+      name: "Arrow",
+      position,
+      content: {
+        d: `M ${rx1} ${ry1} L ${rx2} ${ry2}`,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        fill: "none",
+        endMarker: "arrow"
+      }
+    };
+  }
+  if (kind === "redline-arrow") {
+    return {
+      type: "path",
+      name: "Redline Arrow",
+      position,
+      content: {
+        d: `M ${rx1} ${ry1} L ${rx2} ${ry2}`,
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        fill: "none",
+        endMarker: "arrow"
+      }
+    };
+  }
+  if (kind === "redline-rect") {
+    return {
+      type: "shape",
+      name: "Redline Rectangle",
+      position: {
+        x: Math.min(rx1, rx2),
+        y: Math.min(ry1, ry2),
+        width: Math.max(Math.abs(rx2 - rx1), 4),
+        height: Math.max(Math.abs(ry2 - ry1), 4)
+      },
+      content: {
+        shape: "rect",
+        fill: "none",
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        borderRadius: 0
+      }
+    };
+  }
+  return createShapeLayer(kind, (x1 + x2) / 2, (y1 + y2) / 2);
+}
+function prettifyKind(kind) {
+  return kind.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+
+// src/ImageEditor.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ZOOM_STEPS = [0.0625, 0.083, 0.125, 0.167, 0.25, 0.333, 0.5, 0.667, 1, 1.5, 2, 3, 4, 8, 16];
+function ImageEditor(props) {
+  const {
+    filesContainer,
+    initialSrc,
+    stateFilename,
+    allowVersioning,
+    versioningAutoSaveIdleMs,
+    onExport,
+    saveBehavior = "flush",
+    saveFormat = "png",
+    saveLabel,
+    saveTitle,
+    theme,
+    surface,
+    className
+  } = props;
+  const tokens = useImageEditorTokens(theme, surface);
+  const { state, dispatch, flush, resolveAssetUrl, uploadAsset, versioning, ready, error } = useImageEditor({
+    container: filesContainer,
+    initialSrc,
+    stateFilename,
+    allowVersioning,
+    versioningAutoSaveIdleMs
+  });
+  const [historyRefreshKey, setHistoryRefreshKey] = useState9(0);
+  const surfaceRef = useRef8(null);
+  const imageInputRef = useRef8(null);
+  const [zoom, setZoom] = useState9(1);
+  const handleZoomIn = useCallback5(() => {
+    setZoom((z) => ZOOM_STEPS.find((s) => s > z + 1e-3) ?? 16);
+  }, []);
+  const handleZoomOut = useCallback5(() => {
+    setZoom((z) => [...ZOOM_STEPS].reverse().find((s) => s < z - 1e-3) ?? 0.0625);
+  }, []);
+  const handleZoomSet = useCallback5((z) => {
+    setZoom(Math.max(0.0625, Math.min(16, z)));
+  }, []);
+  const handleZoom1to1 = useCallback5(() => setZoom(1), []);
+  const handleZoomFit = useCallback5(() => {
+    if (!state || !surfaceRef.current) return;
+    const { clientWidth, clientHeight } = surfaceRef.current;
+    const PADDING = 32;
+    const fitZ = Math.min(
+      (clientWidth - PADDING) / state.doc.canvas.width,
+      (clientHeight - PADDING) / state.doc.canvas.height
+    );
+    setZoom(Math.max(0.0625, Math.min(16, fitZ)));
+  }, [state]);
+  const [requestEditLayerId, setRequestEditLayerId] = useState9(null);
+  const handleExport = useCallback5(
+    async (format) => {
+      if (!state) return;
+      try {
+        const blob = await exportImageEditDoc2(state.doc, filesContainer, { format });
+        if (onExport) {
+          onExport(blob, format);
+        } else {
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = `image.${format === "jpeg" ? "jpg" : format}`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+        }
+      } catch (err) {
+        console.warn(
+          "[squisq-editor] image export failed:",
+          err instanceof Error ? err.message : err
+        );
+      }
+    },
+    [state, filesContainer, onExport]
+  );
+  const handleSaveAndClose = useCallback5(async () => {
+    try {
+      await flush();
+      if (versioning) {
+        try {
+          await versioning.saveVersion();
+          setHistoryRefreshKey((k) => k + 1);
+        } catch (err) {
+          console.warn(
+            "[squisq-editor] image-edit save-version failed:",
+            err instanceof Error ? err.message : err
+          );
+        }
+      }
+      await handleExport(saveFormat);
+    } catch (err) {
+      console.warn(
+        "[squisq-editor] image-edit save-and-close failed:",
+        err instanceof Error ? err.message : err
+      );
+    }
+  }, [flush, versioning, handleExport, saveFormat]);
+  const handleRevertToVersion = useCallback5(
+    async (version) => {
+      if (!versioning) return;
+      try {
+        await flush();
+      } catch {
+      }
+      const result = await versioning.revertToVersion(version);
+      if (!result.reverted) return;
+      const doc = await versioning.readVersion(version);
+      if (doc) {
+        dispatch({ type: "load", doc });
+        setHistoryRefreshKey((k) => k + 1);
+      }
+    },
+    [dispatch, flush, versioning]
+  );
+  const handleCreateTextAt = useCallback5(
+    (x, y) => {
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
+      dispatch({
+        type: "add-layer",
+        layer: {
+          id,
+          type: "text",
+          name: "Text",
+          position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
+          content: {
+            text: "New text",
+            style: { fontSize: 32, color: "#111111", fontFamily: "sans-serif" }
+          }
+        }
+      });
+      dispatch({ type: "set-tool", tool: "select" });
+      setRequestEditLayerId(id);
+    },
+    [dispatch]
+  );
+  const shapeKind = state?.shapeKind ?? "rectangle";
+  const shapeDragDraw = isLinearShapeKind(shapeKind);
+  const handleCreateShapeAt = useCallback5(
+    (x, y) => {
+      const layer = createShapeLayer(shapeKind, x, y);
+      const id = `layer-${Math.random().toString(36).slice(2, 10)}`;
+      dispatch({ type: "add-layer", layer: { ...layer, id } });
+      dispatch({ type: "set-tool", tool: "select" });
+      if (layer.type === "text") {
+        setRequestEditLayerId(id);
+      }
+    },
+    [dispatch, shapeKind]
+  );
+  const handleCreateShapeFromPoints = useCallback5(
+    (x1, y1, x2, y2) => {
+      dispatch({ type: "add-layer", layer: createLinearShapeLayer(shapeKind, x1, y1, x2, y2) });
+      dispatch({ type: "set-tool", tool: "select" });
+    },
+    [dispatch, shapeKind]
+  );
+  const handleAddLayer = useCallback5(
+    (kind) => {
+      if (!state) return;
+      if (kind === "image") {
+        imageInputRef.current?.click();
+        return;
+      }
+      const { width, height } = state.doc.canvas;
+      if (kind === "text") {
+        handleCreateTextAt(Math.max(0, (width - 240) / 2), Math.max(0, (height - 48) / 2));
+        return;
+      }
+      handleCreateShapeAt(width / 2, height / 2);
+    },
+    [handleCreateShapeAt, handleCreateTextAt, state]
+  );
+  if (error) {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: ["squisq-image-editor", className].filter(Boolean).join(" "),
+        style: tokens.style,
+        children: /* @__PURE__ */ jsxs9("div", { className: "squisq-image-editor-error", children: [
+          "Failed to load image editor: ",
+          error.message
+        ] })
+      }
+    );
+  }
+  if (!ready || !state) {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        className: ["squisq-image-editor", className].filter(Boolean).join(" "),
+        style: tokens.style,
+        children: /* @__PURE__ */ jsx13("div", { className: "squisq-image-editor-loading", children: "Loading image editor\u2026" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: ["squisq-image-editor", className].filter(Boolean).join(" "),
+      style: tokens.style,
+      "data-testid": "image-editor",
+      children: [
+        /* @__PURE__ */ jsx13(
+          Toolbar,
+          {
+            doc: state.doc,
+            tool: state.tool,
+            shapeKind: state.shapeKind,
+            dispatch,
+            uploadAsset,
+            imageInputRef,
+            onExport: handleExport,
+            onSave: saveBehavior === "export" ? handleSaveAndClose : flush,
+            saveLabel: saveLabel ?? (saveBehavior === "export" ? "Save and close" : "Save"),
+            saveTitle: saveTitle ?? (saveBehavior === "export" ? `Rasterize and save as ${saveFormat.toUpperCase()}` : "Save state.json"),
+            extraTools: versioning ? /* @__PURE__ */ jsx13(
+              ImageVersionHistoryDropdown,
+              {
+                versioning,
+                container: filesContainer,
+                onRevert: handleRevertToVersion,
+                refreshKey: historyRefreshKey
+              }
+            ) : null,
+            zoom,
+            onZoomIn: handleZoomIn,
+            onZoomOut: handleZoomOut,
+            onZoomSet: handleZoomSet,
+            onZoomFit: handleZoomFit,
+            onZoom1to1: handleZoom1to1
+          }
+        ),
+        /* @__PURE__ */ jsxs9("div", { className: "squisq-image-editor-body", children: [
+          /* @__PURE__ */ jsx13("div", { className: "squisq-image-editor-center", children: /* @__PURE__ */ jsx13(
+            CanvasSurface,
+            {
+              doc: state.doc,
+              selectedLayerId: state.selectedLayerId,
+              tool: state.tool,
+              resolveAssetUrl,
+              dispatch,
+              onCreateTextAt: handleCreateTextAt,
+              onCreateShapeAt: handleCreateShapeAt,
+              onCreateShapeFromPoints: handleCreateShapeFromPoints,
+              shapeDragDraw,
+              zoom,
+              onSetZoom: handleZoomSet,
+              surfaceRef,
+              requestEditLayerId
+            }
+          ) }),
+          /* @__PURE__ */ jsxs9("div", { className: "squisq-image-editor-side", children: [
+            /* @__PURE__ */ jsx13(
+              LayersPanel,
+              {
+                doc: state.doc,
+                selectedLayerId: state.selectedLayerId,
+                dispatch,
+                onAddLayer: handleAddLayer
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              PropertiesPanel,
+              {
+                doc: state.doc,
+                selectedLayerId: state.selectedLayerId,
+                dispatch
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  ShapePalette,
+  ImageViewer,
+  initialImageEditorState,
+  imageEditorReducer,
+  useImageEditor,
+  ImageEditor
+};