Commit Graph
135 Commits
Author SHA1 Message Date
Miguel Angel Simon Sierra bb912587b9 feat(primitives): add 25 video primitives, live docs pages, and the catalog retrieval eval
Adds the 25 video primitive compositions and their generated Mintlify pages.
Each page embeds a live <hyperframes-player> preview with editable composition
variables rather than a rendered MP4.

Adds the catalog-browsing eval under evals/catalog-retrieval: a 424-entry shelf
built from HEAD, nine retrieval conditions (no-catalog control, full read,
lexical, semantic, and hybrid across several values of k), a brief generator
that constructs each brief from a known target, a blind three-pass gold
validation committee, and a mechanical scorer that keeps mountable and fit as
two separate numbers.

The eval vendors its own shelf, primitive sources, and preview list instead of
reading them from an ignored working directory, so the shelf regenerates byte
for byte from a clean checkout. Derived artifacts stay out: the embedding cache
and the run checkpoints are regenerated rather than committed, so no run can
score against a stale copy of either.

Lint ignores now cover vendored minified player bundles by pattern instead of
one path at a time.
2026-07-31 12:27:41 +02:00
Miguel Angel Simon Sierra cda1203e4f feat(registry): wave M experiments - ten candidates on the watch wall
ascii-render-pass, ordered-dither-pass, segmentation-flood, slit-scan-reveal,
variable-font-flex, stitched-text-draw, ink-bleed-reveal, particle-text-dissolve,
modal-morph, stop-motion-cadence; all tri-order seek-deterministic; watch page
docs/experiments.html; candidates only, no catalog changes.
2026-07-18 21:48:34 +02:00
Miguel Angel Simon Sierra 39d2e4caa8 feat(registry): wave L wild-shelf candidates from the frame study
cursor-glyph-trail, echo-trail, facet-morph, light-sweep-pass,
soft-blob-touch, halftone-dissolve; all pure functions of timeline time,
tri-order seek determinism verified; watch page at docs/wild-shelf.html.
Candidates pending owner judgment, no catalog changes.
2026-07-18 08:47:20 +02:00
Miguel Angel Simon Sierra c996588d8c feat(registry): wave K - eight demand-backed primitives, shelf recomposed to 25
scroll-camera-story, iris-reveal, particle-image-reveal, telemetry-hud,
native-notification-pop, whip-pan-cut, spring-stack-shuffle, vox-annotate;
interruptible-spring and quiet-register laws encoded; marker-highlight
(absorbed by vox-annotate), constellation-hub, and typed-prompt leave the
hero catalog; scroll-feed, svg-stroke-trace, oversized-cursor protected.
2026-07-16 18:04:21 -04:00
Miguel Angel Simon Sierra 2ded4d09bd fix(registry): adversarial QA round two - ten primitives polished
kinetic-type-swap masked exchange + font-relative gaps (was unanimous
below bar); titlecard-lockup and chart-story light-safe inks; press-ripple
cursor exit, ink ripples, transform-only; before-after-wipe divider fade-in;
scroll-feed doomscroll default + gradient robustness + edge fades;
browser-device-stage fade-through swap; count-up affix optical trim;
per-word-rise landing settle; grid-card-assemble pacing spread; true-still
holds replace sub-perceptual drift shelf-wide.
2026-07-16 17:04:07 -04:00
Miguel Angel Simon Sierra 275b333195 feat(registry): quality round - redesigned closes and grid, demo mount overhaul, trust-strip demoted
cta-close and logo-brand-close rebuilt at display scale with real presence;
grid-card-assemble tiles become drawn-icon capability cards; all nine
generated demo mounts rebuilt full-frame on light token backdrops;
trust-strip leaves the hero shelf (too easily one-shot to hold a slot);
dash draws moved to attribute-driven offsets (reverse-seek stale paint).
2026-07-16 12:14:55 -04:00
Miguel Angel Simon Sierra 2b810e3518 feat(registry): wave J2 - ten workhorse primitives, helpers doc, hero catalog
screen-flow-carousel, ui-focus-zoom, state-chip-rail, morph-swap, line-swap,
radial-surround, code-terminal-run, testimonial-proof-card, notification-stack,
split-tilt-cards; docs/primitives-helpers.md (camera-servo + hold-alive);
registry/components/CATALOG.md (hero-21 index with use_when/avoid_when/pairs_with);
before-after-wipe demo accent moved off the variable-shadow collision.
2026-07-16 11:07:19 -04:00
Miguel Angel Simon Sierra f7da9e444c feat(registry): wave J shelf recomposition
Eight new hero primitives (press-ripple, typed-prompt, titlecard-lockup,
logo-brand-close, browser-device-stage, grid-card-assemble, chart-story,
trust-strip), before-after-wipe port with content slots, marker-highlight
contract rebuild, whiteboard-ink strokes slot, and the cues/exit/register
retrofit across the ten kept primitives. Gallery, theme gate, and
theme-compare board restaged for the shelf of 21.
2026-07-16 03:18:41 -04:00
Miguel Angel Simon Sierra afa3de94c6 fix(registry): whiteboard-ink choreography and SVG hidden-attribute selection 2026-07-16 00:11:50 -04:00
Miguel Angel Simon Sierra f5101a5a43 feat(registry): whiteboard-ink primitive for whiteboard-style explainer drawing 2026-07-15 23:34:06 -04:00
Miguel Angel Simon Sierra 91840e9038 feat(registry): wave I definition-perfect rebuilds (7 units) and hero board update 2026-07-15 22:56:29 -04:00
Miguel Angel Simon Sierra 595f289bf7 feat(registry): full-duration token conformity for hero 20 across all three themes 2026-07-15 21:41:05 -04:00
Miguel Angel Simon Sierra d52c0b4951 feat(registry): deep-tokenize stage/surface layers of hero primitives; theme injection wins element-scoped demo tokens 2026-07-15 19:57:33 -04:00
Miguel Angel Simon Sierra fe6a3dc919 feat(registry): tokenize hero-20 primitives against theme contract, add gallery rating UI 2026-07-15 17:49:15 -04:00
Miguel Angel Simon Sierra dcede2862b feat(registry): wave G camera/background primitives, wave H research-sourced primitives, theme contract, check suggestions 2026-07-15 16:17:01 -04:00
Miguel Angel Simon Sierra 00be04b7e6 feat(registry): wave F primitives, QA gallery tooling, and visual fixes 2026-07-14 15:05:44 -04:00
Miguel Angel Simon Sierra 2018de8737 fix(registry): wave A primitives mount as elastic sub-compositions 2026-07-10 21:48:49 -04:00
Miguel Angel Simon Sierra c93637c6ff feat(registry): wave A primitives (cursor, touch, device stage, toggle) and shared test scenes 2026-07-10 19:52:15 -04:00
Miguel Angel Simon Sierra a12a33a3ea fix(scripts): registry manifest scans all item types instead of dropping blocks and components 2026-07-10 19:22:58 -04:00
Miguel Angel Simon Sierra 1842da9dfd chore(registry): sync minimal grouped control demos 2026-07-10 01:51:07 -04:00
Miguel Angel Simon Sierra 353b26c4c1 feat(registry): flatten grouped controls onto a single rail 2026-07-10 01:50:17 -04:00
Miguel Angel Simon Sierra 4aba53198d fix(registry): stabilize primitive visual verification 2026-07-10 00:39:09 -04:00
Miguel Angel Simon Sierra bc65c9b73f feat(registry): ship Operator Black UI primitives 2026-07-10 00:11:34 -04:00
Miguel Angel Simon Sierra 7ac6010446 fix(registry): make primitive previews reproducible 2026-07-09 21:06:23 -04:00
Miguel Angel Simon Sierra e9f27437b9 build(registry): harden UI primitive preview assembly 2026-07-09 20:32:18 -04:00
Miguel Angel Simon Sierra 4fcc32658c feat(registry): add Operator Black sync pipeline 2026-07-09 20:20:49 -04:00
Miguel Angel Simon Sierra 2f0fbd7c07 test(registry): freeze Operator Black primitive contracts 2026-07-09 19:36:31 -04:00
Miguel Angel Simon Sierra 47e73b5427 test(registry): freeze Operator Black primitive scope 2026-07-09 19:17:39 -04:00
Miguel Angel Simon Sierra 96b1dd7bee refactor(registry): drop product-UI imitation components from catalog
chat-gpt, claude-chat, claude-code, github-stars, and opencode leave the
catalog per the no-product-imitations policy; their mechanics re-enter
later under generic names with brand supplied via variables.
2026-07-09 15:39:02 -04:00
Miguel Angel Simon Sierra 5a1f0c1295 Merge magi/motion-primitives-catalog into feat-video-primitives
# Conflicts:
#	scripts/generate-catalog-pages.ts
2026-07-09 15:32:46 -04:00
Vance Ingalls 4fc619e4f1 Merge remote-tracking branch 'origin/main' into feat/lint-gsap-non-transform-motion
# Conflicts:
#	skills-manifest.json
2026-07-08 01:36:50 -07:00
Miguel Ángel c01d1ae03d fix(examples): host the kinetic-type A-roll so the video actually renders (#1799)
* fix(examples): host the kinetic-type A-roll so the video actually renders

The A-roll <video> was authored inside the main-graphics sub-composition
template. The runtime only seeks and decodes media that is a direct child of
the host root, so the footage was never driven by the live runtime and renders
blank in Studio preview and the player (the producer's compile step happened to
hoist it, masking the contract violation in server renders). The example also
failed lint with eight errors.

Root cause and fixes:
- Move the <video> out of compositions/main-graphics.html and into index.html
  as a direct child of #root, with data-start/data-duration/data-track-index
  and class="clip". Its per-scene opacity reveal now runs on the main timeline
  at global time, since a sub-composition timeline cannot reach host elements.
- Make the sub-composition a transparent overlay shell (background: transparent)
  and stack it above the host video so the type renders over the footage.
- Drop the crossorigin attribute (plain displayed media never needs it) and mark
  the audible footage with data-has-audio="true".
- Replace the three CSS translateY values that GSAP would overwrite with
  fromTo tweens (carson-line-1, wes-text-top, wes-text-bottom).
- Swap the unbundled Libre Baskerville for the bundled Playfair Display serif so
  the renderer can supply the Wes Anderson typography, and drop the redundant
  -apple-system token from the body font stack.

lint reports 0 errors, validate passes, and frame extraction confirms the A-roll
composites correctly under every type scene.

* docs(examples): note the A-roll reveal-time coupling to the sub-composition
2026-06-30 10:55:14 -07:00
Vance IngallsandClaude Opus 4.8 b95f2ca25e fix(ci): format migrated comps with oxfmt, sync skills manifest
CI failures were two root causes (preview-regression was a cascade — its gate
mirrors preview-parity, which was skipped because the Preflight lint+format job
failed):

- Preflight (lint + format): the migrated registry comps (flowchart,
  flowchart-vertical, liquid-glass-notification, vignette demo) were committed
  unformatted — the lefthook format step only ran oxfmt on staged TS, not HTML,
  so `oxfmt --check .` failed in CI. Ran oxfmt on all four. The vignette title's
  per-glyph spans use oxfmt's `</span>`-split form, which keeps the glyphs
  adjacent (no inter-element whitespace), so rendering is unchanged.
- Skills: manifest in sync: the pre-commit hook's manifest generator and CI's
  canonical `gen-skills-manifest.ts` produced different content hashes for the
  same skill; regenerated with the canonical generator so the committed manifest
  matches what CI computes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 14:46:49 -07:00
Vance IngallsandClaude Opus 4.8 6e21072f44 fix(lint,skills): make the reflow-prop fix faithful, not a lossy scale swap
The previous fixHint and skill guidance told agents to "settle via scale" for
text-reflow props — but uniform scale resizes the glyphs, it does not change
the gaps between them, so swapping a letterSpacing tween for scale lints clean
while silently animating a different thing.

Make the guidance faithful per property:
- fontSize -> scale (same visual, sub-pixel smooth).
- letterSpacing / wordSpacing -> split the text into per-character elements and
  animate each glyph's x (the spread); uniform scale is NOT equivalent. Or hold
  the value statically if it's a minor flourish.

Add a "preserve the intent" principle to gsap-transforms-and-perf.md: a fix must
reproduce the same start/end state and trajectory and be verified against the
ORIGINAL render, not just pass lint — lint-clean-and-smooth is not the bar,
faithful-and-smooth is.

Redo the vignette demo title with the faithful per-glyph x spread (15.12px =
(0.32em-0.18em)*108px, centered about 8 chars). Render-verified: settled
endpoint matches the original at 46.5 dB, settle is smooth (24/24 unique frames).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 10:59:49 -07:00
Vance IngallsandClaude Opus 4.8 082280e8de feat(lint): flag text-reflow props in gsap_non_transform_motion
Extend the rule beyond positional layout props to the text-reflow props
letterSpacing / wordSpacing / fontSize. Animating them reflows text and snaps
glyph positions to the pixel grid, so a slow ease-out tail micro-stutters
exactly like left/top — measured on a real composition, a slow letterSpacing
"settle" rendered 19/30 unique frames vs 30/30 for the transform-driven
motion in the same piece. They have no transform replacement (fix: settle via
scale or hold the value), and the snap happens during browser layout, upstream
of the canvas raster, so they are never html-in-canvas-exempt. width/height
stay excluded (legit animated uses — progress bars, reveals).

Restructure the finding's message/fixHint to compose per category (positional
-> x/y; reflow -> scale/hold; roundProps -> remove) instead of a two-branch
ternary. Skill guidance (gsap-transforms-and-perf.md) broadened: "layout
property" includes reflow; letterSpacing/fontSize named as the settle-trap.

