canvu-react 0.3.6 → 0.3.8

package/dist/react.cjs

@@ -53,93 +53,6 @@ var init_custom_shape = __esm({
   }
 });
 
-// src/scene/freehand-path.ts
-function dedupeFreehandPoints(points, minDist) {
-  if (points.length <= 2) {
-    return points.map((p) => ({ ...p }));
-  }
-  const minSq = minDist * minDist;
-  const first = points[0];
-  if (!first) return [];
-  const out = [{ ...first }];
-  for (let i = 1; i < points.length - 1; i++) {
-    const p = points[i];
-    const last = out[out.length - 1];
-    if (!p || !last) continue;
-    const dx = p.x - last.x;
-    const dy = p.y - last.y;
-    if (dx * dx + dy * dy >= minSq) {
-      out.push({ ...p });
-    }
-  }
-  const end = points[points.length - 1];
-  const lastKept = out[out.length - 1];
-  if (!end || !lastKept) return out;
-  if ((end.x - lastKept.x) ** 2 + (end.y - lastKept.y) ** 2 > 1e-12) {
-    out.push({ ...end });
-  }
-  return out;
-}
-function smoothFreehandPointsToPathD(points) {
-  const n = points.length;
-  if (n === 0) return "";
-  if (n === 1) {
-    const p = points[0];
-    if (!p) return "";
-    return `M ${p.x} ${p.y}`;
-  }
-  if (n === 2) {
-    const a = points[0];
-    const b = points[1];
-    if (!a || !b) return "";
-    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
-  }
-  const p0 = points[0];
-  if (!p0) return "";
-  let d = `M ${p0.x} ${p0.y}`;
-  let i = 1;
-  for (; i < n - 2; i++) {
-    const pi = points[i];
-    const pi1 = points[i + 1];
-    if (!pi || !pi1) continue;
-    const xc = (pi.x + pi1.x) / 2;
-    const yc = (pi.y + pi1.y) / 2;
-    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
-  }
-  const pLast = points[i];
-  const pEnd = points[i + 1];
-  if (!pLast || !pEnd) return d;
-  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
-  return d;
-}
-function outlineStrokeToClosedPathD(outline) {
-  const len = outline.length;
-  if (len === 0) return "";
-  const first = outline[0];
-  if (!first) return "";
-  if (len < 3) {
-    let d2 = `M ${first[0]} ${first[1]}`;
-    for (let i = 1; i < len; i++) {
-      const pt = outline[i];
-      if (!pt) continue;
-      d2 += ` L ${pt[0]} ${pt[1]}`;
-    }
-    return `${d2} Z`;
-  }
-  let d = `M ${first[0]} ${first[1]} Q`;
-  for (let i = 0; i < len; i++) {
-    const p0 = outline[i];
-    const p1 = outline[(i + 1) % len];
-    if (!p0 || !p1) continue;
-    d += ` ${p0[0]} ${p0[1]} ${(p0[0] + p1[0]) / 2} ${(p0[1] + p1[1]) / 2}`;
-  }
-  return `${d} Z`;
-}
-var init_freehand_path = __esm({
-  "src/scene/freehand-path.ts"() {
-  }
-});
-
 // src/scene/text-svg.ts
 function escapeSvgTextContent(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -325,18 +238,18 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
         ...base2,
         size: Math.max(2, sw * 1.05),
         thinning: 0.42,
-        smoothing: 0.56,
-        streamline: 0.18,
-        simulatePressure: false
+        smoothing: 0.78,
+        streamline: 0.62,
+        simulatePressure: true
       };
     }
     return {
       ...base2,
       size: Math.max(2, sw * 1.18),
       thinning: 0.12,
-      smoothing: 0.72,
-      streamline: 0.42,
-      simulatePressure: false
+      smoothing: 0.85,
+      streamline: 0.78,
+      simulatePressure: true
     };
   }
   if (toolKind === "brush") {
@@ -354,7 +267,7 @@ function perfectFreehandOptions(toolKind, style, strokeComplete, pressureAware =
     thinning: 0.08,
     smoothing: 0.88,
     streamline: 0.84,
-    simulatePressure: false
+    simulatePressure: true
   };
 }
 function resolveStrokeStyle(item) {
@@ -424,70 +337,41 @@ function computeFreehandSvgPayload(pathPointsLocal, style, toolKind, strokeCompl
   if (pathPointsLocal.length === 1) {
     const p = pathPointsLocal[0];
     if (!p) return null;
-    const r = Math.max(0.5, style.strokeWidth / 2);
-    return {
-      kind: "circle",
-      cx: p.x,
-      cy: p.y,
-      r,
-      fill: style.stroke,
-      fillOpacity: style.strokeOpacity
-    };
-  }
-  const minDist = Math.min(0.25, Math.max(0.02, style.strokeWidth * 0.02));
-  const pts = dedupeFreehandPoints(pathPointsLocal, minDist);
-  if (pts.length === 0) return null;
-  if (pts.length === 1) {
-    const p = pts[0];
-    if (!p) return null;
-    const r = Math.max(0.5, style.strokeWidth / 2);
     return {
       kind: "circle",
       cx: p.x,
       cy: p.y,
-      r,
+      r: Math.max(0.5, style.strokeWidth / 2),
       fill: style.stroke,
       fillOpacity: style.strokeOpacity
     };
   }
-  const hasPressure = toolKind === "draw" && pts.some((p) => p.pressure != null && Number.isFinite(p.pressure));
-  if (toolKind === "draw" && !hasPressure) {
-    const d2 = smoothFreehandPointsToPathD(pts);
-    return {
-      kind: "strokePath",
-      d: d2,
-      stroke: style.stroke,
-      strokeWidth: style.strokeWidth,
-      strokeOpacity: style.strokeOpacity
-    };
-  }
-  const input = hasPressure ? pts.map(
+  const hasPressure = pathPointsLocal.some(
+    (p) => p.pressure != null && Number.isFinite(p.pressure)
+  );
+  const input = hasPressure ? pathPointsLocal.map(
     (p) => [p.x, p.y, Math.min(1, Math.max(0, p.pressure ?? 0.5))]
-  ) : pts.map((p) => [p.x, p.y]);
-  const opts = perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure);
-  let outline = [];
-  try {
-    const raw = getStroke__default.default(input, opts);
-    outline = raw.map(([x, y]) => [x, y]);
-  } catch {
-    outline = [];
-  }
-  if (outline.length >= 3) {
-    const d2 = outlineStrokeToClosedPathD(outline);
-    return {
-      kind: "fillPath",
-      d: d2,
-      fill: style.stroke,
-      fillOpacity: style.strokeOpacity
-    };
+  ) : pathPointsLocal.map((p) => [p.x, p.y]);
+  const stroke = getStroke__default.default(
+    input,
+    perfectFreehandOptions(toolKind, style, strokeComplete, hasPressure)
+  );
+  if (stroke.length < 3) return null;
+  const first = stroke[0];
+  if (!first) return null;
+  let d = `M ${first[0]} ${first[1]} Q`;
+  for (let i = 0; i < stroke.length; i++) {
+    const a = stroke[i];
+    const b = stroke[(i + 1) % stroke.length];
+    if (!a || !b) continue;
+    d += ` ${a[0]} ${a[1]} ${(a[0] + b[0]) / 2} ${(a[1] + b[1]) / 2}`;
   }
-  const d = smoothFreehandPointsToPathD(pts);
+  d += " Z";
   return {
-    kind: "strokePath",
+    kind: "fillPath",
     d,
-    stroke: style.stroke,
-    strokeWidth: style.strokeWidth,
-    strokeOpacity: style.strokeOpacity
+    fill: style.stroke,
+    fillOpacity: style.strokeOpacity
   };
 }
 function freehandPayloadToSvgString(payload) {
@@ -817,1118 +701,1369 @@ var init_shape_builders = __esm({
   "src/scene/shape-builders.ts"() {
     init_rect();
     init_custom_shape();
-    init_freehand_path();
     init_text_svg();
     DEFAULT_STROKE_STYLE = {
       stroke: "#2563eb",
       strokeWidth: 2
     };
     TOOL_FREEHAND_DEFAULTS = {
-      draw: { strokeWidth: 3 },
+      draw: { strokeWidth: 10 },
       pencil: { strokeWidth: 3 },
       brush: { strokeWidth: 10 },
       marker: { stroke: "#fde047", strokeWidth: 16, strokeOpacity: 0.5 }
     };
   }
 });
-var CanvuChromeContext = react.createContext(
-  null
-);
-function useCanvuChromeContext() {
-  return react.useContext(CanvuChromeContext);
-}
 
-// src/math/item-transform.ts
-init_rect();
-function getItemRotationRad(item) {
-  return item.rotation ?? 0;
+// src/image/indexed-db-image-store.ts
+var DB_NAME = "canvu-image-store";
+var DB_VERSION = 1;
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains("images")) {
+        db.createObjectStore("images");
+      }
+      if (!db.objectStoreNames.contains("thumbnails")) {
+        db.createObjectStore("thumbnails");
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
 }
-function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const dlx = lx - c.x;
-  const dly = ly - c.y;
-  const cos = Math.cos(rotationRad);
-  const sin = Math.sin(rotationRad);
-  return {
-    x: itemX + c.x + cos * dlx - sin * dly,
-    y: itemY + c.y + sin * dlx + cos * dly
-  };
+function getFromStore(db, storeName, id) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readonly");
+    const req = tx.objectStore(storeName).get(id);
+    req.onsuccess = () => resolve(req.result ?? void 0);
+    req.onerror = () => reject(req.error);
+  });
 }
-function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const vx = wx - itemX;
-  const vy = wy - itemY;
-  const dx = vx - c.x;
-  const dy = vy - c.y;
-  const cos = Math.cos(-rotationRad);
-  const sin = Math.sin(-rotationRad);
-  const lx = cos * dx - sin * dy;
-  const ly = sin * dx + cos * dy;
-  return { x: c.x + lx, y: c.y + ly };
+function putInStore(db, storeName, id, blob) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readwrite");
+    const req = tx.objectStore(storeName).put(blob, id);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
 }
-function itemPivotWorld(item) {
-  const r = normalizeRect(item.bounds);
-  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+function deleteFromStore(db, storeName, id) {
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(storeName, "readwrite");
+    const req = tx.objectStore(storeName).delete(id);
+    req.onsuccess = () => resolve();
+    req.onerror = () => reject(req.error);
+  });
 }
