@ponti-studios/ui 0.3.0 → 0.4.1

package/src/styles.css

@@ -1,88 +1,176 @@
 @import "tailwindcss";
-@import "./tokens/generated/foundations.css";
-@import "./tokens/generated/light.css";
-@import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
+@import "./tokens.css";
 @import "./animations.css";
 
-/* Keep generated token names isolated from Tailwind's standard role names. */
-:root {
-  --ponti-primary: var(--color-accent);
-  --ponti-primary-foreground: var(--color-text-on-accent);
-  --ponti-destructive: var(--color-destructive);
-  --ponti-destructive-foreground: var(--color-text-on-destructive);
-  --ponti-foreground: var(--color-text-primary);
-  --ponti-muted-foreground: var(--color-text-secondary);
-  --ponti-border: var(--color-border-default);
-  --ponti-ring: var(--color-ring-focus);
-}
-
 /* shadcn New York semantic contract. Values are generated from the DTCG
  * source; this file only names the roles consumed by web components. */
 @theme inline {
-  --color-background: var(--color-surface-canvas);
-  --color-foreground: var(--ponti-foreground);
-  --color-card: var(--color-surface-panel);
-  --color-card-foreground: var(--color-text-primary);
-  --color-popover: var(--color-surface-raised);
-  --color-popover-foreground: var(--color-text-primary);
-  --color-primary: var(--ponti-primary);
-  --color-primary-foreground: var(--ponti-primary-foreground);
-  --color-secondary: var(--color-surface-panel);
-  --color-secondary-foreground: var(--color-text-primary);
-  --color-muted: var(--color-surface-inset);
-  --color-muted-foreground: var(--ponti-muted-foreground);
-  --color-accent-foreground: var(--color-text-primary);
-  --color-destructive-foreground: var(--ponti-destructive-foreground);
-  --color-border: var(--ponti-border);
-  --color-input: var(--ponti-border);
-  --color-ring: var(--ponti-ring);
-  --color-chart-1: var(--color-border-focus);
-  --color-chart-2: var(--color-chart-positive);
-  --color-chart-3: var(--color-border-focus);
-  --color-chart-4: var(--color-text-warning);
-  --color-chart-5: var(--color-border-strong);
+  --color-background: var(--background);
+  --color-foreground: var(--text-primary);
+  --color-card: var(--card);
+  --color-card-foreground: var(--text-primary);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--text-primary);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--card);
+  --color-secondary-foreground: var(--text-primary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--text-secondary);
+  --color-accent: var(--primary);
+  --color-accent-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border-default);
+  --color-input: var(--border-default);
+  --color-ring: var(--focus-ring);
 }
 
