open-ds 0.0.0-stage → 0.1.0

package/assets/skills/open-ds/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: open-ds
+description: Build UI with an Open DS scheme. Use when you pick a design system, deploy one into a project, or write UI in a project that has open-ds.json.
+---
+
+# Open DS
+
+An Open DS scheme is a full design system as data. It answers a fixed set of questions (the grammar) and gives the reason for each answer. Tokens, components, usage rules and voice follow from those answers.
+
+## Focused skills
+
+This skill is the overview. For each job there is a focused skill next to it:
+
+| Skill            | When                                      |
+| ---------------- | ----------------------------------------- |
+| `open-ds-choose` | Pick a scheme and take it into a project. |
+| `open-ds-build`  | Build UI in a project that uses a scheme. |
+| `open-ds-write`  | Write copy in the scheme's voice.         |
+| `open-ds-change` | Change a token, a component or an answer. |
+| `open-ds-review` | Review UI against the scheme.             |
+
+The MCP server serves the same five as prompts.
+
+## Pick a scheme
+
+1. Run `open-ds list`, or call the MCP tool `list_schemes`.
+2. Read `ai.use_when` and `ai.avoid_when` of each scheme. Pick the one that fits the product.
+3. If two fit, read `scenarios` in each scheme. Pick the closest one.
+
+## Deploy it
+
+- CLI: `open-ds init <scheme> --dir <project>`. Add `--brand <id>` for a multi-brand scheme.
+- MCP: call `plan_init` (or `plan_create` for a new project). It returns the exact command and the files it writes; run the command. The server never writes to your disk.
+- Then install the packages that the command prints. Import `src/styles/open-ds.css` after Tailwind.
+
+## Build UI in a project that uses a scheme
+
+1. Read `AGENTS.md`. It holds the usage rules and the voice.
+2. Before you choose a token, a component or a variant, find the situation: `open-ds when <scheme> <words>` or the MCP tool `when_to_use`. Do what the rule says. Do not do what its "not" says.
+3. Use only the components in `src/components/ui` and the CSS variables in `src/styles/open-ds.css`. Do not write raw colors, sizes or spacing.
+4. To change how a component looks, change a component key (for example `--button-radius`). Do not edit the component.
+5. Write copy in the scheme's voice. Read the usage rules of the voice situations (button-label, error-words, success-words, empty-words, confirm-words, first-visit): each gives the tone, a rule and an example.
+6. To explain a decision, run `open-ds why <scheme> <question-id>` or call `why`. Quote the answer and its reasons.
+7. Before you use a colour, read its guidance: `open-ds context <scheme> <token>` or `get_context`. Never use it for a case in its `not_for`, and put text only on the fills it lists. Status goes by real risk: info, then warning, then danger.
+
+## Do not
+
+- Do not mix two schemes in one product.
+- Do not use color alone to show meaning.
+- Do not remove focus rings.

package/assets/skills/open-ds-build/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: open-ds-build
+description: Build UI in a project that uses an Open DS scheme. Use whenever you write or edit screens, components or styles in a project with open-ds.json.
+---
+
+# Build UI with the scheme
+
+Before you start, call `get_context build` (or `open-ds context <scheme> build`). Before you use a colour, read its guidance with `get_context <token>`: its intent, what not to use it for and the fills it may sit on.
+
+1. Read `AGENTS.md` first. It holds the usage rules and the voice for this scheme.
+2. Before you pick a component, a variant or a token, find the situation: `npx open-ds when <scheme> <words>` or the MCP tool `when_to_use`. Do what its rule says, never what its "not" says.
+3. Use only the components in `src/components/ui` and the scheme's CSS variables. No raw colours, sizes or spacing.
+4. Use only components in the scheme's inventory (`get_inventory`). If you need one that is missing, say so and add it with `npx open-ds add <component>` (`plan_add`), or ask; do not build a look-alike.
+5. To change how a component looks, change its component key (for example `--button-radius`), not the component file.
+6. Light first: build and check the light theme, then dark.
+7. Write the words with open-ds-write.
+8. Before you finish, check the screen with open-ds-review.
+
+To explain a decision, call `why` with the question id or the component key, and quote the answer and its reasons.

