create-auto-app 1.24.0 → 1.25.0

package/templates/typical/client/.storybook/main.ts

@@ -1,7 +1,11 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const managerHeadContent = readFileSync(join(__dirname, "manager-head.html"), "utf-8");
+
 const isFastMode = !!process.env.STORYBOOK_FAST;
 
 const config: StorybookConfig = {
@@ -19,6 +23,7 @@ const config: StorybookConfig = {
 				},
 			},
 		},
+		getAbsolutePath("@vueless/storybook-dark-mode"),
 	],
 	staticDirs: ["../public"],
 	features: {
@@ -41,6 +46,7 @@ const config: StorybookConfig = {
 		};
 		return config;
 	},
+	managerHead: () => managerHeadContent,
 };
 
 export default config;

package/templates/typical/client/.storybook/manager-head.html

@@ -0,0 +1,133 @@
+<script>
+  (function() {
+    // Check localStorage for dark mode state before anything renders
+    var isDark = false;
+    try {
+      var stored = localStorage.getItem('sb-addon-themes-3');
+      if (stored) {
+        var parsed = JSON.parse(stored);
+        isDark = parsed && parsed.current === 'dark';
+      }
+    } catch(e) {}
+
+    // Also check URL parameter
+    var urlParams = new URLSearchParams(window.location.search);
+    var urlTheme = urlParams.get('theme');
+    if (urlTheme) {
+      isDark = urlTheme === 'dark';
+    }
+
+    // Apply matching theme background colors immediately (blue-tinted grays)
+    document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+
+    // Store theme state for CSS
+    document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+  })();
+</script>
+<style>
+  html, body {
+    transition: none !important;
+  }
+
+  /* Force sidebar and nav backgrounds - target the actual container divs */
+  #storybook-explorer-tree,
+  [class*="sidebar"],
+  [class*="Sidebar"],
+  nav[class],
+  aside[class] {
+    background-color: #f0f3f9 !important;
+  }
+
+  html[data-theme="dark"] #storybook-explorer-tree,
+  html[data-theme="dark"] [class*="sidebar"],
+  html[data-theme="dark"] [class*="Sidebar"],
+  html[data-theme="dark"] nav[class],
+  html[data-theme="dark"] aside[class] {
+    background-color: #1a1f2e !important;
+  }
+
+  /* Force toolbar/header backgrounds */
+  [class*="toolbar"],
+  [class*="Toolbar"],
+  [class*="bar"],
+  [class*="Bar"],
+  header[class] {
+    background-color: #f0f3f9 !important;
+  }
+
+  html[data-theme="dark"] [class*="toolbar"],
+  html[data-theme="dark"] [class*="Toolbar"],
+  html[data-theme="dark"] [class*="bar"],
+  html[data-theme="dark"] [class*="Bar"],
+  html[data-theme="dark"] header[class] {
+    background-color: #1a1f2e !important;
+  }
+
+  /* Force ALL sidebar text to dark gray instead of blue */
+  [data-nodetype],
+  [data-nodetype] * {
+    color: #2d3748 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype],
+  html[data-theme="dark"] [data-nodetype] * {
+    color: #e2e8f0 !important;
+  }
+
+  /* Sidebar selection styles - subtle background */
+  [data-nodetype="story"][data-selected="true"],
+  [data-nodetype="document"][data-selected="true"],
+  [data-nodetype="component"][data-selected="true"],
+  [data-nodetype="group"][data-selected="true"] {
+    background-color: #e2e8f0 !important;
+    border-radius: 0.5rem !important;
+  }
+
+  [data-nodetype="story"][data-selected="true"] *,
+  [data-nodetype="document"][data-selected="true"] *,
+  [data-nodetype="component"][data-selected="true"] *,
+  [data-nodetype="group"][data-selected="true"] * {
+    color: #1a202c !important;
+  }
+
+  /* Dark mode selected item */
+  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"],
+  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] {
+    background-color: #3d4663 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype="story"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="document"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="component"][data-selected="true"] *,
+  html[data-theme="dark"] [data-nodetype="group"][data-selected="true"] * {
+    color: #f7fafc !important;
+  }
+
+  /* Hover state */
+  [data-nodetype="story"]:hover,
+  [data-nodetype="document"]:hover,
+  [data-nodetype="component"]:hover,
+  [data-nodetype="group"]:hover {
+    background-color: #edf2f7 !important;
+    border-radius: 0.5rem !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype="story"]:hover,
+  html[data-theme="dark"] [data-nodetype="document"]:hover,
+  html[data-theme="dark"] [data-nodetype="component"]:hover,
+  html[data-theme="dark"] [data-nodetype="group"]:hover {
+    background-color: #2d3748 !important;
+  }
+
+  /* Selected hover - keep selected state */
+  [data-nodetype][data-selected="true"]:hover {
+    background-color: #e2e8f0 !important;
+  }
+
+  html[data-theme="dark"] [data-nodetype][data-selected="true"]:hover {
+    background-color: #3d4663 !important;
+  }
+</style>

package/templates/typical/client/.storybook/manager.ts

@@ -0,0 +1,165 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+import { STORY_CHANGED } from 'storybook/internal/core-events';
+import { UPDATE_DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
+
+// Get initial theme from localStorage (dark mode addon) or URL parameter
+const urlParams = new URLSearchParams(window.location.search);
+const urlTheme = urlParams.get('theme');
+const getStoredDarkMode = (): boolean => {
+  try {
+    const stored = localStorage.getItem('sb-addon-themes-3');
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed?.current === 'dark';
+    }
+  } catch {}
+  return false;
+};
+const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
+
+// Theme colors matching app's design with subtle blue tint
+// Analyzed from screenshots - app has slight blue undertone in grays
+
+const lightTheme = create({
+  base: 'light',
+  brandTitle: ' ',
+  brandUrl: '/',
+  brandImage: '/blank.svg',
+
+  // App background colors - matching your app's blue-tinted sidebar
+  appBg: '#f0f3f9',           // sidebar background (blue-tinted like your app)
+  appContentBg: '#ffffff',    // main content area
+  appPreviewBg: '#ffffff',    // preview/canvas background
+  appBorderColor: '#e2e8f0',  // borders (blue-tinted)
+  appBorderRadius: 10,        // 0.625rem = 10px
+
+  // Text colors - dark gray, not blue
+  textColor: '#2d3748',       // dark gray text for sidebar items
+  textMutedColor: '#718096',  // muted gray text
+  textInverseColor: '#f7fafc',// inverse text
+
+  // Toolbar/UI colors
+  barBg: '#f0f3f9',           // toolbar background (blue-tinted)
+  barTextColor: '#2d3748',    // toolbar text (dark gray)
+  barHoverColor: '#1a202c',   // toolbar hover
+  barSelectedColor: '#1a202c',// toolbar selected
+
+  // Form colors
+  inputBg: '#ffffff',         // input background
+  inputBorder: '#e2e8f0',     // input border
+  inputTextColor: '#2d3748',  // input text
+
+  // Button colors
+  buttonBg: '#edf2f7',        // button background
+  buttonBorder: '#e2e8f0',    // button border
+
+  // Boolean inputs
+  booleanBg: '#edf2f7',
+  booleanSelectedBg: '#2d3748',
+
+  // Grid colors for canvas
+  gridCellSize: 10,
+
+  // Color for links/interactive items - override the blue
+  colorPrimary: '#2d3748',
+  colorSecondary: '#4a5568',
+});
+
+const darkTheme = create({
+  base: 'dark',
+  brandTitle: ' ',
+  brandUrl: '/',
+  brandImage: '/blank.svg',
+
+  // App background colors - matching app's dark blue-tinted theme
+  appBg: '#1a1f2e',           // sidebar background (blue-tinted dark)
+  appContentBg: '#131620',    // main content area (darker)
+  appPreviewBg: '#131620',    // preview/canvas background
+  appBorderColor: '#2a3142',  // borders (blue-tinted)
+  appBorderRadius: 10,
+
+  // Text colors - light gray, not blue
+  textColor: '#e2e8f0',       // light gray text
+  textMutedColor: '#a0aec0',  // muted gray text
+  textInverseColor: '#1a1f2e',// inverse text
+
+  // Toolbar/UI colors
+  barBg: '#1a1f2e',           // toolbar background
+  barTextColor: '#e2e8f0',    // toolbar text (light gray)
+  barHoverColor: '#f7fafc',   // toolbar hover
+  barSelectedColor: '#f7fafc',// toolbar selected
+
+  // Form colors
+  inputBg: '#242938',         // input background
+  inputBorder: '#3d4663',     // input border
+  inputTextColor: '#e2e8f0',  // input text
+
+  // Button colors
+  buttonBg: '#242938',        // button background
+  buttonBorder: '#3d4663',    // button border
+
+  // Boolean inputs
+  booleanBg: '#242938',
+  booleanSelectedBg: '#e2e8f0',
+
+  // Grid colors for canvas
+  gridCellSize: 10,
+
+  // Color for links/interactive items - override the blue
+  colorPrimary: '#e2e8f0',
+  colorSecondary: '#a0aec0',
+});
+
+const customTheme = initialIsDark ? darkTheme : lightTheme;
+
+// Hide the addon panel globally (Storybook 8+/10 API)
+addons.setConfig({
+  bottomPanelHeight: 0,
+  layoutCustomisations: {
+    showPanel: () => false,
+  },
+  theme: customTheme,
+});
+
+// Set default story to Design System Overview if no path specified
+if (!urlParams.has('path')) {
+  const newUrl = new URL(window.location.href);
+  newUrl.searchParams.set('path', '/story/design-system-overview--default');
+  window.history.replaceState({}, '', newUrl.toString());
+}
+
+// Register addon to handle navigation sync and theme after Storybook is ready
+addons.register('url-sync', (api) => {
+  const channel = api.getChannel();
+  if (!channel) return;
+
+  // Set initial dark mode state (pass string "dark" or "light", not boolean)
+  if (initialIsDark) {
+    channel.emit(UPDATE_DARK_MODE_EVENT_NAME, 'dark');
+  }
+
+  // Report navigation changes to parent window for URL bar sync
+  channel.on(STORY_CHANGED, (storyId: string) => {
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: 'storybook-navigation', storyId }, '*');
+    }
+  });
+
+  // Listen for theme changes from parent window
+  window.addEventListener('message', (event) => {
+    if (event.data?.type === 'storybook-theme-change' && event.data?.theme) {
+      const isDark = event.data.theme === 'dark';
+      // Update the dark mode addon
+      channel.emit(UPDATE_DARK_MODE_EVENT_NAME, event.data.theme);
+      // Update the Storybook manager theme
+      addons.setConfig({
+        theme: isDark ? darkTheme : lightTheme,
+      });
+      // Update CSS theme selector and background
+      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+      document.documentElement.style.backgroundColor = isDark ? '#1a1f2e' : '#f0f3f9';
+      document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+    }
+  });
+});

