react-native-image-editor-skia 0.1.0

package/src/annotations/TextAnnotation.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { Text, matchFont } from '@shopify/react-native-skia';
+
+import type { TextAnnotation as TextAnnotationType } from '../types';
+import { annotationCenter } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+
+/**
+ * Renders text using a system font via `matchFont` (no bundled font file
+ * required). Honors explicit newlines; automatic width-wrapping is intentionally
+ * out of scope for v1 (would require SkParagraph + a shared FontMgr).
+ */
+export function TextAnnotationView({ a }: { a: TextAnnotationType }) {
+  const font = useMemo(
+    () =>
+      matchFont({
+        fontFamily: 'sans-serif',
+        fontSize: a.fontSize,
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+      }),
+    [a.fontSize]
+  );
+
+  const lines = a.text.split('\n');
+  const lineHeight = a.fontSize * 1.2;
+
+  return (
+    <RotatedGroup center={annotationCenter(a)} rotation={a.rotation}>
+      {lines.map((line, i) => (
+        <Text
+          key={i}
+          x={a.origin.x}
+          y={a.origin.y + a.fontSize + i * lineHeight}
+          text={line}
+          font={font}
+          color={a.color}
+        />
+      ))}
+    </RotatedGroup>
+  );
+}

package/src/annotations/geometry.ts

@@ -0,0 +1,62 @@
+import { Skia } from '@shopify/react-native-skia';
+import type { SkPath } from '@shopify/react-native-skia';
+
+import type { Vec2 } from '../types';
+
+// Re-export the pure helpers so existing imports from './geometry' keep working.
+// (Worklet/test-safe versions with no Skia dependency live in ./geometryPure.)
+export { annotationCenter, annotationBounds } from './geometryPure';
+
+/**
+ * Build a Skia path for an arrow (shaft + two arrowhead barbs).
+ * Not a worklet — it allocates an `SkPath` (a Skia object) on the JS thread.
+ */
+export function buildArrowPath(
+  start: Vec2,
+  end: Vec2,
+  headSize: number
+): SkPath {
+  const path = Skia.Path.Make();
+  path.moveTo(start.x, start.y);
+  path.lineTo(end.x, end.y);
+
+  const angle = Math.atan2(end.y - start.y, end.x - start.x);
+  const barb = (Math.PI * 5) / 6; // 150° from the shaft direction
+  const b1 = {
+    x: end.x + headSize * Math.cos(angle + barb),
+    y: end.y + headSize * Math.sin(angle + barb),
+  };
+  const b2 = {
+    x: end.x + headSize * Math.cos(angle - barb),
+    y: end.y + headSize * Math.sin(angle - barb),
+  };
+  path.moveTo(end.x, end.y);
+  path.lineTo(b1.x, b1.y);
+  path.moveTo(end.x, end.y);
+  path.lineTo(b2.x, b2.y);
+  return path;
+}
+
+/** Build a smoothed (quadratic) path through freehand points. */
+export function buildFreehandPath(points: Vec2[]): SkPath {
+  const path = Skia.Path.Make();
+  if (points.length === 0) {
+    return path;
+  }
+  path.moveTo(points[0]!.x, points[0]!.y);
+  if (points.length === 1) {
+    // Draw a dot.
+    path.lineTo(points[0]!.x + 0.01, points[0]!.y + 0.01);
+    return path;
+  }
+  for (let i = 1; i < points.length - 1; i++) {
+    const p = points[i]!;
+    const next = points[i + 1]!;
+    const midX = (p.x + next.x) / 2;
+    const midY = (p.y + next.y) / 2;
+    path.quadTo(p.x, p.y, midX, midY);
+  }
+  const last = points[points.length - 1]!;
+  path.lineTo(last.x, last.y);
+  return path;
+}

package/src/annotations/geometryPure.ts

