Fix StackBlitz embed isolation

[tannerlinsley]

Summary

• add StackBlitz iframe isolation props for embedded projects
• send COOP/COEP headers on docs example pages and StackBlitz-backed landing pages
• keep isolation scoped so unrelated landing pages are not affected

Testing

• node scripts/build-content-collections.mjs
• ./node_modules/.bin/tsc --noEmit
• ./node_modules/.bin/oxlint --type-aware --disable-nested-config
• ./node_modules/.bin/vite build
• curl -I local built routes to confirm StackBlitz pages include COOP/COEP and /start/latest does not

Summary by CodeRabbit

• New Features
  • Enabled StackBlitz embed support across library landing pages for form, query, ranger, router, table, and virtual libraries
  • Enhanced embedded iframe security with improved cross-origin policies for StackBlitz embeds

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 73641c8a-75cd-4ebc-b064-c605e8799184

📥 Commits

Reviewing files that changed from the base of the PR and between e969361 and acdb30f.

📒 Files selected for processing (11)

• src/components/InteractiveSandbox.tsx
• src/components/StackBlitzEmbed.tsx
• src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx
• src/routes/-library-landing.tsx
• src/routes/form.$version.index.tsx
• src/routes/query.$version.index.tsx
• src/routes/ranger.$version.index.tsx
• src/routes/router.$version.index.tsx
• src/routes/table.$version.index.tsx
• src/routes/virtual.$version.index.tsx
• src/utils/stackblitz-embed.ts

---

📝 Walkthrough

Walkthrough

This PR adds StackBlitz embed security configuration by introducing a utility module that exports Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers alongside iframe allow and credentialless attributes. Components apply these iframe props conditionally, a landing page factory accepts an optional config flag, and five library routes enable StackBlitz embed support.

Changes

StackBlitz Embed Configuration

Layer / File(s)	Summary
StackBlitz embed configuration constants src/utils/stackblitz-embed.ts	Exports stackBlitzEmbedHeaders with COOP/COEP header values and stackBlitzIframeProps with iframe allow and credentialless attributes.
Component iframe configuration src/components/InteractiveSandbox.tsx, src/components/StackBlitzEmbed.tsx	InteractiveSandbox conditionally spreads iframe props when embedding StackBlitz; StackBlitzEmbed spreads iframe props into rendered iframe.
Library landing page factory extension src/routes/-library-landing.tsx	createLibraryLandingPage function accepts optional options parameter with hasStackBlitzEmbed flag and conditionally injects headers into route config.
Route example page headers src/routes/$libraryId/$version.docs.framework.$framework.examples.$.tsx	Example route applies stackBlitzEmbedHeaders to route head configuration.
Library landing routes enablement src/routes/form.$version.index.tsx, src/routes/query.$version.index.tsx, src/routes/ranger.$version.index.tsx, src/routes/router.$version.index.tsx, src/routes/table.$version.index.tsx, src/routes/virtual.$version.index.tsx	Five library landing routes pass hasStackBlitzEmbed: true option to enable StackBlitz embed configuration.

🎯 2 (Simple) | ⏱️ ~8 minutes

🐰 Cross-origin walls now stand tall and true,
StackBlitz embeds get headers anew,
Five landing routes all join in the cheer,
Security headers, crystal clear! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding StackBlitz iframe isolation through headers and props.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/stackblitz-embed-isolation

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}