fix(figma): restore in-app haptics + full-screen toggle in srcdoc embed#70
Merged
Merged
Conversation
The live-preview app gates native haptics and the in-app full-screen (nav-bar) toggle on `isAppHost`, which checked `window.ReactNativeWebView` — the bridge react-native-webview injects. Since #60 the docs /figma-preview page embeds the app inside an `<iframe srcdoc>` (Preview.astro), and that bridge is injected only into the top-level WebView document, never the iframe. So inside PulsarApp `isAppHost` was always false: taps fell back to the silent in-page audio generator (no device haptics) and the `nav-toggle` button never rendered. A srcdoc iframe inherits its parent's origin, so reaching up one level is same-origin — the same trick `getTokenFromUrl` already uses to forward the parent's `?token=`. Add lib/hostBridge that resolves the bridge from `window` or `window.parent`, and route isAppHost detection, the play-preset postMessage, and the set-tab-bar-hidden postMessage through it. Verified in-browser with a srcdoc harness: the iframe's own ReactNativeWebView is undefined (the bug), the helper detects the parent-injected bridge, and a postMessage from the iframe reaches it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This was referenced Jun 11, 2026
piaskowyk
added a commit
that referenced
this pull request
Jun 11, 2026
* ci(docs): redeploy docs when figma/preview or web/Pulsar change The docs build bundles the standalone figma/preview app into the <iframe srcdoc> embed (via the prebuild step), and that app depends on web/Pulsar's pulsar-haptics build. But the deploy workflow only triggered on `docs/**`, so a change to the embed source (e.g. #70, which touched only figma/preview/src) merged to main without ever redeploying the docs — the live site kept serving the stale embed. Add figma/preview/**, web/Pulsar/** and the workflow file itself to the push path filter so embed-affecting changes deploy automatically. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Clean up comments in deploy-docs.yml Removed comments about dependencies for docs deployment. --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
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.
Problem
In PulsarApp, opening Figma Live Preview no longer fires device haptics on tap, and the in-app full-screen (nav-bar) toggle button is missing. Both worked when first implemented.
Root cause
The preview app gates two app-only features on
isAppHost:play()postsplay-presettowindow.ReactNativeWebViewso the native host plays the real device haptic; otherwise it falls back to the silent in-page audio generator.nav-togglebutton — only rendered whenisAppHostis true.isAppHostcheckedtypeof window.ReactNativeWebView !== 'undefined'. Since #60 the docs/figma-previewpage embeds the app inside an<iframe srcdoc>(docs/src/components/preview/Preview.astro). react-native-webview injects its bridge only into the top-level WebView document, never the iframe — so inside PulsarAppisAppHostwas alwaysfalse. Taps produced no device haptic (silent audio fallback) and the toggle button never rendered. That single false flag explains both symptoms.Fix
A srcdoc iframe inherits its parent's origin, so reaching up one level is same-origin — the same trick
getTokenFromUrlalready uses to forward the parent's?token=. Newfigma/preview/src/lib/hostBridge.tsresolves the bridge fromwindoworwindow.parent;App.tsxroutesisAppHostdetection and bothpostMessagecalls through it.No native (
PulsarApp) changes needed — the fix is entirely in the preview app, and the docs build rebuilds the embed from this source on every deploy.Verification
tsc --noEmitandbuild:embedboth pass.ReactNativeWebView→undefined(reproduces the bug)isAppHosttruepostMessagefrom the iframe reaches the bridge → haptics path restored🤖 Generated with Claude Code