Skip to content

SceneFlow v2.3.1: Visual Theme Ergonomics, Dynamic CVD Theming, & Platform Navigation

Choose a tag to compare

View all tags
@taruma taruma released this 10 Sep 23:21
· 87 commits to main since this release
v2.3.1
9e4fc7d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

SceneFlow v2.3.1 is a targeted ergonomics, accessibility hardening, visual design system refinement, and platform navigation release following the landmark v2.3.0 Multi-Track Sync Timeline milestone.

This release redesigns the desktop Screenplay Visual Themes Modal into a compact zero-scroll 2-column layout with top-tier unified controls, completes the dynamic cue palette and Color Vision Deficiency (CVD) profile resolution across the Auto-Scroll Focus Mode dropdown and Timing Settings modal, unifies Auto-Scroll split button geometry and uppercase screenplay typography, introduces translucent accent panels for Dark Mode master offset contrast, integrates the official Substack introduction deep dive across the navigation shell, synchronizes the Starter Guide tutorial project to modern timeline capabilities, and registers the new Vector Field [AI Scenes] example project.

🌟 Highlights

  • 🎨 Compact 2-Column Screenplay Visual Themes Modal (src/components/ScriptColorModal.tsx): Redesigned desktop theme presets grid from 3 columns to a widescreen 2-column layout (grid-cols-1 sm:grid-cols-2), eliminating vertical viewport scrolling on standard desktop monitors.
  • 🎛️ Consolidated Top-Tier Theme Controls: Repositioned the Pure Black Canvas (Video Overlay Mode) toggle from the modal footer up to the top header tier alongside the Cue Palette Accessibility Profile selector into a unified 2-column options bar.
  • ✨ Collision-Free Selection Indicators: Relocated the theme selection checkmark indicator into natural flex flow beside the theme badge ([LIGHT] [✓]), permanently resolving checkmark occlusion over theme badges.
  • ♿ Dynamic Cue Palette & CVD Profile Synchronization (src/components/ScriptHeaderControls.tsx, src/components/TimingSettingsModal.tsx): Replaced static fallback classes (bg-.../50) with getCueColorForTheme (themed.dotColor), ensuring category indicator dots dynamically reflect the active script theme and Protanopia/Deuteranopia safe mode with active selection white rings (ring-1 ring-white/40).
  • 📐 Auto-Scroll Split Button Geometry Alignment: Replaced parent items-center with items-stretch and centered the chevron icon, eliminating the height step lip between toggle and dropdown halves while unifying active bg-blue-500 backgrounds with a crisp 1px inner divider.
  • 📱 Viewport-Safe Auto-Scroll Dropdown: Updated UI_TOKENS.dropdown.menu from right-0 to left-0 (with explicit menuLeft and menuRight tokens), preventing the Auto-Scroll Focus Mode menu from expanding offscreen on mobile viewports.
  • 🔤 Screenplay Cue Nomenclature & Typography: Replaced CSS capitalize with uppercase tracking-wider for Focus Mode category labels, matching industry screenplay formatting (ALL CAPS) and eliminating the title-case acronym artifact ("Vfx" $\to$ "VFX").
  • 📱 Streamlined Mobile Header Density: Replaced the text-and-label Theme button in ScriptHeaderControls.tsx with a compact icon-only button (<Palette size={12} />), reclaiming ~35px of horizontal toolbar width.
  • 🌓 Master Offset Translucent Accent Card (src/styles/tokens/ui.ts, src/components/TimingSettingsModal.tsx): Replaced static light-mode white containers (bg-blue-50 border-2 border-blue-100) with centralized alpha-translucent token UI_TOKENS.panel.accentCardBlue (bg-blue-500/10 border border-blue-500/20), eliminating blinding contrast glare in Dark and Pure Black modes.
  • 📰 Substack Introduction Deep-Dive Integration (src/constants/links.ts, src/components/AppHeader.tsx, src/components/AppInfoModal.tsx): Integrated direct links to the official deep-dive article (Introducing SceneFlow: Script-to-Screen Synchronization) on Substack (Grounded Hallucinations by Taruma Sakti) via desktop header [Article] pill, mobile newspaper icon, and a hero Featured Article Card in AppInfoModal.
  • 🎬 New AI Scene: Vector Field (scene_vector_field): Added a high-concept cyberpunk sci-fi AI Scene generated with Seedance 2.0 featuring 32 frame-synchronized cues and registered in the catalogue.
  • 📖 Synchronized Starter Tutorial & Guide Reference (public/examples/blank.json, docs/_dropbox/guide.txt): Fully updated tutorial project and documentation to reflect modern v2.3.0+ timeline features, re-anchoring 100+ cue character offsets for frame-accurate timeline synchronization.