package/templates/typical/client/.storybook/preview-head.html

@@ -0,0 +1,31 @@
+<script>
+  (function() {
+    var isDark = false;
+    var stored, parsed, urlParams, urlTheme;
+    try {
+      stored = localStorage.getItem('sb-addon-themes-3');
+      if (stored) {
+        parsed = JSON.parse(stored);
+        isDark = parsed && parsed.current === 'dark';
+      }
+    } catch(_) {}
+
+    urlParams = new URLSearchParams(window.location.search);
+    urlTheme = urlParams.get('theme');
+    if (urlTheme) {
+      isDark = urlTheme === 'dark';
+    }
+
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+    // Dark: appContentBg=#222325, Light: #FFFFFF
+    document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+  })();
+</script>
+<style>
+  html, body {
+    transition: none;
+  }
+</style>

package/templates/typical/client/.storybook/preview.tsx

@@ -1,9 +1,51 @@
 import type { Preview } from '@storybook/react-vite';
+import type { PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
+import { addons } from 'storybook/preview-api';
+import { themes } from 'storybook/theming';
+import { DocsContainer } from '@storybook/addon-docs/blocks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { DARK_MODE_EVENT_NAME } from '@vueless/storybook-dark-mode';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import '../src/index.css';
 
-initialize();
+initialize({
+  onUnhandledRequest: 'bypass',
+});
+
+// Apply theme to the preview iframe (for component styling and background)
+const applyTheme = (isDark: boolean) => {
+  if (isDark) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+  // Update background color to match Storybook theme
+  document.documentElement.style.backgroundColor = isDark ? '#222325' : '#FFFFFF';
+  document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+// Get initial theme from URL parameter or localStorage
+const urlParams = new URLSearchParams(window.location.search);
+const urlTheme = urlParams.get('theme');
+const getStoredDarkMode = (): boolean => {
+  try {
+    const stored = localStorage.getItem('sb-addon-themes-3');
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return parsed?.current === 'dark';
+    }
+  } catch {}
+  return false;
+};
+const initialIsDark = urlTheme ? urlTheme === 'dark' : getStoredDarkMode();
+applyTheme(initialIsDark);
+
+// Listen to dark mode addon changes and sync with our CSS class
+const channel = addons.getChannel();
+channel.on(DARK_MODE_EVENT_NAME, (isDark: boolean) => {
+  applyTheme(isDark);
+});
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -13,6 +55,26 @@ const queryClient = new QueryClient({
   },
 });
 
