@pictor-sdk/ui 0.2.2 → 0.4.0

package/dist/index.d.mts

@@ -87,6 +87,14 @@ interface ComposerInsets {
     /** Animation duration to match the platform's own, clamped to something sane. */
     duration: number;
 }
+interface CanvasRect {
+    /** Size of the fitted canvas inside the container. */
+    width: number;
+    height: number;
+    /** Offset of the canvas inside the container, which centres it. */
+    left: number;
+    top: number;
+}
 
 /**
  * The state and commands behind a text-editing session.
@@ -167,6 +175,11 @@ interface TextComposerProps {
     onDone(): void;
     /** Abandon, restoring the document. */
     onCancel(): void;
+    /**
+     * The canvas rectangle in this composer's coordinates, when the host draws a
+     * cover canvas. Omitted, the composer assumes a centred contain fit.
+     */
+    canvas?: CanvasRect;
 }
 /**
  * The full-screen Story text composer.
@@ -176,20 +189,22 @@ interface TextComposerProps {
  * `renderDocument` — so what is on screen while composing is what exports.
  *
  * The `TextInput` itself is invisible and stretched over the canvas: it owns
- * the caret, the platform selection handles and the IME, while the *visible*
- * text is the real Skia layer underneath. That is what keeps preview and export
- * identical without giving up native text editing.
+ * focus and the IME, while the *visible* text is the real Skia layer
+ * underneath. On Android the platform paints composing glyphs black regardless
+ * of the input's colour, so the input is fully hidden and a caret is drawn at
+ * the measured selection instead. That is what keeps preview and export
+ * identical without giving up text editing.
  *
  * @experimental
  */
-declare function TextComposer({ session, insets, onDone, onCancel }: TextComposerProps): React__default.JSX.Element;
+declare function TextComposer({ session, insets, onDone, onCancel, canvas }: TextComposerProps): React__default.JSX.Element;
 /**
  * Mounts a text session and the composer for it, and keeps the keyboard inset
  * up to date. This is what `<Editor>` renders while the text tool is active.
  *
  * @experimental
  */
