refactor(motion): simplify to default and reduced

apps/docs/src/tokens.stories.tsx

@@ -1,25 +1,21 @@
 import {
   colorTokens,
   defaultTheme,
-  defaultMotionAccessibility,
-  defaultMotionPack,
+  defaultMotionMode,
   motionTokens,
-  motionAccessibilityDetails,
-  motionPackDetails,
+  motionModeDetails,
   radiusTokens,
   shadowTokens,
   themeDetails,
   themeNames,
   typographyTokens,
-  type MotionAccessibilityName,
-  type MotionPackName,
+  type MotionModeName,
   type ThemeName
 } from "@ai-ui/tokens";
 import type { Meta, StoryObj } from "@storybook/react";
 
 type TokensOverviewProps = {
-  motionAccessibility: MotionAccessibilityName;
-  motionPack: MotionPackName;
+  motionMode: MotionModeName;
   theme: ThemeName;
 };
 
@@ -127,8 +123,7 @@ function ThemeCard({ themeName }: { themeName: ThemeName }) {
 }
 
 function TokensOverview({
-  motionAccessibility,
-  motionPack,
+  motionMode,
   theme
 }: TokensOverviewProps) {
   return (
@@ -168,18 +163,10 @@ function TokensOverview({
             </div>
             <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3 shadow-[var(--shadow-xs)]">
               <p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
-                Motion Pack
+                Motion
               </p>
               <p className="mt-2 text-sm font-medium text-[var(--color-foreground)]">
-                {motionPackDetails[motionPack].label}
-              </p>
-            </div>
-            <div className="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] px-4 py-3 shadow-[var(--shadow-xs)]">
-              <p className="text-xs uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]">
-                Accessibility Override
-              </p>
-              <p className="mt-2 text-sm font-medium text-[var(--color-foreground)]">
-                {motionAccessibilityDetails[motionAccessibility].label}
+                {motionModeDetails[motionMode].label}
               </p>
             </div>
           </div>
@@ -301,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 separates the active motion pack from the
-              accessibility override.
+              directly. The toolbar now switches between the default interaction layer
+              and the reduced-motion fallback.
             </p>
             <div className="mt-6 grid gap-4 md:grid-cols-2">
               <div className="space-y-3">
@@ -390,18 +377,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Overview: Story = {
   args: {
-    motionAccessibility: defaultMotionAccessibility,
-    motionPack: defaultMotionPack,
+    motionMode: defaultMotionMode,
     theme: defaultTheme
   },
   render: (_args, context) => (
     <TokensOverview
-      motionAccessibility={
-        (context.globals.motionAccessibility as MotionAccessibilityName | undefined) ??
-        defaultMotionAccessibility
-      }
-      motionPack={
-        (context.globals.motionPack as MotionPackName | undefined) ?? defaultMotionPack
+      motionMode={
+        (context.globals.motionMode as MotionModeName | undefined) ?? defaultMotionMode
       }
       theme={context.globals.theme as ThemeName}
     />