-function boundsAabbForRotatedItem(item) {
-  const rot = getItemRotationRad(item);
-  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
-    return item.bounds;
+function generateBlobId() {
+  return crypto.randomUUID();
+}
+var IndexedDbImageStore = class {
+  dbPromise = null;
+  getDb() {
+    if (!this.dbPromise) {
+      this.dbPromise = openDb();
+    }
+    return this.dbPromise;
   }
-  const r = normalizeRect(item.bounds);
-  if (Math.abs(rot) < 1e-12) {
-    return r;
+  async storeOriginal(blob) {
+    const id = generateBlobId();
+    const db = await this.getDb();
+    await putInStore(db, "images", id, blob);
+    return id;
   }
-  const corners = [
-    [0, 0],
-    [r.width, 0],
-    [r.width, r.height],
-    [0, r.height]
-  ];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const [lx, ly] of corners) {
-    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
-    minX = Math.min(minX, p.x);
-    minY = Math.min(minY, p.y);
-    maxX = Math.max(maxX, p.x);
-    maxY = Math.max(maxY, p.y);
+  async getOriginal(id) {
+    const db = await this.getDb();
+    return getFromStore(db, "images", id);
+  }
+  async deleteOriginal(id) {
+    const db = await this.getDb();
+    await deleteFromStore(db, "images", id);
+  }
+  async storeThumbnail(blob) {
+    const id = generateBlobId();
+    const db = await this.getDb();
+    await putInStore(db, "thumbnails", id, blob);
+    return id;
+  }
+  async getThumbnail(id) {
+    const db = await this.getDb();
+    return getFromStore(db, "thumbnails", id);
+  }
+  async deleteThumbnail(id) {
+    const db = await this.getDb();
+    await deleteFromStore(db, "thumbnails", id);
   }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-
-// src/react/NavMenu.tsx
-init_rect();
-var shellLook = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  minWidth: 160,
-  padding: "10px 12px",
-  borderRadius: 8,
-  border: "1px solid rgba(0,0,0,0.12)",
-  background: "rgba(255,255,255,0.96)",
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  pointerEvents: "auto"
-};
-var labelStyle = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 4,
-  fontSize: 11,
-  fontWeight: 600,
-  color: "#52525b"
 };
-function normalizeHex(stroke) {
-  if (/^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
-  return "#2563eb";
-}
-function isStylableKind(tk) {
-  return tk === "rect" || tk === "ellipse" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
-}
-function VectorSelectionInspector({
-  items: itemsProp,
-  activeToolStyle: activeToolStyleProp,
-  onChange: onChangeProp,
-  position = "top-left",
-  inset = 12,
-  zIndex = 24,
-  className,
-  style
-}) {
-  const ctx = useCanvuChromeContext();
-  const items = itemsProp ?? ctx?.selectedItems ?? [];
-  const activeToolStyle = activeToolStyleProp === void 0 ? ctx?.activeToolStyle ?? null : activeToolStyleProp;
-  const onChange = onChangeProp ?? ctx?.onSelectionStyleChange ?? null;
-  if (!onChange) return null;
-  const shell = {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    ...shellLook,
-    ...style
-  };
-  if (activeToolStyle) {
-    const stroke2 = activeToolStyle.stroke;
-    const strokeWidth2 = activeToolStyle.strokeWidth;
-    const hex2 = normalizeHex(stroke2);
-    const showMarkerOpacity2 = activeToolStyle.toolKind === "marker";
-    const opacityPct2 = Math.round((activeToolStyle.strokeOpacity ?? 1) * 100);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
-      {
-        "data-slot": "vector-selection-inspector",
-        "data-position": position,
-        className,
-        "aria-label": activeToolStyle.label ?? "Estilo da ferramenta",
-        style: shell,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Cor",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "color",
-                value: hex2,
-                onChange: (e) => onChange({
-                  stroke: e.target.value,
-                  strokeWidth: strokeWidth2,
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                }),
-                style: {
-                  width: "100%",
-                  height: 32,
-                  padding: 0,
-                  border: "none",
-                  cursor: "pointer",
-                  background: "transparent"
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Grossura",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 1,
-                max: 48,
-                value: strokeWidth2,
-                onChange: (e) => onChange({
-                  stroke: hex2,
-                  strokeWidth: Number(e.target.value),
-                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
-                })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              strokeWidth2,
-              "px"
-            ] })
-          ] }),
-          showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-            "Opacidade (marcador)",
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "range",
-                min: 10,
-                max: 100,
-                value: opacityPct2,
-                onChange: (e) => {
-                  const v = Number(e.target.value) / 100;
-                  onChange({
-                    stroke: hex2,
-                    strokeWidth: strokeWidth2,
-                    strokeOpacity: v
-                  });
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-              opacityPct2,
-              "%"
-            ] })
-          ] })
-        ]
+function decodeImageToCanvas(blob, maxDimension) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const w0 = img.naturalWidth;
+      const h0 = img.naturalHeight;
+      if (w0 < 1 || h0 < 1) {
+        reject(new Error("Image has no dimensions"));
+        return;
+      }
+      const scale = 1;
+      const cw = Math.max(1, Math.round(w0 * scale));
+      const ch = Math.max(1, Math.round(h0 * scale));
+      const canvas = document.createElement("canvas");
+      canvas.width = cw;
+      canvas.height = ch;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Canvas 2D context unavailable"));
+        return;
       }
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = "high";
+      ctx.drawImage(img, 0, 0, cw, ch);
+      URL.revokeObjectURL(img.src);
+      resolve({ canvas, width: cw, height: ch });
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(img.src);
+      reject(new Error("Could not decode image"));
+    };
+    img.src = URL.createObjectURL(blob);
+  });
+}
+function canvasToBlob(canvas, mime, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Could not encode blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      mime,
+      quality
     );
+  });
+}
+async function loadImageToStore(file, store) {
+  const originalBlob = file;
+  const blobId = await store.storeOriginal(originalBlob);
+  const { canvas, width, height } = await decodeImageToCanvas(originalBlob);
+  const thumbScale = Math.min(1, 256 / Math.max(width, height));
+  const tw = Math.max(1, Math.round(width * thumbScale));
+  const th = Math.max(1, Math.round(height * thumbScale));
+  const thumbCanvas = document.createElement("canvas");
+  thumbCanvas.width = tw;
+  thumbCanvas.height = th;
+  const tCtx = thumbCanvas.getContext("2d");
+  if (tCtx) {
+    tCtx.imageSmoothingEnabled = true;
+    tCtx.imageSmoothingQuality = "high";
+    tCtx.drawImage(canvas, 0, 0, tw, th);
   }
-  const stylable = items.filter(
-    (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
-  );
-  if (stylable.length === 0) return null;
-  const first = stylable[0];
-  if (!first) return null;
-  const allSameStroke = stylable.every(
-    (it) => (it.stroke ?? "#2563eb") === (first.stroke ?? "#2563eb")
-  );
-  const allSameWidth = stylable.every(
-    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
-  );
-  const stroke = first.stroke ?? "#2563eb";
-  const strokeWidth = first.strokeWidth ?? 2;
-  const hex = normalizeHex(stroke);
-  const markers = stylable.filter((it) => it.toolKind === "marker");
-  const showMarkerOpacity = markers.length > 0;
-  const firstMarker = markers[0];
-  const allSameMarkerOpacity = markers.length > 0 && markers.every(
-    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
-  );
-  const opacityPct = firstMarker ? Math.round((firstMarker.strokeOpacity ?? 1) * 100) : 100;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "section",
-    {
-      "data-slot": "vector-selection-inspector",
-      "data-position": position,
-      className,
-      "aria-label": "Estilo da sele\xE7\xE3o",
-      style: shell,
-      children: [
-        stylable.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
-          stylable.length,
-          " objetos selecionados"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Cor",
-          !allSameStroke && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: [
-            " ",
-            "(valores misturados \u2014 novo valor aplica a todos)"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "color",
-              value: hex,
-              onChange: (e) => onChange({
-                stroke: e.target.value,
-                strokeWidth
-              }),
-              style: {
-                width: "100%",
-                height: 32,
-                padding: 0,
-                border: "none",
-                cursor: "pointer",
-                background: "transparent"
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Grossura",
-          !allSameWidth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "range",
-              min: 1,
-              max: 48,
-              value: strokeWidth,
-              onChange: (e) => onChange({
-                stroke: hex,
-                strokeWidth: Number(e.target.value)
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-            strokeWidth,
-            "px"
-          ] })
-        ] }),
-        showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
-          "Opacidade (marcador)",
-          !allSameMarkerOpacity && markers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "range",
-              min: 10,
-              max: 100,
-              value: opacityPct,
-              onChange: (e) => {
-                const v = Number(e.target.value) / 100;
-                onChange({
-                  stroke: hex,
-                  strokeWidth,
-                  strokeOpacity: v
-                });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
-            opacityPct,
-            "%"
-          ] })
-        ] })
-      ]
-    }
+  const thumbBlob = await canvasToBlob(
+    thumbCanvas,
+    file.type === "image/jpeg" || file.type === "image/jpg" ? "image/jpeg" : "image/png",
+    file.type.startsWith("image/jpeg") ? 0.85 : void 0
   );
+  const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
+  return { blobId, thumbnailBlobId, width, height };
 }
-function getBoardPositionStyle(position, inset = 12, zIndex = 40) {
-  const base2 = { position: "absolute", zIndex };
-  switch (position) {
-    case "fill":
-      return { ...base2, inset };
-    case "top-left":
-    case "left-top":
-      return { ...base2, top: inset, left: inset };
-    case "top-center":
-      return {
-        ...base2,
-        top: inset,
-        left: "50%",
-        transform: "translateX(-50%)"
-      };
-    case "top-right":
-    case "right-top":
-      return { ...base2, top: inset, right: inset };
-    case "bottom-left":
-    case "left-bottom":
-      return { ...base2, bottom: inset, left: inset };
-    case "bottom-center":
-      return {
-        ...base2,
-        bottom: inset,
-        left: "50%",
-        transform: "translateX(-50%)"
-      };
-    case "bottom-right":
-    case "right-bottom":
-      return { ...base2, bottom: inset, right: inset };
-    case "left-center":
-      return {
-        ...base2,
-        left: inset,
-        top: "50%",
-        transform: "translateY(-50%)"
-      };
-    case "right-center":
-      return {
-        ...base2,
-        right: inset,
-        top: "50%",
-        transform: "translateY(-50%)"
-      };
-    case "center":
-      return {
-        ...base2,
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)"
-      };
-    default:
-      return base2;
+async function createBlobUrlFromStore(store, blobId) {
+  const blob = await store.getOriginal(blobId);
+  if (!blob) return null;
+  return URL.createObjectURL(blob);
+}
+async function createThumbnailBlobUrlFromStore(store, thumbnailBlobId) {
+  const blob = await store.getThumbnail(thumbnailBlobId);
+  if (!blob) return null;
+  return URL.createObjectURL(blob);
+}
+
+// src/image/pdf-loader.ts
+var pdfjsPromise = null;
+function getPdfJs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import('pdfjs-dist').then((mod) => {
+      const workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.min.mjs",
+        (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('react.cjs', document.baseURI).href))
+      ).toString();
+      mod.GlobalWorkerOptions.workerSrc = workerSrc;
+      return mod;
+    });
   }
+  return pdfjsPromise;
 }