+// Themed docs container that responds to dark mode
+function ThemedDocsContainer({
+  children,
+  context,
+}: PropsWithChildren<{ context: Parameters<typeof DocsContainer>[0]['context'] }>) {
+  const [isDark, setIsDark] = useState(initialIsDark);
+
+  useEffect(() => {
+    const ch = addons.getChannel();
+    ch.on(DARK_MODE_EVENT_NAME, setIsDark);
+    return () => ch.off(DARK_MODE_EVENT_NAME, setIsDark);
+  }, []);
+
+  return (
+    <DocsContainer context={context} theme={isDark ? themes.dark : themes.light}>
+      {children}
+    </DocsContainer>
+  );
+}
+
 const preview: Preview = {
   decorators: [
     (Story) => (
@@ -33,10 +95,20 @@ const preview: Preview = {
     },
     layout: 'padded',
     options: {
+      showPanel: false,
       storySort: {
-        order: ['Design System', 'UI Components'],
+        order: ['Design System', ['Overview', '*'], 'UI Components'],
       },
     },
+    darkMode: {
+      current: initialIsDark ? 'dark' : 'light',
+      stylePreview: true,
+      dark: themes.dark,
+      light: themes.light,
+    },
+    docs: {
+      container: ThemedDocsContainer,
+    },
   },
   initialGlobals: {
     showPanel: false,

package/templates/typical/client/package.json

@@ -45,6 +45,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vueless/storybook-dark-mode": "^10.0.7",
     "msw": "^2.12.10",
     "msw-storybook-addon": "^2.0.6",
     "storybook": "^10.2.8",

package/templates/typical/client/public/blank.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>

package/templates/typical/client/src/components/ui/DesignSystem-Overview.stories.tsx

@@ -93,17 +93,17 @@ function PaymentMethodDemo() {
                 <FieldLabel htmlFor="card-name">Name on Card</FieldLabel>
                 <Input id="card-name" placeholder="John Doe" />
               </Field>
-              <div className="grid grid-cols-3 gap-4">
-                <Field className="col-span-2">
+              <div className="grid grid-cols-4 gap-4">
+                <Field className="col-span-3">
                   <FieldLabel htmlFor="card-number">Card Number</FieldLabel>
                   <Input id="card-number" placeholder="1234 5678 9012 3456" />
-                  <FieldDescription>Enter your 16-digit number.</FieldDescription>
                 </Field>
                 <Field className="col-span-1">
                   <FieldLabel htmlFor="cvv">CVV</FieldLabel>
                   <Input id="cvv" placeholder="123" />
                 </Field>
               </div>
+              <FieldDescription className="-mt-2">Enter your 16-digit number.</FieldDescription>
               <div className="grid grid-cols-2 gap-4">
                 <Field>
                   <FieldLabel htmlFor="exp-month">Month</FieldLabel>
@@ -181,18 +181,18 @@ function EmptyAvatarGroupDemo() {
     <Empty className="flex-none py-4">
       <EmptyHeader>
         <EmptyMedia>
-          <AvatarGroup className="grayscale">
+          <AvatarGroup>
             <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-              <AvatarFallback>CN</AvatarFallback>
+              <AvatarImage src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" />
+              <AvatarFallback>SA</AvatarFallback>
             </Avatar>
             <Avatar>
-              <AvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
-              <AvatarFallback>LR</AvatarFallback>
+              <AvatarImage src="https://randomuser.me/api/portraits/men/32.jpg" alt="James" />
+              <AvatarFallback>JA</AvatarFallback>
             </Avatar>
             <Avatar>
-              <AvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
-              <AvatarFallback>ER</AvatarFallback>
+              <AvatarImage src="https://randomuser.me/api/portraits/women/68.jpg" alt="Maya" />
+              <AvatarFallback>MA</AvatarFallback>
             </Avatar>
           </AvatarGroup>
         </EmptyMedia>
@@ -510,8 +510,8 @@ function NotionPromptDemo() {
     <div className="w-full">
       <InputGroup>
         <InputGroupAddon>
-          <Button variant="outline" size="sm" className="h-7 gap-1 px-2 text-xs">
-            <PlusIcon className="size-3" />
+          <Button variant="outline" size="sm" className="h-6 gap-0.5 px-1.5 text-[10px]">
+            <PlusIcon className="size-2.5" />
             Add context
           </Button>
         </InputGroupAddon>
@@ -543,9 +543,13 @@ function UrlBookmarkDemo() {
   return (
     <InputGroup>
       <InputGroupAddon>
-        <InfoIcon className="size-4" />
+        <svg className="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" />
+          <path d="M2 12h20" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+        </svg>
       </InputGroupAddon>
-      <InputGroupInput placeholder="https://" className="!pl-0" />
+      <InputGroupInput placeholder="https://" />
       <InputGroupAddon align="inline-end">
         <Button variant="ghost" size="sm" className="size-6 p-0">
           <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -603,10 +607,10 @@ function SurveyOptionsDemo() {
       <FieldTitle>How did you hear about us?</FieldTitle>
       <FieldDescription>Select the option that best describes how you...</FieldDescription>
       <div className="mt-3 flex flex-wrap gap-2">
-        <Button variant="outline" size="sm" className="gap-1.5">
+        <div className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground">
           <Checkbox className="size-4" defaultChecked />
           Social Media
-        </Button>
+        </div>
         <Button variant="outline" size="sm">Search Engine</Button>
         <Button variant="outline" size="sm">Referral</Button>
         <Button variant="outline" size="sm">Other</Button>
@@ -618,12 +622,23 @@ function SurveyOptionsDemo() {
 function DesignSystemOverview() {
   return (
     <div className="mx-auto max-w-7xl p-6">
-      <div className="flex flex-col gap-4 sm:flex-row">
-        {/* Column 1 - wider for Payment Method */}
-        <div className="flex w-full flex-col gap-4 sm:w-auto sm:min-w-[320px] xl:min-w-[340px]">
+      <header className="mb-10 text-center">
+        <h1 className="text-3xl font-bold tracking-tight">Design System</h1>
+        <p className="mt-2 text-muted-foreground">Reusable components that power your UI — explore the sidebar to see each in detail</p>
+        <p className="mt-2 text-s italic text-muted-foreground/70">Bring your own design system — coming soon!</p>
+      </header>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+        {/* Column 1 - Payment Method needs more space */}
+        <div className="flex flex-[1.3] flex-col gap-4">
           <Tile>
             <PaymentMethodDemo />
           </Tile>
+          <Tile>
+            <SourceSelectorDemo />
+          </Tile>
+          <Tile>
+            <CopilotDropdownDemo />
+          </Tile>
         </div>
 
         {/* Column 2 */}
@@ -631,12 +646,6 @@ function DesignSystemOverview() {
           <Tile>
             <EmptyAvatarGroupDemo />
           </Tile>
-          <Tile>
-            <SpinnerBadgeDemo />
-          </Tile>
-          <Tile>
-            <NotionPromptDemo />
-          </Tile>
           <Tile>
             <InputGroupDemo />
           </Tile>
@@ -654,7 +663,7 @@ function DesignSystemOverview() {
             <ItemDemo />
           </Tile>
           <Tile>
-            <SourceSelectorDemo />
+            <SpinnerBadgeDemo />
           </Tile>
           <Tile>
             <AppearanceSettingsDemo />
@@ -662,7 +671,7 @@ function DesignSystemOverview() {
         </div>
 
         {/* Column 4 */}
-        <div className="hidden flex-1 flex-col gap-4 xl:flex">
+        <div className="hidden flex-1 flex-col gap-4 2xl:flex">
           <Tile>
             <ButtonGroupDemo />
           </Tile>
@@ -670,10 +679,10 @@ function DesignSystemOverview() {
             <FieldCheckboxDemo />
           </Tile>
           <Tile>
-            <PaginationDemo />
+            <NotionPromptDemo />
           </Tile>
           <Tile>
-            <CopilotDropdownDemo />
+            <PaginationDemo />
           </Tile>
           <Tile>
             <SurveyOptionsDemo />
@@ -693,7 +702,7 @@ function DesignSystemOverview() {
           <ItemDemo />
         </Tile>
         <Tile>
-          <SourceSelectorDemo />
+          <SpinnerBadgeDemo />
         </Tile>
         <Tile>
           <AppearanceSettingsDemo />
@@ -701,7 +710,7 @@ function DesignSystemOverview() {
       </div>
 
       {/* Overflow for column 4 on medium/large screens */}
-      <div className="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-3 xl:hidden">
+      <div className="mt-4 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:hidden">
         <Tile>
           <ButtonGroupDemo />
         </Tile>
@@ -709,10 +718,10 @@ function DesignSystemOverview() {
           <FieldCheckboxDemo />
         </Tile>
         <Tile>
-          <PaginationDemo />
+          <NotionPromptDemo />
         </Tile>
         <Tile>
-          <CopilotDropdownDemo />
+          <PaginationDemo />
         </Tile>
         <Tile>
           <SurveyOptionsDemo />