// display-case: no-placard — Display Case's own browse chrome, cased for // dogfooding (ShellView.case.tsx); internal plumbing, not a consumer primitive. import { type CSSProperties, type ReactNode, useState } from 'react' import type { ManifestComponent } from '../../../../core/manifest' import type { TweakDescriptor } from '../../../../index' import { DocMarkdown } from '../../../markdown' import { buildUrl, componentMatchesFilter, DEVICES, DOC_MAX_W, DOC_MIN_W, type ExhibitNode, humanizeTweakKey, levelLabel, type Mode, RESPONSIVE, SIDEBAR_MAX_W, SIDEBAR_MIN_W, STAGE_FADE_MS, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP, } from '../../../shell-core' import { DcTestIds } from '../../../test-ids' import type { ShellViewModel } from '../../../use-shell' import type { SegmentedOption } from '..' import { A11yPanel, Button, Chip, Eyebrow, FlowNav, IconButton, Input, NavItem, RenderAddress, SegmentedToggle, SelectMenu, Sidebar, Stage, TweaksPanel, Wordmark, } from '..' /** * The browse chrome, as a pure function of its {@link ShellViewModel}. Every * piece of state, every derived layout number, and every event handler is fed * in — `ShellView` only arranges them into the header, nav rail, stage, and * Primer host. The live render/Primer iframes are injected as `renderFrame` / * `primerFrame` slots, so the same view paints either the running chrome (real * iframes, from {@link useShell}) or a static page/flow exhibit (a stub slot * over a hand-built model). This is what lets Display Case dogfood its own * layout as a template, page, and flow. */ export interface ShellViewProps extends ShellViewModel { /** The stage's preview surface — the live `