Skip to content

feat(react): add CardStack primitive and adopt it across surfaces#165

Merged
RhysSullivan merged 6 commits intoRhysSullivan:mainfrom
mrzmyr:ui/card-stack
Apr 11, 2026
Merged

feat(react): add CardStack primitive and adopt it across surfaces#165
RhysSullivan merged 6 commits intoRhysSullivan:mainfrom
mrzmyr:ui/card-stack

Conversation

@mrzmyr
Copy link
Copy Markdown
Contributor

@mrzmyr mrzmyr commented Apr 10, 2026

Summary

Introduces a new <CardStack> primitive that standardizes the grouped-card layout used across the app — one container style, consistent padding, hover affordances, and slotted title / description / action regions.

Adopts it in four places that were previously reinventing the same pattern with hand-rolled <div className="rounded-lg border ..."> markup:

  • Secrets page — each secret row becomes a <CardStackEntry> with title, description, and action slots.
  • Schema explorer — wrapped in <CardStack> / <CardStackHeader> with a computed field count.
  • Tool detail — schema and TypeScript sections use CardStack headers, plus a small EmptySection helper for consistent empty states.
  • Tool tree — the recursive tree rendering is flattened into a row-based layout inside a CardStack wrapper.

Changes

  • packages/react/src/components/card-stack.tsx (new, primitive)
  • packages/react/src/pages/secrets.tsx
  • packages/react/src/components/schema-explorer.tsx
  • packages/react/src/components/tool-detail.tsx
  • packages/react/src/components/tool-tree.tsx

Introduces a new `<CardStack>` primitive (and its Entry/Content/
Header sub-components) in packages/react/src/components/card-stack.tsx
that standardizes the grouped-card layout used across the app —
one container style, consistent padding, hover affordances, and
slotted title/description/action regions.

Adopts it in four places that were previously reinventing the same
pattern with hand-rolled `<div className="rounded-lg border ...">`
markup:

- Secrets page: each secret row becomes a `<CardStackEntry>` with
  title/description/actions slots.
- Schema explorer: wrapped in `<CardStack>`/`<CardStackHeader>`
  with a computed field count.
- Tool detail: schema and TypeScript sections use CardStack headers,
  plus a small `EmptySection` helper for consistent empty states.
- Tool tree: recursive tree rendering is flattened into a row-based
  layout inside a CardStack wrapper.
mrzmyr added 5 commits April 10, 2026 23:34
- annotate Plan types in billing_.plans to fix implicit any
- set 60s timeout on Cloudflare real-specs describe block
# Conflicts:
#	apps/cloud/src/routes/billing_.plans.tsx
@mrzmyr
Copy link
Copy Markdown
Contributor Author

mrzmyr commented Apr 11, 2026

@RhysSullivan ready to merge

@RhysSullivan RhysSullivan merged commit f6d694b into RhysSullivan:main Apr 11, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants