@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/core/scene/html-in-canvas/document/default-document-html-in-canvas-scene.tsx

@@ -0,0 +1,50 @@
+import { createHtmlInCanvasScene } from '../shared/default-html-in-canvas-scene'
+
+const documentLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDocumentSceneLandscape',
+  description: 'Document-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/default-document-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document',
+  aspectRatio: '16:9',
+  template: 'docs',
+})
+
+const documentHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDocumentSceneHorizontal',
+  description: 'Document-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/default-document-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document',
+  aspectRatio: '9:16',
+  template: 'docs',
+})
+
+export const DefaultHtmlInCanvasDocumentSceneLandscape = documentLandscape.Scene
+export const DefaultHtmlInCanvasDocumentSceneHorizontal = documentHorizontal.Scene
+export const DefaultHtmlInCanvasDocumentSceneLandscapeMetadata = documentLandscape.componentMetadata
+export const DefaultHtmlInCanvasDocumentSceneHorizontalMetadata = documentHorizontal.componentMetadata
+
+export const documentHtml = String.raw`
+  <article style="width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <section style="display:grid;align-content:start;padding:clamp(24px,4vw,64px);gap:20px;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.82));">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#cbd5e1;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#38bdf8;"></span>
+        Documentation
+      </div>
+      <h1 style="margin:0;max-width:12ch;font-size:clamp(42px,6vw,84px);line-height:.92;letter-spacing:-.07em;">Readable docs inside canvas</h1>
+      <p style="margin:0;max-width:680px;font-size:clamp(16px,2vw,22px);line-height:1.68;color:#cbd5e1;">
+        This template keeps headings, sections, and callouts aligned while the HTML fragment fills the entire frame.
+      </p>
+      <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px;">
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Overview</div>
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">API</div>
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Examples</div>
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Notes</div>
+      </div>
+    </section>
+    <aside style="display:grid;gap:16px;padding:clamp(20px,3vw,40px);background:#0f172a;">
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Outline</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">References</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Checklist</div>
+    </aside>
+  </article>
+`

package/src/core/scene/html-in-canvas/document/index.ts

@@ -0,0 +1,31 @@
+export {
+  DefaultHtmlInCanvasDocumentSceneLandscape,
+  DefaultHtmlInCanvasDocumentSceneHorizontal,
+  DefaultHtmlInCanvasDocumentSceneLandscapeMetadata,
+  DefaultHtmlInCanvasDocumentSceneHorizontalMetadata,
+  documentHtml,
+} from './default-document-html-in-canvas-scene'
+
+export {
+  DefaultHtmlInCanvasArticleSceneLandscape,
+  DefaultHtmlInCanvasArticleSceneHorizontal,
+  DefaultHtmlInCanvasArticleSceneLandscapeMetadata,
+  DefaultHtmlInCanvasArticleSceneHorizontalMetadata,
+  articleHtml,
+} from './article'
+
+export {
+  DefaultHtmlInCanvasReportSceneLandscape,
+  DefaultHtmlInCanvasReportSceneHorizontal,
+  DefaultHtmlInCanvasReportSceneLandscapeMetadata,
+  DefaultHtmlInCanvasReportSceneHorizontalMetadata,
+  reportHtml,
+} from './report'
+
+export {
+  DefaultHtmlInCanvasWhitepaperSceneLandscape,
+  DefaultHtmlInCanvasWhitepaperSceneHorizontal,
+  DefaultHtmlInCanvasWhitepaperSceneLandscapeMetadata,
+  DefaultHtmlInCanvasWhitepaperSceneHorizontalMetadata,
+  whitepaperHtml,
+} from './whitepaper'

