@pictor-sdk/ui 0.1.0

package/src/components/ToolRail.tsx

@@ -0,0 +1,58 @@
+import { useEditor, useTools } from '@pictor-sdk/core'
+import React from 'react'
+import { Pressable, ScrollView, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+
+/** The toolbar IS profile.tools — rendered from the registry, never hardcoded. */
+export function ToolRail() {
+  const { activeTool, setActiveTool, document, selection, dispatch } = useEditor()
+  const tools = useTools()
+  const theme = useTheme()
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{
+        gap: theme.spacing.md,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.md,
+      }}
+      style={{ flexGrow: 0, backgroundColor: theme.colors.background }}
+    >
+      {tools.map((tool) => {
+        const enabled = tool.isEnabled ? tool.isEnabled({ document, selection }) : true
+        const active = activeTool === tool.id
+        return (
+          <Pressable
+            key={tool.id}
+            disabled={!enabled}
+            onPress={() => {
+              if (tool.onActivate) {
+                tool.onActivate({ document, dispatch })
+              } else {
+                setActiveTool(active ? null : tool.id)
+              }
+            }}
+            style={{ width: 72, alignItems: 'center', gap: 6, opacity: enabled ? 1 : 0.4 }}
+          >
+            <View style={{ width: 46, height: 46, borderRadius: 23, borderWidth: 1, borderColor: active ? theme.colors.accent : theme.colors.textMuted, backgroundColor: active ? theme.colors.surface : 'transparent', alignItems: 'center', justifyContent: 'center' }}>
+              <Text style={{ color: active ? theme.colors.accent : theme.colors.text, fontSize: 18 }}>
+                {tool.label.slice(0, 1)}
+              </Text>
+            </View>
+            <Text
+              style={{
+                color: active ? theme.colors.accent : theme.colors.text,
+                fontSize: theme.font.sizeSm,
+                fontWeight: theme.font.weight,
+              }}
+              numberOfLines={1}
+            >
+              {tool.label}
+            </Text>
+          </Pressable>
+        )
+      })}
+    </ScrollView>
+  )
+}

package/src/components/TopBar.tsx

@@ -0,0 +1,53 @@
+import { useEditor } from '@pictor-sdk/core'
+import React from 'react'
+import { ActivityIndicator, Pressable, Text, View } from 'react-native'
+import { useTheme } from '../theme'
+
+/** What the top bar slot receives: the transaction actions and undo state. */
+export interface TopBarProps {
+  onCancel?: () => void
+  onNext?: () => void
+  /** true while an export is running (Next shows a spinner). */
+  busy?: boolean
+}
+
+/** The default top bar: cancel, undo/redo, and the action that ends the session. */
+export function TopBar({ onCancel, onNext, busy = false }: TopBarProps) {
+  const { canUndo, canRedo, dispatch } = useEditor()
+  const theme = useTheme()
+  const button = (label: string, enabled: boolean, onPress?: () => void, color?: string) => (
+    <Pressable disabled={!enabled} onPress={onPress} style={{ padding: theme.spacing.sm }}>
+      <Text
+        style={{
+          color: enabled ? (color ?? theme.colors.text) : theme.colors.textMuted,
+          fontSize: theme.font.size,
+          fontWeight: theme.font.weight,
+        }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  )
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: theme.spacing.sm,
+        backgroundColor: theme.colors.background,
+      }}
+    >
+      {button('Cancel', !!onCancel, onCancel)}
+      <View style={{ flexDirection: 'row' }}>
+        {button('↺', canUndo, () => dispatch({ type: 'history/undo' }))}
+        {button('↻', canRedo, () => dispatch({ type: 'history/redo' }))}
+      </View>
+      {busy ? (
+        <ActivityIndicator color={theme.colors.accent} style={{ padding: theme.spacing.sm }} />
+      ) : (
+        button('Next', !!onNext, onNext, theme.colors.accent)
+      )}
+    </View>
+  )
+}

package/src/composer/TextComposer.tsx

