@auto-engineer/generate-react-client 1.12.1

package/dist/starter/src/components/ui/ContextMenu.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

package/dist/starter/src/components/ui/DesignSystem-Colors.mdx

@@ -0,0 +1,68 @@
+import { Meta, Stories } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design System/Colors" />
+
+# Colors
+
+Semantic color tokens used throughout the design system. Each token is defined as a CSS custom property and mapped to a Tailwind CSS utility class via the theme configuration in `index.css`.
+
+## Core
+
+| CSS Variable | Tailwind Class | Usage |
+|---|---|---|
+| `--primary` | `bg-primary` | Primary actions, active states |
+| `--primary-foreground` | `text-primary-foreground` | Text on primary backgrounds |
+| `--secondary` | `bg-secondary` | Secondary actions, less prominent UI |
+| `--secondary-foreground` | `text-secondary-foreground` | Text on secondary backgrounds |
+| `--accent` | `bg-accent` | Highlighted or accented areas |
+| `--accent-foreground` | `text-accent-foreground` | Text on accent backgrounds |
+| `--muted` | `bg-muted` | Subdued backgrounds, disabled states |
+| `--muted-foreground` | `text-muted-foreground` | De-emphasized text, placeholders |
+| `--destructive` | `bg-destructive` | Destructive actions, error states |
+| `--destructive-foreground` | `text-destructive-foreground` | Text on destructive backgrounds |
+| `--background` | `bg-background` | Page background |
+| `--foreground` | `text-foreground` | Default body text |
+
+## Surface
+
+| CSS Variable | Tailwind Class | Usage |
+|---|---|---|
+| `--card` | `bg-card` | Card backgrounds |
+| `--card-foreground` | `text-card-foreground` | Text inside cards |
+| `--popover` | `bg-popover` | Popover and dropdown backgrounds |
+| `--popover-foreground` | `text-popover-foreground` | Text inside popovers |
+
+## UI
+
+| CSS Variable | Tailwind Class | Usage |
+|---|---|---|
+| `--border` | `border-border` | Default border color |
+| `--input` | `border-input` | Input field borders |
+| `--ring` | `ring-ring` | Focus ring color |
+
+## Charts
+
+| CSS Variable | Tailwind Class | Usage |
+|---|---|---|
+| `--chart-1` | `bg-chart-1` | Chart color 1 |
+| `--chart-2` | `bg-chart-2` | Chart color 2 |
+| `--chart-3` | `bg-chart-3` | Chart color 3 |
+| `--chart-4` | `bg-chart-4` | Chart color 4 |
+| `--chart-5` | `bg-chart-5` | Chart color 5 |
+
+## Sidebar
+
+| CSS Variable | Tailwind Class | Usage |
+|---|---|---|
+| `--sidebar` | `bg-sidebar` | Sidebar background |
+| `--sidebar-foreground` | `text-sidebar-foreground` | Sidebar text |
+| `--sidebar-primary` | `bg-sidebar-primary` | Sidebar primary actions |
+| `--sidebar-primary-foreground` | `text-sidebar-primary-foreground` | Text on sidebar primary |
+| `--sidebar-accent` | `bg-sidebar-accent` | Sidebar accented areas |
+| `--sidebar-accent-foreground` | `text-sidebar-accent-foreground` | Text on sidebar accent |
+| `--sidebar-border` | `border-sidebar-border` | Sidebar border color |
+| `--sidebar-ring` | `ring-sidebar-ring` | Sidebar focus ring |
+
+## Swatches
+
+<Stories />