-declare function TextComposerHost({ Composer, safeArea, }: {
+declare function TextComposerHost({ Composer, safeArea, canvas, }: {
     /** Replace the default composer without replacing the canvas or editor. */
     Composer?: React__default.ComponentType<TextComposerProps>;
     /**
@@ -203,6 +218,8 @@ declare function TextComposerHost({ Composer, safeArea, }: {
         top?: number;
         bottom?: number;
     };
+    /** The canvas rectangle, for a host that draws a cover canvas. */
+    canvas?: CanvasRect;
 }): React__default.JSX.Element;
 
 /** What the top bar slot receives: the transaction actions and undo state. */
@@ -605,6 +622,12 @@ declare function EditorGestures({ onSnap }: EditorGesturesProps): React__default
 interface LayerGestureSurfaceProps {
     /** Fired once per snap engagement — hook up haptics here if you want them. */
     onSnap?: (event: GestureSnapEvent) => void;
+    /**
+     * Fired when a tap lands on a layer that was already selected when the
+     * gesture began. Hosts use this for a second-tap action such as opening the
+     * text composer; the SDK itself stays unaware of what a layer means.
+     */
+    onSelectedLayerTap?: (layerId: string) => void;
 }
 /**
  * Direct manipulation of overlay layers: grab the top-most layer under the
@@ -622,7 +645,7 @@ interface LayerGestureSurfaceProps {
  * - **One history entry.** The document is written exactly once, when the
  *   gesture settles, and not at all if nothing actually moved.
  */
-declare function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps): React__default.JSX.Element;
+declare function LayerGestureSurface({ onSnap, onSelectedLayerTap }: LayerGestureSurfaceProps): React__default.JSX.Element;
 
 /** The centre and rotation guides shown while a layer snaps. */
 interface InteractionGuidesProps {
@@ -827,6 +850,22 @@ interface LayoutImageFit {
 declare function fitImageToLayoutCell(cell: Rect, documentSize: Size, intrinsic: Size, options?: LayoutCropOptions): LayoutImageFit;
 /** The transform patch that moves a layer into a cell, leaving its other fields alone. */
 declare function cellToTransformPatch(cell: LayoutCell): Partial<Transform>;
+/**
+ * The box a photo draws into when it fills one cell, in document pixels.
+ *
+ * The cell fixes the box: `fitImageToLayoutCell` picks a crop whose aspect
+ * matches the cell, so zooming and panning inside it move the source window
+ * and leave the box alone. That is what makes a live crop expressible as a
+ * source-space override at all, and it is why a cell's bounds cannot drift
+ * while a gesture is running.
+ *
+ * Paired with `imageSourceTransform` from `@pictor-sdk/skia`, this is
+ * everything a host needs to draw an uncommitted crop from a worklet, using
+ * the renderer's own arithmetic rather than a second copy of it.
+ *
+ * @experimental
+ */
+declare function layoutCellBox(cell: Rect, documentSize: Size): Size;
 
 /** The active brush: kind, colour and width. Width is a fraction of document width. */
 interface BrushConfig {
@@ -882,4 +921,4 @@ declare function UiStateProvider({ children }: {
 /** Read and write one key of the ephemeral UI state. Throws outside an `<Editor>`. */
 declare function useUiState<T>(key: string, fallback: T): [T, (value: T) => void];
 
-export { type AddPhotoController, type AddPhotoControllerOptions, AddPhotoPanel, AdjustPanel, type BrushConfig, CanvasStage, type CanvasStageProps, CropGestureSurface, type CropGestureSurfaceProps, CropGrid, CropPanel, DEFAULT_BRUSH, type DrawController, DrawPanel, DrawingSurface, Editor, EditorGestures, type EditorGesturesProps, type EditorProps, type EditorSlots, type EditorTheme, FilterStrip, type GestureController, type GestureControllerOptions, type GestureMetrics, type GestureSnapEvent, type GestureSurfaceKind, type HostCallbacks, HostCallbacksProvider, InteractionGuides, type InteractionGuidesProps, InteractionProvider, InvalidImageResultError, LayerGestureSurface, type LayerGestureSurfaceProps, LayersPanel, type LayoutCell, type LayoutCropOptions, type LayoutImageFit, LayoutPanel, type LayoutPreset, MediaPanel, type PartialTheme, STRAIGHTEN_LIMIT, Slider, type SliderProps, type StickerAsset, StickerPanel, StoryMediaGestureSurface, type StoryMediaGestureSurfaceProps, StraightenRuler, type StraightenRulerProps, TextComposer, TextComposerHost, type TextComposerProps, TextPanel, type TextSessionController, ThemeContext, ToolPanelHost, ToolRail, TopBar, type TopBarProps, UiStateProvider, type UiStateStore, type UseTextSessionOptions, canvasSizeForAspect, cellToTransformPatch, centeredCropForAspect, createAddPhotoController, createDrawController, createGestureController, createUiStateStore, defaultTheme, fitImageToLayoutCell, layoutCellBounds, layoutCells, mergeSlots, mergeTheme, radiansToStraighten, resolveGestureSurface, resolvePanel, straightenToRadians, useBaseImageLayer, useBaseMediaLayer, useHostCallbacks, useInteractionState, useTargetImageLayer, useTextSession, useTheme, useUiState };
+export { type AddPhotoController, type AddPhotoControllerOptions, AddPhotoPanel, AdjustPanel, type BrushConfig, CanvasStage, type CanvasStageProps, CropGestureSurface, type CropGestureSurfaceProps, CropGrid, CropPanel, DEFAULT_BRUSH, type DrawController, DrawPanel, DrawingSurface, Editor, EditorGestures, type EditorGesturesProps, type EditorProps, type EditorSlots, type EditorTheme, FilterStrip, type GestureController, type GestureControllerOptions, type GestureMetrics, type GestureSnapEvent, type GestureSurfaceKind, type HostCallbacks, HostCallbacksProvider, InteractionGuides, type InteractionGuidesProps, InteractionProvider, InvalidImageResultError, LayerGestureSurface, type LayerGestureSurfaceProps, LayersPanel, type LayoutCell, type LayoutCropOptions, type LayoutImageFit, LayoutPanel, type LayoutPreset, MediaPanel, type PartialTheme, STRAIGHTEN_LIMIT, Slider, type SliderProps, type StickerAsset, StickerPanel, StoryMediaGestureSurface, type StoryMediaGestureSurfaceProps, StraightenRuler, type StraightenRulerProps, TextComposer, TextComposerHost, type TextComposerProps, TextPanel, type TextSessionController, ThemeContext, ToolPanelHost, ToolRail, TopBar, type TopBarProps, UiStateProvider, type UiStateStore, type UseTextSessionOptions, canvasSizeForAspect, cellToTransformPatch, centeredCropForAspect, createAddPhotoController, createDrawController, createGestureController, createUiStateStore, defaultTheme, fitImageToLayoutCell, layoutCellBounds, layoutCellBox, layoutCells, mergeSlots, mergeTheme, radiansToStraighten, resolveGestureSurface, resolvePanel, straightenToRadians, useBaseImageLayer, useBaseMediaLayer, useHostCallbacks, useInteractionState, useTargetImageLayer, useTextSession, useTheme, useUiState };

package/dist/index.d.ts

@@ -87,6 +87,14 @@ interface ComposerInsets {
     /** Animation duration to match the platform's own, clamped to something sane. */
     duration: number;
 }
+interface CanvasRect {
+    /** Size of the fitted canvas inside the container. */
+    width: number;
+    height: number;
+    /** Offset of the canvas inside the container, which centres it. */
+    left: number;
+    top: number;
+}
 
 /**
  * The state and commands behind a text-editing session.
@@ -167,6 +175,11 @@ interface TextComposerProps {
     onDone(): void;
     /** Abandon, restoring the document. */
     onCancel(): void;
+    /**
+     * The canvas rectangle in this composer's coordinates, when the host draws a
+     * cover canvas. Omitted, the composer assumes a centred contain fit.
+     */
+    canvas?: CanvasRect;
 }
 /**
  * The full-screen Story text composer.
@@ -176,20 +189,22 @@ interface TextComposerProps {
  * `renderDocument` — so what is on screen while composing is what exports.
  *
  * The `TextInput` itself is invisible and stretched over the canvas: it owns
- * the caret, the platform selection handles and the IME, while the *visible*
- * text is the real Skia layer underneath. That is what keeps preview and export
- * identical without giving up native text editing.
+ * focus and the IME, while the *visible* text is the real Skia layer
+ * underneath. On Android the platform paints composing glyphs black regardless
+ * of the input's colour, so the input is fully hidden and a caret is drawn at
+ * the measured selection instead. That is what keeps preview and export
+ * identical without giving up text editing.
  *
  * @experimental
  */
-declare function TextComposer({ session, insets, onDone, onCancel }: TextComposerProps): React__default.JSX.Element;
+declare function TextComposer({ session, insets, onDone, onCancel, canvas }: TextComposerProps): React__default.JSX.Element;
 /**
  * Mounts a text session and the composer for it, and keeps the keyboard inset
  * up to date. This is what `<Editor>` renders while the text tool is active.
  *
  * @experimental
  */
-declare function TextComposerHost({ Composer, safeArea, }: {
+declare function TextComposerHost({ Composer, safeArea, canvas, }: {
     /** Replace the default composer without replacing the canvas or editor. */
     Composer?: React__default.ComponentType<TextComposerProps>;
     /**
@@ -203,6 +218,8 @@ declare function TextComposerHost({ Composer, safeArea, }: {
         top?: number;
         bottom?: number;
     };
+    /** The canvas rectangle, for a host that draws a cover canvas. */
+    canvas?: CanvasRect;
 }): React__default.JSX.Element;
 
 /** What the top bar slot receives: the transaction actions and undo state. */
@@ -605,6 +622,12 @@ declare function EditorGestures({ onSnap }: EditorGesturesProps): React__default
 interface LayerGestureSurfaceProps {
     /** Fired once per snap engagement — hook up haptics here if you want them. */
     onSnap?: (event: GestureSnapEvent) => void;
+    /**
+     * Fired when a tap lands on a layer that was already selected when the
+     * gesture began. Hosts use this for a second-tap action such as opening the
+     * text composer; the SDK itself stays unaware of what a layer means.
+     */
+    onSelectedLayerTap?: (layerId: string) => void;
 }
 /**
  * Direct manipulation of overlay layers: grab the top-most layer under the
@@ -622,7 +645,7 @@ interface LayerGestureSurfaceProps {
  * - **One history entry.** The document is written exactly once, when the
  *   gesture settles, and not at all if nothing actually moved.
  */
-declare function LayerGestureSurface({ onSnap }: LayerGestureSurfaceProps): React__default.JSX.Element;
+declare function LayerGestureSurface({ onSnap, onSelectedLayerTap }: LayerGestureSurfaceProps): React__default.JSX.Element;
 
 /** The centre and rotation guides shown while a layer snaps. */
 interface InteractionGuidesProps {
@@ -827,6 +850,22 @@ interface LayoutImageFit {
 declare function fitImageToLayoutCell(cell: Rect, documentSize: Size, intrinsic: Size, options?: LayoutCropOptions): LayoutImageFit;
 /** The transform patch that moves a layer into a cell, leaving its other fields alone. */
 declare function cellToTransformPatch(cell: LayoutCell): Partial<Transform>;
+/**
+ * The box a photo draws into when it fills one cell, in document pixels.
+ *
+ * The cell fixes the box: `fitImageToLayoutCell` picks a crop whose aspect
+ * matches the cell, so zooming and panning inside it move the source window
+ * and leave the box alone. That is what makes a live crop expressible as a
+ * source-space override at all, and it is why a cell's bounds cannot drift
+ * while a gesture is running.
+ *
+ * Paired with `imageSourceTransform` from `@pictor-sdk/skia`, this is
+ * everything a host needs to draw an uncommitted crop from a worklet, using
+ * the renderer's own arithmetic rather than a second copy of it.
+ *
+ * @experimental
+ */
+declare function layoutCellBox(cell: Rect, documentSize: Size): Size;
 
 /** The active brush: kind, colour and width. Width is a fraction of document width. */
 interface BrushConfig {
@@ -882,4 +921,4 @@ declare function UiStateProvider({ children }: {
 /** Read and write one key of the ephemeral UI state. Throws outside an `<Editor>`. */
 declare function useUiState<T>(key: string, fallback: T): [T, (value: T) => void];
 
-export { type AddPhotoController, type AddPhotoControllerOptions, AddPhotoPanel, AdjustPanel, type BrushConfig, CanvasStage, type CanvasStageProps, CropGestureSurface, type CropGestureSurfaceProps, CropGrid, CropPanel, DEFAULT_BRUSH, type DrawController, DrawPanel, DrawingSurface, Editor, EditorGestures, type EditorGesturesProps, type EditorProps, type EditorSlots, type EditorTheme, FilterStrip, type GestureController, type GestureControllerOptions, type GestureMetrics, type GestureSnapEvent, type GestureSurfaceKind, type HostCallbacks, HostCallbacksProvider, InteractionGuides, type InteractionGuidesProps, InteractionProvider, InvalidImageResultError, LayerGestureSurface, type LayerGestureSurfaceProps, LayersPanel, type LayoutCell, type LayoutCropOptions, type LayoutImageFit, LayoutPanel, type LayoutPreset, MediaPanel, type PartialTheme, STRAIGHTEN_LIMIT, Slider, type SliderProps, type StickerAsset, StickerPanel, StoryMediaGestureSurface, type StoryMediaGestureSurfaceProps, StraightenRuler, type StraightenRulerProps, TextComposer, TextComposerHost, type TextComposerProps, TextPanel, type TextSessionController, ThemeContext, ToolPanelHost, ToolRail, TopBar, type TopBarProps, UiStateProvider, type UiStateStore, type UseTextSessionOptions, canvasSizeForAspect, cellToTransformPatch, centeredCropForAspect, createAddPhotoController, createDrawController, createGestureController, createUiStateStore, defaultTheme, fitImageToLayoutCell, layoutCellBounds, layoutCells, mergeSlots, mergeTheme, radiansToStraighten, resolveGestureSurface, resolvePanel, straightenToRadians, useBaseImageLayer, useBaseMediaLayer, useHostCallbacks, useInteractionState, useTargetImageLayer, useTextSession, useTheme, useUiState };
+export { type AddPhotoController, type AddPhotoControllerOptions, AddPhotoPanel, AdjustPanel, type BrushConfig, CanvasStage, type CanvasStageProps, CropGestureSurface, type CropGestureSurfaceProps, CropGrid, CropPanel, DEFAULT_BRUSH, type DrawController, DrawPanel, DrawingSurface, Editor, EditorGestures, type EditorGesturesProps, type EditorProps, type EditorSlots, type EditorTheme, FilterStrip, type GestureController, type GestureControllerOptions, type GestureMetrics, type GestureSnapEvent, type GestureSurfaceKind, type HostCallbacks, HostCallbacksProvider, InteractionGuides, type InteractionGuidesProps, InteractionProvider, InvalidImageResultError, LayerGestureSurface, type LayerGestureSurfaceProps, LayersPanel, type LayoutCell, type LayoutCropOptions, type LayoutImageFit, LayoutPanel, type LayoutPreset, MediaPanel, type PartialTheme, STRAIGHTEN_LIMIT, Slider, type SliderProps, type StickerAsset, StickerPanel, StoryMediaGestureSurface, type StoryMediaGestureSurfaceProps, StraightenRuler, type StraightenRulerProps, TextComposer, TextComposerHost, type TextComposerProps, TextPanel, type TextSessionController, ThemeContext, ToolPanelHost, ToolRail, TopBar, type TopBarProps, UiStateProvider, type UiStateStore, type UseTextSessionOptions, canvasSizeForAspect, cellToTransformPatch, centeredCropForAspect, createAddPhotoController, createDrawController, createGestureController, createUiStateStore, defaultTheme, fitImageToLayoutCell, layoutCellBounds, layoutCellBox, layoutCells, mergeSlots, mergeTheme, radiansToStraighten, resolveGestureSurface, resolvePanel, straightenToRadians, useBaseImageLayer, useBaseMediaLayer, useHostCallbacks, useInteractionState, useTargetImageLayer, useTextSession, useTheme, useUiState };

package/dist/index.js

@@ -75,6 +75,7 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   fitImageToLayoutCell: () => fitImageToLayoutCell,
   layoutCellBounds: () => layoutCellBounds,
+  layoutCellBox: () => layoutCellBox,
   layoutCells: () => layoutCells,
   mergeSlots: () => mergeSlots,
   mergeTheme: () => mergeTheme,
@@ -792,10 +793,16 @@ function hitTestLayerCandidatesUI(x, y, candidates, documentWidth, documentHeigh
   return null;
 }
 
+// src/gestures/selectionTap.ts
+function selectedLayerTapId(hit, wasSelectedAtStart) {
+  if (!hit || hit.locked || !wasSelectedAtStart) return null;
+  return hit.id;
+}
+
 // src/gestures/LayerGestureSurface.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function LayerGestureSurface({ onSnap }) {
-  const { document, dispatch, profile } = (0, import_core8.useEditor)();
+function LayerGestureSurface({ onSnap, onSelectedLayerTap }) {
+  const { document, dispatch, profile, selection } = (0, import_core8.useEditor)();
   const store = (0, import_core8.useEditorStore)();
   const metrics = (0, import_skia4.useCanvasMetrics)();
   const { setPreview, setLayerDragActive, setOverDeleteTarget, setSnap } = useInteractionState();
@@ -886,10 +893,11 @@ function LayerGestureSurface({ onSnap }) {
       document.size.height
     );
   }, [document.size.width, document.size.height]);
-  const latest = (0, import_react9.useRef)({ document, metrics, store, dispatch, onSnap, profile });
-  latest.current = { document, metrics, store, dispatch, onSnap, profile };
+  const latest = (0, import_react9.useRef)({ document, metrics, store, dispatch, onSnap, profile, selection, onSelectedLayerTap });
+  latest.current = { document, metrics, store, dispatch, onSnap, profile, selection, onSelectedLayerTap };
   const grabbedId = (0, import_react9.useRef)(null);
   const grabbedFrom = (0, import_react9.useRef)(null);
+  const tapWasSelected = (0, import_react9.useRef)(false);
   const snapState = (0, import_react9.useRef)(import_core8.NO_SNAP);
   const onGrabLayer = (0, import_react9.useCallback)((id) => {
     const { document: doc, store: s } = latest.current;
@@ -902,9 +910,23 @@ function LayerGestureSurface({ onSnap }) {
     setPreview({ layerId: hit.id, transform: previewTransform });
     setLayerDragActive(true);
   }, [setPreview, setLayerDragActive, previewTransform]);
+  const snapshotTapAt = (0, import_react9.useCallback)((xDp, yDp) => {
+    const { document: doc, metrics: m, store: s, selection: selected } = latest.current;
+    if (!m) return;
+    const layerInteraction = latest.current.profile.interaction?.layers;
+    const hit = (0, import_core8.hitTestDocument)(
+      doc,
+      { x: xDp / m.width, y: yDp / m.height },
+      s.registry,
+      (layer, index) => (0, import_core8.isDirectManipulationLayer)(layer, index, layerInteraction)
+    );
+    tapWasSelected.current = Boolean(hit && selected.includes(hit.id));
+  }, []);
   const onSelectAt = (0, import_react9.useCallback)((xDp, yDp) => {
     const { document: doc, metrics: m, store: s } = latest.current;
     if (!m) return;
+    const wasSelected = tapWasSelected.current;
+    tapWasSelected.current = false;
     const layerInteraction = latest.current.profile.interaction?.layers;
     const hit = (0, import_core8.hitTestDocument)(
       doc,
@@ -913,6 +935,8 @@ function LayerGestureSurface({ onSnap }) {
       (layer, index) => (0, import_core8.isDirectManipulationLayer)(layer, index, layerInteraction)
     );
     s.select(hit && !hit.locked ? [hit.id] : []);
+    const editId = selectedLayerTapId(hit ?? null, wasSelected);
+    if (editId) latest.current.onSelectedLayerTap?.(editId);
   }, []);
   const onSnapChanged = (0, import_react9.useCallback)(
     (centerX, centerY, rotation) => {
@@ -1051,6 +1075,8 @@ function LayerGestureSurface({ onSnap }) {
     const pan = import_react_native_gesture_handler4.Gesture.Pan().minPointers(1).maxPointers(2).onTouchesDown((e) => {
       "worklet";
       livePointers.value = e.allTouches.length;
+      const touch = e.changedTouches[0] ?? e.allTouches[0];
+      if (touch) (0, import_react_native_worklets4.runOnJS)(snapshotTapAt)(touch.x, touch.y);
     }).onTouchesUp((e) => {
       "worklet";
       livePointers.value = Math.max(0, e.allTouches.length - e.changedTouches.length);
@@ -1141,6 +1167,7 @@ function LayerGestureSurface({ onSnap }) {
     deleteTarget,
     aspect,
     onGrabLayer,
+    snapshotTapAt,
     onSelectAt,
     onSnapChanged,
     onHoverChanged,
@@ -1818,8 +1845,9 @@ function Slider({
   const valueRef = (0, import_react12.useRef)(value);
   valueRef.current = value;
   const onLayout = (e) => {
-    setWidth(e.nativeEvent.layout.width);
-    widthRef.current = e.nativeEvent.layout.width;
+    const next = e.nativeEvent.layout.width;
+    widthRef.current = next;
+    setWidth((previous) => previous === next ? previous : next);
   };
   const handlers = (0, import_react12.useMemo)(() => {
     const begin = () => {
@@ -2924,6 +2952,13 @@ function fitImageToLayoutCell(cell, documentSize, intrinsic, options = {}) {
 function cellToTransformPatch(cell) {
   return { x: cell.x, y: cell.y, scale: cell.scale, rotation: 0 };
 }
+function layoutCellBox(cell, documentSize) {
+  "worklet";
+  return {
+    width: cell.width * documentSize.width,
+    height: cell.height * documentSize.height
+  };
+}
 
 // src/panels/LayoutPanel.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
@@ -3554,7 +3589,8 @@ function fitCanvasRect(container, document) {
   };
 }
 function composerInputBox(request) {
-  const canvas = fitCanvasRect(request.container, request.document);
+  const provided = request.canvas;
+  const canvas = provided && provided.width > 0 && provided.height > 0 ? provided : fitCanvasRect(request.container, request.document);
   const fontSize = Math.max(1, request.fontSize * canvas.width);
   const lineHeight = Math.max(1, fontSize * request.lineHeight);
   const scale = request.document.width > 0 ? canvas.width / request.document.width : 0;
@@ -3578,6 +3614,35 @@ function composerInputBox(request) {
     lineHeight
   };
 }
+function sameCaretLine(previous, next) {
+  return previous === next || previous !== null && next !== null && previous.x === next.x && previous.y === next.y && previous.width === next.width && previous.height === next.height;
+}
+var CARET_WIDTH = 2;
+function composerInputOpacity(platform) {
+  return platform === "android" ? 0 : 1;
+}
+function composerCaretBox(box, line) {
+  if (!line || !Number.isFinite(line.x) || !Number.isFinite(line.y) || !Number.isFinite(line.width) || !Number.isFinite(line.height)) {
+    return null;
+  }
+  const height = Math.max(1, line.height || box.lineHeight);
+  return {
+    left: box.left + line.x + line.width - CARET_WIDTH / 2,
+    top: box.top + line.y,
+    width: CARET_WIDTH,
+    height
+  };
+}
+
+// src/composer/tapGesture.ts
+var TAP_SLOP = 8;
+function pressMoved(start, end, slop = TAP_SLOP) {
+  if (!start || !end) return false;
+  if (!Number.isFinite(start.x) || !Number.isFinite(start.y) || !Number.isFinite(end.x) || !Number.isFinite(end.y)) {
+    return false;
+  }
+  return Math.hypot(end.x - start.x, end.y - start.y) > Math.max(0, slop);
+}
 
 // src/composer/useTextSession.ts
 var import_core26 = require("@pictor-sdk/core");
@@ -3709,7 +3774,7 @@ var SHADOWS = [
   { 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 }) {
+function TextComposer({ session, insets, onDone, onCancel, canvas }) {
   const theme = useTheme();
   const store = (0, import_core27.useEditorStore)();
   const { document } = (0, import_core27.useEditor)();
@@ -3719,6 +3784,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   const [selectionRange, setSelectionRange] = (0, import_react21.useState)(
     void 0
   );
+  const [focused, setFocused] = (0, import_react21.useState)(false);
+  const [caretLine, setCaretLine] = (0, import_react21.useState)(null);
   const data = session.data;
   const span = session.span;
   const layerId = session.layer?.id;
@@ -3728,7 +3795,12 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       setMeasured(null);
       return;
     }
-    const refresh = () => setMeasured(renderer.textMeasures.get(layerId) ?? null);
+    const refresh = () => {
+      const next = renderer.textMeasures.get(layerId) ?? null;
+      setMeasured(
+        (previous) => previous && next && previous.width === next.width && previous.height === next.height ? previous : next
+      );
+    };
     const unsubscribe = renderer.textMeasures.subscribe(refresh);
     refresh();
     return unsubscribe;
@@ -3741,7 +3813,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       lineHeight: span?.lineHeight ?? 1.2,
       centerY: session.layer?.transform.y ?? 0.42,
       measured,
-      lines: session.value.split("\n").length
+      lines: session.value.split("\n").length,
+      ...canvas ? { canvas } : {}
     }),
     [
       container,
@@ -3750,20 +3823,41 @@ function TextComposer({ session, insets, onDone, onCancel }) {
       span?.lineHeight,
       session.layer?.transform.y,
       session.value,
-      measured
+      measured,
+      canvas
     ]
   );
   const fonts = (0, import_react21.useMemo)(() => (0, import_core27.fontChoices)(store.registry.fonts), [store.registry.fonts]);
   (0, import_react21.useEffect)(() => {
-    const handle = setTimeout(() => input.current?.focus(), 50);
+    const handle = setTimeout(() => {
+      input.current?.focus();
+      if (session.kind === "existing" && session.value.length > 0) {
+        const end = session.value.length;
+        setSelectionRange({ start: end, end });
+        input.current?.setNativeProps({ selection: { start: end, end } });
+      }
+    }, 50);
     return () => clearTimeout(handle);
   }, []);
   const onSelectionChange = (0, import_react21.useCallback)(
     (event) => {
-      setSelectionRange(event.nativeEvent.selection);
+      const next = event.nativeEvent.selection;
+      setSelectionRange(
+        (previous) => previous && previous.start === next.start && previous.end === next.end ? previous : next
+      );
     },
     []
   );
+  const caretAt = selectionRange?.end ?? session.value.length;
+  const caretSource = session.value.slice(0, Math.max(0, caretAt));
+  const onCaretLayout = (0, import_react21.useCallback)((event) => {
+    const lines = event.nativeEvent.lines;
+    const last = lines[lines.length - 1];
+    const next = last ? { x: last.x, y: last.y, width: last.width, height: last.height } : null;
+    setCaretLine((previous) => sameCaretLine(previous, next) ? previous : next);
+  }, []);
+  const caret = composerCaretBox(layout, caretLine);
+  const letterSpacing = span?.letterSpacing && span.fontSize > 0 ? span.letterSpacing * layout.fontSize / span.fontSize : void 0;
   const keepFocus = (0, import_react21.useCallback)(
     (apply) => {
       apply();
@@ -3824,6 +3918,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
     });
     return () => subscription.remove();
   }, [onCancel, insets.keyboardVisible]);
+  const tapStart = (0, import_react21.useRef)(null);
   const controlRow = {
     flexDirection: "row",
     alignItems: "center",
@@ -3848,6 +3943,54 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, backgroundColor: "#00000055" }
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react_native24.Pressable,
+          {
+            accessible: true,
+            collapsable: false,
+            accessibilityRole: "button",
+            accessibilityLabel: "Finish editing text",
+            onAccessibilityTap: onDone,
+            onPressIn: (event) => {
+              tapStart.current = {
+                x: event.nativeEvent.pageX,
+                y: event.nativeEvent.pageY
+              };
+            },
+            onPress: (event) => {
+              const start = tapStart.current;
+              const end = { x: event.nativeEvent.pageX, y: event.nativeEvent.pageY };
+              if (!pressMoved(start, end)) onDone();
+            },
+            style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react_native24.Text,
+          {
+            accessible: false,
+            importantForAccessibility: "no-hide-descendants",
+            pointerEvents: "none",
+            onTextLayout: onCaretLayout,
+            style: {
+              position: "absolute",
+              left: layout.left,
+              width: layout.width,
+              top: layout.top,
+              height: layout.height,
+              opacity: 0,
+              fontSize: layout.fontSize,
+              lineHeight: layout.lineHeight,
+              fontFamily: span?.fontFamily,
+              fontWeight: span?.fontWeight ? `${span.fontWeight}` : void 0,
+              letterSpacing,
+              textAlign: data?.align ?? "center",
+              padding: 0
+            },
+            children: `${caretSource}\u200B`
+          },
+          `${caretSource}:${caretAt}`
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_react_native24.TextInput,
           {
@@ -3855,6 +3998,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             value: session.value,
             onChangeText: session.setValue,
             onSelectionChange,
+            onFocus: () => setFocused(true),
+            onBlur: () => setFocused(false),
             multiline: true,
             submitBehavior: "newline",
             autoCorrect: false,
@@ -3874,6 +4019,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
               // rgba rather than the 'transparent' keyword because the keyword is
               // not reliably honoured for TextInput colour on Android.
               color: "rgba(0,0,0,0)",
+              opacity: composerInputOpacity(import_react_native24.Platform.OS),
               fontSize: layout.fontSize,
               lineHeight: layout.lineHeight,
               textAlign: data?.align ?? "center",
@@ -3884,6 +4030,22 @@ function TextComposer({ session, insets, onDone, onCancel }) {
             cursorColor: theme.colors.accent
           }
         ),
+        focused && caret ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react_native24.View,
+          {
+            pointerEvents: "none",
+            accessible: false,
+            style: {
+              position: "absolute",
+              left: caret.left,
+              top: caret.top,
+              width: caret.width,
+              height: caret.height,
+              borderRadius: caret.width / 2,
+              backgroundColor: theme.colors.accent
+            }
+          }
+        ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           import_react_native24.View,
           {
@@ -4083,7 +4245,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
 }
 function TextComposerHost({
   Composer = TextComposer,
-  safeArea
+  safeArea,
+  canvas
 }) {
   const { setActiveTool } = (0, import_core27.useEditor)();
   const session = useTextSession();
@@ -4131,7 +4294,8 @@ function TextComposerHost({
       session,
       insets,
       onDone: () => finish(true),
-      onCancel: () => finish(false)
+      onCancel: () => finish(false),
+      ...canvas ? { canvas } : {}
     }
   );
 }
@@ -4720,6 +4884,7 @@ function TextPanel() {
   defaultTheme,
   fitImageToLayoutCell,
   layoutCellBounds,
+  layoutCellBox,
   layoutCells,
   mergeSlots,
   mergeTheme,