@pictor-sdk/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,4620 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AddPhotoPanel: () => AddPhotoPanel,
+  AdjustPanel: () => AdjustPanel,
+  CanvasStage: () => CanvasStage,
+  CropGestureSurface: () => CropGestureSurface,
+  CropGrid: () => CropGrid,
+  CropPanel: () => CropPanel,
+  DEFAULT_BRUSH: () => DEFAULT_BRUSH,
+  DrawPanel: () => DrawPanel,
+  DrawingSurface: () => DrawingSurface,
+  Editor: () => Editor,
+  EditorGestures: () => EditorGestures,
+  FilterStrip: () => FilterStrip,
+  HostCallbacksProvider: () => HostCallbacksProvider,
+  InteractionGuides: () => InteractionGuides,
+  InteractionProvider: () => InteractionProvider,
+  InvalidImageResultError: () => InvalidImageResultError,
+  LayerGestureSurface: () => LayerGestureSurface,
+  LayersPanel: () => LayersPanel,
+  LayoutPanel: () => LayoutPanel,
+  MediaPanel: () => MediaPanel,
+  POST_PROFILE: () => import_core34.POST_PROFILE,
+  STORY_PROFILE: () => import_core34.STORY_PROFILE,
+  STRAIGHTEN_LIMIT: () => STRAIGHTEN_LIMIT,
+  Slider: () => Slider,
+  StickerPanel: () => StickerPanel,
+  StoryMediaGestureSurface: () => StoryMediaGestureSurface,
+  StraightenRuler: () => StraightenRuler,
+  TextComposer: () => TextComposer,
+  TextComposerHost: () => TextComposerHost,
+  TextPanel: () => TextPanel,
+  ThemeContext: () => ThemeContext,
+  ToolPanelHost: () => ToolPanelHost,
+  ToolRail: () => ToolRail,
+  TopBar: () => TopBar,
+  UiStateProvider: () => UiStateProvider,
+  canvasSizeForAspect: () => canvasSizeForAspect,
+  cellToTransformPatch: () => cellToTransformPatch,
+  centeredCropForAspect: () => centeredCropForAspect,
+  createAddPhotoController: () => createAddPhotoController,
+  createDrawController: () => createDrawController,
+  createGestureController: () => createGestureController,
+  createUiStateStore: () => createUiStateStore,
+  defaultTheme: () => defaultTheme,
+  layoutCells: () => layoutCells,
+  mergeSlots: () => mergeSlots,
+  mergeTheme: () => mergeTheme,
+  radiansToStraighten: () => radiansToStraighten,
+  resolveGestureSurface: () => resolveGestureSurface,
+  resolvePanel: () => resolvePanel,
+  straightenToRadians: () => straightenToRadians,
+  useBaseImageLayer: () => useBaseImageLayer,
+  useBaseMediaLayer: () => useBaseMediaLayer,
+  useHostCallbacks: () => useHostCallbacks,
+  useInteractionState: () => useInteractionState,
+  useTargetImageLayer: () => useTargetImageLayer,
+  useTextSession: () => useTextSession,
+  useTheme: () => useTheme,
+  useUiState: () => useUiState
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Editor.tsx
+var import_core30 = require("@pictor-sdk/core");
+var import_skia10 = require("@pictor-sdk/skia");
+var import_react22 = __toESM(require("react"));
+var import_react_native27 = require("react-native");
+var import_react_native_gesture_handler8 = require("react-native-gesture-handler");
+
+// src/hostCallbacks.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Context = (0, import_react.createContext)(null);
+function HostCallbacksProvider({
+  value,
+  children
+}) {
+  const ref = (0, import_react.useRef)(value);
+  ref.current = value;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value: ref, children });
+}
+function useHostCallbacks() {
+  const fallback = (0, import_react.useRef)({});
+  return (0, import_react.useContext)(Context) ?? fallback;
+}
+
+// src/gestures/DrawingSurface.tsx
+var import_core2 = require("@pictor-sdk/core");
+var import_skia = require("@pictor-sdk/skia");
+var import_react3 = require("react");
+var import_react_native = require("react-native");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets = require("react-native-worklets");
+
+// src/uiState.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createUiStateStore() {
+  const values = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: (key, fallback) => values.has(key) ? values.get(key) : fallback,
+    set(key, value) {
+      values.set(key, value);
+      for (const l of [...listeners]) l();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var UiStateContext = (0, import_react2.createContext)(null);
+function UiStateProvider({ children }) {
+  const ref = (0, import_react2.useRef)(null);
+  if (!ref.current) ref.current = createUiStateStore();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UiStateContext.Provider, { value: ref.current, children });
+}
+function useUiState(key, fallback) {
+  const store = (0, import_react2.useContext)(UiStateContext);
+  if (!store) throw new Error("useUiState must be used inside <Editor> (UiStateProvider)");
+  const value = (0, import_react2.useSyncExternalStore)(
+    store.subscribe,
+    () => store.get(key, fallback),
+    () => store.get(key, fallback)
+  );
+  const set = (0, import_react2.useCallback)((v) => store.set(key, v), [store, key]);
+  return [value, set];
+}
+
+// src/gestures/drawController.ts
+var import_core = require("@pictor-sdk/core");
+function createDrawController(store, getMetrics, getBrush) {
+  let drawing = false;
+  let layerId = null;
+  let points = [];
+  let baseStrokes = [];
+  function toDocPoint(xDp, yDp) {
+    const metrics = getMetrics();
+    if (!metrics || metrics.width === 0 || metrics.height === 0) return null;
+    return { x: xDp / metrics.width, y: yDp / metrics.height };
+  }
+  function ensureDrawLayer() {
+    const doc = store.getState().document;
+    for (let i = doc.layers.length - 1; i >= 0; i--) {
+      const layer = doc.layers[i];
+      if (layer.type === "draw" && !layer.locked && !layer.hidden) return layer.id;
+    }
+    const id = (0, import_core.createId)("draw");
+    store.dispatch({
+      type: "layer/add",
+      layer: {
+        id,
+        type: "draw",
+        transform: { x: 0.5, y: 0.5, scale: 1, rotation: 0 },
+        opacity: 1,
+        blendMode: "normal",
+        data: { strokes: [] }
+      }
+    });
+    return id;
+  }
+  function currentStroke() {
+    const brush = getBrush();
+    return { points, color: brush.color, width: brush.width, brush: brush.brush };
+  }
+  function patch() {
+    if (!layerId) return;
+    store.dispatch({
+      type: "layer/patchData",
+      id: layerId,
+      patch: { strokes: [...baseStrokes, currentStroke()] }
+    });
+  }
+  return {
+    begin(xDp, yDp) {
+      const point = toDocPoint(xDp, yDp);
+      if (!point || drawing) return;
+      drawing = true;
+      store.dispatch({ type: "history/beginBatch", label: "draw" });
+      layerId = ensureDrawLayer();
+      const layer = store.getState().document.layers.find((l) => l.id === layerId);
+      baseStrokes = layer?.data?.strokes ?? [];
+      points = [point];
+      patch();
+    },
+    move(xDp, yDp) {
+      if (!drawing) return;
+      const point = toDocPoint(xDp, yDp);
+      if (!point) return;
+      const last = points[points.length - 1];
+      if (last && Math.hypot(point.x - last.x, point.y - last.y) < 3e-3) return;
+      points = [...points, point];
+      patch();
+    },
+    end() {
+      if (!drawing) return;
+      drawing = false;
+      store.dispatch({ type: "history/endBatch" });
+      layerId = null;
+      points = [];
+      baseStrokes = [];
+    },
+    isDrawing: () => drawing
+  };
+}
+
+// src/gestures/DrawingSurface.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_BRUSH = { brush: "pen", color: "#ffffff", width: 0.012 };
+function DrawingSurface() {
+  const store = (0, import_core2.useEditorStore)();
+  const { document } = (0, import_core2.useEditor)();
+  const renderer = (0, import_skia.useRenderer)();
+  const metrics = (0, import_skia.useCanvasMetrics)();
+  const metricsRef = (0, import_react3.useRef)(metrics);
+  metricsRef.current = metrics;
+  const [brush, setBrush] = useUiState("draw.brush", DEFAULT_BRUSH);
+  const [eyedropper, setEyedropper] = useUiState("draw.eyedropper", false);
+  const brushRef = (0, import_react3.useRef)(brush);
+  brushRef.current = brush;
+  const stateRef = (0, import_react3.useRef)({ eyedropper, document, setBrush, setEyedropper });
+  stateRef.current = { eyedropper, document, setBrush, setEyedropper };
+  const controller = (0, import_react3.useMemo)(
+    () => createDrawController(store, () => metricsRef.current, () => brushRef.current),
+    [store]
+  );
+  const gesture = (0, import_react3.useMemo)(() => {
+    const sample = async (x, y) => {
+      const m = metricsRef.current;
+      const s = stateRef.current;
+      if (!m || !s.eyedropper) return;
+      const color = await (0, import_skia.samplePixelColor)(renderer, s.document, {
+        x: x / m.width,
+        y: y / m.height
+      });
+      if (color) s.setBrush({ ...brushRef.current, color });
+      s.setEyedropper(false);
+    };
+    const beginOrSample = (x, y) => {
+      if (stateRef.current.eyedropper) {
+        void sample(x, y);
+      } else {
+        controller.begin(x, y);
+      }
+    };
+    return import_react_native_gesture_handler.Gesture.Pan().minDistance(0).onStart((e) => {
+      "worklet";
+      (0, import_react_native_worklets.runOnJS)(beginOrSample)(e.x, e.y);
+    }).onUpdate((e) => {
+      "worklet";
+      (0, import_react_native_worklets.runOnJS)(controller.move)(e.x, e.y);
+    }).onFinalize(() => {
+      "worklet";
+      (0, import_react_native_worklets.runOnJS)(controller.end)();
+    });
+  }, [controller, renderer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_reanimated.default.View, { style: import_react_native.StyleSheet.absoluteFill }) });
+}
+
+// src/gestures/CropGestureSurface.tsx
+var import_core5 = require("@pictor-sdk/core");
+var import_skia2 = require("@pictor-sdk/skia");
+var import_react6 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
+var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets2 = require("react-native-worklets");
+
+// src/panels/useTargetImageLayer.ts
+var import_core3 = require("@pictor-sdk/core");
+var import_react4 = require("react");
+function useTargetImageLayer() {
+  const { document, selection } = (0, import_core3.useEditor)();
+  const pinned = (0, import_react4.useRef)(null);
+  if (pinned.current === null) {
+    pinned.current = (0, import_core3.resolveTargetImageLayer)(document, selection)?.id ?? null;
+  }
+  return (0, import_core3.pinnedTargetImageLayer)(document, pinned.current) ?? null;
+}
+
+// src/gestures/CropGestureSurface.tsx
+var import_core6 = require("@pictor-sdk/core");
+
+// src/gestures/interactionState.tsx
+var import_core4 = require("@pictor-sdk/core");
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Context2 = (0, import_react5.createContext)(null);
+function InteractionProvider({ children }) {
+  const [preview, setPreviewValue] = (0, import_react5.useState)(null);
+  const [cropActive, setCropActive] = (0, import_react5.useState)(false);
+  const [layerDragActive, setLayerDragActive] = (0, import_react5.useState)(false);
+  const [overDeleteTarget, setOverDeleteTarget] = (0, import_react5.useState)(false);
+  const [snap, setSnapValue] = (0, import_react5.useState)(import_core4.NO_SNAP);
+  const setPreview = (0, import_react5.useCallback)((value2) => setPreviewValue(value2), []);
+  const setSnap = (0, import_react5.useCallback)((value2) => {
+    setSnapValue(
+      (current) => current.centerX === value2.centerX && current.centerY === value2.centerY && current.rotation === value2.rotation ? current : value2
+    );
+  }, []);
+  const value = (0, import_react5.useMemo)(
+    () => ({
+      previews: preview ? [preview] : [],
+      setPreview,
+      cropActive,
+      setCropActive,
+      layerDragActive,
+      setLayerDragActive,
+      overDeleteTarget,
+      setOverDeleteTarget,
+      snap,
+      setSnap
+    }),
+    [preview, setPreview, cropActive, layerDragActive, overDeleteTarget, snap, setSnap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Context2.Provider, { value, children });
+}
+function useInteractionState() {
+  const value = (0, import_react5.useContext)(Context2);
+  if (!value) throw new Error("interaction components must be used inside <Editor>");
+  return value;
+}
+
+// src/gestures/CropGestureSurface.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function CropGestureSurface({ fit, maxScale, rotationEnabled, onInteractionChange }) {
+  const { document, dispatch, profile } = (0, import_core6.useEditor)();
+  const layer = useTargetImageLayer();
+  const metrics = (0, import_skia2.useCanvasMetrics)();
+  const interaction = useInteractionState();
+  const config = profile.interaction?.crop;
+  const source = layer?.data?.intrinsic;
+  const resolvedFit = fit ?? config?.fit ?? "contain";
+  const resolvedMax = maxScale ?? config?.maxScale ?? 8;
+  const resolvedRotation = rotationEnabled ?? config?.rotationEnabled ?? false;
+  const liveX = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.x ?? 0.5);
+  const liveY = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.y ?? 0.5);
+  const liveScale = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.scale ?? 1);
+  const baseX = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.x ?? 0.5);
+  const baseY = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.y ?? 0.5);
+  const baseScale = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.scale ?? 1);
+  const liveRotation = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.rotation ?? 0);
+  const baseRotation = (0, import_react_native_reanimated2.useSharedValue)(layer?.transform.rotation ?? 0);
+  const panX = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const panY = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const pinchScale = (0, import_react_native_reanimated2.useSharedValue)(1);
+  const rotateDelta = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const focalX = (0, import_react_native_reanimated2.useSharedValue)(0.5);
+  const focalY = (0, import_react_native_reanimated2.useSharedValue)(0.5);
+  const activeRecognizers = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const commitTimer = (0, import_react6.useRef)(null);
+  const minScale = source ? (0, import_core5.cropFitScale)(source, document.size, resolvedFit, layer?.transform.rotation ?? 0) : 1;
+  (0, import_react6.useEffect)(() => {
+    if (!layer) return;
+    liveX.value = layer.transform.x;
+    liveY.value = layer.transform.y;
+    liveScale.value = layer.transform.scale;
+    liveRotation.value = layer.transform.rotation;
+  }, [layer?.transform.x, layer?.transform.y, layer?.transform.scale, layer?.transform.rotation]);
+  const previewTransform = (0, import_react_native_reanimated2.useDerivedValue)(() => {
+    const ratio = liveScale.value / Math.max(baseScale.value, 1e-6);
+    return [
+      { translateX: liveX.value * document.size.width },
+      { translateY: liveY.value * document.size.height },
+      { rotate: liveRotation.value - baseRotation.value },
+      { scale: ratio },
+      { translateX: -baseX.value * document.size.width },
+      { translateY: -baseY.value * document.size.height }
+    ];
+  }, [document.size.width, document.size.height]);
+  (0, import_react6.useEffect)(() => {
+    if (!layer) return;
+    interaction.setPreview({ layerId: layer.id, transform: previewTransform });
+    return () => interaction.setPreview(null);
+  }, [layer?.id, previewTransform, interaction.setPreview]);
+  const setActive = (active) => {
+    interaction.setCropActive(active);
+    onInteractionChange?.(active);
+  };
+  const commit = (candidate) => {
+    if (!layer || !source) return;
+    if (commitTimer.current) clearTimeout(commitTimer.current);
+    const settledMinScale = (0, import_core5.cropFitScale)(source, document.size, resolvedFit, candidate.rotation);
+    const bounds = (0, import_core5.cropPanBounds)(source, document.size, candidate.scale, settledMinScale, resolvedMax, candidate.rotation);
+    const settled = (0, import_core5.clampCropTransform)(candidate, bounds);
+    liveX.value = (0, import_react_native_reanimated2.withTiming)(settled.x, { duration: 160 });
+    liveY.value = (0, import_react_native_reanimated2.withTiming)(settled.y, { duration: 160 });
+    liveScale.value = (0, import_react_native_reanimated2.withTiming)(settled.scale, { duration: 160 });
+    liveRotation.value = (0, import_react_native_reanimated2.withTiming)(settled.rotation, { duration: 160 });
+    commitTimer.current = setTimeout(() => {
+      dispatch({
+        type: "layer/transform",
+        id: layer.id,
+        patch: {
+          x: settled.x,
+          y: settled.y,
+          scale: settled.scale,
+          ...resolvedRotation ? { rotation: settled.rotation } : {}
+        }
+      });
+      baseX.value = settled.x;
+      baseY.value = settled.y;
+      baseScale.value = settled.scale;
+      baseRotation.value = settled.rotation;
+      liveX.value = settled.x;
+      liveY.value = settled.y;
+      liveScale.value = settled.scale;
+      liveRotation.value = settled.rotation;
+      setActive(false);
+    }, 165);
+  };
+  const toggleZoom = (xDp, yDp) => {
+    if (!layer || !source || !metrics) return;
+    baseX.value = layer.transform.x;
+    baseY.value = layer.transform.y;
+    baseScale.value = layer.transform.scale;
+    baseRotation.value = layer.transform.rotation;
+    liveX.value = layer.transform.x;
+    liveY.value = layer.transform.y;
+    liveScale.value = layer.transform.scale;
+    liveRotation.value = layer.transform.rotation;
+    setActive(true);
+    const atMinimum = Math.abs(layer.transform.scale - minScale) < 0.01;
+    const targetScale = atMinimum ? Math.min(resolvedMax, minScale * (config?.doubleTapScale ?? 2)) : minScale;
+    commit((0, import_core5.focalZoomTransform)(layer.transform, targetScale, {
+      x: xDp / metrics.width,
+      y: yDp / metrics.height
+    }));
+  };
+  const gesture = (0, import_react6.useMemo)(() => {
+    if (!metrics || !source || !layer) return import_react_native_gesture_handler2.Gesture.Tap();
+    const begin = () => {
+      "worklet";
+      if (activeRecognizers.value === 0) {
+        baseX.value = liveX.value;
+        baseY.value = liveY.value;
+        baseScale.value = liveScale.value;
+        baseRotation.value = liveRotation.value;
+        panX.value = 0;
+        panY.value = 0;
+        pinchScale.value = 1;
+        rotateDelta.value = 0;
+        (0, import_react_native_worklets2.runOnJS)(setActive)(true);
+      }
+      activeRecognizers.value += 1;
+    };
+    const updateLive = () => {
+      "worklet";
+      const rotation = baseRotation.value + rotateDelta.value;
+      const naturalWidth = document.size.width;
+      const naturalHeight = document.size.width * (source.height / source.width);
+      const cos = Math.abs(Math.cos(rotation));
+      const sin = Math.abs(Math.sin(rotation));
+      const rotatedWidth = naturalWidth * cos + naturalHeight * sin;
+      const rotatedHeight = naturalWidth * sin + naturalHeight * cos;
+      const widthScale = document.size.width / rotatedWidth;
+      const heightScale = document.size.height / rotatedHeight;
+      const dynamicMin = resolvedFit === "contain" ? Math.min(widthScale, heightScale) : Math.max(widthScale, heightScale);
+      const rawScale = baseScale.value * pinchScale.value;
+      const resistance = config?.resistance ?? 0.35;
+      const scale = rawScale < dynamicMin ? dynamicMin - (dynamicMin - rawScale) * resistance : rawScale > resolvedMax ? resolvedMax + (rawScale - resolvedMax) * resistance : rawScale;
+      const ratio = scale / Math.max(baseScale.value, 1e-6);
+      const zoomX = focalX.value - (focalX.value - baseX.value) * ratio;
+      const zoomY = focalY.value - (focalY.value - baseY.value) * ratio;
+      liveRotation.value = rotation;
+      const dx = Math.max(0, (rotatedWidth * scale - document.size.width) / (2 * document.size.width));
+      const dy = Math.max(0, (rotatedHeight * scale - document.size.height) / (2 * document.size.height));
+      liveScale.value = scale;
+      const rawX = zoomX + panX.value;
+      const rawY = zoomY + panY.value;
+      const minX = 0.5 - dx;
+      const maxX = 0.5 + dx;
+      const minY = 0.5 - dy;
+      const maxY = 0.5 + dy;
+      liveX.value = rawX < minX ? minX - (minX - rawX) * resistance : rawX > maxX ? maxX + (rawX - maxX) * resistance : rawX;
+      liveY.value = rawY < minY ? minY - (minY - rawY) * resistance : rawY > maxY ? maxY + (rawY - maxY) * resistance : rawY;
+    };
+    const finish = () => {
+      "worklet";
+      activeRecognizers.value = Math.max(0, activeRecognizers.value - 1);
+      if (activeRecognizers.value === 0) {
+        (0, import_react_native_worklets2.runOnJS)(commit)({
+          x: liveX.value,
+          y: liveY.value,
+          scale: liveScale.value,
+          rotation: liveRotation.value,
+          ...layer.transform.anchor ? { anchor: layer.transform.anchor } : {},
+          ...layer.transform.flipX !== void 0 ? { flipX: layer.transform.flipX } : {},
+          ...layer.transform.flipY !== void 0 ? { flipY: layer.transform.flipY } : {}
+        });
+      }
+    };
+    const pan = import_react_native_gesture_handler2.Gesture.Pan().minPointers(1).onStart(begin).onUpdate((event) => {
+      "worklet";
+      panX.value = event.translationX / metrics.width;
+      panY.value = event.translationY / metrics.height;
+      updateLive();
+    }).onFinalize(finish);
+    const pinch = import_react_native_gesture_handler2.Gesture.Pinch().onStart(begin).onUpdate((event) => {
+      "worklet";
+      pinchScale.value = event.scale;
+      focalX.value = event.focalX / metrics.width;
+      focalY.value = event.focalY / metrics.height;
+      updateLive();
+    }).onFinalize(finish);
+    const rotate = import_react_native_gesture_handler2.Gesture.Rotation().enabled(resolvedRotation).onStart(begin).onUpdate((event) => {
+      "worklet";
+      rotateDelta.value = event.rotation;
+      updateLive();
+    }).onFinalize(finish);
+    const doubleTap = import_react_native_gesture_handler2.Gesture.Tap().numberOfTaps(2).onEnd((event) => {
+      "worklet";
+      (0, import_react_native_worklets2.runOnJS)(toggleZoom)(event.x, event.y);
+    });
+    return import_react_native_gesture_handler2.Gesture.Exclusive(doubleTap, import_react_native_gesture_handler2.Gesture.Simultaneous(pan, pinch, rotate));
+  }, [metrics, source, layer, resolvedFit, resolvedMax, resolvedRotation, minScale, document.size.width, document.size.height, config?.resistance, config?.doubleTapScale]);
+  if (!layer) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_gesture_handler2.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_reanimated2.default.View, { style: import_react_native2.StyleSheet.absoluteFill }) });
+}
+
+// src/gestures/TiltShiftGestureSurface.tsx
+var import_core7 = require("@pictor-sdk/core");
+var import_skia3 = require("@pictor-sdk/skia");
+var import_react7 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_gesture_handler3 = require("react-native-gesture-handler");
+var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets3 = require("react-native-worklets");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function TiltShiftGestureSurface() {
+  const { dispatch } = (0, import_core7.useEditor)();
+  const layer = useTargetImageLayer();
+  const metrics = (0, import_skia3.useCanvasMetrics)();
+  const tilt = layer?.data?.tiltShift;
+  const active = (0, import_core7.needsTiltShift)(tilt);
+  const origin = (0, import_react7.useRef)(null);
+  const live = (0, import_react7.useRef)(null);
+  live.current = active ? tilt : null;
+  const width = metrics?.width ?? 0;
+  const height = metrics?.height ?? 0;
+  const oX = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const oY = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const oR = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const oRot = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const oLinear = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const visible = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const dx = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const dy = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const pinch = (0, import_react_native_reanimated3.useSharedValue)(1);
+  const twist = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const activeCount = (0, import_react_native_reanimated3.useSharedValue)(0);
+  const capture = (0, import_react7.useMemo)(
+    () => () => {
+      const from = live.current;
+      if (!from || origin.current) return;
+      origin.current = from;
+      oX.value = from.x * width;
+      oY.value = from.y * height;
+      oR.value = from.radius * width;
+      oRot.value = from.rotation;
+      oLinear.value = from.mode === "linear" ? 1 : 0;
+    },
+    [width, height, oX, oY, oR, oRot, oLinear]
+  );
+  const commit = (0, import_react7.useMemo)(
+    () => (tx, ty, scale, rotation) => {
+      const from = origin.current;
+      origin.current = null;
+      if (!from || !layer || width <= 0 || height <= 0) return;
+      let next = (0, import_core7.moveTiltCenter)(from, tx / width, ty / height);
+      next = (0, import_core7.scaleTiltRadius)({ ...next, radius: from.radius, feather: from.feather }, scale);
+      next = (0, import_core7.rotateTiltBand)({ ...next, rotation: from.rotation }, rotation);
+      dispatch({
+        type: "layer/patchData",
+        id: layer.id,
+        patch: (0, import_core7.tiltShiftPatch)(next)
+      });
+    },
+    [dispatch, layer, width, height]
+  );
+  const gesture = (0, import_react7.useMemo)(() => {
+    const begin = () => {
+      "worklet";
+      activeCount.value += 1;
+      visible.value = 1;
+      (0, import_react_native_worklets3.runOnJS)(capture)();
+    };
+    const end = () => {
+      "worklet";
+      activeCount.value = Math.max(0, activeCount.value - 1);
+      if (activeCount.value > 0) return;
+      visible.value = 0;
+      (0, import_react_native_worklets3.runOnJS)(commit)(dx.value, dy.value, pinch.value, twist.value);
+      dx.value = 0;
+      dy.value = 0;
+      pinch.value = 1;
+      twist.value = 0;
+    };
+    const pan = import_react_native_gesture_handler3.Gesture.Pan().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      dx.value = e.translationX;
+      dy.value = e.translationY;
+    }).onFinalize(end);
+    const pinchGesture = import_react_native_gesture_handler3.Gesture.Pinch().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      pinch.value = e.scale;
+    }).onFinalize(end);
+    const rotation = import_react_native_gesture_handler3.Gesture.Rotation().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      twist.value = e.rotation;
+    }).onFinalize(end);
+    return import_react_native_gesture_handler3.Gesture.Simultaneous(pan, pinchGesture, rotation);
+  }, [active, capture, commit, activeCount, visible, dx, dy, pinch, twist]);
+  const ringStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => {
+    const r = Math.max(1, oR.value * pinch.value);
+    const cx = oX.value + dx.value;
+    const cy = oY.value + dy.value;
+    const band = oLinear.value > 0.5;
+    return {
+      opacity: visible.value,
+      left: band ? -width : cx - r,
+      top: cy - r,
+      width: band ? width * 3 : r * 2,
+      height: r * 2,
+      borderRadius: band ? 0 : r,
+      transform: [{ rotate: `${oRot.value + twist.value}rad` }]
+    };
+  });
+  if (!active) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_gesture_handler3.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated3.default.View, { style: import_react_native3.StyleSheet.absoluteFill, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated3.default.View, { pointerEvents: "none", style: [styles.ring, ringStyle] }) }) });
+}
+var styles = import_react_native3.StyleSheet.create({
+  ring: {
+    position: "absolute",
+    borderWidth: 1.5,
+    borderColor: "rgba(255,255,255,0.9)"
+  }
+});
+
+// src/gestures/CropGrid.tsx
+var import_react8 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CropGrid({ always = false }) {
+  const { cropActive } = useInteractionState();
+  if (!always && !cropActive) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { pointerEvents: "none", style: import_react_native4.StyleSheet.absoluteFill, children: [1 / 3, 2 / 3].map((fraction) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react8.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: [styles2.vertical, { left: `${fraction * 100}%` }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native4.View, { style: [styles2.horizontal, { top: `${fraction * 100}%` }] })
+  ] }, fraction)) });
+}
+var styles2 = import_react_native4.StyleSheet.create({
+  vertical: { position: "absolute", top: 0, bottom: 0, width: 1, backgroundColor: "#ffffff88" },
+  horizontal: { position: "absolute", left: 0, right: 0, height: 1, backgroundColor: "#ffffff88" }
+});
+
+// src/gestures/LayerGestureSurface.tsx
+var import_core8 = require("@pictor-sdk/core");
+var import_skia4 = require("@pictor-sdk/skia");
+var import_react9 = require("react");
+var import_react_native5 = require("react-native");
+var import_react_native_gesture_handler4 = require("react-native-gesture-handler");
+var import_react_native_reanimated4 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets4 = require("react-native-worklets");
+
+// src/gestures/layerGestureWorklet.ts
+function composeLayerGestureUI(base, input, aspect, config, previous, settle) {
+  "worklet";
+  const requested = base.scale * input.pinch;
+  let scale;
+  if (settle) {
+    scale = Math.min(config.maxScale, Math.max(config.minScale, requested));
+  } else if (requested < config.minScale) {
+    scale = config.minScale - (config.minScale - requested) * config.scaleResistance;
+  } else if (requested > config.maxScale) {
+    scale = config.maxScale + (requested - config.maxScale) * config.scaleResistance;
+  } else {
+    scale = requested;
+  }
+  const ratio = scale / Math.max(base.scale, 1e-9);
+  const rotationDelta = config.rotationEnabled ? input.rotate : 0;
+  const dx = base.x - input.focalX;
+  const dy = (base.y - input.focalY) * aspect;
+  const cos = Math.cos(rotationDelta);
+  const sin = Math.sin(rotationDelta);
+  const rx = (dx * cos - dy * sin) * ratio;
+  const ry = (dx * sin + dy * cos) * ratio;
+  let x = input.focalX + rx + input.panX;
+  let y = input.focalY + ry / aspect + input.panY;
+  let rotation = base.rotation + rotationDelta;
+  let snapCenterX = false;
+  let snapCenterY = false;
+  let snapRotation2 = false;
+  if (config.centerSnap !== false) {
+    const engage = config.centerSnap;
+    const release = Math.max(engage, config.centerSnapRelease);
+    const tx = previous.centerX ? release : engage;
+    if (Math.abs(x - 0.5) <= tx + 1e-9) {
+      x = 0.5;
+      snapCenterX = true;
+    }
+    const ty = previous.centerY ? release : engage;
+    if (Math.abs(y - 0.5) <= ty + 1e-9) {
+      y = 0.5;
+      snapCenterY = true;
+    }
+  }
+  if (config.rotationSnap !== false && config.rotationEnabled) {
+    const engage = config.rotationSnap;
+    const release = Math.max(engage, config.rotationSnapRelease);
+    const step = Math.PI / 2;
+    const nearest = Math.round(rotation / step) * step;
+    const tr = previous.rotation ? release : engage;
+    if (Math.abs(rotation - nearest) <= tr + 1e-9) {
+      rotation = nearest;
+      snapRotation2 = true;
+    }
+  }
+  return { x, y, scale, rotation, snapCenterX, snapCenterY, snapRotation: snapRotation2 };
+}
+function isOverDeleteTargetUI(x, y, target, aspect) {
+  "worklet";
+  const dx = x - target.x;
+  const dy = (y - target.y) * aspect;
+  return Math.sqrt(dx * dx + dy * dy) <= target.radius;
+}
+function layerPreviewDeltaUI(committed, live, width, height) {
+  "worklet";
+  return [
+    { translateX: live.x * width },
+    { translateY: live.y * height },
+    { rotate: live.rotation - committed.rotation },
+    { scale: live.scale / Math.max(committed.scale, 1e-9) },
+    { translateX: -committed.x * width },
+    { translateY: -committed.y * height }
+  ];
+}
+function hitTestLayerCandidatesUI(x, y, candidates, documentWidth, documentHeight) {
+  "worklet";
+  for (let i = 0; i < candidates.length; i++) {
+    const candidate = candidates[i];
+    let dx = x * documentWidth - candidate.x * documentWidth;
+    let dy = y * documentHeight - candidate.y * documentHeight;
+    const cos = Math.cos(-candidate.rotation);
+    const sin = Math.sin(-candidate.rotation);
+    const rx = dx * cos - dy * sin;
+    const ry = dx * sin + dy * cos;
+    dx = candidate.flipX ? -rx : rx;
+    dy = candidate.flipY ? -ry : ry;
+    const width = candidate.scale * candidate.width * documentWidth;
+    const height = candidate.scale * candidate.height * documentWidth;
+    if (width <= 0 || height <= 0) continue;
+    const localX = dx / width + candidate.anchorX;
+    const localY = dy / height + candidate.anchorY;
+    if (localX >= 0 && localX <= 1 && localY >= 0 && localY <= 1) return candidate;
+  }
+  return null;
+}
+
+// src/gestures/LayerGestureSurface.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function LayerGestureSurface({ onSnap }) {
+  const { document, dispatch, profile } = (0, import_core8.useEditor)();
+  const store = (0, import_core8.useEditorStore)();
+  const metrics = (0, import_skia4.useCanvasMetrics)();
+  const { setPreview, setLayerDragActive, setOverDeleteTarget, setSnap } = useInteractionState();
+  const renderer = (0, import_skia4.useRenderer)();
+  const config = (0, import_react9.useMemo)(
+    () => (0, import_core8.layerGestureConfigFromProfile)(profile.interaction?.layers),
+    [profile]
+  );
+  const deleteTarget = (0, import_react9.useMemo)(
+    () => (0, import_core8.deleteTargetFromProfile)(profile.interaction?.layers),
+    [profile]
+  );
+  const aspect = document.size.height / document.size.width;
+  const [measureVersion, setMeasureVersion] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(
+    () => renderer.textMeasures.subscribe(() => setMeasureVersion((v) => v + 1)),
+    [renderer]
+  );
+  const hitCandidates = (0, import_react9.useMemo)(
+    () => document.layers.map((layer, index) => ({ layer, index })).filter(
+      ({ layer, index }) => !layer.hidden && !layer.locked && (0, import_core8.isDirectManipulationLayer)(layer, index, profile.interaction?.layers)
+    ).reverse().map(({ layer }) => {
+      const natural = (0, import_skia4.preferMeasuredSize)(
+        renderer.textMeasures.get(layer.id),
+        (0, import_core8.layerNaturalSize)(layer, store.registry, document)
+      );
+      const anchor = layer.transform.anchor ?? { x: 0.5, y: 0.5 };
+      return {
+        id: layer.id,
+        x: layer.transform.x,
+        y: layer.transform.y,
+        scale: layer.transform.scale,
+        rotation: layer.transform.rotation,
+        width: natural.width,
+        height: natural.height,
+        anchorX: anchor.x,
+        anchorY: anchor.y,
+        flipX: layer.transform.flipX ?? false,
+        flipY: layer.transform.flipY ?? false
+      };
+    }),
+    // `measureVersion` is deliberate: the measurements live outside React, so
+    // this is how a new one re-derives the hit geometry.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [document, profile, store.registry, renderer, measureVersion]
+  );
+  const liveX = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const liveY = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const liveScale = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const liveRotation = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const committedX = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const committedY = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const committedScale = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const committedRotation = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const baseX = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const baseY = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const baseScale = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const baseRotation = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const originPanX = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const originPanY = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const originPinch = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const originRotate = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const rawPanX = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const rawPanY = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const rawPinch = (0, import_react_native_reanimated4.useSharedValue)(1);
+  const rawRotate = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const focalX = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const focalY = (0, import_react_native_reanimated4.useSharedValue)(0.5);
+  const pointers = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const active = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const snapCX = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const snapCY = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const snapR = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const overDelete = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const previewTransform = (0, import_react_native_reanimated4.useDerivedValue)(() => {
+    return layerPreviewDeltaUI(
+      {
+        x: committedX.value,
+        y: committedY.value,
+        scale: committedScale.value,
+        rotation: committedRotation.value
+      },
+      { x: liveX.value, y: liveY.value, scale: liveScale.value, rotation: liveRotation.value },
+      document.size.width,
+      document.size.height
+    );
+  }, [document.size.width, document.size.height]);
+  const latest = (0, import_react9.useRef)({ document, metrics, store, dispatch, onSnap, profile });
+  latest.current = { document, metrics, store, dispatch, onSnap, profile };
+  const grabbedId = (0, import_react9.useRef)(null);
+  const grabbedFrom = (0, import_react9.useRef)(null);
+  const snapState = (0, import_react9.useRef)(import_core8.NO_SNAP);
+  const onGrabLayer = (0, import_react9.useCallback)((id) => {
+    const { document: doc, store: s } = latest.current;
+    const hit = doc.layers.find((layer) => layer.id === id);
+    if (!hit) return;
+    const t = hit.transform;
+    grabbedId.current = hit.id;
+    grabbedFrom.current = { ...t };
+    s.select([hit.id]);
+    setPreview({ layerId: hit.id, transform: previewTransform });
+    setLayerDragActive(true);
+  }, [setPreview, setLayerDragActive, previewTransform]);
+  const onSelectAt = (0, import_react9.useCallback)((xDp, yDp) => {
+    const { document: doc, metrics: m, store: s } = latest.current;
+    if (!m) return;
+    const layerInteraction = latest.current.profile.interaction?.layers;
+    const hit = (0, import_core8.hitTestDocument)(
+      doc,
+      { x: xDp / m.width, y: yDp / m.height },
+      s.registry,
+      (layer, index) => (0, import_core8.isDirectManipulationLayer)(layer, index, layerInteraction)
+    );
+    s.select(hit && !hit.locked ? [hit.id] : []);
+  }, []);
+  const onSnapChanged = (0, import_react9.useCallback)(
+    (centerX, centerY, rotation) => {
+      const previous = snapState.current;
+      const next = { centerX, centerY, rotation };
+      snapState.current = next;
+      const notify = latest.current.onSnap;
+      if (centerX && !previous.centerX) notify?.({ kind: "centerX" });
+      if (centerY && !previous.centerY) notify?.({ kind: "centerY" });
+      if (rotation && !previous.rotation) notify?.({ kind: "rotation" });
+      setSnap(next);
+    },
+    [setSnap]
+  );
+  const onHoverChanged = (0, import_react9.useCallback)(
+    (over) => setOverDeleteTarget(over),
+    [setOverDeleteTarget]
+  );
+  const onGestureFinished = (0, import_react9.useCallback)(
+    (t, deleted) => {
+      const { dispatch: d, store: s } = latest.current;
+      const id = grabbedId.current;
+      const from = grabbedFrom.current;
+      grabbedId.current = null;
+      grabbedFrom.current = null;
+      snapState.current = import_core8.NO_SNAP;
+      setLayerDragActive(false);
+      setOverDeleteTarget(false);
+      setSnap(import_core8.NO_SNAP);
+      setPreview(null);
+      if (!id) return;
+      if (deleted) {
+        d({ type: "layer/remove", id });
+        s.select([]);
+        return;
+      }
+      if (from && (0, import_core8.isSameTransform)(from, t)) return;
+      d({ type: "layer/transform", id, patch: t });
+    },
+    [setLayerDragActive, setOverDeleteTarget, setSnap, setPreview]
+  );
+  (0, import_react9.useEffect)(() => () => setPreview(null), [setPreview]);
+  const gesture = (0, import_react9.useMemo)(() => {
+    const metricsWidth = metrics?.width ?? 0;
+    const metricsHeight = metrics?.height ?? 0;
+    const target = deleteTarget;
+    const candidates = hitCandidates;
+    const rebase = () => {
+      "worklet";
+      baseX.value = liveX.value;
+      baseY.value = liveY.value;
+      baseScale.value = liveScale.value;
+      baseRotation.value = liveRotation.value;
+      originPanX.value = rawPanX.value;
+      originPanY.value = rawPanY.value;
+      originPinch.value = rawPinch.value;
+      originRotate.value = rawRotate.value;
+    };
+    const recompute = (settle) => {
+      "worklet";
+      if (!active.value || metricsWidth === 0 || metricsHeight === 0) return;
+      const out = composeLayerGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / metricsWidth,
+          panY: (rawPanY.value - originPanY.value) / metricsHeight,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value
+        },
+        aspect,
+        config,
+        { centerX: snapCX.value, centerY: snapCY.value, rotation: snapR.value },
+        settle
+      );
+      liveX.value = out.x;
+      liveY.value = out.y;
+      liveScale.value = out.scale;
+      liveRotation.value = out.rotation;
+      if (out.snapCenterX !== snapCX.value || out.snapCenterY !== snapCY.value || out.snapRotation !== snapR.value) {
+        snapCX.value = out.snapCenterX;
+        snapCY.value = out.snapCenterY;
+        snapR.value = out.snapRotation;
+        (0, import_react_native_worklets4.runOnJS)(onSnapChanged)(out.snapCenterX, out.snapCenterY, out.snapRotation);
+      }
+      if (target) {
+        const over = isOverDeleteTargetUI(out.x, out.y, target, aspect);
+        if (over !== overDelete.value) {
+          overDelete.value = over;
+          (0, import_react_native_worklets4.runOnJS)(onHoverChanged)(over);
+        }
+      }
+    };
+    const syncPointers = (count) => {
+      "worklet";
+      if (active.value && count !== pointers.value) {
+        pointers.value = count;
+        rebase();
+      }
+    };
+    const endIfIdle = () => {
+      "worklet";
+      if (!active.value) {
+        (0, import_react_native_worklets4.runOnJS)(onGestureFinished)({ x: 0, y: 0, scale: 1, rotation: 0 }, false);
+        return;
+      }
+      recompute(true);
+      active.value = false;
+      pointers.value = 0;
+      const deleted = overDelete.value;
+      overDelete.value = false;
+      snapCX.value = false;
+      snapCY.value = false;
+      snapR.value = false;
+      (0, import_react_native_worklets4.runOnJS)(onGestureFinished)(
+        {
+          x: liveX.value,
+          y: liveY.value,
+          scale: liveScale.value,
+          rotation: liveRotation.value
+        },
+        deleted
+      );
+    };
+    const pan = import_react_native_gesture_handler4.Gesture.Pan().minPointers(1).maxPointers(2).onBegin((e) => {
+      "worklet";
+      if (active.value) return;
+      rawPanX.value = 0;
+      rawPanY.value = 0;
+      rawPinch.value = 1;
+      rawRotate.value = 0;
+      originPanX.value = 0;
+      originPanY.value = 0;
+      originPinch.value = 1;
+      originRotate.value = 0;
+      pointers.value = e.numberOfPointers;
+      const hit = hitTestLayerCandidatesUI(
+        e.x / Math.max(metricsWidth, 1e-9),
+        e.y / Math.max(metricsHeight, 1e-9),
+        candidates,
+        document.size.width,
+        document.size.height
+      );
+      if (!hit) {
+        active.value = false;
+        return;
+      }
+      liveX.value = hit.x;
+      liveY.value = hit.y;
+      liveScale.value = hit.scale;
+      liveRotation.value = hit.rotation;
+      committedX.value = hit.x;
+      committedY.value = hit.y;
+      committedScale.value = hit.scale;
+      committedRotation.value = hit.rotation;
+      baseX.value = hit.x;
+      baseY.value = hit.y;
+      baseScale.value = hit.scale;
+      baseRotation.value = hit.rotation;
+      focalX.value = hit.x;
+      focalY.value = hit.y;
+      active.value = true;
+      (0, import_react_native_worklets4.runOnJS)(onGrabLayer)(hit.id);
+    }).onUpdate((e) => {
+      "worklet";
+      rawPanX.value = e.translationX;
+      rawPanY.value = e.translationY;
+      syncPointers(e.numberOfPointers);
+      recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      endIfIdle();
+    });
+    const pinch = import_react_native_gesture_handler4.Gesture.Pinch().onUpdate((e) => {
+      "worklet";
+      rawPinch.value = e.scale;
+      focalX.value = e.focalX / metricsWidth;
+      focalY.value = e.focalY / metricsHeight;
+      syncPointers(e.numberOfPointers);
+      recompute(false);
+    });
+    const rotate = import_react_native_gesture_handler4.Gesture.Rotation().enabled(config.rotationEnabled).onUpdate((e) => {
+      "worklet";
+      rawRotate.value = e.rotation;
+      focalX.value = e.anchorX / metricsWidth;
+      focalY.value = e.anchorY / metricsHeight;
+      syncPointers(e.numberOfPointers);
+      recompute(false);
+    });
+    const tap = import_react_native_gesture_handler4.Gesture.Tap().onEnd((e) => {
+      "worklet";
+      (0, import_react_native_worklets4.runOnJS)(onSelectAt)(e.x, e.y);
+    });
+    return import_react_native_gesture_handler4.Gesture.Simultaneous(import_react_native_gesture_handler4.Gesture.Race(pan, tap), pinch, rotate);
+  }, [
+    metrics,
+    config,
+    deleteTarget,
+    aspect,
+    onGrabLayer,
+    onSelectAt,
+    onSnapChanged,
+    onHoverChanged,
+    onGestureFinished,
+    hitCandidates,
+    document.size.width,
+    document.size.height
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_reanimated4.default.View, { style: import_react_native5.StyleSheet.absoluteFill }) });
+}
+
+// src/gestures/StoryMediaGestureSurface.tsx
+var import_core10 = require("@pictor-sdk/core");
+var import_skia5 = require("@pictor-sdk/skia");
+var import_react10 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_native_gesture_handler5 = require("react-native-gesture-handler");
+var import_react_native_reanimated5 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets5 = require("react-native-worklets");
+
+// src/gestures/mediaGestureWorklet.ts
+function mediaFitScaleUI(intrinsic, canvas, fit, rotation) {
+  "worklet";
+  if (intrinsic.width <= 0 || intrinsic.height <= 0) return 1;
+  if (fit === "width") return 1;
+  const w = canvas.width;
+  const h = canvas.width * (intrinsic.height / intrinsic.width);
+  const cos = Math.abs(Math.cos(rotation));
+  const sin = Math.abs(Math.sin(rotation));
+  const byWidth = canvas.width / (w * cos + h * sin);
+  const byHeight = canvas.height / (w * sin + h * cos);
+  return fit === "cover" ? Math.max(byWidth, byHeight) : Math.min(byWidth, byHeight);
+}
+function mediaPanBoundsUI(_intrinsic, _canvas, _scale, _rotation) {
+  "worklet";
+  return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
+}
+function composeMediaGestureUI(base, input, canvas, intrinsic, config, settle) {
+  "worklet";
+  const rotationDelta = config.rotationEnabled ? input.rotate : 0;
+  const rotation = base.rotation + rotationDelta;
+  const fit = mediaFitScaleUI(intrinsic, canvas, config.fit, rotation);
+  const minScale = fit * config.minScaleFactor;
+  const maxScale = Math.max(minScale, config.maxScale);
+  const requested = base.scale * input.pinch;
+  let scale;
+  if (settle) {
+    scale = Math.min(maxScale, Math.max(minScale, requested));
+  } else if (requested < minScale) {
+    scale = minScale - (minScale - requested) * config.resistance;
+  } else if (requested > maxScale) {
+    scale = maxScale + (requested - maxScale) * config.resistance;
+  } else {
+    scale = requested;
+  }
+  const aspect = canvas.height / canvas.width;
+  const ratio = scale / Math.max(base.scale, 1e-9);
+  const dx = base.x - input.focalX;
+  const dy = (base.y - input.focalY) * aspect;
+  const cos = Math.cos(rotationDelta);
+  const sin = Math.sin(rotationDelta);
+  const rx = (dx * cos - dy * sin) * ratio;
+  const ry = (dx * sin + dy * cos) * ratio;
+  const rawX = input.focalX + rx + input.panX;
+  const rawY = input.focalY + ry / aspect + input.panY;
+  const bounds = mediaPanBoundsUI(intrinsic, canvas, scale, rotation);
+  let x;
+  let y;
+  if (settle) {
+    x = Math.min(bounds.maxX, Math.max(bounds.minX, rawX));
+    y = Math.min(bounds.maxY, Math.max(bounds.minY, rawY));
+  } else {
+    x = rawX < bounds.minX ? bounds.minX - (bounds.minX - rawX) * config.resistance : rawX > bounds.maxX ? bounds.maxX + (rawX - bounds.maxX) * config.resistance : rawX;
+    y = rawY < bounds.minY ? bounds.minY - (bounds.minY - rawY) * config.resistance : rawY > bounds.maxY ? bounds.maxY + (rawY - bounds.maxY) * config.resistance : rawY;
+  }
+  return { x, y, scale, rotation };
+}
+function onRecognizerBegin(count) {
+  "worklet";
+  const next = Math.max(0, count) + 1;
+  return { count: next, isFirst: next === 1 };
+}
+function onRecognizerEnd(count) {
+  "worklet";
+  const next = Math.max(0, count - 1);
+  return { count: next, isLast: next === 0 && count > 0 };
+}
+
+// src/gestures/settleCoordinator.ts
+function createSettleCoordinator(commit) {
+  let generation = 0;
+  let settling = false;
+  return {
+    settle(target, animate) {
+      generation += 1;
+      const mine = generation;
+      settling = true;
+      animate((finished) => {
+        if (mine !== generation) return;
+        generation += 1;
+        settling = false;
+        if (finished) commit(target);
+      });
+    },
+    cancel() {
+      generation += 1;
+      settling = false;
+    },
+    isSettling() {
+      return settling;
+    }
+  };
+}
+
+// src/gestures/transformOwnership.ts
+var import_core9 = require("@pictor-sdk/core");
+var IDLE_OWNERSHIP = { owning: false, pending: null, previous: null };
+function beginOwnership() {
+  return { owning: true, pending: null, previous: null };
+}
+function commitOwnership(target, dispatched, previous) {
+  return dispatched ? { owning: true, pending: target, previous: previous ?? null } : IDLE_OWNERSHIP;
+}
+function documentChanged(state, committed) {
+  if (!committed) return { state, reseed: false };
+  if (state.pending) {
+    if ((0, import_core9.isSameTransform)(state.pending, committed)) return { state: IDLE_OWNERSHIP, reseed: false };
+    if (state.previous && (0, import_core9.isSameTransform)(state.previous, committed)) {
+      return { state, reseed: false };
+    }
+    return { state: IDLE_OWNERSHIP, reseed: true };
+  }
+  if (state.owning) return { state, reseed: false };
+  return { state, reseed: true };
+}
+
+// src/gestures/StoryMediaGestureSurface.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function useBaseMediaLayer() {
+  const { document } = (0, import_core10.useEditor)();
+  const base = document.layers[0];
+  return base && (0, import_core10.isBaseImageLayer)(document.layers, base.id) ? base : void 0;
+}
+function StoryMediaGestureSurface({
+  onInteractionChange
+}) {
+  const { document, dispatch, profile } = (0, import_core10.useEditor)();
+  const metrics = (0, import_skia5.useCanvasMetrics)();
+  const { setPreview } = useInteractionState();
+  const layer = useBaseMediaLayer();
+  const config = (0, import_react10.useMemo)(
+    () => (0, import_core10.mediaConfigFromProfile)(profile.interaction?.media),
+    [profile]
+  );
+  const declared = layer?.data?.intrinsic;
+  const resolved = (0, import_skia5.useResolvedImageSize)(layer?.data?.source);
+  const intrinsic = (0, import_react10.useMemo)(
+    () => (0, import_skia5.preferResolvedSize)(resolved, declared),
+    [resolved, declared]
+  );
+  const canvas = document.size;
+  const liveX = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const liveY = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const liveScale = (0, import_react_native_reanimated5.useSharedValue)(1);
+  const liveRotation = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const baseX = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const baseY = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const baseScale = (0, import_react_native_reanimated5.useSharedValue)(1);
+  const baseRotation = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const originPanX = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const originPanY = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const originPinch = (0, import_react_native_reanimated5.useSharedValue)(1);
+  const originRotate = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const rawPanX = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const rawPanY = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const rawPinch = (0, import_react_native_reanimated5.useSharedValue)(1);
+  const rawRotate = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const focalX = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const focalY = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const active = (0, import_react_native_reanimated5.useSharedValue)(false);
+  const recognizers = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const startedPan = (0, import_react_native_reanimated5.useSharedValue)(false);
+  const startedPinch = (0, import_react_native_reanimated5.useSharedValue)(false);
+  const startedRotate = (0, import_react_native_reanimated5.useSharedValue)(false);
+  const settleProgress = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const committed = layer?.transform;
+  const ownership = (0, import_react10.useRef)(IDLE_OWNERSHIP);
+  (0, import_react10.useEffect)(() => {
+    const next = documentChanged(ownership.current, committed);
+    ownership.current = next.state;
+    if (!next.reseed || !committed) return;
+    liveX.value = committed.x;
+    liveY.value = committed.y;
+    liveScale.value = committed.scale;
+    liveRotation.value = committed.rotation;
+  }, [committed?.x, committed?.y, committed?.scale, committed?.rotation]);
+  const baseCommittedX = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const baseCommittedY = (0, import_react_native_reanimated5.useSharedValue)(0.5);
+  const baseCommittedScale = (0, import_react_native_reanimated5.useSharedValue)(1);
+  const baseCommittedRotation = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const previewTransform = (0, import_react_native_reanimated5.useDerivedValue)(() => {
+    const ratio = liveScale.value / Math.max(baseCommittedScale.value, 1e-9);
+    return [
+      { translateX: liveX.value * canvas.width },
+      { translateY: liveY.value * canvas.height },
+      { rotate: liveRotation.value - baseCommittedRotation.value },
+      { scale: ratio },
+      { translateX: -baseCommittedX.value * canvas.width },
+      { translateY: -baseCommittedY.value * canvas.height }
+    ];
+  }, [canvas.width, canvas.height]);
+  (0, import_react10.useEffect)(() => () => setPreview(null), [setPreview]);
+  const latest = (0, import_react10.useRef)({ layer, dispatch, onInteractionChange, previewTransform });
+  latest.current = { layer, dispatch, onInteractionChange, previewTransform };
+  const settleCoordinatorRef = (0, import_react10.useRef)(null);
+  const beginInteraction = (0, import_react10.useCallback)(() => {
+    settleCoordinatorRef.current?.cancel();
+    ownership.current = beginOwnership();
+    const current = latest.current.layer;
+    if (current) {
+      baseCommittedX.value = current.transform.x;
+      baseCommittedY.value = current.transform.y;
+      baseCommittedScale.value = current.transform.scale;
+      baseCommittedRotation.value = current.transform.rotation;
+      setPreview({ layerId: current.id, transform: latest.current.previewTransform });
+    }
+    latest.current.onInteractionChange?.(true);
+  }, [setPreview]);
+  const commitNow = (0, import_react10.useCallback)((next) => {
+    const current = latest.current.layer;
+    setPreview(null);
+    latest.current.onInteractionChange?.(false);
+    const dispatched = current !== void 0 && !(0, import_core10.isSameTransform)(current.transform, next);
+    ownership.current = commitOwnership(next, dispatched, current?.transform);
+    if (!dispatched || !current) return;
+    latest.current.dispatch({
+      type: "layer/transform",
+      id: current.id,
+      patch: { x: next.x, y: next.y, scale: next.scale, rotation: next.rotation }
+    });
+  }, [setPreview]);
+  const settleCoordinator = (0, import_react10.useMemo)(
+    () => createSettleCoordinator((target) => commitNow(target)),
+    // commitNow reads through `latest`, so it is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  settleCoordinatorRef.current = settleCoordinator;
+  const settleTo = (0, import_react10.useCallback)(
+    (target, duration) => {
+      settleCoordinator.settle(target, (done) => {
+        liveX.value = (0, import_react_native_reanimated5.withTiming)(target.x, { duration });
+        liveY.value = (0, import_react_native_reanimated5.withTiming)(target.y, { duration });
+        liveRotation.value = (0, import_react_native_reanimated5.withTiming)(target.rotation, { duration });
+        liveScale.value = (0, import_react_native_reanimated5.withTiming)(target.scale, { duration });
+        settleProgress.value = 0;
+        settleProgress.value = (0, import_react_native_reanimated5.withTiming)(1, { duration }, (finished) => {
+          "worklet";
+          (0, import_react_native_worklets5.runOnJS)(done)(finished === true);
+        });
+      });
+    },
+    // shared values are stable refs, so they are deliberately not dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator]
+  );
+  (0, import_react10.useEffect)(
+    () => () => {
+      settleCoordinator.cancel();
+      ownership.current = IDLE_OWNERSHIP;
+      (0, import_react_native_reanimated5.cancelAnimation)(liveX);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveY);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveScale);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveRotation);
+      (0, import_react_native_reanimated5.cancelAnimation)(settleProgress);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator]
+  );
+  const runDoubleTap = (0, import_react10.useCallback)(
+    (xDp, yDp) => {
+      const current = latest.current.layer;
+      if (!current || !metrics) return;
+      const target = (0, import_core10.doubleTapMediaTransform)(current.transform, canvas, intrinsic, config, {
+        x: xDp / metrics.width,
+        y: yDp / metrics.height
+      });
+      beginInteraction();
+      settleTo(target, config.settleMs);
+    },
+    [metrics, canvas, intrinsic, config, settleTo, beginInteraction]
+  );
+  const gesture = (0, import_react10.useMemo)(() => {
+    const width = metrics?.width ?? 0;
+    const height = metrics?.height ?? 0;
+    const settleMs = config.settleMs;
+    const recompute = () => {
+      "worklet";
+      if (!active.value || width === 0 || height === 0) return;
+      const out = composeMediaGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / width,
+          panY: (rawPanY.value - originPanY.value) / height,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value
+        },
+        canvas,
+        intrinsic,
+        config,
+        false
+      );
+      liveX.value = out.x;
+      liveY.value = out.y;
+      liveScale.value = out.scale;
+      liveRotation.value = out.rotation;
+    };
+    const begin = () => {
+      "worklet";
+      const started = onRecognizerBegin(recognizers.value);
+      recognizers.value = started.count;
+      if (!started.isFirst) return;
+      (0, import_react_native_reanimated5.cancelAnimation)(liveX);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveY);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveScale);
+      (0, import_react_native_reanimated5.cancelAnimation)(liveRotation);
+      (0, import_react_native_reanimated5.cancelAnimation)(settleProgress);
+      active.value = true;
+      rawPanX.value = 0;
+      rawPanY.value = 0;
+      rawPinch.value = 1;
+      rawRotate.value = 0;
+      originPanX.value = 0;
+      originPanY.value = 0;
+      originPinch.value = 1;
+      originRotate.value = 0;
+      baseX.value = liveX.value;
+      baseY.value = liveY.value;
+      baseScale.value = liveScale.value;
+      baseRotation.value = liveRotation.value;
+      focalX.value = liveX.value;
+      focalY.value = liveY.value;
+      (0, import_react_native_worklets5.runOnJS)(beginInteraction)();
+    };
+    const finish = () => {
+      "worklet";
+      const ended = onRecognizerEnd(recognizers.value);
+      recognizers.value = ended.count;
+      if (!ended.isLast || !active.value) return;
+      active.value = false;
+      const settled = composeMediaGestureUI(
+        {
+          x: baseX.value,
+          y: baseY.value,
+          scale: baseScale.value,
+          rotation: baseRotation.value
+        },
+        {
+          panX: (rawPanX.value - originPanX.value) / width,
+          panY: (rawPanY.value - originPanY.value) / height,
+          pinch: rawPinch.value / Math.max(originPinch.value, 1e-9),
+          rotate: rawRotate.value - originRotate.value,
+          focalX: focalX.value,
+          focalY: focalY.value
+        },
+        canvas,
+        intrinsic,
+        config,
+        true
+      );
+      (0, import_react_native_worklets5.runOnJS)(settleTo)(settled, settleMs);
+    };
+    const pan = import_react_native_gesture_handler5.Gesture.Pan().minPointers(1).maxPointers(2).onStart((e) => {
+      "worklet";
+      startedPan.value = true;
+      begin();
+      rawPanX.value = e.translationX;
+      rawPanY.value = e.translationY;
+      originPanX.value = e.translationX;
+      originPanY.value = e.translationY;
+    }).onUpdate((e) => {
+      "worklet";
+      rawPanX.value = e.translationX;
+      rawPanY.value = e.translationY;
+      recompute();
+    }).onFinalize(() => {
+      "worklet";
+      if (!startedPan.value) return;
+      startedPan.value = false;
+      finish();
+    });
+    const pinch = import_react_native_gesture_handler5.Gesture.Pinch().onStart((e) => {
+      "worklet";
+      startedPinch.value = true;
+      begin();
+      rawPinch.value = e.scale;
+      originPinch.value = e.scale;
+      focalX.value = e.focalX / width;
+      focalY.value = e.focalY / height;
+    }).onUpdate((e) => {
+      "worklet";
+      rawPinch.value = e.scale;
+      focalX.value = e.focalX / width;
+      focalY.value = e.focalY / height;
+      recompute();
+    }).onFinalize(() => {
+      "worklet";
+      if (!startedPinch.value) return;
+      startedPinch.value = false;
+      finish();
+    });
+    const rotate = import_react_native_gesture_handler5.Gesture.Rotation().enabled(config.rotationEnabled).onStart((e) => {
+      "worklet";
+      startedRotate.value = true;
+      begin();
+      rawRotate.value = e.rotation;
+      originRotate.value = e.rotation;
+    }).onUpdate((e) => {
+      "worklet";
+      rawRotate.value = e.rotation;
+      recompute();
+    }).onFinalize(() => {
+      "worklet";
+      if (!startedRotate.value) return;
+      startedRotate.value = false;
+      finish();
+    });
+    const doubleTap = import_react_native_gesture_handler5.Gesture.Tap().numberOfTaps(2).onEnd((e) => {
+      "worklet";
+      (0, import_react_native_worklets5.runOnJS)(runDoubleTap)(e.x, e.y);
+    });
+    return import_react_native_gesture_handler5.Gesture.Simultaneous(import_react_native_gesture_handler5.Gesture.Race(pan, doubleTap), pinch, rotate);
+  }, [metrics, canvas, intrinsic, config, settleTo, beginInteraction, runDoubleTap]);
+  if (!layer) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_gesture_handler5.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated5.default.View, { style: import_react_native6.StyleSheet.absoluteFill }) });
+}
+
+// src/gestures/routing.ts
+function resolveGestureSurface(activeTool) {
+  switch (activeTool) {
+    case "text":
+      return "text";
+    case "media":
+      return "media";
+    case "draw":
+      return "draw";
+    case "crop":
+      return "crop";
+    case "tilt":
+      return "tilt";
+    default:
+      return "overlay";
+  }
+}
+
+// src/gestures/InteractionGuides.tsx
+var import_core11 = require("@pictor-sdk/core");
+var import_skia6 = require("@pictor-sdk/skia");
+var import_react_native7 = require("react-native");
+
+// src/theme.ts
+var import_react11 = require("react");
+var defaultTheme = {
+  colors: {
+    background: "#000000",
+    surface: "#121212",
+    text: "#ffffff",
+    textMuted: "#9a9a9a",
+    accent: "#3897f0",
+    danger: "#ed4956",
+    track: "#3a3a3a",
+    thumb: "#ffffff"
+  },
+  radii: { sm: 6, md: 10, lg: 16 },
+  spacing: { xs: 4, sm: 8, md: 14, lg: 22 },
+  font: { size: 15, sizeSm: 12, weight: "600" }
+};
+function mergeTheme(overrides) {
+  if (!overrides) return defaultTheme;
+  return {
+    colors: { ...defaultTheme.colors, ...overrides.colors },
+    radii: { ...defaultTheme.radii, ...overrides.radii },
+    spacing: { ...defaultTheme.spacing, ...overrides.spacing },
+    font: { ...defaultTheme.font, ...overrides.font }
+  };
+}
+var ThemeContext = (0, import_react11.createContext)(defaultTheme);
+function useTheme() {
+  return (0, import_react11.useContext)(ThemeContext);
+}
+
+// src/gestures/InteractionGuides.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function InteractionGuides({ deleteLabel = "Drag to delete" }) {
+  const { profile } = (0, import_core11.useEditor)();
+  const metrics = (0, import_skia6.useCanvasMetrics)();
+  const theme = useTheme();
+  const { snap, layerDragActive, overDeleteTarget } = useInteractionState();
+  const target = (0, import_core11.deleteTargetFromProfile)(profile.interaction?.layers);
+  if (!metrics) return null;
+  const radius = target ? target.radius * metrics.width : 0;
+  const size = radius * 2;
+  const active = overDeleteTarget;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { pointerEvents: "none", style: import_react_native7.StyleSheet.absoluteFill, children: [
+    snap.centerX ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native7.View,
+      {
+        style: {
+          position: "absolute",
+          left: metrics.width / 2 - 1,
+          top: 0,
+          width: 2,
+          height: metrics.height,
+          backgroundColor: theme.colors.accent
+        }
+      }
+    ) : null,
+    snap.centerY ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native7.View,
+      {
+        style: {
+          position: "absolute",
+          top: metrics.height / 2 - 1,
+          left: 0,
+          height: 2,
+          width: metrics.width,
+          backgroundColor: theme.colors.accent
+        }
+      }
+    ) : null,
+    snap.rotation ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native7.View,
+      {
+        style: {
+          position: "absolute",
+          top: theme.spacing.md,
+          alignSelf: "center",
+          backgroundColor: "rgba(0,0,0,0.6)",
+          borderRadius: theme.radii.lg,
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native7.Text,
+          {
+            style: {
+              color: theme.colors.text,
+              fontSize: theme.font.sizeSm,
+              fontWeight: theme.font.weight
+            },
+            children: "Right-angle snap"
+          }
+        )
+      }
+    ) : null,
+    target && layerDragActive ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native7.View,
+      {
+        style: {
+          position: "absolute",
+          left: target.x * metrics.width - radius,
+          top: target.y * metrics.height - radius,
+          width: size,
+          height: size,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native7.View,
+          {
+            style: {
+              width: size,
+              height: size,
+              borderRadius: radius,
+              borderWidth: 2,
+              borderColor: theme.colors.text,
+              // a scrim keeps the target legible over light photos, which a
+              // plain white ring is not
+              backgroundColor: active ? theme.colors.danger : "rgba(0,0,0,0.45)",
+              alignItems: "center",
+              justifyContent: "center",
+              transform: [{ scale: active ? 1.15 : 1 }]
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_react_native7.Text,
+              {
+                style: {
+                  color: theme.colors.text,
+                  fontSize: radius * 0.7,
+                  fontWeight: theme.font.weight
+                },
+                children: "\xD7"
+              }
+            )
+          }
+        )
+      }
+    ) : null,
+    target && layerDragActive ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_react_native7.View,
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: target.y * metrics.height - radius - theme.spacing.lg * 2,
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_react_native7.Text,
+          {
+            style: {
+              color: theme.colors.text,
+              fontSize: theme.font.sizeSm,
+              fontWeight: theme.font.weight,
+              backgroundColor: "rgba(0,0,0,0.45)",
+              paddingHorizontal: theme.spacing.sm,
+              paddingVertical: theme.spacing.xs,
+              borderRadius: theme.radii.sm,
+              overflow: "hidden"
+            },
+            numberOfLines: 1,
+            children: deleteLabel
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+
+// src/ToolPanelHost.tsx
+var import_core25 = require("@pictor-sdk/core");
+var import_react19 = require("react");
+var import_react_native23 = require("react-native");
+
+// src/panels/AdjustPanel.tsx
+var import_core12 = require("@pictor-sdk/core");
+var import_react13 = require("react");
+var import_react_native9 = require("react-native");
+
+// src/components/Slider.tsx
+var import_react12 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_native_gesture_handler6 = require("react-native-gesture-handler");
+var import_react_native_reanimated6 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets6 = require("react-native-worklets");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function applyDetent(value, centered, width = 0.05) {
+  if (centered && Math.abs(value) < width) return 0;
+  return value;
+}
+function Slider({
+  value,
+  min = -1,
+  max = 1,
+  centered = true,
+  onStart,
+  onChange,
+  onEnd,
+  testID,
+  valueLabel,
+  disabled = false
+}) {
+  const theme = useTheme();
+  const [width, setWidth] = (0, import_react12.useState)(0);
+  const widthRef = (0, import_react12.useRef)(0);
+  const startValue = (0, import_react12.useRef)(value);
+  const valueRef = (0, import_react12.useRef)(value);
+  valueRef.current = value;
+  const onLayout = (e) => {
+    setWidth(e.nativeEvent.layout.width);
+    widthRef.current = e.nativeEvent.layout.width;
+  };
+  const handlers = (0, import_react12.useMemo)(() => {
+    const begin = () => {
+      startValue.current = valueRef.current;
+      onStart?.();
+    };
+    const update = (tx) => {
+      const w = widthRef.current;
+      if (w === 0) return;
+      const range = max - min;
+      const raw = startValue.current + tx / w * range;
+      const clamped = Math.min(max, Math.max(min, raw));
+      onChange(applyDetent(clamped, centered && min < 0));
+    };
+    const finish = () => onEnd?.();
+    return { begin, update, finish };
+  }, [min, max, centered, onChange, onStart, onEnd]);
+  const gesture = (0, import_react12.useMemo)(
+    () => import_react_native_gesture_handler6.Gesture.Pan().enabled(!disabled).onStart(() => {
+      "worklet";
+      (0, import_react_native_worklets6.runOnJS)(handlers.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      (0, import_react_native_worklets6.runOnJS)(handlers.update)(e.translationX);
+    }).onFinalize(() => {
+      "worklet";
+      (0, import_react_native_worklets6.runOnJS)(handlers.finish)();
+    }),
+    [handlers, disabled]
+  );
+  const t = (value - min) / (max - min);
+  const thumbX = width * t;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_gesture_handler6.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_react_native_reanimated6.default.View,
+    {
+      testID,
+      onLayout,
+      style: {
+        height: valueLabel ? 58 : 36,
+        justifyContent: "flex-end",
+        paddingBottom: 9,
+        opacity: disabled ? 0.4 : 1
+      },
+      children: [
+        valueLabel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native8.View,
+          {
+            pointerEvents: "none",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: Math.max(0, Math.min(width - 44, thumbX - 22)),
+              width: 44,
+              alignItems: "center",
+              paddingVertical: 3,
+              borderRadius: 10,
+              backgroundColor: theme.colors.surface
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: valueLabel })
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: { height: 2, borderRadius: 1, backgroundColor: theme.colors.track } }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native8.View,
+          {
+            style: {
+              position: "absolute",
+              bottom: 9,
+              left: centered && min < 0 ? Math.min(width / 2, thumbX) : 0,
+              width: centered && min < 0 ? Math.abs(thumbX - width / 2) : thumbX,
+              height: 2,
+              borderRadius: 1,
+              backgroundColor: theme.colors.accent
+            }
+          }
+        ),
+        centered && min < 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native8.View,
+          {
+            style: {
+              position: "absolute",
+              left: width / 2 - 1,
+              width: 2,
+              height: 10,
+              backgroundColor: theme.colors.textMuted
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native8.View,
+          {
+            style: {
+              position: "absolute",
+              bottom: 1,
+              left: Math.max(0, Math.min(width - 18, thumbX - 9)),
+              width: 18,
+              height: 18,
+              borderRadius: 9,
+              backgroundColor: theme.colors.thumb
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/panels/AdjustPanel.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var LABELS = {
+  brightness: "Brightness",
+  contrast: "Contrast",
+  saturation: "Saturation",
+  warmth: "Warmth",
+  tint: "Tint",
+  exposure: "Exposure",
+  highlights: "Highlights",
+  shadows: "Shadows",
+  fade: "Fade",
+  structure: "Structure",
+  sharpen: "Sharpen",
+  grain: "Grain",
+  vignette: "Vignette"
+};
+function AdjustPanel() {
+  const { dispatch } = (0, import_core12.useEditor)();
+  const store = (0, import_core12.useEditorStore)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const keys = store.registry.adjustments;
+  const [activeKey, setActiveKey] = (0, import_react13.useState)(keys[0] ?? "brightness");
+  if (!layer) return null;
+  const adjustments = layer.data.color.adjustments ?? {};
+  const value = adjustments[activeKey] ?? 0;
+  const touchedActive = (0, import_core12.hasAdjustment)(adjustments, activeKey);
+  const resetActive = () => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: (0, import_core12.adjustmentResetPatch)(activeKey)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native9.View, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native9.View, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_react_native9.View,
+        {
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: theme.spacing.sm,
+            minHeight: 28
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              import_react_native9.Text,
+              {
+                style: {
+                  color: theme.colors.textMuted,
+                  textAlign: "center",
+                  fontSize: theme.font.sizeSm
+                },
+                children: [
+                  LABELS[activeKey] ?? activeKey,
+                  " ",
+                  value === 0 ? "" : (value > 0 ? "+" : "") + Math.round(value * 100)
+                ]
+              }
+            ),
+            touchedActive ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_react_native9.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: `Reset ${LABELS[activeKey] ?? activeKey}`,
+                onPress: resetActive,
+                hitSlop: 8,
+                style: {
+                  paddingHorizontal: theme.spacing.sm,
+                  paddingVertical: 2,
+                  borderRadius: theme.radii.sm,
+                  borderWidth: 1,
+                  borderColor: theme.colors.track
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Slider,
+        {
+          value,
+          min: -1,
+          max: 1,
+          centered: true,
+          valueLabel: `${value > 0 ? "+" : ""}${Math.round(value * 100)}`,
+          onStart: () => dispatch({ type: "history/beginBatch", label: activeKey }),
+          onChange: (v) => dispatch({
+            type: "layer/patchData",
+            id: layer.id,
+            patch: { color: { adjustments: { [activeKey]: v } } }
+          }),
+          onEnd: () => dispatch({ type: "history/endBatch" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_native9.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: keys.map((key) => {
+          const touched = (adjustments[key] ?? 0) !== 0;
+          const active = key === activeKey;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            import_react_native9.Pressable,
+            {
+              onPress: () => setActiveKey(key),
+              style: { alignItems: "center", gap: 6, width: 76 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.View, { style: { width: 48, height: 48, borderRadius: 24, borderWidth: 1, borderColor: active ? theme.colors.accent : theme.colors.textMuted, backgroundColor: active ? theme.colors.surface : "transparent", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: { color: active ? theme.colors.accent : theme.colors.text, fontSize: 18 }, children: (LABELS[key] ?? key).slice(0, 1) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  import_react_native9.Text,
+                  {
+                    style: {
+                      color: active ? theme.colors.accent : touched ? theme.colors.text : theme.colors.textMuted,
+                      fontSize: theme.font.sizeSm,
+                      fontWeight: theme.font.weight
+                    },
+                    children: [
+                      LABELS[key] ?? key,
+                      touched ? " \u2022" : ""
+                    ]
+                  }
+                )
+              ]
+            },
+            key
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/panels/AddPhotoPanel.tsx
+var import_core14 = require("@pictor-sdk/core");
+var import_react14 = require("react");
+var import_react_native10 = require("react-native");
+
+// src/panels/addPhotoController.ts
+var import_core13 = require("@pictor-sdk/core");
+function isInsertable(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const source = value.source;
+  return source !== void 0 && source !== null && source !== "";
+}
+function toDenseImages(value) {
+  if (!Array.isArray(value)) return null;
+  const dense = [];
+  for (let index = 0; index < value.length; index++) {
+    if (!(index in value)) return null;
+    const entry = value[index];
+    if (!isInsertable(entry)) return null;
+    dense.push(entry);
+  }
+  return dense;
+}
+function isDispatchable(command) {
+  return typeof command === "object" && command !== null && typeof command.type === "string";
+}
+var InvalidImageResultError = class extends Error {
+  constructor() {
+    super("requestImages resolved with something that is not a list of images");
+    this.name = "InvalidImageResultError";
+  }
+};
+function createAddPhotoController({
+  requestImages,
+  dispatch,
+  select,
+  onError,
+  insert
+}) {
+  let pending = false;
+  let disposed = false;
+  return {
+    isPending: () => pending,
+    isAvailable: () => typeof requestImages === "function",
+    dispose: () => {
+      disposed = true;
+    },
+    async request() {
+      if (!requestImages || pending || disposed) return;
+      pending = true;
+      try {
+        const result = await requestImages();
+        if (disposed) return;
+        if (result === null || result === void 0) return;
+        const images = toDenseImages(result);
+        if (!images) {
+          onError?.(new InvalidImageResultError());
+          return;
+        }
+        if (images.length === 0) return;
+        const layers = (0, import_core13.createImageLayers)(images, insert);
+        const commands = (0, import_core13.insertImageCommands)(layers, insert);
+        if (!commands.every(isDispatchable)) {
+          onError?.(new InvalidImageResultError());
+          return;
+        }
+        for (const command of commands) dispatch(command);
+        const last = layers[layers.length - 1];
+        if (last) select([last.id]);
+      } catch (error) {
+        if (!disposed) onError?.(error);
+      } finally {
+        pending = false;
+      }
+    }
+  };
+}
+
+// src/panels/AddPhotoPanel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function AddPhotoPanel() {
+  const { dispatch, select } = (0, import_core14.useEditor)();
+  const host = useHostCallbacks();
+  const theme = useTheme();
+  const [pending, setPending] = (0, import_react14.useState)(false);
+  const controller = (0, import_react14.useMemo)(
+    () => createAddPhotoController({
+      // Read through the ref at call time, so a host re-creating its closure
+      // does not rebuild the controller mid-request.
+      requestImages: host.current.requestImages ? () => host.current.requestImages() : void 0,
+      dispatch,
+      select,
+      onError: (error) => host.current.onError?.(error)
+    }),
+    [dispatch, select, host]
+  );
+  (0, import_react14.useEffect)(() => () => controller.dispose(), [controller]);
+  const available = controller.isAvailable();
+  const press = async () => {
+    if (!available || pending) return;
+    setPending(true);
+    try {
+      await controller.request();
+    } finally {
+      setPending(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.lg }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_native10.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Add photos",
+        accessibilityState: { disabled: !available || pending },
+        disabled: !available || pending,
+        onPress: press,
+        style: {
+          paddingVertical: theme.spacing.md,
+          borderRadius: theme.radii.sm,
+          borderWidth: 1,
+          borderColor: available ? theme.colors.accent : theme.colors.track,
+          alignItems: "center",
+          opacity: available && !pending ? 1 : 0.45
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_native10.Text,
+          {
+            style: {
+              color: available ? theme.colors.accent : theme.colors.textMuted,
+              fontSize: theme.font.size,
+              fontWeight: theme.font.weight
+            },
+            children: pending ? "Choosing\u2026" : "Add photos"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_native10.Text,
+      {
+        style: {
+          color: theme.colors.textMuted,
+          fontSize: theme.font.sizeSm,
+          textAlign: "center",
+          marginTop: theme.spacing.sm
+        },
+        children: available ? "Pick one or more photos to place on the story" : `Unavailable \u2014 pass \`requestImages\` to <Editor>`
+      }
+    )
+  ] });
+}
+
+// src/panels/ColorPanel.tsx
+var import_core15 = require("@pictor-sdk/core");
+var import_react15 = require("react");
+var import_react_native11 = require("react-native");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TINT_SWATCHES = [
+  "#1f8a8a",
+  "#2f6fd0",
+  "#7a5cd0",
+  "#c04a9e",
+  "#c8443c",
+  "#d99038",
+  "#8a9a3f",
+  "#3f9a6a"
+];
+var ENDS = [
+  { key: "shadows", label: "Shadows" },
+  { key: "highlights", label: "Highlights" }
+];
+var INITIAL_STRENGTH = 0.5;
+function ColorPanel() {
+  const { dispatch } = (0, import_core15.useEditor)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [end, setEnd] = (0, import_react15.useState)("shadows");
+  if (!layer) return null;
+  const data = layer.data;
+  const tint = data.color.tinting?.[end];
+  const active = (0, import_core15.isInertTint)(tint) ? void 0 : tint;
+  const patch = (next) => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: { color: (0, import_core15.tintPatch)(end, next) }
+  });
+  const pick = (color) => patch(
+    active?.color === color ? void 0 : { color, strength: active?.strength ?? INITIAL_STRENGTH }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native11.View, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_native11.View,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: theme.spacing.md,
+          paddingTop: theme.spacing.sm
+        },
+        children: ENDS.map(({ key, label }) => {
+          const selected = key === end;
+          const set = !(0, import_core15.isInertTint)(data.color.tinting?.[key]);
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react_native11.Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: `Tint ${label.toLowerCase()}`,
+              onPress: () => setEnd(key),
+              style: {
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: 6,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.accent : "transparent"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                import_react_native11.Text,
+                {
+                  style: {
+                    color: selected ? theme.colors.accent : theme.colors.textMuted,
+                    fontSize: theme.font.sizeSm,
+                    fontWeight: theme.font.weight
+                  },
+                  children: [
+                    label,
+                    set ? " \u2022" : ""
+                  ]
+                }
+              )
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_react_native11.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: TINT_SWATCHES.map((color) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_react_native11.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Tint ${end} ${color}`,
+            onPress: () => pick(color),
+            style: {
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              backgroundColor: color,
+              borderWidth: active?.color === color ? 3 : 1,
+              borderColor: active?.color === color ? theme.colors.text : theme.colors.track
+            }
+          },
+          color
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native11.View, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_react_native11.View,
+        {
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: theme.spacing.sm,
+            minHeight: 28
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native11.Text, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: active ? `Strength ${Math.round(active.strength * 100)}` : "Pick a colour" }),
+            active ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_react_native11.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: `Reset ${end} tint`,
+                onPress: () => patch(void 0),
+                hitSlop: 8,
+                style: {
+                  paddingHorizontal: theme.spacing.sm,
+                  paddingVertical: 2,
+                  borderRadius: theme.radii.sm,
+                  borderWidth: 1,
+                  borderColor: theme.colors.track
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native11.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Slider,
+        {
+          value: active?.strength ?? 0,
+          min: 0,
+          max: 1,
+          centered: false,
+          testID: "tint-strength",
+          disabled: !active,
+          valueLabel: `${Math.round((active?.strength ?? 0) * 100)}`,
+          onStart: () => dispatch({ type: "history/beginBatch", label: `tint-${end}` }),
+          onChange: (strength) => {
+            if (!active) return;
+            patch({ color: active.color, strength });
+          },
+          onEnd: () => dispatch({ type: "history/endBatch" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/panels/CropPanel.tsx
+var import_core16 = require("@pictor-sdk/core");
+var import_react_native13 = require("react-native");
+
+// src/components/StraightenRuler.tsx
+var import_react16 = require("react");
+var import_react_native12 = require("react-native");
+var import_react_native_gesture_handler7 = require("react-native-gesture-handler");
+var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets7 = require("react-native-worklets");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PX_PER_DEGREE = 60;
+function StraightenRuler({ value, min = -45, max = 45, onStart, onChange, onEnd }) {
+  const theme = useTheme();
+  const start = (0, import_react16.useRef)(value);
+  const current = (0, import_react16.useRef)(value);
+  current.current = value;
+  const handlers = (0, import_react16.useMemo)(() => ({
+    begin: () => {
+      start.current = current.current;
+      onStart?.();
+    },
+    update: (translationX) => {
+      const raw = Math.min(max, Math.max(min, start.current - translationX / PX_PER_DEGREE));
+      onChange(Math.abs(raw) < 0.15 ? 0 : raw);
+    },
+    finish: () => onEnd?.()
+  }), [min, max, onStart, onChange, onEnd]);
+  const gesture = (0, import_react16.useMemo)(() => import_react_native_gesture_handler7.Gesture.Pan().onStart(() => {
+    "worklet";
+    (0, import_react_native_worklets7.runOnJS)(handlers.begin)();
+  }).onUpdate((event) => {
+    "worklet";
+    (0, import_react_native_worklets7.runOnJS)(handlers.update)(event.translationX);
+  }).onFinalize(() => {
+    "worklet";
+    (0, import_react_native_worklets7.runOnJS)(handlers.finish)();
+  }), [handlers]);
+  const rounded = Math.round(value * 10) / 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_gesture_handler7.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native_reanimated7.default.View, { style: { height: 76, overflow: "hidden", justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, alignSelf: "center", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, backgroundColor: theme.colors.surface }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native12.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: [
+      rounded.toFixed(1),
+      "\xB0"
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.View, { style: { height: 34, flexDirection: "row", justifyContent: "center", alignItems: "flex-end", gap: 8 }, children: Array.from({ length: 31 }, (_, index) => {
+      const offset = index - 15;
+      const major = offset % 5 === 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.View, { style: { width: 1, height: major ? 22 : 11, backgroundColor: offset === 0 ? theme.colors.accent : theme.colors.textMuted } }, offset);
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.View, { style: { position: "absolute", bottom: 0, left: "50%", width: 2, height: 30, backgroundColor: theme.colors.accent } })
+  ] }) });
+}
+
+// src/panels/cropMath.ts
+function canvasSizeForAspect(current, aspect) {
+  if (aspect === "free") return current;
+  return { width: current.width, height: Math.round(current.width / aspect) };
+}
+function centeredCropForAspect(intrinsic, aspect) {
+  const sourceAspect = intrinsic.width / intrinsic.height;
+  if (sourceAspect > aspect) {
+    const width = aspect / sourceAspect;
+    return { x: (1 - width) / 2, y: 0, width, height: 1 };
+  }
+  const height = sourceAspect / aspect;
+  return { x: 0, y: (1 - height) / 2, width: 1, height };
+}
+var STRAIGHTEN_LIMIT = 45 * Math.PI / 180;
+function straightenToRadians(value) {
+  return Math.max(-1, Math.min(1, value)) * STRAIGHTEN_LIMIT;
+}
+function radiansToStraighten(rad) {
+  return Math.max(-1, Math.min(1, rad / STRAIGHTEN_LIMIT));
+}
+
+// src/panels/CropPanel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function aspectLabel(aspect) {
+  if (aspect === "free") return "Free";
+  const known = [
+    [4 / 5, "4:5"],
+    [1, "1:1"],
+    [16 / 9, "16:9"],
+    [9 / 16, "9:16"],
+    [3 / 4, "3:4"],
+    [4 / 3, "4:3"]
+  ];
+  for (const [value, label] of known) {
+    if (Math.abs(aspect - value) < 1e-6) return label;
+  }
+  return aspect.toFixed(2);
+}
+function CropPanel() {
+  const { document, dispatch, profile } = (0, import_core16.useEditor)();
+  (0, import_core16.useEditorStore)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  if (!layer) return null;
+  const data = layer.data;
+  const straighten = data.straighten ?? 0;
+  const applyAspect = (aspect) => {
+    const nextSize = canvasSizeForAspect(document.size, aspect);
+    dispatch({ type: "history/beginBatch", label: "aspect" });
+    dispatch({ type: "doc/patch", patch: { size: nextSize } });
+    dispatch({ type: "layer/patchData", id: layer.id, patch: { crop: void 0 } });
+    dispatch({
+      type: "layer/transform",
+      id: layer.id,
+      patch: {
+        x: 0.5,
+        y: 0.5,
+        scale: (0, import_core16.cropFitScale)(data.intrinsic, nextSize, profile.interaction?.crop?.fit ?? "contain")
+      }
+    });
+    dispatch({ type: "history/endBatch" });
+  };
+  const rotate90 = () => {
+    const current = layer.transform.rotation;
+    const rotation = current + Math.PI / 2;
+    dispatch({
+      type: "layer/transform",
+      id: layer.id,
+      patch: {
+        rotation,
+        x: 0.5,
+        y: 0.5,
+        scale: (0, import_core16.cropFitScale)(data.intrinsic, document.size, profile.interaction?.crop?.fit ?? "contain", rotation)
+      }
+    });
+  };
+  const flip = (axis) => dispatch({
+    type: "layer/transform",
+    id: layer.id,
+    patch: (0, import_core16.flipPatch)(layer.transform, axis)
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_native13.View, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native13.View, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      StraightenRuler,
+      {
+        value: straighten * 180 / Math.PI,
+        min: -45,
+        max: 45,
+        onStart: () => dispatch({ type: "history/beginBatch", label: "straighten" }),
+        onChange: (v) => dispatch({
+          type: "layer/patchData",
+          id: layer.id,
+          patch: { straighten: v * Math.PI / 180 }
+        }),
+        onEnd: () => dispatch({ type: "history/endBatch" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      import_react_native13.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_react_native13.Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Rotate 90 degrees",
+              onPress: rotate90,
+              style: {
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                borderRadius: theme.radii.md,
+                backgroundColor: theme.colors.surface
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native13.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: "\u27F3 90\xB0" })
+            }
+          ),
+          ["horizontal", "vertical"].map((axis) => {
+            const on = (0, import_core16.isFlipped)(layer.transform, axis);
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_react_native13.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: `Flip ${axis}`,
+                accessibilityState: { selected: on },
+                onPress: () => flip(axis),
+                style: {
+                  paddingHorizontal: theme.spacing.md,
+                  paddingVertical: theme.spacing.sm,
+                  borderRadius: theme.radii.md,
+                  backgroundColor: theme.colors.surface,
+                  borderWidth: 1,
+                  borderColor: on ? theme.colors.accent : "transparent"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  import_react_native13.Text,
+                  {
+                    style: {
+                      color: on ? theme.colors.accent : theme.colors.text,
+                      fontSize: theme.font.sizeSm,
+                      fontWeight: theme.font.weight
+                    },
+                    children: axis === "horizontal" ? "\u21CB" : "\u21C5"
+                  }
+                )
+              },
+              axis
+            );
+          }),
+          profile.aspects.map((aspect, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_react_native13.Pressable,
+            {
+              onPress: () => applyAspect(aspect),
+              style: {
+                width: 58,
+                height: 48,
+                borderRadius: theme.radii.md,
+                borderWidth: 1,
+                borderColor: theme.colors.textMuted,
+                backgroundColor: "transparent",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native13.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: aspectLabel(aspect) })
+            },
+            i
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/panels/DrawPanel.tsx
+var import_react_native14 = require("react-native");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var BRUSHES = [
+  { id: "pen", label: "Pen" },
+  { id: "marker", label: "Marker" },
+  { id: "neon", label: "Neon" },
+  { id: "highlighter", label: "Highlight" },
+  { id: "eraser", label: "Eraser" }
+];
+var SWATCHES = [
+  "#ffffff",
+  "#000000",
+  "#ed4956",
+  "#ffb43b",
+  "#ffe25c",
+  "#78de85",
+  "#4dc4ff",
+  "#3897f0",
+  "#a15fed",
+  "#d977b1"
+];
+function DrawPanel() {
+  const theme = useTheme();
+  const [brush, setBrush] = useUiState("draw.brush", DEFAULT_BRUSH);
+  const [eyedropper, setEyedropper] = useUiState("draw.eyedropper", false);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native14.View, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native14.View, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Slider,
+      {
+        value: brush.width,
+        min: 2e-3,
+        max: 0.06,
+        centered: false,
+        onChange: (width) => setBrush({ ...brush, width })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_react_native14.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center" },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native14.Pressable,
+            {
+              onPress: () => setEyedropper(!eyedropper),
+              style: {
+                width: 28,
+                height: 28,
+                borderRadius: 14,
+                borderWidth: 2,
+                borderColor: eyedropper ? theme.colors.accent : theme.colors.textMuted,
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native14.Text, { style: { color: theme.colors.text, fontSize: 13 }, children: "\u{1F4A7}" })
+            }
+          ),
+          SWATCHES.map((color) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            import_react_native14.Pressable,
+            {
+              onPress: () => setBrush({ ...brush, color }),
+              style: {
+                width: 26,
+                height: 26,
+                borderRadius: 13,
+                backgroundColor: color,
+                borderWidth: brush.color === color ? 3 : 1,
+                borderColor: brush.color === color ? theme.colors.accent : theme.colors.track
+              }
+            },
+            color
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_native14.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: BRUSHES.map((b) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_react_native14.Pressable,
+          {
+            onPress: () => setBrush({ ...brush, brush: b.id }),
+            style: {
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              borderRadius: theme.radii.md,
+              backgroundColor: brush.brush === b.id ? theme.colors.surface : "transparent"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_react_native14.Text,
+              {
+                style: {
+                  color: brush.brush === b.id ? theme.colors.accent : theme.colors.text,
+                  fontSize: theme.font.sizeSm,
+                  fontWeight: theme.font.weight
+                },
+                children: b.label
+              }
+            )
+          },
+          b.id
+        ))
+      }
+    )
+  ] });
+}
+
+// src/panels/FilterStrip.tsx
+var import_core17 = require("@pictor-sdk/core");
+var import_skia7 = require("@pictor-sdk/skia");
+var import_react_native_skia = require("@shopify/react-native-skia");
+var import_react17 = require("react");
+var import_react_native15 = require("react-native");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var THUMB = 84;
+function useBaseImageLayer() {
+  const { document } = (0, import_core17.useEditor)();
+  return (0, import_core17.baseImageLayer)(document);
+}
+function Thumb({ lut, label, active }) {
+  const { document } = (0, import_core17.useEditor)();
+  const renderer = (0, import_skia7.useRenderer)();
+  const theme = useTheme();
+  const [image, setImage] = (0, import_react17.useState)(null);
+  const lutId = lut?.id;
+  const lutIntensity = lut?.intensity;
+  (0, import_react17.useEffect)(() => {
+    let alive = true;
+    const requestedLut = lutId === void 0 ? void 0 : { id: lutId, intensity: lutIntensity ?? 1 };
+    renderer.renderThumbnailImage(document, requestedLut, THUMB).then((img) => alive && setImage(img)).catch(() => {
+    });
+    return () => {
+      alive = false;
+    };
+  }, [renderer, document, lutId, lutIntensity]);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native15.View, { style: { alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_native15.Text,
+      {
+        style: {
+          color: active ? theme.colors.accent : theme.colors.textMuted,
+          fontSize: theme.font.sizeSm
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_react_native15.View,
+      {
+        style: {
+          width: THUMB,
+          height: THUMB,
+          borderRadius: theme.radii.sm,
+          overflow: "hidden",
+          borderWidth: active ? 2 : 0,
+          borderColor: theme.colors.accent,
+          backgroundColor: theme.colors.surface
+        },
+        children: image ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_skia.Canvas, { style: { width: THUMB, height: THUMB }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native_skia.Image, { image, x: 0, y: 0, width: THUMB, height: THUMB, fit: "cover" }) }) : null
+      }
+    )
+  ] });
+}
+function FilterStrip() {
+  const { dispatch } = (0, import_core17.useEditor)();
+  const luts = (0, import_core17.useLuts)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [intensityFor, setIntensityFor] = (0, import_react17.useState)(null);
+  if (!layer) return null;
+  const color = layer.data.color;
+  const activeLut = color.lut;
+  const applyLut = (lutId) => {
+    if (lutId === null) {
+      dispatch({ type: "layer/patchData", id: layer.id, patch: { color: { lut: void 0 } } });
+      setIntensityFor(null);
+      return;
+    }
+    if (activeLut?.id === lutId) {
+      setIntensityFor((cur) => cur === lutId ? null : lutId);
+      return;
+    }
+    dispatch({
+      type: "layer/patchData",
+      id: layer.id,
+      patch: { color: { lut: { id: lutId, intensity: 1 } } }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native15.View, { style: { backgroundColor: theme.colors.background }, children: [
+    intensityFor && activeLut?.id === intensityFor ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native15.View, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Slider,
+      {
+        value: activeLut.intensity,
+        min: 0,
+        max: 1,
+        centered: false,
+        valueLabel: `${Math.round(activeLut.intensity * 100)}`,
+        onStart: () => dispatch({ type: "history/beginBatch", label: "intensity" }),
+        onChange: (intensity) => dispatch({
+          type: "layer/patchData",
+          id: layer.id,
+          patch: { color: { lut: { id: intensityFor, intensity } } }
+        }),
+        onEnd: () => dispatch({ type: "history/endBatch" })
+      }
+    ) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      import_react_native15.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native15.Pressable, { onPress: () => applyLut(null), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Thumb, { lut: void 0, label: "Original", active: !activeLut }) }),
+          luts.map((lut) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native15.Pressable, { onPress: () => applyLut(lut.id), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Thumb,
+            {
+              lut: { id: lut.id, intensity: 1 },
+              label: lut.label,
+              active: activeLut?.id === lut.id
+            }
+          ) }, lut.id))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/panels/LayoutPanel.tsx
+var import_core18 = require("@pictor-sdk/core");
+var import_react_native16 = require("react-native");
+
+// src/panels/layoutMath.ts
+function layoutCells(preset, _doc) {
+  switch (preset) {
+    case "1":
+      return [{ x: 0.5, y: 0.5, scale: 1 }];
+    case "2v":
+      return [
+        { x: 0.5, y: 0.25, scale: 1 },
+        { x: 0.5, y: 0.75, scale: 1 }
+      ];
+    case "2h":
+      return [
+        { x: 0.25, y: 0.5, scale: 0.5 },
+        { x: 0.75, y: 0.5, scale: 0.5 }
+      ];
+    case "3v":
+      return [
+        { x: 0.5, y: 1 / 6, scale: 1 },
+        { x: 0.5, y: 0.5, scale: 1 },
+        { x: 0.5, y: 5 / 6, scale: 1 }
+      ];
+    case "4grid":
+      return [
+        { x: 0.25, y: 0.25, scale: 0.5 },
+        { x: 0.75, y: 0.25, scale: 0.5 },
+        { x: 0.25, y: 0.75, scale: 0.5 },
+        { x: 0.75, y: 0.75, scale: 0.5 }
+      ];
+    default: {
+      const _exhaustive = preset;
+      void _exhaustive;
+      return [{ x: 0.5, y: 0.5, scale: 1 }];
+    }
+  }
+}
+function cellToTransformPatch(cell) {
+  return { x: cell.x, y: cell.y, scale: cell.scale, rotation: 0 };
+}
+
+// src/panels/LayoutPanel.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var PRESETS = [
+  { id: "1", label: "Single" },
+  { id: "2v", label: "2 rows" },
+  { id: "2h", label: "2 cols" },
+  { id: "3v", label: "3 rows" },
+  { id: "4grid", label: "Grid" }
+];
+function LayoutPanel() {
+  const { document, dispatch } = (0, import_core18.useEditor)();
+  const theme = useTheme();
+  const apply = (preset) => {
+    const cells = layoutCells(preset, document.size);
+    const images = document.layers.filter((l) => l.type === "image");
+    dispatch({ type: "history/beginBatch", label: "layout" });
+    images.slice(0, cells.length).forEach((layer, i) => {
+      dispatch({ type: "layer/transform", id: layer.id, patch: cellToTransformPatch(cells[i]) });
+    });
+    dispatch({ type: "history/endBatch" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_react_native16.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+      style: { flexGrow: 0, backgroundColor: theme.colors.background },
+      children: PRESETS.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_react_native16.Pressable,
+        {
+          onPress: () => apply(preset.id),
+          style: {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.surface
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native16.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: preset.label })
+        },
+        preset.id
+      ))
+    }
+  );
+}
+
+// src/panels/LuxPanel.tsx
+var import_core19 = require("@pictor-sdk/core");
+var import_skia8 = require("@pictor-sdk/skia");
+var import_react_native17 = require("react-native");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function LuxPanel() {
+  const { dispatch } = (0, import_core19.useEditor)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const data = layer?.data;
+  const proposal = (0, import_skia8.useLuxAnalysis)(data?.source);
+  if (!layer || !data) return null;
+  const stored = data.color.lux;
+  const intensity = stored?.intensity ?? 0;
+  const state = (0, import_core19.luxControlState)(stored, proposal);
+  const setIntensity = (value) => {
+    const lux = (0, import_core19.luxIntensityPatch)(state, value);
+    if (!lux) return;
+    dispatch({ type: "layer/patchData", id: layer.id, patch: { color: { lux } } });
+  };
+  const reset = () => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: { color: { lux: void 0 } }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native17.View, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react_native17.View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.spacing.sm,
+          minHeight: 28
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react_native17.Text,
+            {
+              style: {
+                color: theme.colors.textMuted,
+                textAlign: "center",
+                fontSize: theme.font.sizeSm
+              },
+              children: state.pending ? "Analyzing\u2026" : `Lux ${intensity === 0 ? "" : Math.round(intensity * 100)}`
+            }
+          ),
+          intensity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            import_react_native17.Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Reset Lux",
+              onPress: reset,
+              hitSlop: 8,
+              style: {
+                paddingHorizontal: theme.spacing.sm,
+                paddingVertical: 2,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: theme.colors.track
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      Slider,
+      {
+        value: intensity,
+        min: 0,
+        max: 1,
+        centered: false,
+        disabled: !state.interactive,
+        testID: "lux-slider",
+        valueLabel: `${Math.round(intensity * 100)}`,
+        onStart: () => dispatch({ type: "history/beginBatch", label: "lux" }),
+        onChange: setIntensity,
+        onEnd: () => dispatch({ type: "history/endBatch" })
+      }
+    )
+  ] }) });
+}
+
+// src/panels/MediaPanel.tsx
+var import_core20 = require("@pictor-sdk/core");
+var import_skia9 = require("@pictor-sdk/skia");
+var import_react_native18 = require("react-native");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function MediaPanel() {
+  const { document, dispatch, profile } = (0, import_core20.useEditor)();
+  const layer = useBaseMediaLayer();
+  const theme = useTheme();
+  const data = layer?.data;
+  const resolved = (0, import_skia9.useResolvedImageSize)(data?.source);
+  if (!layer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native18.View, { style: { padding: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native18.Text, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: "This document has no base photo." }) });
+  }
+  const reset = () => {
+    const config = (0, import_core20.mediaConfigFromProfile)(profile.interaction?.media);
+    dispatch({
+      type: "layer/transform",
+      id: layer.id,
+      patch: (0, import_core20.initialMediaTransform)(
+        (0, import_skia9.preferResolvedSize)(resolved, data?.intrinsic),
+        document.size,
+        config
+      )
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native18.View, { style: { padding: theme.spacing.lg, gap: theme.spacing.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native18.Text, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: "Drag to reposition \xB7 pinch to zoom \xB7 twist to rotate \xB7 double-tap to zoom" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_react_native18.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Reset photo placement",
+        onPress: reset,
+        style: {
+          alignSelf: "flex-start",
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.sm,
+          borderRadius: theme.radii.md,
+          backgroundColor: theme.colors.surface
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native18.Text, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Reset" })
+      }
+    )
+  ] });
+}
+
+// src/panels/LayersPanel.tsx
+var import_core21 = require("@pictor-sdk/core");
+var import_react_native19 = require("react-native");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function LayersPanel() {
+  const { document, selection, select, dispatch, profile } = (0, import_core21.useEditor)();
+  const theme = useTheme();
+  const layers = layersForPanel(document, profile.interaction?.layers);
+  const minimumIndex = minimumLayerIndexForPanel(document, profile.interaction?.layers);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.ScrollView, { style: { maxHeight: 220, backgroundColor: theme.colors.background }, children: layers.map(({ layer, index }) => {
+    const selected = selection.includes(layer.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      import_react_native19.View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs,
+          backgroundColor: selected ? theme.colors.surface : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Pressable, { style: { flex: 1 }, onPress: () => select([layer.id]), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: { color: selected ? theme.colors.accent : theme.colors.text, fontSize: theme.font.sizeSm }, children: layer.name ?? `${layer.type} \xB7 ${layer.id.slice(0, 6)}` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_react_native19.Pressable,
+            {
+              disabled: index === document.layers.length - 1,
+              onPress: () => dispatch({ type: "layer/reorder", id: layer.id, to: index + 1 }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: { color: theme.colors.textMuted }, children: "\u25B2" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_react_native19.Pressable,
+            {
+              disabled: index === minimumIndex,
+              onPress: () => dispatch({ type: "layer/reorder", id: layer.id, to: index - 1 }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: { color: theme.colors.textMuted }, children: "\u25BC" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_react_native19.Pressable,
+            {
+              onPress: () => dispatch({ type: "layer/remove", id: layer.id }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: { color: theme.colors.danger }, children: "\u2715" })
+            }
+          )
+        ]
+      },
+      layer.id
+    );
+  }) });
+}
+function minimumLayerIndexForPanel(document, interaction) {
+  return interaction?.excludeBaseImage && document.layers[0]?.type === "image" ? 1 : 0;
+}
+function layersForPanel(document, interaction) {
+  return document.layers.map((layer, index) => ({ layer, index })).filter(({ layer, index }) => (0, import_core21.isDirectManipulationLayer)(layer, index, interaction)).reverse();
+}
+
+// src/panels/PerspectivePanel.tsx
+var import_core22 = require("@pictor-sdk/core");
+var import_react18 = require("react");
+var import_react_native20 = require("react-native");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var MAX_STRAIGHTEN_DEGREES = import_core22.MAX_PERSPECTIVE_DEGREES;
+var MODES = [
+  { key: "vertical", label: "Vertical" },
+  { key: "straighten", label: "Straighten" },
+  { key: "horizontal", label: "Horizontal" }
+];
+var toRadians = (degrees) => degrees * Math.PI / 180;
+var toDegrees = (radians) => radians * 180 / Math.PI;
+function PerspectivePanel() {
+  const { dispatch } = (0, import_core22.useEditor)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [mode, setMode] = (0, import_react18.useState)("vertical");
+  if (!layer) return null;
+  const data = layer.data;
+  const perspective = data.perspective ?? { vertical: 0, horizontal: 0 };
+  const straightenDegrees = toDegrees(data.straighten ?? 0);
+  const degreesOf = (key) => key === "straighten" ? straightenDegrees : perspective[key] * import_core22.MAX_PERSPECTIVE_DEGREES;
+  const setDegrees = (key, degrees) => {
+    if (key === "straighten") {
+      return dispatch({
+        type: "layer/patchData",
+        id: layer.id,
+        patch: { straighten: degrees === 0 ? void 0 : toRadians(degrees) }
+      });
+    }
+    const next = { ...perspective, [key]: degrees / import_core22.MAX_PERSPECTIVE_DEGREES };
+    dispatch({
+      type: "layer/patchData",
+      id: layer.id,
+      // `perspectivePatch` deletes the key when both axes reach zero, so
+      // straightening a correction back out leaves nothing serialized.
+      patch: (0, import_core22.perspectivePatch)((0, import_core22.needsPerspective)(next) ? next : void 0)
+    });
+  };
+  const value = degreesOf(mode);
+  const max = mode === "straighten" ? MAX_STRAIGHTEN_DEGREES : import_core22.MAX_PERSPECTIVE_DEGREES;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native20.View, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react_native20.View,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: theme.spacing.sm,
+          paddingVertical: theme.spacing.sm
+        },
+        children: MODES.map(({ key, label }) => {
+          const selected = key === mode;
+          const degrees = degreesOf(key);
+          const set = Math.abs(degrees) > 0.05;
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            import_react_native20.Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: `${label} correction`,
+              onPress: () => setMode(key),
+              style: {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: 6,
+                paddingHorizontal: theme.spacing.sm,
+                paddingVertical: 6,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.accent : theme.colors.track
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  import_react_native20.Text,
+                  {
+                    style: {
+                      color: selected ? theme.colors.accent : theme.colors.textMuted,
+                      fontSize: theme.font.sizeSm,
+                      fontWeight: theme.font.weight
+                    },
+                    children: set ? `${label} ${degrees.toFixed(1)}\xB0` : label
+                  }
+                ),
+                set ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  import_react_native20.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Reset ${label.toLowerCase()}`,
+                    onPress: () => setDegrees(key, 0),
+                    hitSlop: 8,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native20.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "\u2715" })
+                  }
+                ) : null
+              ]
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native20.View, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      Slider,
+      {
+        value,
+        min: -max,
+        max,
+        centered: true,
+        testID: `perspective-${mode}`,
+        valueLabel: `${value > 0 ? "+" : ""}${value.toFixed(1)}\xB0`,
+        onStart: () => dispatch({ type: "history/beginBatch", label: `perspective-${mode}` }),
+        onChange: (v) => setDegrees(mode, v),
+        onEnd: () => dispatch({ type: "history/endBatch" })
+      }
+    ) })
+  ] });
+}
+
+// src/panels/StickerPanel.tsx
+var import_core23 = require("@pictor-sdk/core");
+var import_react_native21 = require("react-native");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function StickerPanel() {
+  const { dispatch, select } = (0, import_core23.useEditor)();
+  const theme = useTheme();
+  const [stickers] = useUiState("stickers", []);
+  const add = (sticker) => {
+    const id = (0, import_core23.createId)("sticker");
+    dispatch({
+      type: "layer/add",
+      layer: {
+        id,
+        type: "sticker",
+        transform: { x: 0.5, y: 0.5, scale: 1, rotation: 0 },
+        opacity: 1,
+        blendMode: "normal",
+        data: {
+          source: sticker.source,
+          intrinsic: sticker.intrinsic ?? { width: 0, height: 0 }
+        }
+      }
+    });
+    select([id]);
+  };
+  if (stickers.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native21.View, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.md }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native21.Text, { style: { color: theme.colors.textMuted, textAlign: "center", fontSize: theme.font.sizeSm }, children: [
+      "No stickers registered \u2014 pass `stickers` to ",
+      "<Editor>",
+      "."
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_react_native21.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+      style: { flexGrow: 0, backgroundColor: theme.colors.background },
+      children: stickers.map((sticker) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native21.Pressable, { onPress: () => add(sticker), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react_native21.Image,
+        {
+          source: sticker.source,
+          style: { width: 64, height: 64, borderRadius: theme.radii.sm, backgroundColor: theme.colors.surface },
+          resizeMode: "contain"
+        }
+      ) }, sticker.id))
+    }
+  );
+}
+
+// src/panels/TiltShiftPanel.tsx
+var import_core24 = require("@pictor-sdk/core");
+var import_react_native22 = require("react-native");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var MODES2 = [
+  { key: "off", label: "Off" },
+  { key: "radial", label: "Radial" },
+  { key: "linear", label: "Linear" }
+];
+function TiltShiftPanel() {
+  const { dispatch } = (0, import_core24.useEditor)();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  if (!layer) return null;
+  const data = layer.data;
+  const tilt = (0, import_core24.needsTiltShift)(data.tiltShift) ? data.tiltShift : void 0;
+  const mode = tilt?.mode ?? "off";
+  const patch = (next) => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: (0, import_core24.tiltShiftPatch)(next)
+  });
+  const setMode = (key) => {
+    if (key === "off") return patch(void 0);
+    patch(tilt ? { ...tilt, mode: key } : (0, import_core24.createTiltShift)(key));
+  };
+  const set = (over) => tilt && patch({ ...tilt, ...over });
+  const sliders = [
+    { key: "blur", label: "Blur", max: import_core24.MAX_TILT_BLUR },
+    { key: "radius", label: "Size", max: import_core24.MAX_TILT_RADIUS },
+    { key: "feather", label: "Feather", max: import_core24.MAX_TILT_FEATHER }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native22.View, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_react_native22.View,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: theme.spacing.md,
+          paddingVertical: theme.spacing.sm
+        },
+        children: MODES2.map(({ key, label }) => {
+          const selected = key === mode;
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            import_react_native22.Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: `Tilt shift ${label.toLowerCase()}`,
+              onPress: () => setMode(key),
+              style: {
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: 6,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.accent : theme.colors.track
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_react_native22.Text,
+                {
+                  style: {
+                    color: selected ? theme.colors.accent : theme.colors.textMuted,
+                    fontSize: theme.font.sizeSm,
+                    fontWeight: theme.font.weight
+                  },
+                  children: label
+                }
+              )
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native22.View, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        import_react_native22.Text,
+        {
+          style: {
+            color: theme.colors.textMuted,
+            textAlign: "center",
+            fontSize: theme.font.sizeSm,
+            minHeight: 20
+          },
+          children: tilt ? "Drag on the photo to place the focus" : "Off"
+        }
+      ),
+      sliders.map(({ key, label, max }) => {
+        const value = tilt?.[key] ?? 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native22.View, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native22.Text, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: [
+            label,
+            " ",
+            tilt ? Math.round(value / max * 100) : ""
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            Slider,
+            {
+              value,
+              min: 0,
+              max,
+              centered: false,
+              testID: `tilt-${key}`,
+              disabled: !tilt,
+              onStart: () => dispatch({ type: "history/beginBatch", label: `tilt-${key}` }),
+              onChange: (v) => set({ [key]: v }),
+              onEnd: () => dispatch({ type: "history/endBatch" })
+            }
+          )
+        ] }, key);
+      })
+    ] })
+  ] });
+}
+
+// src/ToolPanelHost.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function resolvePanel(toolId, pluginPanel, builtins = BUILTIN_PANELS) {
+  if (!toolId) return null;
+  if (pluginPanel) return pluginPanel;
+  return builtins[toolId] ?? null;
+}
+var BUILTIN_PANELS = {
+  media: MediaPanel,
+  addPhoto: AddPhotoPanel,
+  filter: FilterStrip,
+  adjust: AdjustPanel,
+  lux: LuxPanel,
+  color: ColorPanel,
+  tilt: TiltShiftPanel,
+  perspective: PerspectivePanel,
+  crop: CropPanel,
+  draw: DrawPanel,
+  sticker: StickerPanel,
+  layout: LayoutPanel,
+  layers: LayersPanel
+};
+function ToolPanelHost() {
+  const { activeTool, document, selection, dispatch, setActiveTool } = (0, import_core25.useEditor)();
+  const tools = (0, import_core25.useTools)();
+  const tool = tools.find((t) => t.id === activeTool);
+  const Panel = resolvePanel(activeTool, tool?.Panel);
+  const theme = useTheme();
+  const finalized = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
+    if (!activeTool || !Panel) return;
+    finalized.current = false;
+    dispatch({ type: "history/beginBatch", label: activeTool });
+    return () => {
+      if (!finalized.current) dispatch({ type: "history/cancelBatch" });
+    };
+  }, [activeTool, Panel, dispatch]);
+  if (!Panel) return null;
+  const done = () => {
+    finalized.current = true;
+    dispatch({ type: "history/endBatch" });
+    setActiveTool(null);
+  };
+  const cancel = () => {
+    finalized.current = true;
+    dispatch({ type: "history/cancelBatch" });
+    setActiveTool(null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native23.View, { style: { backgroundColor: theme.colors.background, borderTopLeftRadius: theme.radii.lg, borderTopRightRadius: theme.radii.lg, overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Panel, { document, selection, dispatch, close: done }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native23.View, { style: { height: 52, flexDirection: "row", alignItems: "center", justifyContent: "space-between", borderTopWidth: 1, borderTopColor: theme.colors.track, paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native23.Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel edits", onPress: cancel, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native23.Text, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Cancel" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native23.Text, { style: { color: theme.colors.text, fontSize: theme.font.size, fontWeight: theme.font.weight }, children: tool?.label ?? activeTool }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native23.Pressable, { accessibilityRole: "button", accessibilityLabel: "Apply edits", onPress: done, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native23.Text, { style: { color: theme.colors.accent, fontSize: theme.font.size, fontWeight: theme.font.weight }, children: "Done" }) })
+    ] })
+  ] });
+}
+
+// src/composer/TextComposer.tsx
+var import_core27 = require("@pictor-sdk/core");
+var import_react21 = require("react");
+var import_react_native24 = require("react-native");
+
+// src/composer/keyboardLayout.ts
+var HIDDEN_KEYBOARD = { height: 0 };
+var MAX_DURATION = 400;
+var FALLBACK_DURATION = 180;
+function composerInsets(frame, safeAreaBottom = 0) {
+  const height = Number.isFinite(frame.height) ? Math.max(0, frame.height) : 0;
+  const visible = height > 0;
+  const raw = frame.duration;
+  const duration = raw === void 0 || !Number.isFinite(raw) || raw <= 0 ? FALLBACK_DURATION : Math.min(MAX_DURATION, raw);
+  return {
+    bottom: visible ? height : Math.max(0, safeAreaBottom),
+    keyboardVisible: visible,
+    duration
+  };
+}
+function fitCanvasRect(container, document) {
+  if (container.width <= 0 || container.height <= 0 || document.width <= 0 || document.height <= 0) {
+    return { width: 0, height: 0, left: 0, top: 0 };
+  }
+  const scale = Math.min(container.width / document.width, container.height / document.height);
+  const width = document.width * scale;
+  const height = document.height * scale;
+  return {
+    width,
+    height,
+    left: (container.width - width) / 2,
+    top: (container.height - height) / 2
+  };
+}
+
+// src/composer/useTextSession.ts
+var import_core26 = require("@pictor-sdk/core");
+var import_react20 = require("react");
+function useTextSession(options = {}) {
+  const { document, dispatch, profile, selection, select } = (0, import_core26.useEditor)();
+  const { layerId: requestedId, onFinished } = options;
+  const [session] = (0, import_react20.useState)(
+    () => (0, import_core26.resolveTextSession)(document.layers, requestedId ? [requestedId] : selection)
+  );
+  const [draftId, setDraftId] = (0, import_react20.useState)(null);
+  const finished = (0, import_react20.useRef)(false);
+  const priorSelection = (0, import_react20.useRef)([]);
+  const capturedPrior = (0, import_react20.useRef)(false);
+  if (!capturedPrior.current) {
+    capturedPrior.current = true;
+    priorSelection.current = [...selection];
+  }
+  const latest = (0, import_react20.useRef)({ document, dispatch, select, selection, profile });
+  latest.current = { document, dispatch, select, selection, profile };
+  (0, import_react20.useEffect)(() => {
+    latest.current.dispatch({ type: "history/beginBatch", label: "text" });
+    if (session.kind === "draft") {
+      const draft = (0, import_core26.createTextDraft)(latest.current.profile);
+      setDraftId(draft.id);
+      latest.current.dispatch({ type: "layer/add", layer: draft });
+      latest.current.select([draft.id]);
+    } else if (session.layerId) {
+      const layer2 = latest.current.document.layers.find((l) => l.id === session.layerId);
+      const layerData = layer2?.data;
+      if (layerData && (0, import_core26.needsSpanCollapse)(layerData)) {
+        latest.current.dispatch({
+          type: "layer/patchData",
+          id: session.layerId,
+          patch: { spans: (0, import_core26.collapseTextSpans)(layerData).spans }
+        });
+      }
+    }
+    return () => {
+      if (finished.current) return;
+      finished.current = true;
+      latest.current.dispatch({ type: "history/cancelBatch" });
+      latest.current.select(priorSelection.current);
+    };
+  }, []);
+  const layerId = session.kind === "existing" ? session.layerId : draftId;
+  const layer = layerId ? document.layers.find((l) => l.id === layerId) : void 0;
+  const data = layer ? layer.data : void 0;
+  const span = data ? (0, import_core26.textSpanOf)(data) : void 0;
+  const value = data ? (0, import_core26.textValueOf)(data) : "";
+  const idRef = (0, import_react20.useRef)(null);
+  idRef.current = layerId ?? null;
+  const dataRef = (0, import_react20.useRef)(void 0);
+  dataRef.current = data;
+  const patchData = (0, import_react20.useCallback)((patch) => {
+    const id = idRef.current;
+    if (!id) return;
+    latest.current.dispatch({ type: "layer/patchData", id, patch });
+  }, []);
+  const setValue = (0, import_react20.useCallback)(
+    (next) => {
+      const current = dataRef.current;
+      if (!current) return;
+      patchData({ spans: (0, import_core26.patchTextSpan)(current, { text: next }).spans });
+    },
+    [patchData]
+  );
+  const styleSpan = (0, import_react20.useCallback)(
+    (patch) => {
+      const current = dataRef.current;
+      if (!current) return;
+      patchData({ spans: (0, import_core26.patchTextSpan)(current, patch).spans });
+    },
+    [patchData]
+  );
+  const setSize = (0, import_react20.useCallback)(
+    (size) => styleSpan({ fontSize: (0, import_core26.clampTextSize)(size) }),
+    [styleSpan]
+  );
+  const commit = (0, import_react20.useCallback)(() => {
+    if (finished.current) return null;
+    finished.current = true;
+    const id = idRef.current;
+    const blank = (0, import_core26.isBlankText)(dataRef.current ? (0, import_core26.textValueOf)(dataRef.current) : "");
+    if (session.kind === "draft" && blank) {
+      latest.current.dispatch({ type: "history/cancelBatch" });
+      latest.current.select(priorSelection.current);
+      onFinished?.(null);
+      return null;
+    }
+    latest.current.dispatch({ type: "history/endBatch" });
+    onFinished?.(id ?? null);
+    return id ?? null;
+  }, [session.kind, onFinished]);
+  const cancel = (0, import_react20.useCallback)(() => {
+    if (finished.current) return;
+    finished.current = true;
+    latest.current.dispatch({ type: "history/cancelBatch" });
+    latest.current.select(priorSelection.current);
+    onFinished?.(null);
+  }, [onFinished]);
+  return (0, import_react20.useMemo)(
+    () => ({
+      layer,
+      kind: session.kind,
+      value,
+      setValue,
+      span,
+      data,
+      styleSpan,
+      styleText: patchData,
+      setSize,
+      commit,
+      cancel
+    }),
+    [layer, session.kind, value, setValue, span, data, styleSpan, patchData, setSize, commit, cancel]
+  );
+}
+
+// src/composer/TextComposer.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SWATCHES2 = ["#ffffff", "#000000", "#ed4956", "#ffe25c", "#78de85", "#4dc4ff", "#a15fed"];
+var ALIGNS = ["left", "center", "right"];
+var ALIGN_GLYPH = { left: "\u21E4", center: "\u2630", right: "\u21E5" };
+var FILL_MODES = [void 0, "solid", "perLine"];
+var STROKE_WIDTHS = [void 0, 2e-3, 5e-3];
+var SHADOWS = [
+  void 0,
+  { color: "#000000", blur: 0.012, dx: 2e-3, dy: 4e-3 },
+  { color: "#000000", blur: 2e-3, dx: 6e-3, dy: 8e-3 }
+];
+function TextComposer({ session, insets, onDone, onCancel }) {
+  const theme = useTheme();
+  const store = (0, import_core27.useEditorStore)();
+  const { document } = (0, import_core27.useEditor)();
+  const [container, setContainer] = (0, import_react21.useState)({ width: 0, height: 0 });
+  const input = (0, import_react21.useRef)(null);
+  const [selectionRange, setSelectionRange] = (0, import_react21.useState)(
+    void 0
+  );
+  const data = session.data;
+  const span = session.span;
+  const layout = (0, import_react21.useMemo)(() => {
+    const canvas = fitCanvasRect(container, document.size);
+    const fontSize = (span?.fontSize ?? 0.08) * canvas.width;
+    const centreY = canvas.top + (session.layer?.transform.y ?? 0.42) * canvas.height;
+    const height = canvas.height;
+    return {
+      fontSize: Math.max(1, fontSize),
+      lineHeight: Math.max(1, fontSize * (span?.lineHeight ?? 1.2)),
+      left: canvas.left,
+      width: Math.max(1, canvas.width),
+      top: Math.max(0, centreY - height / 2),
+      height: Math.max(1, height)
+    };
+  }, [container, document.size, span?.fontSize, span?.lineHeight, session.layer?.transform.y]);
+  const fonts = (0, import_react21.useMemo)(() => (0, import_core27.fontChoices)(store.registry.fonts), [store.registry.fonts]);
+  (0, import_react21.useEffect)(() => {
+    const handle = setTimeout(() => input.current?.focus(), 50);
+    return () => clearTimeout(handle);
+  }, []);
+  const onSelectionChange = (0, import_react21.useCallback)(
+    (event) => {
+      setSelectionRange(event.nativeEvent.selection);
+    },
+    []
+  );
+  const keepFocus = (0, import_react21.useCallback)(
+    (apply) => {
+      apply();
+      if (!input.current?.isFocused()) input.current?.focus();
+      if (selectionRange) {
+        const range = selectionRange;
+        requestAnimationFrame(() => input.current?.setNativeProps({ selection: range }));
+      }
+    },
+    [selectionRange]
+  );
+  const cycleAlign = () => {
+    if (!data) return;
+    const next = ALIGNS[(ALIGNS.indexOf(data.align) + 1) % ALIGNS.length];
+    keepFocus(() => session.styleText({ align: next }));
+  };
+  const cycleFill = () => {
+    if (!data || !span) return;
+    const index = FILL_MODES.indexOf(data.fill?.mode);
+    const next = FILL_MODES[(index + 1) % FILL_MODES.length];
+    keepFocus(
+      () => session.styleText({
+        fill: next ? {
+          color: span.color === "#000000" ? "#ffffff" : "#000000",
+          radius: 0.012,
+          padding: 0.012,
+          mode: next
+        } : void 0
+      })
+    );
+  };
+  const cycleStroke = () => {
+    if (!data || !span) return;
+    const current = data.stroke?.width;
+    const index = STROKE_WIDTHS.findIndex((w) => w === current);
+    const next = STROKE_WIDTHS[(index + 1) % STROKE_WIDTHS.length];
+    keepFocus(
+      () => session.styleText({
+        stroke: next ? { color: span.color === "#000000" ? "#ffffff" : "#000000", width: next } : void 0
+      })
+    );
+  };
+  const cycleShadow = () => {
+    if (!data) return;
+    const current = data.shadow;
+    const index = current ? SHADOWS.findIndex((s) => s && current && s.blur === current.blur && s.dx === current.dx) : 0;
+    const next = SHADOWS[(index + 1) % SHADOWS.length];
+    keepFocus(() => session.styleText({ shadow: next ? { ...next } : void 0 }));
+  };
+  (0, import_react21.useEffect)(() => {
+    const subscription = import_react_native24.BackHandler.addEventListener("hardwareBackPress", () => {
+      if (import_react_native24.Keyboard.isVisible?.() ?? insets.keyboardVisible) {
+        import_react_native24.Keyboard.dismiss();
+        return true;
+      }
+      onCancel();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [onCancel, insets.keyboardVisible]);
+  const controlRow = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.md
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react_native24.View,
+    {
+      style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 },
+      onLayout: (event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setContainer(
+          (current) => current.width === width && current.height === height ? current : { width, height }
+        );
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react_native24.View,
+          {
+            pointerEvents: "none",
+            style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, backgroundColor: "#00000055" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react_native24.TextInput,
+          {
+            ref: input,
+            value: session.value,
+            onChangeText: session.setValue,
+            onSelectionChange,
+            multiline: true,
+            submitBehavior: "newline",
+            autoCorrect: false,
+            spellCheck: false,
+            autoComplete: "off",
+            importantForAutofill: "no",
+            accessibilityLabel: "Story text",
+            placeholder: "",
+            style: {
+              position: "absolute",
+              left: layout.left,
+              width: layout.width,
+              top: layout.top,
+              height: layout.height,
+              // Fully transparent glyphs. The Skia layer is what the user reads;
+              // drawing the same text twice would double it on screen. Written as
+              // rgba rather than the 'transparent' keyword because the keyword is
+              // not reliably honoured for TextInput colour on Android.
+              color: "rgba(0,0,0,0)",
+              fontSize: layout.fontSize,
+              lineHeight: layout.lineHeight,
+              textAlign: data?.align ?? "center",
+              ...import_react_native24.Platform.OS === "ios" ? {} : { textAlignVertical: "center" },
+              padding: 0
+            },
+            selectionColor: theme.colors.accent,
+            cursorColor: theme.colors.accent
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          import_react_native24.View,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              height: 56,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: theme.spacing.lg
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.Pressable, { accessibilityRole: "button", accessibilityLabel: "Cancel text", onPress: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.Text, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Cancel" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.Pressable, { accessibilityRole: "button", accessibilityLabel: "Done editing text", onPress: onDone, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                import_react_native24.Text,
+                {
+                  style: {
+                    color: theme.colors.accent,
+                    fontSize: theme.font.size,
+                    fontWeight: theme.font.weight
+                  },
+                  children: "Done"
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          import_react_native24.View,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: insets.bottom,
+              paddingVertical: theme.spacing.sm,
+              gap: theme.spacing.sm,
+              backgroundColor: "#00000066"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native24.View, { style: controlRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react_native24.Text,
+                  {
+                    style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm, width: 34 },
+                    accessibilityLabel: "Text size",
+                    children: "Aa"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Slider,
+                  {
+                    value: span?.fontSize ?? import_core27.MIN_TEXT_SIZE,
+                    min: import_core27.MIN_TEXT_SIZE,
+                    max: import_core27.MAX_TEXT_SIZE,
+                    centered: false,
+                    onChange: (size) => session.setSize(size)
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react_native24.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Alignment ${data?.align ?? "center"}`,
+                    onPress: cycleAlign,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.Text, { style: { color: theme.colors.text, fontWeight: theme.font.weight }, children: ALIGN_GLYPH[data?.align ?? "center"] })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react_native24.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text background",
+                    accessibilityState: { selected: Boolean(data?.fill) },
+                    onPress: cycleFill,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      import_react_native24.Text,
+                      {
+                        style: {
+                          color: data?.fill ? theme.colors.accent : theme.colors.text,
+                          fontWeight: theme.font.weight
+                        },
+                        children: data?.fill?.mode === "perLine" ? "A\u20DE\u20DE" : "A\u20DE"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react_native24.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text outline",
+                    accessibilityState: { selected: Boolean(data?.stroke) },
+                    onPress: cycleStroke,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      import_react_native24.Text,
+                      {
+                        style: {
+                          color: data?.stroke ? theme.colors.accent : theme.colors.text,
+                          fontWeight: theme.font.weight
+                        },
+                        children: "\u24B6"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_react_native24.Pressable,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text shadow",
+                    accessibilityState: { selected: Boolean(data?.shadow) },
+                    onPress: cycleShadow,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                      import_react_native24.Text,
+                      {
+                        style: {
+                          color: data?.shadow ? theme.colors.accent : theme.colors.text,
+                          fontWeight: theme.font.weight
+                        },
+                        children: "A\u02D9"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                import_react_native24.ScrollView,
+                {
+                  horizontal: true,
+                  keyboardShouldPersistTaps: "always",
+                  showsHorizontalScrollIndicator: false,
+                  contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center" },
+                  style: { flexGrow: 0 },
+                  children: fonts.map((font) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_react_native24.Pressable,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: `Font ${font.label}`,
+                      accessibilityState: { selected: span?.fontFamily === font.family },
+                      onPress: () => keepFocus(() => session.styleSpan({ fontFamily: font.family })),
+                      style: {
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: theme.spacing.xs,
+                        borderRadius: theme.radii.md,
+                        backgroundColor: span?.fontFamily === font.family ? theme.colors.surface : "transparent",
+                        borderWidth: 1,
+                        borderColor: span?.fontFamily === font.family ? theme.colors.accent : theme.colors.track
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native24.Text, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: font.label })
+                    },
+                    font.family
+                  ))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                import_react_native24.ScrollView,
+                {
+                  horizontal: true,
+                  keyboardShouldPersistTaps: "always",
+                  showsHorizontalScrollIndicator: false,
+                  contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center" },
+                  style: { flexGrow: 0 },
+                  children: SWATCHES2.map((color) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    import_react_native24.Pressable,
+                    {
+                      accessibilityRole: "button",
+                      accessibilityLabel: `Text colour ${color}`,
+                      accessibilityState: { selected: span?.color === color },
+                      onPress: () => keepFocus(() => session.styleSpan({ color })),
+                      style: {
+                        width: 28,
+                        height: 28,
+                        borderRadius: 14,
+                        backgroundColor: color,
+                        borderWidth: span?.color === color ? 3 : 1,
+                        borderColor: span?.color === color ? theme.colors.accent : theme.colors.track
+                      }
+                    },
+                    color
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TextComposerHost({
+  Composer = TextComposer
+}) {
+  const { setActiveTool } = (0, import_core27.useEditor)();
+  const session = useTextSession();
+  const [frame, setFrame] = (0, import_react21.useState)(HIDDEN_KEYBOARD);
+  const token = (0, import_react21.useRef)(0);
+  (0, import_react21.useEffect)(() => {
+    token.current += 1;
+    const mine = token.current;
+    const show = import_react_native24.Keyboard.addListener(
+      import_react_native24.Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      (event) => {
+        if (mine !== token.current) return;
+        setFrame({ height: event.endCoordinates?.height ?? 0, duration: event.duration });
+      }
+    );
+    const hide = import_react_native24.Keyboard.addListener(
+      import_react_native24.Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
+      (event) => {
+        if (mine !== token.current) return;
+        setFrame({ height: 0, duration: event?.duration });
+      }
+    );
+    return () => {
+      token.current += 1;
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  const insets = (0, import_react21.useMemo)(() => composerInsets(frame), [frame]);
+  const finish = (0, import_react21.useCallback)(
+    (commit) => {
+      if (commit) session.commit();
+      else session.cancel();
+      import_react_native24.Keyboard.dismiss();
+      setActiveTool(null);
+    },
+    [session, setActiveTool]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    Composer,
+    {
+      session,
+      insets,
+      onDone: () => finish(true),
+      onCancel: () => finish(false)
+    }
+  );
+}
+
+// src/components/TopBar.tsx
+var import_core28 = require("@pictor-sdk/core");
+var import_react_native25 = require("react-native");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function TopBar({ onCancel, onNext, busy = false }) {
+  const { canUndo, canRedo, dispatch } = (0, import_core28.useEditor)();
+  const theme = useTheme();
+  const button = (label, enabled, onPress, color) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native25.Pressable, { disabled: !enabled, onPress, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react_native25.Text,
+    {
+      style: {
+        color: enabled ? color ?? theme.colors.text : theme.colors.textMuted,
+        fontSize: theme.font.size,
+        fontWeight: theme.font.weight
+      },
+      children: label
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    import_react_native25.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: theme.spacing.sm,
+        backgroundColor: theme.colors.background
+      },
+      children: [
+        button("Cancel", !!onCancel, onCancel),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native25.View, { style: { flexDirection: "row" }, children: [
+          button("\u21BA", canUndo, () => dispatch({ type: "history/undo" })),
+          button("\u21BB", canRedo, () => dispatch({ type: "history/redo" }))
+        ] }),
+        busy ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native25.ActivityIndicator, { color: theme.colors.accent, style: { padding: theme.spacing.sm } }) : button("Next", !!onNext, onNext, theme.colors.accent)
+      ]
+    }
+  );
+}
+
+// src/components/ToolRail.tsx
+var import_core29 = require("@pictor-sdk/core");
+var import_react_native26 = require("react-native");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function ToolRail() {
+  const { activeTool, setActiveTool, document, selection, dispatch } = (0, import_core29.useEditor)();
+  const tools = (0, import_core29.useTools)();
+  const theme = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_react_native26.ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: {
+        gap: theme.spacing.md,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.md
+      },
+      style: { flexGrow: 0, backgroundColor: theme.colors.background },
+      children: tools.map((tool) => {
+        const enabled = tool.isEnabled ? tool.isEnabled({ document, selection }) : true;
+        const active = activeTool === tool.id;
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          import_react_native26.Pressable,
+          {
+            disabled: !enabled,
+            onPress: () => {
+              if (tool.onActivate) {
+                tool.onActivate({ document, dispatch });
+              } else {
+                setActiveTool(active ? null : tool.id);
+              }
+            },
+            style: { width: 72, alignItems: "center", gap: 6, opacity: enabled ? 1 : 0.4 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native26.View, { style: { width: 46, height: 46, borderRadius: 23, borderWidth: 1, borderColor: active ? theme.colors.accent : theme.colors.textMuted, backgroundColor: active ? theme.colors.surface : "transparent", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native26.Text, { style: { color: active ? theme.colors.accent : theme.colors.text, fontSize: 18 }, children: tool.label.slice(0, 1) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                import_react_native26.Text,
+                {
+                  style: {
+                    color: active ? theme.colors.accent : theme.colors.text,
+                    fontSize: theme.font.sizeSm,
+                    fontWeight: theme.font.weight
+                  },
+                  numberOfLines: 1,
+                  children: tool.label
+                }
+              )
+            ]
+          },
+          tool.id
+        );
+      })
+    }
+  );
+}
+
+// src/Editor.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function CanvasStage({ children, onError }) {
+  const { activeTool, profile } = (0, import_core30.useEditor)();
+  const { previews } = useInteractionState();
+  const surface = resolveGestureSurface(activeTool);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    import_skia10.EditorCanvas,
+    {
+      style: { flex: 1 },
+      onError,
+      previewTransforms: previews,
+      showSelectionChrome: (0, import_core30.selectionChromeEnabled)(profile),
+      children: [
+        surface === "draw" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawingSurface, {}) : surface === "crop" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CropGestureSurface, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CropGrid, {})
+        ] }) : surface === "tilt" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TiltShiftGestureSurface, {}) : surface === "media" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StoryMediaGestureSurface, {}) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(LayerGestureSurface, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InteractionGuides, {})
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function mergeSlots(overrides) {
+  return {
+    TopBar,
+    CanvasStage,
+    ToolRail,
+    ToolPanelHost,
+    TextComposer,
+    ...overrides
+  };
+}
+function EditorBody({
+  slots,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  stickers
+}) {
+  const { export: exportDoc, activeTool } = (0, import_core30.useEditor)();
+  const { layerDragActive } = useInteractionState();
+  const [, setStickers] = useUiState("stickers", []);
+  import_react22.default.useEffect(() => {
+    if (stickers) setStickers(stickers);
+  }, [stickers, setStickers]);
+  const theme = useTheme();
+  const [busy, setBusy] = (0, import_react22.useState)(false);
+  const handleNext = onExport ? async () => {
+    setBusy(true);
+    try {
+      const bytes = await exportDoc(exportSpec);
+      await onExport(bytes);
+    } catch (error) {
+      onError?.(error);
+    } finally {
+      setBusy(false);
+    }
+  } : void 0;
+  const {
+    TopBar: Top,
+    CanvasStage: Stage,
+    ToolRail: Rail,
+    ToolPanelHost: PanelHost,
+    TextComposer: Composer
+  } = slots;
+  const composing = activeTool === "text" && Composer !== null;
+  const chrome = !layerDragActive;
+  const hidden = { opacity: chrome ? 1 : 0 };
+  const hits = chrome ? "auto" : "none";
+  return (
+    // GestureDetector requires a GestureHandlerRootView ancestor; providing it
+    // here means consumers never have to know (nesting under an app-level one
+    // is harmless).
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native_gesture_handler8.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native27.View, { style: { flex: 1, backgroundColor: theme.colors.background }, children: [
+      Top && !composing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native27.View, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Top, { onCancel, onNext: handleNext, busy }) }) : null,
+      Stage ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Stage, { onError }) : null,
+      PanelHost && !composing ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native27.View, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PanelHost, {}) }) : null,
+      Rail && !activeTool ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native27.View, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Rail, {}) }) : null,
+      composing && Composer ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextComposerHost, { Composer }) : null
+    ] }) })
+  );
+}
+function Editor({
+  profile,
+  plugins,
+  source,
+  intrinsic,
+  initialDocument,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  slots,
+  theme,
+  stickers,
+  requestImages
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_core30.EditorProvider,
+    {
+      profile,
+      plugins,
+      source,
+      intrinsic,
+      initialDocument,
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ThemeContext.Provider, { value: mergeTheme(theme), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(UiStateProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(HostCallbacksProvider, { value: { requestImages, onError }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(InteractionProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        EditorBody,
+        {
+          slots: mergeSlots(slots),
+          onExport,
+          onCancel,
+          onError,
+          exportSpec,
+          stickers
+        }
+      ) }) }) }) })
+    }
+  );
+}
+
+// src/gestures/EditorGestures.tsx
+var import_core32 = require("@pictor-sdk/core");
+var import_skia11 = require("@pictor-sdk/skia");
+var import_react23 = require("react");
+var import_react_native28 = require("react-native");
+var import_react_native_gesture_handler9 = require("react-native-gesture-handler");
+var import_react_native_reanimated8 = __toESM(require("react-native-reanimated"));
+var import_react_native_worklets8 = require("react-native-worklets");
+
+// src/gestures/controller.ts
+var import_core31 = require("@pictor-sdk/core");
+function createGestureController(store, getMetrics, options = {}) {
+  let active = 0;
+  let base = null;
+  let layerId = null;
+  let pan = { x: 0, y: 0 };
+  let pinch = 1;
+  let rotate = 0;
+  const snapState = { rotation: false, centerX: false, centerY: false };
+  function targetLayerId() {
+    return store.getState().selection[0] ?? null;
+  }
+  function begin() {
+    if (active === 0) {
+      layerId = targetLayerId();
+      if (!layerId) return;
+      const layer = store.getState().document.layers.find((l) => l.id === layerId);
+      if (!layer || layer.locked) {
+        layerId = null;
+        return;
+      }
+      base = { ...layer.transform };
+      pan = { x: 0, y: 0 };
+      pinch = 1;
+      rotate = 0;
+      snapState.rotation = snapState.centerX = snapState.centerY = false;
+      store.dispatch({ type: "history/beginBatch", label: "gesture" });
+    }
+    active++;
+  }
+  function fireSnap(kind, snapped) {
+    if (snapped && !snapState[kind]) options.onSnap?.({ kind });
+    snapState[kind] = snapped;
+  }
+  function commit() {
+    if (!base || !layerId) return;
+    const metrics = getMetrics();
+    if (!metrics || metrics.width === 0 || metrics.height === 0) return;
+    const rawX = base.x + pan.x / metrics.width;
+    const rawY = base.y + pan.y / metrics.height;
+    const rawRotation = base.rotation + rotate;
+    const sx = (0, import_core31.snapCenter)(rawX);
+    const sy = (0, import_core31.snapCenter)(rawY);
+    const sr = (0, import_core31.snapRotation)(rawRotation);
+    fireSnap("centerX", sx.snapped);
+    fireSnap("centerY", sy.snapped);
+    fireSnap("rotation", sr.snapped);
+    store.dispatch({
+      type: "layer/transform",
+      id: layerId,
+      patch: {
+        x: sx.value,
+        y: sy.value,
+        rotation: sr.value,
+        scale: Math.max(0.01, base.scale * pinch)
+      }
+    });
+  }
+  function end() {
+    if (active === 0) return;
+    active--;
+    if (active === 0) {
+      if (layerId) store.dispatch({ type: "history/endBatch" });
+      base = null;
+      layerId = null;
+    }
+  }
+  return {
+    /** Pan/pinch/rotate lifecycles — call begin/end once per recognizer. */
+    begin,
+    end,
+    setPan(xDp, yDp) {
+      pan = { x: xDp, y: yDp };
+      commit();
+    },
+    setPinch(scale) {
+      pinch = scale;
+      commit();
+    },
+    setRotate(rad) {
+      rotate = rad;
+      commit();
+    },
+    /** Tap in canvas dp → hit-test → select (empty tap clears selection). */
+    tap(xDp, yDp) {
+      const metrics = getMetrics();
+      if (!metrics) return;
+      const point = { x: xDp / metrics.width, y: yDp / metrics.height };
+      const hit = (0, import_core31.hitTestDocument)(store.getState().document, point, store.registry);
+      store.select(hit ? [hit.id] : []);
+    },
+    /** true while a gesture is in flight (used to mute other UI). */
+    isActive: () => active > 0
+  };
+}
+
+// src/gestures/EditorGestures.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function EditorGestures({ onSnap }) {
+  const store = (0, import_core32.useEditorStore)();
+  const metrics = (0, import_skia11.useCanvasMetrics)();
+  const metricsRef = (0, import_react23.useRef)(metrics);
+  metricsRef.current = metrics;
+  const onSnapRef = (0, import_react23.useRef)(onSnap);
+  onSnapRef.current = onSnap;
+  const controller = (0, import_react23.useMemo)(
+    () => createGestureController(store, () => metricsRef.current, {
+      onSnap: (e) => onSnapRef.current?.(e)
+    }),
+    // metricsRef/onSnap are read through refs — store identity is the only dep
+    [store]
+  );
+  const gesture = (0, import_react23.useMemo)(() => {
+    const tap = import_react_native_gesture_handler9.Gesture.Tap().onEnd((e) => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.tap)(e.x, e.y);
+    });
+    const pan = import_react_native_gesture_handler9.Gesture.Pan().minPointers(1).onStart(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.setPan)(e.translationX, e.translationY);
+    }).onFinalize(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.end)();
+    });
+    const pinch = import_react_native_gesture_handler9.Gesture.Pinch().onStart(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.setPinch)(e.scale);
+    }).onFinalize(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.end)();
+    });
+    const rotate = import_react_native_gesture_handler9.Gesture.Rotation().onStart(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.setRotate)(e.rotation);
+    }).onFinalize(() => {
+      "worklet";
+      (0, import_react_native_worklets8.runOnJS)(controller.end)();
+    });
+    return import_react_native_gesture_handler9.Gesture.Race(
+      import_react_native_gesture_handler9.Gesture.Simultaneous(pan, pinch, rotate),
+      tap
+    );
+  }, [controller]);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native_gesture_handler9.GestureDetector, { gesture, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native_reanimated8.default.View, { style: import_react_native28.StyleSheet.absoluteFill }) });
+}
+
+// src/index.ts
+var import_core34 = require("@pictor-sdk/core");
+
+// src/panels/TextPanel.tsx
+var import_core33 = require("@pictor-sdk/core");
+var import_react_native29 = require("react-native");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var SWATCHES3 = ["#ffffff", "#000000", "#ed4956", "#ffe25c", "#78de85", "#4dc4ff", "#a15fed"];
+var ALIGNS2 = ["left", "center", "right"];
+var FILL_MODES2 = [void 0, "solid", "perLine"];
+function TextPanel() {
+  const { document, selection, dispatch, select } = (0, import_core33.useEditor)();
+  const store = (0, import_core33.useEditorStore)();
+  const theme = useTheme();
+  const selected = document.layers.find(
+    (l) => l.type === "text" && selection.includes(l.id)
+  );
+  const data = selected ? selected.data : null;
+  const span = data?.spans[0] ?? null;
+  const addText = () => {
+    const id = (0, import_core33.createId)("text");
+    dispatch({
+      type: "layer/add",
+      layer: {
+        id,
+        type: "text",
+        transform: { x: 0.5, y: 0.4, scale: 1, rotation: 0 },
+        opacity: 1,
+        blendMode: "normal",
+        data: {
+          spans: [{ text: "Tap to edit", fontFamily: "System", fontSize: 0.07, color: "#ffffff" }],
+          align: "center",
+          maxWidth: 0.9
+        }
+      }
+    });
+    select([id]);
+  };
+  const patchSpan = (patch) => {
+    if (!selected || !span) return;
+    dispatch({
+      type: "layer/patchData",
+      id: selected.id,
+      patch: { spans: [{ ...span, ...patch }, ...data.spans.slice(1) ?? []] }
+    });
+  };
+  const fonts = ["System", ...store.registry.fonts.map((f) => f.family)];
+  if (!selected || !span || !data) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.View, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.md, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_react_native29.Pressable,
+      {
+        onPress: addText,
+        style: {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+          borderRadius: theme.radii.md,
+          backgroundColor: theme.colors.surface
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Text, { style: { color: theme.colors.accent, fontSize: theme.font.size, fontWeight: theme.font.weight }, children: "+ Add text" })
+      }
+    ) });
+  }
+  const cycleAlign = () => {
+    const next = ALIGNS2[(ALIGNS2.indexOf(data.align) + 1) % ALIGNS2.length];
+    dispatch({ type: "layer/patchData", id: selected.id, patch: { align: next } });
+  };
+  const cycleFill = () => {
+    const current = data.fill?.mode;
+    const index = FILL_MODES2.indexOf(current);
+    const next = FILL_MODES2[(index + 1) % FILL_MODES2.length];
+    dispatch({
+      type: "layer/patchData",
+      id: selected.id,
+      patch: {
+        fill: next ? { color: span.color === "#000000" ? "#ffffff" : "#000000", radius: 0.012, padding: 0.012, mode: next } : void 0
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native29.View, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native29.View, { style: { paddingHorizontal: theme.spacing.md }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        import_react_native29.TextInput,
+        {
+          value: span.text,
+          onChangeText: (text) => patchSpan({ text }),
+          multiline: true,
+          placeholder: "Your text",
+          placeholderTextColor: theme.colors.textMuted,
+          style: {
+            color: theme.colors.text,
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radii.sm,
+            padding: theme.spacing.sm,
+            fontSize: theme.font.size
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Slider,
+        {
+          value: span.fontSize,
+          min: 0.02,
+          max: 0.2,
+          centered: false,
+          onStart: () => dispatch({ type: "history/beginBatch", label: "font size" }),
+          onChange: (fontSize) => patchSpan({ fontSize }),
+          onEnd: () => dispatch({ type: "history/endBatch" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      import_react_native29.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center", paddingBottom: theme.spacing.sm },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Pressable, { onPress: cycleAlign, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Text, { style: { color: theme.colors.text, fontWeight: theme.font.weight }, children: data.align === "left" ? "\u21E4" : data.align === "center" ? "\u2630" : "\u21E5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Pressable, { onPress: cycleFill, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Text, { style: { color: data.fill ? theme.colors.accent : theme.colors.text, fontWeight: theme.font.weight }, children: data.fill?.mode === "perLine" ? "A\u20DE\u20DE" : "A\u20DE" }) }),
+          fonts.map((family) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native29.Pressable, { onPress: () => patchSpan({ fontFamily: family }), style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_react_native29.Text,
+            {
+              style: {
+                color: span.fontFamily === family ? theme.colors.accent : theme.colors.textMuted,
+                fontSize: theme.font.sizeSm
+              },
+              children: family
+            }
+          ) }, family)),
+          SWATCHES3.map((color) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_react_native29.Pressable,
+            {
+              onPress: () => patchSpan({ color }),
+              style: {
+                width: 24,
+                height: 24,
+                borderRadius: 12,
+                backgroundColor: color,
+                borderWidth: span.color === color ? 3 : 1,
+                borderColor: span.color === color ? theme.colors.accent : theme.colors.track
+              }
+            },
+            color
+          ))
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddPhotoPanel,
+  AdjustPanel,
+  CanvasStage,
+  CropGestureSurface,
+  CropGrid,
+  CropPanel,
+  DEFAULT_BRUSH,
+  DrawPanel,
+  DrawingSurface,
+  Editor,
+  EditorGestures,
+  FilterStrip,
+  HostCallbacksProvider,
+  InteractionGuides,
+  InteractionProvider,
+  InvalidImageResultError,
+  LayerGestureSurface,
+  LayersPanel,
+  LayoutPanel,
+  MediaPanel,
+  POST_PROFILE,
+  STORY_PROFILE,
+  STRAIGHTEN_LIMIT,
+  Slider,
+  StickerPanel,
+  StoryMediaGestureSurface,
+  StraightenRuler,
+  TextComposer,
+  TextComposerHost,
+  TextPanel,
+  ThemeContext,
+  ToolPanelHost,
+  ToolRail,
+  TopBar,
+  UiStateProvider,
+  canvasSizeForAspect,
+  cellToTransformPatch,
+  centeredCropForAspect,
+  createAddPhotoController,
+  createDrawController,
+  createGestureController,
+  createUiStateStore,
+  defaultTheme,
+  layoutCells,
+  mergeSlots,
+  mergeTheme,
+  radiansToStraighten,
+  resolveGestureSurface,
+  resolvePanel,
+  straightenToRadians,
+  useBaseImageLayer,
+  useBaseMediaLayer,
+  useHostCallbacks,
+  useInteractionState,
+  useTargetImageLayer,
+  useTextSession,
+  useTheme,
+  useUiState
+});
+//# sourceMappingURL=index.js.map