CaseBuilderBackdropPicker

Thumbnail picker for the 3D stage backdrop presets. Each thumb is the CSS twin of its preset, generated from the same definition module the WebGL scene consumes, so swatch and stage cannot drift.

Product-Specific Blocks

Picker (JA, default active)

Picker (EN, dark studio active)

Preset sheet (CSS twins, large)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the 3D stage backdrop picker + preset swatches (#1944). Pure/sync // render — the CSS twins come straight from stage-backdrops.ts, no WebGL. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BackdropPicker } from './backdrop-picker'; import { STAGE_BACKDROPS, backdropCssBackground } from './case-3d/stage-backdrops'; const meta: StoryMeta = { title: 'CaseBuilderBackdropPicker', category: 'Product-Specific Blocks', description: 'Thumbnail picker for the 3D stage backdrop presets. Each thumb is the CSS twin of its preset, generated from the same definition module the WebGL scene consumes, so swatch and stage cannot drift.', usage: `import { BackdropPicker } from '@/src/components/case-builder/backdrop-picker';\n\n<BackdropPicker activeId="warm-neutral" locale="ja" onSelect={() => {}} />`, }; export default meta; const noop = () => {}; export const Picker = defineStory({ name: 'Picker (JA, default active)', render: () => <BackdropPicker activeId="warm-neutral" locale="ja" onSelect={noop} />, }); export const PickerDarkActive = defineStory({ name: 'Picker (EN, dark studio active)', render: () => <BackdropPicker activeId="dark-studio" locale="en" onSelect={noop} />, }); export const PresetSheet = defineStory({ name: 'Preset sheet (CSS twins, large)', render: () => ( <ul style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', listStyle: 'none' }}> {STAGE_BACKDROPS.map((preset) => ( <li key={preset.id}> <div style={{ width: '200px', aspectRatio: '4 / 3', background: backdropCssBackground(preset), border: '1px solid rgba(214, 211, 209, 0.4)', }} /> <p class="font-futura text-xs text-zd-subtext"> {preset.label.en} / {preset.label.ja} </p> </li> ))} </ul> ), });