Pattern · DRAFT
Experimental Stack Surface
experimental-stack-surface · v0.1.0
Phase 1 composition proof that stacks content inside a surface. Not a production pattern.
Use when
- Validating that packages/patterns can compose packages/ui primitives
- Exercising registry schema validation during the runtime foundation
Avoid when
- Building a real C2C product interface
- Treating this record as canonical or as a substitute for editor-sidebar, asset-picker, or other roadmap patterns
Invariants
- Status must remain DRAFT until a real workflow pattern replaces this proof.
- Must compose Surface, Stack, and Button rather than inlining a one-off layout.
- Must not contain product-specific business logic.
Variants
- With action: Optional action button rendered below the composed content.
States
- default
- narrow/mobile
- reduced-motion
Anatomy
- surface: Provides the bounded, token-backed container.
- stack: Spaces title, body, and optional action vertically.
- action: Optional Button primitive for a single next step.
Responsive
Narrow: Single column below the `md` breakpoint (768px). Action remains in normal flow.
Medium: Same composition from `md` to `lg`. No multi-column split.
Wide: Same composition from `lg` upward. This proof does not grow a desktop-only layout.
Accessibility
Roles: region, heading, button
Keyboard
- Action uses a native button and is reachable in tab order when present.
Labeling: The surface region is labelled by the visible title.
Contrast: Foreground, muted, and primary colors resolve through foundation tokens.
Reduced motion: Button hover transitions consume motion tokens that collapse to 0ms under prefers-reduced-motion.
Extension points
- title and description copy
- optional action label and click handler
- children slot for additional proof content
Implementation
@c2c-ui-forge/patterns · ExperimentalStackSurface
packages/patterns/src/experimental-stack-surface.tsx