@pictor-sdk/ui 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@pictor-sdk/ui",
+  "version": "0.1.0",
+  "description": "Default slot-based editor UI for Pictor, built entirely on the public headless API.",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "LICENSE",
+    "README.md",
+    "!src/**/*.test.*",
+    "!src/**/__tests__/**",
+    "!dist/**/*.test.*"
+  ],
+  "peerDependencies": {
+    "@shopify/react-native-skia": ">=1.5.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.20.0",
+    "react-native-reanimated": ">=3.16.0",
+    "react-native-worklets": ">=0.5.1",
+    "@pictor-sdk/core": "^0.1.0",
+    "@pictor-sdk/skia": "^0.1.0"
+  },
+  "devDependencies": {
+    "@shopify/react-native-skia": "^2.0.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.1.0",
+    "react-native": "^0.81.0",
+    "react-native-gesture-handler": "^2.28.0",
+    "react-native-reanimated": "^4.1.0",
+    "react-native-worklets": "0.5.1",
+    "@pictor-sdk/core": "0.1.0",
+    "@pictor-sdk/skia": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zahidhasanaunto/pictor.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/zahidhasanaunto/pictor#readme",
+  "bugs": {
+    "url": "https://github.com/zahidhasanaunto/pictor/issues"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/Editor.tsx

@@ -0,0 +1,276 @@
+import {
+  EditorProvider,
+  selectionChromeEnabled,
+  useEditor,
+  type EditorPlugin,
+  type EditorProfile,
+  type EditorDocument,
+  type ExportSpec,
+  type InsertableImage,
+  type Size,
+} from '@pictor-sdk/core'
+import { EditorCanvas } from '@pictor-sdk/skia'
+import React, { useState, type ComponentType, type ReactNode } from 'react'
+import { View } from 'react-native'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import { HostCallbacksProvider } from './hostCallbacks'
+import { DrawingSurface } from './gestures/DrawingSurface'
+import { CropGestureSurface } from './gestures/CropGestureSurface'
+import { TiltShiftGestureSurface } from './gestures/TiltShiftGestureSurface'
+import { CropGrid } from './gestures/CropGrid'
+import { InteractionProvider, useInteractionState } from './gestures/interactionState'
+import { LayerGestureSurface } from './gestures/LayerGestureSurface'
+import { StoryMediaGestureSurface } from './gestures/StoryMediaGestureSurface'
+import { resolveGestureSurface } from './gestures/routing'
+import { InteractionGuides } from './gestures/InteractionGuides'
+import { UiStateProvider, useUiState } from './uiState'
+import { type StickerAsset } from './panels/StickerPanel'
+import { ThemeContext, mergeTheme, useTheme, type PartialTheme } from './theme'
+import { ToolPanelHost } from './ToolPanelHost'
+import { TextComposer, TextComposerHost, type TextComposerProps } from './composer/TextComposer'
+import { TopBar, type TopBarProps } from './components/TopBar'
+import { ToolRail } from './components/ToolRail'
+
+/**
+ * Every region of the default editor is a slot: pass your own component to
+ * replace it, or null to remove it. All slots are built exclusively on the
+ * public headless hooks — replacing one can never break the others.
+ */
+export interface EditorSlots {
+  TopBar: ComponentType<TopBarProps> | null
+  CanvasStage: ComponentType<CanvasStageProps> | null
+  ToolRail: ComponentType | null
+  ToolPanelHost: ComponentType | null
+  /**
+   * The full-screen text composer, shown while the `text` tool is active.
+   *
+   * Replace it to ship your own composition UI without replacing the canvas or
+   * the editor; it receives everything the default one gets. `null` removes it,
+   * leaving text editing to a host-built surface.
+   *
+   * @experimental
+   */
+  TextComposer: ComponentType<TextComposerProps> | null
+}
+
+/** What the canvas slot receives. Children draw over the canvas, in its coordinates. */
+export interface CanvasStageProps {
+  children?: ReactNode
+  /** Reported when a layer's image source fails to load. */
+  onError?: (error: unknown) => void
+}
+
+/**
+ * The canvas plus whichever gesture surface the active tool calls for.
+ *
+ * Exactly one surface is mounted at a time — precedence lives in
+ * `resolveGestureSurface`, not in this JSX — so two recognisers can never
+ * arbitrate over the same touch.
+ */
+export function CanvasStage({ children, onError }: CanvasStageProps) {
+  const { activeTool, profile } = useEditor()
+  const { previews } = useInteractionState()
+  const surface = resolveGestureSurface(activeTool)
+  return (
+    <EditorCanvas
+      style={{ flex: 1 }}
+      onError={onError}
+      previewTransforms={previews}
+      showSelectionChrome={selectionChromeEnabled(profile)}
+    >
+      {/* exactly one surface owns the canvas; precedence is resolveGestureSurface */}
+      {surface === 'draw' ? (
+        <DrawingSurface />
+      ) : surface === 'crop' ? (
+        <>
+          <CropGestureSurface />
+          <CropGrid />
+        </>
+      ) : surface === 'tilt' ? (
+        <TiltShiftGestureSurface />
+      ) : surface === 'media' ? (
+        <StoryMediaGestureSurface />
+      ) : (
+        <>
+          <LayerGestureSurface />
+          <InteractionGuides />
+        </>
+      )}
+      {children}
+    </EditorCanvas>
+  )
+}
+
+/**
+ * What `<Editor>` accepts: a profile, its plugins, a document or a source, and
+ * any slots or theme you want to replace.
+ */
+export interface EditorProps {
+  profile: EditorProfile
+  plugins?: EditorPlugin[]
+  /** Image source for a fresh document (or pass initialDocument). */
+  source?: unknown
+  intrinsic?: Size
+  initialDocument?: EditorDocument
+  onExport?: (bytes: Uint8Array) => void | Promise<void>
+  onCancel?: () => void
+  onError?: (error: unknown) => void
+  exportSpec?: Partial<ExportSpec>
+  slots?: Partial<EditorSlots>
+  theme?: PartialTheme
+  /** Host-supplied sticker catalog for the built-in sticker panel. */
+  stickers?: StickerAsset[]
+  /**
+   * Asked to supply photos when the user presses the add-photo control.
+   *
+   * The library never touches the gallery: permissions, the picker and any
+   * HEIC/HEIF transcoding stay with the host, which is what keeps it free of
+   * Expo and of native code. Resolve `null` or `[]` for cancellation, which
+   * adds nothing. Omit it and the control renders unavailable rather than
+   * throwing.
+   *
+   * @experimental
+   */
+  requestImages?: () => Promise<readonly InsertableImage[] | null>
+}
+
+/** Merge slot overrides over the defaults. Pure — unit tested. */
+export function mergeSlots(overrides?: Partial<EditorSlots>): EditorSlots {
+  return {
+    TopBar,
+    CanvasStage,
+    ToolRail,
+    ToolPanelHost,
+    TextComposer,
+    ...overrides,
+  }
+}
+
+function EditorBody({
+  slots,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  stickers,
+}: Pick<EditorProps, 'onExport' | 'onCancel' | 'onError' | 'exportSpec' | 'stickers'> & {
+  slots: EditorSlots
+}) {
+  const { export: exportDoc, activeTool } = useEditor()
+  const { layerDragActive } = useInteractionState()
+  const [, setStickers] = useUiState<StickerAsset[]>('stickers', [])
+  React.useEffect(() => {
+    if (stickers) setStickers(stickers)
+  }, [stickers, setStickers])
+  const theme = useTheme()
+  const [busy, setBusy] = useState(false)
+
+  const handleNext = onExport
+    ? async () => {
+        setBusy(true)
+        try {
+          const bytes = await exportDoc(exportSpec)
+          await onExport(bytes)
+        } catch (error) {
+          onError?.(error)
+        } finally {
+          setBusy(false)
+        }
+      }
+    : undefined
+
+  const {
+    TopBar: Top,
+    CanvasStage: Stage,
+    ToolRail: Rail,
+    ToolPanelHost: PanelHost,
+    TextComposer: Composer,
+  } = slots
+  // The composer is full-screen and owns the whole interaction, so the ordinary
+  // chrome and the tool panel stand down while it is up rather than competing
+  // with it for the keyboard and for taps.
+  const composing = activeTool === 'text' && Composer !== null
+  // While a layer is being dragged the editing chrome gets out of the way, so
+  // the canvas and the delete target are all that is on screen.
+  //
+  // It is hidden with opacity rather than unmounted on purpose: unmounting
+  // would hand the freed space to the canvas, which resizes it mid-gesture and
+  // moves the ground under the interaction. Keeping the boxes in the layout
+  // holds the canvas metrics still for the whole drag.
+  const chrome = !layerDragActive
+  const hidden = { opacity: chrome ? 1 : 0 }
+  const hits = chrome ? 'auto' : ('none' as const)
+  return (
+    // GestureDetector requires a GestureHandlerRootView ancestor; providing it
+    // here means consumers never have to know (nesting under an app-level one
+    // is harmless).
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
+        {Top && !composing ? (
+          <View style={hidden} pointerEvents={hits}>
+            <Top onCancel={onCancel} onNext={handleNext} busy={busy} />
+          </View>
+        ) : null}
+        {Stage ? <Stage onError={onError} /> : null}
+        {PanelHost && !composing ? (
+          <View style={hidden} pointerEvents={hits}>
+            <PanelHost />
+          </View>
+        ) : null}
+        {Rail && !activeTool ? (
+          <View style={hidden} pointerEvents={hits}>
+            <Rail />
+          </View>
+        ) : null}
+        {composing && Composer ? <TextComposerHost Composer={Composer} /> : null}
+      </View>
+    </GestureHandlerRootView>
+  )
+}
+
+/**
+ * The batteries-included editor. `<Editor profile={POST_PROFILE} … />` gives
+ * the full IG-style flow; every part is replaceable via `slots`.
+ */
+export function Editor({
+  profile,
+  plugins,
+  source,
+  intrinsic,
+  initialDocument,
+  onExport,
+  onCancel,
+  onError,
+  exportSpec,
+  slots,
+  theme,
+  stickers,
+  requestImages,
+}: EditorProps) {
+  return (
+    <EditorProvider
+      profile={profile}
+      plugins={plugins}
+      source={source}
+      intrinsic={intrinsic}
+      initialDocument={initialDocument}
+    >
+      <ThemeContext.Provider value={mergeTheme(theme)}>
+        <UiStateProvider>
+          <HostCallbacksProvider value={{ requestImages, onError }}>
+            <InteractionProvider>
+              <EditorBody
+                slots={mergeSlots(slots)}
+                onExport={onExport}
+                onCancel={onCancel}
+                onError={onError}
+                exportSpec={exportSpec}
+                stickers={stickers}
+              />
+            </InteractionProvider>
+          </HostCallbacksProvider>
+        </UiStateProvider>
+      </ThemeContext.Provider>
+    </EditorProvider>
+  )
+}

package/src/ToolPanelHost.tsx

@@ -0,0 +1,98 @@
+import { useEditor, useTools, type ToolPanelProps } from '@pictor-sdk/core'
+import React, { useEffect, useRef, type ComponentType } from 'react'
+import { Pressable, Text, View } from 'react-native'
+import { useTheme } from './theme'
+import { AdjustPanel } from './panels/AdjustPanel'
+import { AddPhotoPanel } from './panels/AddPhotoPanel'
+import { ColorPanel } from './panels/ColorPanel'
+import { CropPanel } from './panels/CropPanel'
+import { DrawPanel } from './panels/DrawPanel'
+import { FilterStrip } from './panels/FilterStrip'
+import { LayoutPanel } from './panels/LayoutPanel'
+import { LuxPanel } from './panels/LuxPanel'
+import { MediaPanel } from './panels/MediaPanel'
+import { LayersPanel } from './panels/LayersPanel'
+import { PerspectivePanel } from './panels/PerspectivePanel'
+import { StickerPanel } from './panels/StickerPanel'
+import { TiltShiftPanel } from './panels/TiltShiftPanel'
+
+/**
+ * Built-in panels for the built-in tool ids. Pure — unit tested.
+ *
+ * `text` deliberately has no panel: the text tool is served by the full-screen
+ * composer slot, which owns its own controls. Leaving a panel here would open a
+ * second history batch alongside the composer's and render a bottom sheet
+ * underneath it.
+ */
+export function resolvePanel(
+  toolId: string | null,
+  pluginPanel: unknown,
+  builtins: Record<string, ComponentType> = BUILTIN_PANELS,
+): ComponentType<Partial<ToolPanelProps>> | null {
+  if (!toolId) return null
+  if (pluginPanel) return pluginPanel as ComponentType<Partial<ToolPanelProps>>
+  return (builtins[toolId] as ComponentType<Partial<ToolPanelProps>>) ?? null
+}
+
+export const BUILTIN_PANELS: Record<string, ComponentType> = {
+  media: MediaPanel,
+  addPhoto: AddPhotoPanel,
+  filter: FilterStrip,
+  adjust: AdjustPanel,
+  lux: LuxPanel,
+  color: ColorPanel,
+  tilt: TiltShiftPanel,
+  perspective: PerspectivePanel,
+  crop: CropPanel,
+  draw: DrawPanel,
+  sticker: StickerPanel,
+  layout: LayoutPanel,
+  layers: LayersPanel,
+}
+
+/** Renders the active tool's panel — plugin-provided Panel wins over built-ins. */
+export function ToolPanelHost() {
+  const { activeTool, document, selection, dispatch, setActiveTool } = useEditor()
+  const tools = useTools()
+  const tool = tools.find((t) => t.id === activeTool)
+  const Panel = resolvePanel(activeTool, tool?.Panel)
+  const theme = useTheme()
+  const finalized = useRef(false)
+
+  useEffect(() => {
+    if (!activeTool || !Panel) return
+    finalized.current = false
+    dispatch({ type: 'history/beginBatch', label: activeTool })
+    return () => {
+      if (!finalized.current) dispatch({ type: 'history/cancelBatch' })
+    }
+  }, [activeTool, Panel, dispatch])
+
+  if (!Panel) return null
+  const done = () => {
+    finalized.current = true
+    dispatch({ type: 'history/endBatch' })
+    setActiveTool(null)
+  }
+  const cancel = () => {
+    finalized.current = true
+    dispatch({ type: 'history/cancelBatch' })
+    setActiveTool(null)
+  }
+  return (
+    <View style={{ backgroundColor: theme.colors.background, borderTopLeftRadius: theme.radii.lg, borderTopRightRadius: theme.radii.lg, overflow: 'hidden' }}>
+      <Panel document={document} selection={selection} dispatch={dispatch} close={done} />
+      <View style={{ height: 52, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderTopWidth: 1, borderTopColor: theme.colors.track, paddingHorizontal: theme.spacing.lg }}>
+        <Pressable accessibilityRole="button" accessibilityLabel="Cancel edits" onPress={cancel}>
+          <Text style={{ color: theme.colors.text, fontSize: theme.font.size }}>Cancel</Text>
+        </Pressable>
+        <Text style={{ color: theme.colors.text, fontSize: theme.font.size, fontWeight: theme.font.weight }}>
+          {tool?.label ?? activeTool}
+        </Text>
+        <Pressable accessibilityRole="button" accessibilityLabel="Apply edits" onPress={done}>
+          <Text style={{ color: theme.colors.accent, fontSize: theme.font.size, fontWeight: theme.font.weight }}>Done</Text>
+        </Pressable>
+      </View>
+    </View>
+  )
+}

package/src/components/Slider.tsx

@@ -0,0 +1,172 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { Text, View, type LayoutChangeEvent } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import { useTheme } from '../theme'
+
+/**
+ * A slider's value and range.
+ *
+ * `centered` is the adjustment shape — `-1..1` resting in the middle with a
+ * detent at zero. A quantity with no meaningful negative (Lux, tint strength,
+ * blur) uses `min: 0` and `centered: false` instead, which is the control shape
+ * measured on the reference editor.
+ */
+export interface SliderProps {
+  /** -1..1 when centered, 0..1 otherwise */
+  value: number
+  min?: number
+  max?: number
+  /** show a centre detent and snap to 0 within ±0.05 (adjustment sliders) */
+  centered?: boolean
+  onStart?: () => void
+  onChange: (value: number) => void
+  onEnd?: () => void
+  testID?: string
+  /** Floating value label shown above the thumb. */
+  valueLabel?: string
+  /**
+   * Inert and dimmed. For a control whose value has nothing meaningful to
+   * write yet — dragging it would record something untrue.
+   */
+  disabled?: boolean
+}
+
+/** Snap a centered slider value into its detent. Pure — unit tested. */
+export function applyDetent(value: number, centered: boolean, width = 0.05): number {
+  if (centered && Math.abs(value) < width) return 0
+  return value
+}
+
+/** Dependency-free horizontal slider with an optional centre detent. */
+export function Slider({
+  value,
+  min = -1,
+  max = 1,
+  centered = true,
+  onStart,
+  onChange,
+  onEnd,
+  testID,
+  valueLabel,
+  disabled = false,
+}: SliderProps) {
+  const theme = useTheme()
+  const [width, setWidth] = useState(0)
+  const widthRef = useRef(0)
+  const startValue = useRef(value)
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setWidth(e.nativeEvent.layout.width)
+    widthRef.current = e.nativeEvent.layout.width
+  }
+
+  const handlers = useMemo(() => {
+    const begin = () => {
+      startValue.current = valueRef.current
+      onStart?.()
+    }
+    const update = (tx: number) => {
+      const w = widthRef.current
+      if (w === 0) return
+      const range = max - min
+      const raw = startValue.current + (tx / w) * range
+      const clamped = Math.min(max, Math.max(min, raw))
+      onChange(applyDetent(clamped, centered && min < 0))
+    }
+    const finish = () => onEnd?.()
+    return { begin, update, finish }
+  }, [min, max, centered, onChange, onStart, onEnd])
+
+  const gesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(!disabled)
+        .onStart(() => {
+          'worklet'
+          runOnJS(handlers.begin)()
+        })
+        .onUpdate((e) => {
+          'worklet'
+          runOnJS(handlers.update)(e.translationX)
+        })
+        .onFinalize(() => {
+          'worklet'
+          runOnJS(handlers.finish)()
+        }),
+    [handlers, disabled],
+  )
+
+  const t = (value - min) / (max - min)
+  const thumbX = width * t
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        testID={testID}
+        onLayout={onLayout}
+        style={{
+          height: valueLabel ? 58 : 36,
+          justifyContent: 'flex-end',
+          paddingBottom: 9,
+          opacity: disabled ? 0.4 : 1,
+        }}
+      >
+        {valueLabel ? (
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: Math.max(0, Math.min(width - 44, thumbX - 22)),
+              width: 44,
+              alignItems: 'center',
+              paddingVertical: 3,
+              borderRadius: 10,
+              backgroundColor: theme.colors.surface,
+            }}
+          >
+            <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm }}>{valueLabel}</Text>
+          </View>
+        ) : null}
+        <View style={{ height: 2, borderRadius: 1, backgroundColor: theme.colors.track }} />
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 9,
+            left: centered && min < 0 ? Math.min(width / 2, thumbX) : 0,
+            width: centered && min < 0 ? Math.abs(thumbX - width / 2) : thumbX,
+            height: 2,
+            borderRadius: 1,
+            backgroundColor: theme.colors.accent,
+          }}
+        />
+        {centered && min < 0 ? (
+          <View
+            style={{
+              position: 'absolute',
+              left: width / 2 - 1,
+              width: 2,
+              height: 10,
+              backgroundColor: theme.colors.textMuted,
+            }}
+          />
+        ) : null}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: 1,
+            left: Math.max(0, Math.min(width - 18, thumbX - 9)),
+            width: 18,
+            height: 18,
+            borderRadius: 9,
+            backgroundColor: theme.colors.thumb,
+          }}
+        />
+      </Animated.View>
+    </GestureDetector>
+  )
+}