-var rootStyle = {
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  minHeight: 0,
-  width: "100%"
-};
-var headerStyle = {
-  flexShrink: 0,
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "0.75rem",
-  padding: "0.75rem 1rem",
-  borderBottom: "1px solid #e4e4e7",
-  background: "#fff",
-  fontSize: "0.875rem"
-};
-var bodyStyle = {
-  flex: 1,
-  minHeight: 0,
-  display: "flex",
-  flexDirection: "column"
-};
-var mainStyle = {
-  flex: 1,
-  minHeight: 0,
-  position: "relative",
-  display: "flex",
-  flexDirection: "column"
-};
-var viewportSurfaceStyle = {
-  flex: 1,
-  minHeight: 0,
-  position: "relative",
-  width: "100%",
-  alignSelf: "stretch",
-  background: "#fff",
-  touchAction: "none"
-};
-function mergeStyle(base2, style) {
-  return style ? { ...base2, ...style } : base2;
+async function renderPageToCanvas(page, scale) {
+  const raw = page.getViewport({ scale: 1 });
+  const adjustedScale = Math.round(raw.width * scale) / raw.width;
+  const viewport = page.getViewport({ scale: adjustedScale });
+  const w = Math.round(viewport.width);
+  const h = Math.round(viewport.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable");
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  await page.render({ canvas, viewport }).promise;
+  return { canvas, width: w, height: h };
 }
-function vectorCanvasSpaceStyle(position, inset, zIndex) {
-  return {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    pointerEvents: "none"
-  };
+function canvasToBlob2(canvas, mime, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Could not encode blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      mime,
+      quality
+    );
+  });
 }
-function VectorCanvasRoot({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-root",
-      className,
-      style: mergeStyle(rootStyle, style),
-      children
+async function loadPdfToStore(file, store, options) {
+  const scale = options?.scale ?? 1.5;
+  const pdfjs = await getPdfJs();
+  const arrayBuffer = await file.arrayBuffer();
+  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
+  const results = [];
+  for (let i = 1; i <= pdf.numPages; i++) {
+    const page = await pdf.getPage(i);
+    const { canvas, width, height } = await renderPageToCanvas(page, scale);
+    const mime = "image/png";
+    const pageBlob = await canvasToBlob2(canvas, mime);
+    const blobId = await store.storeOriginal(pageBlob);
+    const thumbScale = Math.min(1, 256 / Math.max(width, height));
+    const tw = Math.max(1, Math.round(width * thumbScale));
+    const th = Math.max(1, Math.round(height * thumbScale));
+    const thumbCanvas = document.createElement("canvas");
+    thumbCanvas.width = tw;
+    thumbCanvas.height = th;
+    const tCtx = thumbCanvas.getContext("2d");
+    if (tCtx) {
+      tCtx.imageSmoothingEnabled = true;
+      tCtx.imageSmoothingQuality = "high";
+      tCtx.drawImage(canvas, 0, 0, tw, th);
     }
-  );
+    const thumbBlob = await canvasToBlob2(thumbCanvas, mime);
+    const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
+    results.push({ blobId, thumbnailBlobId, width, height, pageNumber: i });
+  }
+  return results;
 }
-function VectorCanvasHeader({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "header",
-    {
-      "data-slot": "vector-canvas-header",
-      className,
-      style: mergeStyle(headerStyle, style),
-      children
+
+// src/react/asset-ingestion.ts
+init_shape_builders();
+
+// src/react/asset-store.ts
+function applyAssetUploadResultToItem(item, result) {
+  if (!result?.pluginData) return item;
+  return {
+    ...item,
+    pluginData: {
+      ...item.pluginData ?? {},
+      ...result.pluginData
     }
-  );
+  };
 }
-function VectorCanvasBody({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-body",
-      className,
-      style: mergeStyle(bodyStyle, style),
-      children
-    }
-  );
+
+// src/react/asset-ingestion.ts
+function getAssetKindForFile(file) {
+  if (file.type === "application/pdf") return "pdf";
+  if (file.type.startsWith("image/")) return "image";
+  return null;
 }
-function VectorCanvasMain({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-main",
-      className,
-      style: mergeStyle(mainStyle, style),
-      children
-    }
-  );
+function finalizeIngestedItem(item, context, uploadResult, decorateItem) {
+  const itemWithAssetData = applyAssetUploadResultToItem(item, uploadResult);
+  return decorateItem ? decorateItem(itemWithAssetData, context) : itemWithAssetData;
 }
-function VectorCanvasViewportSurface({
-  children,
-  className,
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-viewport-surface",
-      className,
-      style: mergeStyle(viewportSurfaceStyle, style),
-      children
+async function uploadAssetIfNeeded(assetStore, file, kind) {
+  if (!assetStore) return null;
+  const result = await assetStore.upload({ file, kind });
+  return result ?? null;
+}
+async function ingestAssetFilesToSceneItems(options) {
+  const {
+    files,
+    worldCenter,
+    assetStore,
+    imageStore = new IndexedDbImageStore(),
+    createId = createShapeId,
+    gapWorld = 16,
+    stepWorld = 48,
+    pdfScale = 1.5,
+    decorateItem,
+    onError
+  } = options;
+  const items = [];
+  const errors = [];
+  let imagePlacementIndex = 0;
+  let occupiedBottomY = null;
+  let imageYOffsetAdjustment = 0;
+  let hasImagePlacementBase = false;
+  for (const file of files) {
+    const kind = getAssetKindForFile(file);
+    if (!kind) {
+      const error = {
+        file,
+        error: new Error(`Unsupported asset type: ${file.type || "unknown"}`)
+      };
+      errors.push(error);
+      onError?.(error);
+      continue;
     }
-  );
+    try {
+      const uploadResult = await uploadAssetIfNeeded(assetStore, file, kind);
+      if (kind === "pdf") {
+        const pages = await loadPdfToStore(file, imageStore, { scale: pdfScale });
+        for (const page of pages) {
+          const fullUrl2 = await createBlobUrlFromStore(imageStore, page.blobId);
+          const naturalTopY2 = worldCenter.y - page.height / 2;
+          const stackedTopY = occupiedBottomY == null ? naturalTopY2 : occupiedBottomY + gapWorld;
+          const bounds2 = {
+            x: worldCenter.x - page.width / 2,
+            y: Math.max(naturalTopY2, stackedTopY),
+            width: page.width,
+            height: page.height
+          };
+          const itemContext2 = {
+            file,
+            kind,
+            itemIndex: items.length,
+            pageNumber: page.pageNumber
+          };
+          const item2 = finalizeIngestedItem(
+            {
+              id: createId(),
+              x: bounds2.x,
+              y: bounds2.y,
+              bounds: { ...bounds2 },
+              toolKind: "image",
+              imageBlobId: page.blobId,
+              imageRasterHref: fullUrl2 ?? void 0,
+              imageIntrinsicSize: {
+                width: page.width,
+                height: page.height
+              },
+              childrenSvg: fullUrl2 ? buildRasterImageChildrenSvg(
+                fullUrl2,
+                { width: page.width, height: page.height },
+                bounds2
+              ) : ""
+            },
+            itemContext2,
+            uploadResult,
+            decorateItem
+          );
+          items.push(item2);
+          occupiedBottomY = bounds2.y + page.height;
+        }
+        hasImagePlacementBase = false;
+        imagePlacementIndex = 0;
+        imageYOffsetAdjustment = 0;
+        continue;
+      }
+      const { blobId, thumbnailBlobId, width, height } = await loadImageToStore(
+        file,
+        imageStore
+      );
+      const fullUrl = await createBlobUrlFromStore(imageStore, blobId);
+      const thumbBlob = await imageStore.getThumbnail(thumbnailBlobId);
+      const thumbnailHref = thumbBlob ? URL.createObjectURL(thumbBlob) : null;
+      const ox = imagePlacementIndex % 8 * stepWorld;
+      const oy = Math.floor(imagePlacementIndex / 8) * stepWorld;
+      const naturalTopY = worldCenter.y - height / 2 + oy;
+      if (!hasImagePlacementBase) {
+        const minimumTopY = occupiedBottomY == null ? naturalTopY : occupiedBottomY + gapWorld;
+        imageYOffsetAdjustment = Math.max(0, minimumTopY - naturalTopY);
+        hasImagePlacementBase = true;
+      }
+      const bounds = {
+        x: worldCenter.x - width / 2 + ox,
+        y: naturalTopY + imageYOffsetAdjustment,
+        width,
+        height
+      };
+      const href = thumbnailHref ?? fullUrl ?? "";
+      const itemContext = {
+        file,
+        kind,
+        itemIndex: items.length
+      };
+      const item = finalizeIngestedItem(
+        {
+          id: createId(),
+          x: bounds.x,
+          y: bounds.y,
+          bounds: { ...bounds },
+          toolKind: "image",
+          imageBlobId: blobId,
+          imageThumbnailBlobId: thumbnailBlobId,
+          imageRasterHref: fullUrl ?? void 0,
+          imageThumbnailHref: thumbnailHref ?? void 0,
+          imageIntrinsicSize: { width, height },
+          childrenSvg: buildRasterImageChildrenSvg(href, { width, height }, bounds)
+        },
+        itemContext,
+        uploadResult,
+        decorateItem
+      );
+      items.push(item);
+      imagePlacementIndex++;
+      occupiedBottomY = occupiedBottomY == null ? bounds.y + height : Math.max(occupiedBottomY, bounds.y + height);
+    } catch (error) {
+      const fileError = {
+        file,
+        kind,
+        error
+      };
+      errors.push(fileError);
+      onError?.(fileError);
+    }
+  }
+  return {
+    items,
+    errors
+  };
 }
-function VectorCanvasToolbar({
-  children,
-  className,
-  style,
-  position = "bottom-center",
-  inset = 12,
-  zIndex = 30
-}) {
-  const base2 = {
-    ...getBoardPositionStyle(position, inset, zIndex),
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    maxWidth: "calc(100% - 24px)",
-    pointerEvents: "none"
+var CanvuChromeContext = react.createContext(
+  null
+);
+function useCanvuChromeContext() {
+  return react.useContext(CanvuChromeContext);
+}
+
+// src/math/item-transform.ts
+init_rect();
+function getItemRotationRad(item) {
+  return item.rotation ?? 0;
+}
+function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const dlx = lx - c.x;
+  const dly = ly - c.y;
+  const cos = Math.cos(rotationRad);
+  const sin = Math.sin(rotationRad);
+  return {
+    x: itemX + c.x + cos * dlx - sin * dly,
+    y: itemY + c.y + sin * dlx + cos * dly
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "vector-canvas-toolbar",
-      "data-position": position,
-      className,
-      style: mergeStyle(base2, style),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "auto" }, children })
-    }
-  );
 }
-function VectorCanvasSpace({
-  children,
-  className,
-  style,
-  position = "top-right",
-  inset = 12,
-  zIndex = 40,
-  contentPointerEvents = "auto"
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": `vector-canvas-space-${position}`,
-      className,
-      style: mergeStyle(vectorCanvasSpaceStyle(position, inset, zIndex), style),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: contentPointerEvents }, children })
-    }
-  );
+function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const vx = wx - itemX;
+  const vy = wy - itemY;
+  const dx = vx - c.x;
+  const dy = vy - c.y;
+  const cos = Math.cos(-rotationRad);
+  const sin = Math.sin(-rotationRad);
+  const lx = cos * dx - sin * dy;
+  const ly = sin * dx + cos * dy;
+  return { x: c.x + lx, y: c.y + ly };
 }