@@ -0,0 +1,73 @@
+/**
+ * Pure annotation geometry (no Skia imports) so it is safe to use from worklets
+ * AND from plain unit tests without loading the native Skia module.
+ */
+import type { Annotation, Rect, Vec2 } from '../types';
+import { boundsOfPoints } from '../utils/math';
+
+/** Center of an annotation in image space (used as rotation/scale origin). */
+export function annotationCenter(a: Annotation): Vec2 {
+  'worklet';
+  switch (a.type) {
+    case 'circle':
+      return { x: a.center.x, y: a.center.y };
+    case 'arrow':
+      return { x: (a.start.x + a.end.x) / 2, y: (a.start.y + a.end.y) / 2 };
+    case 'marker':
+      return { x: a.rect.x + a.rect.width / 2, y: a.rect.y + a.rect.height / 2 };
+    case 'freehand': {
+      const b = boundsOfPoints(a.points);
+      return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+    }
+    case 'text':
+      return {
+        x: a.origin.x + a.width / 2,
+        y: a.origin.y + (a.fontSize * 1.2) / 2,
+      };
+  }
+}
+
+/**
+ * Axis-aligned bounding box of an annotation in its LOCAL (unrotated) frame.
+ * The selection overlay rotates this box by `annotation.rotation` about the
+ * center when drawing handles.
+ */
+export function annotationBounds(a: Annotation): Rect {
+  'worklet';
+  switch (a.type) {
+    case 'circle':
+      return {
+        x: a.center.x - a.radius,
+        y: a.center.y - a.radius,
+        width: a.radius * 2,
+        height: a.radius * 2,
+      };
+    case 'arrow': {
+      const pad = a.headSize + a.strokeWidth;
+      const minX = Math.min(a.start.x, a.end.x) - pad;
+      const minY = Math.min(a.start.y, a.end.y) - pad;
+      const maxX = Math.max(a.start.x, a.end.x) + pad;
+      const maxY = Math.max(a.start.y, a.end.y) + pad;
+      return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    }
+    case 'marker':
+      return { ...a.rect };
+    case 'freehand': {
+      const b = boundsOfPoints(a.points);
+      const pad = a.strokeWidth / 2;
+      return {
+        x: b.x - pad,
+        y: b.y - pad,
+        width: b.width + pad * 2,
+        height: b.height + pad * 2,
+      };
+    }
+    case 'text':
+      return {
+        x: a.origin.x,
+        y: a.origin.y,
+        width: a.width,
+        height: a.fontSize * 1.2,
+      };
+  }
+}

package/src/canvas/AnnotationLayer.tsx

@@ -0,0 +1,43 @@
+import { Group } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+
+import type { EditorContextValue } from '../context/EditorContext';
+import { sortedByZ } from '../state/selectors';
+import { AnnotationView } from '../annotations/AnnotationView';
+
+/**
+ * Renders all committed annotations in paint order. The selected annotation is
+ * wrapped in a Group whose transform is driven by the `live` shared values, so
+ * move/resize/rotate previews run on the UI thread with zero React re-renders.
+ * When idle the live transform is identity, so this is a no-op visually.
+ */
+export function AnnotationLayer({ editor }: { editor: EditorContextValue }) {
+  const { annotations, selectedId, live, editingTextId } = editor;
+
+  const liveTransform = useDerivedValue(() => [
+    { translateX: live.tx.value },
+    { translateY: live.ty.value },
+    { rotate: live.rotate.value },
+    { scale: live.scale.value },
+  ]);
+  const liveOrigin = useDerivedValue(() => live.origin.value);
+
+  return (
+    <>
+      {sortedByZ(annotations).map((a) => {
+        // Hide the text annotation currently being edited in the native overlay.
+        if (a.type === 'text' && a.id === editingTextId) {
+          return null;
+        }
+        if (a.id === selectedId) {
+          return (
+            <Group key={a.id} origin={liveOrigin} transform={liveTransform}>
+              <AnnotationView a={a} />
+            </Group>
+          );
+        }
+        return <AnnotationView key={a.id} a={a} />;
+      })}
+    </>
+  );
+}

package/src/canvas/BaseImageLayer.tsx

@@ -0,0 +1,28 @@
+import { Image } from '@shopify/react-native-skia';
+import type { SkImage } from '@shopify/react-native-skia';
+
+import type { Size } from '../context/EditorContext';
+
+/**
+ * Draws the base image in IMAGE space (x=0,y=0, native width/height). The parent
+ * scene `<Group>` maps it onto the screen, so this same layer renders identically
+ * off-screen at full resolution during export.
+ */
+export function BaseImageLayer({
+  image,
+  size,
+}: {
+  image: SkImage;
+  size: Size;
+}) {
+  return (
+    <Image
+      image={image}
+      x={0}
+      y={0}
+      width={size.width}
+      height={size.height}
+      fit="fill"
+    />
+  );
+}