package/src/core/scene/html-in-canvas/document/report/default-report-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasReportSceneLandscape, reportHtml } from './default-report-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/document/report/DefaultHtmlInCanvasReportSceneLandscape',
+  component: DefaultHtmlInCanvasReportSceneLandscape,
+  args: {
+    html: reportHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+

package/src/core/scene/html-in-canvas/document/report/default-report-html-in-canvas-scene.tsx

@@ -0,0 +1,51 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const reportLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasReportSceneLandscape',
+  description: 'Report-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/report/default-report-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.report',
+  aspectRatio: '16:9',
+  template: 'docs',
+})
+
+const reportHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasReportSceneHorizontal',
+  description: 'Report-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/report/default-report-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.report',
+  aspectRatio: '9:16',
+  template: 'docs',
+})
+
+export const DefaultHtmlInCanvasReportSceneLandscape = reportLandscape.Scene
+export const DefaultHtmlInCanvasReportSceneHorizontal = reportHorizontal.Scene
+export const DefaultHtmlInCanvasReportSceneLandscapeMetadata = reportLandscape.componentMetadata
+export const DefaultHtmlInCanvasReportSceneHorizontalMetadata = reportHorizontal.componentMetadata
+
+export const reportHtml = String.raw`
+  <article style="width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <section style="display:grid;align-content:space-between;padding:clamp(28px,4vw,72px);background:linear-gradient(135deg,#020617 0%,#0f172a 100%);border-right:1px solid rgba(255,255,255,.08);">
+      <div style="display:grid;gap:18px;max-width:700px;">
+        <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#94a3b8;">
+          <span style="width:10px;height:10px;border-radius:9999px;background:#f59e0b;"></span>
+          Report
+        </div>
+        <h1 style="margin:0;font-size:clamp(44px,6vw,92px);line-height:.92;letter-spacing:-.07em;">Structured reporting inside canvas</h1>
+        <p style="margin:0;max-width:760px;font-size:clamp(16px,2vw,22px);line-height:1.7;color:#cbd5e1;">
+          Use this for KPI summaries, executive readouts, and page-like reports that need dense but readable composition.
+        </p>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;">
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Revenue</div>
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Growth</div>
+        <div style="padding:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Retention</div>
+      </div>
+    </section>
+    <aside style="display:grid;gap:16px;padding:clamp(20px,3vw,40px);background:#0f172a;">
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Charts</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Trends</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Actions</div>
+    </aside>
+  </article>
+`

