@printwithsynergy/artwork-pdf-editor 0.1.1

package/dist/components/EditorCanvas.js

@@ -0,0 +1,852 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PDFDocument } from "pdf-lib";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Ellipse, Image as KonvaImage, Layer, Line, Rect, Stage, Text, Transformer, } from "react-konva";
+import { DEFAULT_BLEED_MM, formatBleed } from "../lib/bleed";
+import { templateToInitialState } from "../lib/dieline-template";
+import { DielineLibraryModal } from "./DielineLibraryModal";
+import { LayersPanel } from "./LayersPanel";
+import { MobileToolDrawer } from "./MobileToolDrawer";
+import { SeparationsPanel } from "./SeparationsPanel";
+// ── constants ─────────────────────────────────────────────────────────────────
+const SERVICE_URL = (process.env.NEXT_PUBLIC_SERVICE_URL ?? "http://localhost:3001").replace(/\/$/, "");
+const BRAND = "#fc5102";
+const PANEL_BG = "#1a0f08";
+const BORDER = "#3d1a00";
+const MUTED = "#666";
+// ── helper: load image element ────────────────────────────────────────────────
+function loadImage(src) {
+    return new Promise((res, rej) => {
+        const img = new window.Image();
+        img.onload = () => res(img);
+        img.onerror = rej;
+        img.src = src;
+    });
+}
+// ── helper: get pointer relative to stage content (ignoring stage transform) ──
+function stagePointer(stage) {
+    const pos = stage.getPointerPosition() ?? { x: 0, y: 0 };
+    return {
+        x: (pos.x - stage.x()) / stage.scaleX(),
+        y: (pos.y - stage.y()) / stage.scaleY(),
+    };
+}
+function ObjNode({ obj, selected, onSelect, onDragEnd, onTransformEnd, onDblClick }) {
+    const sharedProps = {
+        id: obj.id,
+        x: obj.x,
+        y: obj.y,
+        opacity: obj.opacity,
+        draggable: true,
+        onClick: onSelect,
+        onTap: onSelect,
+        onDblClick: onDblClick,
+        onDragEnd: (e) => onDragEnd(e.target.x(), e.target.y()),
+        onTransformEnd: (e) => {
+            const node = e.target;
+            const scaleX = node.scaleX();
+            const scaleY = node.scaleY();
+            node.scaleX(1);
+            node.scaleY(1);
+            onTransformEnd(node.x(), node.y(), Math.max(4, node.width() * scaleX), Math.max(4, node.height() * scaleY));
+        },
+    };
+    if (obj.type === "rect") {
+        return (_jsx(Rect, { ...sharedProps, width: obj.width, height: obj.height, fill: obj.fill, stroke: selected ? BRAND : obj.stroke, strokeWidth: selected ? Math.max(obj.strokeWidth, 1) : obj.strokeWidth }));
+    }
+    if (obj.type === "ellipse") {
+        return (_jsx(Ellipse, { ...sharedProps, radiusX: obj.width / 2, radiusY: obj.height / 2, offsetX: -obj.width / 2, offsetY: -obj.height / 2, fill: obj.fill, stroke: selected ? BRAND : obj.stroke, strokeWidth: selected ? Math.max(obj.strokeWidth, 1) : obj.strokeWidth }));
+    }
+    if (obj.type === "text") {
+        return (_jsx(Text, { ...sharedProps, text: obj.text ?? "Text", fontSize: obj.fontSize ?? 16, fill: obj.fill, width: obj.width }));
+    }
+    if (obj.type === "image" && obj.imageEl) {
+        return (_jsx(KonvaImage, { ...sharedProps, image: obj.imageEl, width: obj.width, height: obj.height, stroke: selected ? BRAND : obj.stroke, strokeWidth: selected ? 1 : obj.strokeWidth }));
+    }
+    return null;
+}
+// ── main component ─────────────────────────────────────────────────────────────
+export function EditorCanvas({ file, report, demo = false, initialObjects, initialPageSize, mode = "basic", onModeChange, config, bleedMm: bleedMmProp = DEFAULT_BLEED_MM, isMobile = false, menuOpen = false, onMenuOpenChange, }) {
+    const containerRef = useRef(null);
+    const stageRef = useRef(null);
+    const trRef = useRef(null);
+    const [containerSize, setContainerSize] = useState({ width: 800, height: 600 });
+    const [pageSize, setPageSize] = useState(initialPageSize ?? { width: 595, height: 842 }); // A4 in pt
+    const [zoom, setZoom] = useState(1);
+    const [stagePos, setStagePos] = useState({ x: 0, y: 0 });
+    const [bleedMm, setBleedMm] = useState(bleedMmProp);
+    const [currentTemplate, setCurrentTemplate] = useState(null);
+    const [objects, setObjects] = useState(initialObjects ?? []);
+    const [history, setHistory] = useState([initialObjects ?? []]);
+    const [historyIdx, setHistoryIdx] = useState(0);
+    const [selectedId, setSelectedId] = useState(null);
+    const [tool, setTool] = useState("select");
+    const [drawing, setDrawing] = useState(null);
+    const [fillColor, setFillColor] = useState(BRAND);
+    const [strokeColor, setStrokeColor] = useState("transparent");
+    const [strokeWidth, setStrokeWidth] = useState(1);
+    const [opacity, setOpacity] = useState(1);
+    const [exportStatus, setExportStatus] = useState("idle");
+    const [exportJobId, setExportJobId] = useState(null);
+    const imageInputRef = useRef(null);
+    // Pro mode state — dieline modal + per-ink visibility filter for separations.
+    const [dielineOpen, setDielineOpen] = useState(false);
+    const [hiddenInks, setHiddenInks] = useState(new Set());
+    // ── sync bleed from prop ────────────────────────────────────────────────────
+    useEffect(() => {
+        setBleedMm(bleedMmProp);
+    }, [bleedMmProp]);
+    // ── recompute page + dieline when bleed changes ────────────────────────────
+    useEffect(() => {
+        if (!currentTemplate)
+            return;
+        const { objects: seeded, pageSize: newPageSize } = templateToInitialState(currentTemplate, bleedMm);
+        setPageSize(newPageSize);
+        setObjects((prev) => {
+            const dielineObj = seeded[0];
+            if (!dielineObj)
+                return prev;
+            return [dielineObj, ...prev.filter((o) => !/dieline/i.test(o.id))];
+        });
+    }, [bleedMm, currentTemplate]);
+    // ── container resize ────────────────────────────────────────────────────────
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver((entries) => {
+            for (const e of entries) {
+                setContainerSize({ width: e.contentRect.width, height: e.contentRect.height });
+            }
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    // ── parse page size from uploaded file ─────────────────────────────────────
+    useEffect(() => {
+        if (!file)
+            return;
+        const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
+        if (isPdf) {
+            file
+                .arrayBuffer()
+                .then((buf) => PDFDocument.load(buf, { ignoreEncryption: true }))
+                .then((doc) => {
+                const page = doc.getPages()[0];
+                if (page) {
+                    const { width, height } = page.getSize();
+                    setPageSize({ width, height });
+                }
+            })
+                .catch(() => undefined);
+        }
+        else if (file.type.startsWith("image/")) {
+            const url = URL.createObjectURL(file);
+            const img = new window.Image();
+            img.onload = () => {
+                URL.revokeObjectURL(url);
+                const max = 600;
+                const s = Math.min(1, max / Math.max(img.naturalWidth, img.naturalHeight));
+                setPageSize({ width: img.naturalWidth * s, height: img.naturalHeight * s });
+            };
+            img.src = url;
+        }
+    }, [file]);
+    // ── fit to page when container or page size changes ─────────────────────────
+    const fitPage = useCallback((cw, ch, pw, ph) => {
+        if (cw <= 0 || ch <= 0 || pw <= 0 || ph <= 0)
+            return;
+        const pad = 80;
+        const s = Math.min((cw - pad * 2) / pw, (ch - pad * 2) / ph, 3);
+        const newZoom = Math.max(s, 0.05);
+        setZoom(newZoom);
+        setStagePos({ x: (cw - pw * newZoom) / 2, y: (ch - ph * newZoom) / 2 });
+    }, []);
+    useEffect(() => {
+        fitPage(containerSize.width, containerSize.height, pageSize.width, pageSize.height);
+    }, [pageSize, containerSize, fitPage]);
+    // ── transformer sync ────────────────────────────────────────────────────────
+    useEffect(() => {
+        const tr = trRef.current;
+        const stage = stageRef.current;
+        if (!tr || !stage)
+            return;
+        if (selectedId) {
+            const node = stage.findOne(`#${selectedId}`);
+            if (node) {
+                tr.nodes([node]);
+                tr.getLayer()?.batchDraw();
+            }
+        }
+        else {
+            tr.nodes([]);
+            tr.getLayer()?.batchDraw();
+        }
+    }, [selectedId]);
+    // ── history helpers ─────────────────────────────────────────────────────────
+    function commit(next) {
+        const newHist = history.slice(0, historyIdx + 1).concat([next]);
+        setHistory(newHist);
+        setHistoryIdx(newHist.length - 1);
+        setObjects(next);
+    }
+    function undo() {
+        const idx = Math.max(0, historyIdx - 1);
+        setHistoryIdx(idx);
+        setObjects(history[idx] ?? []);
+        setSelectedId(null);
+    }
+    function redo() {
+        const idx = Math.min(history.length - 1, historyIdx + 1);
+        setHistoryIdx(idx);
+        setObjects(history[idx] ?? []);
+        setSelectedId(null);
+    }
+    // ── keyboard shortcuts ──────────────────────────────────────────────────────
+    // biome-ignore lint/correctness/useExhaustiveDependencies: commit/undo/redo capture history via closure
+    useEffect(() => {
+        function onKey(e) {
+            const tag = e.target.tagName;
+            if (tag === "TEXTAREA" || tag === "INPUT")
+                return;
+            if (e.key === "Delete" || e.key === "Backspace") {
+                if (selectedId) {
+                    commit(objects.filter((o) => o.id !== selectedId));
+                    setSelectedId(null);
+                }
+                return;
+            }
+            if (e.key === "Escape") {
+                setSelectedId(null);
+                setTool("select");
+                return;
+            }
+            const mod = e.ctrlKey || e.metaKey;
+            if (mod && e.key === "z") {
+                e.preventDefault();
+                e.shiftKey ? redo() : undo();
+                return;
+            }
+            if (mod && e.key === "y") {
+                e.preventDefault();
+                redo();
+                return;
+            }
+            if (!mod) {
+                if (e.key === "v")
+                    setTool("select");
+                if (e.key === "r")
+                    setTool("rect");
+                if (e.key === "e")
+                    setTool("ellipse");
+                if (e.key === "t")
+                    setTool("text");
+                if (e.key === "i")
+                    setTool("image");
+            }
+        }
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [objects, selectedId]);
+    // ── stage pointer events (mouse + touch) ───────────────────────────────────
+    function onStagePointerDown(e) {
+        if (tool === "select") {
+            if (e.target === stageRef.current)
+                setSelectedId(null);
+            return;
+        }
+        if (!stageRef.current)
+            return;
+        e.evt.preventDefault();
+        const pos = stagePointer(stageRef.current);
+        setDrawing({ x: pos.x, y: pos.y, w: 0, h: 0 });
+    }
+    function onStagePointerMove(e) {
+        if (!drawing)
+            return;
+        e.evt.preventDefault();
+        if (!stageRef.current)
+            return;
+        const pos = stagePointer(stageRef.current);
+        setDrawing((d) => (d ? { ...d, w: pos.x - d.x, h: pos.y - d.y } : null));
+    }
+    async function onStagePointerUp() {
+        if (!drawing)
+            return;
+        const { x, y, w, h } = drawing;
+        setDrawing(null);
+        if (Math.abs(w) < 4 || Math.abs(h) < 4)
+            return;
+        const nx = w < 0 ? x + w : x;
+        const ny = h < 0 ? y + h : y;
+        const nw = Math.abs(w);
+        const nh = Math.abs(h);
+        const base = {
+            id: crypto.randomUUID(),
+            x: nx,
+            y: ny,
+            width: nw,
+            height: nh,
+            fill: fillColor,
+            stroke: strokeColor,
+            strokeWidth,
+            opacity,
+        };
+        let obj;
+        if (tool === "text") {
+            obj = { ...base, type: "text", text: "Text", fontSize: 16, fill: fillColor };
+        }
+        else {
+            obj = { ...base, type: tool };
+        }
+        commit([...objects, obj]);
+        setSelectedId(obj.id);
+        setTool("select");
+    }
+    function onWheel(e) {
+        e.evt.preventDefault();
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        const factor = e.evt.deltaY < 0 ? 1.08 : 1 / 1.08;
+        const pointer = stage.getPointerPosition() ?? { x: 0, y: 0 };
+        const newZoom = Math.min(Math.max(zoom * factor, 0.05), 8);
+        const mx = (pointer.x - stagePos.x) / zoom;
+        const my = (pointer.y - stagePos.y) / zoom;
+        setZoom(newZoom);
+        setStagePos({ x: pointer.x - mx * newZoom, y: pointer.y - my * newZoom });
+    }
+    // ── text double-click inline editing ───────────────────────────────────────
+    function onTextDblClick(id, e) {
+        const textNode = e.target;
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        const container = stage.container();
+        const cr = container.getBoundingClientRect();
+        const absPos = textNode.getAbsolutePosition();
+        const ta = document.createElement("textarea");
+        ta.value = textNode.text();
+        ta.style.cssText = [
+            "position:fixed",
+            `top:${cr.top + absPos.y}px`,
+            `left:${cr.left + absPos.x}px`,
+            `width:${Math.max(textNode.width() * zoom, 120)}px`,
+            `min-height:${(textNode.fontSize() ?? 16) * zoom * 1.4}px`,
+            `font-size:${(textNode.fontSize() ?? 16) * zoom}px`,
+            "font-family:sans-serif",
+            "background:#1a0f08",
+            "color:#fff",
+            "border:1px solid #fc5102",
+            "border-radius:2px",
+            "padding:2px 4px",
+            "resize:none",
+            "outline:none",
+            "z-index:9999",
+            "line-height:1.4",
+        ].join(";");
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        const finish = () => {
+            const val = ta.value;
+            document.body.removeChild(ta);
+            commit(objects.map((o) => (o.id === id ? { ...o, text: val } : o)));
+        };
+        ta.addEventListener("blur", finish, { once: true });
+        ta.addEventListener("keydown", (ev) => {
+            if (ev.key === "Escape" || (ev.key === "Enter" && !ev.shiftKey)) {
+                ev.preventDefault();
+                ta.blur();
+            }
+        });
+    }
+    // ── image import ────────────────────────────────────────────────────────────
+    async function handleImageFile(f) {
+        // Try uploading to the service so the asset has a persistent URL.
+        // Falls back to a local data URL when the service is unavailable or in demo mode.
+        let src;
+        if (!demo) {
+            try {
+                const form = new FormData();
+                form.append("file", f);
+                const res = await fetch(`${SERVICE_URL}/assets`, { method: "POST", body: form });
+                if (res.ok) {
+                    const json = (await res.json());
+                    src = `${SERVICE_URL}${json.url}`;
+                }
+                else {
+                    throw new Error("upload failed");
+                }
+            }
+            catch {
+                src = await new Promise((res) => {
+                    const reader = new FileReader();
+                    reader.onload = (ev) => res(ev.target?.result);
+                    reader.readAsDataURL(f);
+                });
+            }
+        }
+        else {
+            src = await new Promise((res) => {
+                const reader = new FileReader();
+                reader.onload = (ev) => res(ev.target?.result);
+                reader.readAsDataURL(f);
+            });
+        }
+        const imgEl = await loadImage(src);
+        const max = Math.min(pageSize.width, pageSize.height) * 0.5;
+        const s = Math.min(1, max / Math.max(imgEl.naturalWidth, imgEl.naturalHeight));
+        const w = imgEl.naturalWidth * s;
+        const h = imgEl.naturalHeight * s;
+        const obj = {
+            id: crypto.randomUUID(),
+            type: "image",
+            x: (pageSize.width - w) / 2,
+            y: (pageSize.height - h) / 2,
+            width: w,
+            height: h,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: 0,
+            opacity: 1,
+            src,
+            imageEl: imgEl,
+        };
+        commit([...objects, obj]);
+        setSelectedId(obj.id);
+        setTool("select");
+    }
+    // ── update selected object properties ──────────────────────────────────────
+    const selected = objects.find((o) => o.id === selectedId) ?? null;
+    function updateSelected(patch) {
+        if (!selectedId)
+            return;
+        commit(objects.map((o) => (o.id === selectedId ? { ...o, ...patch } : o)));
+    }
+    // ── PDF export ──────────────────────────────────────────────────────────────
+    async function handleClientExport() {
+        const stage = stageRef.current;
+        if (!stage)
+            return;
+        setExportStatus("sending");
+        try {
+            // Rasterize just the page area at 2x for a crisp embed.
+            const png = stage.toDataURL({
+                x: stagePos.x,
+                y: stagePos.y,
+                width: pageSize.width * zoom,
+                height: pageSize.height * zoom,
+                pixelRatio: 2,
+                mimeType: "image/png",
+            });
+            setSelectedId(null);
+            const pdf = await PDFDocument.create();
+            const page = pdf.addPage([pageSize.width, pageSize.height]);
+            const img = await pdf.embedPng(png);
+            page.drawImage(img, {
+                x: 0,
+                y: 0,
+                width: pageSize.width,
+                height: pageSize.height,
+            });
+            const bytes = await pdf.save();
+            const blob = new Blob([new Uint8Array(bytes)], { type: "application/pdf" });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "artwork-demo.pdf";
+            link.click();
+            URL.revokeObjectURL(url);
+            setExportStatus("done");
+            setTimeout(() => setExportStatus("idle"), 3000);
+        }
+        catch {
+            setExportStatus("error");
+        }
+    }
+    async function handleExport() {
+        if (demo) {
+            await handleClientExport();
+            return;
+        }
+        setExportStatus("sending");
+        const doc = {
+            version: "2",
+            width: pageSize.width,
+            height: pageSize.height,
+            unit: "pt",
+            separations: [],
+            layers: [
+                {
+                    id: "layer-1",
+                    type: "artwork",
+                    name: "Artwork",
+                    visible: true,
+                    objects: objects.map((o) => ({
+                        id: o.id,
+                        type: o.type,
+                        x: o.x,
+                        y: o.y,
+                        width: o.width,
+                        height: o.height,
+                        fill: o.fill,
+                        stroke: o.stroke,
+                        ...(o.strokeWidth !== undefined ? { strokeWidth: o.strokeWidth } : {}),
+                        ...(o.opacity !== undefined ? { opacity: o.opacity } : {}),
+                        ...(o.text !== undefined ? { text: o.text } : {}),
+                        ...(o.fontSize !== undefined ? { fontSize: o.fontSize } : {}),
+                        ...(o.fontFamily !== undefined ? { fontFamily: o.fontFamily } : {}),
+                        ...(o.src !== undefined ? { src: o.src } : {}),
+                        ...(o.pathData !== undefined ? { pathData: o.pathData } : {}),
+                    })),
+                },
+            ],
+        };
+        const req = {
+            document: doc,
+            output: { format: "pdf-x4" },
+            ...(report ? { preflightReport: report } : {}),
+        };
+        try {
+            const res = await fetch(`${SERVICE_URL}/jobs`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(req),
+            });
+            const { id } = (await res.json());
+            setExportJobId(id);
+            setExportStatus("polling");
+            pollJob(id);
+        }
+        catch {
+            setExportStatus("error");
+        }
+    }
+    function pollJob(id) {
+        let attempts = 0;
+        const tick = async () => {
+            attempts++;
+            if (attempts > 60) {
+                setExportStatus("error");
+                return;
+            }
+            try {
+                const r = await fetch(`${SERVICE_URL}/jobs/${id}`);
+                const { status } = (await r.json());
+                if (status === "done") {
+                    const rr = await fetch(`${SERVICE_URL}/jobs/${id}/result`);
+                    const result = (await rr.json());
+                    const link = document.createElement("a");
+                    link.href = `data:application/pdf;base64,${result.pdfBase64}`;
+                    link.download = result.filename ?? "artwork.pdf";
+                    link.click();
+                    setExportStatus("done");
+                    setTimeout(() => setExportStatus("idle"), 3000);
+                }
+                else if (status === "failed") {
+                    setExportStatus("error");
+                }
+                else {
+                    setTimeout(tick, 2000);
+                }
+            }
+            catch {
+                setExportStatus("error");
+            }
+        };
+        setTimeout(tick, 1000);
+    }
+    // ── pro mode helpers ───────────────────────────────────────────────────────
+    function reorderObject(id, direction) {
+        const idx = objects.findIndex((o) => o.id === id);
+        if (idx === -1)
+            return;
+        const swapWith = direction === "up" ? idx + 1 : idx - 1;
+        if (swapWith < 0 || swapWith >= objects.length)
+            return;
+        const next = objects.slice();
+        const a = next[idx];
+        const b = next[swapWith];
+        if (!a || !b)
+            return;
+        next[idx] = b;
+        next[swapWith] = a;
+        commit(next);
+    }
+    function toggleVisible(id) {
+        commit(objects.map((o) => (o.id === id ? { ...o, opacity: o.opacity === 0 ? 1 : 0 } : o)));
+    }
+    function applyDieline(template) {
+        setCurrentTemplate(template);
+        const { objects: seeded, pageSize: newPageSize } = templateToInitialState(template, bleedMm);
+        setPageSize(newPageSize);
+        // Replace any existing dieline rect so swapping templates is one click.
+        const next = [...seeded, ...objects.filter((o) => !/dieline/i.test(o.id))];
+        commit(next);
+        setSelectedId(null);
+    }
+    function toggleInk(color) {
+        setHiddenInks((prev) => {
+            const next = new Set(prev);
+            if (next.has(color))
+                next.delete(color);
+            else
+                next.add(color);
+            return next;
+        });
+    }
+    // Objects whose fill/stroke match a hidden ink are rendered with opacity 0
+    // for the preview. We don't mutate the actual object — separations preview
+    // is non-destructive.
+    const visibleObjects = config.enable_separations_panel && hiddenInks.size > 0
+        ? objects.map((o) => {
+            const fillHidden = hiddenInks.has(o.fill.toLowerCase());
+            const strokeHidden = hiddenInks.has(o.stroke.toLowerCase());
+            if (fillHidden && strokeHidden)
+                return { ...o, opacity: 0 };
+            return o;
+        })
+        : objects;
+    // ── render ──────────────────────────────────────────────────────────────────
+    const cursor = tool === "select" ? "default" : tool === "image" ? "cell" : "crosshair";
+    const exportLabel = exportStatus === "sending"
+        ? "Sending…"
+        : exportStatus === "polling"
+            ? "Rendering…"
+            : exportStatus === "done"
+                ? "Downloaded ✓"
+                : exportStatus === "error"
+                    ? "Error — retry"
+                    : demo
+                        ? "Download PDF"
+                        : "Export PDF/X-4";
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            background: "#ffffff",
+        }, children: [!isMobile && (_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    padding: "0.375rem 0.75rem",
+                    background: PANEL_BG,
+                    borderBottom: `1px solid ${BORDER}`,
+                    flexShrink: 0,
+                    flexWrap: "wrap",
+                }, children: [["select", "rect", "ellipse", "text", "image"].map((t) => (_jsx(ToolBtn, { active: tool === t, onClick: () => {
+                            setTool(t);
+                            if (t === "image")
+                                imageInputRef.current?.click();
+                        }, children: t === "select"
+                            ? "↖ Select"
+                            : t === "rect"
+                                ? "▭ Rect"
+                                : t === "ellipse"
+                                    ? "◯ Ellipse"
+                                    : t === "text"
+                                        ? "T Text"
+                                        : "⬚ Image" }, t))), _jsx("div", { style: { width: 1, height: 20, background: BORDER, margin: "0 0.25rem" } }), _jsx("button", { type: "button", onClick: undo, disabled: historyIdx === 0, style: iconBtnStyle(historyIdx === 0), children: "\u21A9 Undo" }), _jsx("button", { type: "button", onClick: redo, disabled: historyIdx >= history.length - 1, style: iconBtnStyle(historyIdx >= history.length - 1), children: "\u21AA Redo" }), _jsx("div", { style: { width: 1, height: 20, background: BORDER, margin: "0 0.25rem" } }), _jsx("button", { type: "button", onClick: () => fitPage(containerSize.width, containerSize.height, pageSize.width, pageSize.height), style: iconBtnStyle(false), children: "\u22A1 Fit" }), _jsxs("span", { style: { fontSize: "0.75rem", color: MUTED }, children: [Math.round(zoom * 100), "%"] }), config.enable_dieline_chooser && (_jsxs(_Fragment, { children: [_jsx("div", { style: { width: 1, height: 20, background: BORDER, margin: "0 0.25rem" } }), _jsx("button", { type: "button", onClick: () => setDielineOpen(true), style: iconBtnStyle(false), children: "\u25A6 Dielines" })] })), _jsx("div", { style: { flex: 1 } }), _jsxs("label", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.3rem",
+                            fontSize: "0.75rem",
+                            color: "#999",
+                        }, children: ["Fill", _jsx("input", { type: "color", value: fillColor, onChange: (e) => {
+                                    setFillColor(e.target.value);
+                                    if (selected)
+                                        updateSelected({ fill: e.target.value });
+                                }, style: {
+                                    width: 24,
+                                    height: 20,
+                                    border: "none",
+                                    padding: 0,
+                                    background: "none",
+                                    cursor: "pointer",
+                                } })] }), _jsxs("label", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.3rem",
+                            fontSize: "0.75rem",
+                            color: "#999",
+                        }, children: ["Stroke", _jsx("input", { type: "color", value: strokeColor === "transparent" ? "#000000" : strokeColor, onChange: (e) => {
+                                    setStrokeColor(e.target.value);
+                                    if (selected)
+                                        updateSelected({ stroke: e.target.value });
+                                }, style: {
+                                    width: 24,
+                                    height: 20,
+                                    border: "none",
+                                    padding: 0,
+                                    background: "none",
+                                    cursor: "pointer",
+                                } })] }), _jsx("div", { style: { width: 1, height: 20, background: BORDER, margin: "0 0.25rem" } }), config.enable_export_button && (_jsx("button", { type: "button", onClick: handleExport, disabled: exportStatus === "sending" || exportStatus === "polling", style: {
+                            background: exportStatus === "done"
+                                ? "#2e7d32"
+                                : exportStatus === "error"
+                                    ? "#b71c1c"
+                                    : BRAND,
+                            color: "#fff",
+                            border: "none",
+                            borderRadius: 4,
+                            padding: "0.3rem 0.85rem",
+                            fontSize: "0.8rem",
+                            fontWeight: 600,
+                            cursor: exportStatus === "sending" || exportStatus === "polling" ? "wait" : "pointer",
+                            opacity: exportStatus === "sending" || exportStatus === "polling" ? 0.7 : 1,
+                        }, children: exportLabel }))] })), isMobile && config.enable_export_button && (_jsx("div", { style: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    padding: "0.4rem 0.75rem",
+                    background: PANEL_BG,
+                    borderBottom: `1px solid ${BORDER}`,
+                    flexShrink: 0,
+                }, children: _jsx("button", { type: "button", onClick: handleExport, disabled: exportStatus === "sending" || exportStatus === "polling", style: {
+                        background: exportStatus === "done" ? "#2e7d32" : exportStatus === "error" ? "#b71c1c" : BRAND,
+                        color: "#fff",
+                        border: "none",
+                        borderRadius: 4,
+                        padding: "0.35rem 0.95rem",
+                        fontSize: "0.85rem",
+                        fontWeight: 600,
+                        cursor: exportStatus === "sending" || exportStatus === "polling" ? "wait" : "pointer",
+                        opacity: exportStatus === "sending" || exportStatus === "polling" ? 0.7 : 1,
+                    }, children: exportLabel }) })), _jsxs("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [config.enable_layers_panel && !isMobile && (_jsx(LayersPanel, { objects: objects, selectedId: selectedId, onSelect: (id) => setSelectedId(id), onReorder: reorderObject, onDelete: (id) => {
+                            commit(objects.filter((o) => o.id !== id));
+                            if (id === selectedId)
+                                setSelectedId(null);
+                        }, onToggleVisible: toggleVisible })), _jsxs("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative" }, children: [_jsx(Stage, { ref: stageRef, width: containerSize.width, height: containerSize.height, scaleX: zoom, scaleY: zoom, x: stagePos.x, y: stagePos.y, onMouseDown: onStagePointerDown, onMouseMove: onStagePointerMove, onMouseUp: onStagePointerUp, onTouchStart: onStagePointerDown, onTouchMove: onStagePointerMove, onTouchEnd: onStagePointerUp, onWheel: onWheel, style: { cursor }, children: _jsxs(Layer, { children: [_jsx(Rect, { x: 3, y: 3, width: pageSize.width, height: pageSize.height, fill: "rgba(0,0,0,0.08)" }), _jsx(Rect, { x: 0, y: 0, width: pageSize.width, height: pageSize.height, fill: "#ffffff", stroke: "#d4d4d8", strokeWidth: 0.5 / zoom, onClick: () => {
+                                                if (tool === "select")
+                                                    setSelectedId(null);
+                                            } }), config.enable_canvas_grid && _jsx(GridLines, { pageSize: pageSize, zoom: zoom }), config.enable_bleed_visualization && (_jsxs(_Fragment, { children: [_jsx(Rect, { x: 0, y: 0, width: pageSize.width, height: pageSize.height, stroke: "#0ea5e9", strokeWidth: 1 / zoom, dash: [6 / zoom, 4 / zoom], listening: false }), _jsx(Text, { text: `BLEED ${formatBleed(bleedMm, "in")}`, x: 6, y: -14 / zoom, fontSize: 10 / zoom, fill: "#0ea5e9", listening: false })] })), visibleObjects.map((obj) => (_jsx(ObjNode, { obj: obj, selected: obj.id === selectedId, onSelect: () => setSelectedId(obj.id), onDragEnd: (x, y) => commit(objects.map((o) => (o.id === obj.id ? { ...o, x, y } : o))), onTransformEnd: (x, y, w, h) => commit(objects.map((o) => o.id === obj.id ? { ...o, x, y, width: w, height: h } : o)), onDblClick: (e) => obj.type === "text" && onTextDblClick(obj.id, e) }, obj.id))), _jsx(Transformer, { ref: trRef, borderStroke: BRAND, borderStrokeWidth: 1, anchorStroke: BRAND, anchorFill: "#fff", anchorSize: 8, rotateEnabled: false, keepRatio: false }), drawing && tool !== "select" && (_jsx(Rect, { x: drawing.w < 0 ? drawing.x + drawing.w : drawing.x, y: drawing.h < 0 ? drawing.y + drawing.h : drawing.y, width: Math.abs(drawing.w), height: Math.abs(drawing.h), fill: tool === "text" ? "rgba(252,81,2,0.08)" : `${fillColor}80`, stroke: BRAND, strokeWidth: 1 / zoom, dash: [4 / zoom, 4 / zoom] }))] }) }), objects.length === 0 && (_jsx("div", { style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    pointerEvents: "none",
+                                }, children: _jsx("span", { style: { fontSize: "0.8rem", color: "#94a3b8" }, children: "Use the toolbar to draw shapes, add text, or import an image" }) }))] }), config.enable_separations_panel && !isMobile && (_jsx(SeparationsPanel, { objects: objects, hidden: hiddenInks, onToggle: toggleInk }))] }), selected && (_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "1rem",
+                    padding: "0.375rem 0.75rem",
+                    background: PANEL_BG,
+                    borderTop: `1px solid ${BORDER}`,
+                    flexShrink: 0,
+                    fontSize: "0.75rem",
+                    color: "#999",
+                    flexWrap: "wrap",
+                }, children: [_jsx("span", { style: { color: BRAND, fontWeight: 600 }, children: selected.type }), _jsx(PropNum, { label: "X", value: Math.round(selected.x), onChange: (v) => updateSelected({ x: v }) }), _jsx(PropNum, { label: "Y", value: Math.round(selected.y), onChange: (v) => updateSelected({ y: v }) }), _jsx(PropNum, { label: "W", value: Math.round(selected.width), onChange: (v) => updateSelected({ width: Math.max(1, v) }) }), _jsx(PropNum, { label: "H", value: Math.round(selected.height), onChange: (v) => updateSelected({ height: Math.max(1, v) }) }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.3rem" }, children: ["Fill", _jsx("input", { type: "color", value: selected.fill === "transparent" ? "#ffffff" : selected.fill, onChange: (e) => updateSelected({ fill: e.target.value }), style: {
+                                    width: 22,
+                                    height: 18,
+                                    border: "none",
+                                    padding: 0,
+                                    background: "none",
+                                    cursor: "pointer",
+                                } })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.3rem" }, children: ["Stroke", _jsx("input", { type: "color", value: selected.stroke === "transparent" ? "#000000" : selected.stroke, onChange: (e) => updateSelected({ stroke: e.target.value }), style: {
+                                    width: 22,
+                                    height: 18,
+                                    border: "none",
+                                    padding: 0,
+                                    background: "none",
+                                    cursor: "pointer",
+                                } })] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.3rem" }, children: ["Opacity", _jsx("input", { type: "range", min: 0, max: 1, step: 0.05, value: selected.opacity, onChange: (e) => updateSelected({ opacity: Number(e.target.value) }), style: { width: 60 } }), _jsxs("span", { children: [Math.round(selected.opacity * 100), "%"] })] }), selected.type === "text" && (_jsxs(_Fragment, { children: [_jsx(PropNum, { label: "Size", value: selected.fontSize ?? 16, onChange: (v) => updateSelected({ fontSize: Math.max(4, v) }) }), _jsx("button", { type: "button", onClick: () => {
+                                    // Spawn inline text edit by focusing textarea overlay
+                                    const stage = stageRef.current;
+                                    if (!stage)
+                                        return;
+                                    const node = stage.findOne(`#${selected.id}`);
+                                    if (!node)
+                                        return;
+                                    onTextDblClick(selected.id, {
+                                        target: node,
+                                    });
+                                }, style: { ...iconBtnStyle(false), fontSize: "0.72rem" }, children: "Edit text" })] })), _jsx("button", { type: "button", onClick: () => {
+                            commit(objects.filter((o) => o.id !== selectedId));
+                            setSelectedId(null);
+                        }, style: {
+                            marginLeft: "auto",
+                            background: "transparent",
+                            border: "1px solid #5a1a1a",
+                            color: "#e57373",
+                            borderRadius: 3,
+                            padding: "0.2rem 0.5rem",
+                            cursor: "pointer",
+                            fontSize: "0.72rem",
+                        }, children: "Delete" })] })), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => {
+                    const f = e.target.files?.[0];
+                    if (f)
+                        handleImageFile(f);
+                    e.target.value = "";
+                } }), config.enable_dieline_chooser && (_jsx(DielineLibraryModal, { open: dielineOpen, onClose: () => setDielineOpen(false), onSelect: applyDieline })), isMobile && (_jsx(MobileToolDrawer, { isOpen: menuOpen, onClose: () => onMenuOpenChange?.(false), config: config, activeTool: tool, onSelectTool: (t) => {
+                    setTool(t);
+                    if (t === "image")
+                        imageInputRef.current?.click();
+                }, canUndo: historyIdx > 0, canRedo: historyIdx < history.length - 1, onUndo: undo, onRedo: redo, zoomPct: Math.round(zoom * 100), onFit: () => fitPage(containerSize.width, containerSize.height, pageSize.width, pageSize.height), onOpenDielineChooser: () => setDielineOpen(true), fillColor: fillColor, strokeColor: strokeColor === "transparent" ? "#000000" : strokeColor, onFillChange: (hex) => {
+                    setFillColor(hex);
+                    if (selected)
+                        updateSelected({ fill: hex });
+                }, onStrokeChange: (hex) => {
+                    setStrokeColor(hex);
+                    if (selected)
+                        updateSelected({ stroke: hex });
+                }, bleedMm: bleedMm, onBleedMmChange: setBleedMm, mode: mode, onModeChange: (m) => onModeChange?.(m), onExport: handleExport, exportLabel: exportLabel, exportBusy: exportStatus === "sending" || exportStatus === "polling" }))] }));
+}
+// ── grid overlay ──────────────────────────────────────────────────────────────
+const MM_TO_PT_GRID = 2.83465;
+function GridLines({ pageSize, zoom, }) {
+    const minor = 10 * MM_TO_PT_GRID; // 10 mm → pt
+    const major = 50 * MM_TO_PT_GRID; // 50 mm → pt
+    const lines = [];
+    for (let x = 0; x <= pageSize.width; x += minor) {
+        const isMajor = Math.abs(x % major) < 0.01 || Math.abs((x % major) - major) < 0.01;
+        lines.push(_jsx(Line, { points: [x, 0, x, pageSize.height], stroke: isMajor ? "#cbd5e1" : "#e5e7eb", strokeWidth: 0.5 / zoom, listening: false }, `v-${x}`));
+    }
+    for (let y = 0; y <= pageSize.height; y += minor) {
+        const isMajor = Math.abs(y % major) < 0.01 || Math.abs((y % major) - major) < 0.01;
+        lines.push(_jsx(Line, { points: [0, y, pageSize.width, y], stroke: isMajor ? "#cbd5e1" : "#e5e7eb", strokeWidth: 0.5 / zoom, listening: false }, `h-${y}`));
+    }
+    return _jsx(_Fragment, { children: lines });
+}
+// ── small helper components ───────────────────────────────────────────────────
+function ToolBtn({ active, onClick, children, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, style: {
+            background: active ? BRAND : "transparent",
+            color: active ? "#fff" : "#aaa",
+            border: `1px solid ${active ? BRAND : BORDER}`,
+            borderRadius: 4,
+            padding: "0.2rem 0.6rem",
+            fontSize: "0.75rem",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            transition: "background 0.1s, color 0.1s",
+        }, children: children }));
+}
+function iconBtnStyle(disabled) {
+    return {
+        background: "transparent",
+        color: disabled ? "#444" : "#aaa",
+        border: `1px solid ${disabled ? "#2a1200" : BORDER}`,
+        borderRadius: 4,
+        padding: "0.2rem 0.55rem",
+        fontSize: "0.75rem",
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontFamily: "inherit",
+    };
+}
+function PropNum({ label, value, onChange, }) {
+    return (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "0.25rem" }, children: [label, _jsx("input", { type: "number", value: value, onChange: (e) => onChange(Number(e.target.value)), style: {
+                    width: 52,
+                    background: "#120a04",
+                    border: `1px solid ${BORDER}`,
+                    color: "#ccc",
+                    borderRadius: 3,
+                    padding: "0.1rem 0.3rem",
+                    fontSize: "0.72rem",
+                } })] }));
+}
+//# sourceMappingURL=EditorCanvas.js.map