Migrate the one surfaced positive: registry/components/vignette/demo.html
title settle letterSpacing -> a subtle scale settle (render-verified 20/20
unique frames, smooth). Blast radius across the registry was this one comp,
zero false positives.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 10:36:59 -07:00
Vance IngallsandClaude Opus 4.8 619a603eab feat(lint): add gsap_non_transform_motion rule, migrate registry comps to transforms
Animating layout properties (left/right/top/bottom/margin*) or using
roundProps snaps motion to integer device pixels. Under the seek-by-frame
capture engine this is invisible at high per-frame deltas (fast tweens) but
visibly stutters at low deltas (slow tweens / ease-out tails): sub-pixel
movement rounds to the same pixel for several frames, then jumps a whole
pixel. Transforms (x/y/scale) interpolate sub-pixel and stay smooth.

New rule gsap_non_transform_motion (error):
- Sources timeline tweens from the acorn parser's full animation list, so
  label- and relative-positioned tweens (tl.to(..., "label") / "+=1") are
  covered and real AST keys avoid phantom-prop / nested-brace misreads.
- Exempts html-in-canvas elements (a <canvas layoutsubtree> ancestor): they
  are rasterized from sub-pixel getComputedStyle and do not integer-snap.
  Per-element resolution, so a grouped glass+text tween still flags the
  plain-DOM half. roundProps is never exempt (it rounds before the style).