package/src/canvas/CropOverlay.tsx

@@ -0,0 +1,92 @@
+import { useEffect } from 'react';
+import { Circle, Group, Path, Rect, Skia } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+
+import type { EditorContextValue } from '../context/EditorContext';
+import { HANDLE_SIZE } from '../constants';
+import { applyToPoint } from '../utils/math';
+import type { Vec2 } from '../types';
+
+/**
+ * Crop UI drawn in screen space: a dimmed full-screen scrim plus the crop
+ * rectangle's border and corner handles, which follow `cropRectSV` on the UI
+ * thread (works even when the scene is rotated, since the border is a quad).
+ */
+export function CropOverlay({ editor }: { editor: EditorContextValue }) {
+  const { tool, doc, cropRectSV, matrixSV, imageSize, layout } = editor;
+
+  // When entering the crop tool, seed the crop rect from the current scene.
+  useEffect(() => {
+    if (tool === 'crop') {
+      cropRectSV.value =
+        doc.scene.cropRect ?? {
+          x: 0,
+          y: 0,
+          width: imageSize.width,
+          height: imageSize.height,
+        };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tool]);
+
+  const cropPath = useDerivedValue(() => {
+    const r = cropRectSV.value;
+    const m = matrixSV.value;
+    const p = Skia.Path.Make();
+    const c0 = applyToPoint(m, { x: r.x, y: r.y });
+    const c1 = applyToPoint(m, { x: r.x + r.width, y: r.y });
+    const c2 = applyToPoint(m, { x: r.x + r.width, y: r.y + r.height });
+    const c3 = applyToPoint(m, { x: r.x, y: r.y + r.height });
+    p.moveTo(c0.x, c0.y);
+    p.lineTo(c1.x, c1.y);
+    p.lineTo(c2.x, c2.y);
+    p.lineTo(c3.x, c3.y);
+    p.close();
+    return p;
+  });
+
+  const corners = useDerivedValue<Vec2[]>(() => {
+    const r = cropRectSV.value;
+    const m = matrixSV.value;
+    return [
+      applyToPoint(m, { x: r.x, y: r.y }),
+      applyToPoint(m, { x: r.x + r.width, y: r.y }),
+      applyToPoint(m, { x: r.x + r.width, y: r.y + r.height }),
+      applyToPoint(m, { x: r.x, y: r.y + r.height }),
+    ];
+  });
+
+  // Per-corner x/y derived values (declared unconditionally — rules of hooks).
+  const c0x = useDerivedValue(() => corners.value[0]!.x);
+  const c0y = useDerivedValue(() => corners.value[0]!.y);
+  const c1x = useDerivedValue(() => corners.value[1]!.x);
+  const c1y = useDerivedValue(() => corners.value[1]!.y);
+  const c2x = useDerivedValue(() => corners.value[2]!.x);
+  const c2y = useDerivedValue(() => corners.value[2]!.y);
+  const c3x = useDerivedValue(() => corners.value[3]!.x);
+  const c3y = useDerivedValue(() => corners.value[3]!.y);
+
+  if (tool !== 'crop') {
+    return null;
+  }
+
+  const r = HANDLE_SIZE / 2;
+  return (
+    <Group>
+      {/* Dimmed scrim over the whole canvas. */}
+      <Rect
+        x={0}
+        y={0}
+        width={layout.width}
+        height={layout.height}
+        color="rgba(0,0,0,0.45)"
+      />
+      {/* Crop rectangle border. */}
+      <Path path={cropPath} color="#FFFFFF" style="stroke" strokeWidth={2} />
+      <Circle cx={c0x} cy={c0y} r={r} color="#FFFFFF" />
+      <Circle cx={c1x} cy={c1y} r={r} color="#FFFFFF" />
+      <Circle cx={c2x} cy={c2y} r={r} color="#FFFFFF" />
+      <Circle cx={c3x} cy={c3y} r={r} color="#FFFFFF" />
+    </Group>
+  );
+}

package/src/canvas/EditorCanvas.tsx

@@ -0,0 +1,70 @@
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+import { Canvas, Group } from '@shopify/react-native-skia';
+import type { SkImage } from '@shopify/react-native-skia';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import { useEditor } from '../context/EditorContext';
+import { sceneTransforms2d } from '../utils/math';
+import { useEditorGestures } from '../gestures/useEditorGestures';
+import { useCropGesture } from '../gestures/useCropGesture';
+import { BaseImageLayer } from './BaseImageLayer';
+import { AnnotationLayer } from './AnnotationLayer';
+import { InFlightLayer } from './InFlightLayer';
+import { SelectionOverlay } from './SelectionOverlay';
+import { CropOverlay } from './CropOverlay';
+
+/**
+ * The Skia canvas host. Layers, under one scene `<Group>` transform:
+ *   base image → committed annotations → in-flight draft
+ * plus screen-space overlays (selection handles, crop UI). A single composed
+ * gesture drives all editing.
+ *
+ * IMPORTANT: React Context does NOT cross the Skia `<Canvas>` boundary — Skia
+ * renders Canvas children with its own reconciler, so a Provider mounted outside
+ * the Canvas is invisible inside it. Every Canvas child therefore receives the
+ * whole editor value via an `editor` PROP instead of calling `useEditor()`.
+ * Also, `<Canvas onLayout>` is unsupported on the New Architecture, so we measure
+ * on a wrapping `<View>`.
+ */
+export function EditorCanvas({ image }: { image: SkImage }) {
+  const editor = useEditor();
+  const { doc, imageSize, setLayout, layout } = editor;
+
+  const pan = useEditorGestures();
+  const cropPan = useCropGesture();
+  const gesture = useMemo(() => Gesture.Race(cropPan, pan), [cropPan, pan]);
+
+  const transform = useMemo(
+    () => sceneTransforms2d(doc.scene, imageSize, layout),
+    [doc.scene, imageSize, layout]
+  );
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayout({ width, height });
+    }
+  };
+
+  return (
+    <View style={styles.fill} onLayout={onLayout}>
+      <GestureDetector gesture={gesture}>
+        <Canvas style={styles.fill}>
+          <Group transform={transform as never}>
+            <BaseImageLayer image={image} size={imageSize} />
+            <AnnotationLayer editor={editor} />
+            <InFlightLayer editor={editor} />
+          </Group>
+          <SelectionOverlay editor={editor} />
+          <CropOverlay editor={editor} />
+        </Canvas>
+      </GestureDetector>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+});

