@pictor-sdk/ui 0.1.0

package/src/panels/LayersPanel.tsx

@@ -0,0 +1,85 @@
+import {
+  isDirectManipulationLayer,
+  useEditor,
+  type EditorDocument,
+  type ProfileLayerInteraction,
+} from '@pictor-sdk/core'
+import React from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+
+/**
+ * Z-order UI: top-most first, tap to select, reorder and delete.
+ * (Drag-to-delete on canvas maps to the same layer/remove command.)
+ */
+export function LayersPanel() {
+  const { document, selection, select, dispatch, profile } = useEditor()
+  const theme = useTheme()
+  const layers = layersForPanel(document, profile.interaction?.layers)
+  const minimumIndex = minimumLayerIndexForPanel(document, profile.interaction?.layers)
+
+  return (
+    <ScrollView style={{ maxHeight: 220, backgroundColor: theme.colors.background }}>
+      {layers.map(({ layer, index }) => {
+        const selected = selection.includes(layer.id)
+        return (
+          <View
+            key={layer.id}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.xs,
+              backgroundColor: selected ? theme.colors.surface : 'transparent',
+            }}
+          >
+            <Pressable style={{ flex: 1 }} onPress={() => select([layer.id])}>
+              <Text style={{ color: selected ? theme.colors.accent : theme.colors.text, fontSize: theme.font.sizeSm }}>
+                {layer.name ?? `${layer.type} · ${layer.id.slice(0, 6)}`}
+              </Text>
+            </Pressable>
+            <Pressable
+              disabled={index === document.layers.length - 1}
+              onPress={() => dispatch({ type: 'layer/reorder', id: layer.id, to: index + 1 })}
+              style={{ padding: theme.spacing.xs }}
+            >
+              <Text style={{ color: theme.colors.textMuted }}>▲</Text>
+            </Pressable>
+            <Pressable
+              disabled={index === minimumIndex}
+              onPress={() => dispatch({ type: 'layer/reorder', id: layer.id, to: index - 1 })}
+              style={{ padding: theme.spacing.xs }}
+            >
+              <Text style={{ color: theme.colors.textMuted }}>▼</Text>
+            </Pressable>
+            <Pressable
+              onPress={() => dispatch({ type: 'layer/remove', id: layer.id })}
+              style={{ padding: theme.spacing.xs }}
+            >
+              <Text style={{ color: theme.colors.danger }}>✕</Text>
+            </Pressable>
+          </View>
+        )
+      })}
+    </ScrollView>
+  )
+}
+
+/** Lowest z-index to which the panel may move an overlay. */
+export function minimumLayerIndexForPanel(
+  document: EditorDocument,
+  interaction?: ProfileLayerInteraction,
+): number {
+  return interaction?.excludeBaseImage && document.layers[0]?.type === 'image' ? 1 : 0
+}
+
+/** Overlay layers shown by the built-in manager, top-most first. */
+export function layersForPanel(
+  document: EditorDocument,
+  interaction?: ProfileLayerInteraction,
+): Array<{ layer: EditorDocument['layers'][number]; index: number }> {
+  return document.layers
+    .map((layer, index) => ({ layer, index }))
+    .filter(({ layer, index }) => isDirectManipulationLayer(layer, index, interaction))
+    .reverse()
+}

package/src/panels/LayoutPanel.tsx

@@ -0,0 +1,55 @@
+import { useEditor } from '@pictor-sdk/core'
+import React from 'react'
+import { Pressable, ScrollView, Text } from 'react-native'
+import { useTheme } from '../theme'
+import { cellToTransformPatch, layoutCells, type LayoutPreset } from './layoutMath'
+
+const PRESETS: Array<{ id: LayoutPreset; label: string }> = [
+  { id: '1', label: 'Single' },
+  { id: '2v', label: '2 rows' },
+  { id: '2h', label: '2 cols' },
+  { id: '3v', label: '3 rows' },
+  { id: '4grid', label: 'Grid' },
+]
+
+/** Layout grids: snap the image layers into the chosen arrangement. */
+export function LayoutPanel() {
+  const { document, dispatch } = useEditor()
+  const theme = useTheme()
+
+  const apply = (preset: LayoutPreset) => {
+    const cells = layoutCells(preset, document.size)
+    const images = document.layers.filter((l) => l.type === 'image')
+    dispatch({ type: 'history/beginBatch', label: 'layout' })
+    images.slice(0, cells.length).forEach((layer, i) => {
+      dispatch({ type: 'layer/transform', id: layer.id, patch: cellToTransformPatch(cells[i]!) })
+    })
+    dispatch({ type: 'history/endBatch' })
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ gap: theme.spacing.sm, padding: theme.spacing.md }}
+      style={{ flexGrow: 0, backgroundColor: theme.colors.background }}
+    >
+      {PRESETS.map((preset) => (
+        <Pressable
+          key={preset.id}
+          onPress={() => apply(preset.id)}
+          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 }}>
+            {preset.label}
+          </Text>
+        </Pressable>
+      ))}
+    </ScrollView>
+  )
+}