- Uses Object.hasOwn for the layout-prop lookup, skips set(), and merges
  standalone gsap.* calls.

Migrated 9 registry compositions off layout-prop animation onto transforms,
each render-verified visually identical:
- liquid-glass-{notification,widgets,media-controls,context-menu}: plain-DOM
  text overlays -> transforms; glass panels stay on left/top (canvas-exempt).
- vignelli: curtain wipes left:% -> xPercent.
- lt-mask-reveal: sweep left:% -> x px.
- flowchart, flowchart-vertical, decision-tree: cursor paths left/top -> x/y.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-29 09:46:02 -07:00
ab818a2f1d feat(registry): add lower thirds catalog blocks (#1134)
Adds news ticker from #1134, the podcast/interview lower-thirds pack from #1689,
and the BILD-style lower third from #1276.

Also adds generated catalog pages for flowchart-vertical and vfx-liquid-glass
from #1525, plus a Lower Thirds catalog group for discovery.

Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com>
Co-authored-by: Kiyeon Jeon <kiyeonjeon21@users.noreply.github.com>
Co-authored-by: sunlesshalo <198846711+sunlesshalo@users.noreply.github.com>
Co-authored-by: Moritz <moritz.wedel@axelspringer.com>
Co-authored-by: Claude Sonnet <noreply@anthropic.com>
Co-authored-by: Dashsoap <42135402+Dashsoap@users.noreply.github.com>
2026-06-25 16:53:44 -04:00
Miguel Angel Simon Sierra e9172e3331 feat(registry): polish demo previews to shadcn-grade across catalog
Improve all 169 component demo previews for catalog legibility and polish:
- replace jagged clip-path cursor with a crisp SVG pointer (context-menu,
  cursor, simulated-cursor)
- scale under-sized UI primitives to fill the frame; enrich sparse demos
  with context (sibling rows, skeleton content, profile cards)
- normalize toward a neutral zinc/stone palette, bump small type, tidy
  spacing/radius/shadows
- preserve GSAP timelines, data-* composition attrs, and determinism
2026-06-25 00:57:26 -04:00
Miguel Ángel a7e64a3bb9 feat(registry): add advanced HyperFrames primitives 2026-06-24 16:03:11 +00:00
Miguel Ángel 42608c90d9 feat(registry): port remaining remocn catalog entries 2026-06-24 15:55:13 +00:00
Miguel Ángel a2c66c99ca feat(registry): port remocn typography primitives 2026-06-24 15:50:34 +00:00
Miguel Ángel 7d768fb94d feat(registry): expand components and transition primitives 2026-06-24 15:39:23 +00:00
Miguel Ángel d6327376e7 feat(registry): add composed UI flow snippets
Add reusable Remocn-inspired flow snippets for signup, checkout,
onboarding, settings, and AI prompt scenes.
2026-06-24 06:22:53 +00:00
Miguel Ángel cf7db37697 feat(registry): add UI and transition primitives catalog
Port Remocn UI primitives into installable HyperFrames snippets.
Add a first transitions.dev-inspired primitive set for agent-friendly motion patterns.
2026-06-24 06:18:02 +00:00
Miguel Ángel bfb8ea58bd feat(registry): add motion primitives catalog 2026-06-24 04:04:27 +00:00
Miao Yang 5d1bff51b5 fix: unblock music video ci checks 2026-06-23 22:32:51 +08:00
WaterrrForeverandClaude Opus 4.8 4db708eb4a fix(core): register sub-composition timelines after async build + lint rule (#1638)
* fix(core): register sub-composition timelines after async build + lint rule

When a composition builds its GSAP timeline inside document.fonts.ready (or any
async callback), registering window.__timelines[id] BEFORE the build leaves an
EMPTY timeline registered. The runtime's sub-composition readiness gate treats
"key present" as "ready" and nests the child once — an empty timeline gets
nested empty and is never re-nested, so the frame renders blank when used as a
sub-composition.

- registry/blocks/code-{diff,highlight,morph,scroll,typing}: register the
  timeline AFTER the fonts.ready build completes, then call
  window.__hfForceTimelineRebind() to re-nest now that it is populated.
- core lint: add rule gsap_timeline_registered_before_async_build to flag the
  early-registration anti-pattern, with tests.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* test(studio): import commitGsapPositionFromDrag from its actual module

The function was split out into gsapDragPositionCommit.ts in #1605, but the
test kept importing it from ./gsapDragCommit, which no longer exports it —
yielding 'is not a function' at runtime. Import from the correct module.

Inherited main breakage (same fix as #1631/#1635); fixes the Test CI check on
this branch independently of merge order.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-22 22:50:04 +08:00
Vance IngallsandClaude Opus 4.8 cc2220e59e fix(slideshow): address code-review findings #1580-1584 (#1585)
* fix(slideshow): address code-review findings #1580-1584

- player: bundle @hyperframes/core into the IIFE/global build (noExternal)
- player: resolve audience mode from ?mode=audience URL query, not just attr
- player: event-driven waitForScenes + loud failure when no slides resolve
- player: scope window keydown so Space/Backspace don't hijack the host page
- player: audience mirrors full position (branch + fragment) via syncTo
- player: next() reveals remaining fragments even at slide end; enterBranch ignores empty sequences
- core: harden extractScenes against null/non-object scene entries
- core: strict manifest validation; error on inverted ranges & empty hotspot targets; dedup fragments
- core/lint: accept data-end/timeline-derived scene durations (match runtime)
- core+studio: share ISLAND_TYPE + island regex from @hyperframes/core/slideshow
- studio: SlideList reflects manifest slide order; branch-slide authoring (notes/fragments/hotspots)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(player): slideshow fullscreen + presenter-view rework

- fullscreen toggle in the nav chrome (button + 'F' key); standard Fullscreen
  API on the <hyperframes-slideshow> element, icon reflects state
- presenter console: live slide on top, speaker-notes panel below, with the nav
  controls shown in-view; Present button hides once presenting (harness)
- audience (viewer) window: chrome reduced to a fullscreen-only control, no nav
- fix: audience / back() / backToMain() mirror stayed frozen on the first frame —
  a bare paused seek does not repaint some compositions. resumeSlide now plays a
  brief render-nudge (RENDER_NUDGE) past the target so the composition paints,
  then onTime pauses at the hold
- refactor: extract reusable buildNavCluster() + wireChromeButtons(); rework
  buildPresenterLayout into the bottom notes panel
- example: airbnb-deck presenter-test.html harness (Present button + 'F')

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(player): slideshow no auto-progress + presenter slide fits/pins

- navigation jumps to a static frame instead of auto-playing the timeline:
  playTo() seeks to the hold (+ a brief RENDER_NUDGE to repaint) rather than
  sustaining playback, so slides hold until the user advances
- presenter view: pin the live slide to the top and confine the player to the
  region above the notes panel, so the player CONTAINS the composition — the
  full slide stays visible (letterboxed) at any width and re-fits on resize;
  its bottom is no longer cut off by the notes panel
- tests: seek targets updated for the render-nudge offset

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(slideshow): presenter nav flash, slide-1 boundary, branch buttons

Three presenter-mode fixes from testing the airbnb deck: (1) navigation flash — seek to the exact target then play forward to repaint, instead of seeking backward (t-0.2) which painted the previous scene at boundaries; split hold into holdTarget (logical) and holdAt (target+nudge, clamped to slide.end). (2) slide-1 boundary — no-fragment slides rest at the slide midpoint, not slide.end. (3) presenter branch buttons — surface hotspots as buttons in the presenter console (the on-slide pill is lost in the letterboxed view). Also extract paintChrome() to dedupe the three chrome-render sites.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(slideshow): stop presenter nav buttons flickering / dropping clicks

The presenter elapsed clock called render() every second, which rebuilt the
entire chrome (innerHTML) including the nav buttons — they flickered and any
click landing mid-rebuild was lost. The 1s tick now updates only the elapsed
text node; the nav buttons are rebuilt only on actual navigation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(slideshow): CSP-safe nav hover, UUID editor ids, manifest version

Addresses review feedback on the split stack:

- CSP: replace the 8 inline onmouseover/onmouseout handlers on the nav
  buttons with a [data-hf-nav-cluster] button:hover CSS rule (injected once
  per document). No inline event handlers → works under strict CSP.
- IDs: studio sequence/hotspot id generation used Date.now() (sub-ms
  collision on rapid clicks) — now crypto.randomUUID().
- Versioning: stamp version on the persisted manifest island (preserving an
  existing one); add the optional version field + SLIDESHOW_MANIFEST_VERSION
  to the core schema so future schema changes can migrate older islands.

These live on the review-fixes tip (consistent with the stack's fixup-on-tip
model); the touched code belongs to ss-player-b (#1590), ss-studio-a/b
(#1591/#1592), and ss-core (#1580).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(ci): fix format + fallow gates for slideshow stack

- .prettierignore: exclude generated demo compositions (registry/examples/**/*.html)
  from oxfmt — large video-pipeline output (GSAP/Three/WebGL), not hand-authored
  source. Was failing 'Format' repo-wide (pre-existing on main via #1584).
- .fallowrc: exempt SlideshowPanel.tsx (health/complexity — section fan-out) and
  the slideshowPanelHelpers.ts / SlideshowPanel.test.ts parallel-structure clones
  (duplicates.ignore). File-level config, not inline comments — inline shifts line
  numbers and breaks fallow's inherited-finding fingerprint (per existing rc note).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(slideshow): address PR review + CodeQL findings

- CodeQL #638 (parseSlideshow): complete the regex metachar escape in
  slideshowIslandRegex (was missing backslash); add JSDoc on the factory +
  lastIndex caveat (reviewer 5a/16).
- CodeQL #639/#640 + review items 13/17: remove registry/examples/airbnb-deck/
  presenter-test.html — a generated test harness (postMessage w/o origin check,
  proto-pollution) that was scope-creep into a fix PR and a 3rd duplicate island.
  Regenerate locally via the scratchpad script when testing.
- Review item 15 (docs drift in skills/slideshow/SKILL.md): lint resolves scenes
  by data-composition-id only (not .clip[id]); fragments are valid INCLUSIVE of
  [start,end], not 'strictly inside'.

IIFE bundles core confirmed (0 external @hyperframes/core refs in the slideshow
global build). format/lint/fallow green.

* feat(cli): add 'present' command — serve a deck in presenter mode

hyperframes present [dir] starts a lightweight HTTP server, wraps the
composition in <hyperframes-slideshow> with its island inlined, and opens
the browser. A real HTTP origin is required for presenter mode: present()
opens the audience window via window.open(?mode=audience) and the two sync
over BroadcastChannel — neither works from file://.

- New utils/compositionServer.ts factors the server scaffolding shared with
  'play' (resolve runtime/player/slideshow bundles, inject runtime, asset
  content-types, bind to a free port); play.ts now uses it too.
- Errors clearly if the deck has no slideshow island.
- .fallowrc: exempt the play/present command entrypoints (validation + server
  wiring) and the per-command startup/logging block from the complexity /
  duplication gates.

Verified end-to-end against registry/examples/airbnb-deck: server serves the
wrapper + assets, the component binds and renders (counter 1 / 11).

* fix(cli): present renders the deck (player sizing + self-driving serve)

Two bugs caused a black slide area:
- The <hyperframes-player> had no positioning, so its iframe collapsed to
  zero size — the (absolutely-positioned) chrome showed but the composition
  didn't. Add position:absolute; inset:0 (matches demo.html).
- The composition was served with the engine runtime injected, which leaves
  its timelines engine-paused (blank). Slideshow decks self-drive their own
  timelines (like demo.html / the standalone harness), so serve them raw.

Verified end-to-end on registry/examples/airbnb-deck: cover renders, Next
advances 1/11 -> 2/11 and slide 2 paints.

* fix(cli): present plays slideshow sound effects

The composition (in the player's sandboxed iframe) posts
{ type: 'hf-sfx', name } to the parent on nav, but the iframe is
autoplay-blocked — audio must play in the parent that owns the user gesture.
Add the parent-side hf-sfx handler (the 4 standard clips advance/fragment/
branch-enter/back, served from the deck's sfx/ under /composition/sfx/),
gesture-unlocked and mute-aware, in both presenter and audience windows.

Verified: sfx serve 200 (audio/mpeg) and Next delivers [advance, fragment]
to the parent handler.

* feat(examples): softer mellow slideshow sfx for airbnb-deck

Replace the aggressive percussive pops with gentle sine-tone cues (warm
pitches C5/G4/E5/F4, 12ms attack + exponential decay, lowpassed) — advance/
fragment/branch-enter/back. Much lighter; fragment is the most subtle.

* feat(examples): whoosh + sparkle slideshow sfx for airbnb-deck

Replace the sine-tone cues with airy, designed sounds:
- advance: a soft whoosh (band-limited pink noise, bell-shaped swell)
- back: that whoosh reversed and darkened
- fragment: a light sparkle (staggered high chime blips)
- branch-enter: whoosh + a trailing sparkle (magical entry)

* feat(examples): directional whoosh + richer branch-enter cue (airbnb-deck)

- Going backward a slide now plays the reverse whoosh (back), not advance —
  the sfx logic detects nav direction by scene order instead of firing advance
  for every scene change.
- branch-enter is now a more interesting magical cue: a faint whoosh + an
  ascending C5-E5-G5-C6 chime arpeggio + a trailing sparkle.

Verified: next then prev fires [advance, fragment, back]; no page errors.

* fix(cli): harden present sfx handler + mute-hover affordance (R2 review)

Addresses Rames R2 items 19-21:
- 20: the present audio handler reintroduced the CodeQL classes removed with
  presenter-test.html — add an origin check (same-origin composition iframe)
  and an own-property guard so a 'name' like __proto__ can't resolve to and
  mutate Object.prototype.
- 21: assetContentType used a bare index lookup (ext='__proto__' -> prototype);
  guard with Object.hasOwn.
- 19: the CSP hover rule erased the speaker button's muted color; add a
  higher-specificity [data-hf-muted] [data-hf-mute]:hover override.

Verified: hf-sfx origin matches location.origin (guard passes), advance/fragment
still fire, deck renders + advances. Items 14/18/22 deferred (minor, pre-existing).

* fix(slideshow): address remaining R2 items (14/18/22) + re-remove harness

- 14: resumeSlide now mirrors enterSlide — a no-fragment slide resumes at its
  midpoint (visible-at-rest), not frame-0; fragmented slides still resume to the
  saved fragment or slide.start. Added a dedicated test naming the heuristic.
- 18: fullscreenchange swaps only the fullscreen glyph + aria (hoisted SVGs to
  module consts) instead of re-rendering the whole chrome.
- 22: .prettierignore lists the specific generated demo compositions instead of
  blanket registry/examples/**/*.html, so hand-authored example HTML still formats.
- presenter-test.html: a stray 54a4460 git add -A had re-added the deleted
  harness (reviving CodeQL #639/#640); remove it again.

106 slideshow tests pass; tsc/lint/fallow/format clean; deck still renders.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 03:26:49 -07:00
Vance IngallsandClaude Opus 4.8 ae40498433 test(examples): slideshow demos — airbnb deck, startup pitch, fixture (#1584)
* feat(player): slideshow controller state machine

Stack-split from the original ss-player PR (#1581): the SlideshowController
state machine (stack-based slide/fragment/branch navigation) and its tests.
The <hyperframes-slideshow> web component follows in the next PR.

* feat(player): <hyperframes-slideshow> web component + presenter

Stack-split from the original ss-player PR (#1581): the <hyperframes-slideshow>
custom element (wraps <hyperframes-player>, drives the controller),
presenter/audience BroadcastChannel sync, nav chrome, and the player scenes hook.

* feat(studio): slideshow manifest persistence + panel helpers

Stack-split from the original ss-studio PR (#1582): the data layer —
setSlideshowManifest, the useSlideshowPersist hook, and panel helpers.
The editor panel UI follows in the next PR.

* feat(studio): slideshow branching editor panel UI

Stack-split from the original ss-studio PR (#1582): the SlideshowPanel /
SlideshowSubPanels editor UI, right-panel wiring, and app integration.

* docs(skill): slideshow authoring guidance + standalone harness reference

New /slideshow skill (island schema, slide rules, fragments, branching,
validation) + a standalone-harness reference doc, and a router entry in
the /hyperframes skill.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* test(examples): slideshow demos — airbnb deck, startup pitch, fixture

Three runnable slideshow compositions: a current-Airbnb-branded remake of
the 2009 seed deck (Three.js backgrounds, GSAP entrances, hotspot branch,
HeyGen SFX), an animated startup pitch, and a minimal fixture.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 01:35:23 -07:00
Vance IngallsandClaude Sonnet 4.6 386df23a74 fix(lint): promote rules to errors with registry exemptions and false-positive fixes (#1495)
* fix(lint): promote rules to errors with registry exemptions and false-positive fixes

- Export isRegistrySourceFile/isRegistryInstalledFile from composition.ts
- Add registry exemptions to google_fonts_import and font_family_without_font_face
- Add registry exemption to requestanimationframe_in_composition
- Fix timed_element_missing_clip_class: data-track-index alone no longer triggers
- Fix caption_transcript_parse_error: balanced-bracket scanner replaces non-greedy regex
- Fix missing_timeline_registry: skips sub-compositions and template-wrapped files
- Fix scene_layer_missing_visibility_kill: strip JS comments before pattern matching
- Fix gsap_css_transform_conflict: exempt from() alongside fromTo()
- Fix gsap_from_opacity_noop: only fires when opacity value is actually 0
- Add regression test for data-track-index-only elements

* test(lint): add regression tests for false-positive fixes

Covers the 7 missing negative-case assertions flagged in PR review:
- registry marker suppresses google_fonts_import + font_family_without_font_face
- registry marker suppresses requestanimationframe_in_composition
- isSubComposition suppresses missing_timeline_registry
- scene_layer_missing_visibility_kill: fires, commented-kill fires, real kill suppresses
- gsap_css_transform_conflict: from() exempt alongside fromTo()
- gsap_from_opacity_noop: non-zero opacity (e.g. 0.5) is a valid reveal, not a noop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(examples): fix warm-grain template to pass promoted lint rules

- index.html: remove undeclared "Lexend" from font-family stack
- intro.html: replace Google Fonts @import with bundled Inter font
- captions.html: quote TRANSCRIPT keys for valid JSON + use Inter font

Fixes CLI smoke CI failure after google_fonts_import, font_family_without_font_face,
and caption_transcript_parse_error were promoted from warning to error.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(cli): resolve warm-grain from repo registry in dev mode + bundle at build

getStaticTemplateDir now falls back to registry/examples/<id> in dev mode
so CI smoke tests use the PR-branch copy instead of fetching from main.
build-copy.mjs copies warm-grain to dist/templates/warm-grain at build time
so packed CLIs can scaffold it offline.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(examples): remove trailing comma from warm-grain TRANSCRIPT array

JSON.parse rejects trailing commas (valid JS, invalid JSON).
caption_transcript_parse_error was still firing because of the comma
on the last entry after quoting all keys.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-16 21:13:00 -07:00