SM Widgets — component browser

Static storybook for the SM Widgets catalog shipped by cliff-tech/projects/c-tech (GitHub: clifftechnologies-co/sm-widgets-native).

Every page in this storybook renders two preview axes side-by-side:

• Responsive Preview — three sandboxed iframes at 375 / 768 / 1280 px viewport widths so real @media queries fire (mobile / tablet / desktop).
• Container Tier — the same component re-rendered at three container widths (compact / regular / expanded) via <sm-widget-showcase>. Exercises the SM widget responsive system (container queries).

Three layers

1. Primitives — the 8 Katagami canonical atoms (HStack, VStack, ZStack, Grid, Text, Button, Spacer, Section). Source-of-truth lives in shikki/packages/Katagami/Sources/KatagamiCore/Canonical/. These are identical across every agency-client storybook; they're DSL layout building blocks, not c-tech-specific.
2. Widgets (c-tech v0) — 6 single-purpose retail commerce components built on top of the primitives: SMPlayer, sm-qr, sm-product, sm-people, sm-endcap, sm-program-guide.
3. Compositions — 2 widgets composed of the above: sm-shoppable-product, sm-cart.

Reading order

1. Walk the primitives first — each widget's description mentions which primitives compose it.
2. Move into widgets to see those primitives stack into single-purpose components.
3. End on compositions to see how widgets compose further.

Regenerate

cd packages/SMWidgets/web/storybook
python3 _gen_pages.py    # emits 16 main + 16 bare HTML files

Strategic follow-up: replace this Python generator with the KagamiStorybook Swift target (see W3 spec features/katagami-storybook-base-extraction-w3.md) so every agency client emits the same primitive pages from one source-of-truth.