-var VectorCanvas = {
-  Root: VectorCanvasRoot,
-  Header: VectorCanvasHeader,
-  Body: VectorCanvasBody,
-  Main: VectorCanvasMain,
-  ViewportSurface: VectorCanvasViewportSurface,
-  Toolbar: VectorCanvasToolbar,
-  Space: VectorCanvasSpace,
-  NavMenu,
-  SelectionInspector: VectorSelectionInspector
-};
-var MINIMAP_W = 180;
-var MINIMAP_H = 120;
-var PADDING = 12;
-var BORDER_RADIUS = 8;
-var BG = "#ffffff";
-var BORDER_COLOR = "rgba(0,0,0,0.12)";
-var ITEM_FILL = "rgba(0,0,0,0.08)";
-var ITEM_STROKE = "rgba(0,0,0,0.15)";
-var VIEWPORT_FILL = "rgba(59,130,246,0.08)";
-var VIEWPORT_STROKE = "#3b82f6";
-var btnStyle = {
-  pointerEvents: "auto",
-  width: 36,
-  height: 36,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  fontSize: 18,
-  lineHeight: 1,
-  color: "#18181b",
-  padding: 0,
-  border: "none",
-  outline: "none",
-  background: "none",
-  WebkitTapHighlightColor: "transparent"
-};
-var chevronBtnStyle = {
-  pointerEvents: "auto",
-  width: 24,
-  height: 36,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  fontSize: 12,
-  lineHeight: 1,
-  color: "#52525b",
-  padding: 0,
-  border: "none",
-  outline: "none",
-  background: "none",
-  WebkitTapHighlightColor: "transparent"
-};
-var undoBtnStyle = {
-  ...chevronBtnStyle,
-  width: 30,
-  opacity: 1,
-  color: "#18181b"
-};
-var labelStyle2 = {
-  fontSize: 10,
-  fontWeight: 600,
-  color: "#52525b",
-  textAlign: "center",
-  userSelect: "none",
-  padding: "2px 0"
-};
-var panelLayoutStyle = {
+function itemPivotWorld(item) {
+  const r = normalizeRect(item.bounds);
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+}
+function boundsAabbForRotatedItem(item) {
+  const rot = getItemRotationRad(item);
+  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
+    return item.bounds;
+  }
+  const r = normalizeRect(item.bounds);
+  if (Math.abs(rot) < 1e-12) {
+    return r;
+  }
+  const corners = [
+    [0, 0],
+    [r.width, 0],
+    [r.width, r.height],
+    [0, r.height]
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [lx, ly] of corners) {
+    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/react/NavMenu.tsx
+init_rect();
+var shellLook = {
   display: "flex",
   flexDirection: "column",
-  alignItems: "flex-start",
-  gap: 4,
-  touchAction: "none",
-  pointerEvents: "none",
-  userSelect: "none"
+  gap: 8,
+  minWidth: 160,
+  padding: "10px 12px",
+  borderRadius: 8,
+  border: "1px solid rgba(0,0,0,0.12)",
+  background: "rgba(255,255,255,0.96)",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  pointerEvents: "auto"
 };
-var innerStyle = {
-  pointerEvents: "auto",
+var labelStyle = {
   display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
+  flexDirection: "column",
   gap: 4,
-  background: BG,
-  borderRadius: BORDER_RADIUS,
-  border: `1px solid ${BORDER_COLOR}`,
-  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-  padding: 4
+  fontSize: 11,
+  fontWeight: 600,
+  color: "#52525b"
 };
-function NavMenu({
-  camera: cameraProp,
-  viewportWidth: viewportWidthProp,
-  viewportHeight: viewportHeightProp,
+function normalizeHex(stroke) {
+  if (/^#[0-9A-Fa-f]{6}$/.test(stroke)) return stroke;
+  return "#2563eb";
+}
+function isStylableKind(tk) {
+  return tk === "rect" || tk === "ellipse" || tk === "line" || tk === "arrow" || tk === "draw" || tk === "pencil" || tk === "brush" || tk === "marker" || tk === "text";
+}
+function VectorSelectionInspector({
   items: itemsProp,
-  zoomPercent: zoomPercentProp,
-  onZoomIn: onZoomInProp,
-  onZoomOut: onZoomOutProp,
-  onUndo: onUndoProp,
-  onRedo: onRedoProp,
-  canUndo: canUndoProp,
-  canRedo: canRedoProp,
-  onRequestRender: onRequestRenderProp,
-  position = "bottom-left",
+  activeToolStyle: activeToolStyleProp,
+  onChange: onChangeProp,
+  position = "top-left",
   inset = 12,
-  zIndex = 23,
+  zIndex = 24,
   className,
   style
 }) {
   const ctx = useCanvuChromeContext();
-  const camera = cameraProp ?? ctx?.camera ?? null;
-  const viewportWidth = viewportWidthProp ?? ctx?.viewportWidth ?? 0;
-  const viewportHeight = viewportHeightProp ?? ctx?.viewportHeight ?? 0;
-  const items = itemsProp ?? ctx?.items ?? [];
-  const zoomPercent = zoomPercentProp ?? ctx?.zoomPercent ?? 100;
-  const onZoomIn = onZoomInProp ?? ctx?.onZoomIn ?? noop;
-  const onZoomOut = onZoomOutProp ?? ctx?.onZoomOut ?? noop;
-  const onUndo = onUndoProp ?? ctx?.onUndo ?? noop;
-  const onRedo = onRedoProp ?? ctx?.onRedo ?? noop;
-  const canUndo = canUndoProp ?? ctx?.canUndo ?? false;
-  const canRedo = canRedoProp ?? ctx?.canRedo ?? false;
-  const onRequestRender = onRequestRenderProp ?? ctx?.onRequestRender ?? noop;
-  const [expanded, setExpanded] = react.useState(false);
-  const svgRef = react.useRef(null);
-  const [dragging, setDragging] = react.useState(false);
-  const [mouseDown, setMouseDown] = react.useState(false);
-  const worldBounds = computeWorldBounds(items);
-  const isEmpty = worldBounds.width <= 0 || worldBounds.height <= 0;
-  const scale = Math.min(
-    (MINIMAP_W - PADDING * 2) / Math.max(worldBounds.width, 1),
-    (MINIMAP_H - PADDING * 2) / Math.max(worldBounds.height, 1)
-  );
-  const originX = worldBounds.x;
-  const originY = worldBounds.y;
-  const toMinimapX = (wx) => (wx - originX) * scale + PADDING;
-  const toMinimapY = (wy) => (wy - originY) * scale + PADDING;
-  const toMinimapW = (ww) => ww * scale;
-  const toMinimapH = (wh) => wh * scale;
-  const viewportWorld = camera ? camera.getVisibleWorldRect(viewportWidth, viewportHeight) : { x: 0, y: 0, width: 0, height: 0 };
-  const vpMinimap = {
-    x: toMinimapX(viewportWorld.x),
-    y: toMinimapY(viewportWorld.y),
-    width: toMinimapW(viewportWorld.width),
-    height: toMinimapH(viewportWorld.height)
+  const items = itemsProp ?? ctx?.selectedItems ?? [];
+  const activeToolStyle = activeToolStyleProp === void 0 ? ctx?.activeToolStyle ?? null : activeToolStyleProp;
+  const onChange = onChangeProp ?? ctx?.onSelectionStyleChange ?? null;
+  if (!onChange) return null;
+  const shell = {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    ...shellLook,
+    ...style
   };
-  const worldFromMinimap = react.useCallback(
-    (mx, my) => ({
-      worldX: (mx - PADDING) / scale + originX,
-      worldY: (my - PADDING) / scale + originY
-    }),
-    [scale, originX, originY]
+  if (activeToolStyle) {
+    const stroke2 = activeToolStyle.stroke;
+    const strokeWidth2 = activeToolStyle.strokeWidth;
+    const hex2 = normalizeHex(stroke2);
+    const showMarkerOpacity2 = activeToolStyle.toolKind === "marker";
+    const opacityPct2 = Math.round((activeToolStyle.strokeOpacity ?? 1) * 100);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "data-slot": "vector-selection-inspector",
+        "data-position": position,
+        className,
+        "aria-label": activeToolStyle.label ?? "Estilo da ferramenta",
+        style: shell,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+            "Cor",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "color",
+                value: hex2,
+                onChange: (e) => onChange({
+                  stroke: e.target.value,
+                  strokeWidth: strokeWidth2,
+                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
+                }),
+                style: {
+                  width: "100%",
+                  height: 32,
+                  padding: 0,
+                  border: "none",
+                  cursor: "pointer",
+                  background: "transparent"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+            "Grossura",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "range",
+                min: 1,
+                max: 48,
+                value: strokeWidth2,
+                onChange: (e) => onChange({
+                  stroke: hex2,
+                  strokeWidth: Number(e.target.value),
+                  ...activeToolStyle.strokeOpacity != null ? { strokeOpacity: activeToolStyle.strokeOpacity } : {}
+                })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+              strokeWidth2,
+              "px"
+            ] })
+          ] }),
+          showMarkerOpacity2 && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+            "Opacidade (marcador)",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "range",
+                min: 10,
+                max: 100,
+                value: opacityPct2,
+                onChange: (e) => {
+                  const v = Number(e.target.value) / 100;
+                  onChange({
+                    stroke: hex2,
+                    strokeWidth: strokeWidth2,
+                    strokeOpacity: v
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+              opacityPct2,
+              "%"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  const stylable = items.filter(
+    (it) => !it.locked && it.toolKind && isStylableKind(it.toolKind)
   );
-  const panTo = react.useCallback(
-    (mx, my) => {
-      if (!camera) return;
-      const { worldX, worldY } = worldFromMinimap(mx, my);
-      camera.x = viewportWidth / 2 - worldX * camera.zoom;
-      camera.y = viewportHeight / 2 - worldY * camera.zoom;
-      onRequestRender();
-    },
-    [worldFromMinimap, camera, viewportWidth, viewportHeight, onRequestRender]
+  if (stylable.length === 0) return null;
+  const first = stylable[0];
+  if (!first) return null;
+  const allSameStroke = stylable.every(
+    (it) => (it.stroke ?? "#2563eb") === (first.stroke ?? "#2563eb")
   );
-  const handlePointerDown = react.useCallback(
-    (e) => {
-      if (isEmpty) return;
-      setDragging(true);
-      setMouseDown(true);
-      const rect = svgRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      panTo(e.clientX - rect.left, e.clientY - rect.top);
-      svgRef.current?.setPointerCapture(e.pointerId);
-    },
-    [isEmpty, panTo]
+  const allSameWidth = stylable.every(
+    (it) => (it.strokeWidth ?? 2) === (first.strokeWidth ?? 2)
   );
-  const handlePointerMove = react.useCallback(
-    (e) => {
-      if (!mouseDown || isEmpty) return;
-      const rect = svgRef.current?.getBoundingClientRect();
-      if (!rect) return;
-      panTo(e.clientX - rect.left, e.clientY - rect.top);
-    },
-    [mouseDown, isEmpty, panTo]
+  const stroke = first.stroke ?? "#2563eb";
+  const strokeWidth = first.strokeWidth ?? 2;
+  const hex = normalizeHex(stroke);
+  const markers = stylable.filter((it) => it.toolKind === "marker");
+  const showMarkerOpacity = markers.length > 0;
+  const firstMarker = markers[0];
+  const allSameMarkerOpacity = markers.length > 0 && markers.every(
+    (it) => (it.strokeOpacity ?? 1) === (firstMarker?.strokeOpacity ?? 1)
   );
-  const handlePointerUp = react.useCallback(() => {
-    setDragging(false);
-    setMouseDown(false);
-  }, []);
-  const toggleExpanded = react.useCallback(() => {
-    setExpanded((v) => !v);
-  }, []);
-  const anchorStyle = getBoardPositionStyle(position, inset, zIndex);
+  const opacityPct = firstMarker ? Math.round((firstMarker.strokeOpacity ?? 1) * 100) : 100;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "fieldset",
+    "section",
     {
-      "data-slot": "canvu-nav-menu",
+      "data-slot": "vector-selection-inspector",
       "data-position": position,
       className,
-      style: {
-        ...anchorStyle,
-        ...panelLayoutStyle,
-        border: "none",
-        margin: 0,
-        padding: 0,
-        minWidth: 0,
-        ...style
-      },
-      "aria-label": "Zoom and minimap controls",
+      "aria-label": "Estilo da sele\xE7\xE3o",
+      style: shell,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: innerStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: btnStyle,
-              "aria-label": "Zoom out",
-              title: "Zoom out",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onZoomOut,
-              children: "\u2212"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: labelStyle2, "aria-hidden": true, children: [
-            zoomPercent,
-            "%"
+        stylable.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 11, color: "#71717a" }, children: [
+          stylable.length,
+          " objetos selecionados"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+          "Cor",
+          !allSameStroke && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: [
+            " ",
+            "(valores misturados \u2014 novo valor aplica a todos)"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              style: btnStyle,
-              "aria-label": "Zoom in",
-              title: "Zoom in",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onZoomIn,
-              children: "+"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            "input",
             {
-              type: "button",
-              style: undoBtnStyle,
-              "aria-label": "Undo",
-              title: "Undo",
-              disabled: !canUndo,
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onUndo,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 16 })
+              type: "color",
+              value: hex,
+              onChange: (e) => onChange({
+                stroke: e.target.value,
+                strokeWidth
+              }),
+              style: {
+                width: "100%",
+                height: 32,
+                padding: 0,
+                border: "none",
+                cursor: "pointer",
+                background: "transparent"
+              }
             }
-          ),
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+          "Grossura",
+          !allSameWidth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            "input",
             {
-              type: "button",
-              style: undoBtnStyle,
-              "aria-label": "Redo",
-              title: "Redo",
-              disabled: !canRedo,
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: onRedo,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 16 })
+              type: "range",
+              min: 1,
+              max: 48,
+              value: strokeWidth,
+              onChange: (e) => onChange({
+                stroke: hex,
+                strokeWidth: Number(e.target.value)
+              })
             }
           ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+            strokeWidth,
+            "px"
+          ] })
+        ] }),
+        showMarkerOpacity && firstMarker && /* @__PURE__ */ jsxRuntime.jsxs("label", { style: labelStyle, children: [
+          "Opacidade (marcador)",
+          !allSameMarkerOpacity && markers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 400, color: "#a1a1aa" }, children: " (misturado)" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            "input",
             {
-              type: "button",
-              style: chevronBtnStyle,
-              "aria-label": expanded ? "Hide minimap" : "Show minimap",
-              title: expanded ? "Hide minimap" : "Show minimap",
-              onPointerDown: (e) => {
-                if (e.pointerType === "mouse") e.preventDefault();
-              },
-              onClick: toggleExpanded,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "12",
-                  height: "12",
-                  viewBox: "0 0 12 12",
-                  style: {
-                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 0.15s ease"
-                  },
-                  "aria-hidden": true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      d: "M2 4 L6 8 L10 4",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  )
-                }
-              )
+              type: "range",
+              min: 10,
+              max: 100,
+              value: opacityPct,
+              onChange: (e) => {
+                const v = Number(e.target.value) / 100;
+                onChange({
+                  stroke: hex,
+                  strokeWidth,
+                  strokeOpacity: v
+                });
+              }
             }
-          )
-        ] }),
-        expanded && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Minimap", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            ref: svgRef,
-            style: {
-              width: MINIMAP_W,
-              height: MINIMAP_H,
-              borderRadius: BORDER_RADIUS,
-              border: `1px solid ${BORDER_COLOR}`,
-              background: BG,
-              boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
-              cursor: isEmpty ? "default" : dragging ? "grabbing" : "grab",
-              display: "block",
-              pointerEvents: "auto"
-            },
-            onPointerDown: handlePointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            onPointerCancel: handlePointerUp,
-            children: isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              items.map((it) => {
-                const b = normalizeRect(boundsAabbForRotatedItem(it));
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "rect",
-                  {
-                    x: toMinimapX(b.x),
-                    y: toMinimapY(b.y),
-                    width: toMinimapW(b.width),
-                    height: toMinimapH(b.height),
-                    fill: ITEM_FILL,
-                    stroke: ITEM_STROKE,
-                    strokeWidth: 0.5,
-                    rx: 1
-                  },
-                  it.id
-                );
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: vpMinimap.x,
-                  y: vpMinimap.y,
-                  width: vpMinimap.width,
-                  height: vpMinimap.height,
-                  fill: VIEWPORT_FILL,
-                  stroke: VIEWPORT_STROKE,
-                  strokeWidth: 1.5,
-                  rx: 2
-                }
-              )
-            ] })
-          }
-        ) })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 500, color: "#71717a" }, children: [
+            opacityPct,
+            "%"
+          ] })
+        ] })
       ]
     }
   );
 }