package/assets/skills/open-ds-change/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: open-ds-change
+description: Change an Open DS design system: a token, a component or an answer. Use when the product differs from the scheme, or a value, colour, size or rule needs to change.
+---
+
+# Change the design system
+
+Pick the smallest layer that does the job:
+
+1. **A look on one component:** change its component key in the project's tokens (for example `button/radius`). The component reads it.
+2. **A value everywhere:** change the semantic token it comes from. Find it with `why <scheme> <component-key>` or `get_key`.
+3. **A raw option:** change the primitive the semantic points at (a palette step, a size, a corner). The primitives page on open-ds.dev shows what uses each one.
+4. **A decision:** when the product is different, change the answer itself. Call `what_moves` first: it lists the answers and tokens that follow from it. Write the new reason.
+
+Then:
+
+- Rebuild the tokens: `npm run tokens` in a created project.
+- Keep light and dark working, and keep contrast at WCAG AA.
+- Say what you changed, at which layer, and why. Quote the old answer if you changed one.

package/assets/skills/open-ds-choose/SKILL.md

@@ -0,0 +1,18 @@
+---
+name: open-ds-choose
+description: Pick an Open DS scheme for a product and take it into a project. Use before a project has a design system, or when someone asks which design system fits.
+---
+
+# Choose and take a scheme
+
+1. List the schemes: `npx open-ds list`, or the MCP tool `list_schemes`.
+2. Read each scheme's `use_when` and `avoid_when`. Pick the one that fits the product: its people, content and main task.
+3. If two fit, compare them: the MCP tool `compare_schemes`, or open both on open-ds.dev. Read the reasons, not only the looks.
+4. Take it:
+   - A new design system project: `npx open-ds create <dir> --scheme <id>` (the MCP tool `plan_create` returns the exact command and the files it writes).
+   - An existing app: `npx open-ds init <id> --dir .` (`plan_init`).
+   - A multi-brand scheme needs `--brand <id>`.
+5. Run the command yourself. The MCP server never writes to your disk.
+6. Tell the person which scheme you picked and quote the reasons that made it fit.
+
+The questions and answers are a starting point, not a standard. If one answer is wrong for the product, say which, and change it later with open-ds-change.

package/assets/skills/open-ds-review/SKILL.md

@@ -0,0 +1,22 @@
+---
+name: open-ds-review
+description: Review UI against an Open DS scheme. Use before you finish a screen, or when someone asks whether UI follows the design system.
+---
+
+# Review UI against the scheme
+
+Check each point and report what fails, with the rule it breaks:
+
+1. **Components:** only components from `src/components/ui`, and only ones in the inventory (`get_inventory`). No look-alikes.
+2. **Tokens:** no raw colours, sizes, spacing, radii or shadows. Only the scheme's variables and component keys.
+3. **Usage rules:** each choice matches its situation (`when_to_use`): number in a table, status label, destructive action, field label, focus.
+4. **Voice:** labels, errors, empty and success messages follow the voice (open-ds-write).
+5. **Meaning:** colour is never the only signal. Check every colour against its guidance (`get_context <token>` or `open-ds context <scheme> <token>`): it is used for what its intent says, and never for a case in its `not_for`. Use what `not_for` names instead.
+6. **Urgency:** a status matches the real risk: info, then warning, then danger. Never a higher level to get attention. Success sits outside the order.
+7. **Pairs:** text and icons sit only on the fills their guidance lists (`sits_on`). Tag text is `color.text.primary` on a category fill. Disabled controls use the disabled set, not opacity.
+8. **Access:** visible focus, labels on every control, targets the scheme's size, WCAG AA contrast.
+9. **Themes:** light first, and dark works too.
+
+Start with `get_context review` (or `open-ds context <scheme> review`): it returns every rule, every colour's guidance and the urgency order in one call.
+
+For each failure, give the fix and quote the scheme's reason with `why`.

package/assets/skills/open-ds-write/SKILL.md

@@ -0,0 +1,13 @@
+---
+name: open-ds-write
+description: Write interface copy in the voice of an Open DS scheme. Use for button labels, errors, success and empty messages, confirmations and first-visit hints.
+---
+
+# Write in the scheme's voice
+
+1. Read the voice: `npx open-ds show <scheme>` or `get_scheme` with part `voice`. Note its summary, principles and the words to use and avoid.
+2. For each message, find its situation with `when_to_use`: button-label, error-words, success-words, empty-words, confirm-words or first-visit. Each rule gives the tone, a rule and an example.
+3. Match the example's shape, not its words. Use the product's own objects and numbers.
+4. Buttons: one verb, the action itself. Errors: what happened, then what to do. Empty states: why it is empty, then the next step. Confirmations: name the object and the consequence.
+5. Never use the words the voice says to avoid.
+6. Keep it short. If a message needs two sentences, the first says what happened.