package/src/components/StraightenRuler.tsx

@@ -0,0 +1,57 @@
+import React, { useMemo, useRef } from 'react'
+import { Text, View } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
+import Animated from 'react-native-reanimated'
+import { runOnJS } from 'react-native-worklets'
+import { useTheme } from '../theme'
+
+/** The straighten dial: a value in -1..1 and the callbacks bracketing a drag. */
+export interface StraightenRulerProps {
+  value: number
+  min?: number
+  max?: number
+  onStart?: () => void
+  onChange(value: number): void
+  onEnd?: () => void
+}
+
+const PX_PER_DEGREE = 60
+
+/** Fine, zero-snapping ruler for angle correction. Values are degrees. */
+export function StraightenRuler({ value, min = -45, max = 45, onStart, onChange, onEnd }: StraightenRulerProps) {
+  const theme = useTheme()
+  const start = useRef(value)
+  const current = useRef(value)
+  current.current = value
+  const handlers = useMemo(() => ({
+    begin: () => { start.current = current.current; onStart?.() },
+    update: (translationX: number) => {
+      const raw = Math.min(max, Math.max(min, start.current - translationX / PX_PER_DEGREE))
+      onChange(Math.abs(raw) < 0.15 ? 0 : raw)
+    },
+    finish: () => onEnd?.(),
+  }), [min, max, onStart, onChange, onEnd])
+  const gesture = useMemo(() => Gesture.Pan()
+    .onStart(() => { 'worklet'; runOnJS(handlers.begin)() })
+    .onUpdate((event) => { 'worklet'; runOnJS(handlers.update)(event.translationX) })
+    .onFinalize(() => { 'worklet'; runOnJS(handlers.finish)() }), [handlers])
+
+  const rounded = Math.round(value * 10) / 10
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={{ height: 76, overflow: 'hidden', justifyContent: 'flex-end' }}>
+        <View style={{ position: 'absolute', top: 0, alignSelf: 'center', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12, backgroundColor: theme.colors.surface }}>
+          <Text style={{ color: theme.colors.text, fontSize: theme.font.sizeSm }}>{rounded.toFixed(1)}°</Text>
+        </View>
+        <View style={{ height: 34, flexDirection: 'row', justifyContent: 'center', alignItems: 'flex-end', gap: 8 }}>
+          {Array.from({ length: 31 }, (_, index) => {
+            const offset = index - 15
+            const major = offset % 5 === 0
+            return <View key={offset} style={{ width: 1, height: major ? 22 : 11, backgroundColor: offset === 0 ? theme.colors.accent : theme.colors.textMuted }} />
+          })}
+        </View>
+        <View style={{ position: 'absolute', bottom: 0, left: '50%', width: 2, height: 30, backgroundColor: theme.colors.accent }} />
+      </Animated.View>
+    </GestureDetector>
+  )
+}