-function noop() {
-}
-function computeWorldBounds(items) {
-  if (items.length === 0) {
-    return { x: 0, y: 0, width: 0, height: 0 };
-  }
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const it of items) {
-    const b = boundsAabbForRotatedItem(it);
-    minX = Math.min(minX, b.x);
-    minY = Math.min(minY, b.y);
-    maxX = Math.max(maxX, b.x + b.width);
-    maxY = Math.max(maxY, b.y + b.height);
+function getBoardPositionStyle(position, inset = 12, zIndex = 40) {
+  const base2 = { position: "absolute", zIndex };
+  switch (position) {
+    case "fill":
+      return { ...base2, inset };
+    case "top-left":
+    case "left-top":
+      return { ...base2, top: inset, left: inset };
+    case "top-center":
+      return {
+        ...base2,
+        top: inset,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "top-right":
+    case "right-top":
+      return { ...base2, top: inset, right: inset };
+    case "bottom-left":
+    case "left-bottom":
+      return { ...base2, bottom: inset, left: inset };
+    case "bottom-center":
+      return {
+        ...base2,
+        bottom: inset,
+        left: "50%",
+        transform: "translateX(-50%)"
+      };
+    case "bottom-right":
+    case "right-bottom":
+      return { ...base2, bottom: inset, right: inset };
+    case "left-center":
+      return {
+        ...base2,
+        left: inset,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "right-center":
+      return {
+        ...base2,
+        right: inset,
+        top: "50%",
+        transform: "translateY(-50%)"
+      };
+    case "center":
+      return {
+        ...base2,
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      };
+    default:
+      return base2;
   }
-  const pad = Math.max((maxX - minX) * 0.1, (maxY - minY) * 0.1, 40);
-  return {
-    x: minX - pad,
-    y: minY - pad,
-    width: maxX - minX + pad * 2,
-    height: maxY - minY + pad * 2
-  };
 }
-
-// src/image/indexed-db-image-store.ts
-var DB_NAME = "canvu-image-store";
-var DB_VERSION = 1;
-function openDb() {
-  return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onupgradeneeded = () => {
-      const db = req.result;
-      if (!db.objectStoreNames.contains("images")) {
-        db.createObjectStore("images");
-      }
-      if (!db.objectStoreNames.contains("thumbnails")) {
-        db.createObjectStore("thumbnails");
-      }
-    };
-    req.onsuccess = () => resolve(req.result);
-    req.onerror = () => reject(req.error);
-  });
+var rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  minHeight: 0,
+  width: "100%"
+};
+var headerStyle = {
+  flexShrink: 0,
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "0.75rem",
+  padding: "0.75rem 1rem",
+  borderBottom: "1px solid #e4e4e7",
+  background: "#fff",
+  fontSize: "0.875rem"
+};
+var bodyStyle = {
+  flex: 1,
+  minHeight: 0,
+  display: "flex",
+  flexDirection: "column"
+};
+var mainStyle = {
+  flex: 1,
+  minHeight: 0,
+  position: "relative",
+  display: "flex",
+  flexDirection: "column"
+};
+var viewportSurfaceStyle = {
+  flex: 1,
+  minHeight: 0,
+  position: "relative",
+  width: "100%",
+  alignSelf: "stretch",
+  background: "#fff",
+  touchAction: "none"
+};
+function mergeStyle(base2, style) {
+  return style ? { ...base2, ...style } : base2;
 }
-function getFromStore(db, storeName, id) {
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(storeName, "readonly");
-    const req = tx.objectStore(storeName).get(id);
-    req.onsuccess = () => resolve(req.result ?? void 0);
-    req.onerror = () => reject(req.error);
-  });
+function vectorCanvasSpaceStyle(position, inset, zIndex) {
+  return {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    pointerEvents: "none"
+  };
 }
-function putInStore(db, storeName, id, blob) {
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(storeName, "readwrite");
-    const req = tx.objectStore(storeName).put(blob, id);
-    req.onsuccess = () => resolve();
-    req.onerror = () => reject(req.error);
-  });
+function VectorCanvasRoot({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-root",
+      className,
+      style: mergeStyle(rootStyle, style),
+      children
+    }
+  );
 }
-function deleteFromStore(db, storeName, id) {
-  return new Promise((resolve, reject) => {
-    const tx = db.transaction(storeName, "readwrite");
-    const req = tx.objectStore(storeName).delete(id);
-    req.onsuccess = () => resolve();
-    req.onerror = () => reject(req.error);
-  });
+function VectorCanvasHeader({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      "data-slot": "vector-canvas-header",
+      className,
+      style: mergeStyle(headerStyle, style),
+      children
+    }
+  );
 }
-function generateBlobId() {
-  return crypto.randomUUID();
+function VectorCanvasBody({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-body",
+      className,
+      style: mergeStyle(bodyStyle, style),
+      children
+    }
+  );
 }
