@pictor-sdk/ui 0.1.0

package/src/panels/ColorPanel.tsx

@@ -0,0 +1,193 @@
+import {
+  isInertTint,
+  tintPatch,
+  useEditor,
+  type ColorTint,
+  type ImageLayerData,
+} from '@pictor-sdk/core'
+import React, { useState } from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { Slider } from '../components/Slider'
+import { useTheme } from '../theme'
+import { useTargetImageLayer } from './useTargetImageLayer'
+
+/**
+ * Split toning: a colour cast on the shadows, another on the highlights.
+ *
+ * Two ends, each with a palette and a strength. They are edited one at a time
+ * because they are genuinely independent — the render masks confine each to its
+ * own end of the tonal range — so showing both at once would suggest an
+ * interaction that does not exist.
+ *
+ * The strength slider is one-directional and rests at zero, like Lux: a cast
+ * has an amount, not a direction.
+ */
+
+/**
+ * Our own palette — eight hues spread around the wheel at a muted saturation.
+ *
+ * Deliberately not anyone else's swatch set. Muted rather than pure because a
+ * fully saturated cast at any usable strength reads as a colour error; these
+ * still shift the grade decisively at strength 1.
+ */
+export const TINT_SWATCHES: readonly string[] = [
+  '#1f8a8a',
+  '#2f6fd0',
+  '#7a5cd0',
+  '#c04a9e',
+  '#c8443c',
+  '#d99038',
+  '#8a9a3f',
+  '#3f9a6a',
+]
+
+const ENDS = [
+  { key: 'shadows', label: 'Shadows' },
+  { key: 'highlights', label: 'Highlights' },
+] as const
+
+/** Strength given to a colour picked while the end has none yet. */
+const INITIAL_STRENGTH = 0.5
+
+export function ColorPanel() {
+  const { dispatch } = useEditor()
+  const theme = useTheme()
+  const layer = useTargetImageLayer()
+  const [end, setEnd] = useState<'shadows' | 'highlights'>('shadows')
+
+  if (!layer) return null
+  const data = layer.data as ImageLayerData
+  const tint: ColorTint | undefined = data.color.tinting?.[end]
+  const active = isInertTint(tint) ? undefined : tint
+
+  const patch = (next: ColorTint | undefined) =>
+    dispatch({
+      type: 'layer/patchData',
+      id: layer.id,
+      patch: { color: tintPatch(end, next) } as unknown as Record<string, unknown>,
+    })
+
+  /** Picking the colour already applied clears this end — tap again to undo it. */
+  const pick = (color: string) =>
+    patch(
+      active?.color === color
+        ? undefined
+        : { color, strength: active?.strength ?? INITIAL_STRENGTH },
+    )
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          gap: theme.spacing.md,
+          paddingTop: theme.spacing.sm,
+        }}
+      >
+        {ENDS.map(({ key, label }) => {
+          const selected = key === end
+          const set = !isInertTint(data.color.tinting?.[key])
+          return (
+            <Pressable
+              key={key}
+              accessibilityRole="button"
+              accessibilityLabel={`Tint ${label.toLowerCase()}`}
+              onPress={() => setEnd(key)}
+              style={{
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: 6,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.accent : 'transparent',
+              }}
+            >
+              <Text
+                style={{
+                  color: selected ? theme.colors.accent : theme.colors.textMuted,
+                  fontSize: theme.font.sizeSm,
+                  fontWeight: theme.font.weight,
+                }}
+              >
+                {label}
+                {set ? ' •' : ''}
+              </Text>
+            </Pressable>
+          )
+        })}
+      </View>
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: theme.spacing.sm, paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.md }}
+        style={{ flexGrow: 0 }}
+      >
+        {TINT_SWATCHES.map((color) => (
+          <Pressable
+            key={color}
+            accessibilityRole="button"
+            accessibilityLabel={`Tint ${end} ${color}`}
+            onPress={() => pick(color)}
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              backgroundColor: color,
+              borderWidth: active?.color === color ? 3 : 1,
+              borderColor: active?.color === color ? theme.colors.text : theme.colors.track,
+            }}
+          />
+        ))}
+      </ScrollView>
+
+      <View style={{ paddingHorizontal: theme.spacing.lg }}>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: theme.spacing.sm,
+            minHeight: 28,
+          }}
+        >
+          <Text style={{ color: theme.colors.textMuted, fontSize: theme.font.sizeSm }}>
+            {active ? `Strength ${Math.round(active.strength * 100)}` : 'Pick a colour'}
+          </Text>
+          {active ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={`Reset ${end} tint`}
+              onPress={() => patch(undefined)}
+              hitSlop={8}
+              style={{
+                paddingHorizontal: theme.spacing.sm,
+                paddingVertical: 2,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: theme.colors.track,
+              }}
+            >
+              <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm }}>Reset</Text>
+            </Pressable>
+          ) : null}
+        </View>
+        <Slider
+          value={active?.strength ?? 0}
+          min={0}
+          max={1}
+          centered={false}
+          testID="tint-strength"
+          disabled={!active}
+          valueLabel={`${Math.round((active?.strength ?? 0) * 100)}`}
+          onStart={() => dispatch({ type: 'history/beginBatch', label: `tint-${end}` })}
+          onChange={(strength) => {
+            if (!active) return
+            patch({ color: active.color, strength })
+          }}
+          onEnd={() => dispatch({ type: 'history/endBatch' })}
+        />
+      </View>
+    </View>
+  )
+}

