feat(studio): catalog panel with Ask agent, block preview, and composition context#1025
Merged
Conversation
Each catalog card now shows two hover buttons: - "Add" — inserts the block/component into the composition at the current playhead position (existing behavior, now with + icon) - "Agent prompt" — copies a contextual prompt to clipboard tailored to the block's category (captions, transitions, VFX, etc.) so the user can paste it into their AI agent for guided customization
Remove the Add button and drag-and-drop from catalog cards — blocks and components need agent-guided customization, not blind insertion. Each card now shows a single "Ask agent" button that copies a rich, category-specific prompt to clipboard with context about what the block does and how to customize it (captions: transcribe + style, transitions: place at cut point, data: replace values, etc.).
Registry blocks are authored at 1920x1080 but projects may use different dimensions (e.g. 1280x720). After installing a block, the server now reads the host project's data-width/data-height from index.html and rewrites the block's viewport meta and CSS dimensions to match, preventing overflow.
…previews When previewing a component (compositions/components/*), render the main composition player as a backdrop behind the transparent component overlay. This lets users see captions, vignettes, and other overlays in context instead of against a black void.
The "Ask agent" button now copies the current composition state along with the category-specific prompt: playback time, active composition path, dimensions, and all elements visible at the current time with their track, timing, and source paths. Gives the agent full context to place and customize the block correctly.
Components (hyperframes:component) get both "Add" and "Ask agent" buttons since they work as drop-in overlays. Blocks (scenes, data, VFX, transitions) show only "Ask agent" since they need agent-guided customization.
Add button rules: VFX, Social, Scenes get Add + Ask agent. Captions, Transitions, Effects, Data get Ask agent only. Search now matches category names and tags, so searching "captions" shows all caption blocks.
- Ask agent button turns green with checkmark on copy - Add button shows tooltip "Add to composition at current time" - Ask agent shows tooltip "Copy a prompt to paste into your AI agent" - Tab tooltips: Code, Comps, Assets, Catalog each explain their purpose - Search placeholder updated to "Search by name, category, or tag…"
Fallow audit reportFound 24 findings. Dead code (5)
Duplication (10)
Health (9)
Generated by fallow. |
Clicking "Ask agent" now opens a modal that shows the full generated prompt so the user can read it before copying. The modal has a "Copy prompt" button that turns green on success. This replaces the silent clipboard copy that gave no visibility into what was copied.
When seeking via the slider or timeline scrub, explicitly pause all <video> and <audio> elements inside the preview iframe. The GSAP timeline pauses but iframe media elements can continue playing independently, causing audio to keep going after a seek.
Call tl.pause() both before AND after tl.seek() in the adapter. GSAP's seek() can reactivate a timeline depending on internal state; the second pause() guarantees it stays frozen at the seeked position.
Add title attributes to interactive elements that were missing them: - PlayerControls: Play/Pause, playback speed, shortcuts panel, clear in/out-point buttons, and jump-to-frame Go button - StudioRightPanel: Design, Layers, Motion, and Renders tab buttons
Create a Tooltip component with styled popover (dark bg, border, shadow) that appears on hover with a 400ms delay. Applied to: - Left sidebar tabs: Code, Comps, Assets, Catalog - Right panel tabs: Design, Layers, Motion, Renders Replaces native title attributes with proper styled tooltips.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
VITE_STUDIO_ENABLE_BLOCKS_PANELflag) with registry block/component browserVITE_STUDIO_*flags work in embedded mode without rebuildingTest plan
VITE_STUDIO_ENABLE_BLOCKS_PANEL=1 npx hyperframes previewshows Catalog tab