package/src/canvas/InFlightLayer.tsx

@@ -0,0 +1,140 @@
+import { Circle, Group, Line, Path, Rect, Skia } from '@shopify/react-native-skia';
+import type { SkPath } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+
+import type { DrawState, EditorContextValue } from '../context/EditorContext';
+import { ARROW_HEAD_RATIO, MARKER_OPACITY } from '../constants';
+import { withOpacity } from '../utils/color';
+
+/**
+ * Renders the shape currently being drawn, bound to the `draw` shared values so
+ * it updates on the UI thread. The active tool is fixed for the duration of a
+ * draw, so switching on it here is safe. Opacity is 0 when not drawing.
+ *
+ * Receives `editor` as a prop (context does not cross the Skia Canvas boundary).
+ */
+export function InFlightLayer({ editor }: { editor: EditorContextValue }) {
+  const { tool, draw, strokeColor, strokeWidth } = editor;
+
+  const opacity = useDerivedValue(() => (draw.active.value ? 1 : 0));
+
+  return (
+    <Group opacity={opacity}>
+      {tool === 'circle' && (
+        <CirclePreview draw={draw} color={strokeColor} width={strokeWidth} />
+      )}
+      {tool === 'arrow' && (
+        <ArrowPreview draw={draw} color={strokeColor} width={strokeWidth} />
+      )}
+      {tool === 'marker' && <MarkerPreview draw={draw} color={strokeColor} />}
+      {tool === 'freehand' && (
+        <FreehandPreview draw={draw} color={strokeColor} width={strokeWidth} />
+      )}
+    </Group>
+  );
+}
+
+function CirclePreview({
+  draw,
+  color,
+  width,
+}: {
+  draw: DrawState;
+  color: string;
+  width: number;
+}) {
+  const cx = useDerivedValue(() => draw.start.value.x);
+  const cy = useDerivedValue(() => draw.start.value.y);
+  const r = useDerivedValue(() =>
+    Math.hypot(
+      draw.current.value.x - draw.start.value.x,
+      draw.current.value.y - draw.start.value.y
+    )
+  );
+  return (
+    <Circle cx={cx} cy={cy} r={r} color={color} style="stroke" strokeWidth={width} />
+  );
+}
+
+function ArrowPreview({
+  draw,
+  color,
+  width,
+}: {
+  draw: DrawState;
+  color: string;
+  width: number;
+}) {
+  const headSize = width * ARROW_HEAD_RATIO;
+
+  const p1 = useDerivedValue(() => draw.start.value);
+  const p2 = useDerivedValue(() => draw.current.value);
+  const barb1 = useDerivedValue(() => {
+    const s = draw.start.value;
+    const e = draw.current.value;
+    const angle = Math.atan2(e.y - s.y, e.x - s.x);
+    const barb = (Math.PI * 5) / 6;
+    return {
+      x: e.x + headSize * Math.cos(angle + barb),
+      y: e.y + headSize * Math.sin(angle + barb),
+    };
+  });
+  const barb2 = useDerivedValue(() => {
+    const s = draw.start.value;
+    const e = draw.current.value;
+    const angle = Math.atan2(e.y - s.y, e.x - s.x);
+    const barb = (Math.PI * 5) / 6;
+    return {
+      x: e.x + headSize * Math.cos(angle - barb),
+      y: e.y + headSize * Math.sin(angle - barb),
+    };
+  });
+
+  return (
+    <Group color={color} style="stroke" strokeWidth={width} strokeCap="round">
+      <Line p1={p1} p2={p2} />
+      <Line p1={p2} p2={barb1} />
+      <Line p1={p2} p2={barb2} />
+    </Group>
+  );
+}
+
+function MarkerPreview({ draw, color }: { draw: DrawState; color: string }) {
+  const x = useDerivedValue(() => Math.min(draw.start.value.x, draw.current.value.x));
+  const y = useDerivedValue(() => Math.min(draw.start.value.y, draw.current.value.y));
+  const w = useDerivedValue(() => Math.abs(draw.current.value.x - draw.start.value.x));
+  const h = useDerivedValue(() => Math.abs(draw.current.value.y - draw.start.value.y));
+  return <Rect x={x} y={y} width={w} height={h} color={withOpacity(color, MARKER_OPACITY)} />;
+}
+
+function FreehandPreview({
+  draw,
+  color,
+  width,
+}: {
+  draw: DrawState;
+  color: string;
+  width: number;
+}) {
+  const path = useDerivedValue<SkPath>(() => {
+    const pts = draw.points.value;
+    const p = Skia.Path.Make();
+    if (pts.length > 0) {
+      p.moveTo(pts[0]!.x, pts[0]!.y);
+      for (let i = 1; i < pts.length; i++) {
+        p.lineTo(pts[i]!.x, pts[i]!.y);
+      }
+    }
+    return p;
+  });
+  return (
+    <Path
+      path={path}
+      color={color}
+      style="stroke"
+      strokeWidth={width}
+      strokeCap="round"
+      strokeJoin="round"
+    />
+  );
+}

