@pictor-sdk/ui 0.2.0 → 0.2.2

package/README.md

@@ -8,7 +8,7 @@ photo and video editor SDK for React Native. Public APIs are pre-1.0 and experim
 ## Install
 
 ```sh
-pnpm add @pictor-sdk/ui@0.2.0
+pnpm add @pictor-sdk/ui@0.2.1
 ```
 
 Install the package's declared peer dependencies in your app. Keep React, React Native,

package/dist/index.d.mts

@@ -71,6 +71,15 @@ declare const ThemeContext: React.Context<EditorTheme>;
 declare function useTheme(): EditorTheme;
 
 interface ComposerInsets {
+    /**
+     * Distance from the top of the screen to place the Cancel/Done bar.
+     *
+     * The composer cannot work this out for itself: reading the safe area needs
+     * `react-native-safe-area-context`, and this package takes no dependency the
+     * host has not already chosen. So the host supplies it, and a host that does
+     * not gets 0 — which is what every release before this one drew.
+     */
+    top: number;
     /** Distance from the bottom of the screen to place the control bar. */
     bottom: number;
     /** True while the keyboard occupies screen space. */
@@ -180,9 +189,20 @@ declare function TextComposer({ session, insets, onDone, onCancel }: TextCompose
  *
  * @experimental
  */
-declare function TextComposerHost({ Composer, }: {
+declare function TextComposerHost({ Composer, safeArea, }: {
     /** Replace the default composer without replacing the canvas or editor. */
     Composer?: React__default.ComponentType<TextComposerProps>;
+    /**
+     * The app's safe-area insets, in dp.
+     *
+     * Supplied by the host because reading them needs a dependency this package
+     * does not take. Omit it and the composer draws exactly where it always did:
+     * its bar at the very top, which on a device with a notch means under one.
+     */
+    safeArea?: {
+        top?: number;
+        bottom?: number;
+    };
 }): React__default.JSX.Element;
 
 /** What the top bar slot receives: the transaction actions and undo state. */

package/dist/index.d.ts

@@ -71,6 +71,15 @@ declare const ThemeContext: React.Context<EditorTheme>;
 declare function useTheme(): EditorTheme;
 
 interface ComposerInsets {
+    /**
+     * Distance from the top of the screen to place the Cancel/Done bar.
+     *
+     * The composer cannot work this out for itself: reading the safe area needs
+     * `react-native-safe-area-context`, and this package takes no dependency the
+     * host has not already chosen. So the host supplies it, and a host that does
+     * not gets 0 — which is what every release before this one drew.
+     */
+    top: number;
     /** Distance from the bottom of the screen to place the control bar. */
     bottom: number;
     /** True while the keyboard occupies screen space. */
@@ -180,9 +189,20 @@ declare function TextComposer({ session, insets, onDone, onCancel }: TextCompose
  *
  * @experimental
  */
-declare function TextComposerHost({ Composer, }: {
+declare function TextComposerHost({ Composer, safeArea, }: {
     /** Replace the default composer without replacing the canvas or editor. */
     Composer?: React__default.ComponentType<TextComposerProps>;
+    /**
+     * The app's safe-area insets, in dp.
+     *
+     * Supplied by the host because reading them needs a dependency this package
+     * does not take. Omit it and the composer draws exactly where it always did:
+     * its bar at the very top, which on a device with a notch means under one.
+     */
+    safeArea?: {
+        top?: number;
+        bottom?: number;
+    };
 }): React__default.JSX.Element;
 
 /** What the top bar slot receives: the transaction actions and undo state. */

package/dist/index.js

@@ -95,7 +95,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
 var import_core30 = require("@pictor-sdk/core");
-var import_skia10 = require("@pictor-sdk/skia");
+var import_skia11 = require("@pictor-sdk/skia");
 var import_react22 = __toESM(require("react"));
 var import_react_native27 = require("react-native");
 var import_react_native_gesture_handler8 = require("react-native-gesture-handler");
@@ -810,10 +810,12 @@ function LayerGestureSurface({ onSnap }) {
   );
   const aspect = document.size.height / document.size.width;
   const [measureVersion, setMeasureVersion] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(
-    () => renderer.textMeasures.subscribe(() => setMeasureVersion((v) => v + 1)),
-    [renderer]
-  );
+  (0, import_react9.useEffect)(() => {
+    const refresh = () => setMeasureVersion((v) => v + 1);
+    const unsubscribe = renderer.textMeasures.subscribe(refresh);
+    refresh();
+    return unsubscribe;
+  }, [renderer]);
   const hitCandidates = (0, import_react9.useMemo)(
     () => document.layers.map((layer, index) => ({ layer, index })).filter(
       ({ layer, index }) => !layer.hidden && !layer.locked && (0, import_core8.isDirectManipulationLayer)(layer, index, profile.interaction?.layers)
@@ -866,6 +868,7 @@ function LayerGestureSurface({ onSnap }) {
   const focalY = (0, import_react_native_reanimated4.useSharedValue)(0.5);
   const pointers = (0, import_react_native_reanimated4.useSharedValue)(0);
   const active = (0, import_react_native_reanimated4.useSharedValue)(false);
+  const livePointers = (0, import_react_native_reanimated4.useSharedValue)(0);
   const snapCX = (0, import_react_native_reanimated4.useSharedValue)(false);
   const snapCY = (0, import_react_native_reanimated4.useSharedValue)(false);
   const snapR = (0, import_react_native_reanimated4.useSharedValue)(false);
@@ -1040,7 +1043,23 @@ function LayerGestureSurface({ onSnap }) {
         deleted
       );
     };
-    const pan = import_react_native_gesture_handler4.Gesture.Pan().minPointers(1).maxPointers(2).onBegin((e) => {
+    const releaseIfEmpty = () => {
+      "worklet";
+      if (livePointers.value > 0) return;
+      endIfIdle();
+    };
+    const pan = import_react_native_gesture_handler4.Gesture.Pan().minPointers(1).maxPointers(2).onTouchesDown((e) => {
+      "worklet";
+      livePointers.value = e.allTouches.length;
+    }).onTouchesUp((e) => {
+      "worklet";
+      livePointers.value = Math.max(0, e.allTouches.length - e.changedTouches.length);
+      releaseIfEmpty();
+    }).onTouchesCancelled(() => {
+      "worklet";
+      livePointers.value = 0;
+      releaseIfEmpty();
+    }).onBegin((e) => {
       "worklet";
       if (active.value) return;
       rawPanX.value = 0;
@@ -1087,7 +1106,7 @@ function LayerGestureSurface({ onSnap }) {
       recompute(false);
     }).onFinalize(() => {
       "worklet";
-      endIfIdle();
+      releaseIfEmpty();
     });
     const pinch = import_react_native_gesture_handler4.Gesture.Pinch().onUpdate((e) => {
       "worklet";
@@ -1096,6 +1115,9 @@ function LayerGestureSurface({ onSnap }) {
       focalY.value = e.focalY / metricsHeight;
       syncPointers(e.numberOfPointers);
       recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      releaseIfEmpty();
     });
     const rotate = import_react_native_gesture_handler4.Gesture.Rotation().enabled(config.rotationEnabled).onUpdate((e) => {
       "worklet";
@@ -1104,6 +1126,9 @@ function LayerGestureSurface({ onSnap }) {
       focalY.value = e.anchorY / metricsHeight;
       syncPointers(e.numberOfPointers);
       recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      releaseIfEmpty();
     });
     const tap = import_react_native_gesture_handler4.Gesture.Tap().onEnd((e) => {
       "worklet";
@@ -3494,17 +3519,21 @@ function ToolPanelHost() {
 var import_core27 = require("@pictor-sdk/core");
 var import_react21 = require("react");
 var import_react_native24 = require("react-native");
+var import_skia10 = require("@pictor-sdk/skia");
 
 // src/composer/keyboardLayout.ts
 var HIDDEN_KEYBOARD = { height: 0 };
 var MAX_DURATION = 400;
 var FALLBACK_DURATION = 180;
-function composerInsets(frame, safeAreaBottom = 0) {
+function composerInsets(frame, safeAreaBottom = 0, safeAreaTop = 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 {
+    // The keyboard never covers the top, so this one is the safe area and
+    // nothing else.
+    top: Number.isFinite(safeAreaTop) ? Math.max(0, safeAreaTop) : 0,
     bottom: visible ? height : Math.max(0, safeAreaBottom),
     keyboardVisible: visible,
     duration
@@ -3524,6 +3553,31 @@ function fitCanvasRect(container, document) {
     top: (container.height - height) / 2
   };
 }
+function composerInputBox(request) {
+  const canvas = 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;
+  const measuredHeight = request.measured && request.measured.height > 0 ? request.measured.height * scale : 0;
+  const estimated = lineHeight * Math.max(1, request.lines);
+  const height = Math.min(
+    Math.max(lineHeight, measuredHeight > 0 ? measuredHeight : estimated),
+    Math.max(lineHeight, canvas.height)
+  );
+  const centre = canvas.top + request.centerY * canvas.height;
+  const top = Math.min(
+    Math.max(0, centre - height / 2),
+    Math.max(0, request.container.height - height)
+  );
+  return {
+    left: canvas.left,
+    width: Math.max(1, canvas.width),
+    top,
+    height: Math.max(1, height),
+    fontSize,
+    lineHeight
+  };
+}
 
 // src/composer/useTextSession.ts
 var import_core26 = require("@pictor-sdk/core");
@@ -3660,26 +3714,45 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   const store = (0, import_core27.useEditorStore)();
   const { document } = (0, import_core27.useEditor)();
   const [container, setContainer] = (0, import_react21.useState)({ width: 0, height: 0 });
+  const renderer = (0, import_skia10.useRenderer)();
   const input = (0, import_react21.useRef)(null);
   const [selectionRange, setSelectionRange] = (0, import_react21.useState)(
     void 0
   );
   const data = session.data;
   const span = session.span;
-  const layout = (0, import_react21.useMemo)(() => {
-    const canvas = fitCanvasRect(container, document.size);
-    const fontSize = (span?.fontSize ?? 0.08) * canvas.width;
-    const centreY = canvas.top + (session.layer?.transform.y ?? 0.42) * canvas.height;
-    const height = canvas.height;
-    return {
-      fontSize: Math.max(1, fontSize),
-      lineHeight: Math.max(1, fontSize * (span?.lineHeight ?? 1.2)),
-      left: canvas.left,
-      width: Math.max(1, canvas.width),
-      top: Math.max(0, centreY - height / 2),
-      height: Math.max(1, height)
-    };
-  }, [container, document.size, span?.fontSize, span?.lineHeight, session.layer?.transform.y]);
+  const layerId = session.layer?.id;
+  const [measured, setMeasured] = (0, import_react21.useState)(null);
+  (0, import_react21.useEffect)(() => {
+    if (!layerId) {
+      setMeasured(null);
+      return;
+    }
+    const refresh = () => setMeasured(renderer.textMeasures.get(layerId) ?? null);
+    const unsubscribe = renderer.textMeasures.subscribe(refresh);
+    refresh();
+    return unsubscribe;
+  }, [renderer, layerId]);
+  const layout = (0, import_react21.useMemo)(
+    () => composerInputBox({
+      container,
+      document: document.size,
+      fontSize: span?.fontSize ?? 0.08,
+      lineHeight: span?.lineHeight ?? 1.2,
+      centerY: session.layer?.transform.y ?? 0.42,
+      measured,
+      lines: session.value.split("\n").length
+    }),
+    [
+      container,
+      document.size,
+      span?.fontSize,
+      span?.lineHeight,
+      session.layer?.transform.y,
+      session.value,
+      measured
+    ]
+  );
   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);
@@ -3818,7 +3891,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
               position: "absolute",
               left: 0,
               right: 0,
-              top: 0,
+              top: insets.top,
               height: 56,
               flexDirection: "row",
               alignItems: "center",
@@ -4009,7 +4082,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   );
 }
 function TextComposerHost({
-  Composer = TextComposer
+  Composer = TextComposer,
+  safeArea
 }) {
   const { setActiveTool } = (0, import_core27.useEditor)();
   const session = useTextSession();
@@ -4038,7 +4112,10 @@ function TextComposerHost({
       hide.remove();
     };
   }, []);
-  const insets = (0, import_react21.useMemo)(() => composerInsets(frame), [frame]);
+  const insets = (0, import_react21.useMemo)(
+    () => composerInsets(frame, safeArea?.bottom ?? 0, safeArea?.top ?? 0),
+    [frame, safeArea?.bottom, safeArea?.top]
+  );
   const finish = (0, import_react21.useCallback)(
     (commit) => {
       if (commit) session.commit();
@@ -4163,7 +4240,7 @@ function CanvasStage({ children, onError }) {
   const { previews } = useInteractionState();
   const surface = resolveGestureSurface(activeTool);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_skia10.EditorCanvas,
+    import_skia11.EditorCanvas,
     {
       style: { flex: 1 },
       onError,
@@ -4283,7 +4360,7 @@ function Editor({
 
 // src/gestures/EditorGestures.tsx
 var import_core32 = require("@pictor-sdk/core");
-var import_skia11 = require("@pictor-sdk/skia");
+var import_skia12 = require("@pictor-sdk/skia");
 var import_react23 = require("react");
 var import_react_native28 = require("react-native");
 var import_react_native_gesture_handler9 = require("react-native-gesture-handler");
@@ -4391,7 +4468,7 @@ function createGestureController(store, getMetrics, options = {}) {
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function EditorGestures({ onSnap }) {
   const store = (0, import_core32.useEditorStore)();
-  const metrics = (0, import_skia11.useCanvasMetrics)();
+  const metrics = (0, import_skia12.useCanvasMetrics)();
   const metricsRef = (0, import_react23.useRef)(metrics);
   metricsRef.current = metrics;
   const onSnapRef = (0, import_react23.useRef)(onSnap);