docs(hub-ui): add seamless iframe comparison story

Author: dvcolomban

packages/hub-ui/src/client/components/dock/DockEmbedded.stories.ts

@@ -1,4 +1,5 @@
 import type { DevframeDockEntry } from '@devframes/hub'
+import type { DocksContext } from '@devframes/hub/client'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { h } from 'vue'
 import { categorizedEntries } from '../../stories/fixtures'
@@ -13,6 +14,61 @@ const blankEntries: DevframeDockEntry[] = [
   { id: 'assets', type: 'iframe', url: 'about:blank', title: 'Assets', icon: 'ph:images-duotone' },
 ] as DevframeDockEntry[]
 
+const dashboardUrl = '/iframe.html?id=dock-shell-embedded--dashboard-fixture&viewMode=story'
+
+function dashboardEntries(seamless: boolean): DevframeDockEntry[] {
+  return [{
+    id: 'dashboard',
+    type: 'iframe',
+    url: dashboardUrl,
+    title: 'Dashboard',
+    icon: 'ph:gauge-duotone',
+    ...(seamless ? { presentation: 'seamless' as const } : {}),
+  }] as DevframeDockEntry[]
+}
+
+function dashboardStage(context: DocksContext) {
+  return h('div', {
+    style: {
+      background: 'radial-gradient(circle at 25% 15%, #4338ca 0, #172033 38%, #090e19 100%)',
+      color: '#f8fafc',
+      minHeight: '100vh',
+      padding: '32px',
+    },
+  }, [
+    h('h1', { style: { font: '600 24px system-ui, sans-serif', margin: 0 } }, 'Host application'),
+    h('p', { style: { font: '14px system-ui, sans-serif', opacity: 0.65 } }, 'An embedded dashboard over the host surface'),
+    h(DockEmbedded, { context }),
+  ])
+}
+
+function dashboardContent() {
+  const card = (title: string, value: string) => h('article', {
+    style: {
+      background: '#111827cc',
+      border: '1px solid #ffffff24',
+      borderRadius: '12px',
+      padding: '20px',
+    },
+  }, [
+    h('h2', { style: { fontSize: '13px', fontWeight: 500, margin: '0 0 10px', opacity: 0.65 } }, title),
+    h('strong', { style: { fontSize: '28px' } }, value),
+  ])
+
+  return h('main', {
+    style: {
+      background: 'linear-gradient(135deg, #312e81, #111827 65%)',
+      color: '#f8fafc',
+      display: 'grid',
+      font: '14px system-ui, sans-serif',
+      gap: '16px',
+      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+      minHeight: '100vh',
+      padding: '24px',
+    },
+  }, [card('Requests', '12.4k'), card('Success rate', '99.98%')])
+}
+
 const meta = {
   title: 'Dock/Shell/Embedded',
   component: DockEmbedded,
@@ -31,6 +87,13 @@ const meta = {
 export default meta
 type Story = StoryObj
 
+/** Same-origin content used by the iframe presentation examples below. */
+export const DashboardFixture: Story = {
+  render: () => ({
+    setup: () => dashboardContent,
+  }),
+}
+
 /** Float mode, panel closed — just the resting dock bar. */
 export const FloatClosed: Story = {
   render: () => ({
@@ -51,6 +114,26 @@ export const FloatOpen: Story = {
   }),
 }
 
+/** Float mode embedding a dashboard with the default viewer chrome. */
+export const FloatOpenDashboard: Story = {
+  render: () => ({
+    setup: () => mountWithContext(
+      { entries: dashboardEntries(false), selectedId: 'dashboard', panel: { mode: 'float', position: 'bottom', left: 50, top: 100, inactiveTimeout: -1, width: 60, height: 60 } },
+      dashboardStage,
+    ),
+  }),
+}
+
+/** Float mode embedding the same dashboard without the viewer's own chrome. */
+export const FloatOpenDashboardSeamless: Story = {
+  render: () => ({
+    setup: () => mountWithContext(
+      { entries: dashboardEntries(true), selectedId: 'dashboard', panel: { mode: 'float', position: 'bottom', left: 50, top: 100, inactiveTimeout: -1, width: 60, height: 60 } },
+      dashboardStage,
+    ),
+  }),
+}
+
 /**
  * `panelOverlapFactor: 0.2` — the panel slides clear of the dock bar, leaving
  * most of the bar hanging past the panel edge so the iframe underneath stays