package/src/canvas/SelectionOverlay.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import {
+  Circle,
+  Group,
+  Line,
+  Path,
+  Rect,
+  Skia,
+} from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+
+import type { EditorContextValue } from '../context/EditorContext';
+import { getAnnotationById } from '../state/selectors';
+import { selectionHandles } from '../gestures/handles';
+import { HANDLE_SIZE } from '../constants';
+
+const SELECTION_COLOR = '#1E90FF';
+
+/**
+ * Draws the selection bounding box + resize corners + rotate handle in SCREEN
+ * space (outside the scene transform, so handle size is zoom-independent). The
+ * overlay hides itself during an active live transform to avoid a stale double.
+ */
+export function SelectionOverlay({ editor }: { editor: EditorContextValue }) {
+  const { annotations, selectedId, matrix, live } = editor;
+  const selected = getAnnotationById(annotations, selectedId);
+
+  const opacity = useDerivedValue(() => (live.active.value ? 0 : 1));
+
+  const handles = useMemo(
+    () => (selected ? selectionHandles(selected, matrix) : null),
+    [selected, matrix]
+  );
+
+  const boxPath = useMemo(() => {
+    if (!handles) {
+      return null;
+    }
+    const p = Skia.Path.Make();
+    const c = handles.corners;
+    p.moveTo(c[0].x, c[0].y);
+    p.lineTo(c[1].x, c[1].y);
+    p.lineTo(c[2].x, c[2].y);
+    p.lineTo(c[3].x, c[3].y);
+    p.close();
+    return p;
+  }, [handles]);
+
+  if (!selected || !handles || !boxPath) {
+    return null;
+  }
+
+  const topMid = {
+    x: (handles.corners[0].x + handles.corners[1].x) / 2,
+    y: (handles.corners[0].y + handles.corners[1].y) / 2,
+  };
+
+  return (
+    <Group opacity={opacity}>
+      <Path
+        path={boxPath}
+        color={SELECTION_COLOR}
+        style="stroke"
+        strokeWidth={2}
+      />
+      {/* Rotate handle */}
+      <Line p1={topMid} p2={handles.rotate} color={SELECTION_COLOR} strokeWidth={2} />
+      <Circle cx={handles.rotate.x} cy={handles.rotate.y} r={HANDLE_SIZE / 2} color={SELECTION_COLOR} />
+      {/* Corner resize handles (white fill + blue border) */}
+      {handles.corners.map((corner, i) => (
+        <React.Fragment key={i}>
+          <Rect
+            x={corner.x - HANDLE_SIZE / 2}
+            y={corner.y - HANDLE_SIZE / 2}
+            width={HANDLE_SIZE}
+            height={HANDLE_SIZE}
+            color="#FFFFFF"
+          />
+          <Rect
+            x={corner.x - HANDLE_SIZE / 2}
+            y={corner.y - HANDLE_SIZE / 2}
+            width={HANDLE_SIZE}
+            height={HANDLE_SIZE}
+            color={SELECTION_COLOR}
+            style="stroke"
+            strokeWidth={2}
+          />
+        </React.Fragment>
+      ))}
+    </Group>
+  );
+}

