feat(apollo-wind): comprehensive component stories update and cleanup

.gitignore

@@ -10,6 +10,7 @@ plan/*
 node_modules/
 .pnp
 .pnp.js
+.pnpm-store
 
 # Build outputs
 dist/

packages/apollo-wind/.storybook/main.ts

@@ -34,7 +34,19 @@ if (isDev) {
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-mcp',
+  ],
+
+  // Enable the component manifest so Storybook MCP can expose
+  // machine-readable component metadata (APIs, props, usage examples)
+  // to AI agents and coding tools.
+  features: {
+    experimentalComponentsManifest: true,
+  },
 
   // Serve only public/ (e.g. ui-path.svg for sidebar logo); single dir to avoid route conflicts
   staticDirs: ['../public'],
@@ -52,6 +64,7 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     return {
       ...config,
+      envDir: resolve(__dirname, '..'),
       resolve: {
         ...config.resolve,
         alias: {

packages/apollo-wind/.storybook/manager.ts

@@ -3,7 +3,8 @@ import theme from './theme';
 
 addons.setConfig({
   theme,
+  showPanel: false,
   sidebar: {
-    collapsedRoots: ['theme', 'forms'],
+    collapsedRoots: ['components', 'forms', 'experiments'],
   },
 });

packages/apollo-wind/.storybook/preview-head.html

@@ -1,3 +1,11 @@
+<!-- Inter + JetBrains Mono fonts for Future design system -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+
 <style>
   /* Remove default Storybook padding */
   #storybook-root {

packages/apollo-wind/.storybook/preview.tsx

@@ -18,30 +18,80 @@ if (isDev) {
   }
 }
 
+// Custom viewports: named by screen size with widths matching common breakpoints.
+// "Reset viewport" is provided by Storybook; these options replace the default device list.
+const customViewports = {
+  'screen-xl': {
+    name: 'Screen XL 1920',
+    styles: { width: '1920px', height: '1080px' },
+    type: 'desktop',
+  },
+  'screen-l': {
+    name: 'Screen L 1440',
+    styles: { width: '1440px', height: '900px' },
+    type: 'desktop',
+  },
+  'screen-m': {
+    name: 'Screen M 1024',
+    styles: { width: '1024px', height: '768px' },
+    type: 'tablet',
+  },
+  'screen-s': {
+    name: 'Screen S 768',
+    styles: { width: '768px', height: '1024px' },
+    type: 'tablet',
+  },
+  'screen-xs': {
+    name: 'Screen XS 540',
+    styles: { width: '540px', height: '900px' },
+    type: 'mobile',
+  },
+};
+
 const preview: Preview = {
   initialGlobals: {
-    theme: 'light',
-    themeVariant: 'default',
+    futureTheme: 'dark',
     reactScan: 'off',
   },
   parameters: {
+    backgrounds: { disable: true },
+    viewport: {
+      options: customViewports,
+    },
     options: {
       storySort: {
         order: [
           'Introduction',
           'Theme',
+          [
+            'Colors',
+            'Icons',
+            'Spacing',
+            'Typography',
+            'Future',
+            ['*', 'Theme'],
+          ],
           'Components',
           [
             'All Components',
             'Core',
             'Data Display',
+            'Feedback',
             'Layout',
             'Navigation',
             'Overlays',
-            'Feedback',
+            'UiPath',
           ],
           'Templates',
+          [
+            'Admin',
+            'Delegate',
+            'Flow',
+            'Maestro',
+            'Future',
+          ],
           'Forms',
+          'Experiments',
           '*',
         ],
       },
@@ -54,16 +104,19 @@ const preview: Preview = {
     },
   },
   globalTypes: {
-    theme: {
-      description: 'Global theme for components',
+    futureTheme: {
+      description: 'Toggle design language theme',
       toolbar: {
         title: 'Theme',
-        icon: 'circlehollow',
+        icon: 'paintbrush',
         items: [
-          { value: 'light', icon: 'sun', title: 'Light' },
-          { value: 'dark', icon: 'moon', title: 'Dark' },
-          { value: 'light-hc', icon: 'sun', title: 'Light High Contrast' },
-          { value: 'dark-hc', icon: 'moon', title: 'Dark High Contrast' },
+          { value: 'core-light', title: 'Light' },
+          { value: 'core-dark', title: 'Dark' },
+          { value: 'light', title: 'Future: Light' },
+          { value: 'dark', title: 'Future: Dark' },
+          { value: 'wireframe', title: 'Demo: Wireframe' },
+          { value: 'vertex', title: 'Demo: Vertex' },
+          { value: 'canvas', title: 'Demo: Canvas' },
         ],
         dynamicTitle: true,
       },
@@ -85,8 +138,33 @@ const preview: Preview = {
   },
   decorators: [
     (Story, context) => {
-      const theme = context.globals.theme || 'light';
       const reactScanEnabled = context.globals.reactScan === 'on';
+      const futureTheme: string = context.globals.futureTheme ?? 'dark';
+
+      // Map the toolbar value to the CSS class that activates the correct
+      // set of CSS custom properties (surfaces, foregrounds, borders, etc.).
+      const themeClassMap: Record<string, string> = {
+        'core-dark': 'core-dark',
+        'core-light': 'core-light',
+        wireframe: 'wireframe',
+        vertex: 'vertex',
+        canvas: 'canvas',
+        light: 'future-light',
+      };
+      const themeClass = themeClassMap[futureTheme] ?? 'future-dark';
+
+      // Apply the theme class to <html> so every story — including standalone
+      // component stories that don't manage their own theme — inherits the
+      // correct CSS variables (shadcn bridge + Future tokens).
+      useEffect(() => {
+        const root = document.documentElement;
+        const allThemeClasses = ['future-dark', 'future-light', 'wireframe', 'vertex', 'canvas', 'core-dark', 'core-light'];
+        root.classList.remove(...allThemeClasses);
+        root.classList.add(themeClass);
+        return () => {
+          root.classList.remove(themeClass);
+        };
+      }, [themeClass]);
 
       useEffect(() => {
         if (isDev) {
@@ -96,24 +174,10 @@ const preview: Preview = {
         }
       }, [reactScanEnabled]);
 
-      useEffect(() => {
-        const htmlElement = document.documentElement;
-        const body = document.body;
-
-        // Remove existing theme class from both html and body
-        htmlElement.classList.remove('light', 'dark', 'light-hc', 'dark-hc');
-        body.classList.remove('light', 'dark', 'light-hc', 'dark-hc');
-
-        // Add theme class to both (html for legacy, body for apollo-core)
-        htmlElement.classList.add(theme);
-        body.classList.add(theme);
-        body.classList.add('bg-background', 'text-foreground');
-        body.style.minHeight = '100vh';
-      }, [theme]);
+      const isFullscreen = context.parameters?.layout === 'fullscreen';
 
-      // Wrap all stories with themed background
       return (
-        <div className="bg-background text-foreground p-1">
+        <div className={isFullscreen ? 'h-screen' : 'p-1'}>
           <Story />
         </div>
       );