🔍 Key Changes in v2.3.1

1. 🎨 Screenplay Visual Themes Modal Redesign (src/components/ScriptColorModal.tsx)

The desktop theme management dialog has been redesigned for superior ergonomics, zero vertical scrolling, and uncluttered visual hierarchy:

┌────────────────────────────────────────────────────────────────────────┐
│               SCREENPLAY VISUAL THEMES MODAL (v2.3.1)                  │
├────────────────────────────────────────────────────────────────────────┤
│ [Palette Icon] Screenplay Visual Themes          [Themes] [Inspector]  │
├────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────┬─────────────────────────────────┐ │
│ │ CUE PALETTE ACCESSIBILITY        │ PURE BLACK CANVAS (OVERLAY)     │ │
│ │ [ Standard Cinema | Protan Safe] │ [●] Absolute #000000 & No Halo  │ │
│ └──────────────────────────────────┴─────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────┬─────────────────────────────────┐ │
│ │ [LIGHT] [✓ Active]  Studio Crisp │ [WARM]  Warm Parchment          │ │
│ │ High-contrast clean paper        │ Soft cream reading tone         │ │
│ │ ┌──────────────────────────────┐ │ ┌─────────────────────────────┐ │ │
│ │ │ EXT. CYBERPUNK PLAZA - NIGHT │ │ │ EXT. CYBERPUNK PLAZA - NIGHT│ │ │
│ │ │ Neon rain falls over asphalt.│ │ │ Neon rain falls over asphalt│ │ │
│ │ └──────────────────────────────┘ │ └─────────────────────────────┘ │ │
│ ├──────────────────────────────────┼─────────────────────────────────┤ │
│ │ [DARK]  Midnight Slate           │ [DARK]  OLED Blackout           │ │
│ ├──────────────────────────────────┼─────────────────────────────────┤ │
│ │ [DARK]  Navy Slate               │ [WARM]  Newsprint               │ │
│ └──────────────────────────────────┴─────────────────────────────────┘ │
├────────────────────────────────────────────────────────────────────────┤
│ Active Theme: Studio Crisp • Light • 8 Elements Defined                │
└────────────────────────────────────────────────────────────────────────┘
  • Compact 2-Column Responsive Grid: Transitioned from a 3-column layout (lg:grid-cols-3) to a balanced 2-column grid (grid-cols-1 sm:grid-cols-2), giving each preset card generous horizontal breathing room while fitting all 6 presets comfortably within standard 1080p and laptop viewports without scrolling.
  • Consolidated Top-Tier Dual Controls: Moved the Pure Black Canvas (Video Overlay Mode) toggle from the bottom footer of the modal up to the top options tier directly alongside the Cue Palette Accessibility Profile selector. Both workspace options now sit side-by-side in a unified 2-column configuration panel with clear descriptive subtitles.
  • Collision-Free Selection Checkmark: Resolved a layout collision where the selected checkmark indicator (absolute top-2 right-2) collided with and obscured the right edge of theme category badges (LIGHT, DARK, WARM). Moved the checkmark indicator into natural flex flow directly adjacent to the category badge ([CATEGORY] [✓]).
  • Precision Density Tuning: Tightened padding across modal headers (px-4 py-3 sm:px-6 sm:py-3.5), tabs, body spacing (p-3.5 sm:p-4 space-y-3), swatch cards (p-2.5 sm:p-3), single-line descriptions (line-clamp-1), live script preview paper (p-2 text-[9px]), and active summary strip.

