[AbianS]

Summary

Player improvements for embedding demos in a host app (brand colors, light/dark that follows the site, a fix for seeking during video, a polished step bar), plus demo names from recorder flows.

Fix: navbar segments ignored clicks while a clip played

each() (packages/player-core/src/dom/h.ts) re-inserted every view on each update. While a video step plays, the segments update every frame, so their buttons were detached mid-click and a real (multi-frame) click was dropped. Only the arrows worked. Now only out-of-place views move. This affects every consumer (editor preview, React, Vue).

Step bar polish

• Equal-width segments: the active one no longer grows, so nothing reflows when a clip ends.
• Fills and the bar's show/hide ease in and out instead of snapping (with a prefers-reduced-motion branch).
• Thicker segments, taller hit area, and the step number shown on hover.
• The counter has a fixed width, so it doesn't shift going from 9 to 10.
• From 12 steps, the segments join into one dense scrubber, like video chapters.

hotspotStyle and appearance options

• hotspotStyle: { bgColor?, textColor? } overrides every step's hotspot and tooltip colors, whatever the demo was recorded with.
• appearance: "light" | "dark" | "auto" overrides the demo's own. "auto" follows the viewer's prefers-color-scheme as it changes.
• Both apply live through Player.setHotspotStyle() / setAppearance() and the React/Vue props, without remounting or restarting the demo.

<InteractiveDemo src="..." appearance="auto" hotspotStyle={{ bgColor: "#0047FF", textColor: "#fff" }} />

Recorder: name the demo from the flow

A flow can set "title": "Create an invoice". It travels in the .osrec's direction and the editor opens the demo with it, so it's what the player's browser bar shows and what names the export. The skill asks the agent for a short task name (2–5 words, the app's own words, no "Demo of…").

Test plan

• pnpm run ci (Biome, build, types, tests, size)
• New tests: each() leaves in-place views untouched, dense navbar, overlay color override, live appearance/colors without remount (core + React + Vue), "auto" following and unsubscribing from prefers-color-scheme
• Recorder: flow title parsing, carried through exportFile and the .osrec round trip, and the e2e opens the editor with it
• Reproduced the seek bug on a real exported demo with a 150 ms press (dropped before, works after)
• Check the step bar's motion by hand in the editor preview