CaseBuilderPanelProof

Proof-of-concept three.js extrusion of one Zudo Block net-SVG panel (bevelEnabled: false, 5mm deep, holes preserved). three.js loads only client-side via dynamic import — never in the eager islands bundle.

Product-Specific Blocks

3U · 40HP net

7U · 60HP net

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Proof-of-concept story for issue #1930 (three.js infra + net-SVG extrusion). // `render()` stays pure/sync/SSR-safe per the story contract — all WebGL work // happens inside PanelProofViewer's mount effect, never here. Screenshotting // the live preview is deferred to the manager (browser tooling is out of // scope for this worktree per the issue's hard rules); the extraction/hole/ // mm-scaling behavior this proof depends on is covered by extrude.test.ts. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PanelProofViewer } from './panel-proof-viewer'; const meta: StoryMeta = { title: 'CaseBuilderPanelProof', category: 'Product-Specific Blocks', description: 'Proof-of-concept three.js extrusion of one Zudo Block net-SVG panel (bevelEnabled: false, 5mm deep, holes preserved). three.js loads only client-side via dynamic import — never in the eager islands bundle.', usage: `import { PanelProofViewer } from '@/src/components/case-builder/case-3d/panel-proof-viewer';\n\n<PanelProofViewer assetUrl="/images/zudo-block-diagrams/zudo-block-40-3dp-a.svg" />`, }; export default meta; export const ThreeUFortyHp = defineStory({ name: '3U · 40HP net', render: () => <PanelProofViewer assetUrl="/images/zudo-block-diagrams/zudo-block-40-3dp-a.svg" />, }); export const SevenUSixtyHp = defineStory({ name: '7U · 60HP net', render: () => ( <PanelProofViewer assetUrl="/images/zudo-block-diagrams/zudo-block-60x2-3dp-a.svg" /> ), });