package/src/panels/LuxPanel.tsx

@@ -0,0 +1,122 @@
+import {
+  luxControlState,
+  luxIntensityPatch,
+  useEditor,
+  type ImageLayerData,
+  type LuxState,
+} from '@pictor-sdk/core'
+import { useLuxAnalysis } from '@pictor-sdk/skia'
+import React from 'react'
+import { Pressable, Text, View } from 'react-native'
+import { Slider } from '../components/Slider'
+import { useTheme } from '../theme'
+import { useTargetImageLayer } from './useTargetImageLayer'
+
+/**
+ * Lux: one intensity slider over an analysis of the photograph.
+ *
+ * Two things distinguish it from the 13 adjustments, both taken from
+ * measurement (`docs/research/photo-editor-ux.md`):
+ *
+ *  * the slider is **one-directional and rests at zero**, not centred — Lux is
+ *    an amount of correction, and there is no meaningful negative;
+ *  * the correction itself is **image-dependent**. The same slider position
+ *    lifts a flat photograph's highlights and pulls a well-exposed one's down.
+ *
+ * The analysis is written into the document the moment the user engages the
+ * slider, and everything afterwards — preview, undo, save, export — reads it
+ * from there. Recomputing at render time would let a different decode, a
+ * resized preview or a future analyzer quietly restyle an existing document.
+ */
+export function LuxPanel() {
+  const { dispatch } = useEditor()
+  const theme = useTheme()
+  const layer = useTargetImageLayer()
+  const data = layer?.data as ImageLayerData | undefined
+  const proposal = useLuxAnalysis(data?.source)
+
+  if (!layer || !data) return null
+  const stored: LuxState | undefined = data.color.lux
+  const intensity = stored?.intensity ?? 0
+  // Once stored, the document's analysis wins — that is the whole point. Until
+  // one exists, the control is inert rather than falling back to a neutral
+  // proposal: a neutral analysis stored during a slow decode would render as
+  // nothing *and* suppress the real proposal permanently.
+  const state = luxControlState(stored, proposal)
+
+  const setIntensity = (value: number) => {
+    const lux = luxIntensityPatch(state, value)
+    if (!lux) return
+    dispatch({ type: 'layer/patchData', id: layer.id, patch: { color: { lux } } })
+  }
+
+  /**
+   * Clear Lux entirely — `undefined` deletes the key, so the document returns
+   * to the shape it had before Lux was ever touched and the render path skips
+   * the contribution instead of adding zeroes.
+   *
+   * Inside the tool session's batch, like every other reset: Cancel rolls it
+   * back with the rest and Done commits it as one entry.
+   */
+  const reset = () =>
+    dispatch({
+      type: 'layer/patchData',
+      id: layer.id,
+      patch: { color: { lux: undefined } } as unknown as Record<string, unknown>,
+    })
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }}>
+      <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,
+              textAlign: 'center',
+              fontSize: theme.font.sizeSm,
+            }}
+          >
+            {state.pending ? 'Analyzing…' : `Lux ${intensity === 0 ? '' : Math.round(intensity * 100)}`}
+          </Text>
+          {intensity > 0 ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Reset Lux"
+              onPress={reset}
+              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={intensity}
+          min={0}
+          max={1}
+          centered={false}
+          disabled={!state.interactive}
+          testID="lux-slider"
+          valueLabel={`${Math.round(intensity * 100)}`}
+          onStart={() => dispatch({ type: 'history/beginBatch', label: 'lux' })}
+          onChange={setIntensity}
+          onEnd={() => dispatch({ type: 'history/endBatch' })}
+        />
+      </View>
+    </View>
+  )
+}

package/src/panels/MediaPanel.tsx