-@utility pb-safe-area-inset-bottom { padding-bottom: env(safe-area-inset-bottom); }
-@utility mb-safe-area-inset-bottom { margin-bottom: env(safe-area-inset-bottom); }
-@utility min-h-screen { min-height: 100vh; min-height: 100dvh; }
-@utility min-h-screen-dynamic { min-height: 100dvh; }
-@utility h-screen { height: 100vh; height: 100dvh; }
+@utility display-1 {
+  font-size: clamp(2.5rem, 5vw, 6rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.1;
+  letter-spacing: var(--tracking-tight);
+}
+@utility display-2 {
+  font-size: clamp(2rem, 3vw, 3.5rem);
+  font-family: var(--font-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.15;
+  letter-spacing: var(--tracking-tight);
+}
+@utility ref-tag {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--tertiary);
+  letter-spacing: var(--tracking-wide);
+}
+/* Quiet state-change "settle" — used on state-bearing indicators
+ * (Badge, StatusBadge, FilterChip) when their represented value changes. */
+@utility state-settle {
+  transition:
+    transform 120ms ease-out,
+    opacity 120ms ease-out;
+}
+@utility pb-safe-area-inset-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+@utility mb-safe-area-inset-bottom {
+  margin-bottom: env(safe-area-inset-bottom);
+}
+@utility min-h-screen {
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+@utility min-h-screen-dynamic {
+  min-height: 100dvh;
+}
+@utility h-screen {
+  height: 100vh;
+  height: 100dvh;
+}
 
 /* Shared layout rhythm. Product components own their layout; this does not
  * define visual component families. */
-.page-shell { @apply relative mx-auto flex w-full flex-col gap-12 px-4 py-16 md:gap-16 md:px-6 md:py-20; }
-.page-shell-detail { @apply relative mx-auto flex w-full flex-col gap-10 px-4 py-16 md:gap-12 md:px-6 md:py-20; }
-.page-bleed { @apply flex w-full flex-col; }
-.layout-stack { @apply flex flex-col gap-4; }
-.list-row { @apply flex gap-4 px-0 py-6 md:gap-6 md:py-8; }
-.list-media { @apply relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-card p-2 shadow-none; }
-.list-media-wide { @apply h-14 w-32; }
-.list-media-square { @apply size-10 sm:size-12; }
-.list-media-placeholder { @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 transition-opacity duration-150; }
-.section { @apply flex flex-col gap-4 border-b border-border px-4 py-12 md:px-6 md:py-16; }
-.section-hero { @apply gap-6 py-16 md:py-20; }
-.detail-hero { @apply gap-4 py-10 md:gap-6 md:py-16; }
-.section-compact { @apply gap-4 py-8 md:py-12; }
-.detail-navigation { @apply flex flex-col gap-6 sm:flex-row sm:justify-between; }
-.detail-navigation-link { @apply flex min-h-11 flex-col justify-center gap-1; }
+.page-shell {
+  @apply relative mx-auto flex w-full flex-col gap-12 px-4 py-16 md:gap-16 md:px-6 md:py-20;
+}
+.page-shell-detail {
+  @apply relative mx-auto flex w-full flex-col gap-10 px-4 py-16 md:gap-12 md:px-6 md:py-20;
+}
+.page-bleed {
+  @apply flex w-full flex-col;
+}
+.layout-stack {
+  @apply flex flex-col gap-4;
+}
+.list-row {
+  @apply flex gap-4 px-0 py-6 md:gap-6 md:py-8;
+}
+.list-media {
+  @apply border-border bg-card relative isolate flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 shadow-none;
+}
+.list-media-wide {
+  @apply h-14 w-32;
+}
+.list-media-square {
+  @apply size-10 sm:size-12;
+}
+.list-media-placeholder {
+  @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 transition-opacity duration-150;
+}
+.section {
+  @apply border-border flex flex-col gap-4 border-b px-4 py-12 md:px-6 md:py-16;
+}
+.section-hero {
+  @apply gap-6 py-16 md:py-20;
+}
+.detail-hero {
+  @apply gap-4 py-10 md:gap-6 md:py-16;
+}
+.section-compact {
+  @apply gap-4 py-8 md:py-12;
+}
+.detail-navigation {
+  @apply flex flex-col gap-6 sm:flex-row sm:justify-between;
+}
+.detail-navigation-link {
+  @apply flex min-h-9 flex-col justify-center gap-1;
+}
 
 @layer base {
-  :root { color-scheme: light; }
-  @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
-  html, body {
+  :root {
+    color-scheme: light;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+    }
+  }
+  html,
+  body {
     background-color: var(--color-background);
     color: var(--color-foreground);
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  * { border-color: var(--color-border, currentColor); }
-  *:focus { outline: none; }
-  *:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: inherit; }
-  button { cursor: pointer; font-family: inherit; }
-  h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
+  * {
+    border-color: var(--color-border, currentColor);
+  }
+  *:focus {
+    outline: none;
+  }
+  *:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+    border-radius: inherit;
+  }
+  button {
+    cursor: pointer;
+    font-family: inherit;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans);
+    font-weight: 600;
+    letter-spacing: var(--tracking-tight);
+  }
   @media (prefers-reduced-motion: reduce) {
-    *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
   }
 }

