CaseBuilderAssembled3D

Zudo Block net SVGs folded into assembled 3D panel shells (open-top rack box: flat bottom, two side walls, low front/back rail strips). three.js loads only client-side via dynamic import — never in the eager islands bundle.

Product-Specific Blocks

3U · 40HP assembled

3U · 60HP assembled

7U · 40HP assembled

7U · 60HP assembled

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Dev harness for issues #1932 (3U) and #1933 (7U) — folds all four net cases // into assembled panel shells. The 7U cases are the elongated two-tier tray // (one continuous floor, side walls each tiled by two panels, a rail at each // far end). `render()` stays pure/sync/SSR-safe per the story contract; all // WebGL work happens inside AssembledCaseViewer's mount effect. Screenshotting // the live preview against the /products/zudo-block-intro/ product photos is // deferred to the manager (browser tooling is out of scope for this worktree); // the fold transform + crop-association math is covered by net-folding.test.ts. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { AssembledCaseViewer } from './assembled-case-viewer'; const meta: StoryMeta = { title: 'CaseBuilderAssembled3D', category: 'Product-Specific Blocks', description: 'Zudo Block net SVGs folded into assembled 3D panel shells (open-top rack box: flat bottom, two side walls, low front/back rail strips). three.js loads only client-side via dynamic import — never in the eager islands bundle.', usage: `import { AssembledCaseViewer } from '@/src/components/case-builder/case-3d/assembled-case-viewer';\n\n<AssembledCaseViewer netCaseId="3u-40hp" />`, }; export default meta; export const ThreeUFortyHp = defineStory({ name: '3U · 40HP assembled', render: () => <AssembledCaseViewer netCaseId="3u-40hp" />, }); export const ThreeUSixtyHp = defineStory({ name: '3U · 60HP assembled', render: () => <AssembledCaseViewer netCaseId="3u-60hp" />, }); export const SevenUFortyHp = defineStory({ name: '7U · 40HP assembled', render: () => <AssembledCaseViewer netCaseId="7u-40hp" />, }); export const SevenUSixtyHp = defineStory({ name: '7U · 60HP assembled', render: () => <AssembledCaseViewer netCaseId="7u-60hp" />, });