@@ -0,0 +1,73 @@
+import {
+  initialMediaTransform,
+  mediaConfigFromProfile,
+  useEditor,
+  type ImageLayerData,
+} from '@pictor-sdk/core'
+import { preferResolvedSize, useResolvedImageSize } from '@pictor-sdk/skia'
+import React from 'react'
+import { Pressable, Text, View } from 'react-native'
+import { useBaseMediaLayer } from '../gestures/StoryMediaGestureSurface'
+import { useTheme } from '../theme'
+
+/**
+ * The base-photo tool panel.
+ *
+ * It is deliberately thin: the gestures live on the canvas surface, and the
+ * Cancel/Done transaction comes from `ToolPanelHost`, which opens a history
+ * batch for any tool with a panel. The panel only offers the affordances that
+ * are not gestures — a reset to the initial fit — and explains the interaction.
+ */
+export function MediaPanel() {
+  const { document, dispatch, profile } = useEditor()
+  const layer = useBaseMediaLayer()
+  const theme = useTheme()
+  // same size the renderer and the gesture surface use, so Reset agrees with them
+  const data = layer?.data as ImageLayerData | undefined
+  const resolved = useResolvedImageSize(data?.source)
+
+  if (!layer) {
+    return (
+      <View style={{ padding: theme.spacing.lg }}>
+        <Text style={{ color: theme.colors.textMuted, fontSize: theme.font.sizeSm }}>
+          This document has no base photo.
+        </Text>
+      </View>
+    )
+  }
+
+  const reset = () => {
+    const config = mediaConfigFromProfile(profile.interaction?.media)
+    dispatch({
+      type: 'layer/transform',
+      id: layer.id,
+      patch: initialMediaTransform(
+        preferResolvedSize(resolved, data?.intrinsic),
+        document.size,
+        config,
+      ),
+    })
+  }
+
+  return (
+    <View style={{ padding: theme.spacing.lg, gap: theme.spacing.md }}>
+      <Text style={{ color: theme.colors.textMuted, fontSize: theme.font.sizeSm }}>
+        Drag to reposition · pinch to zoom · twist to rotate · double-tap to zoom
+      </Text>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Reset photo placement"
+        onPress={reset}
+        style={{
+          alignSelf: 'flex-start',
+          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.size }}>Reset</Text>
+      </Pressable>
+    </View>
+  )
+}

package/src/panels/PerspectivePanel.tsx

@@ -0,0 +1,157 @@
+import {
+  needsPerspective,
+  perspectivePatch,
+  useEditor,
+  MAX_PERSPECTIVE_DEGREES,
+  type ImageLayerData,
+  type Perspective,
+} from '@pictor-sdk/core'
+import React, { useState } from 'react'
+import { Pressable, Text, View } from 'react-native'
+import { Slider } from '../components/Slider'
+import { useTheme } from '../theme'
+import { useTargetImageLayer } from './useTargetImageLayer'
+
+/**
+ * Geometry: vertical keystone, straighten, horizontal keystone.
+ *
+ * One control shared by all three, because they are one family — the research
+ * pass found the reference driving exactly these three from a single dial, and
+ * that observation is what justified a single unified cover calculation rather
+ * than multiplying separate zooms.
+ *
+ * Values read in **degrees**, as measured, and each mode carries an inline
+ * reset that clears only itself.
+ */
+
+/** Straighten shares the perspective range here, so one slider serves all three. */
+const MAX_STRAIGHTEN_DEGREES = MAX_PERSPECTIVE_DEGREES
+
+const MODES = [
+  { key: 'vertical', label: 'Vertical' },
+  { key: 'straighten', label: 'Straighten' },
+  { key: 'horizontal', label: 'Horizontal' },
+] as const
+
+type ModeKey = (typeof MODES)[number]['key']
+
+const toRadians = (degrees: number) => (degrees * Math.PI) / 180
+const toDegrees = (radians: number) => (radians * 180) / Math.PI
+
+export function PerspectivePanel() {
+  const { dispatch } = useEditor()
+  const theme = useTheme()
+  const layer = useTargetImageLayer()
+  const [mode, setMode] = useState<ModeKey>('vertical')
+
+  if (!layer) return null
+  const data = layer.data as ImageLayerData
+  const perspective: Perspective = data.perspective ?? { vertical: 0, horizontal: 0 }
+  const straightenDegrees = toDegrees(data.straighten ?? 0)
+
+  /** Every mode expressed as degrees, so one slider can drive all three. */
+  const degreesOf = (key: ModeKey): number =>
+    key === 'straighten'
+      ? straightenDegrees
+      : perspective[key] * MAX_PERSPECTIVE_DEGREES
+
+  const setDegrees = (key: ModeKey, degrees: number) => {
+    if (key === 'straighten') {
+      return dispatch({
+        type: 'layer/patchData',
+        id: layer.id,
+        patch: { straighten: degrees === 0 ? undefined : toRadians(degrees) } as unknown as Record<
+          string,
+          unknown
+        >,
+      })
+    }
+    const next: Perspective = { ...perspective, [key]: degrees / MAX_PERSPECTIVE_DEGREES }
+    dispatch({
+      type: 'layer/patchData',
+      id: layer.id,
+      // `perspectivePatch` deletes the key when both axes reach zero, so
+      // straightening a correction back out leaves nothing serialized.
+      patch: perspectivePatch(needsPerspective(next) ? next : undefined) as unknown as Record<
+        string,
+        unknown
+      >,
+    })
+  }
+
+  const value = degreesOf(mode)
+  const max = mode === 'straighten' ? MAX_STRAIGHTEN_DEGREES : MAX_PERSPECTIVE_DEGREES
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background, paddingBottom: theme.spacing.md }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'center',
+          gap: theme.spacing.sm,
+          paddingVertical: theme.spacing.sm,
+        }}
+      >
+        {MODES.map(({ key, label }) => {
+          const selected = key === mode
+          const degrees = degreesOf(key)
+          const set = Math.abs(degrees) > 0.05
+          return (
+            <Pressable
+              key={key}
+              accessibilityRole="button"
+              accessibilityLabel={`${label} correction`}
+              onPress={() => setMode(key)}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 6,
+                paddingHorizontal: theme.spacing.sm,
+                paddingVertical: 6,
+                borderRadius: theme.radii.sm,
+                borderWidth: 1,
+                borderColor: selected ? theme.colors.accent : theme.colors.track,
+              }}
+            >
+              <Text
+                style={{
+                  color: selected ? theme.colors.accent : theme.colors.textMuted,
+                  fontSize: theme.font.sizeSm,
+                  fontWeight: theme.font.weight,
+                }}
+              >
+                {/* A pill showing the value with its unit once set — the
+                    affordance the research pass measured. */}
+                {set ? `${label} ${degrees.toFixed(1)}°` : label}
+              </Text>
+              {set ? (
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={`Reset ${label.toLowerCase()}`}
+                  onPress={() => setDegrees(key, 0)}
+                  hitSlop={8}
+                >
+                  <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm }}>✕</Text>
+                </Pressable>
+              ) : null}
+            </Pressable>
+          )
+        })}
+      </View>
+
+      <View style={{ paddingHorizontal: theme.spacing.lg }}>
+        <Slider
+          value={value}
+          min={-max}
+          max={max}
+          centered
+          testID={`perspective-${mode}`}
+          valueLabel={`${value > 0 ? '+' : ''}${value.toFixed(1)}°`}
+          onStart={() => dispatch({ type: 'history/beginBatch', label: `perspective-${mode}` })}
+          onChange={(v) => setDegrees(mode, v)}
+          onEnd={() => dispatch({ type: 'history/endBatch' })}
+        />
+      </View>
+    </View>
+  )
+}

