feat(motion): add interactive micro-feedback

apps/docs/.storybook/preview.ts

@@ -34,7 +34,7 @@ const preview: Preview = {
     motionMode: {
       description: "Preview motion mode",
       toolbar: {
-        icon: "transfer",
+        icon: "contrast",
         dynamicTitle: true,
         items: motionModeNames.map((modeName) => ({
           value: modeName,

apps/docs/src/style-contract.stories.tsx

@@ -187,7 +187,7 @@ function StyleContractShowcase({
                 "A new runtime attribute: `data-skin`",
                 "Public helpers from `@ai-ui/ui` for skin names, defaults, and root updates",
                 "A dedicated `@ai-ui/ui/skins.css` entrypoint imported by the docs app",
-                "Storybook globals that apply theme, skin, and motion mode together"
+                "Storybook globals that apply theme, skin, and interactive/static motion mode together"
               ].map((item) => (
                 <div
                   key={item}

apps/docs/src/style-matrix.stories.tsx

@@ -187,7 +187,7 @@ function StyleMatrixShowcase() {
 
         <section className="grid gap-4">
           {motionModeNames.map((motionMode) => (
-            <div key={motionMode} className="grid gap-4">
+              <div key={motionMode} className="grid gap-4">
               <div>
                 <h2 className="text-2xl font-semibold">{motionModeDetails[motionMode].label}</h2>
                 <p className="mt-1 max-w-3xl text-sm leading-6 text-[var(--color-muted-foreground)]">
@@ -213,7 +213,7 @@ function StyleMatrixShowcase() {
             <p className="mt-2 max-w-3xl text-sm leading-6 text-[var(--color-muted-foreground)]">
               Dialog still portals to the document root, so compare its real overlay and
               panel treatment with the Storybook toolbar. The matrix above covers scoped
-              inline regression across default and reduced motion modes. The control below
+              inline regression across interactive and static motion modes. The control below
               covers the live overlay behavior.
             </p>
           </div>

apps/docs/src/tokens.stories.tsx

@@ -288,8 +288,8 @@ function TokensOverview({
             <h2 className="text-2xl font-semibold">Motion tokens</h2>
             <p className="mt-1 text-sm text-[var(--color-muted-foreground)]">
               Timing and motion scale now live in variables that components can consume
-              directly. The toolbar now switches between the default interaction layer
-              and the reduced-motion fallback.
+              directly. The toolbar now switches between the interactive micro-feedback
+              layer and the static fallback.
             </p>
             <div className="mt-6 grid gap-4 md:grid-cols-2">
               <div className="space-y-3">