package/src/constants.ts

@@ -0,0 +1,46 @@
+import type { ColorString } from './types';
+
+/** Default stroke width (in image pixels) for new shapes. */
+export const DEFAULT_STROKE_WIDTH = 8;
+
+/** Default font size (in image pixels) for new text annotations. */
+export const DEFAULT_FONT_SIZE = 48;
+
+/** Default wrap width (in image pixels) for new text boxes. */
+export const DEFAULT_TEXT_WIDTH = 400;
+
+/** Semi-transparent opacity for the marker/highlighter tool. */
+export const MARKER_OPACITY = 0.4;
+
+/** Arrowhead barb length as a multiple of stroke width. */
+export const ARROW_HEAD_RATIO = 4;
+
+/** Touch slop (in screen points) added to hit-test radii for easier selection. */
+export const HIT_SLOP = 12;
+
+/** On-screen size (points) of selection handles. */
+export const HANDLE_SIZE = 14;
+
+/** Distance (points) the rotate handle sits above the selection's top edge. */
+export const ROTATE_HANDLE_OFFSET = 36;
+
+/** Max entries retained in the undo/redo history. */
+export const MAX_HISTORY = 50;
+
+/** Minimum spacing (image px) between sampled freehand points. */
+export const FREEHAND_MIN_DISTANCE = 3;
+
+export const DEFAULT_STROKE_COLOR: ColorString = '#FF3B30';
+export const DEFAULT_TEXT_COLOR: ColorString = '#FFFFFF';
+
+export const DEFAULT_PALETTE: ColorString[] = [
+  '#FF3B30', // red
+  '#FF9500', // orange
+  '#FFCC00', // yellow
+  '#34C759', // green
+  '#007AFF', // blue
+  '#5856D6', // indigo
+  '#AF52DE', // purple
+  '#FFFFFF', // white
+  '#000000', // black
+];