2. ♿ Dynamic Cue Palette & CVD Accessibility Profile Synchronization

SceneFlow v2.3.1 completes the architectural wiring of the v2.3.0 cue palette overhaul by eliminating static fallback color classes across all remaining UI dropdowns and modals:

Surface / Component Before (Static Fallback) v2.3.1 Dynamic Resolution Contrast Hardening
Auto-Scroll Focus Dropdown (ScriptHeaderControls.tsx) Static color.class (bg-.../50) with 50% opacity Dynamic getCueColorForTheme (themed.dotColor) Added ring-1 ring-white/40 on active selection to prevent washout on primary blue
Timing Settings Category Grid (TimingSettingsModal.tsx) Static color.class (bg-.../50) Dynamic getCueColorForTheme (themed.dotColor) Dynamic script theme & CVD profile synchronization
Dot Geometry Varied ad-hoc classes Standardized w-2 h-2 rounded-full shrink-0 shadow-2xs Razor-sharp circular geometry with subtle shadow
  • Theme & CVD Invariant Compliance: Category dots now dynamically reflect both the active script theme paper tone and the active Cue Palette Accessibility Profile (Standard Cinema vs Protan & Deutan Safe Mode). For example, when Protanopia mode is active, the Shot category dot instantly transitions from Deep Iris to Deep Wine / Burgundy inside the Auto-Scroll dropdown and Timing Settings modal.
  • Active State Contrast Preservation: Category dots rendered inside the Auto-Scroll Focus Mode menu now feature an active white ring (ring-1 ring-white/40) when selected, preventing darker hues from washing out against the primary blue (bg-blue-500) selection background.

3. 🎛️ Auto-Scroll Split Button Geometry & Screenplay Typography

Before (v2.3.0):
┌─────────────────────────┬───────┐
│ ⟳ Auto-Scroll: Dialogue │   ▼   │  <-- Stepped lip height mismatch & two-tone contrast
└─────────────────────────┴───────┘
  [ Dropdown clips offscreen to left on mobile ]

After (v2.3.1):
┌─────────────────────────┬───┬───┐
│ ⟳ Auto-Scroll: ALL CUES │ | │ ▼ │  <-- Equal height (items-stretch), unified bg-blue-500, 1px divider
└─────────────────────────┴───┴───┘
└─► [ Left-anchored dropdown menu stays fully within viewport ]
  • Split Button Height Matching: Replaced parent container items-center with items-stretch and centered the chevron icon (flex items-center justify-center), ensuring both button segments stretch to identical heights and eliminate unsightly stepped lips.
  • Unified Palette & Inner Divider: Unified active backgrounds (bg-blue-500) and borders across both buttons to eliminate jarring two-tone contrast, adding a crisp 1px inner divider (border-l border-blue-400/40) between halves.
  • Viewport-Safe Dropdown Alignment: Updated UI_TOKENS.dropdown.menu from right-0 to left-0 (and introduced explicit menuLeft and menuRight tokens in src/styles/tokens/ui.ts). This ensures the Auto-Scroll Focus Mode menu drops down aligned to the button's left edge and remains completely visible on mobile displays without offscreen clipping.
  • Uppercase Screenplay Typography: Replaced CSS capitalize with uppercase tracking-wider for category labels in the Focus Mode dropdown, aligning with standard screenplay conventions (ALL CAPS sluglines and cues) and resolving title-casing acronym anomalies (e.g. ensuring VFX renders properly as "VFX" rather than "Vfx").
  • Mobile Header Toolbar Density: Converted the mobile Theme trigger in ScriptHeaderControls.tsx from a text-and-icon button (<Palette size={10} /> Theme) into a clean icon-only button (<Palette size={12} />), reclaiming ~35px of horizontal space and creating parity with the Ko-fi support pill.

4. 🌓 Timing Settings Master Offset Translucent Accent Card

