feat(tangle-cloud): iframe-first layout for blueprints with publisher-hosted apps#3236
Merged
Merged
Conversation
…-hosted apps
When a blueprint ships a publisher-hosted iframe app, the publisher's
app IS the product. Wrapping it in 300px of dapp hero + checkout-path
sidebar + overview-cards stack was double-frosting: the iframe sat
buried under ~700px of dapp chrome and the operator had to scroll to
reach the actual product.
## The split
- iframe blueprints (trading, sandbox) — `IframeBlueprintLayout`:
52px identity strip at the top (← Catalog, name, mode picker,
"Create instance" CTA, "Details" disclosure), iframe fills the
remaining viewport height (`calc(100vh - 108px)`, min 600px).
Iframe is front-and-center the moment the page loads.
- non-iframe blueprints — the existing procedural layout. There we
DO own the page surface, so a hero + checkout-path + overviewCards
+ ActionLauncher stack is appropriate.
Mode-driven layout split is the senior move: same component shape, two
very different visual hierarchies driven by whether the publisher
ships their own UI. The shared `BlueprintAppLandingPage` branches on
`iframeConfig` early.
## Details slide-over
Closed by default. Opens from the right, 480px wide on desktop / full
viewport on mobile. Contents:
- tagline + description (one-line + paragraph)
- "Create instance" + "Open standalone ↗" + "View on-chain"
actions, repeated so users who read context first can act without
scrolling back to the strip
- publisher-declared `actions[]` as a tight row list (8 max,
overflow lives on the deploy page)
- publisher-declared `overviewCards[]` as inline panels — narrow
panel so they're rendered as text rows rather than the grid
component the procedural layout uses
The scrim is non-interactive on click-through (click-outside closes,
keyboard `Esc` closes, explicit ✕ closes); the iframe stays
interactive behind a dimmed backdrop. No modal trap.
## Why "Details" not "About" / "Spec" / "Direct"
- "Direct" felt jargon-y — the operator doesn't think in terms of
a "direct" view of a blueprint
- "About" is soft and ambiguous on a tool surface
- "Spec" reads as developer-only
- "Details" is the clearest neutral term and matches how every
catalog / app-store UI labels the same disclosure
## Verification
- `yarn nx build/typecheck/test/lint tangle-cloud` — clean
(162/162 tests, 2 pre-existing warnings, no errors)
- Local dev measurement: identity strip at y=56..108, iframe at
y=108..828 (720px content area on a 900px viewport). The iframe
is 720px immediately visible on first paint; previously the
iframe started at y=620 and only 280px was above the fold.
- Details panel opens cleanly, scrim dims iframe, Esc/✕ both close,
iframe stays interactive behind the panel.
## Why mobile mode picker lives below the iframe
The 52px identity strip can fit the compact mode picker on md+ width
but gets crowded on mobile. Below-iframe placement keeps the strip
clean on narrow viewports and the mode picker discoverable.
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
2 participants
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.
Continuation of PR #3235
The mode-driven layout split for iframe blueprints did not make it into the #3235 squash — my follow-on commit pushed after the squash was triggered. Re-shipping as its own focused PR.
Why
When a blueprint ships a publisher-hosted iframe app, the publisher's app IS the product. Wrapping it in 300px of dapp hero + checkout-path sidebar + overview-cards stack was double-frosting: the iframe sat buried under ~700px of dapp chrome and the operator had to scroll to reach the actual product.
The split
IframeBlueprintLayout. 52px identity strip at the top (← Catalog · Name · Mode picker · Create instance · Details), iframe fills remaining viewport height (calc(100vh - 108px), min 600px). Iframe is front-and-center on first paint.The shared
BlueprintAppLandingPagebranches oniframeConfigearly.Details slide-over
Closed by default. Opens from the right, 480px on desktop / full viewport on mobile. Contents:
Create instance,Open standalone ↗,View on-chain— so users who read context first don't have to scroll back to the strip to actactions[]as a tight row list (8 max)overviewCards[]as inline panels (narrow panel, text rows not the grid component)Click-outside / Esc / explicit ✕ all close. Scrim dims the iframe but doesn't trap — iframe stays interactive behind it.
Why "Details" not "Direct" / "About" / "Spec"
Test plan
yarn nx build/typecheck/test/lint tangle-cloud— clean (162/162 tests)