package/src/panels/StickerPanel.tsx

@@ -0,0 +1,78 @@
+import { createId, useEditor, type Size } from '@pictor-sdk/core'
+import React from 'react'
+import { Image, Pressable, ScrollView, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+import { useUiState } from '../uiState'
+
+/**
+ * One sticker offered by the panel.
+ *
+ * Supplied by the host: the library ships no sticker artwork, so what appears
+ * here is entirely the app's own.
+ */
+export interface StickerAsset {
+  id: string
+  /** image source (require() result, {uri}, or URL string) */
+  source: unknown
+  intrinsic?: Size
+  label?: string
+}
+
+/**
+ * Sticker tab. Sticker catalogs are host-supplied — pass them via
+ * <Editor stickers={…}> (or replace this panel through a plugin tool Panel).
+ * DECISION: no sticker assets ship with the library (same reasoning as LUTs).
+ */
+export function StickerPanel() {
+  const { dispatch, select } = useEditor()
+  const theme = useTheme()
+  const [stickers] = useUiState<StickerAsset[]>('stickers', [])
+
+  const add = (sticker: StickerAsset) => {
+    const id = createId('sticker')
+    dispatch({
+      type: 'layer/add',
+      layer: {
+        id,
+        type: 'sticker',
+        transform: { x: 0.5, y: 0.5, scale: 1, rotation: 0 },
+        opacity: 1,
+        blendMode: 'normal',
+        data: {
+          source: sticker.source,
+          intrinsic: sticker.intrinsic ?? { width: 0, height: 0 },
+        },
+      },
+    })
+    select([id])
+  }
+
+  if (stickers.length === 0) {
+    return (
+      <View style={{ backgroundColor: theme.colors.background, padding: theme.spacing.md }}>
+        <Text style={{ color: theme.colors.textMuted, textAlign: 'center', fontSize: theme.font.sizeSm }}>
+          No stickers registered — pass `stickers` to {'<Editor>'}.
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ gap: theme.spacing.sm, padding: theme.spacing.md }}
+      style={{ flexGrow: 0, backgroundColor: theme.colors.background }}
+    >
+      {stickers.map((sticker) => (
+        <Pressable key={sticker.id} onPress={() => add(sticker)}>
+          <Image
+            source={sticker.source as never}
+            style={{ width: 64, height: 64, borderRadius: theme.radii.sm, backgroundColor: theme.colors.surface }}
+            resizeMode="contain"
+          />
+        </Pressable>
+      ))}
+    </ScrollView>
+  )
+}