package/src/tokens/chart-colors.stories.tsx

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CHART_CSS_VARS } from "../constants/chart-colors";
+
+const meta: Meta = { title: "Foundations/Charts", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SERIES = [
+  { key: "chart1", label: "chart-1" },
+  { key: "chart2", label: "chart-2" },
+  { key: "chart3", label: "chart-3" },
+  { key: "chart4", label: "chart-4" },
+  { key: "chart5", label: "chart-5" },
+] as const;
+
+const STATUS = [
+  { key: "positive", label: "chart-positive", example: "▲ Up 12%" },
+  { key: "negative", label: "chart-negative", example: "▼ Down 4%" },
+  { key: "neutral", label: "chart-neutral", example: "— Flat" },
+] as const;
+
+// A handful of arbitrary multi-series datasets, purely to show how the
+// ordinal chart-1..5 palette reads next to itself in a real chart shape.
+const BAR_DATA = [
+  [42, 68, 30, 55, 90],
+  [70, 25, 60, 40, 35],
+  [30, 55, 80, 20, 65],
+];
+
+const LINE_POINTS: Record<string, Array<[number, number]>> = {
+  chart1: [
+    [0, 60],
+    [20, 40],
+    [40, 50],
+    [60, 20],
+    [80, 30],
+    [100, 10],
+  ],
+  chart2: [
+    [0, 80],
+    [20, 70],
+    [40, 75],
+    [60, 55],
+    [80, 60],
+    [100, 45],
+  ],
+  chart3: [
+    [0, 30],
+    [20, 45],
+    [40, 25],
+    [60, 50],
+    [80, 35],
+    [100, 55],
+  ],
+  chart4: [
+    [0, 90],
+    [20, 85],
+    [40, 65],
+    [60, 70],
+    [80, 50],
+    [100, 60],
+  ],
+  chart5: [
+    [0, 15],
+    [20, 30],
+    [40, 20],
+    [60, 40],
+    [80, 25],
+    [100, 20],
+  ],
+};
+
+export const CategoricalPalette: Story = {
+  render: () => (
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / charts</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Chart colors</h1>
+        <p className="text-muted-foreground max-w-2xl text-base">
+          <code className="font-mono">chart-1</code> through{" "}
+          <code className="font-mono">chart-5</code> are an ordinal palette for arbitrary
+          categorical series (e.g. one line per country) — there's no fixed meaning to a given slot,
+          so they're assigned by index, not by what the data represents. That's different from{" "}
+          <code className="font-mono">chart-positive</code>/
+          <code className="font-mono">chart-negative</code>/
+          <code className="font-mono">chart-neutral</code> below, which carry real meaning
+          (up/down/flat) and should stay semantic in any chart that shows a directional delta.
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Series swatches</h2>
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+          {SERIES.map(({ key, label }) => (
+            <div
+              key={key}
+              className="border-border grid min-h-20 content-end rounded-md border p-3"
+              style={{ backgroundColor: CHART_CSS_VARS[key] }}
+            >
+              <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+                {label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Grouped bar chart (mock)</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Three unrelated categories, five series each — a stress test for how distinguishable the
+          palette stays side by side.
+        </p>
+        <div className="flex items-end gap-8" style={{ height: 220 }}>
+          {BAR_DATA.map((group, groupIndex) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: static mock dataset
+            <div key={groupIndex} className="flex h-full items-end gap-1.5">
+              {group.map((value, seriesIndex) => (
+                <div
+                  key={SERIES[seriesIndex].key}
+                  className="w-6 rounded-t-sm"
+                  style={{
+                    height: `${value}%`,
+                    backgroundColor: CHART_CSS_VARS[SERIES[seriesIndex].key],
+                  }}
+                  title={SERIES[seriesIndex].label}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {SERIES.map(({ key, label }) => (
+            <div key={key} className="flex items-center gap-2">
+              <span
+                className="size-2.5 rounded-full"
+                style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                aria-hidden="true"
+              />
+              <span className="text-muted-foreground font-mono text-xs">{label}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
+        <h2 className="text-2xl font-semibold">Multi-line chart (mock)</h2>
+        <svg viewBox="0 0 100 100" preserveAspectRatio="none" className="h-56 w-full">
+          <title>Multi-series line chart using the chart-1..5 palette</title>
+          {Object.entries(LINE_POINTS).map(([key, points]) => (
+            <polyline
+              key={key}
+              fill="none"
+              strokeWidth={1.5}
+              vectorEffect="non-scaling-stroke"
+              stroke={CHART_CSS_VARS[key as keyof typeof CHART_CSS_VARS]}
+              points={points.map(([x, y]) => `${x},${y}`).join(" ")}
+            />
+          ))}
+        </svg>
+      </section>
+
+      <section className="grid gap-4">
+        <h2 className="text-2xl font-semibold">Semantic status colors</h2>
+        <p className="text-muted-foreground max-w-2xl text-sm">
+          Use these — not a numbered slot — whenever a value has an inherent direction.
+        </p>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          {STATUS.map(({ key, label, example }) => (
+            <div key={key} className="border-border grid gap-2 rounded-md border p-3">
+              <div className="flex items-center gap-2">
+                <span
+                  className="size-2.5 rounded-full"
+                  style={{ backgroundColor: CHART_CSS_VARS[key] }}
+                  aria-hidden="true"
+                />
+                <span className="text-muted-foreground font-mono text-xs">{label}</span>
+              </div>
+              <span className="text-lg font-semibold" style={{ color: CHART_CSS_VARS[key] }}>
+                {example}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </main>
+  ),
+};

package/src/tokens/color-systems.stories.tsx

@@ -12,11 +12,29 @@ export const SystemAppearance: Story = {
     <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
       <header className="grid gap-2">
         <h1 className="text-2xl font-semibold">System color roles</h1>
-        <p className="text-muted-foreground max-w-prose text-sm">These semantic roles resolve from the operating system’s light or dark appearance. CSS is the single source of their values.</p>
+        <p className="text-muted-foreground max-w-prose text-sm">
+          These semantic roles resolve from the operating system’s light or dark appearance. CSS is
+          the single source of their values.
+        </p>
       </header>
-      <div className="flex flex-wrap gap-2"><Button>Primary action</Button><Button variant="secondary">Secondary action</Button><Button variant="outline">Outline action</Button><Button variant="destructive">Delete item</Button></div>
+      <div className="flex flex-wrap gap-2">
+        <Button>Primary action</Button>
+        <Button variant="secondary">Secondary action</Button>
+        <Button variant="outline">Outline action</Button>
+        <Button variant="destructive">Delete item</Button>
+      </div>
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {colorTokenNames.map((token) => <div key={token} className="border-border grid min-h-20 content-end rounded-md border p-3" style={{ backgroundColor: `var(--color-${token})` }}><span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">{token}</span></div>)}
+        {colorTokenNames.map((token) => (
+          <div
+            key={token}
+            className="border-border grid min-h-20 content-end rounded-md border p-3"
+            style={{ backgroundColor: `var(--color-${token})` }}
+          >
+            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
+              {token}
+            </span>
+          </div>
+        ))}
       </div>
     </main>
   ),

package/src/tokens/css-vars.ts

@@ -0,0 +1,15 @@
+import { colorTokenNames, type ColorToken } from "./index";
+
+/**
+ * Color tokens as CSS `var()` references, for consumers whose runtime resolves
+ * the CSS cascade (i.e. web). Kept out of `./tokens` because React Native has
+ * no cascade — a `var(--token)` string there fails silently, rendering as an
+ * unparseable color rather than throwing.
+ */
+export const colors = colorTokenNames.reduce(
+  (accumulator, token) => {
+    accumulator[token] = `var(--${token})`;
+    return accumulator;
+  },
+  {} as Record<ColorToken, `var(--${string})`>,
+);

package/src/tokens/foundations.stories.tsx

@@ -6,27 +6,47 @@ type Story = StoryObj<typeof meta>;
 
 export const SpacingAndType: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-10 bg-background p-6 text-foreground md:p-10">
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
       <section className="grid gap-6">
         <header className="grid gap-2">
-          <p className="text-sm text-muted-foreground">Foundations / rhythm</p>
+          <p className="text-muted-foreground text-sm">Foundations / rhythm</p>
           <h1 className="text-4xl font-semibold tracking-tight">Tailwind defaults, directly.</h1>
-          <p className="max-w-2xl text-base text-muted-foreground">The specimen uses the shared Tailwind spacing and type scales.</p>
+          <p className="text-muted-foreground max-w-2xl text-base">
+            The specimen uses the shared Tailwind spacing and type scales.
+          </p>
         </header>
         <div className="grid gap-2">
           {[1, 2, 3, 4, 6, 8, 12, 16].map((size) => (
             <div key={size} className="flex items-center gap-3">
-              <span className="w-12 font-mono text-xs tabular-nums text-muted-foreground">{size}</span>
-              <div className="h-3 rounded-sm bg-accent" style={{ width: `calc(var(--spacing) * ${size})` }} aria-hidden="true" />
+              <span className="text-muted-foreground w-12 font-mono text-xs tabular-nums">
+                {size}
+              </span>
+              <div
+                className="bg-accent h-3 rounded-sm"
+                style={{ width: `calc(var(--spacing) * ${size})` }}
+                aria-hidden="true"
+              />
             </div>
           ))}
         </div>
       </section>
-      <section className="grid gap-5 rounded-xl border border-border bg-card p-6">
+      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
         <h2 className="text-2xl font-semibold">Typography scale</h2>
         <div className="grid gap-4">
-          {(["text-xs", "text-sm", "text-base", "text-lg", "text-xl", "text-2xl", "text-4xl"] as const).map((size) => (
-            <p key={size} className={`${size} text-foreground`}>{size}</p>
+          {(
+            [
+              "text-xs",
+              "text-sm",
+              "text-base",
+              "text-lg",
+              "text-xl",
+              "text-2xl",
+              "text-4xl",
+            ] as const
+          ).map((size) => (
+            <p key={size} className={`${size} text-foreground`}>
+              {size}
+            </p>
           ))}
         </div>
       </section>
@@ -36,10 +56,26 @@ export const SpacingAndType: Story = {
 
 export const Surfaces: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-6 bg-background p-6 text-foreground md:p-10">
-      <header className="grid gap-2"><p className="text-sm text-muted-foreground">Foundations / surfaces</p><h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1></header>
+    <main className="bg-background text-foreground grid min-h-screen gap-6 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / surfaces</p>
+        <h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1>
+      </header>
       <div className="grid gap-4 md:grid-cols-2">
-        {[["Background", "bg-background"], ["Card", "bg-card"], ["Popover", "bg-popover"], ["Muted", "bg-muted"]].map(([name, className]) => <div key={name} className={`${className} grid min-h-40 content-start gap-2 rounded-xl border border-border p-5`}><h2 className="text-lg font-semibold">{name}</h2><p className="text-sm text-muted-foreground">{className}</p></div>)}
+        {[
+          ["Background", "bg-background"],
+          ["Card", "bg-card"],
+          ["Popover", "bg-popover"],
+          ["Muted", "bg-muted"],
+        ].map(([name, className]) => (
+          <div
+            key={name}
+            className={`${className} border-border grid min-h-40 content-start gap-2 rounded-xl border p-5`}
+          >
+            <h2 className="text-lg font-semibold">{name}</h2>
+            <p className="text-muted-foreground text-sm">{className}</p>
+          </div>
+        ))}
       </div>
     </main>
   ),
@@ -47,12 +83,26 @@ export const Surfaces: Story = {
 
 export const Motion: Story = {
   render: () => (
-    <main className="grid min-h-screen gap-8 bg-background p-6 text-foreground md:p-10">
-      <header className="grid gap-2"><p className="text-sm text-muted-foreground">Foundations / motion</p><h1 className="text-4xl font-semibold tracking-tight">Motion stays standard and reducible.</h1></header>
+    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
+      <header className="grid gap-2">
+        <p className="text-muted-foreground text-sm">Foundations / motion</p>
+        <h1 className="text-4xl font-semibold tracking-tight">
+          Motion stays standard and reducible.
+        </h1>
+      </header>
       <div className="grid gap-4 sm:grid-cols-3">
-        <div className="motion-safe:animate-in motion-safe:fade-in-0 grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 motion-reduce:animate-none"><span className="text-lg font-semibold">Enter</span><span className="text-sm text-muted-foreground">150ms</span></div>
-        <button className="grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"><span className="text-lg font-semibold">Press</span><span className="text-sm text-muted-foreground">System focus</span></button>
-        <div className="grid min-h-32 place-content-center gap-2 rounded-xl border border-border bg-card p-5 motion-safe:animate-pulse motion-reduce:animate-none"><span className="text-lg font-semibold">Loading</span><span className="text-sm text-muted-foreground">Stable geometry</span></div>
+        <div className="motion-safe:animate-in motion-safe:fade-in-0 border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Enter</span>
+          <span className="text-muted-foreground text-sm">150ms</span>
+        </div>
+        <button className="border-border bg-card hover:bg-accent focus-visible:ring-ring grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none">
+          <span className="text-lg font-semibold">Press</span>
+          <span className="text-muted-foreground text-sm">System focus</span>
+        </button>
+        <div className="border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
+          <span className="text-lg font-semibold">Loading</span>
+          <span className="text-muted-foreground text-sm">Stable geometry</span>
+        </div>
       </div>
     </main>
   ),