-var IndexedDbImageStore = class {
-  dbPromise = null;
-  getDb() {
-    if (!this.dbPromise) {
-      this.dbPromise = openDb();
+function VectorCanvasMain({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-main",
+      className,
+      style: mergeStyle(mainStyle, style),
+      children
     }
-    return this.dbPromise;
-  }
-  async storeOriginal(blob) {
-    const id = generateBlobId();
-    const db = await this.getDb();
-    await putInStore(db, "images", id, blob);
-    return id;
-  }
-  async getOriginal(id) {
-    const db = await this.getDb();
-    return getFromStore(db, "images", id);
-  }
-  async deleteOriginal(id) {
-    const db = await this.getDb();
-    await deleteFromStore(db, "images", id);
-  }
-  async storeThumbnail(blob) {
-    const id = generateBlobId();
-    const db = await this.getDb();
-    await putInStore(db, "thumbnails", id, blob);
-    return id;
-  }
-  async getThumbnail(id) {
-    const db = await this.getDb();
-    return getFromStore(db, "thumbnails", id);
-  }
-  async deleteThumbnail(id) {
-    const db = await this.getDb();
-    await deleteFromStore(db, "thumbnails", id);
-  }
-};
-function decodeImageToCanvas(blob, maxDimension) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      const w0 = img.naturalWidth;
-      const h0 = img.naturalHeight;
-      if (w0 < 1 || h0 < 1) {
-        reject(new Error("Image has no dimensions"));
-        return;
-      }
-      const scale = 1;
-      const cw = Math.max(1, Math.round(w0 * scale));
-      const ch = Math.max(1, Math.round(h0 * scale));
-      const canvas = document.createElement("canvas");
-      canvas.width = cw;
-      canvas.height = ch;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
-        reject(new Error("Canvas 2D context unavailable"));
-        return;
-      }
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(img, 0, 0, cw, ch);
-      URL.revokeObjectURL(img.src);
-      resolve({ canvas, width: cw, height: ch });
-    };
-    img.onerror = () => {
-      URL.revokeObjectURL(img.src);
-      reject(new Error("Could not decode image"));
-    };
-    img.src = URL.createObjectURL(blob);
-  });
+  );
 }
-function canvasToBlob(canvas, mime, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) {
-          reject(new Error("Could not encode blob"));
-          return;
-        }
-        resolve(blob);
-      },
-      mime,
-      quality
-    );
-  });
+function VectorCanvasViewportSurface({
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-viewport-surface",
+      className,
+      style: mergeStyle(viewportSurfaceStyle, style),
+      children
+    }
+  );
 }
-async function loadImageToStore(file, store) {
-  const originalBlob = file;
-  const blobId = await store.storeOriginal(originalBlob);
-  const { canvas, width, height } = await decodeImageToCanvas(originalBlob);
-  const thumbScale = Math.min(1, 256 / Math.max(width, height));
-  const tw = Math.max(1, Math.round(width * thumbScale));
-  const th = Math.max(1, Math.round(height * thumbScale));
-  const thumbCanvas = document.createElement("canvas");
-  thumbCanvas.width = tw;
-  thumbCanvas.height = th;
-  const tCtx = thumbCanvas.getContext("2d");
-  if (tCtx) {
-    tCtx.imageSmoothingEnabled = true;
-    tCtx.imageSmoothingQuality = "high";
-    tCtx.drawImage(canvas, 0, 0, tw, th);
-  }
-  const thumbBlob = await canvasToBlob(
-    thumbCanvas,
-    file.type === "image/jpeg" || file.type === "image/jpg" ? "image/jpeg" : "image/png",
-    file.type.startsWith("image/jpeg") ? 0.85 : void 0
+function VectorCanvasToolbar({
+  children,
+  className,
+  style,
+  position = "bottom-center",
+  inset = 12,
+  zIndex = 30
+}) {
+  const base2 = {
+    ...getBoardPositionStyle(position, inset, zIndex),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    maxWidth: "calc(100% - 24px)",
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "vector-canvas-toolbar",
+      "data-position": position,
+      className,
+      style: mergeStyle(base2, style),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "auto" }, children })
+    }
+  );
+}
+function VectorCanvasSpace({
+  children,
+  className,
+  style,
+  position = "top-right",
+  inset = 12,
+  zIndex = 40,
+  contentPointerEvents = "auto"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": `vector-canvas-space-${position}`,
+      className,
+      style: mergeStyle(vectorCanvasSpaceStyle(position, inset, zIndex), style),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: contentPointerEvents }, children })
+    }
+  );
+}
+var VectorCanvas = {
+  Root: VectorCanvasRoot,
+  Header: VectorCanvasHeader,
+  Body: VectorCanvasBody,
+  Main: VectorCanvasMain,
+  ViewportSurface: VectorCanvasViewportSurface,
+  Toolbar: VectorCanvasToolbar,
+  Space: VectorCanvasSpace,
+  NavMenu,
+  SelectionInspector: VectorSelectionInspector
+};
+var MINIMAP_W = 180;
+var MINIMAP_H = 120;
+var PADDING = 12;
+var BORDER_RADIUS = 8;
+var BG = "#ffffff";
+var BORDER_COLOR = "rgba(0,0,0,0.12)";
+var ITEM_FILL = "rgba(0,0,0,0.08)";
+var ITEM_STROKE = "rgba(0,0,0,0.15)";
+var VIEWPORT_FILL = "rgba(59,130,246,0.08)";
+var VIEWPORT_STROKE = "#3b82f6";
+var btnStyle = {
+  pointerEvents: "auto",
+  width: 36,
+  height: 36,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  fontSize: 18,
+  lineHeight: 1,
+  color: "#18181b",
+  padding: 0,
+  border: "none",
+  outline: "none",
+  background: "none",
+  WebkitTapHighlightColor: "transparent"
+};
+var chevronBtnStyle = {
+  pointerEvents: "auto",
+  width: 24,
+  height: 36,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "#52525b",
+  padding: 0,
+  border: "none",
+  outline: "none",
+  background: "none",
+  WebkitTapHighlightColor: "transparent"
+};
+var undoBtnStyle = {
+  ...chevronBtnStyle,
+  width: 30,
+  opacity: 1,
+  color: "#18181b"
+};
+var labelStyle2 = {
+  fontSize: 10,
+  fontWeight: 600,
+  color: "#52525b",
+  textAlign: "center",
+  userSelect: "none",
+  padding: "2px 0"
+};
+var panelLayoutStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 4,
+  touchAction: "none",
+  pointerEvents: "none",
+  userSelect: "none"
+};
+var innerStyle = {
+  pointerEvents: "auto",
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 4,
+  background: BG,
+  borderRadius: BORDER_RADIUS,
+  border: `1px solid ${BORDER_COLOR}`,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+  padding: 4
+};
+function NavMenu({
+  camera: cameraProp,
+  viewportWidth: viewportWidthProp,
+  viewportHeight: viewportHeightProp,
+  items: itemsProp,
+  zoomPercent: zoomPercentProp,
+  onZoomIn: onZoomInProp,
+  onZoomOut: onZoomOutProp,
+  onUndo: onUndoProp,
+  onRedo: onRedoProp,
+  canUndo: canUndoProp,
+  canRedo: canRedoProp,
+  onRequestRender: onRequestRenderProp,
+  position = "bottom-left",
+  inset = 12,
+  zIndex = 23,
+  className,
+  style
+}) {
+  const ctx = useCanvuChromeContext();
+  const camera = cameraProp ?? ctx?.camera ?? null;
+  const viewportWidth = viewportWidthProp ?? ctx?.viewportWidth ?? 0;
+  const viewportHeight = viewportHeightProp ?? ctx?.viewportHeight ?? 0;
+  const items = itemsProp ?? ctx?.items ?? [];
+  const zoomPercent = zoomPercentProp ?? ctx?.zoomPercent ?? 100;
+  const onZoomIn = onZoomInProp ?? ctx?.onZoomIn ?? noop;
+  const onZoomOut = onZoomOutProp ?? ctx?.onZoomOut ?? noop;
+  const onUndo = onUndoProp ?? ctx?.onUndo ?? noop;
+  const onRedo = onRedoProp ?? ctx?.onRedo ?? noop;
+  const canUndo = canUndoProp ?? ctx?.canUndo ?? false;
+  const canRedo = canRedoProp ?? ctx?.canRedo ?? false;
+  const onRequestRender = onRequestRenderProp ?? ctx?.onRequestRender ?? noop;
+  const [expanded, setExpanded] = react.useState(false);
+  const svgRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  const [mouseDown, setMouseDown] = react.useState(false);
+  const worldBounds = computeWorldBounds(items);
+  const isEmpty = worldBounds.width <= 0 || worldBounds.height <= 0;
+  const scale = Math.min(
+    (MINIMAP_W - PADDING * 2) / Math.max(worldBounds.width, 1),
+    (MINIMAP_H - PADDING * 2) / Math.max(worldBounds.height, 1)
+  );
+  const originX = worldBounds.x;
+  const originY = worldBounds.y;
+  const toMinimapX = (wx) => (wx - originX) * scale + PADDING;
+  const toMinimapY = (wy) => (wy - originY) * scale + PADDING;
+  const toMinimapW = (ww) => ww * scale;
+  const toMinimapH = (wh) => wh * scale;
+  const viewportWorld = camera ? camera.getVisibleWorldRect(viewportWidth, viewportHeight) : { x: 0, y: 0, width: 0, height: 0 };
+  const vpMinimap = {
+    x: toMinimapX(viewportWorld.x),
+    y: toMinimapY(viewportWorld.y),
+    width: toMinimapW(viewportWorld.width),
+    height: toMinimapH(viewportWorld.height)
+  };
+  const worldFromMinimap = react.useCallback(
+    (mx, my) => ({
+      worldX: (mx - PADDING) / scale + originX,
+      worldY: (my - PADDING) / scale + originY
+    }),
+    [scale, originX, originY]
+  );
+  const panTo = react.useCallback(
+    (mx, my) => {
+      if (!camera) return;
+      const { worldX, worldY } = worldFromMinimap(mx, my);
+      camera.x = viewportWidth / 2 - worldX * camera.zoom;
+      camera.y = viewportHeight / 2 - worldY * camera.zoom;
+      onRequestRender();
+    },
+    [worldFromMinimap, camera, viewportWidth, viewportHeight, onRequestRender]
+  );
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      if (isEmpty) return;
+      setDragging(true);
+      setMouseDown(true);
+      const rect = svgRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      panTo(e.clientX - rect.left, e.clientY - rect.top);
+      svgRef.current?.setPointerCapture(e.pointerId);
+    },
+    [isEmpty, panTo]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!mouseDown || isEmpty) return;
+      const rect = svgRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      panTo(e.clientX - rect.left, e.clientY - rect.top);
+    },
+    [mouseDown, isEmpty, panTo]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    setDragging(false);
+    setMouseDown(false);
+  }, []);
+  const toggleExpanded = react.useCallback(() => {
+    setExpanded((v) => !v);
+  }, []);
+  const anchorStyle = getBoardPositionStyle(position, inset, zIndex);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "fieldset",
+    {
+      "data-slot": "canvu-nav-menu",
+      "data-position": position,
+      className,
+      style: {
+        ...anchorStyle,
+        ...panelLayoutStyle,
+        border: "none",
+        margin: 0,
+        padding: 0,
+        minWidth: 0,
+        ...style
+      },
+      "aria-label": "Zoom and minimap controls",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: innerStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: btnStyle,
+              "aria-label": "Zoom out",
+              title: "Zoom out",
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              onClick: onZoomOut,
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: labelStyle2, "aria-hidden": true, children: [
+            zoomPercent,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: btnStyle,
+              "aria-label": "Zoom in",
+              title: "Zoom in",
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              onClick: onZoomIn,
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: undoBtnStyle,
+              "aria-label": "Undo",
+              title: "Undo",
+              disabled: !canUndo,
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              onClick: onUndo,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: undoBtnStyle,
+              "aria-label": "Redo",
+              title: "Redo",
+              disabled: !canRedo,
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              onClick: onRedo,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: chevronBtnStyle,
+              "aria-label": expanded ? "Hide minimap" : "Show minimap",
+              title: expanded ? "Hide minimap" : "Show minimap",
+              onPointerDown: (e) => {
+                if (e.pointerType === "mouse") e.preventDefault();
+              },
+              onClick: toggleExpanded,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 12 12",
+                  style: {
+                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.15s ease"
+                  },
+                  "aria-hidden": true,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M2 4 L6 8 L10 4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        expanded && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Minimap", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            ref: svgRef,
+            style: {
+              width: MINIMAP_W,
+              height: MINIMAP_H,
+              borderRadius: BORDER_RADIUS,
+              border: `1px solid ${BORDER_COLOR}`,
+              background: BG,
+              boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+              cursor: isEmpty ? "default" : dragging ? "grabbing" : "grab",
+              display: "block",
+              pointerEvents: "auto"
+            },
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: isEmpty ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              items.map((it) => {
+                const b = normalizeRect(boundsAabbForRotatedItem(it));
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    x: toMinimapX(b.x),
+                    y: toMinimapY(b.y),
+                    width: toMinimapW(b.width),
+                    height: toMinimapH(b.height),
+                    fill: ITEM_FILL,
+                    stroke: ITEM_STROKE,
+                    strokeWidth: 0.5,
+                    rx: 1
+                  },
+                  it.id
+                );
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: vpMinimap.x,
+                  y: vpMinimap.y,
+                  width: vpMinimap.width,
+                  height: vpMinimap.height,
+                  fill: VIEWPORT_FILL,
+                  stroke: VIEWPORT_STROKE,
+                  strokeWidth: 1.5,
+                  rx: 2
+                }
+              )
+            ] })
+          }
+        ) })
+      ]
+    }
   );
