hyperframes

2,312 Commits 901 Branches 408 Tags

3 Commits

Include renames

Author	SHA1	Message	Date
Vance Ingalls	cd1adcb581	feat(studio): harden ui primitives — focus rings, keyboard tooltips, dialog hook (#1962 ) ## Summary Base of the studio UX-review stack (148 findings audited across the studio; 13 critical). This PR hardens the shared `components/ui` primitives that every later PR in the stack builds on. ## Changes - Button / IconButton: visible `focus-visible` outline (studio accent); `disabled:pointer-events-none` removed (replaced with `disabled:cursor-not-allowed`, hover/active gated behind `enabled:`) so disabled buttons can host explain-why tooltips. - Tooltip: keyboard support (`onFocus`/`onBlur` triggers), `role="tooltip"`, Escape-to-hide, viewport flip (top↔bottom) + horizontal clamping. API unchanged — all ~28 call sites unaffected. - HyperframesLoader: `role="status"` on the loader; determinate track is a real `role="progressbar"` with `aria-valuenow/min/max` (was `aria-hidden`). - VideoFrameThumbnail: error event resolves to a static fallback-label tile instead of an infinite shimmer; `motion-reduce` guard. - NEW `useDialogBehavior`: shared modal contract — document-level Escape, Tab focus trap, focus-first-on-open, focus-restore-on-close, `canClose()` veto for dirty-draft guards. Adopted by every modal later in the stack. - NEW `SearchInput`: shared search primitive with required `aria-label`, panel-input token style (kills the two-divergent-search-styles inconsistency in the sidebar). - studio.css: `hf-toast-in/out` + `hf-backdrop-in` keyframes with `prefers-reduced-motion` guards (the previous `animate-in fade-in` classes were dead — no tailwindcss-animate plugin exists). ## Verification - oxlint 0 errors, oxfmt clean, `tsc --noEmit` clean at stack top - Full studio suite at stack top: 1189 tests pass ## Stack PR 1/7 of the studio UX-review fixes. Merges bottom-up; the stack top is fully green (tsc + 1189 tests). Some shared-file edits span PRs, so intermediate branches may not typecheck in isolation. 🤖 Generated with [Claude Code](https://claude.com/claude-code)	2026-07-06 16:07:44 -07:00
Miguel Ángel	dac304ed9f	refactor(studio): code quality — 22 findings, dead code removal, App.tsx split (#144 ) ## Summary Full code quality review of the studio package, fixing 22 of 25 findings. Removes dead code, extracts modules from App.tsx, fixes accessibility and performance issues. ## Critical fixes (3) - `aria-valuenow` on seek bar now updates imperatively via `liveTime.subscribe` — screen readers previously always reported position 0 - Speed menu closes on outside click (was permanently stuck open) - RenderQueue auto-scroll moved from render phase to `useEffect` (was violating React render purity via `queueMicrotask` during render) ## Dead code removed (-331 lines) \| File \| Lines \| Why dead \| \|---\|---\|---\| \| `PreviewPanel.tsx` \| 180 \| Replaced by NLELayout + NLEPreview \| \| `useCodeEditor.ts` \| 80 \| Exported but never imported \| \| `formatTick` alias \| 2 \| Deprecated, unused \| \| `onClipChange` prop \| 5 \| Declared, never used \| \| `trackH` prop \| 5 \| Declared, never used \| \| `editRange*` + updaters in store \| 60 \| Never read or written \| ## App.tsx extraction \| Extracted to \| Lines \| What \| \|---\|---\|---\| \| `components/LintModal.tsx` \| 130 \| Lint results modal + LintFinding type \| \| `components/MediaPreview.tsx` \| 75 \| Image/video/audio/font file previewer \| \| `utils/mediaTypes.ts` \| 15 \| Shared regex constants (App.tsx and AssetsTab.tsx had diverged copies) \| ## Performance fixes - `useMemo` for `compositions`/`assets` derivation from `fileTree` - `useMemo` for `buildTree(files)` in FileTree - Debounced `handleContentChange` PUT (600ms — was firing on every keystroke) - CompositionsTab iframe hover debounced (300ms — was mounting immediately) - `VideoFrameThumbnail` re-extracts frame when `src` prop changes ## Not addressed (3 — low priority) - #6: SystemIcons consolidation (large refactor across many files) - #16-17: Overlay dismiss pattern standardization - #18: Inline SVG → Phosphor replacement (gradual, per-PR) 🤖 Generated with [Claude Code](https://claude.com/claude-code)	2026-03-31 04:21:12 +02:00
Miguel Ángel	1230657ed0	fix(studio,runtime,engine,compiler): 8 bug fixes — audio, render, timeline, Lottie, thumbnails, video render (#133 ) ## Summary Original 5 bugs fixed: - Bug 1 — Audio silent after seek: Added `Accept-Ranges` / `Content-Length` + `206 Partial Content` to the static asset server for byte-range seeking. - Bug 2 — Download 404 after restart: Render list endpoint now registers on-disk renders into the in-memory job map. - Bug 3 — Timeline stops at GSAP end: `resolveRootTimelineFromDocument` pads the GSAP timeline to match `data-duration` when the composition declares longer. - Bug 4 — Render stuck at 0%: Store `jobState` reference (not spread copy) so async progress mutations reach the SSE stream. - Bug 5 — Lottie missing in preview/render: Two fixes — (a) moved Lottie adapter before GSAP so `onUpdate` wins; (b) fixed bundler silently dropping external CDN `\<script src>` tags from sub-compositions (root cause: `$content(s).html()` returns `""` for external scripts). 3 additional bugs fixed: - Bug 6 — Blank thumbnails outside monorepo: Implemented `generateThumbnail` in the CLI adapter using Puppeteer. - Bug 7 — Video empty in rendered sub-compositions: Fixed `parseVideoElements` selector from `video[id][src]` to `video[src][data-start]` + auto-assign IDs. - Render errors: Failed renders now show their error message in the renders panel. ## Commits \| Commit \| Description \| \| --- \| --- \| \| `3951c6f` \| fix(studio): store render job reference instead of snapshot copy \| \| `f331c30` \| fix(studio): make previously-completed renders downloadable after restart \| \| `a5e2d04` \| fix(studio): add range request support for audio/video seeking in preview \| \| `f24317a` \| fix(runtime): pad GSAP timeline to data-duration when composition declares longer duration \| \| `7cf38ca` \| fix(runtime): fix Lottie adapter conflicting with GSAP-driven animations \| \| `bc99209` \| fix(studio): surface render error messages in the renders panel \| \| `8fc9e8b` \| fix(cli): implement generateThumbnail in studio adapter \| \| `90277ea` \| fix(engine): render videos inside sub-compositions that lack an explicit id \| \| `f5bb579` \| fix(compiler): preserve external CDN scripts from sub-compositions in bundle \| ## Test plan - [x] `golden-lyric-video`: seek → audio plays from seeked position - [x] Any project: render → progress advances past 0%, reaches 100% - [x] Any project: complete render, restart `hyperframes dev`, Download → works - [x] `intro-vid`: play → runs full 5s (not stopping at 3s) - [x] `hyperframe-build-up-demo`: play → rocket Lottie visible during 0-2s ✅ verified - [x] Outside monorepo: Compositions sidebar shows thumbnail images (not blank) - [x] `bug.zip` project: render → video in polaroid sub-composition appears in output - [x] Trigger a failed render → error message shown	2026-03-30 23:58:08 +02:00

Author

SHA1

Message

Date

Vance Ingalls

cd1adcb581

feat(studio): harden ui primitives — focus rings, keyboard tooltips, dialog hook (#1962 )

## Summary

Base of the studio UX-review stack (148 findings audited across the studio; 13 critical). This PR hardens the shared `components/ui` primitives that every later PR in the stack builds on.

## Changes

- **Button / IconButton**: visible `focus-visible` outline (studio accent); `disabled:pointer-events-none` removed (replaced with `disabled:cursor-not-allowed`, hover/active gated behind `enabled:`) so disabled buttons can host explain-why tooltips.
- **Tooltip**: keyboard support (`onFocus`/`onBlur` triggers), `role="tooltip"`, Escape-to-hide, viewport flip (top↔bottom) + horizontal clamping. API unchanged — all ~28 call sites unaffected.
- **HyperframesLoader**: `role="status"` on the loader; determinate track is a real `role="progressbar"` with `aria-valuenow/min/max` (was `aria-hidden`).
- **VideoFrameThumbnail**: error event resolves to a static fallback-label tile instead of an infinite shimmer; `motion-reduce` guard.
- **NEW `useDialogBehavior`**: shared modal contract — document-level Escape, Tab focus trap, focus-first-on-open, focus-restore-on-close, `canClose()` veto for dirty-draft guards. Adopted by every modal later in the stack.
- **NEW `SearchInput`**: shared search primitive with required `aria-label`, panel-input token style (kills the two-divergent-search-styles inconsistency in the sidebar).
- **studio.css**: `hf-toast-in/out` + `hf-backdrop-in` keyframes with `prefers-reduced-motion` guards (the previous `animate-in fade-in` classes were dead — no tailwindcss-animate plugin exists).

## Verification

- oxlint 0 errors, oxfmt clean, `tsc --noEmit` clean at stack top
- Full studio suite at stack top: 1189 tests pass

## Stack

PR 1/7 of the studio UX-review fixes. Merges bottom-up; the stack top is fully green (tsc + 1189 tests). Some shared-file edits span PRs, so intermediate branches may not typecheck in isolation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

2026-07-06 16:07:44 -07:00

Miguel Ángel

dac304ed9f

refactor(studio): code quality — 22 findings, dead code removal, App.tsx split (#144 )

## Summary

Full code quality review of the studio package, fixing 22 of 25 findings. Removes dead code, extracts modules from App.tsx, fixes accessibility and performance issues.

## Critical fixes (3)

- **`aria-valuenow`** on seek bar now updates imperatively via `liveTime.subscribe` — screen readers previously always reported position 0
- **Speed menu** closes on outside click (was permanently stuck open)
- **RenderQueue auto-scroll** moved from render phase to `useEffect` (was violating React render purity via `queueMicrotask` during render)

## Dead code removed (-331 lines)

| File | Lines | Why dead |
|---|---|---|
| `PreviewPanel.tsx` | 180 | Replaced by NLELayout + NLEPreview |
| `useCodeEditor.ts` | 80 | Exported but never imported |
| `formatTick` alias | 2 | Deprecated, unused |
| `onClipChange` prop | 5 | Declared, never used |
| `trackH` prop | 5 | Declared, never used |
| `editRange*` + updaters in store | 60 | Never read or written |

## App.tsx extraction

| Extracted to | Lines | What |
|---|---|---|
| `components/LintModal.tsx` | 130 | Lint results modal + LintFinding type |
| `components/MediaPreview.tsx` | 75 | Image/video/audio/font file previewer |
| `utils/mediaTypes.ts` | 15 | Shared regex constants (App.tsx and AssetsTab.tsx had diverged copies) |

## Performance fixes

- `useMemo` for `compositions`/`assets` derivation from `fileTree`
- `useMemo` for `buildTree(files)` in FileTree
- Debounced `handleContentChange` PUT (600ms — was firing on every keystroke)
- CompositionsTab iframe hover debounced (300ms — was mounting immediately)
- `VideoFrameThumbnail` re-extracts frame when `src` prop changes

## Not addressed (3 — low priority)

- #6: SystemIcons consolidation (large refactor across many files)
- #16-17: Overlay dismiss pattern standardization
- #18: Inline SVG → Phosphor replacement (gradual, per-PR)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

2026-03-31 04:21:12 +02:00

Miguel Ángel

1230657ed0

fix(studio,runtime,engine,compiler): 8 bug fixes — audio, render, timeline, Lottie, thumbnails, video render (#133 )

## Summary

**Original 5 bugs fixed:**

- **Bug 1 — Audio silent after seek**: Added `Accept-Ranges` / `Content-Length` + `206 Partial Content` to the static asset server for byte-range seeking.
- **Bug 2 — Download 404 after restart**: Render list endpoint now registers on-disk renders into the in-memory job map.
- **Bug 3 — Timeline stops at GSAP end**: `resolveRootTimelineFromDocument` pads the GSAP timeline to match `data-duration` when the composition declares longer.
- **Bug 4 — Render stuck at 0%**: Store `jobState` reference (not spread copy) so async progress mutations reach the SSE stream.
- **Bug 5 — Lottie missing in preview/render**: Two fixes — (a) moved Lottie adapter before GSAP so `onUpdate` wins; (b) fixed bundler silently dropping external CDN `\<script src>` tags from sub-compositions (root cause: `$content(s).html()` returns `""` for external scripts).

**3 additional bugs fixed:**

- **Bug 6 — Blank thumbnails outside monorepo**: Implemented `generateThumbnail` in the CLI adapter using Puppeteer.
- **Bug 7 — Video empty in rendered sub-compositions**: Fixed `parseVideoElements` selector from `video[id][src]` to `video[src][data-start]` + auto-assign IDs.
- **Render errors**: Failed renders now show their error message in the renders panel.

## Commits

| Commit | Description |
| --- | --- |
| `3951c6f` | fix(studio): store render job reference instead of snapshot copy |
| `f331c30` | fix(studio): make previously-completed renders downloadable after restart |
| `a5e2d04` | fix(studio): add range request support for audio/video seeking in preview |
| `f24317a` | fix(runtime): pad GSAP timeline to data-duration when composition declares longer duration |
| `7cf38ca` | fix(runtime): fix Lottie adapter conflicting with GSAP-driven animations |
| `bc99209` | fix(studio): surface render error messages in the renders panel |
| `8fc9e8b` | fix(cli): implement generateThumbnail in studio adapter |
| `90277ea` | fix(engine): render videos inside sub-compositions that lack an explicit id |
| `f5bb579` | fix(compiler): preserve external CDN scripts from sub-compositions in bundle |

## Test plan

- [x] `golden-lyric-video`: seek → audio plays from seeked position
- [x] Any project: render → progress advances past 0%, reaches 100%
- [x] Any project: complete render, restart `hyperframes dev`, Download → works
- [x] `intro-vid`: play → runs full 5s (not stopping at 3s)
- [x] `hyperframe-build-up-demo`: play → rocket Lottie visible during 0-2s ✅ verified
- [x] Outside monorepo: Compositions sidebar shows thumbnail images (not blank)
- [x] `bug.zip` project: render → video in polaroid sub-composition appears in output
- [x] Trigger a failed render → error message shown

2026-03-30 23:58:08 +02:00