@vivix-labs/magic-edit 0.0.0-stage → 1.0.0-beta

package/dist/client-code.js

@@ -0,0 +1,2163 @@
+// packages/magic-edit/src/client.tsx
+import { useEffect as useEffect3, useEffectEvent, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState2 } from "react";
+
+// packages/ui-system/dist/button.js
+import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
+
+// packages/ui-system/dist/icon.js
+import { jsx as _jsx } from "react/jsx-runtime";
+function Icon({ name, size }) {
+  return _jsx("span", { "aria-hidden": "true", className: "vx-icon", "data-icon": name, style: size === void 0 ? void 0 : { "--vx-icon-size": `${size}px` } });
+}
+
+// packages/ui-system/dist/button-variants.js
+var buttonVariants = {
+  "text-filled-sm": { size: 32, appearance: "filled", shape: "text", width: 215 },
+  "text-filled-leading-sm": { size: 32, appearance: "filled", shape: "text" },
+  "text-ghost-sm": { size: 32, appearance: "ghost", shape: "text" },
+  "text-on-content-sm": { size: 32, appearance: "on-content", shape: "text" },
+  "text-tonal-sm": { size: 32, appearance: "tonal", shape: "text" },
+  // The medium recipes are shared by all dialog footer actions.
+  "text-filled-md": { size: 40, appearance: "filled", shape: "text" },
+  "text-tonal-md": { size: 40, appearance: "tonal", shape: "text" },
+  "text-ghost-md": { size: 40, appearance: "ghost", shape: "text" },
+  "icon-ghost-md": { size: 40, appearance: "ghost", shape: "icon" },
+  "text-filled-lg": { size: 44, appearance: "filled", shape: "text", width: 412 },
+  "text-tonal-lg": { size: 44, appearance: "tonal", shape: "text", width: 412 },
+  "text-outline-lg": {
+    size: 44,
+    appearance: "outline",
+    shape: "text",
+    width: 412
+  },
+  "pill-filled": { size: 44, appearance: "filled", shape: "pill" },
+  "pill-plain": { size: 48, appearance: "plain", shape: "pill" },
+  "pill-small": { size: 32, appearance: "plain", shape: "pill" },
+  "icon-outline-sm": { size: 32, appearance: "outline", shape: "icon" },
+  "icon-on-content": { size: 24, appearance: "on-content", shape: "icon" },
+  "icon-outline-lg": { size: 48, appearance: "outline", shape: "icon" },
+  // Compact bare action: reuse the transparent/default and surface-hover ghost treatment.
+  "icon-bare-xs": { size: 24, appearance: "ghost", shape: "icon" },
+  "icon-ghost-sm": { size: 32, appearance: "ghost", shape: "icon" },
+  "icon-ghost-lg": { size: 48, appearance: "ghost", shape: "icon" },
+  "icon-circle-sm": { size: 32, appearance: "filled", shape: "circle" },
+  "icon-circle-lg": { size: 44, appearance: "filled", shape: "circle" }
+};
+
+// packages/ui-system/dist/button.js
+function ButtonFrame({ label, variant, loading = false, width, children, disabled, type = "button", style, className, ...props }) {
+  const spec = buttonVariants[variant];
+  const buttonStyle = "width" in spec ? { ...style, "--vx-button-width": `${spec.width}px` } : style;
+  return _jsxs("button", { ...props, type, className: className ? `vx-button ${className}` : "vx-button", "data-variant": variant, "data-appearance": spec.appearance, "data-shape": spec.shape, "data-size": spec.size, "data-width": width, "data-state": loading ? "loading" : disabled ? "disabled" : "default", style: buttonStyle, disabled: disabled || loading, "aria-label": label, "aria-busy": loading || void 0, children: [_jsx2("span", { className: "vx-button-content", children }), loading && _jsx2("span", { className: "vx-button-loading", "aria-hidden": "true" })] });
+}
+function Button({ variant = "text-filled-sm", leadingIcon, trailingIcon, ...props }) {
+  return _jsxs(ButtonFrame, { ...props, variant, children: [leadingIcon && _jsx2(Icon, { name: leadingIcon }), _jsx2("span", { className: "vx-button-label", children: props.label }), trailingIcon && _jsx2("span", { className: "vx-button-trailing", children: _jsx2(Icon, { name: trailingIcon }) })] });
+}
+function IconButton({ icon, variant = "icon-ghost-sm", ...props }) {
+  return _jsx2(ButtonFrame, { ...props, variant, children: _jsx2(Icon, { name: icon }) });
+}
+
+// packages/ui-system/dist/text.js
+import { jsx as _jsx3 } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal" }) {
+  return _jsx3("span", { className: "vx-divider", "data-orientation": orientation, "aria-hidden": "true" });
+}
+
+// packages/ui-system/dist/annotation-toolbar.js
+import { jsx as _jsx4, Fragment as _Fragment, jsxs as _jsxs2 } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+var tools = [
+  { id: "select", label: "Select element" },
+  { id: "area", label: "Rectangle" },
+  { id: "draw", label: "Draw" }
+];
+function AnnotationToolbar({ active, tool, actions, onActiveChange, onToolChange }) {
+  const toolbar = useRef(null);
+  const focusAfterChange = useRef(false);
+  useEffect(() => {
+    if (!active && !focusAfterChange.current)
+      return;
+    focusAfterChange.current = false;
+    toolbar.current?.querySelector(active ? '[aria-pressed="true"]' : "button")?.focus();
+  }, [active]);
+  function toggle(next) {
+    focusAfterChange.current = true;
+    onActiveChange(next);
+  }
+  return _jsx4("div", { ref: toolbar, className: "vx-annotation-tools", role: active ? "toolbar" : void 0, "aria-label": active ? "Annotation tools" : void 0, onKeyDown: (event) => {
+    if (event.key === "Escape" && active) {
+      event.preventDefault();
+      event.stopPropagation();
+      toggle(false);
+    }
+  }, children: active ? _jsxs2(_Fragment, { children: [tools.map(({ id, label }, index) => _jsx4(IconButton, { icon: id, label, "aria-pressed": tool === id, tabIndex: tool === id ? 0 : -1, onClick: () => onToolChange(id), onKeyDown: (event) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+      return;
+    event.preventDefault();
+    const step = event.key === "ArrowLeft" ? -1 : 1;
+    const next = (index + step + tools.length) % tools.length;
+    toolbar.current?.querySelectorAll("[aria-pressed]")[next]?.focus();
+  } }, id)), actions, _jsx4(Divider, { orientation: "vertical" }), _jsx4(IconButton, { icon: "close", label: "Close annotation tools", onClick: () => toggle(false) })] }) : _jsx4(Button, { label: "Magic Edit", leadingIcon: "magic", "aria-keyshortcuts": "C", variant: "pill-filled", onClick: () => toggle(true) }) });
+}
+
+// packages/magic-edit/src/activation.ts
+var lensMap;
+function radialLensMap() {
+  if (lensMap) return lensMap;
+  const size = 128;
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = size;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  const pixels = context.createImageData(size, size);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const dx = 2 * (x + 0.5) / size - 1;
+      const dy = 2 * (y + 0.5) / size - 1;
+      const distance = Math.hypot(dx, dy);
+      const crest = (distance - 0.78) / 0.09;
+      const slope = crest * Math.exp((1 - crest * crest) / 2) / distance;
+      const index = (y * size + x) * 4;
+      pixels.data[index] = 128 + 126 * dx * slope;
+      pixels.data[index + 1] = 128 + 126 * dy * slope;
+      pixels.data[index + 3] = 255;
+    }
+  }
+  context.putImageData(pixels, 0, 0);
+  lensMap = canvas.toDataURL();
+  return lensMap;
+}
+function mountLens(layer) {
+  if (!CSS.supports("backdrop-filter", 'url("#lens")')) return;
+  const map = radialLensMap();
+  if (!map) return;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const id = `vx-magic-edit-lens-${crypto.randomUUID()}`;
+  svg.innerHTML = `<defs><filter id="${id}" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+    <feFlood flood-color="#808080" result="flat" />
+    <feImage preserveAspectRatio="none" />
+    <feComposite in2="flat" operator="over" result="lens" />
+    <feDisplacementMap in="SourceGraphic" in2="lens" scale="17.28" xChannelSelector="R" yChannelSelector="G" />
+    <feColorMatrix values="1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" result="red" />
+    <feDisplacementMap in="SourceGraphic" in2="lens" scale="16" xChannelSelector="R" yChannelSelector="G" />
+    <feColorMatrix values="0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+    <feBlend in2="red" mode="screen" result="rg" />
+    <feDisplacementMap in="SourceGraphic" in2="lens" scale="14.72" xChannelSelector="R" yChannelSelector="G" />
+    <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0" />
+    <feBlend in2="rg" mode="screen" />
+  </filter></defs>`;
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  const image = svg.querySelector("feImage");
+  image.setAttribute("href", map);
+  layer.append(svg);
+  layer.style.backdropFilter = `url("#${id}")`;
+  return image;
+}
+function playMagicEditWave(root, bounds, button) {
+  const motion = matchMedia("(prefers-reduced-motion: reduce)");
+  const left = Math.max(0, bounds.left);
+  const top = Math.max(0, bounds.top);
+  const width = Math.min(innerWidth, bounds.right) - left;
+  const height = Math.min(innerHeight, bounds.bottom) - top;
+  if (motion.matches || width <= 0 || height <= 0 || !root.isConnected) return;
+  const x = Math.max(0, Math.min(width, button.left + button.width / 2 - left));
+  const y = Math.max(0, Math.min(height, button.top + button.height / 2 - top));
+  const reach = Math.hypot(Math.max(x, width - x), Math.max(y, height - y));
+  const layer = document.createElement("div");
+  layer.className = "magic-edit-wave";
+  layer.setAttribute("aria-hidden", "true");
+  Object.assign(layer.style, {
+    left: `${left}px`,
+    top: `${top}px`,
+    width: `${width}px`,
+    height: `${height}px`
+  });
+  layer.style.setProperty("--vx-wave-x", `${x}px`);
+  layer.style.setProperty("--vx-wave-y", `${y}px`);
+  let lens = mountLens(layer);
+  root.prepend(layer);
+  const playback = new AbortController();
+  let frame = 0;
+  let previous = performance.now();
+  let elapsed = 0;
+  let previousFrameWasSlow = false;
+  function tick(now) {
+    const delta = Math.max(0, now - previous);
+    previous = now;
+    if (lens && previousFrameWasSlow && delta > 50) {
+      layer.style.backdropFilter = "none";
+      layer.replaceChildren();
+      lens = void 0;
+    }
+    previousFrameWasSlow = delta > 50;
+    elapsed += Math.min(delta, 50);
+    const progress = Math.min(1, elapsed / 900);
+    if (progress >= 1) {
+      playback.abort();
+      return;
+    }
+    const radius = Math.max(1, reach / 0.58 * (1 - (1 - progress) ** 1.7));
+    layer.style.setProperty("--vx-wave-radius", `${radius}px`);
+    layer.style.setProperty("--vx-wave-opacity", String(1 - progress ** 2));
+    if (lens) {
+      lens.setAttribute("x", String(x - radius));
+      lens.setAttribute("y", String(y - radius));
+      lens.setAttribute("width", String(radius * 2));
+      lens.setAttribute("height", String(radius * 2));
+    }
+    frame = requestAnimationFrame(tick);
+  }
+  function stop() {
+    playback.abort();
+  }
+  playback.signal.addEventListener(
+    "abort",
+    () => {
+      cancelAnimationFrame(frame);
+      layer.remove();
+    },
+    { once: true }
+  );
+  motion.addEventListener("change", stop, { signal: playback.signal });
+  window.addEventListener("resize", stop, { signal: playback.signal });
+  tick(previous);
+  return playback;
+}
+
+// packages/magic-edit/src/annotation.tsx
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState } from "react";
+
+// packages/magic-edit/src/shared.ts
+var maxRegions = 12;
+var maxStrokePoints = 256;
+function formatSourceTime(milliseconds) {
+  const totalSeconds = Math.floor(milliseconds / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const fraction = milliseconds % 1e3;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(fraction).padStart(3, "0")}`;
+}
+function formatTargetTime({ sourceTimeMs, endSourceTimeMs }) {
+  if (sourceTimeMs === void 0) return void 0;
+  const start = formatSourceTime(sourceTimeMs);
+  if (endSourceTimeMs === void 0 || endSourceTimeMs === sourceTimeMs) return start;
+  return `${start}\u2013${formatSourceTime(endSourceTimeMs)}`;
+}
+function handoffText(record) {
+  const { target } = record;
+  const time = formatTargetTime(target);
+  const regions = record.regions.map((region, index) => {
+    const name = region.kind === "frame" ? "whole image" : region.kind;
+    return `${String(index + 1).padStart(2, "0")}: ${name}`;
+  });
+  return [
+    `Magic Edit \xB7 ${target.label}`,
+    record.projectId ? `Project: ${record.projectId}` : "Workspace: Studio Home",
+    ...Object.entries(target.context ?? {}).map(([key, value]) => `${key}: ${value}`),
+    target.revision !== void 0 && `Revision: ${target.revision}`,
+    target.visibleText && `Visible text: ${target.visibleText}`,
+    target.ref && `Asset version: ${target.ref.versionId} (${target.ref.storeId}/${target.ref.objectId})`,
+    time && `Source time: ${time}`,
+    `Captured image: ${record.frame.width} \xD7 ${record.frame.height}`,
+    `Marked regions: ${regions.join(", ")}. See the matching PNG.`,
+    `
+${record.instruction}`
+  ].filter((line) => Boolean(line)).join("\n");
+}
+
+// packages/magic-edit/src/viewport.ts
+function embeddedDocument(frame) {
+  try {
+    if (!frame?.isConnected || !frame.contentWindow) return;
+    const expected = new URL(frame.src);
+    const current = new URL(frame.contentWindow.location.href);
+    if (current.origin !== window.location.origin || current.origin !== expected.origin) return;
+    const project = expected.searchParams.get("project");
+    if (current.pathname === expected.pathname && (project === null || current.searchParams.get("project") === project))
+      return frame.contentDocument ?? void 0;
+  } catch {
+  }
+}
+function elementNode(target) {
+  return target && target.nodeType === Node.ELEMENT_NODE ? target : void 0;
+}
+function clippedBounds(element, local) {
+  const view = element.ownerDocument.defaultView;
+  let left = Math.max(0, local.left);
+  let top = Math.max(0, local.top);
+  let right = Math.min(view?.innerWidth ?? 0, local.right);
+  let bottom = Math.min(view?.innerHeight ?? 0, local.bottom);
+  for (let parent = element.parentElement; parent && view; parent = parent.parentElement) {
+    const { overflowX, overflowY } = view.getComputedStyle(parent);
+    if (overflowX === "visible" && overflowY === "visible") continue;
+    const rect = parent.getBoundingClientRect();
+    if (overflowX !== "visible") {
+      left = Math.max(left, rect.left);
+      right = Math.min(right, rect.right);
+    }
+    if (overflowY !== "visible") {
+      top = Math.max(top, rect.top);
+      bottom = Math.min(bottom, rect.bottom);
+    }
+  }
+  if (right - left >= 1 && bottom - top >= 1) {
+    return new DOMRect(left, top, right - left, bottom - top);
+  }
+}
+function screenBounds(element, local, frame, clip = false) {
+  if (!element.isConnected || local.width < 1 || local.height < 1) return;
+  const inHome = element.ownerDocument === document;
+  if (inHome && !clip) return local;
+  const sourceFrame = inHome ? void 0 : frame;
+  if (!inHome && (!sourceFrame || embeddedDocument(sourceFrame) !== element.ownerDocument)) return;
+  const bounds = clip ? clippedBounds(element, local) : local;
+  if (!bounds || !sourceFrame) return bounds;
+  if (!sourceFrame.offsetWidth || !sourceFrame.offsetHeight) return;
+  const outer = sourceFrame.getBoundingClientRect();
+  const scaleX = outer.width / sourceFrame.offsetWidth;
+  const scaleY = outer.height / sourceFrame.offsetHeight;
+  const projected = new DOMRect(
+    outer.left + (sourceFrame.clientLeft + bounds.left) * scaleX,
+    outer.top + (sourceFrame.clientTop + bounds.top) * scaleY,
+    bounds.width * scaleX,
+    bounds.height * scaleY
+  );
+  return clip ? clippedBounds(sourceFrame, projected) : projected;
+}
+
+// packages/magic-edit/src/annotation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function pointInBounds(event, bounds) {
+  const clamp = (value) => Math.max(0, Math.min(1, value));
+  return {
+    x: clamp((event.clientX - bounds.left) / bounds.width),
+    y: clamp((event.clientY - bounds.top) / bounds.height)
+  };
+}
+function startRegion(tool, point) {
+  return tool === "area" ? { kind: "rectangle", start: point, end: point } : { kind: "pen", points: [point] };
+}
+function extendRegion(region, point) {
+  if (region.kind === "rectangle") return { ...region, end: point };
+  if (region.kind === "frame") return region;
+  const last = region.points.at(-1);
+  if (last && Math.hypot(point.x - last.x, point.y - last.y) < 2e-3) return region;
+  const points = region.points.length < maxStrokePoints ? region.points : region.points.slice(0, -1);
+  return { ...region, points: [...points, point] };
+}
+function validRegion(region) {
+  return region.kind !== "rectangle" || Math.abs(region.start.x - region.end.x) >= 5e-3 && Math.abs(region.start.y - region.end.y) >= 5e-3;
+}
+function paintRegions(canvas, image, regions, showImage = true) {
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("The browser could not draw the marked image.");
+  const { width, height } = canvas;
+  context.clearRect(0, 0, width, height);
+  if (showImage) context.drawImage(image, 0, 0, width, height);
+  const line = Math.max(2, Math.round(Math.max(width, height) / 230));
+  const badge = Math.min(width / 3, height / 3, Math.max(20, line * 6));
+  context.strokeStyle = showImage ? "#c3ff75" : "#2ba86a";
+  context.lineWidth = line;
+  context.lineJoin = "round";
+  context.lineCap = "round";
+  context.font = `bold ${Math.max(8, badge * 0.55)}px system-ui, sans-serif`;
+  context.textAlign = "center";
+  context.textBaseline = "middle";
+  regions.forEach((region, index) => {
+    let x = line;
+    let y = line;
+    if (region.kind === "frame") {
+      if (!showImage) {
+        context.fillStyle = "rgb(43 168 106 / 20%)";
+        context.fillRect(0, 0, width, height);
+      }
+      context.strokeRect(line, line, Math.max(1, width - line * 2), Math.max(1, height - line * 2));
+    } else if (region.kind === "rectangle") {
+      x = Math.min(region.start.x, region.end.x) * width;
+      y = Math.min(region.start.y, region.end.y) * height;
+      context.strokeRect(
+        x,
+        y,
+        Math.abs(region.start.x - region.end.x) * width,
+        Math.abs(region.start.y - region.end.y) * height
+      );
+    } else {
+      const first = region.points[0];
+      if (!first) return;
+      x = first.x * width;
+      y = first.y * height;
+      context.beginPath();
+      context.moveTo(x, y);
+      if (region.points.length === 1) context.lineTo(x + 0.01, y);
+      else
+        region.points.slice(1).forEach((point) => context.lineTo(point.x * width, point.y * height));
+      context.stroke();
+    }
+    const badgeX = Math.min(width - badge, Math.max(0, x));
+    const badgeY = Math.min(height - badge, Math.max(0, y - badge));
+    context.fillStyle = "#c3ff75";
+    context.fillRect(badgeX, badgeY, badge, badge);
+    context.fillStyle = "#17210f";
+    context.fillText(String(index + 1).padStart(2, "0"), badgeX + badge / 2, badgeY + badge / 2);
+  });
+}
+async function markedPng(image, regions) {
+  const canvas = document.createElement("canvas");
+  canvas.width = image.width;
+  canvas.height = image.height;
+  paintRegions(canvas, image, regions);
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("The browser could not create the marked PNG.")),
+      "image/png"
+    );
+  });
+}
+function pictureBounds(element, width, height) {
+  const bounds = element.getBoundingClientRect();
+  if (!element.isConnected || bounds.width < 1 || bounds.height < 1) return;
+  const fit = element.ownerDocument.defaultView?.getComputedStyle(element).objectFit;
+  if (fit === "fill") return bounds;
+  if (fit !== "contain" || width < 1 || height < 1) return;
+  const scale = Math.min(bounds.width / width, bounds.height / height);
+  return new DOMRect(
+    bounds.x + (bounds.width - width * scale) / 2,
+    bounds.y + (bounds.height - height * scale) / 2,
+    width * scale,
+    height * scale
+  );
+}
+function frameBounds({ element, target, image }, frame) {
+  const bounds = target.kind === "media" ? pictureBounds(element, image.width, image.height) : element.getBoundingClientRect();
+  if (!bounds) return;
+  const full = screenBounds(element, bounds, frame);
+  const visible = screenBounds(element, bounds, frame, true);
+  if (full && visible) return { full, visible };
+}
+function useCaptureBounds(capture, frame) {
+  const [measurement, setMeasurement] = useState();
+  useLayoutEffect(() => {
+    if (!capture) return;
+    const owner = capture.element.ownerDocument;
+    const update = () => setMeasurement({ capture, bounds: frameBounds(capture, frame) });
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(capture.element);
+    if (frame) observer.observe(frame);
+    document.addEventListener("scroll", update, true);
+    if (owner !== document) owner.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("scroll", update, true);
+      if (owner !== document) owner.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [capture, frame]);
+  if (measurement?.capture === capture) return measurement?.bounds;
+}
+function AnnotationEditor({
+  capture,
+  regions,
+  onChange,
+  tool,
+  bounds,
+  pagePreview
+}) {
+  const { image } = capture;
+  const [preview, setPreview] = useState();
+  const drag = useRef2(void 0);
+  const canvas = useRef2(null);
+  const onTarget = Boolean(bounds);
+  const activeMark = preview ?? pagePreview;
+  const full = bounds?.full;
+  const visible = bounds?.visible;
+  useEffect2(() => {
+    if (canvas.current)
+      paintRegions(
+        canvas.current,
+        image,
+        activeMark ? [...regions, activeMark] : regions,
+        !onTarget
+      );
+  }, [image, activeMark, regions, onTarget]);
+  function endDrag() {
+    drag.current = void 0;
+    setPreview(void 0);
+  }
+  const canAdd = regions.length < maxRegions;
+  const canMarkFrame = canAdd && !regions.some(({ kind }) => kind === "frame");
+  function addFrame() {
+    if (canMarkFrame) onChange([...regions, { kind: "frame" }]);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "magic-edit-annotation", children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvas,
+        width: image.width,
+        height: image.height,
+        "aria-label": "Numbered annotations",
+        "data-tool": tool,
+        "data-on-target": bounds ? "true" : void 0,
+        style: full && visible && {
+          left: full.left,
+          top: full.top,
+          width: full.width,
+          height: full.height,
+          clipPath: `inset(${visible.top - full.top}px ${full.right - visible.right}px ${full.bottom - visible.bottom}px ${visible.left - full.left}px)`
+        },
+        onPointerDown: (event) => {
+          if (!canAdd || !event.isPrimary || event.button !== 0 || drag.current) return;
+          if (tool === "select") {
+            addFrame();
+            return;
+          }
+          const point = pointInBounds(event, event.currentTarget.getBoundingClientRect());
+          const region = startRegion(tool, point);
+          event.currentTarget.setPointerCapture(event.pointerId);
+          drag.current = { pointerId: event.pointerId, region };
+          setPreview(region);
+        },
+        onPointerMove: (event) => {
+          const pending = drag.current;
+          if (pending?.pointerId !== event.pointerId) return;
+          pending.region = extendRegion(
+            pending.region,
+            pointInBounds(event, event.currentTarget.getBoundingClientRect())
+          );
+          setPreview(pending.region);
+        },
+        onPointerUp: (event) => {
+          const pending = drag.current;
+          if (pending?.pointerId !== event.pointerId) return;
+          const region = extendRegion(
+            pending.region,
+            pointInBounds(event, event.currentTarget.getBoundingClientRect())
+          );
+          endDrag();
+          if (canAdd && validRegion(region)) onChange([...regions, region]);
+        },
+        onPointerCancel: endDrag,
+        onLostPointerCapture: endDrag
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "magic-edit-actions", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: "Mark whole target",
+          variant: "text-tonal-sm",
+          width: "hug",
+          onClick: addFrame,
+          disabled: !canMarkFrame
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          label: "Undo mark",
+          variant: "text-ghost-sm",
+          width: "hug",
+          onClick: () => onChange(regions.slice(0, -1)),
+          disabled: regions.length === 0
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+        regions.length === 1 ? "1 mark" : `${regions.length} marks`,
+        !canAdd && " (limit reached)"
+      ] })
+    ] })
+  ] });
+}
+
+// packages/magic-edit/src/bridge.ts
+var sourceRequest = "vivix:magic-edit-source";
+function readMagicEditSource(owner) {
+  let source;
+  const detail = (value) => {
+    source = value;
+  };
+  owner.dispatchEvent(new CustomEvent(sourceRequest, { detail }));
+  return source;
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/util.js
+function resolveUrl(url, baseUrl) {
+  if (url.match(/^[a-z]+:\/\//i)) {
+    return url;
+  }
+  if (url.match(/^\/\//)) {
+    return window.location.protocol + url;
+  }
+  if (url.match(/^[a-z]+:/i)) {
+    return url;
+  }
+  const doc = document.implementation.createHTMLDocument();
+  const base = doc.createElement("base");
+  const a = doc.createElement("a");
+  doc.head.appendChild(base);
+  doc.body.appendChild(a);
+  if (baseUrl) {
+    base.href = baseUrl;
+  }
+  a.href = url;
+  return a.href;
+}
+var uuid = /* @__PURE__ */ (() => {
+  let counter = 0;
+  const random = () => (
+    // eslint-disable-next-line no-bitwise
+    `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
+  );
+  return () => {
+    counter += 1;
+    return `u${random()}${counter}`;
+  };
+})();
+function toArray(arrayLike) {
+  const arr = [];
+  for (let i = 0, l = arrayLike.length; i < l; i++) {
+    arr.push(arrayLike[i]);
+  }
+  return arr;
+}
+var styleProps = null;
+function getStyleProperties(options = {}) {
+  if (styleProps) {
+    return styleProps;
+  }
+  if (options.includeStyleProperties) {
+    styleProps = options.includeStyleProperties;
+    return styleProps;
+  }
+  styleProps = toArray(window.getComputedStyle(document.documentElement));
+  return styleProps;
+}
+function px(node, styleProperty) {
+  const win = node.ownerDocument.defaultView || window;
+  const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
+  return val ? parseFloat(val.replace("px", "")) : 0;
+}
+function getNodeWidth(node) {
+  const leftBorder = px(node, "border-left-width");
+  const rightBorder = px(node, "border-right-width");
+  return node.clientWidth + leftBorder + rightBorder;
+}
+function getNodeHeight(node) {
+  const topBorder = px(node, "border-top-width");
+  const bottomBorder = px(node, "border-bottom-width");
+  return node.clientHeight + topBorder + bottomBorder;
+}
+function getImageSize(targetNode, options = {}) {
+  const width = options.width || getNodeWidth(targetNode);
+  const height = options.height || getNodeHeight(targetNode);
+  return { width, height };
+}
+function getPixelRatio() {
+  let ratio;
+  let FINAL_PROCESS;
+  try {
+    FINAL_PROCESS = process;
+  } catch (e) {
+  }
+  const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
+  if (val) {
+    ratio = parseInt(val, 10);
+    if (Number.isNaN(ratio)) {
+      ratio = 1;
+    }
+  }
+  return ratio || window.devicePixelRatio || 1;
+}
+var canvasDimensionLimit = 16384;
+function checkCanvasDimensions(canvas) {
+  if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
+    if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
+      if (canvas.width > canvas.height) {
+        canvas.height *= canvasDimensionLimit / canvas.width;
+        canvas.width = canvasDimensionLimit;
+      } else {
+        canvas.width *= canvasDimensionLimit / canvas.height;
+        canvas.height = canvasDimensionLimit;
+      }
+    } else if (canvas.width > canvasDimensionLimit) {
+      canvas.height *= canvasDimensionLimit / canvas.width;
+      canvas.width = canvasDimensionLimit;
+    } else {
+      canvas.width *= canvasDimensionLimit / canvas.height;
+      canvas.height = canvasDimensionLimit;
+    }
+  }
+}
+function createImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      img.decode().then(() => {
+        requestAnimationFrame(() => resolve(img));
+      });
+    };
+    img.onerror = reject;
+    img.crossOrigin = "anonymous";
+    img.decoding = "async";
+    img.src = url;
+  });
+}
+async function svgToDataURL(svg) {
+  return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
+}
+async function nodeToDataURL(node, width, height) {
+  const xmlns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(xmlns, "svg");
+  const foreignObject = document.createElementNS(xmlns, "foreignObject");
+  svg.setAttribute("width", `${width}`);
+  svg.setAttribute("height", `${height}`);
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  foreignObject.setAttribute("width", "100%");
+  foreignObject.setAttribute("height", "100%");
+  foreignObject.setAttribute("x", "0");
+  foreignObject.setAttribute("y", "0");
+  foreignObject.setAttribute("externalResourcesRequired", "true");
+  svg.appendChild(foreignObject);
+  foreignObject.appendChild(node);
+  return svgToDataURL(svg);
+}
+var isInstanceOfElement = (node, instance) => {
+  if (node instanceof instance)
+    return true;
+  const nodePrototype = Object.getPrototypeOf(node);
+  if (nodePrototype === null)
+    return false;
+  return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
+};
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/clone-pseudos.js
+function formatCSSText(style) {
+  const content = style.getPropertyValue("content");
+  return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
+}
+function formatCSSProperties(style, options) {
+  return getStyleProperties(options).map((name) => {
+    const value = style.getPropertyValue(name);
+    const priority = style.getPropertyPriority(name);
+    return `${name}: ${value}${priority ? " !important" : ""};`;
+  }).join(" ");
+}
+function getPseudoElementStyle(className, pseudo, style, options) {
+  const selector = `.${className}:${pseudo}`;
+  const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
+  return document.createTextNode(`${selector}{${cssText}}`);
+}
+function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
+  const style = window.getComputedStyle(nativeNode, pseudo);
+  const content = style.getPropertyValue("content");
+  if (content === "" || content === "none") {
+    return;
+  }
+  const className = uuid();
+  try {
+    clonedNode.className = `${clonedNode.className} ${className}`;
+  } catch (err) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
+  clonedNode.appendChild(styleElement);
+}
+function clonePseudoElements(nativeNode, clonedNode, options) {
+  clonePseudoElement(nativeNode, clonedNode, ":before", options);
+  clonePseudoElement(nativeNode, clonedNode, ":after", options);
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/mimes.js
+var WOFF = "application/font-woff";
+var JPEG = "image/jpeg";
+var mimes = {
+  woff: WOFF,
+  woff2: WOFF,
+  ttf: "application/font-truetype",
+  eot: "application/vnd.ms-fontobject",
+  png: "image/png",
+  jpg: JPEG,
+  jpeg: JPEG,
+  gif: "image/gif",
+  tiff: "image/tiff",
+  svg: "image/svg+xml",
+  webp: "image/webp"
+};
+function getExtension(url) {
+  const match = /\.([^./]*?)$/g.exec(url);
+  return match ? match[1] : "";
+}
+function getMimeType(url) {
+  const extension = getExtension(url).toLowerCase();
+  return mimes[extension] || "";
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/dataurl.js
+function getContentFromDataUrl(dataURL) {
+  return dataURL.split(/,/)[1];
+}
+function isDataUrl(url) {
+  return url.search(/^(data:)/) !== -1;
+}
+function makeDataUrl(content, mimeType) {
+  return `data:${mimeType};base64,${content}`;
+}
+async function fetchAsDataURL(url, init, process2) {
+  const res = await fetch(url, init);
+  if (res.status === 404) {
+    throw new Error(`Resource "${res.url}" not found`);
+  }
+  const blob = await res.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = reject;
+    reader.onloadend = () => {
+      try {
+        resolve(process2({ res, result: reader.result }));
+      } catch (error) {
+        reject(error);
+      }
+    };
+    reader.readAsDataURL(blob);
+  });
+}
+var cache = {};
+function getCacheKey(url, contentType, includeQueryParams) {
+  let key = url.replace(/\?.*/, "");
+  if (includeQueryParams) {
+    key = url;
+  }
+  if (/ttf|otf|eot|woff2?/i.test(key)) {
+    key = key.replace(/.*\//, "");
+  }
+  return contentType ? `[${contentType}]${key}` : key;
+}
+async function resourceToDataURL(resourceUrl, contentType, options) {
+  const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
+  if (cache[cacheKey] != null) {
+    return cache[cacheKey];
+  }
+  if (options.cacheBust) {
+    resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
+  }
+  let dataURL;
+  try {
+    const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
+      if (!contentType) {
+        contentType = res.headers.get("Content-Type") || "";
+      }
+      return getContentFromDataUrl(result);
+    });
+    dataURL = makeDataUrl(content, contentType);
+  } catch (error) {
+    dataURL = options.imagePlaceholder || "";
+    let msg = `Failed to fetch resource: ${resourceUrl}`;
+    if (error) {
+      msg = typeof error === "string" ? error : error.message;
+    }
+    if (msg) {
+      console.warn(msg);
+    }
+  }
+  cache[cacheKey] = dataURL;
+  return dataURL;
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/clone-node.js
+async function cloneCanvasElement(canvas) {
+  const dataURL = canvas.toDataURL();
+  if (dataURL === "data:,") {
+    return canvas.cloneNode(false);
+  }
+  return createImage(dataURL);
+}
+async function cloneVideoElement(video, options) {
+  if (video.currentSrc) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = video.clientWidth;
+    canvas.height = video.clientHeight;
+    ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataURL2 = canvas.toDataURL();
+    return createImage(dataURL2);
+  }
+  const poster = video.poster;
+  const contentType = getMimeType(poster);
+  const dataURL = await resourceToDataURL(poster, contentType, options);
+  return createImage(dataURL);
+}
+async function cloneIFrameElement(iframe, options) {
+  var _a;
+  try {
+    if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
+      return await cloneNode(iframe.contentDocument.body, options, true);
+    }
+  } catch (_b) {
+  }
+  return iframe.cloneNode(false);
+}
+async function cloneSingleNode(node, options) {
+  if (isInstanceOfElement(node, HTMLCanvasElement)) {
+    return cloneCanvasElement(node);
+  }
+  if (isInstanceOfElement(node, HTMLVideoElement)) {
+    return cloneVideoElement(node, options);
+  }
+  if (isInstanceOfElement(node, HTMLIFrameElement)) {
+    return cloneIFrameElement(node, options);
+  }
+  return node.cloneNode(isSVGElement(node));
+}
+var isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
+var isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SVG";
+async function cloneChildren(nativeNode, clonedNode, options) {
+  var _a, _b;
+  if (isSVGElement(clonedNode)) {
+    return clonedNode;
+  }
+  let children = [];
+  if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
+    children = toArray(nativeNode.assignedNodes());
+  } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
+    children = toArray(nativeNode.contentDocument.body.childNodes);
+  } else {
+    children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+  }
+  if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
+    return clonedNode;
+  }
+  await children.reduce((deferred, child) => deferred.then(() => cloneNode(child, options)).then((clonedChild) => {
+    if (clonedChild) {
+      clonedNode.appendChild(clonedChild);
+    }
+  }), Promise.resolve());
+  return clonedNode;
+}
+function cloneCSSStyle(nativeNode, clonedNode, options) {
+  const targetStyle = clonedNode.style;
+  if (!targetStyle) {
+    return;
+  }
+  const sourceStyle = window.getComputedStyle(nativeNode);
+  if (sourceStyle.cssText) {
+    targetStyle.cssText = sourceStyle.cssText;
+    targetStyle.transformOrigin = sourceStyle.transformOrigin;
+  } else {
+    getStyleProperties(options).forEach((name) => {
+      let value = sourceStyle.getPropertyValue(name);
+      if (name === "font-size" && value.endsWith("px")) {
+        const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
+        value = `${reducedFont}px`;
+      }
+      if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") {
+        value = "block";
+      }
+      if (name === "d" && clonedNode.getAttribute("d")) {
+        value = `path(${clonedNode.getAttribute("d")})`;
+      }
+      targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+    });
+  }
+}
+function cloneInputValue(nativeNode, clonedNode) {
+  if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
+    clonedNode.innerHTML = nativeNode.value;
+  }
+  if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
+    clonedNode.setAttribute("value", nativeNode.value);
+  }
+}
+function cloneSelectValue(nativeNode, clonedNode) {
+  if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
+    const clonedSelect = clonedNode;
+    const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
+    if (selectedOption) {
+      selectedOption.setAttribute("selected", "");
+    }
+  }
+}
+function decorate(nativeNode, clonedNode, options) {
+  if (isInstanceOfElement(clonedNode, Element)) {
+    cloneCSSStyle(nativeNode, clonedNode, options);
+    clonePseudoElements(nativeNode, clonedNode, options);
+    cloneInputValue(nativeNode, clonedNode);
+    cloneSelectValue(nativeNode, clonedNode);
+  }
+  return clonedNode;
+}
+async function ensureSVGSymbols(clone, options) {
+  const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
+  if (uses.length === 0) {
+    return clone;
+  }
+  const processedDefs = {};
+  for (let i = 0; i < uses.length; i++) {
+    const use = uses[i];
+    const id = use.getAttribute("xlink:href");
+    if (id) {
+      const exist = clone.querySelector(id);
+      const definition = document.querySelector(id);
+      if (!exist && definition && !processedDefs[id]) {
+        processedDefs[id] = await cloneNode(definition, options, true);
+      }
+    }
+  }
+  const nodes = Object.values(processedDefs);
+  if (nodes.length) {
+    const ns = "http://www.w3.org/1999/xhtml";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("xmlns", ns);
+    svg.style.position = "absolute";
+    svg.style.width = "0";
+    svg.style.height = "0";
+    svg.style.overflow = "hidden";
+    svg.style.display = "none";
+    const defs = document.createElementNS(ns, "defs");
+    svg.appendChild(defs);
+    for (let i = 0; i < nodes.length; i++) {
+      defs.appendChild(nodes[i]);
+    }
+    clone.appendChild(svg);
+  }
+  return clone;
+}
+async function cloneNode(node, options, isRoot) {
+  if (!isRoot && options.filter && !options.filter(node)) {
+    return null;
+  }
+  return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/embed-resources.js
+var URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
+var URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+var FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+function toRegex(url) {
+  const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+}
+function parseURLs(cssText) {
+  const urls = [];
+  cssText.replace(URL_REGEX, (raw, quotation, url) => {
+    urls.push(url);
+    return raw;
+  });
+  return urls.filter((url) => !isDataUrl(url));
+}
+async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
+  try {
+    const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
+    const contentType = getMimeType(resourceURL);
+    let dataURL;
+    if (getContentFromUrl) {
+      const content = await getContentFromUrl(resolvedURL);
+      dataURL = makeDataUrl(content, contentType);
+    } else {
+      dataURL = await resourceToDataURL(resolvedURL, contentType, options);
+    }
+    return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
+  } catch (error) {
+  }
+  return cssText;
+}
+function filterPreferredFontFormat(str, { preferredFontFormat }) {
+  return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match) => {
+    while (true) {
+      const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
+      if (!format) {
+        return "";
+      }
+      if (format === preferredFontFormat) {
+        return `src: ${src};`;
+      }
+    }
+  });
+}
+function shouldEmbed(url) {
+  return url.search(URL_REGEX) !== -1;
+}
+async function embedResources(cssText, baseUrl, options) {
+  if (!shouldEmbed(cssText)) {
+    return cssText;
+  }
+  const filteredCSSText = filterPreferredFontFormat(cssText, options);
+  const urls = parseURLs(filteredCSSText);
+  return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/embed-images.js
+async function embedProp(propName, node, options) {
+  var _a;
+  const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
+  if (propValue) {
+    const cssString = await embedResources(propValue, null, options);
+    node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
+    return true;
+  }
+  return false;
+}
+async function embedBackground(clonedNode, options) {
+  ;
+  await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
+  await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
+}
+async function embedImageNode(clonedNode, options) {
+  const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
+  if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
+    return;
+  }
+  const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
+  const dataURL = await resourceToDataURL(url, getMimeType(url), options);
+  await new Promise((resolve, reject) => {
+    clonedNode.onload = resolve;
+    clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+      try {
+        resolve(options.onImageErrorHandler(...attributes));
+      } catch (error) {
+        reject(error);
+      }
+    } : reject;
+    const image = clonedNode;
+    if (image.decode) {
+      image.decode = resolve;
+    }
+    if (image.loading === "lazy") {
+      image.loading = "eager";
+    }
+    if (isImageElement) {
+      clonedNode.srcset = "";
+      clonedNode.src = dataURL;
+    } else {
+      clonedNode.href.baseVal = dataURL;
+    }
+  });
+}
+async function embedChildren(clonedNode, options) {
+  const children = toArray(clonedNode.childNodes);
+  const deferreds = children.map((child) => embedImages(child, options));
+  await Promise.all(deferreds).then(() => clonedNode);
+}
+async function embedImages(clonedNode, options) {
+  if (isInstanceOfElement(clonedNode, Element)) {
+    await embedBackground(clonedNode, options);
+    await embedImageNode(clonedNode, options);
+    await embedChildren(clonedNode, options);
+  }
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/apply-style.js
+function applyStyle(node, options) {
+  const { style } = node;
+  if (options.backgroundColor) {
+    style.backgroundColor = options.backgroundColor;
+  }
+  if (options.width) {
+    style.width = `${options.width}px`;
+  }
+  if (options.height) {
+    style.height = `${options.height}px`;
+  }
+  const manual = options.style;
+  if (manual != null) {
+    Object.keys(manual).forEach((key) => {
+      style[key] = manual[key];
+    });
+  }
+  return node;
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/embed-webfonts.js
+var cssFetchCache = {};
+async function fetchCSS(url) {
+  let cache2 = cssFetchCache[url];
+  if (cache2 != null) {
+    return cache2;
+  }
+  const res = await fetch(url);
+  const cssText = await res.text();
+  cache2 = { url, cssText };
+  cssFetchCache[url] = cache2;
+  return cache2;
+}
+async function embedFonts(data, options) {
+  let cssText = data.cssText;
+  const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
+  const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
+  const loadFonts = fontLocs.map(async (loc) => {
+    let url = loc.replace(regexUrl, "$1");
+    if (!url.startsWith("https://")) {
+      url = new URL(url, data.url).href;
+    }
+    return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
+      cssText = cssText.replace(loc, `url(${result})`);
+      return [loc, result];
+    });
+  });
+  return Promise.all(loadFonts).then(() => cssText);
+}
+function parseCSS(source) {
+  if (source == null) {
+    return [];
+  }
+  const result = [];
+  const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
+  let cssText = source.replace(commentsRegex, "");
+  const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+  while (true) {
+    const matches = keyframesRegex.exec(cssText);
+    if (matches === null) {
+      break;
+    }
+    result.push(matches[0]);
+  }
+  cssText = cssText.replace(keyframesRegex, "");
+  const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+  const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
+  const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
+  while (true) {
+    let matches = importRegex.exec(cssText);
+    if (matches === null) {
+      matches = unifiedRegex.exec(cssText);
+      if (matches === null) {
+        break;
+      } else {
+        importRegex.lastIndex = unifiedRegex.lastIndex;
+      }
+    } else {
+      unifiedRegex.lastIndex = importRegex.lastIndex;
+    }
+    result.push(matches[0]);
+  }
+  return result;
+}
+async function getCSSRules(styleSheets, options) {
+  const ret = [];
+  const deferreds = [];
+  styleSheets.forEach((sheet) => {
+    if ("cssRules" in sheet) {
+      try {
+        toArray(sheet.cssRules || []).forEach((item, index) => {
+          if (item.type === CSSRule.IMPORT_RULE) {
+            let importIndex = index + 1;
+            const url = item.href;
+            const deferred = fetchCSS(url).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+              try {
+                sheet.insertRule(rule, rule.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
+              } catch (error) {
+                console.error("Error inserting rule from remote css", {
+                  rule,
+                  error
+                });
+              }
+            })).catch((e) => {
+              console.error("Error loading remote css", e.toString());
+            });
+            deferreds.push(deferred);
+          }
+        });
+      } catch (e) {
+        const inline = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
+        if (sheet.href != null) {
+          deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+            inline.insertRule(rule, inline.cssRules.length);
+          })).catch((err) => {
+            console.error("Error loading remote stylesheet", err);
+          }));
+        }
+        console.error("Error inlining remote css file", e);
+      }
+    }
+  });
+  return Promise.all(deferreds).then(() => {
+    styleSheets.forEach((sheet) => {
+      if ("cssRules" in sheet) {
+        try {
+          toArray(sheet.cssRules || []).forEach((item) => {
+            ret.push(item);
+          });
+        } catch (e) {
+          console.error(`Error while reading CSS rules from ${sheet.href}`, e);
+        }
+      }
+    });
+    return ret;
+  });
+}
+function getWebFontRules(cssRules) {
+  return cssRules.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE).filter((rule) => shouldEmbed(rule.style.getPropertyValue("src")));
+}
+async function parseWebFontRules(node, options) {
+  if (node.ownerDocument == null) {
+    throw new Error("Provided element is not within a Document");
+  }
+  const styleSheets = toArray(node.ownerDocument.styleSheets);
+  const cssRules = await getCSSRules(styleSheets, options);
+  return getWebFontRules(cssRules);
+}
+function normalizeFontFamily(font) {
+  return font.trim().replace(/["']/g, "");
+}
+function getUsedFonts(node) {
+  const fonts = /* @__PURE__ */ new Set();
+  function traverse(node2) {
+    const fontFamily = node2.style.fontFamily || getComputedStyle(node2).fontFamily;
+    fontFamily.split(",").forEach((font) => {
+      fonts.add(normalizeFontFamily(font));
+    });
+    Array.from(node2.children).forEach((child) => {
+      if (child instanceof HTMLElement) {
+        traverse(child);
+      }
+    });
+  }
+  traverse(node);
+  return fonts;
+}
+async function getWebFontCSS(node, options) {
+  const rules = await parseWebFontRules(node, options);
+  const usedFonts = getUsedFonts(node);
+  const cssTexts = await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
+    const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
+    return embedResources(rule.cssText, baseUrl, options);
+  }));
+  return cssTexts.join("\n");
+}
+async function embedWebFonts(clonedNode, options) {
+  const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
+  if (cssText) {
+    const styleNode = document.createElement("style");
+    const sytleContent = document.createTextNode(cssText);
+    styleNode.appendChild(sytleContent);
+    if (clonedNode.firstChild) {
+      clonedNode.insertBefore(styleNode, clonedNode.firstChild);
+    } else {
+      clonedNode.appendChild(styleNode);
+    }
+  }
+}
+
+// node_modules/.pnpm/html-to-image@1.11.13/node_modules/html-to-image/es/index.js
+async function toSvg(node, options = {}) {
+  const { width, height } = getImageSize(node, options);
+  const clonedNode = await cloneNode(node, options, true);
+  await embedWebFonts(clonedNode, options);
+  await embedImages(clonedNode, options);
+  applyStyle(clonedNode, options);
+  const datauri = await nodeToDataURL(clonedNode, width, height);
+  return datauri;
+}
+async function toCanvas(node, options = {}) {
+  const { width, height } = getImageSize(node, options);
+  const svg = await toSvg(node, options);
+  const img = await createImage(svg);
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  const ratio = options.pixelRatio || getPixelRatio();
+  const canvasWidth = options.canvasWidth || width;
+  const canvasHeight = options.canvasHeight || height;
+  canvas.width = canvasWidth * ratio;
+  canvas.height = canvasHeight * ratio;
+  if (!options.skipAutoScale) {
+    checkCanvasDimensions(canvas);
+  }
+  canvas.style.width = `${canvasWidth}`;
+  canvas.style.height = `${canvasHeight}`;
+  if (options.backgroundColor) {
+    context.fillStyle = options.backgroundColor;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  context.drawImage(img, 0, 0, canvas.width, canvas.height);
+  return canvas;
+}
+
+// packages/magic-edit/src/capture.ts
+var maxCaptureEdge = 1600;
+function drawingContext(canvas) {
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Image capture is unavailable in this browser.");
+  return context;
+}
+function targetMedia(element) {
+  return element.localName === "video" || element.localName === "img" ? element : element.querySelector("video, img");
+}
+function captureMedia(element) {
+  const media = targetMedia(element);
+  if (!media) throw new Error("Open the target image or video before capturing it.");
+  const video = media.localName === "video" ? media : void 0;
+  const width = video ? video.videoWidth : media.naturalWidth;
+  const height = video ? video.videoHeight : media.naturalHeight;
+  if (!width || !height || video && (video.seeking || video.readyState < 2)) {
+    throw new Error("Wait for the image or video frame to load and try again.");
+  }
+  video?.pause();
+  const scale = Math.min(1, maxCaptureEdge / Math.max(width, height));
+  const image = document.createElement("canvas");
+  image.width = Math.max(1, Math.round(width * scale));
+  image.height = Math.max(1, Math.round(height * scale));
+  const context = drawingContext(image);
+  context.drawImage(media, 0, 0, image.width, image.height);
+  return { image, element: media, sourceTimeMs: video && Math.round(video.currentTime * 1e3) };
+}
+async function captureTarget({ element, ...target }) {
+  const { width, height } = element.getBoundingClientRect();
+  if (!element.isConnected || width < 1 || height < 1) {
+    throw new Error("Open a visible target before capturing it.");
+  }
+  let image;
+  let surface = element;
+  if (target.kind === "media") {
+    const media = captureMedia(element);
+    image = media.image;
+    surface = media.element;
+    target.sourceTimeMs ??= media.sourceTimeMs;
+  } else {
+    image = await toCanvas(element, {
+      pixelRatio: Math.min(1, maxCaptureEdge / Math.max(width, height)),
+      width,
+      height,
+      skipFonts: true,
+      includeQueryParams: true
+    });
+  }
+  try {
+    drawingContext(image).getImageData(0, 0, 1, 1);
+  } catch {
+    throw new Error(
+      "This source cannot be captured. Open a project-hosted image or video and retry."
+    );
+  }
+  return { image, target, element: surface };
+}
+
+// packages/magic-edit/src/client.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function message(error, fallback) {
+  return error instanceof Error ? error.message : fallback;
+}
+var interactive = 'button, a, input, textarea, select, [role="button"], [role="tab"], [role="radio"], [role="checkbox"], [role="slider"], [contenteditable]';
+function selectedElement(element, global) {
+  const owner = element.ownerDocument;
+  if (global && (element.closest('nav, [role="navigation"]') || owner === document && !element.closest("main")))
+    return;
+  const HTML = owner.defaultView?.HTMLElement;
+  if (!HTML) return;
+  const target = element.closest(interactive) ?? element.closest("video, img, canvas, [data-magic-edit-label]") ?? element.closest('h1, h2, h3, h4, h5, h6, p, li, figcaption, tr, [role="row"]') ?? (element instanceof HTML ? element : element.parentElement);
+  return target instanceof HTML && !target.matches('body, html, main, [role="main"]') ? target : void 0;
+}
+function pageTarget(element) {
+  const kind = element.localName === "video" || element.localName === "img" ? "media" : "surface";
+  const visibleText = kind === "surface" ? element.innerText.trim().replace(/\s+/g, " ").slice(0, 280) : "";
+  const label = (element.dataset.magicEditLabel || element.getAttribute("aria-label") || element.getAttribute("alt") || element.querySelector("h1, h2, h3, figcaption")?.textContent || visibleText || (kind === "media" ? "Media frame" : "Page selection")).trim().slice(0, 80);
+  return {
+    element,
+    kind,
+    id: crypto.randomUUID(),
+    label: label || "Page selection",
+    ...visibleText && visibleText !== label ? { visibleText } : {}
+  };
+}
+function markBounds(element, kind) {
+  const isMedia = kind === "media" || element.matches("video, img");
+  if (!isMedia) return element.getBoundingClientRect();
+  const media = targetMedia(element);
+  if (!media) return;
+  return "videoWidth" in media ? pictureBounds(media, media.videoWidth, media.videoHeight) : pictureBounds(media, media.naturalWidth, media.naturalHeight);
+}
+function download(image) {
+  const url = URL.createObjectURL(image);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "magic-edit.png";
+  link.click();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1e4);
+}
+function richRequest(instruction, image) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener("error", () => reject(reader.error));
+    reader.addEventListener("load", () => {
+      const container = document.createElement("div");
+      const text = document.createElement("pre");
+      text.textContent = instruction;
+      const preview = document.createElement("img");
+      preview.alt = "Marked frame";
+      preview.src = String(reader.result);
+      container.append(text, preview);
+      resolve(new Blob([container.outerHTML], { type: "text/html" }));
+    });
+    reader.readAsDataURL(image);
+  });
+}
+var copiedForChat = "Text and image copied. Paste into your agent chat.";
+async function copyRequest(instruction, image) {
+  try {
+    if (!navigator.clipboard || !globalThis.ClipboardItem) return false;
+    const html = image.then((blob) => richRequest(instruction, blob));
+    void html.catch(() => {
+    });
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        "text/plain": new Blob([instruction], { type: "text/plain" }),
+        "text/html": html,
+        "image/png": image
+      })
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function RequestActions({ prepared, onContinue }) {
+  const [copyStatus, setCopyStatus] = useState2(prepared.copied ? copiedForChat : "");
+  const [clipboardError, setClipboardError] = useState2(!prepared.copied);
+  const { instruction } = prepared;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("p", { className: "magic-edit-feedback", role: "status", children: copyStatus || "Ready to copy the instruction and marked image." }),
+    /* @__PURE__ */ jsxs2("div", { className: "magic-edit-actions", children: [
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          label: "Copy for Chat",
+          width: "hug",
+          onClick: async () => {
+            const copied = await copyRequest(instruction, Promise.resolve(prepared.image));
+            setCopyStatus(copied ? copiedForChat : "");
+            setClipboardError(!copied);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          label: "Download marked PNG",
+          variant: "text-tonal-sm",
+          width: "hug",
+          onClick: () => download(prepared.image)
+        }
+      ),
+      /* @__PURE__ */ jsx2(Button, { label: "New request", variant: "text-ghost-sm", width: "hug", onClick: onContinue })
+    ] }),
+    /* @__PURE__ */ jsxs2("details", { open: clipboardError || void 0, children: [
+      /* @__PURE__ */ jsx2("summary", { children: "Copy instruction separately" }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          label: "Copy instruction",
+          variant: "text-tonal-sm",
+          width: "hug",
+          onClick: async () => {
+            try {
+              await navigator.clipboard.writeText(instruction);
+              setCopyStatus("Instruction copied.");
+              setClipboardError(false);
+            } catch {
+              setClipboardError(true);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          className: "magic-edit-instruction",
+          "aria-label": "Instruction for your agent",
+          value: instruction,
+          readOnly: true,
+          rows: 5,
+          onFocus: (event) => event.currentTarget.select()
+        }
+      )
+    ] }),
+    clipboardError && /* @__PURE__ */ jsx2("p", { className: "magic-edit-feedback", role: "alert", children: "Could not copy the text and image together. Copy the instruction and download the image separately." })
+  ] });
+}
+function MagicEdit({
+  projectId,
+  targets,
+  tools: tools2,
+  global = false,
+  embeddedProject
+}) {
+  const [open, setOpen] = useState2(false);
+  const [tool, setTool] = useState2("select");
+  const [hovered, setHovered] = useState2();
+  const [choosing, setChoosing] = useState2(false);
+  const [choices, setChoices] = useState2([]);
+  const [selection, setSelection] = useState2();
+  const [capture, setCapture] = useState2();
+  const [regions, setRegions] = useState2([]);
+  const [pagePreview, setPagePreview] = useState2();
+  const [instruction, setInstruction] = useState2("");
+  const [prepared, setPrepared] = useState2();
+  const [work, setWork] = useState2();
+  const [error, setError] = useState2("");
+  const [frameDocument, setFrameDocument] = useState2();
+  const [toolbarSlot, setToolbarSlot] = useState2(null);
+  const dock = useRef3(null);
+  const composer = useRef3(null);
+  const effects = useRef3(null);
+  const triggerBounds = useRef3(void 0);
+  const prompt = useRef3(null);
+  const previousFocus = useRef3(null);
+  const captureRequest = useRef3(0);
+  const pageMark = useRef3(void 0);
+  const suppressClick = useRef3(void 0);
+  const frame = embeddedProject?.frame;
+  const embeddedId = embeddedProject?.projectId;
+  const captureBounds = useCaptureBounds(
+    open && !choosing && !prepared ? capture : void 0,
+    frame?.current
+  );
+  const anchor = captureBounds?.visible;
+  useLayoutEffect2(() => {
+    const panel = composer.current;
+    if (!panel || !anchor) return;
+    function place() {
+      if (!panel || !anchor) return;
+      const margin = 8;
+      const bottom = window.innerHeight - 68;
+      const width = panel.offsetWidth;
+      const height = panel.offsetHeight;
+      const centered = anchor.left + (anchor.width - width) / 2;
+      const above = anchor.top - height - margin;
+      const vertical = above >= margin ? above : Math.min(anchor.bottom + margin, bottom - height);
+      panel.style.left = `${Math.max(margin, Math.min(centered, window.innerWidth - width - margin))}px`;
+      panel.style.top = `${Math.max(margin, Math.min(vertical, bottom - height))}px`;
+    }
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(panel);
+    return () => {
+      observer.disconnect();
+      panel.style.removeProperty("left");
+      panel.style.removeProperty("top");
+    };
+  }, [anchor]);
+  function registeredTargets(owner) {
+    const candidates = owner === document ? targets?.() ?? [] : readMagicEditSource(owner)?.targets() ?? [];
+    return candidates.filter(({ element }) => element.ownerDocument === owner);
+  }
+  function availableTargets() {
+    return [
+      ...registeredTargets(document),
+      ...frameDocument ? registeredTargets(frameDocument) : []
+    ].filter(
+      ({ element }) => screenBounds(element, element.getBoundingClientRect(), frame?.current, true)
+    );
+  }
+  function inCurrentDocument(element) {
+    return element.isConnected && (element.ownerDocument === document || element.ownerDocument === embeddedDocument(frame?.current));
+  }
+  async function takeSnapshot(target, markWhole) {
+    if (!inCurrentDocument(target.element)) {
+      setError("The target is no longer in the active workbench. Select it again.");
+      return;
+    }
+    const request = ++captureRequest.current;
+    setSelection(target);
+    setCapture(void 0);
+    setRegions([]);
+    setError("");
+    setWork("capture");
+    try {
+      const frame2 = await captureTarget(target);
+      if (captureRequest.current === request) {
+        if (!inCurrentDocument(target.element)) {
+          setError("The target is no longer in the active workbench. Select it again.");
+          return;
+        }
+        setCapture(frame2);
+        if (markWhole) setRegions([{ kind: "frame" }]);
+      }
+    } catch (cause) {
+      if (captureRequest.current === request)
+        setError(message(cause, "The selected target could not be captured."));
+    } finally {
+      if (captureRequest.current === request) setWork(void 0);
+    }
+  }
+  function select(id) {
+    const target = availableTargets().find((choice) => choice.id === id);
+    if (target) void takeSnapshot(target, tool === "select");
+    else {
+      captureRequest.current += 1;
+      setCapture(void 0);
+      setRegions([]);
+      setWork(void 0);
+      setChoosing(true);
+      setError("This target is no longer visible. Select another one.");
+    }
+  }
+  function clearSelection() {
+    captureRequest.current += 1;
+    pageMark.current = void 0;
+    setPagePreview(void 0);
+    setPrepared(void 0);
+    setInstruction("");
+    setCapture(void 0);
+    setSelection(void 0);
+    setRegions([]);
+    setHovered(void 0);
+    setError("");
+    setWork(void 0);
+  }
+  function toggle(active) {
+    if (active) {
+      triggerBounds.current = dock.current?.querySelector("button")?.getBoundingClientRect();
+      const focused = document.activeElement === frame?.current ? frameDocument?.activeElement : document.activeElement;
+      previousFocus.current = focused ?? null;
+      setChoices(availableTargets());
+      setChoosing(true);
+      setOpen(true);
+      return;
+    }
+    if (work === "prepare") return;
+    clearSelection();
+    setChoosing(false);
+    setOpen(false);
+  }
+  useLayoutEffect2(() => {
+    const layer = effects.current;
+    const button = triggerBounds.current;
+    const surface = frame?.current ?? document.querySelector("main");
+    if (!open || !layer || !button || !surface) return;
+    const wave = playMagicEditWave(layer, surface.getBoundingClientRect(), button);
+    return () => wave?.abort();
+  }, [open, frame]);
+  function targetAt(element) {
+    const candidates = registeredTargets(element.ownerDocument);
+    for (let current = element; current; current = current.parentElement) {
+      const target = candidates.find((choice) => choice.element === current);
+      if (target) return target;
+    }
+  }
+  const onPageClick = useEffectEvent((event) => {
+    const clicked = elementNode(event.target);
+    if (event.detail && clicked && clicked.ownerDocument === suppressClick.current) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (!open || !choosing || work || !clicked || dock.current?.contains(clicked)) return;
+    const registered = targetAt(clicked);
+    const element = registered?.element ?? selectedElement(clicked, global);
+    if (!element) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setChoosing(false);
+    setHovered(void 0);
+    void takeSnapshot(registered ?? pageTarget(element), tool === "select");
+  });
+  const onPagePointerDown = useEffectEvent((event) => {
+    if (!open || !choosing || work || tool === "select" || !event.isPrimary || event.button !== 0)
+      return;
+    const clicked = elementNode(event.target);
+    if (!clicked || dock.current?.contains(clicked)) return;
+    const registered = targetAt(clicked);
+    const element = registered?.element ?? selectedElement(clicked, global);
+    if (!element) return;
+    const target = registered ?? pageTarget(element);
+    const bounds = markBounds(target.element, target.kind);
+    if (!bounds?.width || !bounds.height) return;
+    event.preventDefault();
+    event.stopPropagation();
+    clicked.setPointerCapture(event.pointerId);
+    const region = startRegion(tool, pointInBounds(event, bounds));
+    pageMark.current = { owner: clicked.ownerDocument, pointerId: event.pointerId, bounds, region };
+    setPagePreview(region);
+    setChoosing(false);
+    setHovered(void 0);
+    void takeSnapshot(target, false);
+  });
+  const onPointerMove = useEffectEvent((event) => {
+    const pending = pageMark.current;
+    if (pending?.pointerId === event.pointerId) {
+      event.preventDefault();
+      event.stopPropagation();
+      pending.region = extendRegion(pending.region, pointInBounds(event, pending.bounds));
+      setPagePreview(pending.region);
+      return;
+    }
+    if (!choosing || tool !== "select") return;
+    const pointed = elementNode(event.target);
+    if (!pointed || dock.current?.contains(pointed)) {
+      setHovered(void 0);
+      return;
+    }
+    const registered = targetAt(pointed);
+    const element = registered?.element ?? selectedElement(pointed, global);
+    const bounds = element && markBounds(element, registered?.kind);
+    const next = element && bounds && screenBounds(element, bounds, frame?.current, true);
+    setHovered(
+      (previous) => previous?.x === next?.x && previous?.y === next?.y && previous?.width === next?.width && previous?.height === next?.height ? previous : next
+    );
+  });
+  const onPagePointerEnd = useEffectEvent((event) => {
+    const pending = pageMark.current;
+    if (pending?.pointerId !== event.pointerId) return;
+    event.preventDefault();
+    event.stopPropagation();
+    pageMark.current = void 0;
+    setPagePreview(void 0);
+    if (event.type !== "pointerup") return;
+    suppressClick.current = pending.owner;
+    window.setTimeout(() => {
+      if (suppressClick.current === pending.owner) suppressClick.current = void 0;
+    }, 0);
+    const region = extendRegion(pending.region, pointInBounds(event, pending.bounds));
+    if (validRegion(region)) setRegions([region]);
+  });
+  const onShortcut = useEffectEvent((event) => {
+    if (open && event.key === "Escape" && !event.defaultPrevented) {
+      if (selection && !prepared && work !== "prepare") {
+        clearSelection();
+        setChoosing(true);
+        dock.current?.querySelector('[aria-pressed="true"]')?.focus();
+      } else toggle(false);
+      event.preventDefault();
+      return;
+    }
+    const target = elementNode(event.target);
+    const modal = 'dialog[open], [role="dialog"][aria-modal="true"]';
+    if (open || event.defaultPrevented || event.repeat || event.isComposing || event.key.toLowerCase() !== "c" || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || document.querySelector(modal) || target?.ownerDocument.querySelector(modal)) {
+      return;
+    }
+    if (target && (target.closest(
+      'input, textarea, select, .ProseMirror, [role="textbox"], [role="combobox"], [role="dialog"], [role="alertdialog"]'
+    ) || target.isContentEditable)) {
+      return;
+    }
+    event.preventDefault();
+    toggle(true);
+    requestAnimationFrame(
+      () => dock.current?.querySelector('[aria-pressed="true"]')?.focus()
+    );
+  });
+  const onTargetGone = useEffectEvent(() => {
+    if (prepared) return;
+    captureRequest.current += 1;
+    pageMark.current = void 0;
+    setPagePreview(void 0);
+    setSelection(void 0);
+    setCapture(void 0);
+    setRegions([]);
+    setWork(void 0);
+    setHovered(void 0);
+    setChoosing(open);
+  });
+  const onFrameChanged = useEffectEvent((owner) => {
+    if (selection?.element.ownerDocument === owner) onTargetGone();
+  });
+  useEffect3(() => {
+    const iframe = frame?.current;
+    const clear = () => setHovered(void 0);
+    function listen(owner2) {
+      owner2.addEventListener("keydown", onShortcut);
+      owner2.addEventListener("click", onPageClick, true);
+      owner2.addEventListener("pointerdown", onPagePointerDown, true);
+      owner2.addEventListener("pointermove", onPointerMove, true);
+      owner2.addEventListener("pointerup", onPagePointerEnd, true);
+      owner2.addEventListener("pointercancel", onPagePointerEnd, true);
+      owner2.addEventListener("scroll", clear, true);
+      owner2.defaultView?.addEventListener("resize", clear);
+      return () => {
+        owner2.removeEventListener("keydown", onShortcut);
+        owner2.removeEventListener("click", onPageClick, true);
+        owner2.removeEventListener("pointerdown", onPagePointerDown, true);
+        owner2.removeEventListener("pointermove", onPointerMove, true);
+        owner2.removeEventListener("pointerup", onPagePointerEnd, true);
+        owner2.removeEventListener("pointercancel", onPagePointerEnd, true);
+        owner2.removeEventListener("scroll", clear, true);
+        owner2.defaultView?.removeEventListener("resize", clear);
+      };
+    }
+    const stopHome = listen(document);
+    let owner;
+    let stopProject;
+    function attachProject() {
+      const next = embeddedDocument(iframe);
+      if (owner === next) return;
+      stopProject?.();
+      if (owner) onFrameChanged(owner);
+      owner = next;
+      stopProject = next ? listen(next) : void 0;
+      setFrameDocument(next);
+      clear();
+    }
+    attachProject();
+    iframe?.addEventListener("load", attachProject);
+    return () => {
+      stopHome();
+      stopProject?.();
+      iframe?.removeEventListener("load", attachProject);
+    };
+  }, [frame, embeddedId]);
+  useEffect3(() => {
+    if (!selection) return;
+    const element = selection.element;
+    const observer = new MutationObserver(() => {
+      if (!element.isConnected) onTargetGone();
+    });
+    observer.observe(element.ownerDocument, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [selection]);
+  useEffect3(() => {
+    if (open || !previousFocus.current) return;
+    const restore = previousFocus.current;
+    previousFocus.current = null;
+    const frame2 = requestAnimationFrame(() => {
+      if (restore.isConnected && restore !== restore.ownerDocument.body)
+        restore.focus({ preventScroll: true });
+      if (restore.ownerDocument.activeElement !== restore || restore === restore.ownerDocument.body)
+        dock.current?.querySelector("button")?.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame2);
+  }, [open]);
+  useEffect3(() => {
+    if (capture && open && !choosing && !prepared && !pagePreview)
+      prompt.current?.focus({ preventScroll: true });
+  }, [capture, open, choosing, prepared, pagePreview]);
+  async function prepare() {
+    if (!capture || !regions.length || !instruction.trim() || work) return;
+    if (!inCurrentDocument(capture.element)) {
+      setError("The target is no longer in the active workbench. Select it again.");
+      return;
+    }
+    const request = captureRequest.current;
+    setWork("prepare");
+    setError("");
+    try {
+      const { width: imageWidth, height: imageHeight } = capture.image;
+      const text = handoffText({
+        projectId: capture.element.ownerDocument === document ? projectId ?? capture.element.closest("[data-magic-edit-project]")?.dataset.magicEditProject : embeddedId,
+        target: capture.target,
+        instruction: instruction.trim(),
+        regions,
+        frame: { width: imageWidth, height: imageHeight }
+      });
+      const imageRequest = markedPng(capture.image, regions);
+      const [image, copied] = await Promise.all([imageRequest, copyRequest(text, imageRequest)]);
+      if (request !== captureRequest.current) return;
+      setPrepared({ image, copied, instruction: text });
+    } catch (cause) {
+      if (request === captureRequest.current)
+        setError(
+          message(cause, "Could not create the marked image. Your instruction is still here.")
+        );
+    } finally {
+      if (request === captureRequest.current) setWork(void 0);
+    }
+  }
+  const capturedTime = capture && formatTargetTime(capture.target);
+  const mountProjectTools = open && frameDocument && readMagicEditSource(frameDocument)?.mountTools;
+  const projectToolTarget = !choosing && capture?.element.ownerDocument === frameDocument ? capture?.target : void 0;
+  const projectRegionCount = projectToolTarget ? regions.length : 0;
+  const disabled = work !== void 0;
+  useEffect3(() => {
+    if (!mountProjectTools) return;
+    return () => mountProjectTools(null);
+  }, [mountProjectTools]);
+  useEffect3(() => {
+    if (!mountProjectTools || !toolbarSlot) return;
+    mountProjectTools({
+      element: toolbarSlot,
+      props: { target: projectToolTarget ?? null, regionCount: projectRegionCount, disabled }
+    });
+  }, [mountProjectTools, toolbarSlot, projectToolTarget, projectRegionCount, disabled]);
+  return /* @__PURE__ */ jsxs2("div", { className: "magic-edit", ref: dock, "data-vivix-magic-edit-global": global || void 0, children: [
+    /* @__PURE__ */ jsx2("div", { ref: effects, className: "magic-edit-effects", "data-active": open, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("div", { className: "magic-edit-glow" }) }),
+    open && choosing && hovered && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "magic-edit-highlight",
+        "aria-hidden": "true",
+        style: {
+          left: hovered.left,
+          top: hovered.top,
+          width: hovered.width,
+          height: hovered.height
+        }
+      }
+    ),
+    open && /* @__PURE__ */ jsxs2(
+      "section",
+      {
+        ref: composer,
+        className: "magic-edit-content",
+        "aria-label": "Magic Edit",
+        "data-anchored": anchor ? "" : void 0,
+        "data-gesture": pagePreview ? "" : void 0,
+        "data-picking": choosing && !error && !work && !prepared ? "" : void 0,
+        children: [
+          prepared ? /* @__PURE__ */ jsx2(
+            RequestActions,
+            {
+              prepared,
+              onContinue: () => {
+                clearSelection();
+                setChoosing(true);
+              }
+            }
+          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            choosing && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2("p", { className: "magic-edit-feedback", children: tool === "select" ? "Select an element." : "Drag over the area to mark." }),
+              choices.length > 0 && /* @__PURE__ */ jsx2("div", { className: "magic-edit-actions", children: /* @__PURE__ */ jsxs2(
+                "select",
+                {
+                  className: "magic-edit-select",
+                  "aria-label": "Magic Edit target",
+                  value: "",
+                  onFocus: () => setChoices(availableTargets()),
+                  onChange: (event) => {
+                    setChoosing(false);
+                    setHovered(void 0);
+                    select(event.target.value);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2("option", { value: "", children: "Choose a target" }),
+                    choices.map((target) => /* @__PURE__ */ jsx2("option", { value: target.id, children: target.label }, target.id))
+                  ]
+                }
+              ) })
+            ] }),
+            work === "capture" && /* @__PURE__ */ jsx2("p", { role: "status", children: "Capturing target\u2026" }),
+            !choosing && !capture && selection && !work && /* @__PURE__ */ jsxs2("div", { className: "magic-edit-actions", children: [
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  label: "Retry capture",
+                  width: "hug",
+                  onClick: () => void takeSnapshot(selection, tool === "select")
+                }
+              ),
+              /* @__PURE__ */ jsx2(Button, { label: "Change target", width: "hug", onClick: () => setChoosing(true) })
+            ] }),
+            capture && !choosing && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsxs2("div", { className: "magic-edit-actions magic-edit-target", children: [
+                /* @__PURE__ */ jsxs2("span", { title: capture.target.label, children: [
+                  capture.target.label,
+                  capturedTime && ` \xB7 ${capturedTime}`
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  Button,
+                  {
+                    label: "Change target",
+                    variant: "text-ghost-sm",
+                    width: "hug",
+                    disabled: work !== void 0,
+                    onClick: () => {
+                      setChoices(availableTargets());
+                      setChoosing(true);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "fieldset",
+                {
+                  className: "magic-edit-marking",
+                  "aria-label": "Mark the target",
+                  disabled: work === "prepare",
+                  children: /* @__PURE__ */ jsx2(
+                    AnnotationEditor,
+                    {
+                      capture,
+                      bounds: captureBounds,
+                      tool,
+                      regions,
+                      pagePreview,
+                      onChange: setRegions
+                    },
+                    tool
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "form",
+                {
+                  className: "magic-edit-prompt",
+                  "aria-label": "Magic Edit instruction",
+                  onSubmit: (event) => {
+                    event.preventDefault();
+                    void prepare();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2("span", { className: "magic-edit-prompt-tag", children: capture.target.kind === "media" ? "Frame" : "Selection" }),
+                    /* @__PURE__ */ jsx2(
+                      "input",
+                      {
+                        ref: prompt,
+                        "aria-label": "What should change?",
+                        value: instruction,
+                        maxLength: 4e3,
+                        disabled: work === "prepare",
+                        placeholder: "Describe the change",
+                        onChange: (event) => setInstruction(event.target.value)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      Button,
+                      {
+                        label: "Copy for Chat",
+                        type: "submit",
+                        width: "hug",
+                        loading: work === "prepare",
+                        disabled: !regions.length || !instruction.trim() || work !== void 0
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx2("p", { className: "magic-edit-feedback magic-edit-error", role: "alert", children: error })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      AnnotationToolbar,
+      {
+        active: open,
+        tool,
+        actions: /* @__PURE__ */ jsxs2(Fragment, { children: [
+          tools2?.map(({ id, component: Tool }) => /* @__PURE__ */ jsx2(
+            Tool,
+            {
+              target: choosing ? null : capture?.target ?? null,
+              regionCount: choosing ? 0 : regions.length,
+              disabled
+            },
+            id
+          )),
+          mountProjectTools && /* @__PURE__ */ jsx2("span", { className: "magic-edit-project-tools", ref: setToolbarSlot })
+        ] }),
+        onActiveChange: toggle,
+        onToolChange: (next) => {
+          setHovered(void 0);
+          setTool(next);
+        }
+      }
+    )
+  ] });
+}
+function activate(client) {
+  client.registerUI({
+    id: "magic-edit.panel",
+    title: "Magic Edit",
+    kind: "component",
+    component: (props) => /* @__PURE__ */ jsx2(
+      MagicEdit,
+      {
+        ...props,
+        projectId: client.scope?.kind === "user" ? void 0 : client.project.id
+      }
+    )
+  });
+}
+export {
+  activate as default
+};