feat(studio): variables inspector panel with live preview values#2050
Conversation
Collaborator
Author
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced Jul 8, 2026
jrusso1020
force-pushed
the
07-07-feat_studio_variables_inspector_panel_with_live_preview_values
branch
from
c17a78a to
dc052d3
Compare
jrusso1020
force-pushed
the
07-07-feat_studio-server_preview_variable_injection_render_variables_forwarding
branch
from
5870b13 to
c843527
Compare
Fifth PR of the template-variables Studio stack — the UI. Everything here is a thin client over the SDK surface from the earlier PRs; no bespoke parsing or schema logic lives in Studio. - new "Variables" tab in the right inspector panel: lists the declared schema (getVariableDeclarations) with type badges, descriptions, and usage info (getVariableUsage) — unused declarations get a badge, script-read-but-undeclared ids get a one-click Declare action, and dynamic access degrades the display to "may be incomplete". - preview with values: per-type controls (text, number w/ range, color, boolean, enum select; font/image as text for v1) write ephemeral overrides that ride the preview URL as ?variables= — the server injects window.__hfVariables exactly like render time, so the preview is render-truthful. Overrides survive soft reloads and hard remounts (both URL builders route through applyPreviewVariablesToUrl), a header pill shows defaults-vs-custom state with one-click reset, and validateVariableValues issues render as an error strip. - schema editing: add / edit / remove declarations and "set default" via the SDK ops (declareVariable / updateVariableDeclaration / removeVariableDeclaration / setVariableValue), persisted through the standard single-writer path (undo history, self-write echo suppression, preview reload). can() failures surface as toasts. - sdk: re-export the per-type variable interfaces (StringVariable, NumberVariable, …) for typed consumers. - StudioRightPanel: extract PanelTabButton (the tab bar was 5 copies of the same 15-line button). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
jrusso1020
force-pushed
the
07-07-feat_studio-server_preview_variable_injection_render_variables_forwarding
branch
from
c843527 to
dc24770
Compare
jrusso1020
force-pushed
the
07-07-feat_studio_variables_inspector_panel_with_live_preview_values
branch
from
dc052d3 to
f2a1662
Compare
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.
What
Fifth PR of the template-variables stack: the Studio UI. Everything here is a thin client over the SDK surface from #2046–#2048 — no bespoke parsing or schema logic lives in Studio.
?variables=— the server injects them exactly like render time. Overrides survive soft reloads and hard remounts, a header pill shows defaults-vs-custom with one-click reset, validation issues render as an error stripcan()failures surface as toastsmergeDeclarationEdit, clipboard copy uses the shared Safari-safe helper, panel subscribes to session change eventsPanelTabButtonextracted (the tab bar was 5 copies of the same 15-line button)Why
The docs have long described a Studio variables panel that didn't exist. This is the trust loop: see the schema, try values against the live preview, persist the ones you like — with undo.
Test plan
--{id}CSS compat prop) and undo restores the file verbatim; add/remove write valid schema to disk (see fix(studio): code-review and live-test fixes for the variables stack #2052 for the full test log)🤖 Generated with Claude Code