package/assets/stories/accordion.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "accordion", situations: [] } },
+  title: "Components/Accordion",
+  component: Accordion,
+  args: { type: "single", collapsible: true },
+} satisfies Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Show component="accordion">
+      {(s) => (
+        <Accordion {...args} className="max-w-lg">
+          {s.metrics.map((m) => (
+            <AccordionItem key={m.label} value={m.label}>
+              <AccordionTrigger>{m.label}</AccordionTrigger>
+              <AccordionContent>{m.value}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="accordion">
+      {(s) => (
+        <Accordion type="single" collapsible defaultValue={s.metrics[0].label} className="max-w-lg">
+          {s.metrics.map((m) => (
+            <AccordionItem key={m.label} value={m.label}>
+              <AccordionTrigger>{m.label}</AccordionTrigger>
+              <AccordionContent>{m.value}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/alert-dialog.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  Button,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "alert-dialog", situations: ["destructive-action", "confirm-words"] } },
+  title: "Components/Alert dialog",
+  component: AlertDialog,
+} satisfies Meta<typeof AlertDialog>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Show component="alert-dialog">
+      {(s) => (
+        <AlertDialog {...args}>
+          <AlertDialogTrigger asChild>
+            <Button variant="secondary">{s.confirm?.trigger ?? s.actions.secondary}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{s.confirm?.title ?? s.actions.secondary}</AlertDialogTitle>
+            </AlertDialogHeader>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="alert-dialog">
+      {(s) => (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="secondary">{s.confirm?.trigger ?? s.actions.secondary}</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>{s.confirm?.title ?? s.actions.secondary}</AlertDialogTitle>
+              <AlertDialogDescription>{s.confirm?.body ?? ""}</AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>{s.confirm?.cancel ?? "Cancel"}</AlertDialogCancel>
+              <AlertDialogAction>{s.confirm?.confirm ?? s.actions.primary}</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/alert.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Alert, AlertTitle, AlertDescription } from "@open-ds/ui";
+import { AlertTriangle } from "lucide-react";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "alert", situations: ["error-message", "status-label"] } },
+  title: "Components/Alert",
+  component: Alert,
+  args: { variant: "default" },
+} satisfies Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Alert {...args} className="max-w-lg">
+      <AlertTriangle />
+      <AlertTitle>Alert</AlertTitle>
+      <AlertDescription>Stays on the page until the cause is fixed.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="alert">
+      {(s) => (
+        <div className="grid max-w-lg gap-[var(--space-gap-default)]">
+          {/* Warning and danger statuses, each in the tone its meaning picks. */}
+          {s.statuses
+            .filter((x) => x.meaning === "warning" || x.meaning === "danger")
+            .map((x) => (
+              <Alert key={x.label} variant={x.meaning === "danger" ? "destructive" : "default"}>
+                <AlertTriangle />
+                <AlertTitle>{x.label}</AlertTitle>
+                <AlertDescription>{x.why}</AlertDescription>
+              </Alert>
+            ))}
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/aspect-ratio.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AspectRatio } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "aspect-ratio", situations: [] } },
+  title: "Components/Aspect ratio",
+  component: AspectRatio,
+  args: { ratio: 16 / 9 },
+} satisfies Meta<typeof AspectRatio>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="max-w-md">
+      <AspectRatio {...args} className="rounded-[var(--radius-container)] bg-[var(--color-surface-sunken)]" />
+    </div>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="aspect-ratio">
+      {(s) => (
+        <div className="max-w-md">
+          <AspectRatio
+            ratio={16 / 9}
+            className="flex items-end rounded-[var(--radius-container)] bg-[var(--color-surface-sunken)] p-[var(--space-inset-container)]"
+          >
+            <span className="[font-weight:var(--type-heading-font-weight)]">{s.screen}</span>
+          </AspectRatio>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/avatar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar, AvatarFallback } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "avatar", situations: [] } },
+  title: "Components/Avatar",
+  component: Avatar,
+} satisfies Meta<typeof Avatar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Avatar {...args}>
+      <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="avatar">
+      {(s) => (
+        <div className="flex gap-[var(--space-gap-default)]">
+          {s.metrics.slice(0, 3).map((m) => (
+            <Avatar key={m.label} title={m.label}>
+              <AvatarFallback>
+                {m.label
+                  .split(" ")
+                  .slice(0, 2)
+                  .map((w) => w[0])
+                  .join("")
+                  .toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          ))}
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/badge.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "badge", situations: ["status-label", "status-shape"] } },
+  title: "Components/Badge",
+  component: Badge,
+  args: { children: "Status", tone: "neutral" },
+  argTypes: { tone: { control: "inline-radio", options: ["neutral", "info", "success", "warning", "danger"] } },
+} satisfies Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+// Each status shows in the tone its meaning picks. Danger appears only where the scheme says something failed.
+export const Examples: Story = {
+  render: () => (
+    <Show component="badge">
+      {(s) => (
+        <div>
+          <dl className="grid max-w-2xl grid-cols-[auto_1fr] items-center gap-x-[var(--space-gap-group)] gap-y-[var(--space-gap-default)]">
+            {s.statuses.map((x) => (
+              <div key={x.label} className="contents">
+                <dt>
+                  <Badge tone={x.meaning}>{x.label}</Badge>
+                </dt>
+                <dd className="text-[var(--color-text-secondary)]">
+                  {x.meaning}: {x.why}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/breadcrumb.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "breadcrumb", situations: ["link", "keyboard-focus"] } },
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+} satisfies Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Breadcrumb {...args}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Page</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="breadcrumb">
+      {(s) => (
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">{s.screen}</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{s.card?.title ?? s.metrics[0].label}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/button.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "@open-ds/ui";
+import { Download, MoreHorizontal } from "lucide-react";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: {
+    openDs: {
+      component: "button",
+      situations: ["commit-action", "alternative-action", "destructive-action", "row-action"],
+    },
+  },
+  title: "Components/Button",
+  component: Button,
+  args: { children: "Continue", variant: "primary", size: "default" },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["primary", "secondary", "ghost"] },
+    size: { control: "inline-radio", options: ["default", "compact", "icon"] },
+  },
+} satisfies Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="button">
+      {(s) => (
+        <div>
+          <div className="flex flex-wrap items-center gap-[var(--space-gap-default)]">
+            <Button>{s.actions.primary}</Button>
+            <Button variant="secondary">
+              <Download /> {s.actions.secondary}
+            </Button>
+            {s.confirm && <Button variant="ghost">{s.confirm.cancel}</Button>}
+            <Button variant="ghost" size="icon" aria-label={s.menu?.trigger ?? "More actions"}>
+              <MoreHorizontal />
+            </Button>
+            <Button disabled>{s.actions.primary}</Button>
+          </div>
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/calendar.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Calendar } from "@open-ds/ui";
+import { Show } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "calendar", situations: ["keyboard-focus"] } },
+  title: "Components/Calendar",
+  component: Calendar,
+  args: { mode: "single" },
+} satisfies Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="calendar">
+      {(s) => (
+        <div className="flex flex-col gap-[var(--space-gap-default)]">
+          <p className="text-[var(--color-text-secondary)]">{s.field.label}</p>
+          <Calendar
+            mode="single"
+            className="rounded-[var(--radius-container)] border border-[var(--color-border-default)]"
+          />
+        </div>
+      )}
+    </Show>
+  ),
+};

package/assets/stories/card.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@open-ds/ui";
+import { Show, toneOf } from "../src/samples";
+
+const meta = {
+  parameters: { openDs: { component: "card", situations: ["card", "related-items", "between-sections"] } },
+  title: "Components/Card",
+  component: Card,
+} satisfies Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <Show component="card">
+      {(s) => (
+        <Card {...args} className="max-w-md">
+          <CardHeader>
+            <CardTitle>{s.card!.title}</CardTitle>
+            <CardDescription>{s.card!.description}</CardDescription>
+          </CardHeader>
+        </Card>
+      )}
+    </Show>
+  ),
+};
+
+export const Examples: Story = {
+  render: () => (
+    <Show component="card">
+      {(s) => (
+        <div className="max-w-md">
+          <Card>
+            <CardHeader>
+              <CardTitle>{s.card!.title}</CardTitle>
+              <CardDescription>{s.card!.description}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Badge tone={toneOf(s, s.card!.status)}>{s.card!.status}</Badge>
+            </CardContent>
+            <CardFooter>
+              <Button>{s.card!.primary}</Button>
+              <Button variant="ghost">{s.card!.secondary}</Button>
+            </CardFooter>
+          </Card>
+        </div>
+      )}
+    </Show>
+  ),
+};