create-auto-app 1.34.0 → 1.35.0

package/templates/typical/client/src/components/ui/ContextMenu.tsx

@@ -1,231 +0,0 @@
-'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';
-
-/** Right-click menu with keyboard navigation. Supports submenus, checkbox/radio items, separators, and shortcuts. */
-function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
-}
-
-/** The element that opens the context menu on right-click. Wraps its children. */
-function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
-}
-
-/** Groups related context menu items for accessibility. */
-function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
-}
-
-/** Renders context menu content into a React portal. */
-function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
-}
-
-/** Container for a submenu within the context menu. */
-function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
-}
-
-/** Groups radio items for single-selection within the context menu. */
-function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
-}
-
-/** Menu item that opens a nested submenu on hover or keyboard navigation. Shows a chevron indicator. */
-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>
-  );
-}
-
-/** Popup content for a nested submenu. */
-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}
-    />
-  );
-}
-
-/** The positioned popup container for context menu items. Portals to the document body. */
-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>
-  );
-}
-
-/**
- * A selectable action within the context menu.
- * Use variant="destructive" for dangerous actions like delete.
- */
-function ContextMenuItem({
-  className,
-  /** Adds left padding to align with items that have icons or indicators. */
-  inset,
-  /** Use "destructive" for dangerous actions. */
-  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}
-    />
-  );
-}
-
-/** A toggleable checkbox item within the context menu. Shows a check indicator when active. */
-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>
-  );
-}
-
-/** A radio-selectable item within a ContextMenuRadioGroup. Shows a dot indicator when selected. */
-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>
-  );
-}
-
-/** Non-interactive label within a context menu, used for section headings. */
-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}
-    />
-  );
-}
-
-/** Visual divider between groups of context menu items. */
-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}
-    />
-  );
-}
-
-/** Displays a keyboard shortcut hint aligned to the right side of a context menu item. */
-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/templates/typical/client/src/components/ui/DesignSystem-Colors.mdx

@@ -1,68 +0,0 @@
-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/templates/typical/client/src/components/ui/DesignSystem-Colors.stories.tsx

@@ -1,117 +0,0 @@
-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,
-  tags: ['!autodocs', '!manifest'],
-};
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
-  render: () => <ColorSwatches />,
-};

package/templates/typical/client/src/components/ui/DesignSystem-Layout.mdx

@@ -1,64 +0,0 @@
-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/templates/typical/client/src/components/ui/DesignSystem-Layout.stories.tsx

@@ -1,167 +0,0 @@
-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',
-  tags: ['!autodocs', '!manifest'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
-  render: () => <LayoutShowcase />,
-};