package/src/core/scene/html-in-canvas/document/report/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasReportSceneLandscape,
+  DefaultHtmlInCanvasReportSceneHorizontal,
+  DefaultHtmlInCanvasReportSceneLandscapeMetadata,
+  DefaultHtmlInCanvasReportSceneHorizontalMetadata,
+  reportHtml,
+} from './default-report-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/document/whitepaper/default-whitepaper-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,41 @@
+import {
+  DefaultHtmlInCanvasWhitepaperSceneLandscape,
+  whitepaperHtml,
+} from './default-whitepaper-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/document/whitepaper/DefaultHtmlInCanvasWhitepaperSceneLandscape',
+  component: DefaultHtmlInCanvasWhitepaperSceneLandscape,
+  args: {
+    html: whitepaperHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+

package/src/core/scene/html-in-canvas/document/whitepaper/default-whitepaper-html-in-canvas-scene.tsx

@@ -0,0 +1,50 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const whitepaperLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasWhitepaperSceneLandscape',
+  description: 'Whitepaper-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/whitepaper/default-whitepaper-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.whitepaper',
+  aspectRatio: '16:9',
+  template: 'docs',
+})
+
+const whitepaperHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasWhitepaperSceneHorizontal',
+  description: 'Whitepaper-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/whitepaper/default-whitepaper-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.whitepaper',
+  aspectRatio: '9:16',
+  template: 'docs',
+})
+
+export const DefaultHtmlInCanvasWhitepaperSceneLandscape = whitepaperLandscape.Scene
+export const DefaultHtmlInCanvasWhitepaperSceneHorizontal = whitepaperHorizontal.Scene
+export const DefaultHtmlInCanvasWhitepaperSceneLandscapeMetadata = whitepaperLandscape.componentMetadata
+export const DefaultHtmlInCanvasWhitepaperSceneHorizontalMetadata = whitepaperHorizontal.componentMetadata
+
+export const whitepaperHtml = String.raw`
+  <article style="width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.55fr);background:#f8fafc;color:#020617;overflow:hidden;">
+    <section style="display:grid;align-content:start;padding:clamp(28px,4vw,72px);gap:18px;background:linear-gradient(180deg,#fff 0%,#e2e8f0 100%);border-right:1px solid rgba(2,6,23,.08);">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#475569;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#2563eb;"></span>
+        Whitepaper
+      </div>
+      <h1 style="margin:0;max-width:12ch;font-size:clamp(42px,6vw,86px);line-height:.92;letter-spacing:-.07em;">Long-form thinking in a frame</h1>
+      <p style="margin:0;max-width:760px;font-size:clamp(16px,2vw,22px);line-height:1.75;color:#334155;">
+        This variant favors long-reading comfort, tighter typographic contrast, and a calm editorial structure.
+      </p>
+      <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:720px;">
+        <div style="padding:16px;border:1px solid rgba(2,6,23,.08);background:#fff;">Abstract</div>
+        <div style="padding:16px;border:1px solid rgba(2,6,23,.08);background:#fff;">Method</div>
+        <div style="padding:16px;border:1px solid rgba(2,6,23,.08);background:#fff;">Results</div>
+        <div style="padding:16px;border:1px solid rgba(2,6,23,.08);background:#fff;">Appendix</div>
+      </div>
+    </section>
+    <aside style="display:grid;gap:16px;padding:clamp(20px,3vw,40px);background:#e2e8f0;">
+      <div style="padding:18px;border:1px solid rgba(2,6,23,.08);background:#fff;">Citations</div>
+      <div style="padding:18px;border:1px solid rgba(2,6,23,.08);background:#fff;">Charts</div>
+      <div style="padding:18px;border:1px solid rgba(2,6,23,.08);background:#fff;">Conclusion</div>
+    </aside>
+  </article>
+`