package/dist/starter/src/components/ui/DesignSystem-Colors.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+interface ColorToken {
+  variable: string;
+  utility: string;
+}
+
+interface ColorGroup {
+  label: string;
+  tokens: ColorToken[];
+}
+
+const colorGroups: ColorGroup[] = [
+  {
+    label: 'Core',
+    tokens: [
+      { variable: '--primary', utility: 'bg-primary' },
+      { variable: '--primary-foreground', utility: 'bg-primary-foreground' },
+      { variable: '--secondary', utility: 'bg-secondary' },
+      { variable: '--secondary-foreground', utility: 'bg-secondary-foreground' },
+      { variable: '--accent', utility: 'bg-accent' },
+      { variable: '--accent-foreground', utility: 'bg-accent-foreground' },
+      { variable: '--muted', utility: 'bg-muted' },
+      { variable: '--muted-foreground', utility: 'bg-muted-foreground' },
+      { variable: '--destructive', utility: 'bg-destructive' },
+      { variable: '--destructive-foreground', utility: 'bg-destructive-foreground' },
+      { variable: '--background', utility: 'bg-background' },
+      { variable: '--foreground', utility: 'bg-foreground' },
+    ],
+  },
+  {
+    label: 'Surface',
+    tokens: [
+      { variable: '--card', utility: 'bg-card' },
+      { variable: '--card-foreground', utility: 'bg-card-foreground' },
+      { variable: '--popover', utility: 'bg-popover' },
+      { variable: '--popover-foreground', utility: 'bg-popover-foreground' },
+    ],
+  },
+  {
+    label: 'UI',
+    tokens: [
+      { variable: '--border', utility: 'bg-border' },
+      { variable: '--input', utility: 'bg-input' },
+      { variable: '--ring', utility: 'bg-ring' },
+    ],
+  },
+  {
+    label: 'Charts',
+    tokens: [
+      { variable: '--chart-1', utility: 'bg-chart-1' },
+      { variable: '--chart-2', utility: 'bg-chart-2' },
+      { variable: '--chart-3', utility: 'bg-chart-3' },
+      { variable: '--chart-4', utility: 'bg-chart-4' },
+      { variable: '--chart-5', utility: 'bg-chart-5' },
+    ],
+  },
+  {
+    label: 'Sidebar',
+    tokens: [
+      { variable: '--sidebar', utility: 'bg-sidebar' },
+      { variable: '--sidebar-foreground', utility: 'bg-sidebar-foreground' },
+      { variable: '--sidebar-primary', utility: 'bg-sidebar-primary' },
+      {
+        variable: '--sidebar-primary-foreground',
+        utility: 'bg-sidebar-primary-foreground',
+      },
+      { variable: '--sidebar-accent', utility: 'bg-sidebar-accent' },
+      {
+        variable: '--sidebar-accent-foreground',
+        utility: 'bg-sidebar-accent-foreground',
+      },
+      { variable: '--sidebar-border', utility: 'bg-sidebar-border' },
+      { variable: '--sidebar-ring', utility: 'bg-sidebar-ring' },
+    ],
+  },
+];
+
+function ColorSwatch({ variable, utility }: ColorToken) {
+  return (
+    <div className="flex flex-col items-center gap-1.5">
+      <div className="h-16 w-16 rounded-md border border-border" style={{ backgroundColor: `var(${variable})` }} />
+      <span className="text-xs font-mono text-foreground">{variable}</span>
+      <span className="text-xs font-mono text-muted-foreground">{utility}</span>
+    </div>
+  );
+}
+
+function ColorSwatches() {
+  return (
+    <div className="flex flex-col gap-10 p-6">
+      {colorGroups.map((group) => (
+        <section key={group.label}>
+          <h2 className="mb-4 text-lg font-semibold text-foreground">{group.label}</h2>
+          <div className="flex flex-wrap gap-6">
+            {group.tokens.map((token) => (
+              <ColorSwatch key={token.variable} {...token} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: 'Design System/Colors',
+  component: ColorSwatches,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <ColorSwatches />,
+};

package/dist/starter/src/components/ui/DesignSystem-Layout.mdx

@@ -0,0 +1,64 @@
+import { Meta, Stories } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design System/Layout" />
+
+# Layout
+
+Spacing, border radius, and shadow tokens used throughout the design system.
+
+## Spacing
+
+The spacing scale uses Tailwind utility classes. Apply these consistently to maintain visual rhythm.
+
+| Purpose | Classes | When to use |
+| --- | --- | --- |
+| Section gaps | `space-y-16`, `py-16` | Between major page sections |
+| Content gaps | `space-y-6`, `space-y-8` | Between content blocks within a section |
+| Element gaps | `space-y-3`, `gap-3` | Between related elements (form fields, list items) |
+| Padding | `p-4` | Compact containers (cards, popovers) |
+| Padding | `p-6` | Standard containers |
+| Padding | `p-8` | Spacious containers (hero sections, modals) |
+
+### Guidelines
+
+- Use `space-y-*` for vertical stacking of block elements.
+- Use `gap-*` with flex or grid layouts.
+- Prefer consistent padding within a component; avoid mixing `p-4` and `p-8` at the same level.
+
+## Border Radius
+
+Border radius values are derived from the `--radius` CSS custom property (default `0.625rem`).
+
+| Class | CSS Variable | Value |
+| --- | --- | --- |
+| `rounded-sm` | `--radius-sm` | `calc(var(--radius) - 4px)` |
+| `rounded-md` | `--radius-md` | `calc(var(--radius) - 2px)` |
+| `rounded-lg` | `--radius-lg` | `var(--radius)` |
+| `rounded-xl` | `--radius-xl` | `calc(var(--radius) + 4px)` |
+
+### Guidelines
+
+- `rounded-sm` -- Small inline elements (badges, tags).
+- `rounded-md` -- Inputs, buttons, and form controls.
+- `rounded-lg` -- Cards, dialogs, and container surfaces.
+- `rounded-xl` -- Large hero cards or featured sections.
+
+## Shadows
+
+Shadows add depth and elevation. Use the Tailwind shadow utilities.
+
+| Class | Usage |
+| --- | --- |
+| `shadow-sm` | Subtle lift for cards and inputs at rest |
+| `shadow` | Default elevation for interactive surfaces |
+| `shadow-md` | Hover states, dropdown menus |
+| `shadow-lg` | Modals, popovers, floating panels |
+| `shadow-xl` | Prominent overlays, feature highlights |
+
+### Guidelines
+
+- Shadows should increase with elevation: resting surfaces use `shadow-sm`, overlays use `shadow-lg` or `shadow-xl`.
+- Avoid applying shadows to flat, inline elements like text or badges.
+- Combine shadows with border radius for polished container surfaces.
+
+<Stories />

package/dist/starter/src/components/ui/DesignSystem-Layout.stories.tsx

@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+function SpacingScale() {
+  const spacingItems = [
+    { label: 'Section gaps', classes: 'space-y-16, py-16', demo: 'space-y-16 py-16' },
+    { label: 'Content gaps', classes: 'space-y-6, space-y-8', demo: 'space-y-6' },
+    { label: 'Element gaps', classes: 'space-y-3, gap-3', demo: 'gap-3' },
+    { label: 'Padding', classes: 'p-4, p-6, p-8', demo: '' },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <h2 className="text-xl font-semibold">Spacing Scale</h2>
+
+      {/* Section gaps */}
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-muted-foreground">
+          Section gaps: <code className="text-xs">space-y-16</code>, <code className="text-xs">py-16</code>
+        </h3>
+        <div className="space-y-16 rounded-lg border border-border p-4">
+          <div className="h-8 rounded bg-primary/20" />
+          <div className="h-8 rounded bg-primary/20" />
+        </div>
+      </div>
+
+      {/* Content gaps */}
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-muted-foreground">
+          Content gaps: <code className="text-xs">space-y-6</code>, <code className="text-xs">space-y-8</code>
+        </h3>
+        <div className="flex gap-8">
+          <div className="flex-1">
+            <p className="mb-1 text-xs text-muted-foreground">space-y-6</p>
+            <div className="space-y-6 rounded-lg border border-border p-4">
+              <div className="h-6 rounded bg-primary/20" />
+              <div className="h-6 rounded bg-primary/20" />
+              <div className="h-6 rounded bg-primary/20" />
+            </div>
+          </div>
+          <div className="flex-1">
+            <p className="mb-1 text-xs text-muted-foreground">space-y-8</p>
+            <div className="space-y-8 rounded-lg border border-border p-4">
+              <div className="h-6 rounded bg-primary/20" />
+              <div className="h-6 rounded bg-primary/20" />
+              <div className="h-6 rounded bg-primary/20" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Element gaps */}
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-muted-foreground">
+          Element gaps: <code className="text-xs">space-y-3</code>, <code className="text-xs">gap-3</code>
+        </h3>
+        <div className="flex gap-8">
+          <div className="flex-1">
+            <p className="mb-1 text-xs text-muted-foreground">space-y-3</p>
+            <div className="space-y-3 rounded-lg border border-border p-4">
+              <div className="h-4 rounded bg-primary/20" />
+              <div className="h-4 rounded bg-primary/20" />
+              <div className="h-4 rounded bg-primary/20" />
+            </div>
+          </div>
+          <div className="flex-1">
+            <p className="mb-1 text-xs text-muted-foreground">gap-3</p>
+            <div className="flex gap-3 rounded-lg border border-border p-4">
+              <div className="h-4 flex-1 rounded bg-primary/20" />
+              <div className="h-4 flex-1 rounded bg-primary/20" />
+              <div className="h-4 flex-1 rounded bg-primary/20" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Padding */}
+      <div>
+        <h3 className="mb-2 text-sm font-medium text-muted-foreground">
+          Padding: <code className="text-xs">p-4</code>, <code className="text-xs">p-6</code>,{' '}
+          <code className="text-xs">p-8</code>
+        </h3>
+        <div className="flex gap-6">
+          {(['p-4', 'p-6', 'p-8'] as const).map((padding) => (
+            <div key={padding} className="flex-1">
+              <p className="mb-1 text-xs text-muted-foreground">{padding}</p>
+              <div className={`${padding} rounded-lg border border-border`}>
+                <div className="h-8 rounded bg-primary/20" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BorderRadiusScale() {
+  const radii = [
+    { label: 'rounded-sm', variable: '--radius-sm', formula: 'calc(var(--radius) - 4px)' },
+    { label: 'rounded-md', variable: '--radius-md', formula: 'calc(var(--radius) - 2px)' },
+    { label: 'rounded-lg', variable: '--radius-lg', formula: 'var(--radius)' },
+    { label: 'rounded-xl', variable: '--radius-xl', formula: 'calc(var(--radius) + 4px)' },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <h2 className="text-xl font-semibold">Border Radius</h2>
+      <div className="flex flex-wrap gap-6">
+        {radii.map(({ label, variable, formula }) => (
+          <div key={label} className="flex flex-col items-center gap-2">
+            <div className={`flex h-24 w-24 items-center justify-center border border-border bg-primary/10 ${label}`}>
+              <span className="text-xs text-muted-foreground">{label.replace('rounded-', '')}</span>
+            </div>
+            <code className="text-xs">{label}</code>
+            <span className="text-xs text-muted-foreground">{formula}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ShadowScale() {
+  const shadows = ['shadow-sm', 'shadow', 'shadow-md', 'shadow-lg', 'shadow-xl'] as const;
+
+  return (
+    <div className="space-y-8">
+      <h2 className="text-xl font-semibold">Shadows</h2>
+      <div className="flex flex-wrap gap-8">
+        {shadows.map((shadow) => (
+          <div key={shadow} className="flex flex-col items-center gap-3">
+            <div className={`flex h-24 w-24 items-center justify-center rounded-lg bg-background ${shadow}`}>
+              <span className="text-xs text-muted-foreground">
+                {shadow === 'shadow' ? 'default' : shadow.replace('shadow-', '')}
+              </span>
+            </div>
+            <code className="text-xs">{shadow}</code>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function LayoutShowcase() {
+  return (
+    <div className="space-y-16 p-8">
+      <SpacingScale />
+      <BorderRadiusScale />
+      <ShadowScale />
+    </div>
+  );
+}
+
+const meta: Meta = {
+  title: 'Design System/Layout',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <LayoutShowcase />,
+};

package/dist/starter/src/components/ui/DesignSystem-Typography.mdx

@@ -0,0 +1,31 @@
+import { Meta, Stories } from '@storybook/addon-docs/blocks';
+
+<Meta title="Design System/Typography" />
+
+# Typography
+
+Typography classes used across the design system. All styles are composed from
+Tailwind CSS utility classes -- no custom font-size tokens are needed.
+
+## Reference
+
+| Element | Tailwind Classes | Usage |
+| --- | --- | --- |
+| **H1** | `text-5xl font-extrabold tracking-tight` | Hero or display headings |
+| **H2** | `text-4xl font-bold tracking-tight` | Page-level headings |
+| **H3** | `text-3xl font-bold` | Section headings |
+| **H4** | `text-2xl font-semibold` | Subsection headings |
+| **H5** | `text-xl font-semibold` | Card or widget headings |
+| **Body (lead)** | `text-base leading-relaxed` | Long-form paragraphs where extra line-height aids readability |
+| **Body** | `text-base` | Default body text, UI labels |
+| **Muted** | `text-sm text-muted-foreground` | Descriptions, help text, secondary information |
+| **Small / Caption** | `text-xs text-muted-foreground` | Captions, timestamps, metadata |
+
+## Guidelines
+
+- Prefer semantic heading order (`H1` > `H2` > `H3` ...) for accessibility.
+- Use **lead body** (`leading-relaxed`) only for multi-line content blocks; single-line labels should use the plain **body** style.
+- `text-muted-foreground` maps to the theme's muted colour and automatically adapts between light and dark modes.
+- Avoid mixing heading classes with body classes on the same element.
+
+<Stories />