In v2.3.0, the "General Master Offset" panel in TimingSettingsModal.tsx used hardcoded light-mode classes (bg-blue-50 border-2 border-blue-100), which produced an inverted contrast glare in Dark Mode: a blinding pale white box containing pitch-black input boxes (bg-surface).

  • Centralized Translucent Token (UI_TOKENS.panel.accentCardBlue): Replaced hardcoded fills with p-6 bg-blue-500/10 border border-blue-500/20 rounded-3xl space-y-4. This produces a gentle ambient blue accent wash in Light/Warm modes and illuminates as a sleek, low-glare dark navy container in Dark and Pure Black modes.
  • Hardened Input Border Token (UI_TOKENS.input.numberBoxLg): Replaced border-2 border-blue-100 with theme-calibrated border border-blue-500/30 focus:border-blue-500, ensuring crisp definition without harsh white outlines on dark surfaces.
  • Harmonized Typography: Aligned master offset header text to text-blue-500 and helper notes to text-text-muted italic for guaranteed legibility across all application shell themes.

5. 📰 Platform Navigation & Substack Introduction Deep Dive

┌────────────────────────────────────────────────────────────────────────┐
│                          GLOBAL APP HEADER                             │
├────────────────────────────────────────────────────────────────────────┤
│ [SceneFlow Logo]   [Article ↗]  [Guide]  [Library]  [☕ Support]  ...   │
└────────────────────────────────────────────────────────────────────────┘
  • Centralized External Links (src/constants/links.ts): Unified all external links (article, articleTitle, kofi, github, docs, changelog, author) in a single source of truth to eliminate scattered hardcoded URLs.
  • Desktop Header Action Pill (AppHeader.tsx): Added an [Article] action pill to the left of [Guide], styled strictly with UI_TOKENS.button.actionPill and responsive collapsing (<span className="hidden xl:inline">Article</span>) to harmonize across Light, Warm, and Dark app shell themes.
  • Mobile Header Icon (ScriptHeaderControls.tsx): Added a compact icon-only <Newspaper size={12} /> button to the left of [Library], preserving mobile horizontal headroom with accessible title and aria-label tags.
  • Featured Article Card (AppInfoModal.tsx): Designed a prominent hero card above the 2x2 resource grid in the desktop info dialog, displaying a top metadata bar ([SUBSTACK ARTICLE] badge + Read Article ↗ link) and a dedicated full-width title and summary for the deep dive: Introducing SceneFlow: Script-to-Screen Synchronization.

6. 🎬 Vector Field AI Scene & Synchronized Starter Guide

  • Vector Field [AI Scenes] Example (scene_vector_field): Added a new cyberpunk sci-fi AI Scene generated with Seedance 2.0. Features 32 synchronized cues across dialogue, action, shots, camera angles, and soundscapes with complete scene prompt metadata registered in src/examples.ts and SCENEFLOW_CATALOGUE.md.
  • Instructional Guide Reference Synchronization (docs/_dropbox/guide.txt): Updated the onboarding reference guide to document modern SceneFlow capabilities: Multi-Track Sync Timeline, stationary anticipation playhead, timecode ruler, zoom window presets (4s | 8s | 16s), Flex / Fixed track height modes, collapsible video player (V), dual-axis splitters, studio VU meter, paused inspector with instant replay, CVD accessibility palettes, and pure black video overlay mode.
  • Starter Tutorial Project Re-Anchoring (public/examples/blank.json): Synchronized the default starter tutorial script with updated guide text, re-anchoring character indices (startIndex / endIndex) across all 100+ cues to preserve frame-accurate timeline synchronization while upgrading legacy cue classes to canonical v2.3.0 tokens (bg-blue-500/50, bg-indigo-400/50).

📦 Compatibility & Verification

  • 100% Backwards Compatible: Existing .json screenplay projects, sync cues, and browser localStorage states load seamlessly without data migrations.
  • TypeScript & Build Verification: All components and tokens compiled with zero errors under strict TypeScript checks (tsc --noEmit) and Vite production bundling.
  • Decoupled Architecture: Fully respects the two-tier theming independence invariant (App Shell vs. Script Paper) and ensures zero cross-layer visual leakage.

🔗 Resources

Assets 2
Loading