package/src/core/scene/html-in-canvas/document/whitepaper/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasWhitepaperSceneLandscape,
+  DefaultHtmlInCanvasWhitepaperSceneHorizontal,
+  DefaultHtmlInCanvasWhitepaperSceneLandscapeMetadata,
+  DefaultHtmlInCanvasWhitepaperSceneHorizontalMetadata,
+  whitepaperHtml,
+} from './default-whitepaper-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/editor/default-html-in-canvas-editor-scene-Horizontal.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasEditorSceneHorizontal } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/editor/DefaultHtmlInCanvasEditorSceneHorizontal',
+  component: DefaultHtmlInCanvasEditorSceneHorizontal,
+  args: {
+    title: 'Code in Canvas',
+    subtitle: 'An editor-style HtmlInCanvas scene for live coding and layout previews.',
+    badge: 'Editor Canvas',
+    accent: '#22c55e',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/editor/default-html-in-canvas-editor-scene-Landscape.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasEditorSceneLandscape } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/editor/DefaultHtmlInCanvasEditorSceneLandscape',
+  component: DefaultHtmlInCanvasEditorSceneLandscape,
+  args: {
+    title: 'Code in Canvas',
+    subtitle: 'An editor-style HtmlInCanvas scene for live coding and layout previews.',
+    badge: 'Editor Canvas',
+    accent: '#22c55e',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/full-bleed/default-full-bleed-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,40 @@
+import {
+  DefaultHtmlInCanvasFullBleedSceneLandscape,
+  fullBleedHtml,
+} from './default-full-bleed-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/full-bleed/DefaultHtmlInCanvasFullBleedSceneLandscape',
+  component: DefaultHtmlInCanvasFullBleedSceneLandscape,
+  args: {
+    html: fullBleedHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/html-in-canvas/full-bleed/default-full-bleed-html-in-canvas-scene.tsx

@@ -0,0 +1,38 @@
+import { createHtmlInCanvasScene } from '../shared/default-html-in-canvas-scene'
+
+const fullBleedLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasFullBleedSceneLandscape',
+  description: 'Full-bleed HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/full-bleed/default-full-bleed-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.full-bleed',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const fullBleedHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasFullBleedSceneHorizontal',
+  description: 'Full-bleed HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/full-bleed/default-full-bleed-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.full-bleed',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasFullBleedSceneLandscape = fullBleedLandscape.Scene
+export const DefaultHtmlInCanvasFullBleedSceneHorizontal = fullBleedHorizontal.Scene
+export const DefaultHtmlInCanvasFullBleedSceneLandscapeMetadata = fullBleedLandscape.componentMetadata
+export const DefaultHtmlInCanvasFullBleedSceneHorizontalMetadata = fullBleedHorizontal.componentMetadata
+
+export const fullBleedHtml = String.raw`
+  <main style="width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#020617 0%,#0f172a 45%,#2563eb 100%);color:#f8fafc;overflow:hidden;">
+    <section style="width:min(92vw,1200px);height:min(88vh,680px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(2,6,23,.34);backdrop-filter:blur(18px);padding:clamp(24px,4vw,64px);text-align:center;">
+      <div style="display:grid;gap:18px;justify-items:center;">
+        <div style="padding:10px 14px;border:1px solid rgba(255,255,255,.16);letter-spacing:.28em;text-transform:uppercase;font-size:11px;">Full Bleed HTML</div>
+        <h1 style="margin:0;font-size:clamp(44px,7vw,92px);line-height:.9;letter-spacing:-.08em;">Canvas-sized HTML</h1>
+        <p style="margin:0;max-width:720px;font-size:clamp(16px,2vw,24px);line-height:1.65;color:#dbeafe;">
+          The fragment can occupy the entire runtime canvas and define its own grid without extra wrapper padding.
+        </p>
+      </div>
+    </section>
+  </main>
+`

package/src/core/scene/html-in-canvas/full-bleed/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasFullBleedSceneLandscape,
+  DefaultHtmlInCanvasFullBleedSceneHorizontal,
+  DefaultHtmlInCanvasFullBleedSceneLandscapeMetadata,
+  DefaultHtmlInCanvasFullBleedSceneHorizontalMetadata,
+  fullBleedHtml,
+} from './default-full-bleed-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/index.ts

@@ -0,0 +1,6 @@
+export * from './shared/default-html-in-canvas-scene'
+export * from './full-bleed'
+export * from './document'
+export * from './dashboard-shell'
+export * from './landing-page'
+export * from './media-wall'

package/src/core/scene/html-in-canvas/landing-page/default-landing-page-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,40 @@
+import {
+  DefaultHtmlInCanvasLandingPageSceneLandscape,
+  landingPageHtml,
+} from './default-landing-page-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/landing-page/DefaultHtmlInCanvasLandingPageSceneLandscape',
+  component: DefaultHtmlInCanvasLandingPageSceneLandscape,
+  args: {
+    html: landingPageHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/html-in-canvas/landing-page/default-landing-page-html-in-canvas-scene.tsx

@@ -0,0 +1,46 @@
+import { createHtmlInCanvasScene } from '../shared/default-html-in-canvas-scene'
+
+const landingPageLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasLandingPageSceneLandscape',
+  description: 'Landing page HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/default-landing-page-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const landingPageHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasLandingPageSceneHorizontal',
+  description: 'Landing page HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/default-landing-page-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasLandingPageSceneLandscape = landingPageLandscape.Scene
+export const DefaultHtmlInCanvasLandingPageSceneHorizontal = landingPageHorizontal.Scene
+export const DefaultHtmlInCanvasLandingPageSceneLandscapeMetadata = landingPageLandscape.componentMetadata
+export const DefaultHtmlInCanvasLandingPageSceneHorizontalMetadata = landingPageHorizontal.componentMetadata
+
+export const landingPageHtml = String.raw`
+  <main style="width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(135deg,#0f172a 0%,#111827 55%,#1d4ed8 100%);color:#f8fafc;overflow:hidden;">
+    <section style="display:grid;align-content:center;padding:clamp(24px,4vw,72px);gap:22px;max-width:1000px;">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#bfdbfe;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#60a5fa;"></span>
+        Landing Page
+      </div>
+      <h1 style="margin:0;font-size:clamp(46px,7vw,98px);line-height:.9;letter-spacing:-.08em;">A front page that fills the frame</h1>
+      <p style="margin:0;max-width:680px;font-size:clamp(16px,2vw,22px);line-height:1.7;color:#dbeafe;">
+        The HTML fragment can operate like a website hero, with sections stretching to the available viewport.
+      </p>
+      <div style="display:flex;gap:12px;flex-wrap:wrap;">
+        <button style="padding:14px 18px;border:1px solid rgba(255,255,255,.14);background:#f8fafc;color:#020617;">Get started</button>
+        <button style="padding:14px 18px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f8fafc;">Learn more</button>
+      </div>
+    </section>
+    <section style="display:grid;place-items:center;padding:clamp(20px,3vw,48px);">
+      <div style="width:min(100%,520px);aspect-ratio:1;border:1px solid rgba(255,255,255,.14);background:rgba(2,6,23,.38);display:grid;place-items:center;">Product hero media</div>
+    </section>
+  </main>
+`

package/src/core/scene/html-in-canvas/landing-page/feature-grid/default-feature-grid-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasFeatureGridSceneLandscape, featureGridHtml } from './default-feature-grid-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/landing-page/feature-grid/DefaultHtmlInCanvasFeatureGridSceneLandscape',
+  component: DefaultHtmlInCanvasFeatureGridSceneLandscape,
+  args: {
+    html: featureGridHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+

package/src/core/scene/html-in-canvas/landing-page/feature-grid/default-feature-grid-html-in-canvas-scene.tsx

@@ -0,0 +1,41 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const featureGridLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasFeatureGridSceneLandscape',
+  description: 'Feature grid HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/feature-grid/default-feature-grid-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.feature-grid',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const featureGridHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasFeatureGridSceneHorizontal',
+  description: 'Feature grid HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/feature-grid/default-feature-grid-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.feature-grid',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasFeatureGridSceneLandscape = featureGridLandscape.Scene
+export const DefaultHtmlInCanvasFeatureGridSceneHorizontal = featureGridHorizontal.Scene
+export const DefaultHtmlInCanvasFeatureGridSceneLandscapeMetadata = featureGridLandscape.componentMetadata
+export const DefaultHtmlInCanvasFeatureGridSceneHorizontalMetadata = featureGridHorizontal.componentMetadata
+
+export const featureGridHtml = String.raw`
+  <main style="width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;background:linear-gradient(135deg,#0f172a 0%,#020617 100%);color:#f8fafc;overflow:hidden;">
+    <header style="padding:clamp(20px,3vw,48px);display:grid;gap:14px;">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#bfdbfe;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#38bdf8;"></span>
+        Feature Grid
+      </div>
+      <h1 style="margin:0;font-size:clamp(36px,5vw,78px);line-height:.92;letter-spacing:-.07em;">A compact features section</h1>
+    </header>
+    <section style="padding:clamp(20px,3vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;">
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Feature 1</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Feature 2</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);">Feature 3</div>
+    </section>
+  </main>
+`

package/src/core/scene/html-in-canvas/landing-page/feature-grid/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasFeatureGridSceneLandscape,
+  DefaultHtmlInCanvasFeatureGridSceneHorizontal,
+  DefaultHtmlInCanvasFeatureGridSceneLandscapeMetadata,
+  DefaultHtmlInCanvasFeatureGridSceneHorizontalMetadata,
+  featureGridHtml,
+} from './default-feature-grid-html-in-canvas-scene'
+