-  const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
-  return { blobId, thumbnailBlobId, width, height };
 }
-async function createBlobUrlFromStore(store, blobId) {
-  const blob = await store.getOriginal(blobId);
-  if (!blob) return null;
-  return URL.createObjectURL(blob);
+function noop() {
 }
-async function createThumbnailBlobUrlFromStore(store, thumbnailBlobId) {
-  const blob = await store.getThumbnail(thumbnailBlobId);
-  if (!blob) return null;
-  return URL.createObjectURL(blob);
+function computeWorldBounds(items) {
+  if (items.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const it of items) {
+    const b = boundsAabbForRotatedItem(it);
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.width);
+    maxY = Math.max(maxY, b.y + b.height);
+  }
+  const pad = Math.max((maxX - minX) * 0.1, (maxY - minY) * 0.1, 40);
+  return {
+    x: minX - pad,
+    y: minY - pad,
+    width: maxX - minX + pad * 2,
+    height: maxY - minY + pad * 2
+  };
 }
 
 // src/react/persistence/indexed-db-adapter.ts
@@ -3260,83 +3395,6 @@ var Camera2D = class {
   }
 };
 
-// src/image/pdf-loader.ts
-var pdfjsPromise = null;
-function getPdfJs() {
-  if (!pdfjsPromise) {
-    pdfjsPromise = import('pdfjs-dist').then((mod) => {
-      const workerSrc = new URL(
-        "pdfjs-dist/build/pdf.worker.min.mjs",
-        (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('react.cjs', document.baseURI).href))
-      ).toString();
-      mod.GlobalWorkerOptions.workerSrc = workerSrc;
-      return mod;
-    });
-  }
-  return pdfjsPromise;
-}
-async function renderPageToCanvas(page, scale) {
-  const raw = page.getViewport({ scale: 1 });
-  const adjustedScale = Math.round(raw.width * scale) / raw.width;
-  const viewport = page.getViewport({ scale: adjustedScale });
-  const w = Math.round(viewport.width);
-  const h = Math.round(viewport.height);
-  const canvas = document.createElement("canvas");
-  canvas.width = w;
-  canvas.height = h;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Canvas 2D context unavailable");
-  ctx.imageSmoothingEnabled = true;
-  ctx.imageSmoothingQuality = "high";
-  await page.render({ canvas, viewport }).promise;
-  return { canvas, width: w, height: h };
-}
-function canvasToBlob2(canvas, mime, quality) {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (!blob) {
-          reject(new Error("Could not encode blob"));
-          return;
-        }
-        resolve(blob);
-      },
-      mime,
-      quality
-    );
-  });
-}
-async function loadPdfToStore(file, store, options) {
-  const scale = 1.5;
-  const pdfjs = await getPdfJs();
-  const arrayBuffer = await file.arrayBuffer();
-  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise;
-  const results = [];
-  for (let i = 1; i <= pdf.numPages; i++) {
-    const page = await pdf.getPage(i);
-    const { canvas, width, height } = await renderPageToCanvas(page, scale);
-    const mime = "image/png";
-    const pageBlob = await canvasToBlob2(canvas, mime);
-    const blobId = await store.storeOriginal(pageBlob);
-    const thumbScale = Math.min(1, 256 / Math.max(width, height));
-    const tw = Math.max(1, Math.round(width * thumbScale));
-    const th = Math.max(1, Math.round(height * thumbScale));
-    const thumbCanvas = document.createElement("canvas");
-    thumbCanvas.width = tw;
-    thumbCanvas.height = th;
-    const tCtx = thumbCanvas.getContext("2d");
-    if (tCtx) {
-      tCtx.imageSmoothingEnabled = true;
-      tCtx.imageSmoothingQuality = "high";
-      tCtx.drawImage(canvas, 0, 0, tw, th);
-    }
-    const thumbBlob = await canvasToBlob2(thumbCanvas, mime);
-    const thumbnailBlobId = await store.storeThumbnail(thumbBlob);
-    results.push({ blobId, thumbnailBlobId, width, height, pageNumber: i });
-  }
-  return results;
-}
-
 // src/input/apple-pencil-navigation.ts
 var DRAWING_LIKE_TOOLS = /* @__PURE__ */ new Set([
   "draw",
@@ -3535,7 +3593,7 @@ function attachViewportInput(options) {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
       const dy = wheelDeltaYPixels(e);
-      const normDy = dy < 20 ? dy * 12 : dy;
+      const normDy = Math.abs(dy) < 20 ? dy * 12 : dy;
       const factor = Math.exp(-normDy * wheelZoomSensitivity);
       const rect = element.getBoundingClientRect();
       camera.setZoom(camera.zoom * factor, {
@@ -4689,7 +4747,42 @@ init_shape_builders();
 
 // src/react/InteractionOverlay.tsx
 init_rect();
-init_freehand_path();
+
+// src/scene/freehand-path.ts
+function smoothFreehandPointsToPathD(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) {
+    const p = points[0];
+    if (!p) return "";
+    return `M ${p.x} ${p.y}`;
+  }
+  if (n === 2) {
+    const a = points[0];
+    const b = points[1];
+    if (!a || !b) return "";
+    return `M ${a.x} ${a.y} L ${b.x} ${b.y}`;
+  }
+  const p0 = points[0];
+  if (!p0) return "";
+  let d = `M ${p0.x} ${p0.y}`;
+  let i = 1;
+  for (; i < n - 2; i++) {
+    const pi = points[i];
+    const pi1 = points[i + 1];
+    if (!pi || !pi1) continue;
+    const xc = (pi.x + pi1.x) / 2;
+    const yc = (pi.y + pi1.y) / 2;
+    d += ` Q ${pi.x} ${pi.y} ${xc} ${yc}`;
+  }
+  const pLast = points[i];
+  const pEnd = points[i + 1];
+  if (!pLast || !pEnd) return d;
+  d += ` Q ${pLast.x} ${pLast.y} ${pEnd.x} ${pEnd.y}`;
+  return d;
+}
+
+// src/react/InteractionOverlay.tsx
 init_shape_builders();
 var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_TINT = "#cbd5e1";
@@ -5155,7 +5248,6 @@ function InteractionOverlay({
     }
   );
 }
-init_freehand_path();
 
 // src/react/presence/peer-color.ts
 function defaultPresenceColorForId(id) {
@@ -5474,7 +5566,8 @@ var visuallyHidden = {
   whiteSpace: "nowrap",
   border: 0
 };
-var VIEWPORT_ZOOM_STEP = 1.15;
+var VIEWPORT_ZOOM_IN_STEP = 1.15;
+var VIEWPORT_ZOOM_OUT_STEP = 1 / 1.15;
 function replaceItem(items, id, next) {
   return items.map((it) => it.id === id ? next : it);
 }
@@ -5678,22 +5771,8 @@ function appendInterpolatedPoints(points, next, maxStepWorld) {
   if (!last) return [...points, next];
   const dx = next.x - last.x;
   const dy = next.y - last.y;
-  const dist = Math.hypot(dx, dy);
-  if (dist < 1e-6) return points;
-  const safeStep = Math.max(maxStepWorld, 1e-4);
-  const steps = Math.max(1, Math.ceil(dist / safeStep));
-  if (steps === 1) return [...points, next];
-  const out = [...points];
-  for (let i = 1; i <= steps; i++) {
-    const t = i / steps;
-    const pressure = last.pressure != null || next.pressure != null ? (last.pressure ?? next.pressure ?? 0.5) + ((next.pressure ?? last.pressure ?? 0.5) - (last.pressure ?? next.pressure ?? 0.5)) * t : void 0;
-    out.push({
-      x: last.x + dx * t,
-      y: last.y + dy * t,
-      ...pressure != null ? { pressure } : {}
-    });
-  }
-  return out;
+  if (dx * dx + dy * dy < 1e-12) return points;
+  return [...points, next];
 }
 function pointerSampleToWorldPoint(screenToWorldFn, clientX, clientY, pressure) {
   const { worldX, worldY } = screenToWorldFn(clientX, clientY);
@@ -5725,7 +5804,7 @@ function isLikelyStylusTouch(touch) {
 }
 function appendPointerEventSamplesToStrokePoints(points, ev, zoom, screenToWorldFn) {
   let interpolated = points;
-  const maxStepWorld = ev.pointerType === "pen" ? 0.35 / zoom : 1 / zoom;
+  ev.pointerType === "pen" ? 0.35 / zoom : 1 / zoom;
   for (const sample of pointerEventSamples(ev)) {
     const nextPoint = pointerSampleToWorldPoint(
       screenToWorldFn,
@@ -5733,7 +5812,7 @@ function appendPointerEventSamplesToStrokePoints(points, ev, zoom, screenToWorld
       sample.clientY,
       sample.pointerType === "pen" ? sample.pressure : void 0
     );
-    interpolated = appendInterpolatedPoints(interpolated, nextPoint, maxStepWorld);
+    interpolated = appendInterpolatedPoints(interpolated, nextPoint);
   }
   return interpolated;
 }
@@ -5744,7 +5823,7 @@ function appendTouchToStrokePoints(points, touch, zoom, screenToWorldFn) {
     touch.clientY,
     touchPressure(touch)
   );
-  return appendInterpolatedPoints(points, nextPoint, 0.35 / zoom);
+  return appendInterpolatedPoints(points, nextPoint);
 }
 var VectorViewport = react.forwardRef(
   function VectorViewport2({
@@ -5757,14 +5836,16 @@ var VectorViewport = react.forwardRef(
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
-    onWorldPointerDown,
+    onWorldPointerDown: consumerOnWorldPointerDown,
     toolbar,
     navMenu,
     selectionInspector,
+    selectionInspectorProps,
     plugins = [],
     onCameraChange: consumerOnCameraChange,
     customPlacement: consumerCustomPlacement,
     customPlacements: consumerCustomPlacements,
+    assetStore,
     toolLocked = false,
     autoResetToolTo = "select",
     onToolChangeRequest,
@@ -5847,6 +5928,12 @@ var VectorViewport = react.forwardRef(
     );
     const remotePresence = [...orderedPluginContributions].reverse().map((contribution) => contribution.viewportProps?.remotePresence).find((value) => value !== void 0) ?? consumerRemotePresence;
     const presenceOverlay = [...orderedPluginContributions].reverse().map((contribution) => contribution.viewportProps?.presenceOverlay).find((value) => value !== void 0) ?? consumerPresenceOverlay;
+    const onWorldPointerDown = composePluginEvent(
+      consumerOnWorldPointerDown,
+      orderedPluginContributions.map(
+        (contribution) => contribution.callbacks?.onWorldPointerDown
+      )
+    );
     const onWorldPointerMove = composePluginEvent(
       consumerOnWorldPointerMove,
       orderedPluginContributions.map(
@@ -5929,6 +6016,8 @@ var VectorViewport = react.forwardRef(
     const itemsRef = react.useRef(items);
     const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
     const onItemsChangeRef = react.useRef(onItemsChange);
+    const assetStoreRef = react.useRef(assetStore);
+    assetStoreRef.current = assetStore;
     const customPlacementRef = react.useRef(customPlacement);
     customPlacementRef.current = customPlacement;
     const dragStateRef = react.useRef({ kind: "idle" });
@@ -6545,14 +6634,14 @@ var VectorViewport = react.forwardRef(
           handled = true;
         } else if (e.key === "+" || e.key === "=") {
           const rect = el.getBoundingClientRect();
-          camera.setZoom(camera.zoom * VIEWPORT_ZOOM_STEP, {
+          camera.setZoom(camera.zoom * VIEWPORT_ZOOM_IN_STEP, {
             x: rect.width / 2,
             y: rect.height / 2
           });
           handled = true;
         } else if (e.key === "-" || e.key === "_") {
           const rect = el.getBoundingClientRect();
-          camera.setZoom(camera.zoom / VIEWPORT_ZOOM_STEP, {
+          camera.setZoom(camera.zoom * VIEWPORT_ZOOM_OUT_STEP, {
             x: rect.width / 2,
             y: rect.height / 2
           });
@@ -6821,7 +6910,7 @@ var VectorViewport = react.forwardRef(
       const el = sceneContainerRef.current;
       if (!camera || !el) return;
       const rect = el.getBoundingClientRect();
-      camera.setZoom(camera.zoom * VIEWPORT_ZOOM_STEP, {
+      camera.setZoom(camera.zoom * VIEWPORT_ZOOM_IN_STEP, {
         x: rect.width / 2,
         y: rect.height / 2
       });
@@ -6832,7 +6921,7 @@ var VectorViewport = react.forwardRef(
       const el = sceneContainerRef.current;
       if (!camera || !el) return;
       const rect = el.getBoundingClientRect();
-      camera.setZoom(camera.zoom / VIEWPORT_ZOOM_STEP, {
+      camera.setZoom(camera.zoom * VIEWPORT_ZOOM_OUT_STEP, {
         x: rect.width / 2,
         y: rect.height / 2
       });
@@ -6850,13 +6939,13 @@ var VectorViewport = react.forwardRef(
       if (isDefaultMarkerToolStyle(current)) {
         setCurrentStrokeStyle({
           stroke: DEFAULT_STROKE_STYLE.stroke,
-          strokeWidth: toolId === "draw" ? 3 : DEFAULT_STROKE_STYLE.strokeWidth
+          strokeWidth: toolId === "draw" ? 10 : DEFAULT_STROKE_STYLE.strokeWidth
         });
         return;
       }
       setCurrentStrokeStyle({
         stroke: current.stroke,
-        strokeWidth: toolId === "draw" ? 3 : current.strokeWidth
+        strokeWidth: toolId === "draw" ? 10 : current.strokeWidth
       });
     }, [setCurrentStrokeStyle, toolId]);
     react.useEffect(() => {
@@ -6958,97 +7047,49 @@ var VectorViewport = react.forwardRef(
         if (!change || files.length === 0) return;
         const store = imageStoreRef.current;
         if (!store) return;
-        const { buildRasterImageChildrenSvg: buildRasterImageChildrenSvg2 } = await Promise.resolve().then(() => (init_shape_builders(), shape_builders_exports));
-        const newItems = [];
-        const gapWorld = 16;
-        const stepWorld = 48;
-        let placed = 0;
-        for (const file of files) {
-          try {
-            if (file.type === "application/pdf") {
-              const estW = 1241;
-              const estH = 1754;
-              const estPages = 10;
-              const skels = [];
-              const skelIds = [];
-              for (let i = 0; i < estPages; i++) {
+        try {
+          const pdfFiles = files.filter((file) => file.type === "application/pdf");
+          if (pdfFiles.length > 0) {
+            const gapWorld = 16;
+            const estW = 1241;
+            const estH = 1754;
+            const estPages = 10;
+            const skels = [];
+            for (const [fileIndex] of pdfFiles.entries()) {
+              for (let pageIndex = 0; pageIndex < estPages; pageIndex++) {
                 const id = `skeleton-${skeletonSeqRef.current++}`;
-                skelIds.push(id);
+                const offsetIndex = fileIndex * estPages + pageIndex;
                 skels.push({
                   id,
                   x: worldX - estW / 2,
-                  y: worldY - estH / 2 + i * (estH + gapWorld),
+                  y: worldY - estH / 2 + offsetIndex * (estH + gapWorld),
                   width: estW,
                   height: estH
                 });
               }
-              setLoadingSkeletons(skels);
-              const pages = await loadPdfToStore(file, store);
-              setLoadingSkeletons([]);
-              for (const page of pages) {
-                const { blobId, width, height } = page;
-                const fullUrl = await createBlobUrlFromStore(store, blobId);
-                const id = createShapeId();
-                const bounds = {
-                  x: worldX - width / 2,
-                  y: worldY - height / 2 + placed * (height + gapWorld),
-                  width,
-                  height
-                };
-                newItems.push({
-                  id,
-                  x: bounds.x,
-                  y: bounds.y,
-                  bounds: { ...bounds },
-                  toolKind: "image",
-                  imageBlobId: blobId,
-                  imageRasterHref: fullUrl ?? void 0,
-                  imageIntrinsicSize: { width, height },
-                  childrenSvg: fullUrl ? buildRasterImageChildrenSvg2(fullUrl, { width, height }, bounds) : ""
-                });
-                placed++;
-              }
-            } else if (file.type.startsWith("image/")) {
-              const { blobId, thumbnailBlobId, width, height } = await loadImageToStore(file, store);
-              const fullUrl = await createBlobUrlFromStore(store, blobId);
-              const thumbBlob = await store.getThumbnail(thumbnailBlobId);
-              const thumbnailHref = thumbBlob ? URL.createObjectURL(thumbBlob) : null;
-              const id = createShapeId();
-              const ox = placed % 8 * stepWorld;
-              const oy = Math.floor(placed / 8) * stepWorld;
-              const bounds = {
-                x: worldX - width / 2 + ox,
-                y: worldY - height / 2 + oy,
-                width,
-                height
-              };
-              const href = thumbnailHref ?? fullUrl;
-              newItems.push({
-                id,
-                x: bounds.x,
-                y: bounds.y,
-                bounds: { ...bounds },
-                toolKind: "image",
-                imageBlobId: blobId,
-                imageThumbnailBlobId: thumbnailBlobId,
-                imageRasterHref: fullUrl ?? void 0,
-                imageThumbnailHref: thumbnailHref ?? void 0,
-                imageIntrinsicSize: { width, height },
-                childrenSvg: buildRasterImageChildrenSvg2(
-                  href ?? "",
-                  { width, height },
-                  bounds
-                )
-              });
-              placed++;
             }
-          } catch (err) {
-            console.error("Failed to add file:", err);
+            setLoadingSkeletons(skels);
+          }
+          const result = await ingestAssetFilesToSceneItems({
+            files,
+            worldCenter: {
+              x: worldX,
+              y: worldY
+            },
+            imageStore: store,
+            assetStore: assetStoreRef.current ?? void 0
+          });
+          if (result.errors.length > 0) {
+            for (const error of result.errors) {
+              console.error("Failed to add file:", error.error);
+            }
           }
+          if (result.items.length === 0) return;
+          change([...itemsRef.current, ...result.items]);
+          setEffectiveSelectedIdsRef.current(result.items.map((item) => item.id));
+        } finally {
+          setLoadingSkeletons([]);
         }
-        if (newItems.length === 0) return;
-        change([...itemsRef.current, ...newItems]);
-        setEffectiveSelectedIdsRef.current(newItems.map((it) => it.id));
       },
       []
     );
@@ -8195,7 +8236,13 @@ var VectorViewport = react.forwardRef(
       canRedo,
       onRequestRender: renderFrame
     };
-    const defaultSelectionInspector = cameraForOverlay && canEditSelection ? /* @__PURE__ */ jsxRuntime.jsx(VectorSelectionInspector, {}) : null;
+    const defaultSelectionInspector = cameraForOverlay && canEditSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+      VectorSelectionInspector,
+      {
+        className: selectionInspectorProps?.className,
+        style: selectionInspectorProps?.style
+      }
+    ) : null;
     const defaultNavMenu = cameraForOverlay ? /* @__PURE__ */ jsxRuntime.jsx(NavMenu, {}) : null;
     const resolvedSelectionInspector = selectionInspector === void 0 ? defaultSelectionInspector : selectionInspector;
     const resolvedNavMenu = navMenu === void 0 ? defaultNavMenu : navMenu;
@@ -8529,6 +8576,7 @@ exports.createNoopPersistenceAdapter = createNoopPersistenceAdapter;
 exports.createToolPlugin = createToolPlugin;
 exports.cursorForVectorToolId = cursorForVectorToolId;
 exports.getBoardPositionStyle = getBoardPositionStyle;
+exports.ingestAssetFilesToSceneItems = ingestAssetFilesToSceneItems;
 exports.useCanvuChromeContext = useCanvuChromeContext;
 exports.useCanvuDocumentContext = useCanvuDocumentContext;
 exports.useCanvuPluginContext = useCanvuPluginContext;