Overview §

Main editor view for creating and editing stories (Funken).

UI §

• Top floating action bars (only one visible at a time):
  • Save Bar (default): (x) and (✔︎) icon buttons (Liquid Glass).
  • Action Controls: context‑specific buttons for the current action (max 2: left and right).
• Canvas (9:16): single page, z‑ordered below top buttons.
  • Vertical overflow: auto scroll when necessary.
  • While moving a foreground container over the bottom edge, the canvas becomes scrollable and auto‑scrolls during movement.
• Bottom action bar:
  • Text, Camera, Gallery (Future), Microphone (Future), Location (Future).

Functionality §

---

Functionality (Trigger-based) §

Trigger: Tap the Save Bar (✔︎)

• Immediately persists the story and enqueues a single render job for that story.
• While rendering, the story is locked on the Main Screen (not openable/shareable); show a progress indicator.
• No concurrent/overlapping renders for the same story; next edit/save only after render completes.
• Grid thumbnail updates when render completes.

Trigger: Tap the Text button or an existing text element

• Show keyboard and edit a text field (transparent background).
• While editing: auto-size width up to canvas width; height grows with content up to 80% of canvas height, then internal vertical scroll; no horizontal scroll.
• Show Action Controls: “Cancel” (discard changes) and “OK” (exit text action and keep text on the canvas).
• Tapping “OK” exits text editing and dismisses the keyboard; committed text is in a resizable, draggable container (min 44x44 pt, max width = canvas width, overflow uses internal vertical scroll, pinch scales container not font size).
• Future: allow starting text edit from an empty canvas spot; tapping outside StoryItem acts like “OK”.

Trigger: Tap the Camera button

• Enter CameraCapture mode (gallery pick photo/video, shutter for photo, flip camera; long-press video in future).
• Show Action Controls: “Cancel” (exit camera action).
• Capture: automatically stops at 60s; no toast.
• Gallery: block selection of videos longer than 60s (prompt to choose another). Trimming is future.

Resizing and overflow

• If content doesn’t fit, enable y-scrolling (no x-scrolling).
• While editing, text auto-sizes up to canvas width and 80% canvas height; after commit, container is resizable and uses internal vertical scroll for overflow.

Orientation/devices

• iPhone only, portrait-only. iPad not targeted in this MVP (hidden on iPad).

Permissions and fallbacks (common defaults)

• Camera denied: inline explainer with “Open Settings”; text-only editing remains available; Photos access (if granted) remains.
• Photos denied: inline explainer; camera (if granted) and text-only remain.
• Microphone denied (future video-with-audio): proceed muted; explain in-line.
• iCloud off or quota exceeded: operate local-first; queue sync; show “Sync paused” indicator; uploads retry automatically; sharing/export still allowed locally.
• Omit low-disk handling for now.

Editor state machine (top bars are mutually exclusive)

• States: View (Edit Button visible), Editing (Save Bar visible).
• Transitions:
  • View → Editing (tap Edit button)
• Edit Button is visible in View; Save Bar is visible in Editing; both are hidden in TextEditing, CameraCapture, and CameraReview.

Technical §

• Containers
  • Foreground elements (currently only Text) are wrapped in a StoryItem container.
  • Background media (image/video) is wrapped in a StoryBackground container.
• StoryItem
  • Resizable, draggable; drag/move, pinch/zoom to scale; size constrained inside canvas.
  • Resize handle at bottom‑right; dotted border when focused.
  • Max width = canvas width; min/max x position stays inside the canvas.
  • Resizing: if content doesn’t fit, enable y‑scrolling (no x‑scrolling).
• StoryBackground
  • Background‑size: cover; videos loop by default.
• Media limits
  • Max video length: 60 seconds; do not allow picking longer videos; stop recording after 60s.