feat(ui): polish core component surfaces

apps/docs/src/components/card.stories.tsx

@@ -1,4 +1,12 @@
-import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@ai-ui/ui";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@ai-ui/ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta = {
@@ -6,7 +14,7 @@ const meta = {
   component: Card,
   args: {
     tone: "default",
-    interactive: false
+    interactive: true
   },
   argTypes: {
     className: {
@@ -21,6 +29,12 @@ const meta = {
     }
   },
   parameters: {
+    docs: {
+      description: {
+        component:
+          "Card is the base slab surface for panels, compact workflows, and supporting information blocks. It now defaults to a gentle interactive lift so common business cards feel alive by default, while `interactive={false}` remains available for deliberately static surfaces."
+      }
+    },
     layout: "centered"
   },
   tags: ["autodocs"]
@@ -34,22 +48,61 @@ export const Playground: Story = {
   render: (args) => (
     <Card {...args} className="w-[420px]">
       <CardHeader>
-        <CardTitle>Release card</CardTitle>
-        <CardDescription>Summarize state, ownership, and next action.</CardDescription>
+        <CardTitle>Routing overview</CardTitle>
+        <CardDescription>Keep status, ownership, and the next action in one calm surface.</CardDescription>
       </CardHeader>
       <CardContent>
-        This surface is tuned for editorial dashboards and settings views.
+        This base card now carries a light hover lift by default so common workflow slabs do not
+        feel inert.
       </CardContent>
       <CardFooter>
-        <Button size="sm">Open</Button>
+        <Button size="sm">Open queue</Button>
         <Button size="sm" variant="ghost">
-          Dismiss
+          Snooze
         </Button>
       </CardFooter>
     </Card>
   )
 };
 
+export const States: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the default interactive treatment for navigable or actionable slabs, and opt out only when the card is meant to behave like a static document section."
+      }
+    }
+  },
+  render: () => (
+    <div className="grid w-[920px] gap-4 md:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Default interactive</CardTitle>
+          <CardDescription>Gentle lift and internal light cue for most business cards.</CardDescription>
+        </CardHeader>
+        <CardContent>Good for dashboards, queues, and next-step summaries.</CardContent>
+      </Card>
+
+      <Card interactive={false} tone="subtle">
+        <CardHeader>
+          <CardTitle>Static document slab</CardTitle>
+          <CardDescription>Opt out when the surface should read as anchored reference content.</CardDescription>
+        </CardHeader>
+        <CardContent>Useful for long-form notes, legal copy, and passive explanations.</CardContent>
+      </Card>
+
+      <Card tone="accent">
+        <CardHeader>
+          <CardTitle>Accent emphasis</CardTitle>
+          <CardDescription>Carry the same motion language while keeping the tonal emphasis richer.</CardDescription>
+        </CardHeader>
+        <CardContent>Use when the card itself is part of the call to action.</CardContent>
+      </Card>
+    </div>
+  )
+};
+
 export const Grid: Story = {
   render: () => (
     <div className="relative grid w-[940px] gap-6 overflow-hidden rounded-[2.3rem] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-surface)_82%,white_18%),color-mix(in_oklch,var(--color-background)_88%,white_12%))] p-6 shadow-[0_24px_72px_color-mix(in_oklch,var(--color-primary)_10%,transparent)] md:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
@@ -80,11 +133,11 @@ export const Grid: Story = {
         <Card className="motion-float">
           <CardHeader>
             <CardTitle>Default tone</CardTitle>
-            <CardDescription>Standard elevated panel for data and form sections.</CardDescription>
+            <CardDescription>Standard elevated panel with the new default hover cue.</CardDescription>
           </CardHeader>
           <CardContent>Reliable baseline for most admin surfaces.</CardContent>
         </Card>
-        <Card className="motion-float-delayed justify-self-end md:w-[88%]" interactive tone="accent">
+        <Card className="motion-float-delayed justify-self-end md:w-[88%]" tone="accent">
           <CardHeader>
             <CardTitle>Interactive accent</CardTitle>
             <CardDescription>Hover-capable treatment for navigable cards.</CardDescription>