@auto-engineer/generate-react-client 1.28.0 → 1.30.0

package/dist/starter/pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.4)
+      graphql-request:
+        specifier: ^7.4.0
+        version: 7.4.0(graphql@16.12.0)
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -58,7 +61,7 @@ importers:
         version: 7.71.1(react@19.2.4)
       react-resizable-panels:
         specifier: ^4.6.1
-        version: 4.6.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        version: 4.6.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react-router-dom:
         specifier: ^7.13.0
         version: 7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -99,6 +102,9 @@ importers:
       '@vitejs/plugin-react-swc':
         specifier: ^4.2.2
         version: 4.2.3(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))
+      '@vueless/storybook-dark-mode':
+        specifier: ^10.0.7
+        version: 10.0.7(storybook@10.2.8(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
       msw:
         specifier: ^2.12.10
         version: 2.12.10(typescript@5.9.3)
@@ -392,6 +398,11 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@graphql-typed-document-node/core@3.2.0':
+    resolution: {integrity: sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+
   '@hookform/resolvers@5.2.2':
     resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
     peerDependencies:
@@ -432,13 +443,9 @@ packages:
       '@types/node':
         optional: true
 
-  '@isaacs/balanced-match@4.0.1':
-    resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
-    engines: {node: 20 || >=22}
-
-  '@isaacs/brace-expansion@5.0.1':
-    resolution: {integrity: sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==}
-    engines: {node: 20 || >=22}
+  '@isaacs/cliui@9.0.0':
+    resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
+    engines: {node: '>=18'}
 
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4':
     resolution: {integrity: sha512-6PyZBYKnnVNqOSB0YFly+62R7dmov8segT27A+RVTBVd4iAE6kbW9QBJGlyR2yG4D4ohzhZSTIu7BK1UTtmFFA==}
@@ -471,8 +478,8 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
-  '@mswjs/interceptors@0.41.2':
-    resolution: {integrity: sha512-7G0Uf0yK3f2bjElBLGHIQzgRgMESczOMyYVasq1XK8P5HaXtlW4eQhz9MBL+TQILZLaruq+ClGId+hH0w4jvWw==}
+  '@mswjs/interceptors@0.41.3':
+    resolution: {integrity: sha512-cXu86tF4VQVfwz8W1SPbhoRyHJkti6mjH/XJIxp40jhO4j2k1m4KYrEykxqWPkFF3vrK4rgQppBh//AwyGSXPA==}
     engines: {node: '>=18'}
 
   '@open-draft/deferred-promise@2.2.0':
@@ -1712,6 +1719,12 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@vueless/storybook-dark-mode@10.0.7':
+    resolution: {integrity: sha512-mI+tqHykUMlhdwu7PlZ6/wvq1aZqn4DWoUbO4GMhJxLnrDSJn4zKaeEtGXp4KTO5Myv/T6k2iteIe7MSTAZVDQ==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      storybook: ^10.0.0
+
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -1748,10 +1761,18 @@ packages:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
 
+  balanced-match@4.0.2:
+    resolution: {integrity: sha512-x0K50QvKQ97fdEz2kPehIerj+YTeptKF9hyYkKf6egnwmMWAkADiO0QCzSp0R5xN8FTZgYaBfSaue46Ej62nMg==}
+    engines: {node: 20 || >=22}
+
   baseline-browser-mapping@2.9.19:
     resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
     hasBin: true
 
+  brace-expansion@5.0.2:
+    resolution: {integrity: sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==}
+    engines: {node: 20 || >=22}
+
   browserslist@4.28.1:
     resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -2002,13 +2023,18 @@ packages:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
 
-  glob@13.0.2:
-    resolution: {integrity: sha512-035InabNu/c1lW0tzPhAgapKctblppqsKKG9ZaNzbr+gXwWMjXoiyGSyB9sArzrjG7jY+zntRq5ZSUYemrnWVQ==}
+  glob@13.0.3:
+    resolution: {integrity: sha512-/g3B0mC+4x724v1TgtBlBtt2hPi/EWptsIAmXUx9Z2rvBYleQcsrmaOzd5LyL50jf/Soi83ZDJmw2+XqvH/EeA==}
     engines: {node: 20 || >=22}
 
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  graphql-request@7.4.0:
+    resolution: {integrity: sha512-xfr+zFb/QYbs4l4ty0dltqiXIp07U6sl+tOKAb0t50/EnQek6CVVBLjETXi+FghElytvgaAWtIOt3EV7zLzIAQ==}
+    peerDependencies:
+      graphql: 14 - 16
+
   graphql@16.12.0:
     resolution: {integrity: sha512-DKKrynuQRne0PNpEbzuEdHlYOMksHSUI8Zc9Unei5gTsMNA2/vMpoMz/yKba50pejK56qj98qM0SjYxAKi13gQ==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
@@ -2059,6 +2085,10 @@ packages:
     resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
     engines: {node: '>=16'}
 
+  jackspeak@4.2.3:
+    resolution: {integrity: sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==}
+    engines: {node: 20 || >=22}
+
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -2149,6 +2179,9 @@ packages:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
 
+  lodash-es@4.17.23:
+    resolution: {integrity: sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==}
+
   lodash@4.17.23:
     resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
 
@@ -2182,8 +2215,8 @@ packages:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
 
-  minimatch@10.1.2:
-    resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
+  minimatch@10.2.0:
+    resolution: {integrity: sha512-ugkC31VaVg9cF0DFVoADH12k6061zNZkZON+aX8AWsR9GhPcErkcMBceb6znR8wLERM2AkkOxy2nWRLpT9Jq5w==}
     engines: {node: 20 || >=22}
 
   minimist@1.2.8:
@@ -2343,8 +2376,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@4.6.2:
-    resolution: {integrity: sha512-d6hyD6s7ewNAI+oINrZznR/08GUyAszrowXouUDztePEn/tQ2z/LEI2qRvrizYBe3TpgBi0cCjc10pXTTOc4jw==}
+  react-resizable-panels@4.6.3:
+    resolution: {integrity: sha512-nO5ksnCTdnV4YrRNw/OrZrX8ffh0sPA+2uM8kJbF19c8PRNuhH7ojJFE+UisAg2HFQFqIPmmW8bANrJNtIdXeA==}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
@@ -2953,6 +2986,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@graphql-typed-document-node/core@3.2.0(graphql@16.12.0)':
+    dependencies:
+      graphql: 16.12.0
+
   '@hookform/resolvers@5.2.2(react-hook-form@7.71.1(react@19.2.4))':
     dependencies:
       '@standard-schema/utils': 0.3.0
@@ -2980,15 +3017,11 @@ snapshots:
 
   '@inquirer/type@3.0.10': {}
 
-  '@isaacs/balanced-match@4.0.1': {}
-
-  '@isaacs/brace-expansion@5.0.1':
-    dependencies:
-      '@isaacs/balanced-match': 4.0.1
+  '@isaacs/cliui@9.0.0': {}
 
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.4(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2))':
     dependencies:
-      glob: 13.0.2
+      glob: 13.0.3
       react-docgen-typescript: 2.4.0(typescript@5.9.3)
       vite: 7.3.1(jiti@2.6.1)(lightningcss@1.30.2)
     optionalDependencies:
@@ -3019,7 +3052,7 @@ snapshots:
       '@types/react': 19.2.14
       react: 19.2.4
 
-  '@mswjs/interceptors@0.41.2':
+  '@mswjs/interceptors@0.41.3':
     dependencies:
       '@open-draft/deferred-promise': 2.2.0
       '@open-draft/logger': 0.3.0
@@ -4271,6 +4304,12 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@vueless/storybook-dark-mode@10.0.7(storybook@10.2.8(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      lodash-es: 4.17.23
+      storybook: 10.2.8(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
   acorn@8.15.0: {}
 
   ansi-regex@5.0.1: {}
@@ -4297,8 +4336,16 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  balanced-match@4.0.2:
+    dependencies:
+      jackspeak: 4.2.3
+
   baseline-browser-mapping@2.9.19: {}
 
+  brace-expansion@5.0.2:
+    dependencies:
+      balanced-match: 4.0.2
+
   browserslist@4.28.1:
     dependencies:
       baseline-browser-mapping: 2.9.19
@@ -4522,14 +4569,19 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
-  glob@13.0.2:
+  glob@13.0.3:
     dependencies:
-      minimatch: 10.1.2
+      minimatch: 10.2.0
       minipass: 7.1.2
       path-scurry: 2.0.1
 
   graceful-fs@4.2.11: {}
 
+  graphql-request@7.4.0(graphql@16.12.0):
+    dependencies:
+      '@graphql-typed-document-node/core': 3.2.0(graphql@16.12.0)
+      graphql: 16.12.0
+
   graphql@16.12.0: {}
 
   hasown@2.0.2:
@@ -4565,6 +4617,10 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  jackspeak@4.2.3:
+    dependencies:
+      '@isaacs/cliui': 9.0.0
+
   jiti@2.6.1: {}
 
   js-tokens@4.0.0: {}
@@ -4624,6 +4680,8 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.30.2
       lightningcss-win32-x64-msvc: 1.30.2
 
+  lodash-es@4.17.23: {}
+
   lodash@4.17.23: {}
 
   loose-envify@1.4.0:
@@ -4650,9 +4708,9 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  minimatch@10.1.2:
+  minimatch@10.2.0:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.1
+      brace-expansion: 5.0.2
 
   minimist@1.2.8: {}
 
@@ -4668,7 +4726,7 @@ snapshots:
   msw@2.12.10(typescript@5.9.3):
     dependencies:
       '@inquirer/confirm': 5.1.21
-      '@mswjs/interceptors': 0.41.2
+      '@mswjs/interceptors': 0.41.3
       '@open-draft/deferred-promise': 2.2.0
       '@types/statuses': 2.0.6
       cookie: 1.1.1
@@ -4870,7 +4928,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.14
 
-  react-resizable-panels@4.6.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  react-resizable-panels@4.6.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)

package/dist/starter/public/blank.svg

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

package/dist/starter/src/App.tsx

@@ -1,14 +1,28 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Separator } from '@/components/ui/Separator';
 
 const queryClient = new QueryClient();
 
+const LandingPage = () => (
+  <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/50">
+    <Card className="border-0 shadow-none bg-transparent">
+      <CardContent className="flex flex-col items-center gap-6">
+        <h1 className="text-5xl md:text-7xl font-extralight tracking-tight text-foreground">
+          Your ideas await
+        </h1>
+        <Separator className="w-16 bg-muted-foreground/30" />
+      </CardContent>
+    </Card>
+  </div>
+);
+
 export const App = () => (
   <QueryClientProvider client={queryClient}>
     <BrowserRouter>
       <Routes>
-        {/* Add routes here */}
-        <Route path="/" element={<div>Hello World</div>} />
+        <Route path="/" element={<LandingPage />} />
       </Routes>
     </BrowserRouter>
   </QueryClientProvider>

package/dist/starter/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 />

package/dist/starter/src/index.css

@@ -59,7 +59,6 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -81,11 +80,11 @@
 .dark {
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
+  --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
+  --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
   --primary-foreground: oklch(0.205 0 0);
   --secondary: oklch(0.269 0 0);
   --secondary-foreground: oklch(0.985 0 0);
@@ -93,11 +92,10 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -109,8 +107,8 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.269 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {

package/dist/starter/tsconfig.app.json

@@ -19,7 +19,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "include": ["src"]
 }

package/dist/starter/vite.config.ts

@@ -1,10 +1,43 @@
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
+import { defineConfig, type Plugin } from 'vite';
+
+function iframeNavigationTracking(): Plugin {
+  return {
+    name: 'iframe-navigation-tracking',
+    transformIndexHtml(html) {
+      return html.replace(
+        '</head>',
+        `<script>
+(function() {
+  if (window.parent === window) return;
+  function notify() {
+    window.parent.postMessage({ type: 'iframe-url-change', url: location.href }, '*');
+  }
+  var pushState = history.pushState;
+  var replaceState = history.replaceState;
+  history.pushState = function() {
+    pushState.apply(this, arguments);
+    notify();
+  };
+  history.replaceState = function() {
+    replaceState.apply(this, arguments);
+    notify();
+  };
+  window.addEventListener('popstate', notify);
+  window.addEventListener('hashchange', notify);
+  notify();
+})();
+</script>
+</head>`,
+      );
+    },
+  };
+}
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [react(), tailwindcss(), iframeNavigationTracking()],
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),