@pictor-sdk/ui 0.2.1 → 0.3.0

package/dist/index.mjs

@@ -803,6 +803,7 @@ function LayerGestureSurface({ onSnap }) {
   const focalY = useSharedValue3(0.5);
   const pointers = useSharedValue3(0);
   const active = useSharedValue3(false);
+  const livePointers = useSharedValue3(0);
   const snapCX = useSharedValue3(false);
   const snapCY = useSharedValue3(false);
   const snapR = useSharedValue3(false);
@@ -977,7 +978,23 @@ function LayerGestureSurface({ onSnap }) {
         deleted
       );
     };
-    const pan = Gesture4.Pan().minPointers(1).maxPointers(2).onBegin((e) => {
+    const releaseIfEmpty = () => {
+      "worklet";
+      if (livePointers.value > 0) return;
+      endIfIdle();
+    };
+    const pan = Gesture4.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;
@@ -1024,7 +1041,7 @@ function LayerGestureSurface({ onSnap }) {
       recompute(false);
     }).onFinalize(() => {
       "worklet";
-      endIfIdle();
+      releaseIfEmpty();
     });
     const pinch = Gesture4.Pinch().onUpdate((e) => {
       "worklet";
@@ -1033,6 +1050,9 @@ function LayerGestureSurface({ onSnap }) {
       focalY.value = e.focalY / metricsHeight;
       syncPointers(e.numberOfPointers);
       recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      releaseIfEmpty();
     });
     const rotate = Gesture4.Rotation().enabled(config.rotationEnabled).onUpdate((e) => {
       "worklet";
@@ -1041,6 +1061,9 @@ function LayerGestureSurface({ onSnap }) {
       focalY.value = e.anchorY / metricsHeight;
       syncPointers(e.numberOfPointers);
       recompute(false);
+    }).onFinalize(() => {
+      "worklet";
+      releaseIfEmpty();
     });
     const tap = Gesture4.Tap().onEnd((e) => {
       "worklet";
@@ -2865,6 +2888,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
 import { jsx as jsx19 } from "react/jsx-runtime";
@@ -3499,17 +3529,21 @@ import {
   TextInput,
   View as View18
 } from "react-native";
+import { useRenderer as useRenderer4 } from "@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
@@ -3529,6 +3563,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
 import {
@@ -3676,26 +3735,45 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   const store = useEditorStore5();
   const { document } = useEditor22();
   const [container, setContainer] = useState10({ width: 0, height: 0 });
+  const renderer = useRenderer4();
   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 layerId = session.layer?.id;
+  const [measured, setMeasured] = useState10(null);
+  useEffect8(() => {
+    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 = useMemo11(
+    () => 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 = useMemo11(() => fontChoices(store.registry.fonts), [store.registry.fonts]);
   useEffect8(() => {
     const handle = setTimeout(() => input.current?.focus(), 50);
@@ -3834,7 +3912,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
               position: "absolute",
               left: 0,
               right: 0,
-              top: 0,
+              top: insets.top,
               height: 56,
               flexDirection: "row",
               alignItems: "center",
@@ -4025,7 +4103,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   );
 }
 function TextComposerHost({
-  Composer = TextComposer
+  Composer = TextComposer,
+  safeArea
 }) {
   const { setActiveTool } = useEditor22();
   const session = useTextSession();
@@ -4054,7 +4133,10 @@ function TextComposerHost({
       hide.remove();
     };
   }, []);
-  const insets = useMemo11(() => composerInsets(frame), [frame]);
+  const insets = useMemo11(
+    () => composerInsets(frame, safeArea?.bottom ?? 0, safeArea?.top ?? 0),
+    [frame, safeArea?.bottom, safeArea?.top]
+  );
   const finish = useCallback6(
     (commit) => {
       if (commit) session.commit();
@@ -4666,6 +4748,7 @@ export {
   defaultTheme,
   fitImageToLayoutCell,
   layoutCellBounds,
+  layoutCellBox,
   layoutCells,
   mergeSlots,
   mergeTheme,