@pictor-sdk/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,4643 @@
+// src/Editor.tsx
+import {
+  EditorProvider,
+  selectionChromeEnabled,
+  useEditor as useEditor25
+} from "@pictor-sdk/core";
+import { EditorCanvas } from "@pictor-sdk/skia";
+import React19, { useState as useState11 } from "react";
+import { View as View21 } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+
+// src/hostCallbacks.tsx
+import { createContext, useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Context = createContext(null);
+function HostCallbacksProvider({
+  value,
+  children
+}) {
+  const ref = useRef(value);
+  ref.current = value;
+  return /* @__PURE__ */ jsx(Context.Provider, { value: ref, children });
+}
+function useHostCallbacks() {
+  const fallback = useRef({});
+  return useContext(Context) ?? fallback;
+}
+
+// src/gestures/DrawingSurface.tsx
+import { useEditor, useEditorStore } from "@pictor-sdk/core";
+import { samplePixelColor, useCanvasMetrics, useRenderer } from "@pictor-sdk/skia";
+import { useMemo, useRef as useRef3 } from "react";
+import { StyleSheet } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated from "react-native-reanimated";
+import { runOnJS } from "react-native-worklets";
+
+// src/uiState.tsx
+import { createContext as createContext2, useCallback, useContext as useContext2, useRef as useRef2, useSyncExternalStore } from "react";
+import { jsx as jsx2 } from "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 = createContext2(null);
+function UiStateProvider({ children }) {
+  const ref = useRef2(null);
+  if (!ref.current) ref.current = createUiStateStore();
+  return /* @__PURE__ */ jsx2(UiStateContext.Provider, { value: ref.current, children });
+}
+function useUiState(key, fallback) {
+  const store = useContext2(UiStateContext);
+  if (!store) throw new Error("useUiState must be used inside <Editor> (UiStateProvider)");
+  const value = useSyncExternalStore(
+    store.subscribe,
+    () => store.get(key, fallback),
+    () => store.get(key, fallback)
+  );
+  const set = useCallback((v) => store.set(key, v), [store, key]);
+  return [value, set];
+}
+
+// src/gestures/drawController.ts
+import { createId } from "@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 = 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
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DEFAULT_BRUSH = { brush: "pen", color: "#ffffff", width: 0.012 };
+function DrawingSurface() {
+  const store = useEditorStore();
+  const { document } = useEditor();
+  const renderer = useRenderer();
+  const metrics = useCanvasMetrics();
+  const metricsRef = useRef3(metrics);
+  metricsRef.current = metrics;
+  const [brush, setBrush] = useUiState("draw.brush", DEFAULT_BRUSH);
+  const [eyedropper, setEyedropper] = useUiState("draw.eyedropper", false);
+  const brushRef = useRef3(brush);
+  brushRef.current = brush;
+  const stateRef = useRef3({ eyedropper, document, setBrush, setEyedropper });
+  stateRef.current = { eyedropper, document, setBrush, setEyedropper };
+  const controller = useMemo(
+    () => createDrawController(store, () => metricsRef.current, () => brushRef.current),
+    [store]
+  );
+  const gesture = useMemo(() => {
+    const sample = async (x, y) => {
+      const m = metricsRef.current;
+      const s = stateRef.current;
+      if (!m || !s.eyedropper) return;
+      const color = await 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 Gesture.Pan().minDistance(0).onStart((e) => {
+      "worklet";
+      runOnJS(beginOrSample)(e.x, e.y);
+    }).onUpdate((e) => {
+      "worklet";
+      runOnJS(controller.move)(e.x, e.y);
+    }).onFinalize(() => {
+      "worklet";
+      runOnJS(controller.end)();
+    });
+  }, [controller, renderer]);
+  return /* @__PURE__ */ jsx3(GestureDetector, { gesture, children: /* @__PURE__ */ jsx3(Animated.View, { style: StyleSheet.absoluteFill }) });
+}
+
+// src/gestures/CropGestureSurface.tsx
+import {
+  clampCropTransform,
+  cropFitScale,
+  cropPanBounds,
+  focalZoomTransform
+} from "@pictor-sdk/core";
+import { useCanvasMetrics as useCanvasMetrics2 } from "@pictor-sdk/skia";
+import { useEffect, useMemo as useMemo3, useRef as useRef5 } from "react";
+import { StyleSheet as StyleSheet2 } from "react-native";
+import { Gesture as Gesture2, GestureDetector as GestureDetector2 } from "react-native-gesture-handler";
+import Animated2, { useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";
+import { runOnJS as runOnJS2 } from "react-native-worklets";
+
+// src/panels/useTargetImageLayer.ts
+import {
+  pinnedTargetImageLayer,
+  resolveTargetImageLayer,
+  useEditor as useEditor2
+} from "@pictor-sdk/core";
+import { useRef as useRef4 } from "react";
+function useTargetImageLayer() {
+  const { document, selection } = useEditor2();
+  const pinned = useRef4(null);
+  if (pinned.current === null) {
+    pinned.current = resolveTargetImageLayer(document, selection)?.id ?? null;
+  }
+  return pinnedTargetImageLayer(document, pinned.current) ?? null;
+}
+
+// src/gestures/CropGestureSurface.tsx
+import { useEditor as useEditor3 } from "@pictor-sdk/core";
+
+// src/gestures/interactionState.tsx
+import { NO_SNAP } from "@pictor-sdk/core";
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useMemo as useMemo2, useState } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Context2 = createContext3(null);
+function InteractionProvider({ children }) {
+  const [preview, setPreviewValue] = useState(null);
+  const [cropActive, setCropActive] = useState(false);
+  const [layerDragActive, setLayerDragActive] = useState(false);
+  const [overDeleteTarget, setOverDeleteTarget] = useState(false);
+  const [snap, setSnapValue] = useState(NO_SNAP);
+  const setPreview = useCallback2((value2) => setPreviewValue(value2), []);
+  const setSnap = useCallback2((value2) => {
+    setSnapValue(
+      (current) => current.centerX === value2.centerX && current.centerY === value2.centerY && current.rotation === value2.rotation ? current : value2
+    );
+  }, []);
+  const value = useMemo2(
+    () => ({
+      previews: preview ? [preview] : [],
+      setPreview,
+      cropActive,
+      setCropActive,
+      layerDragActive,
+      setLayerDragActive,
+      overDeleteTarget,
+      setOverDeleteTarget,
+      snap,
+      setSnap
+    }),
+    [preview, setPreview, cropActive, layerDragActive, overDeleteTarget, snap, setSnap]
+  );
+  return /* @__PURE__ */ jsx4(Context2.Provider, { value, children });
+}
+function useInteractionState() {
+  const value = useContext3(Context2);
+  if (!value) throw new Error("interaction components must be used inside <Editor>");
+  return value;
+}
+
+// src/gestures/CropGestureSurface.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function CropGestureSurface({ fit, maxScale, rotationEnabled, onInteractionChange }) {
+  const { document, dispatch, profile } = useEditor3();
+  const layer = useTargetImageLayer();
+  const metrics = useCanvasMetrics2();
+  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 = useSharedValue(layer?.transform.x ?? 0.5);
+  const liveY = useSharedValue(layer?.transform.y ?? 0.5);
+  const liveScale = useSharedValue(layer?.transform.scale ?? 1);
+  const baseX = useSharedValue(layer?.transform.x ?? 0.5);
+  const baseY = useSharedValue(layer?.transform.y ?? 0.5);
+  const baseScale = useSharedValue(layer?.transform.scale ?? 1);
+  const liveRotation = useSharedValue(layer?.transform.rotation ?? 0);
+  const baseRotation = useSharedValue(layer?.transform.rotation ?? 0);
+  const panX = useSharedValue(0);
+  const panY = useSharedValue(0);
+  const pinchScale = useSharedValue(1);
+  const rotateDelta = useSharedValue(0);
+  const focalX = useSharedValue(0.5);
+  const focalY = useSharedValue(0.5);
+  const activeRecognizers = useSharedValue(0);
+  const commitTimer = useRef5(null);
+  const minScale = source ? cropFitScale(source, document.size, resolvedFit, layer?.transform.rotation ?? 0) : 1;
+  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 = 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]);
+  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 = cropFitScale(source, document.size, resolvedFit, candidate.rotation);
+    const bounds = cropPanBounds(source, document.size, candidate.scale, settledMinScale, resolvedMax, candidate.rotation);
+    const settled = clampCropTransform(candidate, bounds);
+    liveX.value = withTiming(settled.x, { duration: 160 });
+    liveY.value = withTiming(settled.y, { duration: 160 });
+    liveScale.value = withTiming(settled.scale, { duration: 160 });
+    liveRotation.value = 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(focalZoomTransform(layer.transform, targetScale, {
+      x: xDp / metrics.width,
+      y: yDp / metrics.height
+    }));
+  };
+  const gesture = useMemo3(() => {
+    if (!metrics || !source || !layer) return Gesture2.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;
+        runOnJS2(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) {
+        runOnJS2(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 = Gesture2.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 = Gesture2.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 = Gesture2.Rotation().enabled(resolvedRotation).onStart(begin).onUpdate((event) => {
+      "worklet";
+      rotateDelta.value = event.rotation;
+      updateLive();
+    }).onFinalize(finish);
+    const doubleTap = Gesture2.Tap().numberOfTaps(2).onEnd((event) => {
+      "worklet";
+      runOnJS2(toggleZoom)(event.x, event.y);
+    });
+    return Gesture2.Exclusive(doubleTap, Gesture2.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__ */ jsx5(GestureDetector2, { gesture, children: /* @__PURE__ */ jsx5(Animated2.View, { style: StyleSheet2.absoluteFill }) });
+}
+
+// src/gestures/TiltShiftGestureSurface.tsx
+import {
+  moveTiltCenter,
+  needsTiltShift,
+  rotateTiltBand,
+  scaleTiltRadius,
+  tiltShiftPatch,
+  useEditor as useEditor4
+} from "@pictor-sdk/core";
+import { useCanvasMetrics as useCanvasMetrics3 } from "@pictor-sdk/skia";
+import { useMemo as useMemo4, useRef as useRef6 } from "react";
+import { StyleSheet as StyleSheet3 } from "react-native";
+import { Gesture as Gesture3, GestureDetector as GestureDetector3 } from "react-native-gesture-handler";
+import Animated3, { useAnimatedStyle, useSharedValue as useSharedValue2 } from "react-native-reanimated";
+import { runOnJS as runOnJS3 } from "react-native-worklets";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function TiltShiftGestureSurface() {
+  const { dispatch } = useEditor4();
+  const layer = useTargetImageLayer();
+  const metrics = useCanvasMetrics3();
+  const tilt = layer?.data?.tiltShift;
+  const active = needsTiltShift(tilt);
+  const origin = useRef6(null);
+  const live = useRef6(null);
+  live.current = active ? tilt : null;
+  const width = metrics?.width ?? 0;
+  const height = metrics?.height ?? 0;
+  const oX = useSharedValue2(0);
+  const oY = useSharedValue2(0);
+  const oR = useSharedValue2(0);
+  const oRot = useSharedValue2(0);
+  const oLinear = useSharedValue2(0);
+  const visible = useSharedValue2(0);
+  const dx = useSharedValue2(0);
+  const dy = useSharedValue2(0);
+  const pinch = useSharedValue2(1);
+  const twist = useSharedValue2(0);
+  const activeCount = useSharedValue2(0);
+  const capture = useMemo4(
+    () => () => {
+      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 = useMemo4(
+    () => (tx, ty, scale, rotation) => {
+      const from = origin.current;
+      origin.current = null;
+      if (!from || !layer || width <= 0 || height <= 0) return;
+      let next = moveTiltCenter(from, tx / width, ty / height);
+      next = scaleTiltRadius({ ...next, radius: from.radius, feather: from.feather }, scale);
+      next = rotateTiltBand({ ...next, rotation: from.rotation }, rotation);
+      dispatch({
+        type: "layer/patchData",
+        id: layer.id,
+        patch: tiltShiftPatch(next)
+      });
+    },
+    [dispatch, layer, width, height]
+  );
+  const gesture = useMemo4(() => {
+    const begin = () => {
+      "worklet";
+      activeCount.value += 1;
+      visible.value = 1;
+      runOnJS3(capture)();
+    };
+    const end = () => {
+      "worklet";
+      activeCount.value = Math.max(0, activeCount.value - 1);
+      if (activeCount.value > 0) return;
+      visible.value = 0;
+      runOnJS3(commit)(dx.value, dy.value, pinch.value, twist.value);
+      dx.value = 0;
+      dy.value = 0;
+      pinch.value = 1;
+      twist.value = 0;
+    };
+    const pan = Gesture3.Pan().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      dx.value = e.translationX;
+      dy.value = e.translationY;
+    }).onFinalize(end);
+    const pinchGesture = Gesture3.Pinch().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      pinch.value = e.scale;
+    }).onFinalize(end);
+    const rotation = Gesture3.Rotation().enabled(active).onStart(begin).onUpdate((e) => {
+      "worklet";
+      twist.value = e.rotation;
+    }).onFinalize(end);
+    return Gesture3.Simultaneous(pan, pinchGesture, rotation);
+  }, [active, capture, commit, activeCount, visible, dx, dy, pinch, twist]);
+  const ringStyle = 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__ */ jsx6(GestureDetector3, { gesture, children: /* @__PURE__ */ jsx6(Animated3.View, { style: StyleSheet3.absoluteFill, children: /* @__PURE__ */ jsx6(Animated3.View, { pointerEvents: "none", style: [styles.ring, ringStyle] }) }) });
+}
+var styles = StyleSheet3.create({
+  ring: {
+    position: "absolute",
+    borderWidth: 1.5,
+    borderColor: "rgba(255,255,255,0.9)"
+  }
+});
+
+// src/gestures/CropGrid.tsx
+import React7 from "react";
+import { StyleSheet as StyleSheet4, View } from "react-native";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function CropGrid({ always = false }) {
+  const { cropActive } = useInteractionState();
+  if (!always && !cropActive) return null;
+  return /* @__PURE__ */ jsx7(View, { pointerEvents: "none", style: StyleSheet4.absoluteFill, children: [1 / 3, 2 / 3].map((fraction) => /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+    /* @__PURE__ */ jsx7(View, { style: [styles2.vertical, { left: `${fraction * 100}%` }] }),
+    /* @__PURE__ */ jsx7(View, { style: [styles2.horizontal, { top: `${fraction * 100}%` }] })
+  ] }, fraction)) });
+}
+var styles2 = StyleSheet4.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
+import {
+  deleteTargetFromProfile,
+  hitTestDocument,
+  isDirectManipulationLayer,
+  isSameTransform,
+  layerNaturalSize,
+  layerGestureConfigFromProfile,
+  NO_SNAP as NO_SNAP2,
+  useEditor as useEditor5,
+  useEditorStore as useEditorStore2
+} from "@pictor-sdk/core";
+import { preferMeasuredSize, useCanvasMetrics as useCanvasMetrics4, useRenderer as useRenderer2 } from "@pictor-sdk/skia";
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useRef as useRef7, useState as useState2 } from "react";
+import { StyleSheet as StyleSheet5 } from "react-native";
+import { Gesture as Gesture4, GestureDetector as GestureDetector4 } from "react-native-gesture-handler";
+import Animated4, { useDerivedValue as useDerivedValue2, useSharedValue as useSharedValue3 } from "react-native-reanimated";
+import { runOnJS as runOnJS4 } from "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
+import { jsx as jsx8 } from "react/jsx-runtime";
+function LayerGestureSurface({ onSnap }) {
+  const { document, dispatch, profile } = useEditor5();
+  const store = useEditorStore2();
+  const metrics = useCanvasMetrics4();
+  const { setPreview, setLayerDragActive, setOverDeleteTarget, setSnap } = useInteractionState();
+  const renderer = useRenderer2();
+  const config = useMemo5(
+    () => layerGestureConfigFromProfile(profile.interaction?.layers),
+    [profile]
+  );
+  const deleteTarget = useMemo5(
+    () => deleteTargetFromProfile(profile.interaction?.layers),
+    [profile]
+  );
+  const aspect = document.size.height / document.size.width;
+  const [measureVersion, setMeasureVersion] = useState2(0);
+  useEffect2(
+    () => renderer.textMeasures.subscribe(() => setMeasureVersion((v) => v + 1)),
+    [renderer]
+  );
+  const hitCandidates = useMemo5(
+    () => document.layers.map((layer, index) => ({ layer, index })).filter(
+      ({ layer, index }) => !layer.hidden && !layer.locked && isDirectManipulationLayer(layer, index, profile.interaction?.layers)
+    ).reverse().map(({ layer }) => {
+      const natural = preferMeasuredSize(
+        renderer.textMeasures.get(layer.id),
+        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 = useSharedValue3(0.5);
+  const liveY = useSharedValue3(0.5);
+  const liveScale = useSharedValue3(1);
+  const liveRotation = useSharedValue3(0);
+  const committedX = useSharedValue3(0.5);
+  const committedY = useSharedValue3(0.5);
+  const committedScale = useSharedValue3(1);
+  const committedRotation = useSharedValue3(0);
+  const baseX = useSharedValue3(0.5);
+  const baseY = useSharedValue3(0.5);
+  const baseScale = useSharedValue3(1);
+  const baseRotation = useSharedValue3(0);
+  const originPanX = useSharedValue3(0);
+  const originPanY = useSharedValue3(0);
+  const originPinch = useSharedValue3(1);
+  const originRotate = useSharedValue3(0);
+  const rawPanX = useSharedValue3(0);
+  const rawPanY = useSharedValue3(0);
+  const rawPinch = useSharedValue3(1);
+  const rawRotate = useSharedValue3(0);
+  const focalX = useSharedValue3(0.5);
+  const focalY = useSharedValue3(0.5);
+  const pointers = useSharedValue3(0);
+  const active = useSharedValue3(false);
+  const snapCX = useSharedValue3(false);
+  const snapCY = useSharedValue3(false);
+  const snapR = useSharedValue3(false);
+  const overDelete = useSharedValue3(false);
+  const previewTransform = useDerivedValue2(() => {
+    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 = useRef7({ document, metrics, store, dispatch, onSnap, profile });
+  latest.current = { document, metrics, store, dispatch, onSnap, profile };
+  const grabbedId = useRef7(null);
+  const grabbedFrom = useRef7(null);
+  const snapState = useRef7(NO_SNAP2);
+  const onGrabLayer = useCallback3((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 = useCallback3((xDp, yDp) => {
+    const { document: doc, metrics: m, store: s } = latest.current;
+    if (!m) return;
+    const layerInteraction = latest.current.profile.interaction?.layers;
+    const hit = hitTestDocument(
+      doc,
+      { x: xDp / m.width, y: yDp / m.height },
+      s.registry,
+      (layer, index) => isDirectManipulationLayer(layer, index, layerInteraction)
+    );
+    s.select(hit && !hit.locked ? [hit.id] : []);
+  }, []);
+  const onSnapChanged = useCallback3(
+    (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 = useCallback3(
+    (over) => setOverDeleteTarget(over),
+    [setOverDeleteTarget]
+  );
+  const onGestureFinished = useCallback3(
+    (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 = NO_SNAP2;
+      setLayerDragActive(false);
+      setOverDeleteTarget(false);
+      setSnap(NO_SNAP2);
+      setPreview(null);
+      if (!id) return;
+      if (deleted) {
+        d({ type: "layer/remove", id });
+        s.select([]);
+        return;
+      }
+      if (from && isSameTransform(from, t)) return;
+      d({ type: "layer/transform", id, patch: t });
+    },
+    [setLayerDragActive, setOverDeleteTarget, setSnap, setPreview]
+  );
+  useEffect2(() => () => setPreview(null), [setPreview]);
+  const gesture = useMemo5(() => {
+    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;
+        runOnJS4(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;
+          runOnJS4(onHoverChanged)(over);
+        }
+      }
+    };
+    const syncPointers = (count) => {
+      "worklet";
+      if (active.value && count !== pointers.value) {
+        pointers.value = count;
+        rebase();
+      }
+    };
+    const endIfIdle = () => {
+      "worklet";
+      if (!active.value) {
+        runOnJS4(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;
+      runOnJS4(onGestureFinished)(
+        {
+          x: liveX.value,
+          y: liveY.value,
+          scale: liveScale.value,
+          rotation: liveRotation.value
+        },
+        deleted
+      );
+    };
+    const pan = Gesture4.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;
+      runOnJS4(onGrabLayer)(hit.id);
+    }).onUpdate((e) => {
+      "worklet";
+      rawPanX.value = e.translationX;
+      rawPanY.value = e.translationY;
+      syncPointers(e.numberOfPointers);
+      recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      endIfIdle();
+    });
+    const pinch = Gesture4.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 = Gesture4.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 = Gesture4.Tap().onEnd((e) => {
+      "worklet";
+      runOnJS4(onSelectAt)(e.x, e.y);
+    });
+    return Gesture4.Simultaneous(Gesture4.Race(pan, tap), pinch, rotate);
+  }, [
+    metrics,
+    config,
+    deleteTarget,
+    aspect,
+    onGrabLayer,
+    onSelectAt,
+    onSnapChanged,
+    onHoverChanged,
+    onGestureFinished,
+    hitCandidates,
+    document.size.width,
+    document.size.height
+  ]);
+  return /* @__PURE__ */ jsx8(GestureDetector4, { gesture, children: /* @__PURE__ */ jsx8(Animated4.View, { style: StyleSheet5.absoluteFill }) });
+}
+
+// src/gestures/StoryMediaGestureSurface.tsx
+import {
+  doubleTapMediaTransform,
+  isBaseImageLayer,
+  isSameTransform as isSameTransform3,
+  mediaConfigFromProfile,
+  useEditor as useEditor6
+} from "@pictor-sdk/core";
+import { preferResolvedSize, useCanvasMetrics as useCanvasMetrics5, useResolvedImageSize } from "@pictor-sdk/skia";
+import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef8 } from "react";
+import { StyleSheet as StyleSheet6 } from "react-native";
+import { Gesture as Gesture5, GestureDetector as GestureDetector5 } from "react-native-gesture-handler";
+import Animated5, {
+  cancelAnimation,
+  useDerivedValue as useDerivedValue3,
+  useSharedValue as useSharedValue4,
+  withTiming as withTiming2
+} from "react-native-reanimated";
+import { runOnJS as runOnJS5 } from "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
+import { isSameTransform as isSameTransform2 } from "@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 (isSameTransform2(state.pending, committed)) return { state: IDLE_OWNERSHIP, reseed: false };
+    if (state.previous && isSameTransform2(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
+import { jsx as jsx9 } from "react/jsx-runtime";
+function useBaseMediaLayer() {
+  const { document } = useEditor6();
+  const base = document.layers[0];
+  return base && isBaseImageLayer(document.layers, base.id) ? base : void 0;
+}
+function StoryMediaGestureSurface({
+  onInteractionChange
+}) {
+  const { document, dispatch, profile } = useEditor6();
+  const metrics = useCanvasMetrics5();
+  const { setPreview } = useInteractionState();
+  const layer = useBaseMediaLayer();
+  const config = useMemo6(
+    () => mediaConfigFromProfile(profile.interaction?.media),
+    [profile]
+  );
+  const declared = layer?.data?.intrinsic;
+  const resolved = useResolvedImageSize(layer?.data?.source);
+  const intrinsic = useMemo6(
+    () => preferResolvedSize(resolved, declared),
+    [resolved, declared]
+  );
+  const canvas = document.size;
+  const liveX = useSharedValue4(0.5);
+  const liveY = useSharedValue4(0.5);
+  const liveScale = useSharedValue4(1);
+  const liveRotation = useSharedValue4(0);
+  const baseX = useSharedValue4(0.5);
+  const baseY = useSharedValue4(0.5);
+  const baseScale = useSharedValue4(1);
+  const baseRotation = useSharedValue4(0);
+  const originPanX = useSharedValue4(0);
+  const originPanY = useSharedValue4(0);
+  const originPinch = useSharedValue4(1);
+  const originRotate = useSharedValue4(0);
+  const rawPanX = useSharedValue4(0);
+  const rawPanY = useSharedValue4(0);
+  const rawPinch = useSharedValue4(1);
+  const rawRotate = useSharedValue4(0);
+  const focalX = useSharedValue4(0.5);
+  const focalY = useSharedValue4(0.5);
+  const active = useSharedValue4(false);
+  const recognizers = useSharedValue4(0);
+  const startedPan = useSharedValue4(false);
+  const startedPinch = useSharedValue4(false);
+  const startedRotate = useSharedValue4(false);
+  const settleProgress = useSharedValue4(0);
+  const committed = layer?.transform;
+  const ownership = useRef8(IDLE_OWNERSHIP);
+  useEffect3(() => {
+    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 = useSharedValue4(0.5);
+  const baseCommittedY = useSharedValue4(0.5);
+  const baseCommittedScale = useSharedValue4(1);
+  const baseCommittedRotation = useSharedValue4(0);
+  const previewTransform = useDerivedValue3(() => {
+    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]);
+  useEffect3(() => () => setPreview(null), [setPreview]);
+  const latest = useRef8({ layer, dispatch, onInteractionChange, previewTransform });
+  latest.current = { layer, dispatch, onInteractionChange, previewTransform };
+  const settleCoordinatorRef = useRef8(null);
+  const beginInteraction = useCallback4(() => {
+    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 = useCallback4((next) => {
+    const current = latest.current.layer;
+    setPreview(null);
+    latest.current.onInteractionChange?.(false);
+    const dispatched = current !== void 0 && !isSameTransform3(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 = useMemo6(
+    () => 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 = useCallback4(
+    (target, duration) => {
+      settleCoordinator.settle(target, (done) => {
+        liveX.value = withTiming2(target.x, { duration });
+        liveY.value = withTiming2(target.y, { duration });
+        liveRotation.value = withTiming2(target.rotation, { duration });
+        liveScale.value = withTiming2(target.scale, { duration });
+        settleProgress.value = 0;
+        settleProgress.value = withTiming2(1, { duration }, (finished) => {
+          "worklet";
+          runOnJS5(done)(finished === true);
+        });
+      });
+    },
+    // shared values are stable refs, so they are deliberately not dependencies
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator]
+  );
+  useEffect3(
+    () => () => {
+      settleCoordinator.cancel();
+      ownership.current = IDLE_OWNERSHIP;
+      cancelAnimation(liveX);
+      cancelAnimation(liveY);
+      cancelAnimation(liveScale);
+      cancelAnimation(liveRotation);
+      cancelAnimation(settleProgress);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settleCoordinator]
+  );
+  const runDoubleTap = useCallback4(
+    (xDp, yDp) => {
+      const current = latest.current.layer;
+      if (!current || !metrics) return;
+      const target = 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 = useMemo6(() => {
+    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;
+      cancelAnimation(liveX);
+      cancelAnimation(liveY);
+      cancelAnimation(liveScale);
+      cancelAnimation(liveRotation);
+      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;
+      runOnJS5(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
+      );
+      runOnJS5(settleTo)(settled, settleMs);
+    };
+    const pan = Gesture5.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 = Gesture5.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 = Gesture5.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 = Gesture5.Tap().numberOfTaps(2).onEnd((e) => {
+      "worklet";
+      runOnJS5(runDoubleTap)(e.x, e.y);
+    });
+    return Gesture5.Simultaneous(Gesture5.Race(pan, doubleTap), pinch, rotate);
+  }, [metrics, canvas, intrinsic, config, settleTo, beginInteraction, runDoubleTap]);
+  if (!layer) return null;
+  return /* @__PURE__ */ jsx9(GestureDetector5, { gesture, children: /* @__PURE__ */ jsx9(Animated5.View, { style: StyleSheet6.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
+import { deleteTargetFromProfile as deleteTargetFromProfile2, useEditor as useEditor7 } from "@pictor-sdk/core";
+import { useCanvasMetrics as useCanvasMetrics6 } from "@pictor-sdk/skia";
+import { StyleSheet as StyleSheet7, Text, View as View2 } from "react-native";
+
+// src/theme.ts
+import { createContext as createContext4, useContext as useContext4 } from "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 = createContext4(defaultTheme);
+function useTheme() {
+  return useContext4(ThemeContext);
+}
+
+// src/gestures/InteractionGuides.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+function InteractionGuides({ deleteLabel = "Drag to delete" }) {
+  const { profile } = useEditor7();
+  const metrics = useCanvasMetrics6();
+  const theme = useTheme();
+  const { snap, layerDragActive, overDeleteTarget } = useInteractionState();
+  const target = deleteTargetFromProfile2(profile.interaction?.layers);
+  if (!metrics) return null;
+  const radius = target ? target.radius * metrics.width : 0;
+  const size = radius * 2;
+  const active = overDeleteTarget;
+  return /* @__PURE__ */ jsxs2(View2, { pointerEvents: "none", style: StyleSheet7.absoluteFill, children: [
+    snap.centerX ? /* @__PURE__ */ jsx10(
+      View2,
+      {
+        style: {
+          position: "absolute",
+          left: metrics.width / 2 - 1,
+          top: 0,
+          width: 2,
+          height: metrics.height,
+          backgroundColor: theme.colors.accent
+        }
+      }
+    ) : null,
+    snap.centerY ? /* @__PURE__ */ jsx10(
+      View2,
+      {
+        style: {
+          position: "absolute",
+          top: metrics.height / 2 - 1,
+          left: 0,
+          height: 2,
+          width: metrics.width,
+          backgroundColor: theme.colors.accent
+        }
+      }
+    ) : null,
+    snap.rotation ? /* @__PURE__ */ jsx10(
+      View2,
+      {
+        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__ */ jsx10(
+          Text,
+          {
+            style: {
+              color: theme.colors.text,
+              fontSize: theme.font.sizeSm,
+              fontWeight: theme.font.weight
+            },
+            children: "Right-angle snap"
+          }
+        )
+      }
+    ) : null,
+    target && layerDragActive ? /* @__PURE__ */ jsx10(
+      View2,
+      {
+        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__ */ jsx10(
+          View2,
+          {
+            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__ */ jsx10(
+              Text,
+              {
+                style: {
+                  color: theme.colors.text,
+                  fontSize: radius * 0.7,
+                  fontWeight: theme.font.weight
+                },
+                children: "\xD7"
+              }
+            )
+          }
+        )
+      }
+    ) : null,
+    target && layerDragActive ? /* @__PURE__ */ jsx10(
+      View2,
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: target.y * metrics.height - radius - theme.spacing.lg * 2,
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */ jsx10(
+          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
+import { useEditor as useEditor20, useTools } from "@pictor-sdk/core";
+import { useEffect as useEffect6, useRef as useRef11 } from "react";
+import { Pressable as Pressable14, Text as Text17, View as View17 } from "react-native";
+
+// src/panels/AdjustPanel.tsx
+import {
+  adjustmentResetPatch,
+  hasAdjustment,
+  useEditor as useEditor8,
+  useEditorStore as useEditorStore3
+} from "@pictor-sdk/core";
+import { useState as useState4 } from "react";
+import { Pressable, ScrollView, Text as Text3, View as View4 } from "react-native";
+
+// src/components/Slider.tsx
+import { useMemo as useMemo7, useRef as useRef9, useState as useState3 } from "react";
+import { Text as Text2, View as View3 } from "react-native";
+import { Gesture as Gesture6, GestureDetector as GestureDetector6 } from "react-native-gesture-handler";
+import Animated6 from "react-native-reanimated";
+import { runOnJS as runOnJS6 } from "react-native-worklets";
+import { jsx as jsx11, jsxs as jsxs3 } from "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] = useState3(0);
+  const widthRef = useRef9(0);
+  const startValue = useRef9(value);
+  const valueRef = useRef9(value);
+  valueRef.current = value;
+  const onLayout = (e) => {
+    setWidth(e.nativeEvent.layout.width);
+    widthRef.current = e.nativeEvent.layout.width;
+  };
+  const handlers = useMemo7(() => {
+    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 = useMemo7(
+    () => Gesture6.Pan().enabled(!disabled).onStart(() => {
+      "worklet";
+      runOnJS6(handlers.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      runOnJS6(handlers.update)(e.translationX);
+    }).onFinalize(() => {
+      "worklet";
+      runOnJS6(handlers.finish)();
+    }),
+    [handlers, disabled]
+  );
+  const t = (value - min) / (max - min);
+  const thumbX = width * t;
+  return /* @__PURE__ */ jsx11(GestureDetector6, { gesture, children: /* @__PURE__ */ jsxs3(
+    Animated6.View,
+    {
+      testID,
+      onLayout,
+      style: {
+        height: valueLabel ? 58 : 36,
+        justifyContent: "flex-end",
+        paddingBottom: 9,
+        opacity: disabled ? 0.4 : 1
+      },
+      children: [
+        valueLabel ? /* @__PURE__ */ jsx11(
+          View3,
+          {
+            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__ */ jsx11(Text2, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: valueLabel })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx11(View3, { style: { height: 2, borderRadius: 1, backgroundColor: theme.colors.track } }),
+        /* @__PURE__ */ jsx11(
+          View3,
+          {
+            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__ */ jsx11(
+          View3,
+          {
+            style: {
+              position: "absolute",
+              left: width / 2 - 1,
+              width: 2,
+              height: 10,
+              backgroundColor: theme.colors.textMuted
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx11(
+          View3,
+          {
+            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
+import { jsx as jsx12, jsxs as jsxs4 } from "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 } = useEditor8();
+  const store = useEditorStore3();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const keys = store.registry.adjustments;
+  const [activeKey, setActiveKey] = useState4(keys[0] ?? "brightness");
+  if (!layer) return null;
+  const adjustments = layer.data.color.adjustments ?? {};
+  const value = adjustments[activeKey] ?? 0;
+  const touchedActive = hasAdjustment(adjustments, activeKey);
+  const resetActive = () => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: adjustmentResetPatch(activeKey)
+  });
+  return /* @__PURE__ */ jsxs4(View4, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ jsxs4(View4, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ jsxs4(
+        View4,
+        {
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: theme.spacing.sm,
+            minHeight: 28
+          },
+          children: [
+            /* @__PURE__ */ jsxs4(
+              Text3,
+              {
+                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__ */ jsx12(
+              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__ */ jsx12(Text3, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        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__ */ jsx12(
+      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__ */ jsxs4(
+            Pressable,
+            {
+              onPress: () => setActiveKey(key),
+              style: { alignItems: "center", gap: 6, width: 76 },
+              children: [
+                /* @__PURE__ */ jsx12(View4, { 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__ */ jsx12(Text3, { style: { color: active ? theme.colors.accent : theme.colors.text, fontSize: 18 }, children: (LABELS[key] ?? key).slice(0, 1) }) }),
+                /* @__PURE__ */ jsxs4(
+                  Text3,
+                  {
+                    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
+import { useEditor as useEditor9 } from "@pictor-sdk/core";
+import { useEffect as useEffect4, useMemo as useMemo8, useState as useState5 } from "react";
+import { Pressable as Pressable2, Text as Text4, View as View5 } from "react-native";
+
+// src/panels/addPhotoController.ts
+import {
+  createImageLayers,
+  insertImageCommands
+} from "@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 = createImageLayers(images, insert);
+        const commands = 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
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function AddPhotoPanel() {
+  const { dispatch, select } = useEditor9();
+  const host = useHostCallbacks();
+  const theme = useTheme();
+  const [pending, setPending] = useState5(false);
+  const controller = useMemo8(
+    () => 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]
+  );
+  useEffect4(() => () => 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__ */ jsxs5(View5, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.lg }, children: [
+    /* @__PURE__ */ jsx13(
+      Pressable2,
+      {
+        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__ */ jsx13(
+          Text4,
+          {
+            style: {
+              color: available ? theme.colors.accent : theme.colors.textMuted,
+              fontSize: theme.font.size,
+              fontWeight: theme.font.weight
+            },
+            children: pending ? "Choosing\u2026" : "Add photos"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx13(
+      Text4,
+      {
+        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
+import {
+  isInertTint,
+  tintPatch,
+  useEditor as useEditor10
+} from "@pictor-sdk/core";
+import { useState as useState6 } from "react";
+import { Pressable as Pressable3, ScrollView as ScrollView2, Text as Text5, View as View6 } from "react-native";
+import { jsx as jsx14, jsxs as jsxs6 } from "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 } = useEditor10();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [end, setEnd] = useState6("shadows");
+  if (!layer) return null;
+  const data = layer.data;
+  const tint = data.color.tinting?.[end];
+  const active = isInertTint(tint) ? void 0 : tint;
+  const patch = (next) => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: { color: tintPatch(end, next) }
+  });
+  const pick = (color) => patch(
+    active?.color === color ? void 0 : { color, strength: active?.strength ?? INITIAL_STRENGTH }
+  );
+  return /* @__PURE__ */ jsxs6(View6, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ jsx14(
+      View6,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: theme.spacing.md,
+          paddingTop: theme.spacing.sm
+        },
+        children: ENDS.map(({ key, label }) => {
+          const selected = key === end;
+          const set = !isInertTint(data.color.tinting?.[key]);
+          return /* @__PURE__ */ jsx14(
+            Pressable3,
+            {
+              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__ */ jsxs6(
+                Text5,
+                {
+                  style: {
+                    color: selected ? theme.colors.accent : theme.colors.textMuted,
+                    fontSize: theme.font.sizeSm,
+                    fontWeight: theme.font.weight
+                  },
+                  children: [
+                    label,
+                    set ? " \u2022" : ""
+                  ]
+                }
+              )
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      ScrollView2,
+      {
+        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__ */ jsx14(
+          Pressable3,
+          {
+            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__ */ jsxs6(View6, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ jsxs6(
+        View6,
+        {
+          style: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: theme.spacing.sm,
+            minHeight: 28
+          },
+          children: [
+            /* @__PURE__ */ jsx14(Text5, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: active ? `Strength ${Math.round(active.strength * 100)}` : "Pick a colour" }),
+            active ? /* @__PURE__ */ jsx14(
+              Pressable3,
+              {
+                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__ */ jsx14(Text5, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        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
+import {
+  cropFitScale as cropFitScale2,
+  flipPatch,
+  isFlipped,
+  useEditor as useEditor11,
+  useEditorStore as useEditorStore4
+} from "@pictor-sdk/core";
+import { Pressable as Pressable4, ScrollView as ScrollView3, Text as Text7, View as View8 } from "react-native";
+
+// src/components/StraightenRuler.tsx
+import { useMemo as useMemo9, useRef as useRef10 } from "react";
+import { Text as Text6, View as View7 } from "react-native";
+import { Gesture as Gesture7, GestureDetector as GestureDetector7 } from "react-native-gesture-handler";
+import Animated7 from "react-native-reanimated";
+import { runOnJS as runOnJS7 } from "react-native-worklets";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var PX_PER_DEGREE = 60;
+function StraightenRuler({ value, min = -45, max = 45, onStart, onChange, onEnd }) {
+  const theme = useTheme();
+  const start = useRef10(value);
+  const current = useRef10(value);
+  current.current = value;
+  const handlers = useMemo9(() => ({
+    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 = useMemo9(() => Gesture7.Pan().onStart(() => {
+    "worklet";
+    runOnJS7(handlers.begin)();
+  }).onUpdate((event) => {
+    "worklet";
+    runOnJS7(handlers.update)(event.translationX);
+  }).onFinalize(() => {
+    "worklet";
+    runOnJS7(handlers.finish)();
+  }), [handlers]);
+  const rounded = Math.round(value * 10) / 10;
+  return /* @__PURE__ */ jsx15(GestureDetector7, { gesture, children: /* @__PURE__ */ jsxs7(Animated7.View, { style: { height: 76, overflow: "hidden", justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsx15(View7, { style: { position: "absolute", top: 0, alignSelf: "center", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, backgroundColor: theme.colors.surface }, children: /* @__PURE__ */ jsxs7(Text6, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: [
+      rounded.toFixed(1),
+      "\xB0"
+    ] }) }),
+    /* @__PURE__ */ jsx15(View7, { 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__ */ jsx15(View7, { style: { width: 1, height: major ? 22 : 11, backgroundColor: offset === 0 ? theme.colors.accent : theme.colors.textMuted } }, offset);
+    }) }),
+    /* @__PURE__ */ jsx15(View7, { 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
+import { jsx as jsx16, jsxs as jsxs8 } from "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 } = useEditor11();
+  useEditorStore4();
+  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: cropFitScale2(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: cropFitScale2(data.intrinsic, document.size, profile.interaction?.crop?.fit ?? "contain", rotation)
+      }
+    });
+  };
+  const flip = (axis) => dispatch({
+    type: "layer/transform",
+    id: layer.id,
+    patch: flipPatch(layer.transform, axis)
+  });
+  return /* @__PURE__ */ jsxs8(View8, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ jsx16(View8, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx16(
+      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__ */ jsxs8(
+      ScrollView3,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ jsx16(
+            Pressable4,
+            {
+              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__ */ jsx16(Text7, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: "\u27F3 90\xB0" })
+            }
+          ),
+          ["horizontal", "vertical"].map((axis) => {
+            const on = isFlipped(layer.transform, axis);
+            return /* @__PURE__ */ jsx16(
+              Pressable4,
+              {
+                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__ */ jsx16(
+                  Text7,
+                  {
+                    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__ */ jsx16(
+            Pressable4,
+            {
+              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__ */ jsx16(Text7, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: aspectLabel(aspect) })
+            },
+            i
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/panels/DrawPanel.tsx
+import { Pressable as Pressable5, ScrollView as ScrollView4, Text as Text8, View as View9 } from "react-native";
+import { jsx as jsx17, jsxs as jsxs9 } from "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__ */ jsxs9(View9, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ jsx17(View9, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx17(
+      Slider,
+      {
+        value: brush.width,
+        min: 2e-3,
+        max: 0.06,
+        centered: false,
+        onChange: (width) => setBrush({ ...brush, width })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs9(
+      ScrollView4,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center" },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ jsx17(
+            Pressable5,
+            {
+              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__ */ jsx17(Text8, { style: { color: theme.colors.text, fontSize: 13 }, children: "\u{1F4A7}" })
+            }
+          ),
+          SWATCHES.map((color) => /* @__PURE__ */ jsx17(
+            Pressable5,
+            {
+              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__ */ jsx17(
+      ScrollView4,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: BRUSHES.map((b) => /* @__PURE__ */ jsx17(
+          Pressable5,
+          {
+            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__ */ jsx17(
+              Text8,
+              {
+                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
+import { baseImageLayer, useEditor as useEditor12, useLuts } from "@pictor-sdk/core";
+import { useRenderer as useRenderer3 } from "@pictor-sdk/skia";
+import { Canvas, Image as SkiaImage } from "@shopify/react-native-skia";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { Pressable as Pressable6, ScrollView as ScrollView5, Text as Text9, View as View10 } from "react-native";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var THUMB = 84;
+function useBaseImageLayer() {
+  const { document } = useEditor12();
+  return baseImageLayer(document);
+}
+function Thumb({ lut, label, active }) {
+  const { document } = useEditor12();
+  const renderer = useRenderer3();
+  const theme = useTheme();
+  const [image, setImage] = useState7(null);
+  const lutId = lut?.id;
+  const lutIntensity = lut?.intensity;
+  useEffect5(() => {
+    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__ */ jsxs10(View10, { style: { alignItems: "center", gap: 4 }, children: [
+    /* @__PURE__ */ jsx18(
+      Text9,
+      {
+        style: {
+          color: active ? theme.colors.accent : theme.colors.textMuted,
+          fontSize: theme.font.sizeSm
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      View10,
+      {
+        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__ */ jsx18(Canvas, { style: { width: THUMB, height: THUMB }, children: /* @__PURE__ */ jsx18(SkiaImage, { image, x: 0, y: 0, width: THUMB, height: THUMB, fit: "cover" }) }) : null
+      }
+    )
+  ] });
+}
+function FilterStrip() {
+  const { dispatch } = useEditor12();
+  const luts = useLuts();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [intensityFor, setIntensityFor] = useState7(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__ */ jsxs10(View10, { style: { backgroundColor: theme.colors.background }, children: [
+    intensityFor && activeLut?.id === intensityFor ? /* @__PURE__ */ jsx18(View10, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx18(
+      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__ */ jsxs10(
+      ScrollView5,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, padding: theme.spacing.md },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ jsx18(Pressable6, { onPress: () => applyLut(null), children: /* @__PURE__ */ jsx18(Thumb, { lut: void 0, label: "Original", active: !activeLut }) }),
+          luts.map((lut) => /* @__PURE__ */ jsx18(Pressable6, { onPress: () => applyLut(lut.id), children: /* @__PURE__ */ jsx18(
+            Thumb,
+            {
+              lut: { id: lut.id, intensity: 1 },
+              label: lut.label,
+              active: activeLut?.id === lut.id
+            }
+          ) }, lut.id))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/panels/LayoutPanel.tsx
+import { useEditor as useEditor13 } from "@pictor-sdk/core";
+import { Pressable as Pressable7, ScrollView as ScrollView6, Text as Text10 } from "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
+import { jsx as jsx19 } from "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 } = useEditor13();
+  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__ */ jsx19(
+    ScrollView6,
+    {
+      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__ */ jsx19(
+        Pressable7,
+        {
+          onPress: () => apply(preset.id),
+          style: {
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.surface
+          },
+          children: /* @__PURE__ */ jsx19(Text10, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }, children: preset.label })
+        },
+        preset.id
+      ))
+    }
+  );
+}
+
+// src/panels/LuxPanel.tsx
+import {
+  luxControlState,
+  luxIntensityPatch,
+  useEditor as useEditor14
+} from "@pictor-sdk/core";
+import { useLuxAnalysis } from "@pictor-sdk/skia";
+import { Pressable as Pressable8, Text as Text11, View as View11 } from "react-native";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+function LuxPanel() {
+  const { dispatch } = useEditor14();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const data = layer?.data;
+  const proposal = useLuxAnalysis(data?.source);
+  if (!layer || !data) return null;
+  const stored = data.color.lux;
+  const intensity = stored?.intensity ?? 0;
+  const state = luxControlState(stored, proposal);
+  const setIntensity = (value) => {
+    const lux = 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__ */ jsx20(View11, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: /* @__PURE__ */ jsxs11(View11, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+    /* @__PURE__ */ jsxs11(
+      View11,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: theme.spacing.sm,
+          minHeight: 28
+        },
+        children: [
+          /* @__PURE__ */ jsx20(
+            Text11,
+            {
+              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__ */ jsx20(
+            Pressable8,
+            {
+              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__ */ jsx20(Text11, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "Reset" })
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      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
+import {
+  initialMediaTransform,
+  mediaConfigFromProfile as mediaConfigFromProfile2,
+  useEditor as useEditor15
+} from "@pictor-sdk/core";
+import { preferResolvedSize as preferResolvedSize2, useResolvedImageSize as useResolvedImageSize2 } from "@pictor-sdk/skia";
+import { Pressable as Pressable9, Text as Text12, View as View12 } from "react-native";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+function MediaPanel() {
+  const { document, dispatch, profile } = useEditor15();
+  const layer = useBaseMediaLayer();
+  const theme = useTheme();
+  const data = layer?.data;
+  const resolved = useResolvedImageSize2(data?.source);
+  if (!layer) {
+    return /* @__PURE__ */ jsx21(View12, { style: { padding: theme.spacing.lg }, children: /* @__PURE__ */ jsx21(Text12, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: "This document has no base photo." }) });
+  }
+  const reset = () => {
+    const config = mediaConfigFromProfile2(profile.interaction?.media);
+    dispatch({
+      type: "layer/transform",
+      id: layer.id,
+      patch: initialMediaTransform(
+        preferResolvedSize2(resolved, data?.intrinsic),
+        document.size,
+        config
+      )
+    });
+  };
+  return /* @__PURE__ */ jsxs12(View12, { style: { padding: theme.spacing.lg, gap: theme.spacing.md }, children: [
+    /* @__PURE__ */ jsx21(Text12, { 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__ */ jsx21(
+      Pressable9,
+      {
+        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__ */ jsx21(Text12, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Reset" })
+      }
+    )
+  ] });
+}
+
+// src/panels/LayersPanel.tsx
+import {
+  isDirectManipulationLayer as isDirectManipulationLayer2,
+  useEditor as useEditor16
+} from "@pictor-sdk/core";
+import { Pressable as Pressable10, ScrollView as ScrollView7, Text as Text13, View as View13 } from "react-native";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+function LayersPanel() {
+  const { document, selection, select, dispatch, profile } = useEditor16();
+  const theme = useTheme();
+  const layers = layersForPanel(document, profile.interaction?.layers);
+  const minimumIndex = minimumLayerIndexForPanel(document, profile.interaction?.layers);
+  return /* @__PURE__ */ jsx22(ScrollView7, { style: { maxHeight: 220, backgroundColor: theme.colors.background }, children: layers.map(({ layer, index }) => {
+    const selected = selection.includes(layer.id);
+    return /* @__PURE__ */ jsxs13(
+      View13,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs,
+          backgroundColor: selected ? theme.colors.surface : "transparent"
+        },
+        children: [
+          /* @__PURE__ */ jsx22(Pressable10, { style: { flex: 1 }, onPress: () => select([layer.id]), children: /* @__PURE__ */ jsx22(Text13, { 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__ */ jsx22(
+            Pressable10,
+            {
+              disabled: index === document.layers.length - 1,
+              onPress: () => dispatch({ type: "layer/reorder", id: layer.id, to: index + 1 }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ jsx22(Text13, { style: { color: theme.colors.textMuted }, children: "\u25B2" })
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            Pressable10,
+            {
+              disabled: index === minimumIndex,
+              onPress: () => dispatch({ type: "layer/reorder", id: layer.id, to: index - 1 }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ jsx22(Text13, { style: { color: theme.colors.textMuted }, children: "\u25BC" })
+            }
+          ),
+          /* @__PURE__ */ jsx22(
+            Pressable10,
+            {
+              onPress: () => dispatch({ type: "layer/remove", id: layer.id }),
+              style: { padding: theme.spacing.xs },
+              children: /* @__PURE__ */ jsx22(Text13, { 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 }) => isDirectManipulationLayer2(layer, index, interaction)).reverse();
+}
+
+// src/panels/PerspectivePanel.tsx
+import {
+  needsPerspective,
+  perspectivePatch,
+  useEditor as useEditor17,
+  MAX_PERSPECTIVE_DEGREES
+} from "@pictor-sdk/core";
+import { useState as useState8 } from "react";
+import { Pressable as Pressable11, Text as Text14, View as View14 } from "react-native";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var MAX_STRAIGHTEN_DEGREES = 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 } = useEditor17();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  const [mode, setMode] = useState8("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] * 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 / 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: perspectivePatch(needsPerspective(next) ? next : void 0)
+    });
+  };
+  const value = degreesOf(mode);
+  const max = mode === "straighten" ? MAX_STRAIGHTEN_DEGREES : MAX_PERSPECTIVE_DEGREES;
+  return /* @__PURE__ */ jsxs14(View14, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ jsx23(
+      View14,
+      {
+        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__ */ jsxs14(
+            Pressable11,
+            {
+              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__ */ jsx23(
+                  Text14,
+                  {
+                    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__ */ jsx23(
+                  Pressable11,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Reset ${label.toLowerCase()}`,
+                    onPress: () => setDegrees(key, 0),
+                    hitSlop: 8,
+                    children: /* @__PURE__ */ jsx23(Text14, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: "\u2715" })
+                  }
+                ) : null
+              ]
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx23(View14, { style: { paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx23(
+      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
+import { createId as createId2, useEditor as useEditor18 } from "@pictor-sdk/core";
+import { Image, Pressable as Pressable12, ScrollView as ScrollView8, Text as Text15, View as View15 } from "react-native";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+function StickerPanel() {
+  const { dispatch, select } = useEditor18();
+  const theme = useTheme();
+  const [stickers] = useUiState("stickers", []);
+  const add = (sticker) => {
+    const id = createId2("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__ */ jsx24(View15, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.md }, children: /* @__PURE__ */ jsxs15(Text15, { style: { color: theme.colors.textMuted, textAlign: "center", fontSize: theme.font.sizeSm }, children: [
+      "No stickers registered \u2014 pass `stickers` to ",
+      "<Editor>",
+      "."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx24(
+    ScrollView8,
+    {
+      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__ */ jsx24(Pressable12, { onPress: () => add(sticker), children: /* @__PURE__ */ jsx24(
+        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
+import {
+  createTiltShift,
+  needsTiltShift as needsTiltShift2,
+  tiltShiftPatch as tiltShiftPatch2,
+  useEditor as useEditor19,
+  MAX_TILT_BLUR,
+  MAX_TILT_FEATHER,
+  MAX_TILT_RADIUS
+} from "@pictor-sdk/core";
+import { Pressable as Pressable13, Text as Text16, View as View16 } from "react-native";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var MODES2 = [
+  { key: "off", label: "Off" },
+  { key: "radial", label: "Radial" },
+  { key: "linear", label: "Linear" }
+];
+function TiltShiftPanel() {
+  const { dispatch } = useEditor19();
+  const theme = useTheme();
+  const layer = useTargetImageLayer();
+  if (!layer) return null;
+  const data = layer.data;
+  const tilt = needsTiltShift2(data.tiltShift) ? data.tiltShift : void 0;
+  const mode = tilt?.mode ?? "off";
+  const patch = (next) => dispatch({
+    type: "layer/patchData",
+    id: layer.id,
+    patch: tiltShiftPatch2(next)
+  });
+  const setMode = (key) => {
+    if (key === "off") return patch(void 0);
+    patch(tilt ? { ...tilt, mode: key } : createTiltShift(key));
+  };
+  const set = (over) => tilt && patch({ ...tilt, ...over });
+  const sliders = [
+    { key: "blur", label: "Blur", max: MAX_TILT_BLUR },
+    { key: "radius", label: "Size", max: MAX_TILT_RADIUS },
+    { key: "feather", label: "Feather", max: MAX_TILT_FEATHER }
+  ];
+  return /* @__PURE__ */ jsxs16(View16, { style: { backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }, children: [
+    /* @__PURE__ */ jsx25(
+      View16,
+      {
+        style: {
+          flexDirection: "row",
+          justifyContent: "center",
+          gap: theme.spacing.md,
+          paddingVertical: theme.spacing.sm
+        },
+        children: MODES2.map(({ key, label }) => {
+          const selected = key === mode;
+          return /* @__PURE__ */ jsx25(
+            Pressable13,
+            {
+              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__ */ jsx25(
+                Text16,
+                {
+                  style: {
+                    color: selected ? theme.colors.accent : theme.colors.textMuted,
+                    fontSize: theme.font.sizeSm,
+                    fontWeight: theme.font.weight
+                  },
+                  children: label
+                }
+              )
+            },
+            key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxs16(View16, { style: { paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ jsx25(
+        Text16,
+        {
+          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__ */ jsxs16(View16, { children: [
+          /* @__PURE__ */ jsxs16(Text16, { style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm }, children: [
+            label,
+            " ",
+            tilt ? Math.round(value / max * 100) : ""
+          ] }),
+          /* @__PURE__ */ jsx25(
+            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
+import { jsx as jsx26, jsxs as jsxs17 } from "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 } = useEditor20();
+  const tools = useTools();
+  const tool = tools.find((t) => t.id === activeTool);
+  const Panel = resolvePanel(activeTool, tool?.Panel);
+  const theme = useTheme();
+  const finalized = useRef11(false);
+  useEffect6(() => {
+    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__ */ jsxs17(View17, { style: { backgroundColor: theme.colors.background, borderTopLeftRadius: theme.radii.lg, borderTopRightRadius: theme.radii.lg, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx26(Panel, { document, selection, dispatch, close: done }),
+    /* @__PURE__ */ jsxs17(View17, { style: { height: 52, flexDirection: "row", alignItems: "center", justifyContent: "space-between", borderTopWidth: 1, borderTopColor: theme.colors.track, paddingHorizontal: theme.spacing.lg }, children: [
+      /* @__PURE__ */ jsx26(Pressable14, { accessibilityRole: "button", accessibilityLabel: "Cancel edits", onPress: cancel, children: /* @__PURE__ */ jsx26(Text17, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Cancel" }) }),
+      /* @__PURE__ */ jsx26(Text17, { style: { color: theme.colors.text, fontSize: theme.font.size, fontWeight: theme.font.weight }, children: tool?.label ?? activeTool }),
+      /* @__PURE__ */ jsx26(Pressable14, { accessibilityRole: "button", accessibilityLabel: "Apply edits", onPress: done, children: /* @__PURE__ */ jsx26(Text17, { style: { color: theme.colors.accent, fontSize: theme.font.size, fontWeight: theme.font.weight }, children: "Done" }) })
+    ] })
+  ] });
+}
+
+// src/composer/TextComposer.tsx
+import {
+  MAX_TEXT_SIZE,
+  MIN_TEXT_SIZE,
+  fontChoices,
+  useEditor as useEditor22,
+  useEditorStore as useEditorStore5
+} from "@pictor-sdk/core";
+import { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo11, useRef as useRef13, useState as useState10 } from "react";
+import {
+  BackHandler,
+  Keyboard,
+  Platform,
+  Pressable as Pressable15,
+  ScrollView as ScrollView9,
+  Text as Text18,
+  TextInput,
+  View as View18
+} from "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
+import {
+  clampTextSize,
+  collapseTextSpans,
+  createTextDraft,
+  needsSpanCollapse,
+  isBlankText,
+  patchTextSpan,
+  resolveTextSession,
+  textSpanOf,
+  textValueOf,
+  useEditor as useEditor21
+} from "@pictor-sdk/core";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo10, useRef as useRef12, useState as useState9 } from "react";
+function useTextSession(options = {}) {
+  const { document, dispatch, profile, selection, select } = useEditor21();
+  const { layerId: requestedId, onFinished } = options;
+  const [session] = useState9(
+    () => resolveTextSession(document.layers, requestedId ? [requestedId] : selection)
+  );
+  const [draftId, setDraftId] = useState9(null);
+  const finished = useRef12(false);
+  const priorSelection = useRef12([]);
+  const capturedPrior = useRef12(false);
+  if (!capturedPrior.current) {
+    capturedPrior.current = true;
+    priorSelection.current = [...selection];
+  }
+  const latest = useRef12({ document, dispatch, select, selection, profile });
+  latest.current = { document, dispatch, select, selection, profile };
+  useEffect7(() => {
+    latest.current.dispatch({ type: "history/beginBatch", label: "text" });
+    if (session.kind === "draft") {
+      const draft = 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 && needsSpanCollapse(layerData)) {
+        latest.current.dispatch({
+          type: "layer/patchData",
+          id: session.layerId,
+          patch: { spans: 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 ? textSpanOf(data) : void 0;
+  const value = data ? textValueOf(data) : "";
+  const idRef = useRef12(null);
+  idRef.current = layerId ?? null;
+  const dataRef = useRef12(void 0);
+  dataRef.current = data;
+  const patchData = useCallback5((patch) => {
+    const id = idRef.current;
+    if (!id) return;
+    latest.current.dispatch({ type: "layer/patchData", id, patch });
+  }, []);
+  const setValue = useCallback5(
+    (next) => {
+      const current = dataRef.current;
+      if (!current) return;
+      patchData({ spans: patchTextSpan(current, { text: next }).spans });
+    },
+    [patchData]
+  );
+  const styleSpan = useCallback5(
+    (patch) => {
+      const current = dataRef.current;
+      if (!current) return;
+      patchData({ spans: patchTextSpan(current, patch).spans });
+    },
+    [patchData]
+  );
+  const setSize = useCallback5(
+    (size) => styleSpan({ fontSize: clampTextSize(size) }),
+    [styleSpan]
+  );
+  const commit = useCallback5(() => {
+    if (finished.current) return null;
+    finished.current = true;
+    const id = idRef.current;
+    const blank = isBlankText(dataRef.current ? 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 = useCallback5(() => {
+    if (finished.current) return;
+    finished.current = true;
+    latest.current.dispatch({ type: "history/cancelBatch" });
+    latest.current.select(priorSelection.current);
+    onFinished?.(null);
+  }, [onFinished]);
+  return useMemo10(
+    () => ({
+      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
+import { jsx as jsx27, jsxs as jsxs18 } from "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 = useEditorStore5();
+  const { document } = useEditor22();
+  const [container, setContainer] = useState10({ width: 0, height: 0 });
+  const input = useRef13(null);
+  const [selectionRange, setSelectionRange] = useState10(
+    void 0
+  );
+  const data = session.data;
+  const span = session.span;
+  const layout = useMemo11(() => {
+    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 = useMemo11(() => fontChoices(store.registry.fonts), [store.registry.fonts]);
+  useEffect8(() => {
+    const handle = setTimeout(() => input.current?.focus(), 50);
+    return () => clearTimeout(handle);
+  }, []);
+  const onSelectionChange = useCallback6(
+    (event) => {
+      setSelectionRange(event.nativeEvent.selection);
+    },
+    []
+  );
+  const keepFocus = useCallback6(
+    (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 }));
+  };
+  useEffect8(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (Keyboard.isVisible?.() ?? insets.keyboardVisible) {
+        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__ */ jsxs18(
+    View18,
+    {
+      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__ */ jsx27(
+          View18,
+          {
+            pointerEvents: "none",
+            style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, backgroundColor: "#00000055" }
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          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",
+              ...Platform.OS === "ios" ? {} : { textAlignVertical: "center" },
+              padding: 0
+            },
+            selectionColor: theme.colors.accent,
+            cursorColor: theme.colors.accent
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          View18,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              height: 56,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              paddingHorizontal: theme.spacing.lg
+            },
+            children: [
+              /* @__PURE__ */ jsx27(Pressable15, { accessibilityRole: "button", accessibilityLabel: "Cancel text", onPress: onCancel, children: /* @__PURE__ */ jsx27(Text18, { style: { color: theme.colors.text, fontSize: theme.font.size }, children: "Cancel" }) }),
+              /* @__PURE__ */ jsx27(Pressable15, { accessibilityRole: "button", accessibilityLabel: "Done editing text", onPress: onDone, children: /* @__PURE__ */ jsx27(
+                Text18,
+                {
+                  style: {
+                    color: theme.colors.accent,
+                    fontSize: theme.font.size,
+                    fontWeight: theme.font.weight
+                  },
+                  children: "Done"
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs18(
+          View18,
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: insets.bottom,
+              paddingVertical: theme.spacing.sm,
+              gap: theme.spacing.sm,
+              backgroundColor: "#00000066"
+            },
+            children: [
+              /* @__PURE__ */ jsxs18(View18, { style: controlRow, children: [
+                /* @__PURE__ */ jsx27(
+                  Text18,
+                  {
+                    style: { color: theme.colors.textMuted, fontSize: theme.font.sizeSm, width: 34 },
+                    accessibilityLabel: "Text size",
+                    children: "Aa"
+                  }
+                ),
+                /* @__PURE__ */ jsx27(View18, { style: { flex: 1 }, children: /* @__PURE__ */ jsx27(
+                  Slider,
+                  {
+                    value: span?.fontSize ?? MIN_TEXT_SIZE,
+                    min: MIN_TEXT_SIZE,
+                    max: MAX_TEXT_SIZE,
+                    centered: false,
+                    onChange: (size) => session.setSize(size)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx27(
+                  Pressable15,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: `Alignment ${data?.align ?? "center"}`,
+                    onPress: cycleAlign,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ jsx27(Text18, { style: { color: theme.colors.text, fontWeight: theme.font.weight }, children: ALIGN_GLYPH[data?.align ?? "center"] })
+                  }
+                ),
+                /* @__PURE__ */ jsx27(
+                  Pressable15,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text background",
+                    accessibilityState: { selected: Boolean(data?.fill) },
+                    onPress: cycleFill,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ jsx27(
+                      Text18,
+                      {
+                        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__ */ jsx27(
+                  Pressable15,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text outline",
+                    accessibilityState: { selected: Boolean(data?.stroke) },
+                    onPress: cycleStroke,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ jsx27(
+                      Text18,
+                      {
+                        style: {
+                          color: data?.stroke ? theme.colors.accent : theme.colors.text,
+                          fontWeight: theme.font.weight
+                        },
+                        children: "\u24B6"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx27(
+                  Pressable15,
+                  {
+                    accessibilityRole: "button",
+                    accessibilityLabel: "Text shadow",
+                    accessibilityState: { selected: Boolean(data?.shadow) },
+                    onPress: cycleShadow,
+                    style: { padding: theme.spacing.sm },
+                    children: /* @__PURE__ */ jsx27(
+                      Text18,
+                      {
+                        style: {
+                          color: data?.shadow ? theme.colors.accent : theme.colors.text,
+                          fontWeight: theme.font.weight
+                        },
+                        children: "A\u02D9"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx27(
+                ScrollView9,
+                {
+                  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__ */ jsx27(
+                    Pressable15,
+                    {
+                      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__ */ jsx27(Text18, { style: { color: theme.colors.text, fontSize: theme.font.sizeSm }, children: font.label })
+                    },
+                    font.family
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx27(
+                ScrollView9,
+                {
+                  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__ */ jsx27(
+                    Pressable15,
+                    {
+                      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 } = useEditor22();
+  const session = useTextSession();
+  const [frame, setFrame] = useState10(HIDDEN_KEYBOARD);
+  const token = useRef13(0);
+  useEffect8(() => {
+    token.current += 1;
+    const mine = token.current;
+    const show = Keyboard.addListener(
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
+      (event) => {
+        if (mine !== token.current) return;
+        setFrame({ height: event.endCoordinates?.height ?? 0, duration: event.duration });
+      }
+    );
+    const hide = Keyboard.addListener(
+      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 = useMemo11(() => composerInsets(frame), [frame]);
+  const finish = useCallback6(
+    (commit) => {
+      if (commit) session.commit();
+      else session.cancel();
+      Keyboard.dismiss();
+      setActiveTool(null);
+    },
+    [session, setActiveTool]
+  );
+  return /* @__PURE__ */ jsx27(
+    Composer,
+    {
+      session,
+      insets,
+      onDone: () => finish(true),
+      onCancel: () => finish(false)
+    }
+  );
+}
+
+// src/components/TopBar.tsx
+import { useEditor as useEditor23 } from "@pictor-sdk/core";
+import { ActivityIndicator, Pressable as Pressable16, Text as Text19, View as View19 } from "react-native";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+function TopBar({ onCancel, onNext, busy = false }) {
+  const { canUndo, canRedo, dispatch } = useEditor23();
+  const theme = useTheme();
+  const button = (label, enabled, onPress, color) => /* @__PURE__ */ jsx28(Pressable16, { disabled: !enabled, onPress, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx28(
+    Text19,
+    {
+      style: {
+        color: enabled ? color ?? theme.colors.text : theme.colors.textMuted,
+        fontSize: theme.font.size,
+        fontWeight: theme.font.weight
+      },
+      children: label
+    }
+  ) });
+  return /* @__PURE__ */ jsxs19(
+    View19,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: theme.spacing.sm,
+        backgroundColor: theme.colors.background
+      },
+      children: [
+        button("Cancel", !!onCancel, onCancel),
+        /* @__PURE__ */ jsxs19(View19, { style: { flexDirection: "row" }, children: [
+          button("\u21BA", canUndo, () => dispatch({ type: "history/undo" })),
+          button("\u21BB", canRedo, () => dispatch({ type: "history/redo" }))
+        ] }),
+        busy ? /* @__PURE__ */ jsx28(ActivityIndicator, { color: theme.colors.accent, style: { padding: theme.spacing.sm } }) : button("Next", !!onNext, onNext, theme.colors.accent)
+      ]
+    }
+  );
+}
+
+// src/components/ToolRail.tsx
+import { useEditor as useEditor24, useTools as useTools2 } from "@pictor-sdk/core";
+import { Pressable as Pressable17, ScrollView as ScrollView10, Text as Text20, View as View20 } from "react-native";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+function ToolRail() {
+  const { activeTool, setActiveTool, document, selection, dispatch } = useEditor24();
+  const tools = useTools2();
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx29(
+    ScrollView10,
+    {
+      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__ */ jsxs20(
+          Pressable17,
+          {
+            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__ */ jsx29(View20, { 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__ */ jsx29(Text20, { style: { color: active ? theme.colors.accent : theme.colors.text, fontSize: 18 }, children: tool.label.slice(0, 1) }) }),
+              /* @__PURE__ */ jsx29(
+                Text20,
+                {
+                  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
+import { Fragment, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+function CanvasStage({ children, onError }) {
+  const { activeTool, profile } = useEditor25();
+  const { previews } = useInteractionState();
+  const surface = resolveGestureSurface(activeTool);
+  return /* @__PURE__ */ jsxs21(
+    EditorCanvas,
+    {
+      style: { flex: 1 },
+      onError,
+      previewTransforms: previews,
+      showSelectionChrome: selectionChromeEnabled(profile),
+      children: [
+        surface === "draw" ? /* @__PURE__ */ jsx30(DrawingSurface, {}) : surface === "crop" ? /* @__PURE__ */ jsxs21(Fragment, { children: [
+          /* @__PURE__ */ jsx30(CropGestureSurface, {}),
+          /* @__PURE__ */ jsx30(CropGrid, {})
+        ] }) : surface === "tilt" ? /* @__PURE__ */ jsx30(TiltShiftGestureSurface, {}) : surface === "media" ? /* @__PURE__ */ jsx30(StoryMediaGestureSurface, {}) : /* @__PURE__ */ jsxs21(Fragment, { children: [
+          /* @__PURE__ */ jsx30(LayerGestureSurface, {}),
+          /* @__PURE__ */ jsx30(InteractionGuides, {})
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function mergeSlots(overrides) {
+  return {
+    TopBar,
+    CanvasStage,
+    ToolRail,
+    ToolPanelHost,
+    TextComposer,
+    ...overrides
+  };
+}
+function EditorBody({
+  slots,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  stickers
+}) {
+  const { export: exportDoc, activeTool } = useEditor25();
+  const { layerDragActive } = useInteractionState();
+  const [, setStickers] = useUiState("stickers", []);
+  React19.useEffect(() => {
+    if (stickers) setStickers(stickers);
+  }, [stickers, setStickers]);
+  const theme = useTheme();
+  const [busy, setBusy] = useState11(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__ */ jsx30(GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ jsxs21(View21, { style: { flex: 1, backgroundColor: theme.colors.background }, children: [
+      Top && !composing ? /* @__PURE__ */ jsx30(View21, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ jsx30(Top, { onCancel, onNext: handleNext, busy }) }) : null,
+      Stage ? /* @__PURE__ */ jsx30(Stage, { onError }) : null,
+      PanelHost && !composing ? /* @__PURE__ */ jsx30(View21, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ jsx30(PanelHost, {}) }) : null,
+      Rail && !activeTool ? /* @__PURE__ */ jsx30(View21, { style: hidden, pointerEvents: hits, children: /* @__PURE__ */ jsx30(Rail, {}) }) : null,
+      composing && Composer ? /* @__PURE__ */ jsx30(TextComposerHost, { Composer }) : null
+    ] }) })
+  );
+}
+function Editor({
+  profile,
+  plugins,
+  source,
+  intrinsic,
+  initialDocument,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  slots,
+  theme,
+  stickers,
+  requestImages
+}) {
+  return /* @__PURE__ */ jsx30(
+    EditorProvider,
+    {
+      profile,
+      plugins,
+      source,
+      intrinsic,
+      initialDocument,
+      children: /* @__PURE__ */ jsx30(ThemeContext.Provider, { value: mergeTheme(theme), children: /* @__PURE__ */ jsx30(UiStateProvider, { children: /* @__PURE__ */ jsx30(HostCallbacksProvider, { value: { requestImages, onError }, children: /* @__PURE__ */ jsx30(InteractionProvider, { children: /* @__PURE__ */ jsx30(
+        EditorBody,
+        {
+          slots: mergeSlots(slots),
+          onExport,
+          onCancel,
+          onError,
+          exportSpec,
+          stickers
+        }
+      ) }) }) }) })
+    }
+  );
+}
+
+// src/gestures/EditorGestures.tsx
+import { useEditorStore as useEditorStore6 } from "@pictor-sdk/core";
+import { useCanvasMetrics as useCanvasMetrics7 } from "@pictor-sdk/skia";
+import { useMemo as useMemo12, useRef as useRef14 } from "react";
+import { StyleSheet as StyleSheet8 } from "react-native";
+import { Gesture as Gesture8, GestureDetector as GestureDetector8 } from "react-native-gesture-handler";
+import Animated8 from "react-native-reanimated";
+import { runOnJS as runOnJS8 } from "react-native-worklets";
+
+// src/gestures/controller.ts
+import {
+  hitTestDocument as hitTestDocument2,
+  snapCenter,
+  snapRotation
+} from "@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 = snapCenter(rawX);
+    const sy = snapCenter(rawY);
+    const sr = 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 = hitTestDocument2(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
+import { jsx as jsx31 } from "react/jsx-runtime";
+function EditorGestures({ onSnap }) {
+  const store = useEditorStore6();
+  const metrics = useCanvasMetrics7();
+  const metricsRef = useRef14(metrics);
+  metricsRef.current = metrics;
+  const onSnapRef = useRef14(onSnap);
+  onSnapRef.current = onSnap;
+  const controller = useMemo12(
+    () => createGestureController(store, () => metricsRef.current, {
+      onSnap: (e) => onSnapRef.current?.(e)
+    }),
+    // metricsRef/onSnap are read through refs — store identity is the only dep
+    [store]
+  );
+  const gesture = useMemo12(() => {
+    const tap = Gesture8.Tap().onEnd((e) => {
+      "worklet";
+      runOnJS8(controller.tap)(e.x, e.y);
+    });
+    const pan = Gesture8.Pan().minPointers(1).onStart(() => {
+      "worklet";
+      runOnJS8(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      runOnJS8(controller.setPan)(e.translationX, e.translationY);
+    }).onFinalize(() => {
+      "worklet";
+      runOnJS8(controller.end)();
+    });
+    const pinch = Gesture8.Pinch().onStart(() => {
+      "worklet";
+      runOnJS8(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      runOnJS8(controller.setPinch)(e.scale);
+    }).onFinalize(() => {
+      "worklet";
+      runOnJS8(controller.end)();
+    });
+    const rotate = Gesture8.Rotation().onStart(() => {
+      "worklet";
+      runOnJS8(controller.begin)();
+    }).onUpdate((e) => {
+      "worklet";
+      runOnJS8(controller.setRotate)(e.rotation);
+    }).onFinalize(() => {
+      "worklet";
+      runOnJS8(controller.end)();
+    });
+    return Gesture8.Race(
+      Gesture8.Simultaneous(pan, pinch, rotate),
+      tap
+    );
+  }, [controller]);
+  return /* @__PURE__ */ jsx31(GestureDetector8, { gesture, children: /* @__PURE__ */ jsx31(Animated8.View, { style: StyleSheet8.absoluteFill }) });
+}
+
+// src/index.ts
+import { POST_PROFILE, STORY_PROFILE } from "@pictor-sdk/core";
+
+// src/panels/TextPanel.tsx
+import {
+  createId as createId3,
+  useEditor as useEditor26,
+  useEditorStore as useEditorStore7
+} from "@pictor-sdk/core";
+import { Pressable as Pressable18, ScrollView as ScrollView11, Text as Text21, TextInput as TextInput2, View as View22 } from "react-native";
+import { jsx as jsx32, jsxs as jsxs22 } from "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 } = useEditor26();
+  const store = useEditorStore7();
+  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 = createId3("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__ */ jsx32(View22, { style: { backgroundColor: theme.colors.background, padding: theme.spacing.md, alignItems: "center" }, children: /* @__PURE__ */ jsx32(
+      Pressable18,
+      {
+        onPress: addText,
+        style: {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+          borderRadius: theme.radii.md,
+          backgroundColor: theme.colors.surface
+        },
+        children: /* @__PURE__ */ jsx32(Text21, { 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__ */ jsxs22(View22, { style: { backgroundColor: theme.colors.background }, children: [
+    /* @__PURE__ */ jsxs22(View22, { style: { paddingHorizontal: theme.spacing.md }, children: [
+      /* @__PURE__ */ jsx32(
+        TextInput2,
+        {
+          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__ */ jsx32(
+        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__ */ jsxs22(
+      ScrollView11,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: { gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: "center", paddingBottom: theme.spacing.sm },
+        style: { flexGrow: 0 },
+        children: [
+          /* @__PURE__ */ jsx32(Pressable18, { onPress: cycleAlign, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx32(Text21, { style: { color: theme.colors.text, fontWeight: theme.font.weight }, children: data.align === "left" ? "\u21E4" : data.align === "center" ? "\u2630" : "\u21E5" }) }),
+          /* @__PURE__ */ jsx32(Pressable18, { onPress: cycleFill, style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx32(Text21, { 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__ */ jsx32(Pressable18, { onPress: () => patchSpan({ fontFamily: family }), style: { padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx32(
+            Text21,
+            {
+              style: {
+                color: span.fontFamily === family ? theme.colors.accent : theme.colors.textMuted,
+                fontSize: theme.font.sizeSm
+              },
+              children: family
+            }
+          ) }, family)),
+          SWATCHES3.map((color) => /* @__PURE__ */ jsx32(
+            Pressable18,
+            {
+              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
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  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.mjs.map