@pictor-sdk/ui 0.2.1 → 0.3.0

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. */
@@ -807,6 +827,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 {
@@ -862,4 +898,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

@@ -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. */
@@ -807,6 +827,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 {
@@ -862,4 +898,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,
@@ -95,7 +96,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");
@@ -868,6 +869,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);
@@ -1042,7 +1044,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;
@@ -1089,7 +1107,7 @@ function LayerGestureSurface({ onSnap }) {
       recompute(false);
     }).onFinalize(() => {
       "worklet";
-      endIfIdle();
+      releaseIfEmpty();
     });
     const pinch = import_react_native_gesture_handler4.Gesture.Pinch().onUpdate((e) => {
       "worklet";
@@ -1098,6 +1116,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";
@@ -1106,6 +1127,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";
@@ -2901,6 +2925,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");
@@ -3496,17 +3527,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
@@ -3526,6 +3561,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");
@@ -3662,26 +3722,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);
@@ -3820,7 +3899,7 @@ function TextComposer({ session, insets, onDone, onCancel }) {
               position: "absolute",
               left: 0,
               right: 0,
-              top: 0,
+              top: insets.top,
               height: 56,
               flexDirection: "row",
               alignItems: "center",
@@ -4011,7 +4090,8 @@ function TextComposer({ session, insets, onDone, onCancel }) {
   );
 }
 function TextComposerHost({
-  Composer = TextComposer
+  Composer = TextComposer,
+  safeArea
 }) {
   const { setActiveTool } = (0, import_core27.useEditor)();
   const session = useTextSession();
@@ -4040,7 +4120,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();
@@ -4165,7 +4248,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,
@@ -4285,7 +4368,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");
@@ -4393,7 +4476,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);
@@ -4645,6 +4728,7 @@ function TextPanel() {
   defaultTheme,
   fitImageToLayoutCell,
   layoutCellBounds,
+  layoutCellBox,
   layoutCells,
   mergeSlots,
   mergeTheme,