@pictor-sdk/ui 0.3.0 → 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 {

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 {

package/dist/index.js

@@ -793,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();
@@ -887,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;
@@ -903,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,
@@ -914,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) => {
@@ -1052,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);
@@ -1142,6 +1167,7 @@ function LayerGestureSurface({ onSnap }) {
     deleteTarget,
     aspect,
     onGrabLayer,
+    snapshotTapAt,
     onSelectAt,
     onSnapChanged,
     onHoverChanged,
@@ -1819,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 = () => {
@@ -3562,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;
@@ -3586,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");
@@ -3717,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)();
@@ -3727,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;
@@ -3736,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;
@@ -3749,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,
@@ -3758,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();
@@ -3832,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",
@@ -3856,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,
           {
@@ -3863,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,
@@ -3882,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",
@@ -3892,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,
           {
@@ -4091,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();
@@ -4139,7 +4294,8 @@ function TextComposerHost({
       session,
       insets,
       onDone: () => finish(true),
-      onCancel: () => finish(false)
+      onCancel: () => finish(false),
+      ...canvas ? { canvas } : {}
     }
   );
 }