package/src/panels/CropPanel.tsx

@@ -0,0 +1,185 @@
+import {
+  cropFitScale,
+  flipPatch,
+  isFlipped,
+  useEditor,
+  useEditorStore,
+  type FlipAxis,
+  type ImageLayerData,
+} from '@pictor-sdk/core'
+import React from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+import { StraightenRuler } from '../components/StraightenRuler'
+import { useTargetImageLayer } from './useTargetImageLayer'
+import {
+  canvasSizeForAspect,
+} from './cropMath'
+
+function aspectLabel(aspect: number | 'free'): string {
+  if (aspect === 'free') return 'Free'
+  const known: Array<[number, string]> = [
+    [4 / 5, '4:5'],
+    [1, '1:1'],
+    [16 / 9, '16:9'],
+    [9 / 16, '9:16'],
+    [3 / 4, '3:4'],
+    [4 / 3, '4:3'],
+  ]
+  for (const [value, label] of known) {
+    if (Math.abs(aspect - value) < 1e-6) return label
+  }
+  return aspect.toFixed(2)
+}
+
+/** Crop tool: aspect presets from the profile, 90° rotate, straighten dial. */
+export function CropPanel() {
+  const { document, dispatch, profile } = useEditor()
+  useEditorStore() // subscribe
+  const theme = useTheme()
+  const layer = useTargetImageLayer()
+  if (!layer) return null
+  const data = layer.data as ImageLayerData
+  const straighten = data.straighten ?? 0
+
+  const applyAspect = (aspect: number | 'free') => {
+    const nextSize = canvasSizeForAspect(document.size, aspect)
+    dispatch({ type: 'history/beginBatch', label: 'aspect' })
+    dispatch({ type: 'doc/patch', patch: { size: nextSize } })
+    dispatch({ type: 'layer/patchData', id: layer.id, patch: { crop: undefined } })
+    dispatch({
+      type: 'layer/transform',
+      id: layer.id,
+      patch: {
+        x: 0.5,
+        y: 0.5,
+        scale: cropFitScale(data.intrinsic, nextSize, profile.interaction?.crop?.fit ?? 'contain'),
+      },
+    })
+    dispatch({ type: 'history/endBatch' })
+  }
+
+  const rotate90 = () => {
+    const current = layer.transform.rotation
+    const rotation = current + Math.PI / 2
+    dispatch({
+      type: 'layer/transform',
+      id: layer.id,
+      patch: {
+        rotation,
+        x: 0.5,
+        y: 0.5,
+        scale: cropFitScale(data.intrinsic, document.size, profile.interaction?.crop?.fit ?? 'contain', rotation),
+      },
+    })
+  }
+
+  /**
+   * Mirror the photo on one axis.
+   *
+   * No batch of its own: the crop tool session already opened one, so a flip
+   * joins that session's single undo entry and Cancel rolls it back with the
+   * rest. Only the flip flag changes — the crop window, straighten, position
+   * and scale are all left alone, and hit-testing follows because it reads the
+   * same flag the renderer does.
+   */
+  const flip = (axis: FlipAxis) =>
+    dispatch({
+      type: 'layer/transform',
+      id: layer.id,
+      patch: flipPatch(layer.transform, axis),
+    })
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background }}>
+      <View style={{ paddingHorizontal: theme.spacing.lg }}>
+        <StraightenRuler
+          value={(straighten * 180) / Math.PI}
+          min={-45}
+          max={45}
+          onStart={() => dispatch({ type: 'history/beginBatch', label: 'straighten' })}
+          onChange={(v) =>
+            dispatch({
+              type: 'layer/patchData',
+              id: layer.id,
+              patch: { straighten: (v * Math.PI) / 180 },
+            })
+          }
+          onEnd={() => dispatch({ type: 'history/endBatch' })}
+        />
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: theme.spacing.sm, padding: theme.spacing.md }}
+        style={{ flexGrow: 0 }}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Rotate 90 degrees"
+          onPress={rotate90}
+          style={{
+            paddingHorizontal: theme.spacing.md,
+            paddingVertical: theme.spacing.sm,
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.surface,
+          }}
+        >
+          <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }}>
+            ⟳ 90°
+          </Text>
+        </Pressable>
+        {(['horizontal', 'vertical'] as const).map((axis) => {
+          const on = isFlipped(layer.transform, axis)
+          return (
+            <Pressable
+              key={axis}
+              accessibilityRole="button"
+              accessibilityLabel={`Flip ${axis}`}
+              accessibilityState={{ selected: on }}
+              onPress={() => flip(axis)}
+              style={{
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm,
+                borderRadius: theme.radii.md,
+                backgroundColor: theme.colors.surface,
+                borderWidth: 1,
+                borderColor: on ? theme.colors.accent : 'transparent',
+              }}
+            >
+              <Text
+                style={{
+                  color: on ? theme.colors.accent : theme.colors.text,
+                  fontSize: theme.font.sizeSm,
+                  fontWeight: theme.font.weight,
+                }}
+              >
+                {axis === 'horizontal' ? '⇋' : '⇅'}
+              </Text>
+            </Pressable>
+          )
+        })}
+        {profile.aspects.map((aspect, i) => (
+          <Pressable
+            key={i}
+            onPress={() => applyAspect(aspect)}
+            style={{
+              width: 58,
+              height: 48,
+              borderRadius: theme.radii.md,
+              borderWidth: 1,
+              borderColor: theme.colors.textMuted,
+              backgroundColor: 'transparent',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm, fontWeight: theme.font.weight }}>
+              {aspectLabel(aspect)}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}

package/src/panels/DrawPanel.tsx

@@ -0,0 +1,106 @@
+import { type Stroke } from '@pictor-sdk/core'
+import React from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { DEFAULT_BRUSH } from '../gestures/DrawingSurface'
+import { type BrushConfig } from '../gestures/drawController'
+import { useTheme } from '../theme'
+import { useUiState } from '../uiState'
+import { Slider } from '../components/Slider'
+
+const BRUSHES: Array<{ id: Stroke['brush']; label: string }> = [
+  { id: 'pen', label: 'Pen' },
+  { id: 'marker', label: 'Marker' },
+  { id: 'neon', label: 'Neon' },
+  { id: 'highlighter', label: 'Highlight' },
+  { id: 'eraser', label: 'Eraser' },
+]
+
+const SWATCHES = [
+  '#ffffff', '#000000', '#ed4956', '#ffb43b', '#ffe25c',
+  '#78de85', '#4dc4ff', '#3897f0', '#a15fed', '#d977b1',
+]
+
+/** Draw tab: brush picker, color swatches + eyedropper, width slider. */
+export function DrawPanel() {
+  const theme = useTheme()
+  const [brush, setBrush] = useUiState<BrushConfig>('draw.brush', DEFAULT_BRUSH)
+  const [eyedropper, setEyedropper] = useUiState('draw.eyedropper', false)
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background }}>
+      <View style={{ paddingHorizontal: theme.spacing.lg }}>
+        <Slider
+          value={brush.width}
+          min={0.002}
+          max={0.06}
+          centered={false}
+          onChange={(width) => setBrush({ ...brush, width })}
+        />
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: 'center' }}
+        style={{ flexGrow: 0 }}
+      >
+        <Pressable
+          onPress={() => setEyedropper(!eyedropper)}
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: 14,
+            borderWidth: 2,
+            borderColor: eyedropper ? theme.colors.accent : theme.colors.textMuted,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Text style={{ color: theme.colors.text, fontSize: 13 }}>💧</Text>
+        </Pressable>
+        {SWATCHES.map((color) => (
+          <Pressable
+            key={color}
+            onPress={() => setBrush({ ...brush, color })}
+            style={{
+              width: 26,
+              height: 26,
+              borderRadius: 13,
+              backgroundColor: color,
+              borderWidth: brush.color === color ? 3 : 1,
+              borderColor: brush.color === color ? theme.colors.accent : theme.colors.track,
+            }}
+          />
+        ))}
+      </ScrollView>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: theme.spacing.sm, padding: theme.spacing.md }}
+        style={{ flexGrow: 0 }}
+      >
+        {BRUSHES.map((b) => (
+          <Pressable
+            key={b.id}
+            onPress={() => setBrush({ ...brush, brush: b.id })}
+            style={{
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              borderRadius: theme.radii.md,
+              backgroundColor: brush.brush === b.id ? theme.colors.surface : 'transparent',
+            }}
+          >
+            <Text
+              style={{
+                color: brush.brush === b.id ? theme.colors.accent : theme.colors.text,
+                fontSize: theme.font.sizeSm,
+                fontWeight: theme.font.weight,
+              }}
+            >
+              {b.label}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}

package/src/panels/FilterStrip.tsx

@@ -0,0 +1,153 @@
+import { baseImageLayer, useEditor, useLuts, type ImageLayerData, type LutRef } from '@pictor-sdk/core'
+import { useRenderer } from '@pictor-sdk/skia'
+import { Canvas, Image as SkiaImage, type SkImage } from '@shopify/react-native-skia'
+import React, { useEffect, useState } from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+import { Slider } from '../components/Slider'
+import { useTargetImageLayer } from './useTargetImageLayer'
+
+const THUMB = 84
+
+/**
+ * The base photo — the bottom-most image layer.
+ *
+ * Unchanged, and deliberately still available: some capabilities are genuinely
+ * about *the base photo* rather than about whichever photo is selected — Story
+ * media placement and the derived background are computed from it. Panels that
+ * edit "the current image" use {@link useTargetImageLayer} instead.
+ */
+export function useBaseImageLayer() {
+  const { document } = useEditor()
+  return baseImageLayer(document)
+}
+
+function Thumb({ lut, label, active }: { lut: LutRef | undefined; label: string; active: boolean }) {
+  const { document } = useEditor()
+  const renderer = useRenderer()
+  const theme = useTheme()
+  const [image, setImage] = useState<SkImage | null>(null)
+  const lutId = lut?.id
+  const lutIntensity = lut?.intensity
+
+  // cached by (source, crop, lut) inside the renderer — free after first render
+  useEffect(() => {
+    let alive = true
+    const requestedLut = lutId === undefined ? undefined : { id: lutId, intensity: lutIntensity ?? 1 }
+    renderer
+      .renderThumbnailImage(document, requestedLut, THUMB)
+      .then((img) => alive && setImage(img))
+      .catch(() => {})
+    return () => {
+      alive = false
+    }
+  }, [renderer, document, lutId, lutIntensity])
+
+  return (
+    <View style={{ alignItems: 'center', gap: 4 }}>
+      <Text
+        style={{
+          color: active ? theme.colors.accent : theme.colors.textMuted,
+          fontSize: theme.font.sizeSm,
+        }}
+      >
+        {label}
+      </Text>
+      <View
+        style={{
+          width: THUMB,
+          height: THUMB,
+          borderRadius: theme.radii.sm,
+          overflow: 'hidden',
+          borderWidth: active ? 2 : 0,
+          borderColor: theme.colors.accent,
+          backgroundColor: theme.colors.surface,
+        }}
+      >
+        {image ? (
+          <Canvas style={{ width: THUMB, height: THUMB }}>
+            <SkiaImage image={image} x={0} y={0} width={THUMB} height={THUMB} fit="cover" />
+          </Canvas>
+        ) : null}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * The LUT filter strip: live thumbnails, tap to apply, second tap on the
+ * active filter reveals the intensity slider.
+ */
+export function FilterStrip() {
+  const { dispatch } = useEditor()
+  const luts = useLuts()
+  const theme = useTheme()
+  const layer = useTargetImageLayer()
+  const [intensityFor, setIntensityFor] = useState<string | null>(null)
+
+  if (!layer) return null
+  const color = (layer.data as ImageLayerData).color
+  const activeLut = color.lut
+
+  const applyLut = (lutId: string | null) => {
+    if (lutId === null) {
+      dispatch({ type: 'layer/patchData', id: layer.id, patch: { color: { lut: undefined } } })
+      setIntensityFor(null)
+      return
+    }
+    if (activeLut?.id === lutId) {
+      // second tap → intensity slider
+      setIntensityFor((cur) => (cur === lutId ? null : lutId))
+      return
+    }
+    dispatch({
+      type: 'layer/patchData',
+      id: layer.id,
+      patch: { color: { lut: { id: lutId, intensity: 1 } } },
+    })
+  }
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background }}>
+      {intensityFor && activeLut?.id === intensityFor ? (
+        <View style={{ paddingHorizontal: theme.spacing.lg }}>
+          <Slider
+            value={activeLut.intensity}
+            min={0}
+            max={1}
+            centered={false}
+            valueLabel={`${Math.round(activeLut.intensity * 100)}`}
+            onStart={() => dispatch({ type: 'history/beginBatch', label: 'intensity' })}
+            onChange={(intensity) =>
+              dispatch({
+                type: 'layer/patchData',
+                id: layer.id,
+                patch: { color: { lut: { id: intensityFor, intensity } } },
+              })
+            }
+            onEnd={() => dispatch({ type: 'history/endBatch' })}
+          />
+        </View>
+      ) : null}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ gap: theme.spacing.sm, padding: theme.spacing.md }}
+        style={{ flexGrow: 0 }}
+      >
+        <Pressable onPress={() => applyLut(null)}>
+          <Thumb lut={undefined} label="Original" active={!activeLut} />
+        </Pressable>
+        {luts.map((lut) => (
+          <Pressable key={lut.id} onPress={() => applyLut(lut.id)}>
+            <Thumb
+              lut={{ id: lut.id, intensity: 1 }}
+              label={lut.label}
+              active={activeLut?.id === lut.id}
+            />
+          </Pressable>
+        ))}
+      </ScrollView>
+    </View>
+  )
+}