@@ -0,0 +1,540 @@
+import {
+  MAX_TEXT_SIZE,
+  MIN_TEXT_SIZE,
+  fontChoices,
+  useEditor,
+  useEditorStore,
+  type TextLayerData,
+} from '@pictor-sdk/core'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  BackHandler,
+  Keyboard,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  View,
+  type TextInputSelectionChangeEventData,
+  type NativeSyntheticEvent,
+} from 'react-native'
+import { Slider } from '../components/Slider'
+import { useTheme } from '../theme'
+import {
+  composerInsets,
+  fitCanvasRect,
+  HIDDEN_KEYBOARD,
+  type ComposerInsets,
+} from './keyboardLayout'
+import { useTextSession, type TextSessionController } from './useTextSession'
+
+const SWATCHES = ['#ffffff', '#000000', '#ed4956', '#ffe25c', '#78de85', '#4dc4ff', '#a15fed']
+const ALIGNS = ['left', 'center', 'right'] as const
+const ALIGN_GLYPH = { left: '⇤', center: '☰', right: '⇥' } as const
+const FILL_MODES = [undefined, 'solid', 'perLine'] as const
+/** Normalized stroke widths: off, hairline, bold. All fractions of doc width. */
+const STROKE_WIDTHS = [undefined, 0.002, 0.005] as const
+/** Normalized shadow presets: off, soft, hard. */
+const SHADOWS = [
+  undefined,
+  { color: '#000000', blur: 0.012, dx: 0.002, dy: 0.004 },
+  { color: '#000000', blur: 0.002, dx: 0.006, dy: 0.008 },
+] as const
+
+/**
+ * Props a text composer receives.
+ *
+ * The default composer is built on exactly this, so a replacement has
+ * everything the built-in one had — no privileged access to reach for.
+ *
+ * @experimental
+ */
+export interface TextComposerProps {
+  /** The live session: layer, value, style commands, Done and Cancel. */
+  session: TextSessionController
+  /** Where the controls should sit, given the keyboard. */
+  insets: ComposerInsets
+  /** Finish and keep the text. */
+  onDone(): void
+  /** Abandon, restoring the document. */
+  onCancel(): void
+}
+
+/**
+ * The full-screen Story text composer.
+ *
+ * An absolute overlay above the canvas. The canvas keeps rendering the layer
+ * being typed — there is no second text renderer and no editing chrome inside
+ * `renderDocument` — so what is on screen while composing is what exports.
+ *
+ * The `TextInput` itself is invisible and stretched over the canvas: it owns
+ * the caret, the platform selection handles and the IME, while the *visible*
+ * text is the real Skia layer underneath. That is what keeps preview and export
+ * identical without giving up native text editing.
+ *
+ * @experimental
+ */
+export function TextComposer({ session, insets, onDone, onCancel }: TextComposerProps) {
+  const theme = useTheme()
+  const store = useEditorStore()
+  const { document } = useEditor()
+  // Measured rather than taken from `useCanvasMetrics`: that context belongs to
+  // EditorCanvas's children, and the composer is its sibling.
+  const [container, setContainer] = useState({ width: 0, height: 0 })
+  const input = useRef<TextInput>(null)
+  const [selectionRange, setSelectionRange] = useState<{ start: number; end: number } | undefined>(
+    undefined,
+  )
+
+  const data = session.data
+  const span = session.span
+
+  /**
+   * Lay the input out over the text it is editing.
+   *
+   * The visible glyphs are the Skia layer; this input is transparent and only
+   * carries the caret, the selection handles and the IME. For the caret to land
+   * where the user sees their text, the input's own layout has to match the
+   * layer's: same font size in dp, same alignment, and a box centred on the
+   * layer's normalized y. It will never be glyph-exact — Skia and the platform
+   * measure differently — but it tracks closely enough to edit by.
+   */
+  const layout = 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 fonts = useMemo(() => fontChoices(store.registry.fonts), [store.registry.fonts])
+
+  // Focus once the overlay is up. A frame's delay lets the mount settle so the
+  // keyboard animates in rather than appearing half-drawn.
+  useEffect(() => {
+    const handle = setTimeout(() => input.current?.focus(), 50)
+    return () => clearTimeout(handle)
+  }, [])
+
+  const onSelectionChange = useCallback(
+    (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => {
+      setSelectionRange(event.nativeEvent.selection)
+    },
+    [],
+  )
+
+  /**
+   * Apply a style without disturbing the caret.
+   *
+   * Style controls are outside the input, so tapping one would ordinarily blur
+   * it and collapse the selection. Re-focusing and restoring the range keeps
+   * the user where they were — the difference between styling a selection and
+   * losing it.
+   */
+  const keepFocus = useCallback(
+    (apply: () => void) => {
+      apply()
+      if (!input.current?.isFocused()) input.current?.focus()
+      if (selectionRange) {
+        const range = selectionRange
+        requestAnimationFrame(() => input.current?.setNativeProps({ selection: range }))
+      }
+    },
+    [selectionRange],
+  )
+
+  const cycleAlign = () => {
+    if (!data) return
+    const next = ALIGNS[(ALIGNS.indexOf(data.align) + 1) % ALIGNS.length]!
+    keepFocus(() => session.styleText({ align: next }))
+  }
+
+  const cycleFill = () => {
+    if (!data || !span) return
+    const index = FILL_MODES.indexOf(data.fill?.mode as (typeof FILL_MODES)[number])
+    const next = FILL_MODES[(index + 1) % FILL_MODES.length]
+    keepFocus(() =>
+      session.styleText({
+        fill: next
+          ? {
+              color: span.color === '#000000' ? '#ffffff' : '#000000',
+              radius: 0.012,
+              padding: 0.012,
+              mode: next,
+            }
+          : undefined,
+      }),
+    )
+  }
+
+  /**
+   * Cycle the outline. Widths are normalized fractions of document width, like
+   * every other length in the document, so they scale with the export.
+   */
+  const cycleStroke = () => {
+    if (!data || !span) return
+    const current = data.stroke?.width
+    const index = STROKE_WIDTHS.findIndex((w) => w === current)
+    const next = STROKE_WIDTHS[(index + 1) % STROKE_WIDTHS.length]
+    keepFocus(() =>
+      session.styleText({
+        stroke: next
+          ? { color: span.color === '#000000' ? '#ffffff' : '#000000', width: next }
+          : undefined,
+      }),
+    )
+  }
+
+  /** Cycle the drop shadow: off, soft, hard. */
+  const cycleShadow = () => {
+    if (!data) return
+    const current = data.shadow
+    const index = current
+      ? SHADOWS.findIndex((s) => s && current && s.blur === current.blur && s.dx === current.dx)
+      : 0
+    const next = SHADOWS[(index + 1) % SHADOWS.length]
+    keepFocus(() => session.styleText({ shadow: next ? { ...next } : undefined }))
+  }
+
+  // Hardware back dismisses the keyboard first, and only closes the session on
+  // a second press — so a stray back does not discard what was typed.
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      if (Keyboard.isVisible?.() ?? insets.keyboardVisible) {
+        Keyboard.dismiss()
+        return true
+      }
+      onCancel()
+      return true
+    })
+    return () => subscription.remove()
+  }, [onCancel, insets.keyboardVisible])
+
+  const controlRow = {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: theme.spacing.sm,
+    paddingHorizontal: theme.spacing.md,
+  }
+
+  return (
+    <View
+      style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}
+      onLayout={(event) => {
+        const { width, height } = event.nativeEvent.layout
+        setContainer((current) =>
+          current.width === width && current.height === height ? current : { width, height },
+        )
+      }}
+    >
+      {/* Subdues the canvas so the text being typed reads clearly. Preview-only
+          React Native UI — never part of renderDocument, so it cannot export. */}
+      <View
+        pointerEvents="none"
+        style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: '#00000055' }}
+      />
+
+      {/* The invisible editing surface. The visible glyphs are the Skia layer
+          underneath; this owns the caret, selection handles and IME. */}
+      <TextInput
+        ref={input}
+        value={session.value}
+        onChangeText={session.setValue}
+        onSelectionChange={onSelectionChange}
+        multiline
+        // Enter inserts a newline. Without this, a submit blurs the input and
+        // the session ends on the first line break the user types.
+        submitBehavior="newline"
+        // Android draws IME composing text itself, ignoring the transparent
+        // colour below, which ghosts the input's glyphs beside the Skia ones.
+        // Correction, spell-check and autofill are off to keep the composing
+        // region as small as possible.
+        //
+        // DECISION: `keyboardType="visible-password"` suppresses composing
+        // entirely and removes the ghost completely — but it also strips the
+        // emoji key and language switching from the keyboard, which this
+        // milestone needs for emoji and Bengali. A faint composing underline on
+        // the word being typed is the better trade.
+        autoCorrect={false}
+        spellCheck={false}
+        autoComplete="off"
+        importantForAutofill="no"
+        accessibilityLabel="Story text"
+        placeholder=""
+        style={{
+          position: 'absolute',
+          left: layout.left,
+          width: layout.width,
+          top: layout.top,
+          height: layout.height,
+          // Fully transparent glyphs. The Skia layer is what the user reads;
+          // drawing the same text twice would double it on screen. Written as
+          // rgba rather than the 'transparent' keyword because the keyword is
+          // not reliably honoured for TextInput colour on Android.
+          color: 'rgba(0,0,0,0)',
+          fontSize: layout.fontSize,
+          lineHeight: layout.lineHeight,
+          textAlign: data?.align ?? 'center',
+          ...(Platform.OS === 'ios' ? {} : { textAlignVertical: 'center' as const }),
+          padding: 0,
+        }}
+        // The caret and the selection highlight must stay visible even though
+        // the glyphs are not.
+        selectionColor={theme.colors.accent}
+        cursorColor={theme.colors.accent}
+      />
+
+      {/* Top bar: Cancel / Done, above the keyboard-independent area. */}
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          height: 56,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: theme.spacing.lg,
+        }}
+      >
+        <Pressable accessibilityRole="button" accessibilityLabel="Cancel text" onPress={onCancel}>
+          <Text style={{ color: theme.colors.text, fontSize: theme.font.size }}>Cancel</Text>
+        </Pressable>
+        <Pressable accessibilityRole="button" accessibilityLabel="Done editing text" onPress={onDone}>
+          <Text
+            style={{
+              color: theme.colors.accent,
+              fontSize: theme.font.size,
+              fontWeight: theme.font.weight,
+            }}
+          >
+            Done
+          </Text>
+        </Pressable>
+      </View>
+
+      {/* Controls ride the keyboard. The canvas never moves. */}
+      <View
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: insets.bottom,
+          paddingVertical: theme.spacing.sm,
+          gap: theme.spacing.sm,
+          backgroundColor: '#00000066',
+        }}
+      >
+        <View style={controlRow}>
+          <Text
+            style={{ color: theme.colors.textMuted, fontSize: theme.font.sizeSm, width: 34 }}
+            accessibilityLabel="Text size"
+          >
+            Aa
+          </Text>
+          <View style={{ flex: 1 }}>
+            <Slider
+              value={span?.fontSize ?? MIN_TEXT_SIZE}
+              min={MIN_TEXT_SIZE}
+              max={MAX_TEXT_SIZE}
+              centered={false}
+              onChange={(size) => session.setSize(size)}
+            />
+          </View>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Alignment ${data?.align ?? 'center'}`}
+            onPress={cycleAlign}
+            style={{ padding: theme.spacing.sm }}
+          >
+            <Text style={{ color: theme.colors.text, fontWeight: theme.font.weight }}>
+              {ALIGN_GLYPH[data?.align ?? 'center']}
+            </Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Text background"
+            accessibilityState={{ selected: Boolean(data?.fill) }}
+            onPress={cycleFill}
+            style={{ padding: theme.spacing.sm }}
+          >
+            <Text
+              style={{
+                color: data?.fill ? theme.colors.accent : theme.colors.text,
+                fontWeight: theme.font.weight,
+              }}
+            >
+              {data?.fill?.mode === 'perLine' ? 'A⃞⃞' : 'A⃞'}
+            </Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Text outline"
+            accessibilityState={{ selected: Boolean(data?.stroke) }}
+            onPress={cycleStroke}
+            style={{ padding: theme.spacing.sm }}
+          >
+            <Text
+              style={{
+                color: data?.stroke ? theme.colors.accent : theme.colors.text,
+                fontWeight: theme.font.weight,
+              }}
+            >
+              Ⓐ
+            </Text>
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Text shadow"
+            accessibilityState={{ selected: Boolean(data?.shadow) }}
+            onPress={cycleShadow}
+            style={{ padding: theme.spacing.sm }}
+          >
+            <Text
+              style={{
+                color: data?.shadow ? theme.colors.accent : theme.colors.text,
+                fontWeight: theme.font.weight,
+              }}
+            >
+              A˙
+            </Text>
+          </Pressable>
+        </View>
+
+        <ScrollView
+          horizontal
+          keyboardShouldPersistTaps="always"
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: 'center' }}
+          style={{ flexGrow: 0 }}
+        >
+          {fonts.map((font) => (
+            <Pressable
+              key={font.family}
+              accessibilityRole="button"
+              accessibilityLabel={`Font ${font.label}`}
+              accessibilityState={{ selected: span?.fontFamily === font.family }}
+              onPress={() => keepFocus(() => session.styleSpan({ fontFamily: font.family }))}
+              style={{
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.xs,
+                borderRadius: theme.radii.md,
+                backgroundColor:
+                  span?.fontFamily === font.family ? theme.colors.surface : 'transparent',
+                borderWidth: 1,
+                borderColor:
+                  span?.fontFamily === font.family ? theme.colors.accent : theme.colors.track,
+              }}
+            >
+              <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm }}>
+                {font.label}
+              </Text>
+            </Pressable>
+          ))}
+        </ScrollView>
+
+        <ScrollView
+          horizontal
+          keyboardShouldPersistTaps="always"
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ gap: theme.spacing.sm, paddingHorizontal: theme.spacing.md, alignItems: 'center' }}
+          style={{ flexGrow: 0 }}
+        >
+          {SWATCHES.map((color) => (
+            <Pressable
+              key={color}
+              accessibilityRole="button"
+              accessibilityLabel={`Text colour ${color}`}
+              accessibilityState={{ selected: span?.color === color }}
+              onPress={() => keepFocus(() => session.styleSpan({ color }))}
+              style={{
+                width: 28,
+                height: 28,
+                borderRadius: 14,
+                backgroundColor: color,
+                borderWidth: span?.color === color ? 3 : 1,
+                borderColor: span?.color === color ? theme.colors.accent : theme.colors.track,
+              }}
+            />
+          ))}
+        </ScrollView>
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Mounts a text session and the composer for it, and keeps the keyboard inset
+ * up to date. This is what `<Editor>` renders while the text tool is active.
+ *
+ * @experimental
+ */
+export function TextComposerHost({
+  Composer = TextComposer,
+}: {
+  /** Replace the default composer without replacing the canvas or editor. */
+  Composer?: React.ComponentType<TextComposerProps>
+}) {
+  const { setActiveTool } = useEditor()
+  const session = useTextSession()
+  const [frame, setFrame] = useState(HIDDEN_KEYBOARD)
+
+  // A monotonic token so a keyboard event that arrives after this session has
+  // closed cannot resize a later one.
+  const token = useRef(0)
+  useEffect(() => {
+    token.current += 1
+    const mine = token.current
+    const show = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+      (event) => {
+        if (mine !== token.current) return
+        setFrame({ height: event.endCoordinates?.height ?? 0, duration: event.duration })
+      },
+    )
+    const hide = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+      (event) => {
+        if (mine !== token.current) return
+        setFrame({ height: 0, duration: event?.duration })
+      },
+    )
+    return () => {
+      token.current += 1
+      show.remove()
+      hide.remove()
+    }
+  }, [])
+
+  const insets = useMemo(() => composerInsets(frame), [frame])
+
+  const finish = useCallback(
+    (commit: boolean) => {
+      if (commit) session.commit()
+      else session.cancel()
+      Keyboard.dismiss()
+      setActiveTool(null)
+    },
+    [session, setActiveTool],
+  )
+
+  return (
+    <Composer
+      session={session}
+      insets={insets}
+      onDone={() => finish(true)}
+      onCancel={() => finish(false)}
+    />
+  )
+}
+
+/** Narrow re-export so the composer's data type is reachable without deep imports. */
+export type { TextLayerData }