diff --git a/.changeset/add-icon-more-export.md b/.changeset/add-icon-more-export.md
new file mode 100644
index 000000000..2d63bac78
--- /dev/null
+++ b/.changeset/add-icon-more-export.md
@@ -0,0 +1,5 @@
+---
+"@tiny-design/icons": minor
+---
+
+Add the new `IconMore` export to the icons package.
diff --git a/apps/docs/src/containers/theme-studio/color-utils.ts b/apps/docs/src/containers/theme-studio/color-utils.ts
index f1c62588e..1137cb87a 100644
--- a/apps/docs/src/containers/theme-studio/color-utils.ts
+++ b/apps/docs/src/containers/theme-studio/color-utils.ts
@@ -7,6 +7,14 @@ type OklchColor = {
   c: number;
   h: number;
 };
+export type ShadowValue = {
+  color: string;
+  opacity: number;
+  blur: number;
+  spread: number;
+  offsetX: number;
+  offsetY: number;
+};
 
 function normalizeAlpha(value: number): number {
   if (!Number.isFinite(value)) return 1;
@@ -72,42 +80,66 @@ export function formatOklchColor(color: OklchColor): string {
   return `oklch(${color.l.toFixed(3)} ${color.c.toFixed(3)} ${color.h.toFixed(3)})`;
 }
 
-export function deriveStatusPalette(styles: RuntimeStyles): Pick<
+export function deriveStatusPalette(
+  styles: RuntimeStyles
+): Pick<
   ThemeEditorFields,
-  'success' | 'successForeground' | 'info' | 'infoForeground' | 'warning' | 'warningForeground' | 'danger' | 'dangerForeground'
+  | 'success'
+  | 'successForeground'
+  | 'info'
+  | 'infoForeground'
+  | 'warning'
+  | 'warningForeground'
+  | 'danger'
+  | 'dangerForeground'
 > {
-  const mode: ThemeMode = parseCssScalar(styles.background ?? '') != null
-    ? ((parseOklchColor(styles.background)?.l ?? 1) < 0.45 ? 'dark' : 'light')
-    : 'light';
-  const seed = parseOklchColor(styles.primary) ?? parseOklchColor(styles.accent) ?? parseOklchColor(styles.ring);
+  const mode: ThemeMode =
+    parseCssScalar(styles.background ?? '') != null
+      ? (parseOklchColor(styles.background)?.l ?? 1) < 0.45
+        ? 'dark'
+        : 'light'
+      : 'light';
+  const seed =
+    parseOklchColor(styles.primary) ??
+    parseOklchColor(styles.accent) ??
+    parseOklchColor(styles.ring);
   const chromaBase = clamp(seed?.c ?? (mode === 'dark' ? 0.17 : 0.19), 0.1, 0.24);
   const lightnessShift = seed ? (seed.l - (mode === 'dark' ? 0.78 : 0.58)) * 0.08 : 0;
   const hueShift = seed ? ((seed.h - 220) / 220) * 6 : 0;
   const statusForeground = mode === 'dark' ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)';
 
-  const createStatus = (hue: number, lightness: number, chromaScale: number) => formatOklchColor({
-    l: clamp(lightness + lightnessShift, mode === 'dark' ? 0.68 : 0.54, mode === 'dark' ? 0.84 : 0.74),
-    c: clamp(chromaBase * chromaScale, 0.12, 0.26),
-    h: normalizeHue(hue + hueShift),
-  });
+  const createStatus = (hue: number, lightness: number, chromaScale: number) =>
+    formatOklchColor({
+      l: clamp(
+        lightness + lightnessShift,
+        mode === 'dark' ? 0.68 : 0.54,
+        mode === 'dark' ? 0.84 : 0.74
+      ),
+      c: clamp(chromaBase * chromaScale, 0.12, 0.26),
+      h: normalizeHue(hue + hueShift),
+    });
 
   return {
     success: createStatus(148, mode === 'dark' ? 0.76 : 0.62, 0.92),
     successForeground: statusForeground,
-    info: createStatus(238, mode === 'dark' ? 0.74 : 0.60, 0.96),
+    info: createStatus(238, mode === 'dark' ? 0.74 : 0.6, 0.96),
     infoForeground: statusForeground,
-    warning: createStatus(72, mode === 'dark' ? 0.80 : 0.69, 0.94),
+    warning: createStatus(72, mode === 'dark' ? 0.8 : 0.69, 0.94),
     warningForeground: mode === 'dark' ? 'oklch(0.145 0 0)' : 'oklch(0.205 0 0)',
-    danger: createStatus(28, mode === 'dark' ? 0.72 : 0.60, 1),
+    danger: createStatus(28, mode === 'dark' ? 0.72 : 0.6, 1),
     dangerForeground: statusForeground,
   };
 }
 
 function parseHexColor(color: string): [number, number, number] | null {
   const normalized = color.trim().replace('#', '');
-  const value = normalized.length === 3
-    ? normalized.split('').map((char) => `${char}${char}`).join('')
-    : normalized;
+  const value =
+    normalized.length === 3
+      ? normalized
+          .split('')
+          .map((char) => `${char}${char}`)
+          .join('')
+      : normalized;
 
   if (!/^[0-9a-f]{6}$/i.test(value)) return null;
 
@@ -155,9 +187,138 @@ export function softenSurface(color: string, mode: ThemeMode, amount: number): s
   return mode === 'dark' ? tintColor(color, amount) : shadeColor(color, amount);
 }
 
-export function buildShadow(styles: RuntimeStyles): string {
+function splitTopLevelTokens(value: string): string[] {
+  const tokens: string[] = [];
+  let current = '';
+  let depth = 0;
+
+  for (const char of value) {
+    if (char === '(') depth += 1;
+    if (char === ')') depth = Math.max(0, depth - 1);
+
+    if (/\s/.test(char) && depth === 0) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) tokens.push(current);
+  return tokens;
+}
+
+function parsePxValue(token: string): number | null {
+  const trimmed = token.trim();
+  if (/^-?0(?:\.0+)?(?:px)?$/i.test(trimmed)) return 0;
+
+  const match = /^(-?\d+(?:\.\d+)?)px$/i.exec(trimmed);
+  if (!match) return null;
+
+  const parsed = Number.parseFloat(match[1]);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function rgbChannelToHex(value: string): string | null {
+  const parsed = Number.parseInt(value.trim(), 10);
+  if (!Number.isFinite(parsed) || parsed < 0 || parsed > 255) return null;
+  return parsed.toString(16).padStart(2, '0');
+}
+
+function parseShadowColor(value: string): Pick<ShadowValue, 'color' | 'opacity'> | null {
+  const colorMixMatch =
+    /^color-mix\(in srgb,\s*(.+?)\s+(-?\d+(?:\.\d+)?)%,\s*transparent\s*\)$/i.exec(value.trim());
+  if (colorMixMatch) {
+    const percentage = Number.parseFloat(colorMixMatch[2]);
+    if (Number.isFinite(percentage)) {
+      return {
+        color: colorMixMatch[1].trim(),
+        opacity: clamp(percentage / 100, 0, 1),
+      };
+    }
+  }
+
+  const rgbaMatch = /^rgba\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^)]+)\)$/i.exec(
+    value.trim()
+  );
+  if (rgbaMatch) {
+    const red = rgbChannelToHex(rgbaMatch[1]);
+    const green = rgbChannelToHex(rgbaMatch[2]);
+    const blue = rgbChannelToHex(rgbaMatch[3]);
+    const alpha = Number.parseFloat(rgbaMatch[4]);
+
+    if (red && green && blue && Number.isFinite(alpha)) {
+      return {
+        color: `#${red}${green}${blue}`,
+        opacity: clamp(alpha, 0, 1),
+      };
+    }
+  }
+
+  const rgbMatch = /^rgb\(\s*([^,]+)\s*,\s*([^,]+)\s*,\s*([^,]+)\s*\)$/i.exec(value.trim());
+  if (rgbMatch) {
+    const red = rgbChannelToHex(rgbMatch[1]);
+    const green = rgbChannelToHex(rgbMatch[2]);
+    const blue = rgbChannelToHex(rgbMatch[3]);
+
+    if (red && green && blue) {
+      return {
+        color: `#${red}${green}${blue}`,
+        opacity: 1,
+      };
+    }
+  }
+
+  return value.trim()
+    ? {
+        color: value.trim(),
+        opacity: 1,
+      }
+    : null;
+}
+
+export function formatShadowValue(shadow: ShadowValue): string {
+  const offsetX = `${shadow.offsetX}px`;
+  const offsetY = `${shadow.offsetY}px`;
+  const blur = `${shadow.blur}px`;
+  const spread = `${shadow.spread}px`;
+
+  return `${offsetX} ${offsetY} ${blur} ${spread} ${toRgba(shadow.color, shadow.opacity)}`;
+}
+
+export function parseShadowValue(value: string, fallback: ShadowValue): ShadowValue {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.toLowerCase() === 'none') return fallback;
+
+  const tokens = splitTopLevelTokens(trimmed);
+  if (tokens.length < 5) return fallback;
+
+  const offsetX = parsePxValue(tokens[0]);
+  const offsetY = parsePxValue(tokens[1]);
+  const blur = parsePxValue(tokens[2]);
+  const spread = parsePxValue(tokens[3]);
+  const color = parseShadowColor(tokens.slice(4).join(' '));
+
+  if (offsetX == null || offsetY == null || blur == null || spread == null || !color) {
+    return fallback;
+  }
+
+  return {
+    color: color.color,
+    opacity: color.opacity,
+    blur,
+    spread,
+    offsetX,
+    offsetY,
+  };
+}
+
+export function buildShadow(styles: RuntimeStyles, fallback = DEFAULT_FIELDS.shadowCard): string {
   const color = styles['shadow-color'];
-  if (!color) return DEFAULT_FIELDS.shadowCard;
+  if (!color) return fallback;
 
   const opacity = Number.parseFloat(styles['shadow-opacity'] ?? '0.1');
   const blur = styles['shadow-blur'] ?? '0px';
diff --git a/apps/docs/src/containers/theme-studio/defaults.ts b/apps/docs/src/containers/theme-studio/defaults.ts
index d8ecb58d9..3d24bb0fa 100644
--- a/apps/docs/src/containers/theme-studio/defaults.ts
+++ b/apps/docs/src/containers/theme-studio/defaults.ts
@@ -50,6 +50,7 @@ export const DEFAULT_FIELDS: ThemeEditorFields = {
   h2Size: '32px',
   letterSpacing: '-0.02em',
   radius: '0.3rem',
+  shadowControl: 'none',
   shadowCard: '0 20px 55px rgba(17, 24, 39, 0.08)',
   shadowFocus: '0 0 0 3px rgba(110, 65, 191, 0.22)',
   buttonRadius: '0.3rem',
diff --git a/apps/docs/src/containers/theme-studio/editor-draft.ts b/apps/docs/src/containers/theme-studio/editor-draft.ts
index ab5121139..ad2adb040 100644
--- a/apps/docs/src/containers/theme-studio/editor-draft.ts
+++ b/apps/docs/src/containers/theme-studio/editor-draft.ts
@@ -128,6 +128,7 @@ export function buildPreviewVars(fields: ThemeEditorFields): React.CSSProperties
     '--editor-h2-size': fields.h2Size,
     '--editor-letter-spacing': fields.letterSpacing,
     '--editor-radius': fields.radius,
+    '--editor-shadow-control': fields.shadowControl,
     '--editor-shadow-card': fields.shadowCard,
     '--editor-shadow-focus': fields.shadowFocus,
     '--editor-button-radius': fields.buttonRadius,
diff --git a/apps/docs/src/containers/theme-studio/editor-fields.tsx b/apps/docs/src/containers/theme-studio/editor-fields.tsx
index b8c060409..698ccb152 100644
--- a/apps/docs/src/containers/theme-studio/editor-fields.tsx
+++ b/apps/docs/src/containers/theme-studio/editor-fields.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ColorPicker, Input, InputNumber, Slider, Textarea } from '@tiny-design/react';
+import { formatShadowValue, parseShadowValue, type ShadowValue } from './color-utils';
 import type { SliderFieldConfig } from './types';
 
 export function swatchTextStyle(background: string, foreground: string): React.CSSProperties {
@@ -140,3 +141,146 @@ export function SliderField({
     </label>
   );
 }
+
+function ShadowMetricField({
+  label,
+  value,
+  min,
+  max,
+  step,
+  unit,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  unit?: string;
+  onChange: (next: number) => void;
+}): React.ReactElement {
+  return (
+    <label className="theme-studio__field theme-studio__shadow-metric">
+      <div className="theme-studio__field-row">
+        <span className="theme-studio__shadow-metric-label">{label}</span>
+        <span className="theme-studio__field-value">
+          {unit ? `${value}${unit}` : String(value)}
+        </span>
+      </div>
+      <div className="theme-studio__slider-field">
+        <Slider
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={(next) => typeof next === 'number' && onChange(next)}
+        />
+        <InputNumber
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          onChange={(next) => typeof next === 'number' && onChange(next)}
+        />
+      </div>
+    </label>
+  );
+}
+
+export function ShadowField({
+  label,
+  value,
+  onChange,
+  fallback,
+}: {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  fallback: ShadowValue;
+}): React.ReactElement {
+  const parsed = React.useMemo(() => parseShadowValue(value, fallback), [fallback, value]);
+
+  const updateShadow = (patch: Partial<ShadowValue>) => {
+    onChange(
+      formatShadowValue({
+        ...parsed,
+        ...patch,
+      })
+    );
+  };
+
+  return (
+    <div className="theme-studio__field theme-studio__shadow-field">
+      <span className="theme-studio__field-label">{label}</span>
+      <div className="theme-studio__shadow-editor">
+        <div className="theme-studio__shadow-color-row">
+          <span className="theme-studio__shadow-color-label">Color</span>
+          <div className="theme-studio__color-field">
+            <ColorPicker
+              value={parsed.color}
+              onChange={(next) => updateShadow({ color: next })}
+              presets={[
+                '#000000',
+                '#ffffff',
+                '#1e9df1',
+                '#0f1419',
+                '#e11d48',
+                '#22c55e',
+                '#f59e0b',
+                '#8b5cf6',
+              ]}
+            />
+            <Input
+              value={parsed.color}
+              onChange={(event) => updateShadow({ color: event.target.value })}
+            />
+          </div>
+        </div>
+        <ShadowMetricField
+          label="Opacity"
+          value={parsed.opacity}
+          min={0}
+          max={1}
+          step={0.01}
+          onChange={(next) => updateShadow({ opacity: next })}
+        />
+        <ShadowMetricField
+          label="Blur"
+          value={parsed.blur}
+          min={0}
+          max={32}
+          step={1}
+          unit="px"
+          onChange={(next) => updateShadow({ blur: next })}
+        />
+        <ShadowMetricField
+          label="Spread"
+          value={parsed.spread}
+          min={-16}
+          max={32}
+          step={1}
+          unit="px"
+          onChange={(next) => updateShadow({ spread: next })}
+        />
+        <ShadowMetricField
+          label="Offset X"
+          value={parsed.offsetX}
+          min={-32}
+          max={32}
+          step={1}
+          unit="px"
+          onChange={(next) => updateShadow({ offsetX: next })}
+        />
+        <ShadowMetricField
+          label="Offset Y"
+          value={parsed.offsetY}
+          min={-32}
+          max={32}
+          step={1}
+          unit="px"
+          onChange={(next) => updateShadow({ offsetY: next })}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/preview-components.tsx b/apps/docs/src/containers/theme-studio/preview-components.tsx
deleted file mode 100644
index cd61ea425..000000000
--- a/apps/docs/src/containers/theme-studio/preview-components.tsx
+++ /dev/null
@@ -1,1016 +0,0 @@
-import React from 'react';
-import {
-  Alert,
-  Avatar,
-  Button,
-  Card,
-  Checkbox,
-  DatePicker,
-  Divider,
-  Flex,
-  Grid,
-  Input,
-  Progress,
-  Radio,
-  Select,
-  Segmented,
-  Switch,
-  Table,
-  Tag,
-  Textarea,
-  Calendar,
-  Heading,
-  Paragraph,
-  Text,
-} from '@tiny-design/react';
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from '@tiny-design/charts';
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { swatchTextStyle } from './editor-fields';
-import type { ThemeEditorFields, ThemeEditorSection, ThemePreviewTemplate } from './types';
-import { IconGithub, IconGoogle } from '@tiny-design/icons';
-
-const revenueData = [
-  { month: 'Jan', revenue: 4200, target: 3800 },
-  { month: 'Feb', revenue: 5100, target: 4300 },
-  { month: 'Mar', revenue: 4800, target: 4500 },
-  { month: 'Apr', revenue: 6200, target: 5200 },
-  { month: 'May', revenue: 6900, target: 6100 },
-  { month: 'Jun', revenue: 7600, target: 6600 },
-];
-
-const revenueChartConfig: ChartConfig = {
-  revenue: {
-    label: 'Revenue',
-    color: 'var(--ty-chart-1)',
-  },
-  target: {
-    label: 'Target',
-    color: 'var(--ty-chart-2)',
-  },
-};
-
-const cardsRevenueData = [
-  { month: 'Jan', value: 8.4 },
-  { month: 'Feb', value: 7.2 },
-  { month: 'Mar', value: 7.8 },
-  { month: 'Apr', value: 6.9 },
-  { month: 'May', value: 7.4 },
-  { month: 'Jun', value: 8.1 },
-  { month: 'Jul', value: 12.4 },
-];
-
-const cardsRevenueChartConfig: ChartConfig = {
-  value: {
-    label: 'Revenue',
-    color: 'var(--ty-chart-4)',
-  },
-};
-
-const moveGoalData = [
-  { key: 'm1', dayLabel: 'M', value: 280 },
-  { key: 't1', dayLabel: 'T', value: 340 },
-  { key: 'w1', dayLabel: 'W', value: 220 },
-  { key: 'th1', dayLabel: 'T', value: 310 },
-  { key: 'f1', dayLabel: 'F', value: 360 },
-  { key: 's1', dayLabel: 'S', value: 240 },
-  { key: 'su1', dayLabel: 'S', value: 300 },
-  { key: 'm2', dayLabel: 'M', value: 330 },
-  { key: 't2', dayLabel: 'T', value: 260 },
-  { key: 'w2', dayLabel: 'W', value: 320 },
-  { key: 'th2', dayLabel: 'T', value: 350 },
-  { key: 'f2', dayLabel: 'F', value: 290 },
-];
-
-const moveGoalChartConfig: ChartConfig = {
-  value: {
-    label: 'Calories',
-    color: 'var(--ty-chart-1)',
-  },
-};
-
-const cardsExerciseData = [
-  { month: 'Mar', personal: 18, average: 22 },
-  { month: 'Apr', personal: 14, average: 18 },
-  { month: 'May', personal: 58, average: 26 },
-  { month: 'Jun', personal: 28, average: 24 },
-  { month: 'Jul', personal: 22, average: 20 },
-  { month: 'Aug', personal: 26, average: 23 },
-];
-
-const cardsExerciseChartConfig: ChartConfig = {
-  personal: {
-    label: 'You',
-    color: 'var(--ty-chart-2)',
-  },
-  average: {
-    label: 'Average',
-    color: 'var(--ty-chart-5)',
-  },
-};
-
-const subscriptionsData = [
-  { month: 'Jan', value: 400 },
-  { month: 'Feb', value: 620 },
-  { month: 'Mar', value: 980 },
-  { month: 'Apr', value: 1480 },
-  { month: 'May', value: 1910 },
-  { month: 'Jun', value: 880 },
-  { month: 'Jul', value: 2350 },
-];
-
-const subscriptionsChartConfig: ChartConfig = {
-  value: {
-    label: 'Subscriptions',
-    color: 'var(--editor-card-foreground)',
-  },
-};
-
-const currYear = new Date().getFullYear();
-const currMonth = new Date().getMonth();
-
-function LiveResponsePanel({ fields }: { fields: ThemeEditorFields }): React.ReactElement {
-  const colorPairs = [
-    ['Primary', fields.primary, fields.primaryForeground],
-    ['Accent', fields.accent, fields.accentForeground],
-    ['Success', fields.success, fields.successForeground],
-    ['Info', fields.info, fields.infoForeground],
-    ['Warning', fields.warning, fields.warningForeground],
-    ['Danger', fields.danger, fields.dangerForeground],
-    ['Card', fields.card, fields.cardForeground],
-  ];
-
-  return (
-    <Flex vertical className="theme-studio__response-panel">
-      <Flex vertical className="theme-studio__response-section">
-        <span className="theme-studio__response-label">Live Colors</span>
-        <Grid className="theme-studio__response-swatches" columns={2} gap={6}>
-          {colorPairs.map(([label, background, foreground]) => (
-            <div
-              key={label}
-              className="theme-studio__response-swatch"
-              style={swatchTextStyle(background, foreground)}>
-              <span>{label}</span>
-            </div>
-          ))}
-        </Grid>
-      </Flex>
-
-      <Flex vertical className="theme-studio__response-section">
-        <span className="theme-studio__response-label">Charts</span>
-        <Flex className="theme-studio__chart-strip">
-          {[fields.chart1, fields.chart2, fields.chart3, fields.chart4, fields.chart5].map(
-            (color, index) => (
-              <span
-                key={`${color}-${index}`}
-                className="theme-studio__chart-dot"
-                style={{ backgroundColor: color }}
-              />
-            )
-          )}
-        </Flex>
-      </Flex>
-
-      <Flex vertical className="theme-studio__response-section">
-        <span className="theme-studio__response-label">Typography</span>
-        <Flex align="center" className="theme-studio__type-inline">
-          <strong>Ag</strong>
-          <span>{fields.fontSans.split(',')[0].replaceAll('"', '')}</span>
-          <code>
-            {fields.fontSizeBase} / {fields.lineHeightBase}
-          </code>
-        </Flex>
-      </Flex>
-
-      <Flex vertical className="theme-studio__response-section">
-        <span className="theme-studio__response-label">Surface</span>
-        <Flex className="theme-studio__surface-inline">
-          <div className="theme-studio__surface-proxy">Card</div>
-          <div className="theme-studio__focus-proxy">Focus</div>
-        </Flex>
-      </Flex>
-
-      <Flex vertical className="theme-studio__response-section">
-        <span className="theme-studio__response-label">Sidebar</span>
-        <Flex vertical className="theme-studio__sidebar-preview">
-          <Flex vertical className="theme-studio__sidebar-preview-shell">
-            <div className="theme-studio__sidebar-preview-item theme-studio__sidebar-preview-item_primary">
-              Primary
-            </div>
-            <div className="theme-studio__sidebar-preview-item theme-studio__sidebar-preview-item_accent">
-              Accent
-            </div>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-}
-
-function CardsPreview(): React.ReactElement {
-  return (
-    <Grid className="theme-studio__cards-scene">
-      <Flex vertical className="theme-studio__cards-column">
-        <Grid className="theme-studio__cards-top-pair">
-          <Card className="theme-studio__cards-panel theme-studio__cards-panel_revenue">
-            <Card.Content>
-              <Flex className="theme-studio__cards-panel-head">
-                <Flex vertical gap="sm">
-                  <Text strong>Total Revenue</Text>
-                  <Text type="secondary">+20.1% from last month</Text>
-                </Flex>
-              </Flex>
-              <Heading level={2}>$15,231.89</Heading>
-              <ChartContainer
-                config={cardsRevenueChartConfig}
-                style={{ height: 72, width: '100%' }}>
-                <LineChart
-                  data={cardsRevenueData}
-                  margin={{ top: 10, right: 6, left: -22, bottom: 0 }}>
-                  <XAxis dataKey="month" hide />
-                  <YAxis hide domain={['dataMin - 1', 'dataMax + 1']} />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent labelKey="month" />} />
-                  <Line
-                    type="monotone"
-                    dataKey="value"
-                    stroke="var(--color-value)"
-                    strokeWidth={2}
-                    dot={false}
-                  />
-                </LineChart>
-              </ChartContainer>
-            </Card.Content>
-          </Card>
-
-          <Card className="theme-studio__cards-panel theme-studio__cards-panel_revenue">
-            <Card.Content>
-              <Flex className="theme-studio__cards-panel-head">
-                <Flex vertical gap="sm">
-                  <Text strong>Subscriptions</Text>
-                  <Text type="secondary">+180.1% from last month</Text>
-                </Flex>
-              </Flex>
-              <Heading level={2}>+2,350</Heading>
-              <ChartContainer
-                config={subscriptionsChartConfig}
-                style={{ height: 72, width: '100%' }}>
-                <AreaChart
-                  data={subscriptionsData}
-                  margin={{ top: 8, right: 4, left: -18, bottom: 0 }}>
-                  <defs>
-                    <linearGradient id="subscriptionsFill" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="10%" stopColor="var(--color-value)" stopOpacity={0.18} />
-                      <stop offset="100%" stopColor="var(--color-value)" stopOpacity={0.02} />
-                    </linearGradient>
-                  </defs>
-                  <XAxis dataKey="month" hide />
-                  <YAxis hide />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent labelKey="month" />} />
-                  <Area
-                    type="monotone"
-                    dataKey="value"
-                    stroke="var(--color-value)"
-                    fill="url(#subscriptionsFill)"
-                    strokeWidth={2}
-                  />
-                </AreaChart>
-              </ChartContainer>
-            </Card.Content>
-          </Card>
-        </Grid>
-
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex vertical gap="sm">
-              <Text strong>Upgrade your subscription</Text>
-              <Text type="secondary">
-                You are currently on the free plan. Upgrade to the pro plan to get access to all
-                features.
-              </Text>
-            </Flex>
-            <div className="theme-studio__form-stack">
-              <Flex gap="sm">
-                <Input placeholder="Name" defaultValue="Evil Rabbit" />
-                <Input placeholder="Email" defaultValue="m@example.com" />
-              </Flex>
-              <Input placeholder="Card Number" defaultValue="1234 1234 1234 1234" />
-              <Flex gap="sm">
-                <Input placeholder="MM/YY" defaultValue="06/25" />
-                <Input placeholder="CVC" defaultValue="001" />
-              </Flex>
-              <Radio.Group defaultValue="starter">
-                <Grid className="theme-studio__cards-plan-grid">
-                  <div className="theme-studio__cards-plan-option">
-                    <Radio value="starter">
-                      <div>
-                        <strong>Starter Plan</strong>
-                        <small>Perfect for small businesses.</small>
-                      </div>
-                    </Radio>
-                  </div>
-                  <div className="theme-studio__cards-plan-option">
-                    <Radio value="pro">
-                      <div>
-                        <strong>Pro Plan</strong>
-                        <small>More features and storage.</small>
-                      </div>
-                    </Radio>
-                  </div>
-                </Grid>
-              </Radio.Group>
-              <Textarea rows={3} placeholder="Enter notes" />
-              <Checkbox defaultChecked>I agree to the terms and conditions</Checkbox>
-              <Checkbox>Allow us to send you emails</Checkbox>
-              <Flex className="theme-studio__cards-actions-end">
-                <Button>Cancel</Button>
-                <Button variant="solid" color="primary">
-                  Upgrade Plan
-                </Button>
-              </Flex>
-            </div>
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex vertical className="theme-studio__cards-copy-block">
-              <Text strong>Team Members</Text>
-              <Text type="secondary">Invite your team members to collaborate.</Text>
-            </Flex>
-            <Flex vertical className="theme-studio__member-list">
-              {[
-                ['Sofia Davis', 'm@example.com', 'Owner'],
-                ['Jackson Lee', 'p@example.com', 'Developer'],
-                ['Isabella Nguyen', 'i@example.com', 'Billing'],
-              ].map(([name, email, role]) => (
-                <div key={name} className="theme-studio__member-row">
-                  <Avatar>{name.charAt(0)}</Avatar>
-                  <div className="theme-studio__member-copy">
-                    <Text strong>{name}</Text>
-                    <Text type="secondary">{email}</Text>
-                  </div>
-                  <Select
-                    defaultValue={role.toLowerCase()}
-                    size="sm"
-                    className="theme-studio__cards-member-select">
-                    <Select.Option value="owner">Owner</Select.Option>
-                    <Select.Option value="developer">Developer</Select.Option>
-                    <Select.Option value="billing">Billing</Select.Option>
-                  </Select>
-                </div>
-              ))}
-            </Flex>
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex vertical gap="lg">
-              <Flex vertical>
-                <Text strong>Cookie Settings</Text>
-                <Text type="secondary">Manage your cookie settings here.</Text>
-              </Flex>
-              <Flex justify="space-between">
-                <Flex vertical>
-                  <Text strong>Strictly Necessary</Text>
-                  <Text type="secondary">
-                    These cookies are essential in order to use the website and use its features.
-                  </Text>
-                </Flex>
-                <Switch defaultChecked />
-              </Flex>
-              <Flex justify="space-between">
-                <Flex vertical>
-                  <Text strong>Functional Cookies</Text>
-                  <Text type="secondary">
-                    These cookies allow the website to provide personalized functionality.
-                  </Text>
-                </Flex>
-                <Switch />
-              </Flex>
-              <Button variant="solid" color="primary" size="lg">
-                Save preferences
-              </Button>
-            </Flex>
-          </Card.Content>
-        </Card>
-
-        <Grid className="theme-studio__cards-bottom-pair">
-          <Card className="theme-studio__cards-panel theme-studio__cards-panel_calendar">
-            <Card.Content>
-              <Calendar
-                selectionMode="range"
-                defaultRangeValue={[
-                  new Date(currYear, currMonth, 5),
-                  new Date(currYear, currMonth, 15),
-                ]}
-                fullscreen={false}
-              />
-            </Card.Content>
-          </Card>
-
-          <Card className="theme-studio__cards-panel theme-studio__cards-panel_goal">
-            <Card.Content>
-              <Flex vertical className="theme-studio__cards-copy-block">
-                <Text strong>Move Goal</Text>
-                <Text type="secondary">Set your daily activity goal.</Text>
-              </Flex>
-              <Flex
-                align="center"
-                justify="space-between"
-                className="theme-studio__cards-goal-header">
-                <Button size="sm" className="theme-studio__cards-goal-circle">
-                  -
-                </Button>
-                <Flex vertical align="center" className="theme-studio__goal-display">
-                  <span>350</span>
-                  <small>CALORIES/DAY</small>
-                </Flex>
-                <Button size="sm" className="theme-studio__cards-goal-circle">
-                  +
-                </Button>
-              </Flex>
-              <ChartContainer config={moveGoalChartConfig} style={{ height: 82, width: '100%' }}>
-                <BarChart data={moveGoalData} margin={{ top: 8, right: 0, left: 0, bottom: 0 }}>
-                  <XAxis dataKey="dayLabel" hide />
-                  <YAxis hide />
-                  <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-                  <Bar
-                    dataKey="value"
-                    fill="var(--color-value)"
-                    radius={[2, 2, 2, 2]}
-                    barSize={10}
-                  />
-                </BarChart>
-              </ChartContainer>
-              <Button variant="solid" color="primary">
-                Set Goal
-              </Button>
-            </Card.Content>
-          </Card>
-        </Grid>
-      </Flex>
-
-      <Flex vertical className="theme-studio__cards-column">
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex vertical className="theme-studio__cards-copy-block">
-              <Text strong>Create an account</Text>
-              <Text type="secondary">Enter your email below to create your account</Text>
-            </Flex>
-            <Flex className="theme-studio__cards-auth-actions">
-              <Button>
-                <IconGithub /> GitHub
-              </Button>
-              <Button>
-                <IconGoogle /> Google
-              </Button>
-            </Flex>
-            <Divider className="theme-studio__cards-divider-label">OR CONTINUE WITH</Divider>
-            <div className="theme-studio__form-stack">
-              <Input placeholder="Email" defaultValue="m@example.com" />
-              <Input placeholder="Password" type="password" />
-              <Button variant="solid" color="primary">
-                Create account
-              </Button>
-            </div>
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex
-              align="center"
-              className="theme-studio__member-row theme-studio__member-row_compact">
-              <Avatar>S</Avatar>
-              <div className="theme-studio__member-copy">
-                <Text strong>Sofia Davis</Text>
-                <Text type="secondary">m@example.com</Text>
-              </div>
-            </Flex>
-            <Flex vertical className="theme-studio__chat-thread">
-              <Card
-                bordered={false}
-                className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
-                <Card.Content>Hi, how can I help you today?</Card.Content>
-              </Card>
-              <Card
-                bordered={false}
-                className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
-                <Card.Content>Hey, I&apos;m having trouble with my account.</Card.Content>
-              </Card>
-              <Card
-                bordered={false}
-                className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
-                <Card.Content>What seems to be the problem?</Card.Content>
-              </Card>
-              <Card
-                bordered={false}
-                className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
-                <Card.Content>I can&apos;t log in.</Card.Content>
-              </Card>
-            </Flex>
-            <Input size="lg" placeholder="Type your message..." />
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-inline-card">
-          <Card.Content>
-            <Text>Date picker with range</Text>
-            <Text type="secondary">Select a date range.</Text>
-            <DatePicker range defaultValue={[new Date(2022, 0, 20), new Date(2022, 1, 9)]} />
-          </Card.Content>
-        </Card>
-
-        <Card className="theme-studio__cards-panel">
-          <Card.Content>
-            <Flex vertical className="theme-studio__cards-copy-block">
-              <Text strong>Exercise Minutes</Text>
-              <Text type="secondary">
-                Your exercise minutes are ahead of where you normally are.
-              </Text>
-            </Flex>
-            <ChartContainer
-              config={cardsExerciseChartConfig}
-              style={{ height: 146, width: '100%' }}>
-              <LineChart
-                data={cardsExerciseData}
-                margin={{ top: 8, right: 4, left: -22, bottom: 0 }}>
-                <CartesianGrid vertical={false} />
-                <XAxis dataKey="month" tickLine={false} axisLine={false} />
-                <YAxis tickLine={false} axisLine={false} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <Line
-                  type="monotone"
-                  dataKey="personal"
-                  stroke="var(--color-personal)"
-                  strokeWidth={2.2}
-                  dot={{ r: 2.6, strokeWidth: 0, fill: 'var(--color-personal)' }}
-                  activeDot={{ r: 3.6, strokeWidth: 0, fill: 'var(--color-personal)' }}
-                />
-                <Line
-                  type="monotone"
-                  dataKey="average"
-                  stroke="var(--color-average)"
-                  strokeWidth={1.6}
-                  dot={{ r: 2.2, strokeWidth: 0, fill: 'var(--color-average)' }}
-                  activeDot={{ r: 3.4, strokeWidth: 0, fill: 'var(--color-average)' }}
-                />
-              </LineChart>
-            </ChartContainer>
-          </Card.Content>
-        </Card>
-      </Flex>
-    </Grid>
-  );
-}
-
-function DashboardPreview(): React.ReactElement {
-  const columns = [
-    { title: 'Campaign', dataIndex: 'campaign', key: 'campaign' },
-    { title: 'Status', dataIndex: 'status', key: 'status' },
-    { title: 'Conversion', dataIndex: 'conversion', key: 'conversion' },
-    { title: 'Spend', dataIndex: 'spend', key: 'spend' },
-  ];
-
-  const data = [
-    { key: '1', campaign: 'Spring release', status: 'Live', conversion: '18.2%', spend: '$12.4k' },
-    { key: '2', campaign: 'Docs refresh', status: 'Draft', conversion: '9.4%', spend: '$4.2k' },
-    { key: '3', campaign: 'Theme launch', status: 'Queued', conversion: '12.1%', spend: '$8.8k' },
-  ];
-
-  return (
-    <Grid className="theme-studio__dashboard-shell" columns="240px minmax(0, 1fr)" gap="sm">
-      <Card className="theme-studio__dashboard-sidebar">
-        <Card.Content>
-          <Flex align="center" className="theme-studio__sidebar-brand">
-            <Avatar>TD</Avatar>
-            <div>
-              <Text strong>Tiny Theme</Text>
-              <Text className="theme-studio__sidebar-subtle">Dashboard</Text>
-            </div>
-          </Flex>
-          <div className="theme-studio__sidebar-section-label">Workspace</div>
-          {['Overview', 'Themes', 'Revenue', 'Activity', 'Settings'].map((item, index) => (
-            <Button
-              key={item}
-              className={`theme-studio__sidebar-link${index === 0 ? ' theme-studio__sidebar-link_active' : ''}`}
-              variant={index === 0 ? 'solid' : 'ghost'}
-              color="primary">
-              {item}
-            </Button>
-          ))}
-          <div className="theme-studio__dashboard-sidebar-footer">
-            <Text strong>Live Sync</Text>
-            <Text className="theme-studio__sidebar-subtle">
-              Theme changes are applied across docs in real time.
-            </Text>
-          </div>
-        </Card.Content>
-      </Card>
-
-      <Flex vertical className="theme-studio__dashboard-main">
-        <Flex justify="space-between" align="flex-start" className="theme-studio__dashboard-top">
-          <Flex vertical>
-            <Text className="theme-studio__eyebrow">Dashboard</Text>
-            <Heading level={3}>Revenue snapshot</Heading>
-            <Flex className="theme-studio__pill-row">
-              <Tag color="success">Healthy</Tag>
-              <Tag color="info">Synced</Tag>
-            </Flex>
-          </Flex>
-          <Flex className="theme-studio__dashboard-actions">
-            <Select defaultValue="30d">
-              <Select.Option value="7d">Last 7 days</Select.Option>
-              <Select.Option value="30d">Last 30 days</Select.Option>
-              <Select.Option value="90d">Last 90 days</Select.Option>
-            </Select>
-            <Button variant="solid" color="primary">
-              Export
-            </Button>
-          </Flex>
-        </Flex>
-
-        <Grid className="theme-studio__preview-grid" minColumnWidth={260} gap="sm">
-          <Card title="Overview" className="theme-studio__preview-card">
-            <Card.Content>
-              <div className="theme-studio__card-kicker-row">
-                <Text strong>$7.6k</Text>
-                <Text type="secondary">vs $6.6k target</Text>
-              </div>
-              <ChartContainer config={revenueChartConfig} style={{ height: 260, width: '100%' }}>
-                <AreaChart data={revenueData} margin={{ top: 12, right: 8, left: -18, bottom: 0 }}>
-                  <defs>
-                    <linearGradient id="revenueFill" x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="5%" stopColor="var(--color-revenue)" stopOpacity={0.32} />
-                      <stop offset="95%" stopColor="var(--color-revenue)" stopOpacity={0.02} />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid vertical={false} />
-                  <XAxis dataKey="month" tickLine={false} axisLine={false} />
-                  <YAxis tickLine={false} axisLine={false} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Area
-                    type="monotone"
-                    dataKey="target"
-                    stroke="var(--color-target)"
-                    strokeWidth={2}
-                    fillOpacity={0}
-                  />
-                  <Area
-                    type="monotone"
-                    dataKey="revenue"
-                    stroke="var(--color-revenue)"
-                    fill="url(#revenueFill)"
-                    strokeWidth={2}
-                  />
-                </AreaChart>
-              </ChartContainer>
-            </Card.Content>
-          </Card>
-
-          <Card title="Performance Channels" className="theme-studio__preview-card">
-            <Card.Content>
-              <Table columns={columns} dataSource={data} pagination={false} bordered />
-            </Card.Content>
-          </Card>
-
-          <Card title="Theme Health" className="theme-studio__preview-card">
-            <Card.Content>
-              <Flex vertical gap="sm">
-                <Flex vertical>
-                  <Text strong>Accessibility</Text>
-                  <Progress.Bar percent={84} />
-                </Flex>
-                <Alert type="success" title="Contrast is healthy across key actions." />
-                <Alert type="info" title="One focus treatment was customized." />
-              </Flex>
-            </Card.Content>
-          </Card>
-
-          <Card title="Traffic Sources" className="theme-studio__preview-card">
-            <Card.Content>
-              <Flex vertical className="theme-studio__member-list">
-                {[
-                  ['Direct', '42%', 'Stable'],
-                  ['Referral', '26%', '+4.2%'],
-                  ['Social', '18%', '+8.4%'],
-                  ['Paid', '14%', '-1.1%'],
-                ].map(([name, value, meta]) => (
-                  <div key={name} className="theme-studio__member-row">
-                    <div className="theme-studio__member-copy">
-                      <Text strong>{name}</Text>
-                      <Text type="secondary">{meta}</Text>
-                    </div>
-                    <Tag>{value}</Tag>
-                  </div>
-                ))}
-              </Flex>
-            </Card.Content>
-          </Card>
-        </Grid>
-      </Flex>
-    </Grid>
-  );
-}
-
-function MailPreview(): React.ReactElement {
-  return (
-    <Grid className="theme-studio__mail-shell">
-      <Card className="theme-studio__mail-sidebar">
-        <Card.Content>
-          <Flex vertical className="theme-studio__mail-sidebar-head">
-            <Flex vertical>
-              <Text className="theme-studio__eyebrow">Mailbox</Text>
-              <Heading level={4}>Studio Mail</Heading>
-            </Flex>
-            <Button variant="solid" color="primary" style={{ width: '100%' }}>
-              Compose
-            </Button>
-          </Flex>
-
-          <Flex vertical className="theme-studio__mail-folder-list">
-            {[
-              ['Inbox', '128'],
-              ['Drafts', '9'],
-              ['Sent', '24'],
-              ['Junk', '3'],
-              ['Trash', '0'],
-            ].map(([item, count], index) => (
-              <Button
-                key={item}
-                className={`theme-studio__mail-nav-item${index === 0 ? ' theme-studio__mail-nav-item_active' : ''}`}
-                variant={index === 0 ? 'solid' : 'ghost'}
-                color="primary">
-                <span>{item}</span>
-                <small>{count}</small>
-              </Button>
-            ))}
-          </Flex>
-
-          <Flex vertical className="theme-studio__mail-labels">
-            <Text strong>Labels</Text>
-            <Flex gap="sm" wrap>
-              <Tag color="info">Design</Tag>
-              <Tag color="success">Work</Tag>
-              <Tag color="warning">Personal</Tag>
-            </Flex>
-          </Flex>
-        </Card.Content>
-      </Card>
-
-      <Card className="theme-studio__mail-panel">
-        <Card.Content>
-          <Flex className="theme-studio__mail-panel-head">
-            <Input placeholder="Search mail" />
-            <Button>Filter</Button>
-          </Flex>
-          <Flex className="theme-studio__mail-toolbar">
-            <Tag color="info">All mail</Tag>
-            <Tag>Unread</Tag>
-            <Tag>Assigned</Tag>
-          </Flex>
-
-          <Flex vertical className="theme-studio__mail-thread-list">
-            {[
-              ['Sofia Davis', 'New message', 'Hi, how can I help you today?', '12m', true],
-              ['Jackson Lee', 'Billing issue', 'I cannot update my card.', '1h', false],
-              [
-                'Olivia Martin',
-                'Access request',
-                'Can you grant me editor permissions?',
-                '3h',
-                false,
-              ],
-              [
-                'William Kim',
-                'Design review',
-                'Please review the new dashboard polish.',
-                'Yesterday',
-                false,
-              ],
-            ].map(([sender, subject, preview, time, unread], index) => (
-              <Card
-                key={sender}
-                className={`theme-studio__mail-item${index === 0 ? ' theme-studio__mail-item_active' : ''}`}
-                active={index === 0}
-                hoverable>
-                <Card.Content>
-                  <div className="theme-studio__mail-item-head">
-                    <strong>{sender}</strong>
-                    <span>{time}</span>
-                  </div>
-                  <span className="theme-studio__mail-item-subject">
-                    {subject}
-                    {unread ? <i className="theme-studio__mail-item-dot" /> : null}
-                  </span>
-                  <small>{preview}</small>
-                </Card.Content>
-              </Card>
-            ))}
-          </Flex>
-        </Card.Content>
-      </Card>
-
-      <Card className="theme-studio__mail-detail">
-        <Card.Content>
-          <Flex className="theme-studio__mail-message-head">
-            <Flex align="center" className="theme-studio__mail-message-meta">
-              <Avatar>S</Avatar>
-              <div>
-                <Text strong>Re: New message</Text>
-                <Text type="secondary">support@tiny.design</Text>
-              </div>
-            </Flex>
-            <Flex className="theme-studio__mail-message-actions">
-              <Tag color="info">Unread</Tag>
-              <Button variant="outline" color="primary">
-                Archive
-              </Button>
-            </Flex>
-          </Flex>
-
-          <Flex vertical className="theme-studio__chat-thread">
-            <Card
-              bordered={false}
-              className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
-              <Card.Content>Hi, how can I help you today?</Card.Content>
-            </Card>
-            <Card
-              bordered={false}
-              className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
-              <Card.Content>Hey, I&apos;m having trouble with my account.</Card.Content>
-            </Card>
-            <Card
-              bordered={false}
-              className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
-              <Card.Content>What seems to be the problem?</Card.Content>
-            </Card>
-            <Card
-              bordered={false}
-              className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
-              <Card.Content>I can&apos;t log in after resetting my password.</Card.Content>
-            </Card>
-          </Flex>
-
-          <Textarea rows={5} resizable={false} placeholder="Reply Sofia Davis..." />
-          <Flex className="theme-studio__mail-compose">
-            <Button>Save Draft</Button>
-            <Button variant="solid" color="primary">
-              Send
-            </Button>
-          </Flex>
-        </Card.Content>
-      </Card>
-    </Grid>
-  );
-}
-
-function PricingPreview(): React.ReactElement {
-  return (
-    <Flex vertical className="theme-studio__preview-stack">
-      <Flex justify="space-between" align="flex-start" className="theme-studio__pricing-hero">
-        <Flex vertical>
-          <Text className="theme-studio__eyebrow">Pricing</Text>
-          <Heading level={2}>Simple pricing for modern teams</Heading>
-          <Paragraph>
-            Choose a plan that scales from solo work to multi-product organizations.
-          </Paragraph>
-          <Flex className="theme-studio__pill-row">
-            <Tag color="success">No setup fee</Tag>
-            <Tag>Cancel anytime</Tag>
-          </Flex>
-        </Flex>
-        <Segmented
-          options={[
-            { label: 'Monthly', value: 'monthly' },
-            { label: 'Yearly', value: 'yearly' },
-          ]}
-          value="monthly"
-        />
-      </Flex>
-
-      <Grid className="theme-studio__pricing-grid" minColumnWidth={240} gap="sm">
-        {[
-          {
-            name: 'Starter',
-            price: '$29',
-            description: 'Perfect for small businesses.',
-            features: ['1 workspace', 'Basic analytics', 'Community support'],
-          },
-          {
-            name: 'Pro',
-            price: '$89',
-            description: 'More features and storage.',
-            featured: true,
-            features: ['5 workspaces', 'Advanced analytics', 'Priority support'],
-          },
-          {
-            name: 'Scale',
-            price: '$199',
-            description: 'For larger teams and advanced reporting.',
-            features: ['Unlimited workspaces', 'SSO + audit log', 'Dedicated onboarding'],
-          },
-        ].map((plan) => (
-          <Card
-            key={plan.name}
-            className={`theme-studio__pricing-card${plan.featured ? ' theme-studio__pricing-card_featured' : ''}`}>
-            <Card.Content>
-              <Flex align="center" className="theme-studio__pricing-card-head">
-                {plan.featured ? <Tag color="success">Popular</Tag> : null}
-                <Text strong>{plan.name}</Text>
-              </Flex>
-              <Flex vertical className="theme-studio__pricing-price">
-                <Heading level={2}>{plan.price}</Heading>
-                <Text type="secondary">Per workspace / month</Text>
-              </Flex>
-              <Paragraph>{plan.description}</Paragraph>
-              <Flex vertical className="theme-studio__pricing-feature-list">
-                {plan.features.map((feature) => (
-                  <Text key={feature}>{feature}</Text>
-                ))}
-              </Flex>
-              <Flex className="theme-studio__pricing-card-footer">
-                <Button variant="solid" color={plan.featured ? 'primary' : 'default'}>
-                  {plan.featured ? 'Upgrade plan' : 'Choose plan'}
-                </Button>
-              </Flex>
-            </Card.Content>
-          </Card>
-        ))}
-      </Grid>
-
-      <Grid className="theme-studio__preview-grid" minColumnWidth={280} gap="sm">
-        <Card title="Frequently Asked Questions" className="theme-studio__preview-card">
-          <Card.Content>
-            <Flex vertical className="theme-studio__faq-list">
-              <Flex vertical className="theme-studio__faq-item">
-                <Text strong>Can I cancel anytime?</Text>
-                <Text type="secondary">Yes. Plans can be changed or canceled without lock-in.</Text>
-              </Flex>
-              <Flex vertical className="theme-studio__faq-item">
-                <Text strong>Do you offer team migration?</Text>
-                <Text type="secondary">Pro and Scale include assisted import and onboarding.</Text>
-              </Flex>
-            </Flex>
-          </Card.Content>
-        </Card>
-        <Card title="Usage Snapshot" className="theme-studio__preview-card">
-          <Card.Content>
-            <Flex vertical className="theme-studio__settings-list">
-              <Flex vertical>
-                <Text strong>Seats</Text>
-                <Progress.Bar percent={68} />
-              </Flex>
-              <Flex vertical>
-                <Text strong>Storage</Text>
-                <Progress.Bar percent={42} />
-              </Flex>
-            </Flex>
-          </Card.Content>
-        </Card>
-      </Grid>
-    </Flex>
-  );
-}
-
-export function renderPreview(
-  template: ThemePreviewTemplate,
-  fields: ThemeEditorFields,
-  section: ThemeEditorSection
-): React.ReactElement {
-  const content =
-    template === 'dashboard' ? (
-      <DashboardPreview />
-    ) : template === 'mail' ? (
-      <MailPreview />
-    ) : template === 'pricing' ? (
-      <PricingPreview />
-    ) : (
-      <CardsPreview />
-    );
-
-  return (
-    <Flex vertical className="theme-studio__preview-stack">
-      {template !== 'cards' &&
-      (section === 'colors' || section === 'typography' || section === 'other') ? (
-        <LiveResponsePanel fields={fields} />
-      ) : null}
-      {content}
-    </Flex>
-  );
-}
diff --git a/apps/docs/src/containers/theme-studio/preview-components/cards-preview.tsx b/apps/docs/src/containers/theme-studio/preview-components/cards-preview.tsx
new file mode 100644
index 000000000..dffeaa835
--- /dev/null
+++ b/apps/docs/src/containers/theme-studio/preview-components/cards-preview.tsx
@@ -0,0 +1,633 @@
+import React from 'react';
+import {
+  Avatar,
+  Button,
+  Calendar,
+  Card,
+  Checkbox,
+  DatePicker,
+  Divider,
+  Flex,
+  Grid,
+  Heading,
+  Input,
+  Radio,
+  Select,
+  Switch,
+  Tag,
+  Text,
+  Textarea,
+} from '@tiny-design/react';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@tiny-design/charts';
+import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
+import { IconGithub, IconGoogle, IconMore } from '@tiny-design/icons';
+
+const cardsRevenueData = [
+  { month: 'Jan', value: 38 },
+  { month: 'Feb', value: 42 },
+  { month: 'Mar', value: 36 },
+  { month: 'Apr', value: 34 },
+  { month: 'May', value: 33 },
+  { month: 'Jun', value: 36 },
+  { month: 'Jul', value: 38 },
+  { month: 'Aug', value: 58 },
+];
+
+const cardsRevenueChartConfig: ChartConfig = {
+  value: {
+    label: 'Revenue',
+    color: 'var(--ty-chart-1)',
+  },
+};
+
+const moveGoalData = [
+  { key: 'm', dayLabel: 'M', value: 34 },
+  { key: 't', dayLabel: 'T', value: 26 },
+  { key: 'w', dayLabel: 'W', value: 18 },
+  { key: 'th', dayLabel: 'T', value: 26 },
+  { key: 'f', dayLabel: 'F', value: 18 },
+  { key: 's', dayLabel: 'S', value: 23 },
+  { key: 'su', dayLabel: 'S', value: 16 },
+  { key: 'm2', dayLabel: 'M', value: 22 },
+  { key: 't2', dayLabel: 'T', value: 26 },
+  { key: 'w2', dayLabel: 'W', value: 18 },
+  { key: 'th2', dayLabel: 'T', value: 24 },
+  { key: 'f2', dayLabel: 'F', value: 17 },
+  { key: 's2', dayLabel: 'S', value: 30 },
+];
+
+const moveGoalChartConfig: ChartConfig = {
+  value: {
+    label: 'Calories',
+    color: 'var(--ty-chart-2)',
+  },
+};
+
+const cardsExerciseData = [
+  { month: 'Mon', personal: 16, average: 22 },
+  { month: 'Tue', personal: 12, average: 18 },
+  { month: 'Wed', personal: 58, average: 14 },
+  { month: 'Thu', personal: 24, average: 17 },
+  { month: 'Fri', personal: 29, average: 13 },
+  { month: 'Sat', personal: 23, average: 15 },
+  { month: 'Sun', personal: 26, average: 20 },
+];
+
+const cardsExerciseChartConfig: ChartConfig = {
+  personal: {
+    label: 'You',
+    color: 'var(--ty-chart-1)',
+  },
+  average: {
+    label: 'Average',
+    color: 'var(--ty-chart-3)',
+  },
+};
+
+const paymentRows = [
+  ['Success', 'ken99@example.com', '$316.00'],
+  ['Success', 'abe45@example.com', '$242.00'],
+  ['Processing', 'monserrat44@example.com', '$837.00'],
+  ['Failed', 'carmella@example.com', '$721.00'],
+  ['Pending', 'jason78@example.com', '$450.00'],
+  ['Success', 'sarah23@example.com', '$1,280.00'],
+] as const;
+
+const currYear = new Date().getFullYear();
+const currMonth = new Date().getMonth();
+
+function RevenueCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_stat">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Text type="secondary">Total Revenue</Text>
+          <Heading level={2}>$15,231.89</Heading>
+          <Text type="secondary">+20.1% from last month</Text>
+        </Flex>
+        <ChartContainer config={cardsRevenueChartConfig} style={{ height: 118, width: '100%' }}>
+          <LineChart data={cardsRevenueData} margin={{ top: 10, right: 8, left: 8, bottom: 0 }}>
+            <XAxis dataKey="month" hide />
+            <YAxis hide />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent labelKey="month" />} />
+            <Line
+              type="monotone"
+              dataKey="value"
+              stroke="var(--color-value)"
+              strokeWidth={2.2}
+              dot={{ r: 2.8, fill: 'var(--editor-card)', stroke: 'var(--color-value)', strokeWidth: 1.8 }}
+              activeDot={{ r: 4, fill: 'var(--editor-card)', stroke: 'var(--color-value)', strokeWidth: 2 }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function UpgradeCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_form">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Upgrade your subscription</Heading>
+          <Text type="secondary">
+            You are currently on the free plan. Upgrade to the pro plan to get access to all
+            features.
+          </Text>
+        </Flex>
+        <div className="theme-studio__form-stack">
+          <Grid className="theme-studio__cards-input-grid">
+            <label className="theme-studio__cards-field">
+              <span>Name</span>
+              <Input placeholder="Name" defaultValue="Evil Rabbit" />
+            </label>
+            <label className="theme-studio__cards-field">
+              <span>Email</span>
+              <Input placeholder="Email" defaultValue="example@acme.com" />
+            </label>
+          </Grid>
+          <label className="theme-studio__cards-field">
+            <span>Card Number</span>
+            <Input placeholder="Card Number" defaultValue="1234 1234 1234 1234" />
+          </label>
+          <Grid className="theme-studio__cards-input-grid theme-studio__cards-input-grid_compact">
+            <Input placeholder="MM/YY" defaultValue="MM/YY" />
+            <Input placeholder="CVC" defaultValue="CVC" />
+          </Grid>
+          <Flex vertical className="theme-studio__cards-copy-block">
+            <Text strong>Plan</Text>
+            <Text type="secondary">Select the plan that best fits your needs.</Text>
+          </Flex>
+          <Radio.Group defaultValue="starter">
+            <Grid className="theme-studio__cards-plan-grid">
+              <div className="theme-studio__cards-plan-option">
+                <Radio value="starter">
+                  <div>
+                    <strong>Starter Plan</strong>
+                    <small>Perfect for small businesses.</small>
+                  </div>
+                </Radio>
+              </div>
+              <div className="theme-studio__cards-plan-option">
+                <Radio value="pro">
+                  <div>
+                    <strong>Pro Plan</strong>
+                    <small>More features and storage.</small>
+                  </div>
+                </Radio>
+              </div>
+            </Grid>
+          </Radio.Group>
+          <label className="theme-studio__cards-field">
+            <span>Notes</span>
+            <Textarea rows={3} placeholder="Enter notes" />
+          </label>
+          <Flex vertical className="theme-studio__cards-checklist">
+            <Checkbox>I agree to the terms and conditions</Checkbox>
+            <Checkbox>Allow us to send you emails</Checkbox>
+          </Flex>
+          <Flex className="theme-studio__cards-actions-split">
+            <Button color="default">Cancel</Button>
+            <Button variant="solid" color="primary">
+              Upgrade Plan
+            </Button>
+          </Flex>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function CreateAccountCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_form theme-studio__cards-panel_auth">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={3}>Create an account</Heading>
+          <Text type="secondary">Enter your email below to create your account</Text>
+        </Flex>
+        <Flex className="theme-studio__cards-auth-actions">
+          <Button>
+            <IconGithub /> GitHub
+          </Button>
+          <Button>
+            <IconGoogle /> Google
+          </Button>
+        </Flex>
+        <Divider className="theme-studio__cards-divider-label">OR CONTINUE WITH</Divider>
+        <div className="theme-studio__form-stack">
+          <label className="theme-studio__cards-field">
+            <span>Email</span>
+            <Input placeholder="Email" defaultValue="m@example.com" />
+          </label>
+          <label className="theme-studio__cards-field">
+            <span>Password</span>
+            <Input placeholder="Password" type="password" />
+          </label>
+          <Button variant="solid" color="primary">
+            Create account
+          </Button>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function TeamMembersCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_members">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Team Members</Heading>
+          <Text type="secondary">Invite your team members to collaborate.</Text>
+        </Flex>
+        <Flex vertical className="theme-studio__member-list">
+          {[
+            ['Sofia Davis', 'm@example.com', 'Owner'],
+            ['Jackson Lee', 'p@example.com', 'Developer'],
+            ['Isabella Nguyen', 'i@example.com', 'Billing'],
+          ].map(([name, email, role]) => (
+            <div key={name} className="theme-studio__member-row">
+              <Avatar>{name.charAt(0)}</Avatar>
+              <div className="theme-studio__member-copy">
+                <Text strong>{name}</Text>
+                <Text type="secondary">{email}</Text>
+              </div>
+              <Select defaultValue={role.toLowerCase()} size="sm" className="theme-studio__cards-member-select">
+                <Select.Option value="owner">Owner</Select.Option>
+                <Select.Option value="developer">Developer</Select.Option>
+                <Select.Option value="billing">Billing</Select.Option>
+              </Select>
+            </div>
+          ))}
+        </Flex>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function CookieSettingsCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_settings">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Cookie Settings</Heading>
+          <Text type="secondary">Manage your cookie settings here.</Text>
+        </Flex>
+        <Flex vertical className="theme-studio__form-stack">
+          <Flex justify="space-between">
+            <Flex vertical>
+              <Text strong>Strictly Necessary</Text>
+              <Text type="secondary">
+                These cookies are essential in order to use the website and use its features.
+              </Text>
+            </Flex>
+            <Switch defaultChecked />
+          </Flex>
+          <Flex justify="space-between">
+            <Flex vertical>
+              <Text strong>Functional Cookies</Text>
+              <Text type="secondary">
+                These cookies allow the website to provide personalized functionality.
+              </Text>
+            </Flex>
+            <Switch />
+          </Flex>
+          <Button variant="solid" color="primary">
+            Save preferences
+          </Button>
+        </Flex>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function DatePickerCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-inline-card theme-studio__cards-inline-card_date">
+      <Card.Content>
+        <Text strong>Date picker with range</Text>
+        <Text type="secondary">Select a date range.</Text>
+        <DatePicker range defaultValue={[new Date(2022, 0, 20), new Date(2022, 1, 9)]} />
+      </Card.Content>
+    </Card>
+  );
+}
+
+function ChatCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_chat">
+      <Card.Content>
+        <Flex align="center" className="theme-studio__member-row theme-studio__member-row_compact">
+          <Avatar>S</Avatar>
+          <div className="theme-studio__member-copy">
+            <Text strong>Sofia Davis</Text>
+            <Text type="secondary">m@example.com</Text>
+          </div>
+          <Button size="sm" variant="outline">
+            New message
+          </Button>
+        </Flex>
+        <Flex vertical className="theme-studio__chat-thread">
+          <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
+            <Card.Content>Hi, how can I help you today?</Card.Content>
+          </Card>
+          <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
+            <Card.Content>Hey, I&apos;m having trouble with my account.</Card.Content>
+          </Card>
+          <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_in">
+            <Card.Content>What seems to be the problem?</Card.Content>
+          </Card>
+          <Card bordered={false} className="theme-studio__chat-bubble theme-studio__chat-bubble_out">
+            <Card.Content>I can&apos;t log in.</Card.Content>
+          </Card>
+        </Flex>
+        <Flex className="theme-studio__cards-chat-compose">
+          <Input size="lg" placeholder="Type your message..." />
+          <Button variant="solid" color="primary" size='lg'>
+            Send
+          </Button>
+        </Flex>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function CalendarCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_calendar">
+      <Card.Content>
+        <Calendar
+          selectionMode="range"
+          defaultRangeValue={[
+            new Date(currYear, currMonth, 5),
+            new Date(currYear, currMonth, 13),
+          ]}
+          fullscreen={false}
+        />
+      </Card.Content>
+    </Card>
+  );
+}
+
+function GoalCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_goal">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Move Goal</Heading>
+          <Text type="secondary">Set your daily activity goal.</Text>
+        </Flex>
+        <Flex align="center" justify="center" className="theme-studio__cards-goal-header">
+          <Button size="sm" className="theme-studio__cards-goal-circle" aria-label="Decrease">
+            -
+          </Button>
+          <Flex vertical align="center" className="theme-studio__goal-display">
+            <span>350</span>
+            <small>CALORIES/DAY</small>
+          </Flex>
+          <Button size="sm" className="theme-studio__cards-goal-circle" aria-label="Increase">
+            +
+          </Button>
+        </Flex>
+        <ChartContainer config={moveGoalChartConfig} style={{ height: 92, width: '100%' }}>
+          <BarChart data={moveGoalData} margin={{ top: 4, right: 0, left: 0, bottom: 0 }}>
+            <XAxis hide dataKey="dayLabel" />
+            <YAxis hide />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Bar dataKey="value" fill="var(--color-value)" radius={[4, 4, 4, 4]} barSize={22} />
+          </BarChart>
+        </ChartContainer>
+        <Button variant="solid" color="default">
+          Set Goal
+        </Button>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function ExerciseCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_exercise">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Exercise Minutes</Heading>
+          <Text type="secondary">
+            Your exercise minutes are ahead of where you normally are.
+          </Text>
+        </Flex>
+        <ChartContainer config={cardsExerciseChartConfig} style={{ height: 208, width: '100%' }}>
+          <LineChart data={cardsExerciseData} margin={{ top: 12, right: 8, left: 8, bottom: 0 }}>
+            <CartesianGrid vertical={false} strokeDasharray="0" />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={10}
+              tick={{ fontSize: 10, fill: 'var(--editor-muted-foreground)' }}
+            />
+            <YAxis hide />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Line
+              type="monotone"
+              dataKey="personal"
+              stroke="var(--color-personal)"
+              strokeWidth={2.2}
+              dot={{ r: 3, strokeWidth: 0, fill: 'var(--color-personal)' }}
+              activeDot={{ r: 4, strokeWidth: 0, fill: 'var(--color-personal)' }}
+            />
+            <Line
+              type="monotone"
+              dataKey="average"
+              stroke="var(--color-average)"
+              strokeWidth={1.6}
+              dot={{ r: 3, strokeWidth: 0, fill: 'var(--color-average)' }}
+              activeDot={{ r: 3.8, strokeWidth: 0, fill: 'var(--color-average)' }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function PaymentsCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_table">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Payments</Heading>
+          <Text type="secondary">Manage your payments.</Text>
+        </Flex>
+        <div className="theme-studio__cards-payments">
+          <div className="theme-studio__cards-payments-head">
+            <Checkbox />
+            <span>Status</span>
+            <span>Email</span>
+            <span>Amount</span>
+            <span />
+          </div>
+          {paymentRows.map(([status, email, amount]) => (
+            <div key={email} className="theme-studio__cards-payments-row">
+              <Checkbox />
+              <Tag
+                color={
+                  status === 'Success'
+                    ? 'success'
+                    : status === 'Processing'
+                      ? 'info'
+                      : status === 'Pending'
+                        ? 'warning'
+                        : 'danger'
+                }>
+                {status}
+              </Tag>
+              <span>{email}</span>
+              <strong>{amount}</strong>
+              <button type="button" className="theme-studio__cards-icon-action" aria-label="Open menu">
+                <IconMore />
+              </button>
+            </div>
+          ))}
+        </div>
+        <Flex className="theme-studio__cards-table-footer">
+          <Text type="secondary">0 of 6 row(s) selected.</Text>
+          <Flex gap="sm">
+            <Button size="sm" disabled>
+              Previous
+            </Button>
+            <Button size="sm" disabled>
+              Next
+            </Button>
+          </Flex>
+        </Flex>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function ShareCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_share">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Share this document</Heading>
+          <Text type="secondary">Anyone with the link can view this document.</Text>
+        </Flex>
+        <div className="theme-studio__cards-share-row">
+          <label className="theme-studio__cards-field">
+            <span>Link</span>
+            <Input value="http://example.com/link/to/document" readOnly />
+          </label>
+          <Button>Copy Link</Button>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function AccessCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_access">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>People with access</Heading>
+        </Flex>
+        <Flex vertical className="theme-studio__member-list">
+          {[
+            ['Olivia Martin', 'm@example.com'],
+            ['Isabella Nguyen', 'b@example.com'],
+            ['Sofia Davis', 'p@example.com'],
+            ['Ethan Thompson', 'e@example.com'],
+          ].map(([name, email]) => (
+            <div key={email} className="theme-studio__member-row">
+              <Avatar>{name.charAt(0)}</Avatar>
+              <div className="theme-studio__member-copy">
+                <Text strong>{name}</Text>
+                <Text type="secondary">{email}</Text>
+              </div>
+              <Select defaultValue="edit" size="sm" className="theme-studio__cards-member-select">
+                <Select.Option value="edit">Can edit</Select.Option>
+                <Select.Option value="view">Can view</Select.Option>
+              </Select>
+            </div>
+          ))}
+        </Flex>
+      </Card.Content>
+    </Card>
+  );
+}
+
+function ReportIssueCard(): React.ReactElement {
+  return (
+    <Card className="theme-studio__cards-panel theme-studio__cards-panel_issue">
+      <Card.Content>
+        <Flex vertical className="theme-studio__cards-copy-block">
+          <Heading level={4}>Report an issue</Heading>
+          <Text type="secondary">What area are you having problems with?</Text>
+        </Flex>
+        <div className="theme-studio__form-stack">
+          <Grid className="theme-studio__cards-input-grid">
+            <label className="theme-studio__cards-field">
+              <span>Area</span>
+              <Select defaultValue="billing">
+                <Select.Option value="billing">Billing</Select.Option>
+                <Select.Option value="security">Security</Select.Option>
+              </Select>
+            </label>
+            <label className="theme-studio__cards-field">
+              <span>Security Level</span>
+              <Select defaultValue="severity-2">
+                <Select.Option value="severity-1">Severity 1</Select.Option>
+                <Select.Option value="severity-2">Severity 2</Select.Option>
+              </Select>
+            </label>
+          </Grid>
+          <label className="theme-studio__cards-field">
+            <span>Subject</span>
+            <Input placeholder="Subject" />
+          </label>
+          <label className="theme-studio__cards-field">
+            <span>Description</span>
+            <Textarea rows={4} placeholder="Describe the issue" />
+          </label>
+          <Flex className="theme-studio__cards-actions-end">
+            <Button>Cancel</Button>
+            <Button variant="solid" color="primary">
+              Submit
+            </Button>
+          </Flex>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+}
+
+export function CardsPreview(): React.ReactElement {
+  return (
+    <div className="theme-studio__cards-shell">
+      <Flex vertical className="theme-studio__cards-shell-left">
+        <RevenueCard />
+        <UpgradeCard />
+        <TeamMembersCard />
+        <CookieSettingsCard />
+        <ReportIssueCard />
+        <DatePickerCard />
+      </Flex>
+
+      <Flex vertical className="theme-studio__cards-shell-right">
+        <div className="theme-studio__cards-shell-right-top">
+          <CalendarCard />
+          <GoalCard />
+        </div>
+        <ExerciseCard />
+        <PaymentsCard />
+        <CreateAccountCard />
+        <ChatCard />
+        <ShareCard />
+        <AccessCard />
+      </Flex>
+    </div>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/preview-components/dashboard-preview.tsx b/apps/docs/src/containers/theme-studio/preview-components/dashboard-preview.tsx
new file mode 100644
index 000000000..3fab063c6
--- /dev/null
+++ b/apps/docs/src/containers/theme-studio/preview-components/dashboard-preview.tsx
@@ -0,0 +1,992 @@
+import React from 'react';
+import {
+  Avatar,
+  Button,
+  Card,
+  Checkbox,
+  Dropdown,
+  Flex,
+  Heading,
+  Input,
+  Menu,
+  Popover,
+  Segmented,
+  Select,
+  Text,
+} from '@tiny-design/react';
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@tiny-design/charts';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from 'recharts';
+import {
+  IconDocument,
+  IconHome,
+  IconMore,
+  IconPlus,
+  IconSearch,
+  IconSetting,
+  IconStatistics,
+  IconStructure,
+  IconSupport,
+  IconSwitch,
+  IconTeam,
+} from '@tiny-design/icons';
+
+const dashboardPrimaryNavItems = [
+  { key: 'dashboard', label: 'Dashboard', icon: <IconHome /> },
+  { key: 'lifecycle', label: 'Lifecycle', icon: <IconStructure /> },
+  { key: 'analytics', label: 'Analytics', icon: <IconStatistics /> },
+  { key: 'projects', label: 'Projects', icon: <IconDocument /> },
+  { key: 'team', label: 'Team', icon: <IconTeam /> },
+] as const;
+
+const dashboardDocumentNavItems = [
+  { key: 'data-library', label: 'Data Library' },
+  { key: 'reports', label: 'Reports' },
+  { key: 'word-assistant', label: 'Word Assistant' },
+  { key: 'more', label: 'More' },
+] as const;
+
+const dashboardFooterNavItems = [
+  { key: 'settings', label: 'Settings', icon: <IconSetting /> },
+  { key: 'get-help', label: 'Get Help', icon: <IconSupport /> },
+  { key: 'search', label: 'Search', icon: <IconSearch /> },
+] as const;
+
+const dashboardVisitorsData = Array.from({ length: 90 }, (_, index) => {
+  const date = new Date(2024, 3, 1 + index);
+  const waveA = Math.sin(index * 0.92);
+  const waveB = Math.sin(index * 0.42 + 0.8);
+  const waveC = Math.sin(index * 1.54 + 1.1);
+  const waveD = Math.sin(index * 0.24 + 2.1);
+  const climb = index * 1.18;
+  const spikePrimary = [8, 17, 27, 34, 35, 46, 58, 64, 72, 77, 83, 88].includes(index)
+    ? 108
+    : 0;
+  const spikeSecondary = [5, 12, 21, 30, 41, 54, 61, 69, 80, 86].includes(index) ? 52 : 0;
+  const valley = [9, 25, 50, 66].includes(index) ? -24 : 0;
+  const sharedSignal =
+    120 +
+    climb +
+    waveA * 21 +
+    waveB * 17 +
+    waveC * 11 +
+    Math.max(0, waveD * 8) +
+    spikePrimary * 0.92 +
+    spikeSecondary * 0.78 +
+    valley;
+
+  return {
+    label: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    total: Math.round(sharedSignal * 0.56 + 18),
+    trend: Math.round(sharedSignal + 44),
+  };
+});
+
+const dashboardVisitorsRangeData = {
+  'last-3-months': dashboardVisitorsData,
+  'last-30-days': [
+    { label: 'Jun 2', total: 58, trend: 132 },
+    { label: 'Jun 4', total: 81, trend: 244 },
+    { label: 'Jun 6', total: 74, trend: 124 },
+    { label: 'Jun 8', total: 86, trend: 208 },
+    { label: 'Jun 10', total: 78, trend: 138 },
+    { label: 'Jun 12', total: 89, trend: 198 },
+    { label: 'Jun 14', total: 105, trend: 286 },
+    { label: 'Jun 16', total: 83, trend: 182 },
+    { label: 'Jun 18', total: 94, trend: 248 },
+    { label: 'Jun 20', total: 65, trend: 104 },
+    { label: 'Jun 22', total: 88, trend: 234 },
+    { label: 'Jun 24', total: 92, trend: 194 },
+    { label: 'Jun 26', total: 116, trend: 298 },
+    { label: 'Jun 28', total: 87, trend: 176 },
+    { label: 'Jun 30', total: 121, trend: 272 },
+  ],
+  'last-7-days': [
+    { label: 'Jun 24', total: 92, trend: 194 },
+    { label: 'Jun 25', total: 101, trend: 228 },
+    { label: 'Jun 26', total: 116, trend: 298 },
+    { label: 'Jun 27', total: 110, trend: 252 },
+    { label: 'Jun 28', total: 87, trend: 176 },
+    { label: 'Jun 29', total: 95, trend: 222 },
+    { label: 'Jun 30', total: 121, trend: 272 },
+  ],
+} as const;
+
+const dashboardVisitorsChartConfig: ChartConfig = {
+  total: {
+    label: 'Visitors',
+    color: '#6aa1ff',
+  },
+  trend: {
+    label: 'Trend',
+    color: '#afd3ff',
+  },
+};
+
+const dashboardDonutData = [
+  { name: 'Chrome', value: 310, fill: '#8ab7ee' },
+  { name: 'Safari', value: 265, fill: '#467fe0' },
+  { name: 'Firefox', value: 220, fill: '#3365db' },
+  { name: 'Edge', value: 185, fill: '#2852c7' },
+  { name: 'Other', value: 145, fill: '#2f49ae' },
+];
+
+const dashboardDonutChartConfig: ChartConfig = {
+  chrome: { label: 'Chrome', color: '#8ab7ee' },
+  safari: { label: 'Safari', color: '#467fe0' },
+  firefox: { label: 'Firefox', color: '#3365db' },
+  edge: { label: 'Edge', color: '#2852c7' },
+  other: { label: 'Other', color: '#2f49ae' },
+};
+
+const dashboardBarData = [
+  { browser: 'Chrome', visitors: 192, fill: '#8ab7ee' },
+  { browser: 'Safari', visitors: 190, fill: '#467fe0' },
+  { browser: 'Firefox', visitors: 187, fill: '#3365db' },
+  { browser: 'Edge', visitors: 184, fill: '#2852c7' },
+  { browser: 'Other', visitors: 160, fill: '#2f49ae' },
+];
+
+const dashboardBarChartConfig: ChartConfig = {
+  visitors: {
+    label: 'Visitors',
+    color: '#467fe0',
+  },
+};
+
+const dashboardBaseDocumentRows = [
+  {
+    key: 'cover-page',
+    title: 'Cover page',
+    section: 'Cover page',
+    reviewer: 'Eddie Lake',
+    target: '18',
+    limit: '5',
+    group: 'past',
+  },
+  {
+    key: 'table-of-contents',
+    title: 'Table of contents',
+    section: 'Cover page',
+    reviewer: 'Eddie Lake',
+    target: '29',
+    limit: '24',
+    group: 'past',
+  },
+  {
+    key: 'executive-summary',
+    title: 'Executive summary',
+    section: 'Narrative',
+    reviewer: 'Eddie Lake',
+    target: '10',
+    limit: '13',
+    group: 'past',
+  },
+  {
+    key: 'technical-approach',
+    title: 'Technical approach',
+    section: 'Narrative',
+    reviewer: 'Jamik Tashpulatov',
+    target: '27',
+    limit: '23',
+    group: 'personnel',
+  },
+  {
+    key: 'design',
+    title: 'Design',
+    section: 'Narrative',
+    reviewer: 'Jamik Tashpulatov',
+    target: '2',
+    limit: '16',
+    group: 'personnel',
+  },
+  {
+    key: 'capabilities',
+    title: 'Capabilities',
+    section: 'Narrative',
+    reviewer: 'Jamik Tashpulatov',
+    target: '20',
+    limit: '8',
+    group: 'focus',
+  },
+  {
+    key: 'integration',
+    title: 'Integration with existing systems',
+    section: 'Narrative',
+    reviewer: 'Jamik Tashpulatov',
+    target: '19',
+    limit: '21',
+    group: 'focus',
+  },
+  {
+    key: 'innovation',
+    title: 'Innovation and Advantages',
+    section: 'Narrative',
+    reviewer: 'Assign reviewer',
+    target: '25',
+    limit: '26',
+    group: 'focus',
+  },
+  {
+    key: 'emr-overview',
+    title: "Overview of EMR's Innovative Solutions",
+    section: 'Technical content',
+    reviewer: 'Assign reviewer',
+    target: '7',
+    limit: '23',
+    group: 'focus',
+  },
+  {
+    key: 'advanced-algorithms',
+    title: 'Advanced Algorithms and Machine Learning',
+    section: 'Narrative',
+    reviewer: 'Assign reviewer',
+    target: '30',
+    limit: '28',
+    group: 'focus',
+  },
+] as const;
+
+const dashboardDocumentRows = Array.from({ length: 68 }, (_, index) => {
+  const baseRow = dashboardBaseDocumentRows[index % dashboardBaseDocumentRows.length];
+
+  if (index < dashboardBaseDocumentRows.length) {
+    return baseRow;
+  }
+
+  const cycle = Math.floor(index / dashboardBaseDocumentRows.length) + 1;
+  return {
+    ...baseRow,
+    key: `${baseRow.key}-${cycle}`,
+    title: `${baseRow.title} ${cycle}`,
+  };
+});
+
+type DashboardVisitorRange = keyof typeof dashboardVisitorsRangeData;
+type DashboardDocTab = 'outline' | 'past' | 'personnel' | 'focus';
+type DashboardRow = (typeof dashboardDocumentRows)[number];
+type DashboardRowField = 'target' | 'limit' | 'reviewer';
+type DashboardVisibleColumns = {
+  section: boolean;
+  target: boolean;
+  limit: boolean;
+  reviewer: boolean;
+};
+
+export function DashboardPreview(): React.ReactElement {
+  const [activeSidebarItem, setActiveSidebarItem] = React.useState('dashboard');
+  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
+  const [visitorRange, setVisitorRange] = React.useState<DashboardVisitorRange>('last-3-months');
+  const [activeDocTab, setActiveDocTab] = React.useState<DashboardDocTab>('outline');
+  const [documentRows, setDocumentRows] = React.useState(() => dashboardDocumentRows);
+  const [compactRows, setCompactRows] = React.useState(false);
+  const [visibleColumns, setVisibleColumns] = React.useState<DashboardVisibleColumns>({
+    section: true,
+    target: true,
+    limit: true,
+    reviewer: true,
+  });
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
+  const [rowFields, setRowFields] = React.useState(() =>
+    dashboardDocumentRows.reduce<Record<string, { target: string; limit: string; reviewer: string }>>(
+      (acc, row) => {
+        acc[row.key] = {
+          target: row.target,
+          limit: row.limit,
+          reviewer: row.reviewer,
+        };
+        return acc;
+      },
+      {}
+    )
+  );
+
+  const filteredRows =
+    activeDocTab === 'outline'
+      ? documentRows
+      : documentRows.filter((row) => row.group === activeDocTab);
+
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / rowsPerPage));
+  const safeCurrentPage = Math.min(currentPage, totalPages);
+  const pagedRows = filteredRows.slice((safeCurrentPage - 1) * rowsPerPage, safeCurrentPage * rowsPerPage);
+  const allVisibleSelected =
+    pagedRows.length > 0 && pagedRows.every((row) => selectedRows.includes(row.key));
+  const tableGridTemplate = [
+    '24px',
+    'minmax(290px, 1.9fr)',
+    visibleColumns.section ? 'minmax(144px, 1fr)' : null,
+    visibleColumns.target ? '96px' : null,
+    visibleColumns.limit ? '96px' : null,
+    visibleColumns.reviewer ? 'minmax(188px, 1fr)' : null,
+    '56px',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const addSection = (
+    group: Exclude<DashboardDocTab, 'outline'> = activeDocTab === 'outline' ? 'focus' : activeDocTab
+  ) => {
+    const nextIndex = documentRows.length + 1;
+    const nextKey = `new-section-${nextIndex}`;
+    const nextRow = {
+      key: nextKey,
+      title: `New section ${nextIndex}`,
+      section: group === 'focus' ? 'Technical content' : 'Narrative',
+      reviewer: 'Assign reviewer',
+      target: '12',
+      limit: '18',
+      group,
+    } as const;
+
+    setDocumentRows((current) => [...current, nextRow]);
+    setRowFields((current) => ({
+      ...current,
+      [nextKey]: {
+        target: nextRow.target,
+        limit: nextRow.limit,
+        reviewer: nextRow.reviewer,
+      },
+    }));
+    setCurrentPage(totalPages);
+  };
+
+  const updateRowField = (key: string, field: DashboardRowField, value: string) => {
+    setRowFields((current) => ({
+      ...current,
+      [key]: {
+        ...current[key],
+        [field]: value,
+      },
+    }));
+  };
+
+  const toggleRowSelection = (key: string, checked: boolean) => {
+    setSelectedRows((current) =>
+      checked ? Array.from(new Set([...current, key])) : current.filter((item) => item !== key)
+    );
+  };
+
+  const toggleVisibleRows = (checked: boolean) => {
+    setSelectedRows((current) => {
+      const visibleKeys = pagedRows.map((row) => row.key);
+      return checked
+        ? Array.from(new Set([...current, ...visibleKeys]))
+        : current.filter((item) => !visibleKeys.includes(item));
+    });
+  };
+
+  const runRowAction = (key: string, action: string) => {
+    if (action === 'duplicate') {
+      setDocumentRows((current) => {
+        const index = current.findIndex((row) => row.key === key);
+        if (index < 0) return current;
+
+        const source = current[index];
+        const copyKey = `${source.key}-copy-${Date.now()}`;
+        const copiedRow = {
+          ...source,
+          key: copyKey,
+          title: `${source.title} (Copy)`,
+        };
+
+        setRowFields((fields) => ({
+          ...fields,
+          [copyKey]: {
+            target: fields[key]?.target ?? source.target,
+            limit: fields[key]?.limit ?? source.limit,
+            reviewer: fields[key]?.reviewer ?? source.reviewer,
+          },
+        }));
+
+        return [...current.slice(0, index + 1), copiedRow, ...current.slice(index + 1)];
+      });
+    }
+
+    if (action === 'focus') {
+      setDocumentRows((current) =>
+        current.map((row) =>
+          row.key === key ? { ...row, group: 'focus', section: 'Technical content' } : row
+        )
+      );
+    }
+
+    if (action === 'archive') {
+      setDocumentRows((current) => current.filter((row) => row.key !== key));
+      setSelectedRows((current) => current.filter((item) => item !== key));
+      setRowFields((current) => {
+        const next = { ...current };
+        delete next[key];
+        return next;
+      });
+    }
+  };
+
+  React.useEffect(() => {
+    if (currentPage > totalPages) {
+      setCurrentPage(totalPages);
+    }
+  }, [currentPage, totalPages]);
+
+  React.useEffect(() => {
+    setRowFields((current) => {
+      let changed = false;
+      const next = { ...current };
+
+      documentRows.forEach((row) => {
+        if (!next[row.key]) {
+          next[row.key] = {
+            target: row.target,
+            limit: row.limit,
+            reviewer: row.reviewer,
+          };
+          changed = true;
+        }
+      });
+
+      Object.keys(next).forEach((key) => {
+        if (!documentRows.some((row) => row.key === key)) {
+          delete next[key];
+          changed = true;
+        }
+      });
+
+      return changed ? next : current;
+    });
+  }, [documentRows]);
+
+  const visitorData = dashboardVisitorsRangeData[visitorRange];
+  const visitorTickInterval =
+    visitorRange === 'last-3-months' ? 15 : visitorRange === 'last-30-days' ? 1 : 0;
+
+  return (
+    <div className={`theme-studio__docdash${sidebarCollapsed ? ' theme-studio__docdash_collapsed' : ''}`}>
+      <Card className="theme-studio__docdash-sidebar">
+        <Card.Content>
+          <div className="theme-studio__docdash-brand">
+            <Avatar>A</Avatar>
+            {!sidebarCollapsed ? (
+              <Flex vertical gap={2} className="theme-studio__docdash-copy">
+                <Text strong>Acme Inc.</Text>
+                <Text type="secondary">Workspace</Text>
+              </Flex>
+            ) : null}
+          </div>
+
+          <Button
+            variant="solid"
+            color="primary"
+            className="theme-studio__docdash-create"
+            onClick={() => addSection('focus')}>
+            <IconPlus />
+            {!sidebarCollapsed ? 'Quick Create' : null}
+          </Button>
+
+          {!sidebarCollapsed ? (
+            <>
+              <div className="theme-studio__docdash-nav-section">
+                <Menu
+                  mode="inline"
+                  variant="ghost"
+                  appearance="navigation"
+                  selectionStyle="mixed"
+                  size="sm"
+                  inlineIndent={16}
+                  className="theme-studio__docdash-menu"
+                  selectedKeys={[activeSidebarItem]}
+                  onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
+                  {dashboardPrimaryNavItems.map((item) => (
+                    <Menu.Item key={item.key} index={item.key} icon={item.icon}>
+                      {item.label}
+                    </Menu.Item>
+                  ))}
+                </Menu>
+              </div>
+
+              <div className="theme-studio__docdash-section-label">Documents</div>
+              <div className="theme-studio__docdash-nav-section">
+                <Menu
+                  mode="inline"
+                  variant="ghost"
+                  appearance="navigation"
+                  selectionStyle="mixed"
+                  size="sm"
+                  inlineIndent={16}
+                  className="theme-studio__docdash-menu"
+                  selectedKeys={[activeSidebarItem]}
+                  onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
+                  {dashboardDocumentNavItems.map((item) => (
+                    <Menu.Item
+                      key={item.key}
+                      index={item.key}
+                      icon={<IconDocument />}>
+                      {item.label}
+                    </Menu.Item>
+                  ))}
+                </Menu>
+              </div>
+
+              <div className="theme-studio__docdash-nav-section theme-studio__docdash-nav-section_footer">
+                <Menu
+                  mode="inline"
+                  variant="ghost"
+                  appearance="navigation"
+                  selectionStyle="mixed"
+                  size="sm"
+                  inlineIndent={16}
+                  className="theme-studio__docdash-menu"
+                  selectedKeys={[activeSidebarItem]}
+                  onSelect={(selectedKey) => setActiveSidebarItem(selectedKey)}>
+                  {dashboardFooterNavItems.map((item) => (
+                    <Menu.Item key={item.key} index={item.key} icon={item.icon}>
+                      {item.label}
+                    </Menu.Item>
+                  ))}
+                </Menu>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="theme-studio__docdash-nav-section">
+                {dashboardPrimaryNavItems.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    aria-label={item.label}
+                    title={item.label}
+                    onClick={() => setActiveSidebarItem(item.key)}
+                    className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
+                    <span>{item.icon}</span>
+                  </button>
+                ))}
+              </div>
+
+              <div className="theme-studio__docdash-nav-section">
+                {dashboardDocumentNavItems.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    aria-label={item.label}
+                    title={item.label}
+                    onClick={() => setActiveSidebarItem(item.key)}
+                    className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
+                    <span>
+                      <IconDocument />
+                    </span>
+                  </button>
+                ))}
+              </div>
+
+              <div className="theme-studio__docdash-nav-section theme-studio__docdash-nav-section_footer">
+                {dashboardFooterNavItems.map((item) => (
+                  <button
+                    key={item.key}
+                    type="button"
+                    aria-label={item.label}
+                    title={item.label}
+                    onClick={() => setActiveSidebarItem(item.key)}
+                    className={`theme-studio__docdash-nav-item${activeSidebarItem === item.key ? ' theme-studio__docdash-nav-item_active' : ''}`}>
+                    <span>{item.icon}</span>
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+
+          <div className="theme-studio__docdash-profile">
+            <Avatar>S</Avatar>
+            {!sidebarCollapsed ? (
+              <Flex vertical gap={2} className="theme-studio__docdash-copy">
+                <Text strong>script</Text>
+                <Text type="secondary">m@example.com</Text>
+              </Flex>
+            ) : null}
+          </div>
+        </Card.Content>
+      </Card>
+
+      <div className="theme-studio__docdash-main">
+        <div className="theme-studio__docdash-header">
+          <div className="theme-studio__docdash-header-copy">
+            <Button
+              variant="ghost"
+              className="theme-studio__docdash-toggle"
+              onClick={() => setSidebarCollapsed((current) => !current)}>
+              <IconSwitch />
+              Toggle Sidebar
+            </Button>
+            <Heading level={2}>Documents</Heading>
+          </div>
+        </div>
+
+        <div className="theme-studio__docdash-metrics">
+          {[
+            ['Total Revenue', '$1,250.00', '+12.5%', 'Trending up this month', 'Visitors for the last 6 months'],
+            ['New Customers', '1,234', '-20%', 'Down 20% this period', 'Acquisition needs attention'],
+            ['Active Accounts', '45,678', '+12.5%', 'Strong user retention', 'Engagement exceed targets'],
+            ['Growth Rate', '4.5%', '+4.5%', 'Steady performance', 'Meets growth projections'],
+          ].map(([label, value, delta, title, meta]) => (
+            <Card key={label} className="theme-studio__docdash-metric">
+              <Card.Content>
+                <Text strong>{label}</Text>
+                <div className="theme-studio__docdash-metric-value">{value}</div>
+                <div className="theme-studio__docdash-metric-delta">{delta}</div>
+                <Text>{title}</Text>
+                <Text type="secondary">{meta}</Text>
+              </Card.Content>
+            </Card>
+          ))}
+        </div>
+
+        <div className="theme-studio__docdash-body">
+          <div className="theme-studio__docdash-primary">
+            <Card className="theme-studio__docdash-traffic">
+              <Card.Content>
+                <div className="theme-studio__docdash-card-head">
+                  <Flex vertical>
+                    <Text strong>Total Visitors</Text>
+                    <Text type="secondary">Total for the last 3 months</Text>
+                  </Flex>
+                  <Segmented
+                    className="theme-studio__docdash-traffic-segmented"
+                    options={[
+                      { label: 'Last 3 months', value: 'last-3-months' },
+                      { label: 'Last 30 days', value: 'last-30-days' },
+                      { label: 'Last 7 days', value: 'last-7-days' },
+                    ]}
+                    value={visitorRange}
+                    onChange={(value) => setVisitorRange(value as DashboardVisitorRange)}
+                  />
+                </div>
+
+                <ChartContainer
+                  config={dashboardVisitorsChartConfig}
+                  style={{ height: 286, width: '100%' }}>
+                  <AreaChart
+                    data={visitorData}
+                    margin={{ top: 8, right: 6, left: 6, bottom: 0 }}>
+                    <defs>
+                      <linearGradient id="dashboardVisitorsTrendFill" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="var(--color-trend)" stopOpacity={0.88} />
+                        <stop offset="100%" stopColor="var(--color-trend)" stopOpacity={0.16} />
+                      </linearGradient>
+                      <linearGradient id="dashboardVisitorsFill" x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="0%" stopColor="var(--color-total)" stopOpacity={0.4} />
+                        <stop offset="100%" stopColor="var(--color-total)" stopOpacity={0.1} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid vertical={false} stroke="#edf1f7" strokeDasharray="0" />
+                    <XAxis
+                      dataKey="label"
+                      tickLine={false}
+                      axisLine={false}
+                      interval={visitorTickInterval}
+                      tickMargin={10}
+                      tick={{ fontSize: 11, fill: '#7b8190' }}
+                    />
+                    <YAxis hide domain={[0, 'dataMax + 10']} />
+                    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                    <Area
+                      type="natural"
+                      dataKey="trend"
+                      stroke="var(--color-trend)"
+                      fill="url(#dashboardVisitorsTrendFill)"
+                      strokeWidth={1.65}
+                      dot={false}
+                    />
+                    <Area
+                      type="natural"
+                      dataKey="total"
+                      stroke="var(--color-total)"
+                      fill="url(#dashboardVisitorsFill)"
+                      strokeWidth={1.75}
+                      dot={false}
+                    />
+                  </AreaChart>
+                </ChartContainer>
+              </Card.Content>
+            </Card>
+
+            <Card className="theme-studio__docdash-table-card">
+              <Card.Content>
+                <div className="theme-studio__docdash-card-head">
+                  <div className="theme-studio__docdash-outline">
+                    {[
+                      ['outline', 'Outline', null],
+                      ['past', 'Past Performance', '3'],
+                      ['personnel', 'Key Personnel', '2'],
+                      ['focus', 'Focus Documents', null],
+                    ].map(([key, label, value]) => (
+                      <Button
+                        key={key}
+                        size="sm"
+                        variant={activeDocTab === key ? 'outline' : 'ghost'}
+                        className={`theme-studio__docdash-outline-pill${activeDocTab === key ? ' theme-studio__docdash-outline-pill_active' : ''}`}
+                        onClick={() => setActiveDocTab(key as DashboardDocTab)}>
+                        <span>{label}</span>
+                        {value ? <strong>{value}</strong> : null}
+                      </Button>
+                    ))}
+                  </div>
+                  <div className="theme-studio__docdash-table-actions">
+                    <Popover
+                      trigger="click"
+                      placement="bottom-end"
+                      title="Customize table"
+                      content={
+                        <div className="theme-studio__docdash-popover">
+                          <label className="theme-studio__docdash-popover-option">
+                            <Checkbox
+                              checked={compactRows}
+                              onChange={(event) => setCompactRows(event.target.checked)}
+                            />
+                            <span>Compact rows</span>
+                          </label>
+                        </div>
+                      }>
+                      <Button size="sm">Customize Columns</Button>
+                    </Popover>
+                    <Popover
+                      trigger="click"
+                      placement="bottom-end"
+                      title="Visible columns"
+                      content={
+                        <div className="theme-studio__docdash-popover">
+                          {[
+                            ['section', 'Section Type'],
+                            ['target', 'Target'],
+                            ['limit', 'Limit'],
+                            ['reviewer', 'Reviewer'],
+                          ].map(([key, label]) => (
+                            <label key={key} className="theme-studio__docdash-popover-option">
+                              <Checkbox
+                                checked={visibleColumns[key as keyof DashboardVisibleColumns]}
+                                onChange={(event) =>
+                                  setVisibleColumns((current) => ({
+                                    ...current,
+                                    [key]: event.target.checked,
+                                  }))
+                                }
+                              />
+                              <span>{label}</span>
+                            </label>
+                          ))}
+                        </div>
+                      }>
+                      <Button size="sm" variant="outline">
+                        Columns
+                      </Button>
+                    </Popover>
+                    <Button size="sm" variant="solid" color="primary" onClick={() => addSection()}>
+                      Add Section
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="theme-studio__docdash-table-head" style={{ gridTemplateColumns: tableGridTemplate }}>
+                  <Checkbox checked={allVisibleSelected} onChange={(event) => toggleVisibleRows(event.target.checked)} />
+                  <span>Header</span>
+                  {visibleColumns.section ? <span>Section Type</span> : null}
+                  {visibleColumns.target ? <span>Target</span> : null}
+                  {visibleColumns.limit ? <span>Limit</span> : null}
+                  {visibleColumns.reviewer ? <span>Reviewer</span> : null}
+                  <span />
+                </div>
+
+                <div className="theme-studio__docdash-table-body">
+                  {pagedRows.map((row) => (
+                    <div
+                      key={row.key}
+                      className={`theme-studio__docdash-row${compactRows ? ' theme-studio__docdash-row_compact' : ''}`}
+                      style={{ gridTemplateColumns: tableGridTemplate }}>
+                      <Checkbox
+                        checked={selectedRows.includes(row.key)}
+                        onChange={(event) => toggleRowSelection(row.key, event.target.checked)}
+                      />
+                      <div className="theme-studio__docdash-row-title">
+                        <strong>{row.title}</strong>
+                        <small>Drag to reorder</small>
+                      </div>
+                      {visibleColumns.section ? (
+                        <Button size="sm" className="theme-studio__docdash-row-chip">
+                          {row.section}
+                        </Button>
+                      ) : null}
+                      {visibleColumns.target ? (
+                        <Input
+                          size="sm"
+                          aria-label="Target"
+                          value={rowFields[row.key]?.target ?? ''}
+                          onChange={(event) => updateRowField(row.key, 'target', event.target.value)}
+                        />
+                      ) : null}
+                      {visibleColumns.limit ? (
+                        <Input
+                          size="sm"
+                          aria-label="Limit"
+                          value={rowFields[row.key]?.limit ?? ''}
+                          onChange={(event) => updateRowField(row.key, 'limit', event.target.value)}
+                        />
+                      ) : null}
+                      {visibleColumns.reviewer ? (
+                        row.reviewer === 'Assign reviewer' ? (
+                          <Select
+                            size="sm"
+                            value={rowFields[row.key]?.reviewer}
+                            onChange={(value) => updateRowField(row.key, 'reviewer', value)}>
+                            <Select.Option value="Eddie Lake">Eddie Lake</Select.Option>
+                            <Select.Option value="Jamik Tashpulatov">Jamik Tashpulatov</Select.Option>
+                            <Select.Option value="Assign reviewer">Assign reviewer</Select.Option>
+                          </Select>
+                        ) : (
+                          <div className="theme-studio__docdash-reviewer">{rowFields[row.key]?.reviewer}</div>
+                        )
+                      ) : null}
+                      <Dropdown
+                        trigger="click"
+                        overlay={
+                          <Menu onSelect={(action) => runRowAction(row.key, action)}>
+                            <Menu.Item index="duplicate">Duplicate section</Menu.Item>
+                            <Menu.Item index="focus">Move to focus</Menu.Item>
+                            <Menu.Item index="archive" danger>
+                              Archive section
+                            </Menu.Item>
+                          </Menu>
+                        }>
+                        <button type="button" className="theme-studio__docdash-more" aria-label="Open menu">
+                          <IconMore />
+                        </button>
+                      </Dropdown>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="theme-studio__docdash-table-footer">
+                  <Text type="secondary">
+                    {selectedRows.length} of {documentRows.length} row(s) selected.
+                  </Text>
+                  <div className="theme-studio__docdash-pagination">
+                    <span>Rows per page</span>
+                    <Select
+                      value={String(rowsPerPage)}
+                      size="sm"
+                      onChange={(value) => {
+                        setRowsPerPage(Number(value));
+                        setCurrentPage(1);
+                      }}>
+                      <Select.Option value="10">10</Select.Option>
+                      <Select.Option value="20">20</Select.Option>
+                    </Select>
+                    <span>
+                      Page {safeCurrentPage} of {totalPages}
+                    </span>
+                    <div className="theme-studio__docdash-pagination-buttons">
+                      <button type="button" disabled={safeCurrentPage === 1} onClick={() => setCurrentPage(1)}>
+                        «
+                      </button>
+                      <button
+                        type="button"
+                        disabled={safeCurrentPage === 1}
+                        onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}>
+                        ‹
+                      </button>
+                      <button
+                        type="button"
+                        disabled={safeCurrentPage === totalPages}
+                        onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}>
+                        ›
+                      </button>
+                      <button
+                        type="button"
+                        disabled={safeCurrentPage === totalPages}
+                        onClick={() => setCurrentPage(totalPages)}>
+                        »
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </Card.Content>
+            </Card>
+
+            <div className="theme-studio__docdash-chart-pair">
+              <Card className="theme-studio__docdash-chart-card">
+                <Card.Content>
+                  <div className="theme-studio__docdash-card-head">
+                    <Flex vertical>
+                      <Text strong>Pie Chart - Donut with Text</Text>
+                      <Text type="secondary">January - June 2024</Text>
+                    </Flex>
+                  </div>
+                  <ChartContainer config={dashboardDonutChartConfig} style={{ height: 318, width: '100%' }}>
+                    <PieChart>
+                      <Pie
+                        data={dashboardDonutData}
+                        dataKey="value"
+                        nameKey="name"
+                        cx="50%"
+                        cy="49%"
+                        innerRadius={56}
+                        outerRadius={106}
+                        strokeWidth={0}
+                        paddingAngle={0}>
+                        {dashboardDonutData.map((entry) => (
+                          <Cell key={entry.name} fill={entry.fill} />
+                        ))}
+                      </Pie>
+                    </PieChart>
+                  </ChartContainer>
+                  <div className="theme-studio__docdash-chart-center">
+                    <strong>1,125</strong>
+                    <small>Visitors</small>
+                  </div>
+                  <div className="theme-studio__docdash-chart-note">
+                    <span>Trending up by 5.2% this month</span>
+                  </div>
+                  <Text type="secondary">Showing total visitors for the last 6 months</Text>
+                </Card.Content>
+              </Card>
+
+              <Card className="theme-studio__docdash-chart-card">
+                <Card.Content>
+                  <div className="theme-studio__docdash-card-head">
+                    <Flex vertical>
+                      <Text strong>Bar Chart - Mixed</Text>
+                      <Text type="secondary">January - June 2024</Text>
+                    </Flex>
+                  </div>
+                  <ChartContainer config={dashboardBarChartConfig} style={{ height: 318, width: '100%' }}>
+                    <BarChart
+                      data={dashboardBarData}
+                      layout="vertical"
+                      margin={{ top: 20, right: 2, left: 0, bottom: 4 }}
+                      barCategoryGap={16}>
+                      <XAxis type="number" hide />
+                      <YAxis
+                        type="category"
+                        dataKey="browser"
+                        tickLine={false}
+                        axisLine={false}
+                        width={48}
+                        tick={{ fontSize: 12, fill: '#7b8190' }}
+                      />
+                      <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                      <Bar dataKey="visitors" radius={[6, 6, 6, 6]} barSize={46}>
+                        {dashboardBarData.map((entry) => (
+                          <Cell key={entry.browser} fill={entry.fill} />
+                        ))}
+                      </Bar>
+                    </BarChart>
+                  </ChartContainer>
+                  <div className="theme-studio__docdash-chart-center theme-studio__docdash-chart-center_compact">
+                    <span>Trending up by 5.2% this month</span>
+                  </div>
+                  <Text type="secondary">Showing total visitors for the last 6 months</Text>
+                </Card.Content>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/preview-components/index.tsx b/apps/docs/src/containers/theme-studio/preview-components/index.tsx
new file mode 100644
index 000000000..ea1063dba
--- /dev/null
+++ b/apps/docs/src/containers/theme-studio/preview-components/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Flex } from '@tiny-design/react';
+import type { ThemeEditorFields, ThemeEditorSection, ThemePreviewTemplate } from '../types';
+import { CardsPreview } from './cards-preview';
+import { DashboardPreview } from './dashboard-preview';
+import { MailPreview } from './mail-preview';
+import { PricingPreview } from './pricing-preview';
+
+export function renderPreview(
+  template: ThemePreviewTemplate,
+  _fields: ThemeEditorFields,
+  _section: ThemeEditorSection
+): React.ReactElement {
+  const content =
+    template === 'dashboard' ? (
+      <DashboardPreview />
+    ) : template === 'mail' ? (
+      <MailPreview />
+    ) : template === 'pricing' ? (
+      <PricingPreview />
+    ) : (
+      <CardsPreview />
+    );
+
+  return (
+    <Flex vertical className="theme-studio__preview-stack">
+      {content}
+    </Flex>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/preview-components/mail-preview.tsx b/apps/docs/src/containers/theme-studio/preview-components/mail-preview.tsx
new file mode 100644
index 000000000..10ad198c1
--- /dev/null
+++ b/apps/docs/src/containers/theme-studio/preview-components/mail-preview.tsx
@@ -0,0 +1,519 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Avatar,
+  Button,
+  Card,
+  Flex,
+  Grid,
+  Heading,
+  Input,
+  Menu,
+  Segmented,
+  Select,
+  Split,
+  Switch,
+  Tag,
+  Text,
+  Textarea,
+} from '@tiny-design/react';
+import {
+  IconArchive,
+  IconDeleteArchive,
+  IconDocument,
+  IconMore,
+  IconSearch,
+  IconShop,
+  IconTags,
+  IconTeam,
+  IconTrash,
+} from '@tiny-design/icons';
+
+type MailFolderKey =
+  | 'inbox'
+  | 'drafts'
+  | 'sent'
+  | 'junk'
+  | 'trash'
+  | 'archive'
+  | 'social'
+  | 'updates'
+  | 'forums'
+  | 'shopping'
+  | 'promotions';
+
+type MailFilter = 'all' | 'unread';
+
+type MailThread = {
+  id: string;
+  folder: MailFolderKey;
+  sender: string;
+  initials: string;
+  subject: string;
+  preview: string;
+  body: string[];
+  replyTo: string;
+  time: string;
+  unread?: boolean;
+  tags: string[];
+};
+
+type MailThreadSeed = Omit<MailThread, 'initials' | 'replyTo' | 'body'> & {
+  body?: string[];
+  replyTo?: string;
+};
+
+const mailPrimaryFolders = [
+  { key: 'inbox', label: 'Inbox', count: '128', icon: <IconArchive /> },
+  { key: 'drafts', label: 'Drafts', count: '9', icon: <IconDocument /> },
+  { key: 'sent', label: 'Sent', icon: <IconDocument /> },
+  { key: 'junk', label: 'Junk', count: '23', icon: <IconDeleteArchive /> },
+  { key: 'trash', label: 'Trash', icon: <IconTrash /> },
+  { key: 'archive', label: 'Archive', icon: <IconArchive /> },
+] as const;
+
+const mailSecondaryFolders = [
+  { key: 'social', label: 'Social', count: '972', icon: <IconTeam /> },
+  { key: 'updates', label: 'Updates', count: '342', icon: <IconDocument /> },
+  { key: 'forums', label: 'Forums', count: '128', icon: <IconTags /> },
+  { key: 'shopping', label: 'Shopping', count: '8', icon: <IconShop /> },
+  { key: 'promotions', label: 'Promotions', count: '21', icon: <IconTags /> },
+] as const;
+
+function getMailInitials(sender: string): string {
+  return sender
+    .split(' ')
+    .map((part) => part[0] ?? '')
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function getMailReplyTo(sender: string): string {
+  return `${sender.toLowerCase().replace(/\s+/g, '')}@example.com`;
+}
+
+const mailThreadSeeds: MailThreadSeed[] = [
+  {
+    id: 'william-smith',
+    folder: 'inbox',
+    sender: 'William Smith',
+    initials: 'WS',
+    subject: 'Meeting Tomorrow',
+    preview:
+      "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the details and have some ideas I'd like to share.",
+    body: [
+      "Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success.",
+      'Please come prepared with any questions or insights you may have. Looking forward to our meeting!',
+      'Best regards, William',
+    ],
+    replyTo: 'williamsmith@example.com',
+    time: 'Oct 22, 2023, 9:00 AM',
+    tags: ['meeting', 'work', 'important'],
+  },
+  {
+    id: 'alice-smith',
+    folder: 'inbox',
+    sender: 'Alice Smith',
+    subject: 'Re: Project Update',
+    preview:
+      "Thank you for the project update. It looks great! I've gone through the report, and the progress is impressive. The team has done a fantastic job, and I appreciate the hard work everyone has put in.",
+    time: 'over 2 years ago',
+    tags: ['work', 'important'],
+  },
+  {
+    id: 'bob-johnson',
+    folder: 'inbox',
+    sender: 'Bob Johnson',
+    subject: 'Weekend Plans',
+    preview:
+      "Any plans for the weekend? I was thinking of going hiking in the nearby mountains. It's been a while since we had some outdoor fun. If you're interested, let me know, and we can plan the details.",
+    time: 'about 3 years ago',
+    tags: ['personal'],
+  },
+  {
+    id: 'emily-davis',
+    folder: 'inbox',
+    sender: 'Emily Davis',
+    subject: 'Re: Question about Budget',
+    preview:
+      "I have a question about the budget for the upcoming project. It seems like there's a discrepancy in the allocation of resources. I've reviewed the budget report and identified a few areas where we might be able to optimize our spending.",
+    time: 'about 3 years ago',
+    unread: true,
+    tags: ['work', 'budget'],
+  },
+  {
+    id: 'michael-wilson',
+    folder: 'inbox',
+    sender: 'Michael Wilson',
+    subject: 'Important Announcement',
+    preview:
+      "I have an important announcement to make during our team meeting. It pertains to a strategic shift in our approach to the upcoming product launch. We've received valuable feedback from our beta testers, and I believe it's time to make some adjustments.",
+    time: 'about 3 years ago',
+    unread: true,
+    tags: ['meeting', 'work', 'important'],
+  },
+  {
+    id: 'sarah-brown',
+    folder: 'inbox',
+    sender: 'Sarah Brown',
+    subject: 'Re: Feedback on Proposal',
+    preview:
+      "Thank you for your feedback on the proposal. It looks great! I'm pleased to hear that you found it promising. The team worked diligently to address all the key points you raised, and I believe we now have a strong foundation for the project.",
+    time: 'about 3 years ago',
+    tags: ['work'],
+  },
+  {
+    id: 'david-lee',
+    folder: 'inbox',
+    sender: 'David Lee',
+    subject: 'New Project Idea',
+    preview:
+      "I have an exciting new project idea to discuss with you. It involves expanding our services to target a niche market that has shown considerable growth in recent months. I've prepared a detailed proposal outlining the potential benefits and the strategy for execution.",
+    time: 'about 3 years ago',
+    unread: true,
+    tags: ['meeting', 'work', 'important'],
+  },
+  {
+    id: 'olivia-wilson',
+    folder: 'inbox',
+    sender: 'Olivia Wilson',
+    subject: 'Vacation Plans',
+    preview:
+      "Let's plan our vacation for next month. What do you think? I've been thinking of visiting a tropical paradise, and I've put together some destination options. I believe it's time for us to unwind and recharge.",
+    time: 'over 3 years ago',
+    tags: ['personal'],
+  },
+  {
+    id: 'james-martin',
+    folder: 'inbox',
+    sender: 'James Martin',
+    subject: 'Re: Conference Registration',
+    preview:
+      "I've completed the registration for the conference next month. The event promises to be a great networking opportunity, and I'm looking forward to attending the various sessions and connecting with industry experts.",
+    time: 'over 3 years ago',
+    tags: ['work', 'conference'],
+  },
+  {
+    id: 'sophia-white',
+    folder: 'inbox',
+    sender: 'Sophia White',
+    subject: 'Team Dinner',
+    preview:
+      "Let's have a team dinner next week to celebrate our success. We've achieved some significant milestones, and it's time to acknowledge our hard work and dedication. I've made reservations at a lovely restaurant.",
+    time: 'over 3 years ago',
+    tags: ['meeting', 'work'],
+  },
+  {
+    id: 'daniel-johnson',
+    folder: 'inbox',
+    sender: 'Daniel Johnson',
+    subject: 'Feedback Request',
+    preview:
+      "I'd like your feedback on the latest project deliverables. We've made significant progress, and I value your input to ensure we're on the right track. I've attached the deliverables for your review.",
+    time: 'over 3 years ago',
+    tags: ['work'],
+  },
+  {
+    id: 'ava-taylor',
+    folder: 'inbox',
+    sender: 'Ava Taylor',
+    subject: 'Re: Meeting Agenda',
+    preview:
+      "Here's the agenda for our meeting next week. I've included all the topics we need to cover, as well as time allocations for each. If you have any additional items to discuss, please let me know.",
+    time: 'over 3 years ago',
+    unread: true,
+    tags: ['meeting', 'work'],
+  },
+  {
+    id: 'william-anderson',
+    folder: 'inbox',
+    sender: 'William Anderson',
+    subject: 'Product Launch Update',
+    preview:
+      "The product launch is on track. I'll provide an update during our call. We've made substantial progress in the development and marketing of our new product, and I'm excited to share the latest updates with you.",
+    time: 'over 3 years ago',
+    tags: ['meeting', 'work', 'important'],
+  },
+  {
+    id: 'mia-harris',
+    folder: 'inbox',
+    sender: 'Mia Harris',
+    subject: 'Re: Travel Itinerary',
+    preview:
+      "I've received the travel itinerary. It looks great! Thank you for your prompt assistance in arranging the details. I've reviewed the schedule and the accommodations, and everything seems to be in order.",
+    time: 'over 3 years ago',
+    tags: ['personal', 'travel'],
+  },
+  {
+    id: 'ethan-clark',
+    folder: 'inbox',
+    sender: 'Ethan Clark',
+    subject: 'Team Building Event',
+    preview:
+      "Let's plan a team-building event for our department. Team cohesion and morale are vital to our success, and I believe a well-organized team-building event can be incredibly beneficial. I've done some research and have a few ideas.",
+    time: 'over 3 years ago',
+    unread: true,
+    tags: ['meeting', 'work'],
+  },
+  {
+    id: 'chloe-hall',
+    folder: 'inbox',
+    sender: 'Chloe Hall',
+    subject: 'Re: Budget Approval',
+    preview:
+      "The budget has been approved. We can proceed with the project. I'm delighted to inform you that our budget proposal has received the green light from the finance department. This is a significant milestone.",
+    time: 'over 3 years ago',
+    tags: ['work', 'budget'],
+  },
+  {
+    id: 'samuel-turner',
+    folder: 'inbox',
+    sender: 'Samuel Turner',
+    subject: 'Weekend Hike',
+    preview:
+      "Who's up for a weekend hike in the mountains? I've been craving some outdoor adventure, and a hike in the mountains sounds like the perfect escape. If you're up for the challenge, we can explore some scenic trails.",
+    time: 'over 3 years ago',
+    tags: ['personal'],
+  },
+];
+
+const mailThreads: MailThread[] = mailThreadSeeds.map((thread) => ({
+  ...thread,
+  initials: getMailInitials(thread.sender),
+  replyTo: thread.replyTo ?? getMailReplyTo(thread.sender),
+  body: thread.body ?? [thread.preview],
+}));
+
+const folderLabels: Record<MailFolderKey, string> = {
+  inbox: 'Inbox',
+  drafts: 'Drafts',
+  sent: 'Sent',
+  junk: 'Junk',
+  trash: 'Trash',
+  archive: 'Archive',
+  social: 'Social',
+  updates: 'Updates',
+  forums: 'Forums',
+  shopping: 'Shopping',
+  promotions: 'Promotions',
+};
+
+function getMailTagClassName(tag: string): string {
+  return `theme-studio__mail-thread-tag_${tag.toLowerCase().replace(/\s+/g, '-')}`;
+}
+
+export function MailPreview(): React.ReactElement {
+  const [activeFolder, setActiveFolder] = useState<MailFolderKey>('inbox');
+  const [activeFilter, setActiveFilter] = useState<MailFilter>('all');
+  const [selectedThreadId, setSelectedThreadId] = useState<string>('william-smith');
+  const [search, setSearch] = useState('');
+  const [muteThread, setMuteThread] = useState(false);
+
+  const visibleThreads = useMemo(() => {
+    const query = search.trim().toLowerCase();
+
+    return mailThreads.filter((thread) => {
+      const matchesFolder = thread.folder === activeFolder;
+      const matchesFilter = activeFilter === 'all' || thread.unread;
+      const matchesQuery =
+        query.length === 0 ||
+        [thread.sender, thread.subject, thread.preview, thread.tags.join(' ')].some((field) =>
+          field.toLowerCase().includes(query),
+        );
+
+      return matchesFolder && matchesFilter && matchesQuery;
+    });
+  }, [activeFilter, activeFolder, search]);
+
+  useEffect(() => {
+    if (!visibleThreads.some((thread) => thread.id === selectedThreadId)) {
+      setSelectedThreadId(visibleThreads[0]?.id ?? mailThreads[0].id);
+    }
+  }, [selectedThreadId, visibleThreads]);
+
+  const selectedThread =
+    visibleThreads.find((thread) => thread.id === selectedThreadId) ?? visibleThreads[0] ?? mailThreads[0];
+
+  return (
+    <Grid className="theme-studio__mail-shell">
+      <Card className="theme-studio__mail-sidebar">
+        <Card.Content>
+          <div className="theme-studio__mail-account-wrap">
+            <Select defaultValue="gmail-alicia-koch" size="sm" className="theme-studio__mail-account">
+              <Select.Option value="gmail-alicia-koch">Gmail Alicia Koch</Select.Option>
+              <Select.Option value="workspace-alicia-koch">Workspace Alicia Koch</Select.Option>
+            </Select>
+          </div>
+
+          <div className="theme-studio__mail-nav-group">
+            <Menu
+              mode="inline"
+              variant="fill"
+              appearance="navigation"
+              selectionStyle="background"
+              size="sm"
+              inlineIndent={12}
+              className="theme-studio__mail-menu"
+              selectedKeys={[activeFolder]}
+              onSelect={(selectedKey) => setActiveFolder(selectedKey as MailFolderKey)}>
+              {mailPrimaryFolders.map((folder) => (
+                <Menu.Item
+                  key={folder.key}
+                  index={folder.key}
+                  icon={folder.icon}
+                  extra={folder.count ? <span className="theme-studio__mail-nav-count">{folder.count}</span> : null}>
+                  {folder.label}
+                </Menu.Item>
+              ))}
+            </Menu>
+          </div>
+
+          <div className="theme-studio__mail-nav-group theme-studio__mail-nav-group_secondary">
+            <Menu
+              mode="inline"
+              variant="fill"
+              appearance="navigation"
+              selectionStyle="background"
+              size="sm"
+              inlineIndent={12}
+              className="theme-studio__mail-menu"
+              selectedKeys={[activeFolder]}
+              onSelect={(selectedKey) => setActiveFolder(selectedKey as MailFolderKey)}>
+              {mailSecondaryFolders.map((folder) => (
+                <Menu.Item
+                  key={folder.key}
+                  index={folder.key}
+                  icon={folder.icon}
+                  extra={<span className="theme-studio__mail-nav-count">{folder.count}</span>}>
+                  {folder.label}
+                </Menu.Item>
+              ))}
+            </Menu>
+          </div>
+        </Card.Content>
+      </Card>
+
+      <Split min={320} max={360} defaultSize="42%" className="theme-studio__mail-split">
+        <Card className="theme-studio__mail-panel">
+        <Card.Content>
+          <Flex justify="space-between" className="theme-studio__mail-panel-head">
+            <Heading level={3}>{folderLabels[activeFolder]}</Heading>
+            <Segmented
+              size="md"
+              value={activeFilter}
+              options={[
+                { label: 'All mail', value: 'all' },
+                { label: 'Unread', value: 'unread' },
+              ]}
+              onChange={(value) => setActiveFilter(String(value) as MailFilter)}
+            />
+          </Flex>
+
+          <div className="theme-studio__mail-search-wrap">
+            <Input
+              value={search}
+              placeholder="Search"
+              prefix={<IconSearch size={14} />}
+              className="theme-studio__mail-search"
+              onChange={(event) => setSearch(event.target.value)}
+            />
+          </div>
+
+          <Flex vertical className="theme-studio__mail-thread-list">
+            {visibleThreads.map((thread) => (
+              <Card
+                key={thread.id}
+                hoverable
+                active={selectedThread.id === thread.id}
+                className={`theme-studio__mail-thread${selectedThread.id === thread.id ? ' theme-studio__mail-thread_active' : ''}`}
+                onClick={() => setSelectedThreadId(thread.id)}>
+                <Card.Content>
+                  <div className="theme-studio__mail-thread-head">
+                    <Text strong className="theme-studio__mail-thread-sender">{thread.sender}</Text>
+                    <span className="theme-studio__mail-thread-time">{thread.time}</span>
+                  </div>
+                  <div className="theme-studio__mail-thread-subject">
+                    <span>{thread.subject}</span>
+                    {thread.unread ? <i className="theme-studio__mail-thread-dot" /> : null}
+                  </div>
+                  <Text className="theme-studio__mail-thread-preview">{thread.preview}</Text>
+                  <Flex wrap gap={6} className="theme-studio__mail-thread-tags">
+                    {thread.tags.map((tag) => (
+                      <Tag
+                        key={tag}
+                        variant="soft"
+                        className={`theme-studio__mail-thread-tag ${getMailTagClassName(tag)}`}>
+                        {tag}
+                      </Tag>
+                    ))}
+                  </Flex>
+                </Card.Content>
+              </Card>
+            ))}
+          </Flex>
+        </Card.Content>
+      </Card>
+
+      <Card className="theme-studio__mail-detail">
+        <Card.Content>
+          <div className="theme-studio__mail-detail-toolbar">
+            <Flex className="theme-studio__mail-detail-actions">
+              <Button size="sm" variant="ghost" className="theme-studio__mail-icon-btn" aria-label="Archive">
+                <IconArchive />
+              </Button>
+              <Button size="sm" variant="ghost" className="theme-studio__mail-icon-btn" aria-label="Move to junk">
+                <IconDeleteArchive />
+              </Button>
+              <Button size="sm" variant="ghost" className="theme-studio__mail-icon-btn" aria-label="Move to trash">
+                <IconTrash />
+              </Button>
+              <Button size="sm" variant="ghost" className="theme-studio__mail-icon-btn" aria-label="Snooze">
+                <IconTags />
+              </Button>
+            </Flex>
+            <Button size="sm" variant="ghost" className="theme-studio__mail-icon-btn" aria-label="More">
+              <IconMore />
+            </Button>
+          </div>
+
+          <div className="theme-studio__mail-message-head">
+            <div className="theme-studio__mail-message-meta">
+              <Avatar>{selectedThread.initials}</Avatar>
+              <div className="theme-studio__mail-message-copy">
+                <div className="theme-studio__mail-message-sender">{selectedThread.sender}</div>
+                <div className="theme-studio__mail-message-subject">{selectedThread.subject}</div>
+                <div className="theme-studio__mail-message-replyto">
+                  <span>Reply-To:</span>
+                  <span>{selectedThread.replyTo}</span>
+                </div>
+              </div>
+            </div>
+            <Text type="secondary" className="theme-studio__mail-message-time">
+              {selectedThread.time}
+            </Text>
+          </div>
+
+          <Flex vertical className="theme-studio__mail-message-body">
+            {selectedThread.body.map((paragraph) => (
+              <Text key={paragraph}>{paragraph}</Text>
+            ))}
+          </Flex>
+
+          <div className="theme-studio__mail-reply">
+            <Textarea rows={6} resizable={false} placeholder={`Reply ${selectedThread.sender}...`} />
+            <div className="theme-studio__mail-reply-foot">
+              <label className="theme-studio__mail-mute">
+                <Switch checked={muteThread} onChange={setMuteThread} size="sm" />
+                <span>Mute this thread</span>
+              </label>
+              <Button variant="solid" color="primary">
+                Send
+              </Button>
+            </div>
+          </div>
+        </Card.Content>
+      </Card>
+      </Split>
+    </Grid>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/preview-components/pricing-preview.tsx b/apps/docs/src/containers/theme-studio/preview-components/pricing-preview.tsx
new file mode 100644
index 000000000..63399f4be
--- /dev/null
+++ b/apps/docs/src/containers/theme-studio/preview-components/pricing-preview.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { IconArrowRight, IconCheckCircle } from '@tiny-design/icons';
+import { Button, Card, Flex, Switch, Text } from '@tiny-design/react';
+
+type BillingCycle = 'monthly' | 'yearly';
+
+type Plan = {
+  name: string;
+  caption: string;
+  monthlyPrice: string;
+  yearlyPrice: string;
+  monthlyNote: string;
+  yearlyNote: string;
+  features: string[];
+};
+
+const plans: Plan[] = [
+  {
+    name: 'Plus',
+    caption: 'For personal use',
+    monthlyPrice: '$24',
+    yearlyPrice: '$19',
+    monthlyNote: 'Billed monthly',
+    yearlyNote: 'Billed $228 annually',
+    features: [
+      'Up to 5 team members',
+      'Basic components library',
+      'Community support',
+      '1GB storage space',
+    ],
+  },
+  {
+    name: 'Pro',
+    caption: 'For professionals',
+    monthlyPrice: '$59',
+    yearlyPrice: '$49',
+    monthlyNote: 'Billed monthly',
+    yearlyNote: 'Billed $588 annually',
+    features: [
+      'Everything in Plus, and:',
+      'Unlimited team members',
+      'Advanced components',
+      'Priority support',
+      'Unlimited storage',
+    ],
+  },
+];
+
+export function PricingPreview(): React.ReactElement {
+  const [billing, setBilling] = React.useState<BillingCycle>('yearly');
+
+  return (
+    <div className="theme-studio__pricing-shell">
+      <Flex vertical className="theme-studio__pricing-stage">
+        <Flex vertical align="center" className="theme-studio__pricing-intro">
+          <h2 className="theme-studio__pricing-title">Pricing</h2>
+          <Text className="theme-studio__pricing-subtitle">Check out our affordable pricing plans</Text>
+          <Flex gap="sm" align='center'>
+            <span className={billing === 'monthly' ? 'theme-studio__pricing-switch-label theme-studio__pricing-switch-label_active' : 'theme-studio__pricing-switch-label'}>
+              Monthly
+            </span>
+            <Switch
+              checked={billing === 'yearly'}
+              onChange={(checked) => setBilling(checked ? 'yearly' : 'monthly')}
+            />
+            <span className={billing === 'yearly' ? 'theme-studio__pricing-switch-label theme-studio__pricing-switch-label_active' : 'theme-studio__pricing-switch-label'}>
+              Yearly
+            </span>
+          </Flex>
+        </Flex>
+
+        <div className="theme-studio__pricing-grid">
+          {plans.map((plan) => {
+            const price = billing === 'yearly' ? plan.yearlyPrice : plan.monthlyPrice;
+            const note = billing === 'yearly' ? plan.yearlyNote : plan.monthlyNote;
+
+            return (
+              <Card key={plan.name} className="theme-studio__pricing-card">
+                <Card.Content>
+                  <Flex vertical className="theme-studio__pricing-card-content">
+                    <div>
+                      <h3 className="theme-studio__pricing-plan">{plan.name}</h3>
+                      <Text className="theme-studio__pricing-caption">{plan.caption}</Text>
+                    </div>
+
+                    <div className="theme-studio__pricing-price-block">
+                      <div className="theme-studio__pricing-price">{price}</div>
+                      <Text className="theme-studio__pricing-note">{note}</Text>
+                    </div>
+
+                    <div className="theme-studio__pricing-divider" />
+
+                    <ul className="theme-studio__pricing-features">
+                      {plan.features.map((feature) => (
+                        <li key={feature} className="theme-studio__pricing-feature">
+                          <IconCheckCircle size={16} className="theme-studio__pricing-feature-icon" />
+                          <Text className={feature === 'Everything in Plus, and:' ? 'theme-studio__pricing-feature-text theme-studio__pricing-feature-text_strong' : 'theme-studio__pricing-feature-text'}>
+                            {feature}
+                          </Text>
+                        </li>
+                      ))}
+                    </ul>
+
+                    <Button variant="solid" color="primary" size="lg" className="theme-studio__pricing-action">
+                      Purchase
+                      <IconArrowRight size={16} />
+                    </Button>
+                  </Flex>
+                </Card.Content>
+              </Card>
+            );
+          })}
+        </div>
+      </Flex>
+    </div>
+  );
+}
diff --git a/apps/docs/src/containers/theme-studio/runtime-presets.ts b/apps/docs/src/containers/theme-studio/runtime-presets.ts
index 346d2f903..371b3a161 100644
--- a/apps/docs/src/containers/theme-studio/runtime-presets.ts
+++ b/apps/docs/src/containers/theme-studio/runtime-presets.ts
@@ -18,15 +18,20 @@ function buildPresetDescription(source: TweakcnRuntimePresetSource): string {
     : 'Imported from tweakcn runtime preset.';
 }
 
-function readRuntimeStyle(styles: RuntimeStyles, key: string, fallbackStyles?: RuntimeStyles): string | undefined {
+function readRuntimeStyle(
+  styles: RuntimeStyles,
+  key: string,
+  fallbackStyles?: RuntimeStyles
+): string | undefined {
   return styles[key] ?? fallbackStyles?.[key];
 }
 
 function mapRuntimeStylesToFields(
   styles: RuntimeStyles,
-  typographyFallbackStyles?: RuntimeStyles,
+  typographyFallbackStyles?: RuntimeStyles
 ): Partial<ThemeEditorFields> {
-  const radius = styles.radius ?? DEFAULT_FIELDS.radius;
+  const radius =
+    readRuntimeStyle(styles, 'radius', typographyFallbackStyles) ?? DEFAULT_FIELDS.radius;
   const ring = styles.ring ?? styles.primary ?? DEFAULT_FIELDS.ring;
   const statusPalette = deriveStatusPalette(styles);
 
@@ -64,16 +69,23 @@ function mapRuntimeStylesToFields(
     sidebar: styles.sidebar ?? DEFAULT_FIELDS.sidebar,
     sidebarForeground: styles['sidebar-foreground'] ?? DEFAULT_FIELDS.sidebarForeground,
     sidebarPrimary: styles['sidebar-primary'] ?? DEFAULT_FIELDS.sidebarPrimary,
-    sidebarPrimaryForeground: styles['sidebar-primary-foreground'] ?? DEFAULT_FIELDS.sidebarPrimaryForeground,
+    sidebarPrimaryForeground:
+      styles['sidebar-primary-foreground'] ?? DEFAULT_FIELDS.sidebarPrimaryForeground,
     sidebarAccent: styles['sidebar-accent'] ?? DEFAULT_FIELDS.sidebarAccent,
-    sidebarAccentForeground: styles['sidebar-accent-foreground'] ?? DEFAULT_FIELDS.sidebarAccentForeground,
+    sidebarAccentForeground:
+      styles['sidebar-accent-foreground'] ?? DEFAULT_FIELDS.sidebarAccentForeground,
     sidebarBorder: styles['sidebar-border'] ?? DEFAULT_FIELDS.sidebarBorder,
     sidebarRing: styles['sidebar-ring'] ?? DEFAULT_FIELDS.sidebarRing,
-    fontSans: readRuntimeStyle(styles, 'font-sans', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontSans,
-    fontMono: readRuntimeStyle(styles, 'font-mono', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontMono,
-    letterSpacing: readRuntimeStyle(styles, 'letter-spacing', typographyFallbackStyles) ?? DEFAULT_FIELDS.letterSpacing,
+    fontSans:
+      readRuntimeStyle(styles, 'font-sans', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontSans,
+    fontMono:
+      readRuntimeStyle(styles, 'font-mono', typographyFallbackStyles) ?? DEFAULT_FIELDS.fontMono,
+    letterSpacing:
+      readRuntimeStyle(styles, 'letter-spacing', typographyFallbackStyles) ??
+      DEFAULT_FIELDS.letterSpacing,
     radius,
-    shadowCard: buildShadow(styles),
+    shadowControl: buildShadow(styles, DEFAULT_FIELDS.shadowControl),
+    shadowCard: buildShadow(styles, DEFAULT_FIELDS.shadowCard),
     shadowFocus: `0 0 0 3px ${toRgba(ring, 0.24)}`,
     buttonRadius: radius,
     inputRadius: radius,
@@ -98,26 +110,15 @@ function buildPresetFromRuntimeSource(source: TweakcnRuntimePresetSource): Theme
       lightStyles.sidebar ?? DEFAULT_FIELDS.sidebar,
     ],
     drafts: {
-      light: createDraft(
-        source.id,
-        source.label,
-        'tweakcn',
-        'light',
-        lightFields,
-      ),
-      dark: createDraft(
-        source.id,
-        source.label,
-        'tweakcn',
-        'dark',
-        darkFields,
-      ),
+      light: createDraft(source.id, source.label, 'tweakcn', 'light', lightFields),
+      dark: createDraft(source.id, source.label, 'tweakcn', 'dark', darkFields),
     },
   };
 }
 
-export const THEME_EDITOR_PRESETS: ThemeEditorPreset[] =
-  TWEAKCN_RUNTIME_PRESET_SOURCES.map(buildPresetFromRuntimeSource);
+export const THEME_EDITOR_PRESETS: ThemeEditorPreset[] = TWEAKCN_RUNTIME_PRESET_SOURCES.map(
+  buildPresetFromRuntimeSource
+);
 
 export function getPresetById(presetId: string): ThemeEditorPreset {
   return THEME_EDITOR_PRESETS.find((preset) => preset.id === presetId) ?? THEME_EDITOR_PRESETS[0];
diff --git a/apps/docs/src/containers/theme-studio/sidebar-content.tsx b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
index ba106fa1e..7637789f9 100644
--- a/apps/docs/src/containers/theme-studio/sidebar-content.tsx
+++ b/apps/docs/src/containers/theme-studio/sidebar-content.tsx
@@ -1,13 +1,45 @@
 import React from 'react';
 import { Collapse, Select, Text } from '@tiny-design/react';
 import { COLOR_GROUPS, CORE_COLOR_GROUP_TITLES, FONT_OPTIONS, MONO_OPTIONS } from './editor-config';
-import { ColorField, SliderField, TextField } from './editor-fields';
-import type { FieldKey, ThemeEditorDraft, ThemeEditorSection, ThemeEditorColorGroup } from './types';
+import { ColorField, ShadowField, SliderField, TextField } from './editor-fields';
+import type {
+  FieldKey,
+  ThemeEditorDraft,
+  ThemeEditorSection,
+  ThemeEditorColorGroup,
+} from './types';
+
+const CONTROL_SHADOW_FALLBACK = {
+  color: 'oklch(0 0 0)',
+  opacity: 0.1,
+  blur: 3,
+  spread: 0,
+  offsetX: 0,
+  offsetY: 1,
+};
+
+const CARD_SHADOW_FALLBACK = {
+  color: 'oklch(0 0 0)',
+  opacity: 0.1,
+  blur: 3,
+  spread: 0,
+  offsetX: 0,
+  offsetY: 1,
+};
+
+const FOCUS_SHADOW_FALLBACK = {
+  color: '#6e41bf',
+  opacity: 0.24,
+  blur: 0,
+  spread: 3,
+  offsetX: 0,
+  offsetY: 0,
+};
 
 function renderColorGroups(
   groups: ThemeEditorColorGroup[],
   draft: ThemeEditorDraft,
-  updateField: (key: FieldKey, value: string) => void,
+  updateField: (key: FieldKey, value: string) => void
 ): React.ReactElement[] {
   return groups.map((group) => (
     <div key={group.title} className="theme-studio__group-card">
@@ -38,7 +70,9 @@ export function ThemeStudioSidebarContent({
   updateField: (key: FieldKey, value: string) => void;
 }): React.ReactElement | null {
   const coreColorGroups = COLOR_GROUPS.filter((group) => CORE_COLOR_GROUP_TITLES.has(group.title));
-  const advancedColorGroups = COLOR_GROUPS.filter((group) => !CORE_COLOR_GROUP_TITLES.has(group.title));
+  const advancedColorGroups = COLOR_GROUPS.filter(
+    (group) => !CORE_COLOR_GROUP_TITLES.has(group.title)
+  );
 
   if (section === 'colors') {
     return (
@@ -46,9 +80,7 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-section">
           <div className="theme-studio__section-header">
             <Text strong>Core Colors</Text>
-            <Text type="secondary">
-              Start with brand, surfaces, feedback, and focus.
-            </Text>
+            <Text type="secondary">Start with brand, surfaces, feedback, and focus.</Text>
           </div>
           {renderColorGroups(coreColorGroups, draft, updateField)}
         </div>
@@ -62,12 +94,10 @@ export function ThemeStudioSidebarContent({
                 {
                   key: 'advanced-colors',
                   label: (
-                  <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Text strong>Advanced Tokens</Text>
-                    <Text type="secondary">
-                      Card, popover, sidebar, chart.
-                    </Text>
-                  </div>
+                    <div className="theme-studio__section-header theme-studio__section-header_inline">
+                      <Text strong>Advanced Tokens</Text>
+                      <Text type="secondary">Card, popover, sidebar, chart.</Text>
+                    </div>
                   ),
                   children: renderColorGroups(advancedColorGroups, draft, updateField),
                 },
@@ -108,12 +138,18 @@ export function ThemeStudioSidebarContent({
         <div className="theme-studio__group-card">
           <Text strong>Font Family</Text>
           <div className="theme-studio__type-preview-card">
-            <strong style={{ fontFamily: draft.fields.fontSans }}>The quick brown fox jumps over the lazy dog.</strong>
-            <code style={{ fontFamily: draft.fields.fontMono }}>const theme = &#123; mode: &quot;{draft.mode}&quot; &#125;</code>
+            <strong style={{ fontFamily: draft.fields.fontSans }}>
+              The quick brown fox jumps over the lazy dog.
+            </strong>
+            <code style={{ fontFamily: draft.fields.fontMono }}>
+              const theme = &#123; mode: &quot;{draft.mode}&quot; &#125;
+            </code>
           </div>
           <label className="theme-studio__field">
             <span className="theme-studio__field-label">Sans Preset</span>
-            <Select value={draft.fields.fontSans} onChange={(value) => updateField('fontSans', String(value))}>
+            <Select
+              value={draft.fields.fontSans}
+              onChange={(value) => updateField('fontSans', String(value))}>
               {FONT_OPTIONS.map((font) => (
                 <Select.Option key={font} value={font}>
                   {font.split(',')[0].replaceAll('"', '')}
@@ -121,10 +157,16 @@ export function ThemeStudioSidebarContent({
               ))}
             </Select>
           </label>
-          <TextField label="Custom Sans Stack" value={draft.fields.fontSans} onChange={(next) => updateField('fontSans', next)} />
+          <TextField
+            label="Custom Sans Stack"
+            value={draft.fields.fontSans}
+            onChange={(next) => updateField('fontSans', next)}
+          />
           <label className="theme-studio__field">
             <span className="theme-studio__field-label">Mono Preset</span>
-            <Select value={draft.fields.fontMono} onChange={(value) => updateField('fontMono', String(value))}>
+            <Select
+              value={draft.fields.fontMono}
+              onChange={(value) => updateField('fontMono', String(value))}>
               {MONO_OPTIONS.map((font) => (
                 <Select.Option key={font} value={font}>
                   {font.split(',')[0].replaceAll('"', '')}
@@ -132,23 +174,61 @@ export function ThemeStudioSidebarContent({
               ))}
             </Select>
           </label>
-          <TextField label="Custom Mono Stack" value={draft.fields.fontMono} onChange={(next) => updateField('fontMono', next)} />
+          <TextField
+            label="Custom Mono Stack"
+            value={draft.fields.fontMono}
+            onChange={(next) => updateField('fontMono', next)}
+          />
         </div>
 
         <div className="theme-studio__group-card">
           <Text strong>Type Scale</Text>
-          <SliderField label="Base Font Size" value={draft.fields.fontSizeBase} onChange={(next) => updateField('fontSizeBase', next)} config={{ min: 12, max: 20, step: 1, unit: 'px' }} />
-          <SliderField label="Line Height" value={draft.fields.lineHeightBase} onChange={(next) => updateField('lineHeightBase', next)} config={{ min: 1.1, max: 2, step: 0.05 }} />
-          <SliderField label="H1 Size" value={draft.fields.h1Size} onChange={(next) => updateField('h1Size', next)} config={{ min: 28, max: 64, step: 1, unit: 'px' }} />
-          <SliderField label="H2 Size" value={draft.fields.h2Size} onChange={(next) => updateField('h2Size', next)} config={{ min: 22, max: 48, step: 1, unit: 'px' }} />
+          <SliderField
+            label="Base Font Size"
+            value={draft.fields.fontSizeBase}
+            onChange={(next) => updateField('fontSizeBase', next)}
+            config={{ min: 12, max: 20, step: 1, unit: 'px' }}
+          />
+          <SliderField
+            label="Line Height"
+            value={draft.fields.lineHeightBase}
+            onChange={(next) => updateField('lineHeightBase', next)}
+            config={{ min: 1.1, max: 2, step: 0.05 }}
+          />
+          <SliderField
+            label="H1 Size"
+            value={draft.fields.h1Size}
+            onChange={(next) => updateField('h1Size', next)}
+            config={{ min: 28, max: 64, step: 1, unit: 'px' }}
+          />
+          <SliderField
+            label="H2 Size"
+            value={draft.fields.h2Size}
+            onChange={(next) => updateField('h2Size', next)}
+            config={{ min: 22, max: 48, step: 1, unit: 'px' }}
+          />
         </div>
 
         <div className="theme-studio__group-card">
           <Text strong>Fine Tuning</Text>
-          <SliderField label="Letter Spacing" value={draft.fields.letterSpacing} onChange={(next) => updateField('letterSpacing', next)} config={{ min: -0.08, max: 0.08, step: 0.01, unit: 'em' }} />
+          <SliderField
+            label="Letter Spacing"
+            value={draft.fields.letterSpacing}
+            onChange={(next) => updateField('letterSpacing', next)}
+            config={{ min: -0.08, max: 0.08, step: 0.01, unit: 'em' }}
+          />
           <div className="theme-studio__type-preview-lines">
-            <span style={{ fontSize: draft.fields.h1Size, letterSpacing: draft.fields.letterSpacing }}>Heading Preview</span>
-            <span style={{ fontSize: draft.fields.fontSizeBase, lineHeight: draft.fields.lineHeightBase }}>Body copy reflects base scale and rhythm.</span>
+            <span
+              style={{ fontSize: draft.fields.h1Size, letterSpacing: draft.fields.letterSpacing }}>
+              Heading Preview
+            </span>
+            <span
+              style={{
+                fontSize: draft.fields.fontSizeBase,
+                lineHeight: draft.fields.lineHeightBase,
+              }}>
+              Body copy reflects base scale and rhythm.
+            </span>
           </div>
         </div>
       </div>
@@ -187,10 +267,30 @@ export function ThemeStudioSidebarContent({
 
         <div className="theme-studio__group-card">
           <Text strong>Shape</Text>
-          <SliderField label="Global Radius" value={draft.fields.radius} onChange={(next) => updateField('radius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
-          <SliderField label="Button Radius" value={draft.fields.buttonRadius} onChange={(next) => updateField('buttonRadius', next)} config={{ min: 0, max: 4, step: 0.0625, unit: 'rem' }} />
-          <SliderField label="Input Radius" value={draft.fields.inputRadius} onChange={(next) => updateField('inputRadius', next)} config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }} />
-          <SliderField label="Card Radius" value={draft.fields.cardRadius} onChange={(next) => updateField('cardRadius', next)} config={{ min: 0, max: 2.5, step: 0.0625, unit: 'rem' }} />
+          <SliderField
+            label="Global Radius"
+            value={draft.fields.radius}
+            onChange={(next) => updateField('radius', next)}
+            config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }}
+          />
+          <SliderField
+            label="Button Radius"
+            value={draft.fields.buttonRadius}
+            onChange={(next) => updateField('buttonRadius', next)}
+            config={{ min: 0, max: 4, step: 0.0625, unit: 'rem' }}
+          />
+          <SliderField
+            label="Input Radius"
+            value={draft.fields.inputRadius}
+            onChange={(next) => updateField('inputRadius', next)}
+            config={{ min: 0, max: 2, step: 0.0625, unit: 'rem' }}
+          />
+          <SliderField
+            label="Card Radius"
+            value={draft.fields.cardRadius}
+            onChange={(next) => updateField('cardRadius', next)}
+            config={{ min: 0, max: 2.5, step: 0.0625, unit: 'rem' }}
+          />
         </div>
 
         <div className="theme-studio__group-card">
@@ -200,8 +300,18 @@ export function ThemeStudioSidebarContent({
           </div>
           <div className="theme-studio__group-fields">
             <Text className="theme-studio__subgroup-title">Fields</Text>
-            <SliderField label="Field Height / Medium" value={draft.fields.fieldHeightMd} onChange={(next) => updateField('fieldHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-            <SliderField label="Field Padding / Medium" value={draft.fields.fieldPaddingMd} onChange={(next) => updateField('fieldPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+            <SliderField
+              label="Field Height / Medium"
+              value={draft.fields.fieldHeightMd}
+              onChange={(next) => updateField('fieldHeightMd', next)}
+              config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+            />
+            <SliderField
+              label="Field Padding / Medium"
+              value={draft.fields.fieldPaddingMd}
+              onChange={(next) => updateField('fieldPaddingMd', next)}
+              config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+            />
             <Collapse
               bordered={false}
               className="theme-studio__advanced-collapse"
@@ -210,17 +320,37 @@ export function ThemeStudioSidebarContent({
                 {
                   key: 'field-density-advanced',
                   label: (
-                  <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Text strong>Advanced Sizes</Text>
-                    <Text type="secondary">Small and large field density.</Text>
-                  </div>
+                    <div className="theme-studio__section-header theme-studio__section-header_inline">
+                      <Text strong>Advanced Sizes</Text>
+                      <Text type="secondary">Small and large field density.</Text>
+                    </div>
                   ),
                   children: (
                     <>
-                      <SliderField label="Field Height / Small" value={draft.fields.fieldHeightSm} onChange={(next) => updateField('fieldHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-                      <SliderField label="Field Height / Large" value={draft.fields.fieldHeightLg} onChange={(next) => updateField('fieldHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-                      <SliderField label="Field Padding / Small" value={draft.fields.fieldPaddingSm} onChange={(next) => updateField('fieldPaddingSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-                      <SliderField label="Field Padding / Large" value={draft.fields.fieldPaddingLg} onChange={(next) => updateField('fieldPaddingLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+                      <SliderField
+                        label="Field Height / Small"
+                        value={draft.fields.fieldHeightSm}
+                        onChange={(next) => updateField('fieldHeightSm', next)}
+                        config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Field Height / Large"
+                        value={draft.fields.fieldHeightLg}
+                        onChange={(next) => updateField('fieldHeightLg', next)}
+                        config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Field Padding / Small"
+                        value={draft.fields.fieldPaddingSm}
+                        onChange={(next) => updateField('fieldPaddingSm', next)}
+                        config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Field Padding / Large"
+                        value={draft.fields.fieldPaddingLg}
+                        onChange={(next) => updateField('fieldPaddingLg', next)}
+                        config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+                      />
                     </>
                   ),
                 },
@@ -230,8 +360,18 @@ export function ThemeStudioSidebarContent({
 
           <div className="theme-studio__group-fields">
             <Text className="theme-studio__subgroup-title">Buttons</Text>
-            <SliderField label="Button Height / Medium" value={draft.fields.buttonHeightMd} onChange={(next) => updateField('buttonHeightMd', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-            <SliderField label="Button Padding / Medium" value={draft.fields.buttonPaddingMd} onChange={(next) => updateField('buttonPaddingMd', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+            <SliderField
+              label="Button Height / Medium"
+              value={draft.fields.buttonHeightMd}
+              onChange={(next) => updateField('buttonHeightMd', next)}
+              config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+            />
+            <SliderField
+              label="Button Padding / Medium"
+              value={draft.fields.buttonPaddingMd}
+              onChange={(next) => updateField('buttonPaddingMd', next)}
+              config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+            />
             <Collapse
               bordered={false}
               className="theme-studio__advanced-collapse"
@@ -240,17 +380,37 @@ export function ThemeStudioSidebarContent({
                 {
                   key: 'button-density-advanced',
                   label: (
-                  <div className="theme-studio__section-header theme-studio__section-header_inline">
-                    <Text strong>Advanced Sizes</Text>
-                    <Text type="secondary">Small and large button density.</Text>
-                  </div>
+                    <div className="theme-studio__section-header theme-studio__section-header_inline">
+                      <Text strong>Advanced Sizes</Text>
+                      <Text type="secondary">Small and large button density.</Text>
+                    </div>
                   ),
                   children: (
                     <>
-                      <SliderField label="Button Height / Small" value={draft.fields.buttonHeightSm} onChange={(next) => updateField('buttonHeightSm', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-                      <SliderField label="Button Height / Large" value={draft.fields.buttonHeightLg} onChange={(next) => updateField('buttonHeightLg', next)} config={{ min: 20, max: 56, step: 1, unit: 'px' }} />
-                      <SliderField label="Button Padding / Small" value={draft.fields.buttonPaddingSm} onChange={(next) => updateField('buttonPaddingSm', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
-                      <SliderField label="Button Padding / Large" value={draft.fields.buttonPaddingLg} onChange={(next) => updateField('buttonPaddingLg', next)} config={{ min: 0, max: 32, step: 1, unit: 'px' }} />
+                      <SliderField
+                        label="Button Height / Small"
+                        value={draft.fields.buttonHeightSm}
+                        onChange={(next) => updateField('buttonHeightSm', next)}
+                        config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Button Height / Large"
+                        value={draft.fields.buttonHeightLg}
+                        onChange={(next) => updateField('buttonHeightLg', next)}
+                        config={{ min: 20, max: 56, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Button Padding / Small"
+                        value={draft.fields.buttonPaddingSm}
+                        onChange={(next) => updateField('buttonPaddingSm', next)}
+                        config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+                      />
+                      <SliderField
+                        label="Button Padding / Large"
+                        value={draft.fields.buttonPaddingLg}
+                        onChange={(next) => updateField('buttonPaddingLg', next)}
+                        config={{ min: 0, max: 32, step: 1, unit: 'px' }}
+                      />
                     </>
                   ),
                 },
@@ -260,18 +420,40 @@ export function ThemeStudioSidebarContent({
 
           <div className="theme-studio__group-fields">
             <Text className="theme-studio__subgroup-title">Cards</Text>
-            <SliderField label="Card Padding" value={draft.fields.cardPadding} onChange={(next) => updateField('cardPadding', next)} config={{ min: 12, max: 40, step: 1, unit: 'px' }} />
+            <SliderField
+              label="Card Padding"
+              value={draft.fields.cardPadding}
+              onChange={(next) => updateField('cardPadding', next)}
+              config={{ min: 12, max: 40, step: 1, unit: 'px' }}
+            />
           </div>
         </div>
 
         <div className="theme-studio__group-card">
           <Text strong>Elevation & Focus</Text>
           <div className="theme-studio__surface-preview-card">
+            <div className="theme-studio__control-proxy">Control Surface</div>
             <div className="theme-studio__surface-proxy">Card Surface</div>
             <div className="theme-studio__focus-proxy">Focus Ring</div>
           </div>
-          <TextField label="Card Shadow" value={draft.fields.shadowCard} multiline onChange={(next) => updateField('shadowCard', next)} />
-          <TextField label="Focus Shadow" value={draft.fields.shadowFocus} multiline onChange={(next) => updateField('shadowFocus', next)} />
+          <ShadowField
+            label="Control Shadow"
+            value={draft.fields.shadowControl}
+            fallback={CONTROL_SHADOW_FALLBACK}
+            onChange={(next) => updateField('shadowControl', next)}
+          />
+          <ShadowField
+            label="Card Shadow"
+            value={draft.fields.shadowCard}
+            fallback={CARD_SHADOW_FALLBACK}
+            onChange={(next) => updateField('shadowCard', next)}
+          />
+          <ShadowField
+            label="Focus Shadow"
+            value={draft.fields.shadowFocus}
+            fallback={FOCUS_SHADOW_FALLBACK}
+            onChange={(next) => updateField('shadowFocus', next)}
+          />
         </div>
       </div>
     );
diff --git a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
index 765342491..d7a92cf5f 100644
--- a/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
+++ b/apps/docs/src/containers/theme-studio/theme-document-adapter.ts
@@ -30,6 +30,15 @@ function normalizeImportedThemeDocument(theme: ThemeDocument): ThemeDocument {
   return validation.normalizedDocument as ThemeDocument;
 }
 
+function combineShadowValues(...values: Array<string | undefined>): string {
+  return (
+    values
+      .map((value) => value?.trim())
+      .filter((value): value is string => Boolean(value) && value !== 'none')
+      .join(', ') || 'none'
+  );
+}
+
 export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocument {
   const { fields } = draft;
   const primaryHover = tintColor(fields.primary, draft.mode === 'dark' ? 0.12 : 0.08);
@@ -37,9 +46,21 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
   const primarySurface = toRgba(fields.primary, draft.mode === 'dark' ? 0.16 : 0.08);
   const primarySurfaceActive = toRgba(fields.primary, draft.mode === 'dark' ? 0.28 : 0.18);
   const defaultHover = softenSurface(fields.muted, draft.mode, draft.mode === 'dark' ? 0.1 : 0.06);
-  const defaultActive = softenSurface(fields.muted, draft.mode, draft.mode === 'dark' ? 0.18 : 0.12);
-  const defaultBorderHover = softenSurface(fields.border, draft.mode, draft.mode === 'dark' ? 0.16 : 0.12);
-  const defaultBorderActive = softenSurface(fields.border, draft.mode, draft.mode === 'dark' ? 0.24 : 0.18);
+  const defaultActive = softenSurface(
+    fields.muted,
+    draft.mode,
+    draft.mode === 'dark' ? 0.18 : 0.12
+  );
+  const defaultBorderHover = softenSurface(
+    fields.border,
+    draft.mode,
+    draft.mode === 'dark' ? 0.16 : 0.12
+  );
+  const defaultBorderActive = softenSurface(
+    fields.border,
+    draft.mode,
+    draft.mode === 'dark' ? 0.24 : 0.18
+  );
   const infoHover = tintColor(fields.info, draft.mode === 'dark' ? 0.12 : 0.08);
   const infoActive = tintColor(fields.info, draft.mode === 'dark' ? 0.2 : 0.16);
   const successHover = tintColor(fields.success, draft.mode === 'dark' ? 0.12 : 0.08);
@@ -48,6 +69,7 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
   const warningActive = tintColor(fields.warning, draft.mode === 'dark' ? 0.2 : 0.16);
   const dangerHover = tintColor(fields.danger, draft.mode === 'dark' ? 0.12 : 0.08);
   const dangerActive = tintColor(fields.danger, draft.mode === 'dark' ? 0.2 : 0.16);
+  const controlFocusShadow = combineShadowValues(fields.shadowControl, fields.shadowFocus);
 
   return {
     meta: {
@@ -117,6 +139,7 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'h1-font-size': fields.h1Size,
         'h2-font-size': fields.h2Size,
         'border-radius': fields.radius,
+        'shadow-control': fields.shadowControl,
         'shadow-card': fields.shadowCard,
         'shadow-focus': fields.shadowFocus,
         'control.height.sm': fields.fieldHeightSm,
@@ -127,19 +150,39 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'control.padding-inline.lg': fields.fieldPaddingLg,
       },
       components: {
-        'button.bg.primary': fields.primary,
-        'button.bg.primary-hover': primaryHover,
-        'button.bg.primary-active': primaryActive,
-        'button.text.primary': fields.primaryForeground,
-        'button.bg.default': fields.muted,
-        'button.bg.default-hover': defaultHover,
-        'button.bg.default-active': defaultActive,
-        'button.border.default': fields.border,
-        'button.border.default-hover': defaultBorderHover,
-        'button.border.default-active': defaultBorderActive,
-        'button.text.default': fields.baseForeground,
-        'button.text.default-hover': fields.baseForeground,
-        'button.text.default-active': fields.baseForeground,
+        'button.solid.primary.bg': fields.primary,
+        'button.solid.primary.bg-hover': primaryHover,
+        'button.solid.primary.bg-active': primaryActive,
+        'button.solid.primary.border': fields.primary,
+        'button.solid.primary.border-hover': primaryHover,
+        'button.solid.primary.border-active': primaryActive,
+        'button.solid.primary.text': fields.primaryForeground,
+        'button.solid.primary.text-hover': fields.primaryForeground,
+        'button.solid.primary.text-active': fields.primaryForeground,
+        'button.solid.default.bg': fields.muted,
+        'button.solid.default.bg-hover': defaultHover,
+        'button.solid.default.bg-active': defaultActive,
+        'button.solid.default.border': fields.border,
+        'button.solid.default.border-hover': defaultBorderHover,
+        'button.solid.default.border-active': defaultBorderActive,
+        'button.solid.default.text': fields.baseForeground,
+        'button.solid.default.text-hover': fields.baseForeground,
+        'button.solid.default.text-active': fields.baseForeground,
+        'button.outline.default.bg': fields.base,
+        'button.outline.default.bg-hover': defaultHover,
+        'button.outline.default.bg-active': defaultActive,
+        'button.outline.default.border': fields.border,
+        'button.outline.default.border-hover': defaultBorderHover,
+        'button.outline.default.border-active': defaultBorderActive,
+        'button.outline.default.text': fields.baseForeground,
+        'button.outline.default.text-hover': fields.baseForeground,
+        'button.outline.default.text-active': fields.baseForeground,
+        'button.solid.default.shadow': fields.shadowControl,
+        'button.solid.default.shadow-hover': fields.shadowControl,
+        'button.solid.default.shadow-active': fields.shadowControl,
+        'button.outline.default.shadow': fields.shadowControl,
+        'button.outline.default.shadow-hover': fields.shadowControl,
+        'button.outline.default.shadow-active': fields.shadowControl,
         'button.radius': fields.buttonRadius,
         'button.height.sm': fields.buttonHeightSm,
         'button.height.md': fields.buttonHeightMd,
@@ -159,9 +202,10 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'input.bg': fields.base,
         'input.color': fields.baseForeground,
         'input.border': fields.input,
+        'input.shadow': fields.shadowControl,
         'input.border.hover': fields.ring,
         'input.border.focus': fields.ring,
-        'input.shadow.focus': fields.shadowFocus,
+        'input.shadow.focus': controlFocusShadow,
         'input.radius': fields.inputRadius,
         'input.height.sm': fields.fieldHeightSm,
         'input.height.md': fields.fieldHeightMd,
@@ -172,9 +216,10 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'select.bg': fields.base,
         'select.color': fields.baseForeground,
         'select.border': fields.input,
+        'select.shadow': fields.shadowControl,
         'select.border.hover': fields.ring,
         'select.border.focus': fields.ring,
-        'select.shadow.focus': fields.shadowFocus,
+        'select.shadow.focus': controlFocusShadow,
         'select.radius': fields.inputRadius,
         'select.height.sm': fields.fieldHeightSm,
         'select.height.md': fields.fieldHeightMd,
@@ -190,7 +235,7 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'picker.input-border': fields.input,
         'picker.input-border-hover': fields.ring,
         'picker.input-border-focus': fields.ring,
-        'picker.input-shadow-focus': fields.shadowFocus,
+        'picker.input-shadow-focus': controlFocusShadow,
         'picker.input-color': fields.baseForeground,
         'picker.input-color-placeholder': fields.mutedForeground,
         'picker.input-color-muted': fields.mutedForeground,
@@ -270,7 +315,7 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'cascader.border': fields.input,
         'cascader.border-hover': fields.ring,
         'cascader.border-focus': fields.ring,
-        'cascader.shadow-focus': fields.shadowFocus,
+        'cascader.shadow-focus': controlFocusShadow,
         'cascader.radius': fields.inputRadius,
         'cascader.padding.sm': `0 calc(${fields.fieldPaddingSm} + 20px) 0 ${fields.fieldPaddingSm}`,
         'cascader.padding.md': `0 calc(${fields.fieldPaddingMd} + 20px) 0 ${fields.fieldPaddingMd}`,
@@ -279,10 +324,11 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'native-select.border': fields.input,
         'native-select.border-hover': fields.ring,
         'native-select.border-focus': fields.ring,
-        'native-select.shadow-focus': fields.shadowFocus,
+        'native-select.shadow-focus': controlFocusShadow,
         'native-select.radius': fields.inputRadius,
         'checkbox.bg': fields.base,
         'checkbox.border': fields.input,
+        'checkbox.shadow': fields.shadowControl,
         'checkbox.border.hover': fields.ring,
         'checkbox.radius': fields.radius,
         'checkbox.bg.checked': fields.primary,
@@ -290,6 +336,7 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
         'checkbox.indicator-color': fields.primaryForeground,
         'radio.bg': fields.base,
         'radio.border': fields.input,
+        'radio.shadow': fields.shadowControl,
         'radio.border.checked': fields.primary,
         'radio.dot-bg': fields.primary,
         'switch.bg': fields.mutedForeground,
@@ -342,7 +389,11 @@ export function buildThemeDocumentFromDraft(draft: ThemeEditorDraft): ThemeDocum
   };
 }
 
-function readToken(theme: ThemeDocument, semanticKey: string, componentKey?: string): string | undefined {
+function readToken(
+  theme: ThemeDocument,
+  semanticKey: string,
+  componentKey?: string
+): string | undefined {
   const semantic = theme.tokens?.semantic?.[semanticKey];
   if (semantic != null) return String(semantic);
 
@@ -354,7 +405,11 @@ function readToken(theme: ThemeDocument, semanticKey: string, componentKey?: str
   return undefined;
 }
 
-function readComponentFirst(theme: ThemeDocument, componentKey: string, semanticKey?: string): string | undefined {
+function readComponentFirst(
+  theme: ThemeDocument,
+  componentKey: string,
+  semanticKey?: string
+): string | undefined {
   const component = theme.tokens?.components?.[componentKey];
   if (component != null) return String(component);
 
@@ -384,9 +439,22 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
     fields: {
       ...baseFields,
       primary: readToken(normalizedTheme, 'color-primary') ?? baseFields.primary,
-      primaryForeground: readComponentFirst(normalizedTheme, 'button.text.primary') ?? baseFields.primaryForeground,
-      secondary: readToken(normalizedTheme, 'color-fill', 'button.bg.default') ?? baseFields.secondary,
-      secondaryForeground: readToken(normalizedTheme, 'color-text', 'button.text.default') ?? baseFields.secondaryForeground,
+      primaryForeground:
+        readComponentFirst(normalizedTheme, 'button.solid.primary.text') ??
+        readComponentFirst(normalizedTheme, 'button.text.primary') ??
+        baseFields.primaryForeground,
+      secondary:
+        readComponentFirst(normalizedTheme, 'card.bg.filled') ??
+        readComponentFirst(normalizedTheme, 'table.header-bg') ??
+        readComponentFirst(normalizedTheme, 'tag.bg') ??
+        readToken(normalizedTheme, 'color-fill', 'button.solid.default.bg') ??
+        readToken(normalizedTheme, 'color-fill', 'button.bg.default') ??
+        baseFields.secondary,
+      secondaryForeground:
+        readComponentFirst(normalizedTheme, 'tag.color') ??
+        readToken(normalizedTheme, 'color-text', 'button.solid.default.text') ??
+        readToken(normalizedTheme, 'color-text', 'button.text.default') ??
+        baseFields.secondaryForeground,
       accent: readToken(normalizedTheme, 'color-primary-bg') ?? baseFields.accent,
       success: readToken(normalizedTheme, 'color-success') ?? baseFields.success,
       info: readToken(normalizedTheme, 'color-info') ?? baseFields.info,
@@ -395,10 +463,13 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
       base: readToken(normalizedTheme, 'color-bg') ?? baseFields.base,
       baseForeground: readToken(normalizedTheme, 'color-text') ?? baseFields.baseForeground,
       card: readToken(normalizedTheme, 'color-bg-container', 'card.bg') ?? baseFields.card,
-      cardForeground: readToken(normalizedTheme, 'color-text-heading', 'card.header-color') ?? baseFields.cardForeground,
+      cardForeground:
+        readToken(normalizedTheme, 'color-text-heading', 'card.header-color') ??
+        baseFields.cardForeground,
       popover: readToken(normalizedTheme, 'color-bg-elevated') ?? baseFields.popover,
       muted: readToken(normalizedTheme, 'color-bg-spotlight') ?? baseFields.muted,
-      mutedForeground: readToken(normalizedTheme, 'color-text-secondary') ?? baseFields.mutedForeground,
+      mutedForeground:
+        readToken(normalizedTheme, 'color-text-secondary') ?? baseFields.mutedForeground,
       border: readToken(normalizedTheme, 'color-border') ?? baseFields.border,
       input: readToken(normalizedTheme, 'color-border', 'input.border') ?? baseFields.input,
       ring: readToken(normalizedTheme, 'color-primary', 'input.border.focus') ?? baseFields.ring,
@@ -407,8 +478,11 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
       chart3: readToken(normalizedTheme, 'chart-3') ?? baseFields.chart3,
       chart4: readToken(normalizedTheme, 'chart-4') ?? baseFields.chart4,
       chart5: readToken(normalizedTheme, 'chart-5') ?? baseFields.chart5,
-      sidebar: readToken(normalizedTheme, 'color-bg-layout', 'layout.sidebar-bg') ?? baseFields.sidebar,
-      sidebarForeground: readToken(normalizedTheme, 'color-text', 'layout.sidebar-color') ?? baseFields.sidebarForeground,
+      sidebar:
+        readToken(normalizedTheme, 'color-bg-layout', 'layout.sidebar-bg') ?? baseFields.sidebar,
+      sidebarForeground:
+        readToken(normalizedTheme, 'color-text', 'layout.sidebar-color') ??
+        baseFields.sidebarForeground,
       fontSans: readToken(normalizedTheme, 'font-family') ?? baseFields.fontSans,
       fontMono: readToken(normalizedTheme, 'font-family-monospace') ?? baseFields.fontMono,
       fontSizeBase: readToken(normalizedTheme, 'font-size-base') ?? baseFields.fontSizeBase,
@@ -416,51 +490,76 @@ export function buildDraftFromThemeDocument(theme: ThemeDocument): ThemeEditorDr
       h1Size: readToken(normalizedTheme, 'h1-font-size') ?? baseFields.h1Size,
       h2Size: readToken(normalizedTheme, 'h2-font-size') ?? baseFields.h2Size,
       radius: readToken(normalizedTheme, 'border-radius') ?? baseFields.radius,
+      shadowControl:
+        readToken(normalizedTheme, 'shadow-control', 'input.shadow') ?? baseFields.shadowControl,
       shadowCard: readToken(normalizedTheme, 'shadow-card', 'card.shadow') ?? baseFields.shadowCard,
-      shadowFocus: readToken(normalizedTheme, 'shadow-focus', 'input.shadow.focus') ?? toRgba(baseFields.primary, 0.22),
-      buttonRadius: readToken(normalizedTheme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
-      inputRadius: readToken(normalizedTheme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
-      cardRadius: readToken(normalizedTheme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
+      shadowFocus: readToken(normalizedTheme, 'shadow-focus') ?? toRgba(baseFields.primary, 0.22),
+      buttonRadius:
+        readToken(normalizedTheme, 'border-radius', 'button.radius') ?? baseFields.buttonRadius,
+      inputRadius:
+        readToken(normalizedTheme, 'border-radius', 'input.radius') ?? baseFields.inputRadius,
+      cardRadius:
+        readToken(normalizedTheme, 'border-radius', 'card.radius') ?? baseFields.cardRadius,
       fieldPaddingSm:
-        readComponentFirst(normalizedTheme, 'input.padding-inline-sm', 'control.padding-inline.sm')
-        ?? baseFields.fieldPaddingSm,
+        readComponentFirst(
+          normalizedTheme,
+          'input.padding-inline-sm',
+          'control.padding-inline.sm'
+        ) ?? baseFields.fieldPaddingSm,
       fieldPaddingMd:
-        readComponentFirst(normalizedTheme, 'input.padding-inline-md', 'control.padding-inline.md')
-        ?? readToken(normalizedTheme, 'spacing-4')
-        ?? baseFields.fieldPaddingMd,
+        readComponentFirst(
+          normalizedTheme,
+          'input.padding-inline-md',
+          'control.padding-inline.md'
+        ) ??
+        readToken(normalizedTheme, 'spacing-4') ??
+        baseFields.fieldPaddingMd,
       fieldPaddingLg:
-        readComponentFirst(normalizedTheme, 'input.padding-inline-lg', 'control.padding-inline.lg')
-        ?? baseFields.fieldPaddingLg,
+        readComponentFirst(
+          normalizedTheme,
+          'input.padding-inline-lg',
+          'control.padding-inline.lg'
+        ) ?? baseFields.fieldPaddingLg,
       buttonPaddingSm:
-        readComponentFirst(normalizedTheme, 'button.padding-inline-sm', 'control.padding-inline.sm')
-        ?? baseFields.buttonPaddingSm,
+        readComponentFirst(
+          normalizedTheme,
+          'button.padding-inline-sm',
+          'control.padding-inline.sm'
+        ) ?? baseFields.buttonPaddingSm,
       buttonPaddingMd:
-        readComponentFirst(normalizedTheme, 'button.padding-inline-md', 'control.padding-inline.md')
-        ?? baseFields.buttonPaddingMd,
+        readComponentFirst(
+          normalizedTheme,
+          'button.padding-inline-md',
+          'control.padding-inline.md'
+        ) ?? baseFields.buttonPaddingMd,
       buttonPaddingLg:
-        readComponentFirst(normalizedTheme, 'button.padding-inline-lg', 'control.padding-inline.lg')
-        ?? baseFields.buttonPaddingLg,
+        readComponentFirst(
+          normalizedTheme,
+          'button.padding-inline-lg',
+          'control.padding-inline.lg'
+        ) ?? baseFields.buttonPaddingLg,
       fieldHeightSm:
-        readComponentFirst(normalizedTheme, 'input.height.sm', 'control.height.sm')
-        ?? baseFields.fieldHeightSm,
+        readComponentFirst(normalizedTheme, 'input.height.sm', 'control.height.sm') ??
+        baseFields.fieldHeightSm,
       fieldHeightMd:
-        readComponentFirst(normalizedTheme, 'input.height.md', 'control.height.md')
-        ?? readToken(normalizedTheme, 'height-md')
-        ?? baseFields.fieldHeightMd,
+        readComponentFirst(normalizedTheme, 'input.height.md', 'control.height.md') ??
+        readToken(normalizedTheme, 'height-md') ??
+        baseFields.fieldHeightMd,
       fieldHeightLg:
-        readComponentFirst(normalizedTheme, 'input.height.lg', 'control.height.lg')
-        ?? baseFields.fieldHeightLg,
+        readComponentFirst(normalizedTheme, 'input.height.lg', 'control.height.lg') ??
+        baseFields.fieldHeightLg,
       buttonHeightSm:
-        readComponentFirst(normalizedTheme, 'button.height.sm', 'control.height.sm')
-        ?? baseFields.buttonHeightSm,
+        readComponentFirst(normalizedTheme, 'button.height.sm', 'control.height.sm') ??
+        baseFields.buttonHeightSm,
       buttonHeightMd:
-        readComponentFirst(normalizedTheme, 'button.height.md', 'control.height.md')
-        ?? readToken(normalizedTheme, 'height-md')
-        ?? baseFields.buttonHeightMd,
+        readComponentFirst(normalizedTheme, 'button.height.md', 'control.height.md') ??
+        readToken(normalizedTheme, 'height-md') ??
+        baseFields.buttonHeightMd,
       buttonHeightLg:
-        readComponentFirst(normalizedTheme, 'button.height.lg', 'control.height.lg')
-        ?? baseFields.buttonHeightLg,
-      cardPadding: readToken(normalizedTheme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
+        readComponentFirst(normalizedTheme, 'button.height.lg', 'control.height.lg') ??
+        baseFields.buttonHeightLg,
+      cardPadding:
+        readToken(normalizedTheme, 'spacing-5', 'card.body-padding') ?? baseFields.cardPadding,
     },
   };
 }
@@ -472,7 +571,7 @@ export function createDefaultDraft(): ThemeEditorDraft {
 export function applyPresetToDraft(
   presetId: string,
   current?: ThemeEditorDraft,
-  modeOverride?: ThemeMode,
+  modeOverride?: ThemeMode
 ): ThemeEditorDraft {
   const draft = getPresetDraft(presetId, modeOverride ?? current?.mode ?? 'light');
 
diff --git a/apps/docs/src/containers/theme-studio/theme-studio.scss b/apps/docs/src/containers/theme-studio/theme-studio.scss
index ff9c824e4..0876ddd67 100644
--- a/apps/docs/src/containers/theme-studio/theme-studio.scss
+++ b/apps/docs/src/containers/theme-studio/theme-studio.scss
@@ -16,8 +16,16 @@
   border: 1px solid var(--ty-color-border-secondary, var(--ty-color-border));
   border-radius: 12px;
   background:
-    radial-gradient(circle at top right, color-mix(in srgb, var(--editor-primary), transparent 95%), transparent 22%),
-    linear-gradient(180deg, var(--ty-color-bg-container) 0%, color-mix(in srgb, var(--ty-color-fill), transparent 40%) 100%);
+    radial-gradient(
+      circle at top right,
+      color-mix(in srgb, var(--editor-primary), transparent 95%),
+      transparent 22%
+    ),
+    linear-gradient(
+      180deg,
+      var(--ty-color-bg-container) 0%,
+      color-mix(in srgb, var(--ty-color-fill), transparent 40%) 100%
+    );
   box-shadow: 0 6px 16px rgba(17, 24, 39, 0.03);
 }
 
@@ -52,8 +60,6 @@
 .theme-studio__code-head,
 .theme-studio__generate-actions,
 .theme-studio__code-actions,
-.theme-studio__mail-compose,
-.theme-studio__mail-toolbar,
 .theme-studio__metrics,
 .theme-studio__pill-row {
   display: flex;
@@ -288,6 +294,32 @@
   align-items: center;
 }
 
+.theme-studio__shadow-field {
+  margin-top: 10px;
+}
+
+.theme-studio__shadow-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.theme-studio__shadow-color-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.theme-studio__shadow-color-label,
+.theme-studio__shadow-metric-label {
+  font-size: 12px;
+  color: var(--ty-color-text-secondary, var(--ty-color-text));
+}
+
+.theme-studio__shadow-metric .theme-studio__field-row {
+  margin-bottom: 4px;
+}
+
 .theme-studio__pill {
   padding: 8px 12px;
   border-radius: 999px;
@@ -338,7 +370,11 @@
   padding: 9px;
   background:
     radial-gradient(circle at top, rgba(255, 255, 255, 0.6), transparent 30%),
-    linear-gradient(180deg, var(--editor-base) 0%, color-mix(in srgb, var(--editor-base), black 4%) 100%);
+    linear-gradient(
+      180deg,
+      var(--editor-base) 0%,
+      color-mix(in srgb, var(--editor-base), black 4%) 100%
+    );
   color: var(--editor-base-foreground);
   box-shadow: 0 30px 80px rgba(17, 24, 39, 0.08);
   font-family: var(--editor-font-sans);
@@ -350,7 +386,11 @@
 .theme-studio__preview_dark {
   background:
     radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 24%),
-    linear-gradient(180deg, var(--editor-base) 0%, color-mix(in srgb, var(--editor-base), black 10%) 100%);
+    linear-gradient(
+      180deg,
+      var(--editor-base) 0%,
+      color-mix(in srgb, var(--editor-base), black 10%) 100%
+    );
 }
 
 .theme-studio__metrics {
@@ -393,16 +433,6 @@
   color: var(--editor-muted-foreground);
 }
 
-.theme-studio__response-panel {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 6px;
-  padding: 7px;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--editor-card), var(--editor-base) 35%);
-  border: 1px solid var(--editor-border);
-  margin-bottom: 14px;
-}
-
 .theme-studio__advanced-collapse {
   margin-bottom: 12px;
   border: 1px solid var(--ty-color-border-secondary, var(--ty-color-border));
@@ -432,104 +462,20 @@
   margin-top: 8px;
 }
 
-.theme-studio__response-section {
-  min-width: 0;
-}
-
-.theme-studio__response-label {
-  display: block;
-  margin-bottom: 4px;
-  font-size: 9px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--editor-muted-foreground);
-}
-
-.theme-studio__response-swatches {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-}
-
-.theme-studio__response-swatch {
-  min-height: 34px;
-  padding: 6px;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  font-size: 9px;
-}
-
-.theme-studio__chart-strip {
-  gap: 6px;
-  min-height: 34px;
-  align-items: center;
-}
-
-.theme-studio__chart-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-}
-
-.theme-studio__sidebar-preview-shell {
-  padding: 6px;
-  border-radius: 10px;
-  background: var(--editor-sidebar);
-  color: var(--editor-sidebar-foreground);
-  border: 1px solid var(--editor-sidebar-border);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--editor-sidebar-ring), transparent 72%);
-}
-
-.theme-studio__sidebar-preview-item {
-  padding: 6px 8px;
-  border-radius: 8px;
-  font-size: 10px;
-}
-
-.theme-studio__sidebar-preview-item_primary {
-  background: var(--editor-sidebar-primary);
-  color: var(--editor-sidebar-primary-foreground);
-}
-
-.theme-studio__sidebar-preview-item_accent {
-  margin-top: 4px;
-  background: var(--editor-sidebar-accent);
-  color: var(--editor-sidebar-accent-foreground);
-}
-
-.theme-studio__type-inline,
-.theme-studio__surface-inline {
-  min-height: 34px;
-}
-
-.theme-studio__type-inline {
-  justify-content: center;
-  gap: 2px;
-}
-
-.theme-studio__type-inline strong {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.theme-studio__type-inline span,
-.theme-studio__type-inline code {
-  font-family: var(--editor-font-mono);
-  font-size: 10px;
-}
-
-.theme-studio__surface-inline {
-  gap: 8px;
-}
-
+.theme-studio__control-proxy,
 .theme-studio__focus-proxy,
 .theme-studio__surface-proxy {
   border: 1px solid var(--editor-border);
   font-size: 11px;
 }
 
+.theme-studio__control-proxy {
+  padding: 8px 10px;
+  border-radius: var(--editor-input-radius);
+  background: var(--editor-base);
+  box-shadow: var(--editor-shadow-control);
+}
+
 .theme-studio__focus-proxy {
   padding: 8px 10px;
   border-radius: var(--editor-input-radius);
@@ -583,45 +529,52 @@
   gap: var(--theme-studio-block-gap);
 }
 
-.theme-studio__cards-scene {
-  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
+.theme-studio__cards-shell {
+  display: grid;
+  grid-template-columns: minmax(380px, 0.92fr) minmax(620px, 1.4fr);
   gap: 14px;
   align-items: start;
 }
 
-.theme-studio__cards-column {
+.theme-studio__cards-shell-left,
+.theme-studio__cards-shell-right {
   gap: 14px;
   min-width: 0;
 }
 
-.theme-studio__cards-top-pair,
-.theme-studio__cards-bottom-pair {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.theme-studio__cards-shell-right-top {
+  display: grid;
+  grid-template-columns: minmax(260px, 0.84fr) minmax(348px, 1.16fr);
   gap: 14px;
   align-items: stretch;
 }
 
-.theme-studio__cards-bottom-pair {
-  margin-top: auto;
-}
-
 .theme-studio__cards-panel.ty-card,
 .theme-studio__cards-inline-card.ty-card {
   border-radius: calc(var(--editor-card-radius) + 2px);
+  border-color: color-mix(in srgb, var(--editor-border), transparent 8%);
+  box-shadow: none;
+  overflow: hidden;
 }
 
 .theme-studio__cards-panel.ty-card > .ty-card__body,
 .theme-studio__cards-inline-card.ty-card > .ty-card__body {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 12px;
+  gap: 12px;
+  padding: 18px;
 }
 
 .theme-studio__cards-panel .ty-typography-heading {
   margin: 0;
 }
 
+.theme-studio__cards-panel .ty-typography-heading.ty-typography-heading-h1 {
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+
 .theme-studio__cards-panel .ty-input {
   width: 100%;
 }
@@ -636,9 +589,57 @@
   min-height: 132px;
 }
 
+.theme-studio__cards-panel_stat.ty-card > .ty-card__body {
+  min-height: 208px;
+  gap: 4px;
+}
+
 .theme-studio__cards-panel_goal.ty-card > .ty-card__body {
+  gap: 12px;
+  min-height: 244px;
+  padding: 18px 18px 14px;
+}
+
+.theme-studio__cards-panel_form.ty-card > .ty-card__body {
+  min-height: 340px;
+}
+
+.theme-studio__cards-panel_auth.ty-card > .ty-card__body {
+  min-height: 286px;
+}
+
+.theme-studio__cards-panel_exercise.ty-card > .ty-card__body {
+  min-height: 318px;
+}
+
+.theme-studio__cards-panel_members.ty-card > .ty-card__body {
+  min-height: 214px;
+}
+
+.theme-studio__cards-panel_settings.ty-card > .ty-card__body {
+  min-height: 198px;
+}
+
+.theme-studio__cards-panel_chat.ty-card > .ty-card__body {
+  min-height: 296px;
+}
+
+.theme-studio__cards-panel_share.ty-card > .ty-card__body {
+  min-height: 160px;
+}
+
+.theme-studio__cards-panel_access.ty-card > .ty-card__body {
+  min-height: 248px;
+}
+
+.theme-studio__cards-panel_issue.ty-card > .ty-card__body {
+  min-height: 324px;
+}
+
+.theme-studio__cards-inline-card_date.ty-card > .ty-card__body {
+  min-height: 174px;
   gap: 10px;
-  min-height: 172px;
+  padding: 16px 18px 18px;
 }
 
 .theme-studio__cards-panel-head,
@@ -649,10 +650,31 @@
 .theme-studio__cards-panel-head .ty-typography-text-secondary,
 .theme-studio__cards-copy-block .ty-typography-text-secondary,
 .theme-studio__cards-inline-card .ty-typography-text-secondary {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.4;
 }
 
+.theme-studio__cards-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.theme-studio__cards-field > span {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.theme-studio__cards-input-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.theme-studio__cards-input-grid_compact {
+  grid-template-columns: minmax(0, 1fr) 112px 96px;
+}
+
 .theme-studio__cards-plan-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -663,8 +685,8 @@
   display: flex;
   gap: 8px;
   align-items: flex-start;
-  padding: 8px;
-  border-radius: 8px;
+  padding: 10px;
+  border-radius: 10px;
   border: 1px solid var(--editor-border);
   background: color-mix(in srgb, var(--editor-card), var(--editor-base) 8%);
 }
@@ -685,6 +707,14 @@
   align-items: center;
 }
 
+.theme-studio__cards-actions-split {
+  gap: 10px;
+}
+
+.theme-studio__cards-actions-split .ty-btn {
+  flex: 1 1 0;
+}
+
 .theme-studio__cards-actions-end {
   justify-content: flex-end;
 }
@@ -696,15 +726,25 @@
 .theme-studio__cards-divider-label {
   font-size: 10px;
   color: var(--editor-muted-foreground);
+  margin: 2px 0 0;
+}
+
+.theme-studio__cards-checklist {
+  gap: 8px;
+}
+
+.theme-studio__cards-checklist .ty-checkbox {
+  font-size: 12px;
 }
 
 .theme-studio__cards-panel_calendar.ty-card > .ty-card__body {
-  min-height: 172px;
-  padding: 10px;
+  min-height: 244px;
+  padding: 10px 14px 8px;
 }
 
 .theme-studio__cards-panel_calendar .ty-calendar {
   width: 100%;
+  height: 100%;
 }
 
 .theme-studio__cards-panel_calendar .ty-calendar_card {
@@ -728,7 +768,7 @@
 }
 
 .theme-studio__goal-display {
-  margin: 0;
+  margin: 0 18px;
   align-items: center;
 }
 
@@ -745,13 +785,15 @@
 }
 
 .theme-studio__cards-goal-header {
-  gap: 8px;
+  gap: 0;
+  justify-content: center;
+  margin-top: 6px;
 }
 
 .theme-studio__cards-goal-circle.ty-btn {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
   padding: 0;
   border-radius: 999px;
 }
@@ -766,7 +808,7 @@
 
 .theme-studio__cards-panel .theme-studio__member-row {
   gap: 10px;
-  padding: 8px 0;
+  padding: 10px 0;
   align-items: center;
 }
 
@@ -784,7 +826,7 @@
 }
 
 .theme-studio__cards-member-select {
-  min-width: 86px;
+  min-width: 98px;
 }
 
 .theme-studio__cards-panel .ty-radio {
@@ -816,445 +858,1366 @@
   gap: 2px;
 }
 
-.theme-studio__settings-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: flex-start;
-  padding: 12px 0;
-}
-
-.theme-studio__dashboard-shell,
-.theme-studio__mail-shell {
-  display: grid;
-  gap: var(--theme-studio-block-gap);
+.theme-studio__cards-chat-compose {
+  align-items: center;
+  gap: 10px;
 }
 
-.theme-studio__dashboard-shell {
-  grid-template-columns: 220px minmax(0, 1fr);
+.theme-studio__cards-chat-compose .ty-input {
+  flex: 1 1 auto;
 }
 
-.theme-studio__mail-shell {
-  grid-template-columns: minmax(190px, 0.72fr) minmax(260px, 1fr) minmax(380px, 1.55fr);
-  gap: 14px;
-  align-items: stretch;
+.theme-studio__cards-chat-compose .ty-btn {
+  width: auto;
+  min-width: 72px;
 }
 
-.theme-studio__dashboard-sidebar {
-  background: var(--editor-sidebar);
-  color: var(--editor-sidebar-foreground);
-  border: 1px solid var(--editor-sidebar-border);
+.theme-studio__cards-auth-actions .ty-btn .ty-btn__content {
+  gap: 6px;
 }
 
-.theme-studio__dashboard-sidebar.ty-card,
-.theme-studio__mail-sidebar.ty-card,
-.theme-studio__mail-panel.ty-card,
-.theme-studio__mail-detail.ty-card {
-  border-radius: var(--theme-studio-panel-radius);
+.theme-studio__cards-share-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
 }
 
-.theme-studio__dashboard-sidebar.ty-card > .ty-card__body,
-.theme-studio__mail-sidebar.ty-card > .ty-card__body {
-  padding: 20px 14px;
+.theme-studio__cards-share-row .theme-studio__cards-field {
+  flex: 1 1 auto;
 }
 
-.theme-studio__sidebar-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 18px;
+.theme-studio__cards-share-row > .ty-btn {
+  width: auto;
+  min-width: 96px;
 }
 
-.theme-studio__sidebar-section-label {
-  margin: 0 0 10px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 38%);
+.theme-studio__cards-calendar-wrap {
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--editor-border), transparent 10%);
+  overflow: hidden;
 }
 
-.theme-studio__sidebar-subtle {
-  display: block;
-  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 28%);
+.theme-studio__cards-payments {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--editor-border), transparent 10%);
+  overflow: hidden;
 }
 
-.theme-studio__sidebar-link,
-.theme-studio__mail-item {
-  width: 100%;
-  text-align: left;
-  color: inherit;
+.theme-studio__cards-payments-head,
+.theme-studio__cards-payments-row {
+  display: grid;
+  grid-template-columns: 32px 110px minmax(0, 1fr) 92px 28px;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
 }
 
-.theme-studio__sidebar-link_active {
-  color: var(--editor-sidebar-primary-foreground);
+.theme-studio__cards-payments-head .ty-checkbox,
+.theme-studio__cards-payments-row .ty-checkbox {
+  margin-right: 0;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
 }
 
-.theme-studio__sidebar-link.ty-btn,
-.theme-studio__mail-nav-item.ty-btn {
-  justify-content: flex-start;
-  width: 100%;
-  padding-inline: 14px;
+.theme-studio__cards-payments-head .ty-checkbox__inner,
+.theme-studio__cards-payments-row .ty-checkbox__inner {
+  flex: 0 0 16px;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
 }
 
-.theme-studio__sidebar-link.ty-btn {
-  color: inherit;
+.theme-studio__cards-payments-head .ty-checkbox > span:last-child,
+.theme-studio__cards-payments-row .ty-checkbox > span:last-child {
+  display: none;
 }
 
-.theme-studio__sidebar-link_active.ty-btn {
-  color: var(--editor-sidebar-primary-foreground);
+.theme-studio__cards-payments-head {
+  background: color-mix(in srgb, var(--editor-card), var(--editor-base) 8%);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--editor-muted-foreground);
 }
 
-.theme-studio__dashboard-sidebar-footer {
-  margin-top: 18px;
-  padding-top: 14px;
-  border-top: 1px solid color-mix(in srgb, var(--editor-sidebar-border), transparent 24%);
+.theme-studio__cards-payments-row {
+  border-top: 1px solid color-mix(in srgb, var(--editor-border), transparent 12%);
 }
 
-.theme-studio__dashboard-sidebar-footer .ty-typography-text {
-  display: block;
+.theme-studio__cards-payments-row span,
+.theme-studio__cards-payments-row strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.theme-studio__dashboard-main,
-.theme-studio__mail-panel,
-.theme-studio__mail-detail,
-.theme-studio__mail-sidebar {
-  min-width: 0;
+.theme-studio__cards-icon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
 }
 
-.theme-studio__dashboard-main {
-  gap: var(--theme-studio-block-gap);
+.theme-studio__cards-icon-action svg {
+  width: 14px;
+  height: 14px;
 }
 
-.theme-studio__dashboard-top {
+.theme-studio__cards-table-footer {
   justify-content: space-between;
-  gap: 14px;
   align-items: center;
+  gap: 12px;
 }
 
-.theme-studio__dashboard-top .theme-studio__pill-row {
-  margin-top: 8px;
-}
-
-.theme-studio__dashboard-actions,
-.theme-studio__mail-folder-list,
-.theme-studio__mail-thread-list,
-.theme-studio__pricing-feature-list {
-  gap: 10px;
+.theme-studio__settings-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: flex-start;
+  padding: 12px 0;
+}
+
+.theme-studio__mail-shell {
+  display: grid;
+  gap: var(--theme-studio-block-gap);
+}
+
+.theme-studio__mail-shell {
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  gap: 0;
+  align-items: stretch;
+  overflow: hidden;
+  border: 1px solid var(--editor-border);
+  border-radius: 10px;
+  background: var(--editor-card);
+}
+
+.theme-studio__mail-split.ty-split {
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+.theme-studio__mail-split.ty-split > .ty-split-pane {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-studio__mail-sidebar.ty-card,
+.theme-studio__mail-panel.ty-card,
+.theme-studio__mail-detail.ty-card {
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+}
+
+.theme-studio__mail-sidebar.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.theme-studio__mail-panel,
+.theme-studio__mail-detail,
+.theme-studio__mail-sidebar {
+  min-width: 0;
+  border-right: 1px solid var(--editor-border);
+}
+
+.theme-studio__mail-detail {
+  border-right: 0;
+}
+
+.theme-studio__mail-account-wrap {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--editor-border);
+}
+
+.theme-studio__mail-search-wrap {
+  padding: 16px;
+}
+
+.theme-studio__pricing-feature-list {
+  gap: 10px;
+}
+
+.theme-studio__docdash {
+  display: grid;
+  grid-template-columns: 220px minmax(1240px, 1fr);
+  gap: 16px;
+  min-width: 0;
+  overflow-x: auto;
+  align-items: start;
+  padding-bottom: 4px;
+}
+
+.theme-studio__docdash_collapsed {
+  grid-template-columns: 72px minmax(1240px, 1fr);
+}
+
+.theme-studio__docdash-sidebar.ty-card,
+.theme-studio__docdash-metric.ty-card,
+.theme-studio__docdash-traffic.ty-card,
+.theme-studio__docdash-table-card.ty-card,
+.theme-studio__docdash-chart-card.ty-card {
+  border-radius: 12px;
+  border-color: color-mix(in srgb, var(--editor-border), transparent 8%);
+  box-shadow: none;
+}
+
+.theme-studio__docdash-sidebar.ty-card {
+  background: color-mix(in srgb, var(--editor-sidebar), var(--editor-base) 10%);
+  color: var(--editor-sidebar-foreground);
+  border-color: color-mix(in srgb, var(--editor-sidebar-border), transparent 6%);
+}
+
+.theme-studio__docdash-sidebar.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 100%;
+  padding: 12px;
+}
+
+.theme-studio__docdash_collapsed .theme-studio__docdash-sidebar.ty-card > .ty-card__body {
+  align-items: center;
+  padding-inline: 8px;
+}
+
+.theme-studio__docdash-brand,
+.theme-studio__docdash-profile {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.theme-studio__docdash-copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.theme-studio__docdash_collapsed .theme-studio__docdash-brand,
+.theme-studio__docdash_collapsed .theme-studio__docdash-profile {
+  justify-content: center;
+}
+
+.theme-studio__docdash-copy .ty-typography-text {
+  display: block;
+  min-width: 0;
+  line-height: 1.15;
+  white-space: nowrap;
+}
+
+.theme-studio__docdash-copy .ty-typography-text-secondary {
+  font-size: 12px;
+}
+
+.theme-studio__docdash-brand .ty-avatar,
+.theme-studio__docdash-profile .ty-avatar {
+  flex: 0 0 auto;
+}
+
+.theme-studio__docdash-create.ty-btn {
+  justify-content: center;
+  width: 100%;
+  min-height: 34px;
+}
+
+.theme-studio__docdash_collapsed .theme-studio__docdash-create.ty-btn {
+  width: 40px;
+  min-width: 40px;
+  padding-inline: 0;
+}
+
+.theme-studio__docdash-nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.theme-studio__docdash_collapsed .theme-studio__docdash-nav-section {
+  align-items: center;
+}
+
+.theme-studio__docdash-nav-section_footer {
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid color-mix(in srgb, var(--editor-sidebar-border), transparent 18%);
+}
+
+.theme-studio__docdash-section-label {
+  margin-top: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 42%);
+}
+
+.theme-studio__docdash-menu.ty-menu {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  gap: 4px;
+  padding: 0;
+  color: inherit;
+  --ty-menu-bg: transparent;
+  --ty-menu-border: transparent;
+  --ty-menu-item-color: var(--editor-sidebar-foreground);
+  --ty-menu-item-hover-bg: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 92%);
+  --ty-menu-item-hover-color: var(--editor-sidebar-foreground);
+  --ty-menu-item-active-bg: color-mix(in srgb, var(--editor-sidebar-primary), transparent 26%);
+  --ty-menu-item-active-color: var(--editor-sidebar-primary-foreground);
+  --ty-menu-item-selected-bg: color-mix(in srgb, var(--editor-sidebar-primary), transparent 26%);
+  --ty-menu-item-selected-color: var(--editor-sidebar-primary-foreground);
+  --ty-menu-submenu-bg: transparent;
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-item,
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__title {
+  min-height: 34px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-item__main,
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__title .ty-menu-item__main {
+  min-width: 0;
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-item__icon,
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__title .ty-menu-item__icon {
+  width: 18px;
+  min-width: 18px;
+  justify-content: center;
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-item__label,
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__title .ty-menu-item__label {
+  min-width: 0;
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-item__extra,
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__title .ty-menu-item__extra {
+  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 38%);
+}
+
+.theme-studio__docdash-menu.ty-menu .ty-menu-sub__list {
+  background: transparent;
+}
+
+.theme-studio__docdash-nav-item {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  font-size: 13px;
+}
+
+.theme-studio__docdash_collapsed .theme-studio__docdash-nav-item {
+  grid-template-columns: 18px;
+  justify-content: center;
+  width: 40px;
+  padding-inline: 0;
+}
+
+.theme-studio__docdash-nav-item > span:last-of-type {
+  min-width: 0;
+}
+
+.theme-studio__docdash-nav-item > small {
+  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 38%);
+}
+
+.theme-studio__docdash-nav-item_active {
+  background: color-mix(in srgb, var(--editor-sidebar-primary), transparent 26%);
+  color: var(--editor-sidebar-primary-foreground);
+}
+
+.theme-studio__docdash-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 1240px;
+}
+
+.theme-studio__docdash-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.theme-studio__docdash-header-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.theme-studio__docdash-header .ty-typography-heading {
+  margin: 0;
+}
+
+.theme-studio__docdash-toggle.ty-btn {
+  min-height: 30px;
+  padding-inline: 8px;
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__docdash-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.theme-studio__docdash-metric.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-height: 132px;
+  padding: 16px 18px;
+}
+
+.theme-studio__docdash-metric-value {
+  margin-top: 8px;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.theme-studio__docdash-metric-delta {
+  font-size: 12px;
+  font-weight: 600;
+  color: color-mix(in srgb, var(--editor-primary), var(--editor-base-foreground) 10%);
+}
+
+.theme-studio__docdash-metric .ty-typography-text:last-child {
+  margin-top: auto;
+}
+
+.theme-studio__docdash-metric .ty-typography-text-secondary {
+  font-size: 12px;
+}
+
+.theme-studio__docdash-metric .ty-typography-text:not(.ty-typography-text-secondary) {
+  font-size: 12px;
+}
+
+.theme-studio__docdash-body {
+  min-width: 0;
+}
+
+.theme-studio__docdash-primary,
+.theme-studio__docdash-chart-pair {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.theme-studio__docdash-chart-pair {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.theme-studio__docdash-traffic.ty-card > .ty-card__body,
+.theme-studio__docdash-table-card.ty-card > .ty-card__body,
+.theme-studio__docdash-chart-card.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+}
+
+.theme-studio__docdash-card-head,
+.theme-studio__docdash-table-actions,
+.theme-studio__docdash-table-footer,
+.theme-studio__docdash-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.theme-studio__docdash-card-head {
+  align-items: flex-start;
+}
+
+.theme-studio__docdash-card-head .ty-typography-text,
+.theme-studio__docdash-card-head .ty-typography-text-secondary {
+  display: block;
+}
+
+.theme-studio__docdash-card-head .ty-typography-text {
+  font-size: 14px;
+}
+
+.theme-studio__docdash-card-head .ty-typography-text-secondary {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.theme-studio__docdash-traffic-segmented {
+  margin-left: auto;
+}
+
+.theme-studio__docdash-outline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.theme-studio__docdash-outline-pill.ty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  padding-inline: 14px;
+  border-radius: 999px;
+  font-size: 11px;
+  color: var(--editor-foreground);
+  --ty-button-radius: 999px;
+  --ty-button-ghost-color: var(--editor-foreground);
+  --ty-button-ghost-hover-color: var(--editor-foreground);
+  --ty-button-ghost-bg: color-mix(in srgb, var(--editor-card), var(--editor-base) 10%);
+  --ty-button-ghost-hover-bg: color-mix(in srgb, var(--editor-border), transparent 84%);
+  --ty-button-ghost-border: var(--editor-border);
+  --ty-button-outline-color: var(--editor-primary);
+  --ty-button-outline-hover-color: var(--editor-primary);
+  --ty-button-outline-bg: color-mix(in srgb, var(--editor-primary), transparent 90%);
+  --ty-button-outline-hover-bg: color-mix(in srgb, var(--editor-primary), transparent 86%);
+  --ty-button-outline-border: color-mix(in srgb, var(--editor-primary), transparent 48%);
+}
+
+.theme-studio__docdash-outline-pill.ty-btn:hover {
+  color: var(--editor-foreground);
+}
+
+.theme-studio__docdash-outline-pill_active.ty-btn {
+  color: var(--editor-primary);
+}
+
+.theme-studio__docdash-outline-pill.ty-btn strong {
+  font-size: 13px;
+}
+
+.theme-studio__docdash-popover {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 160px;
+}
+
+.theme-studio__docdash-popover-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+  font-size: 12px;
+}
+
+.theme-studio__docdash-table-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.theme-studio__docdash-table-head,
+.theme-studio__docdash-row {
+  display: grid;
+  gap: 12px;
+  align-items: center;
+}
+
+.theme-studio__docdash-table-head {
+  padding: 0 8px 10px;
+  border-bottom: 1px solid var(--editor-border);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__docdash-table-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-studio__docdash-row {
+  min-height: 52px;
+  padding: 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--editor-border), transparent 18%);
+}
+
+.theme-studio__docdash-row_compact {
+  min-height: 44px;
+  padding-block: 4px;
+}
+
+.theme-studio__docdash-row:last-child {
+  border-bottom: 0;
+}
+
+.theme-studio__docdash-row-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.theme-studio__docdash-row-title strong,
+.theme-studio__docdash-reviewer {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-studio__docdash-row-title small {
+  color: var(--editor-muted-foreground);
+  font-size: 11px;
+}
+
+.theme-studio__docdash-row-chip.ty-btn {
+  justify-content: flex-start;
+  min-height: 30px;
+  padding-inline: 10px;
+  font-weight: 500;
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.theme-studio__docdash-row .ty-input,
+.theme-studio__docdash-row .theme-studio__select {
+  width: 100%;
+}
+
+.theme-studio__docdash-table-head .ty-checkbox,
+.theme-studio__docdash-row .ty-checkbox {
+  margin-right: 0;
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+}
+
+.theme-studio__docdash-table-head .ty-checkbox > span:last-child,
+.theme-studio__docdash-row .ty-checkbox > span:last-child {
+  display: none;
+}
+
+.theme-studio__docdash-row .ty-input {
+  min-height: 30px;
+}
+
+.theme-studio__docdash-row .theme-studio__select {
+  min-height: 30px;
+}
+
+.theme-studio__docdash-more {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+
+.theme-studio__docdash-more svg {
+  width: 14px;
+  height: 14px;
+}
+
+.theme-studio__docdash-pagination > span {
+  font-size: 12px;
+}
+
+.theme-studio__docdash-pagination-buttons button {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--editor-border);
+  border-radius: 8px;
+  background: var(--editor-card);
+  color: inherit;
+  cursor: pointer;
+}
+
+.theme-studio__docdash-table-footer {
+  padding-top: 10px;
+  border-top: 1px solid var(--editor-border);
+  flex-wrap: wrap;
+}
+
+.theme-studio__docdash-pagination {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.theme-studio__docdash-pagination-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.theme-studio__docdash-chart-card {
+  position: relative;
+}
+
+.theme-studio__docdash-chart-card.ty-card > .ty-card__body {
+  min-height: 430px;
+}
+
+.theme-studio__docdash-chart-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  margin-top: -204px;
+  margin-bottom: 118px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.theme-studio__docdash-chart-center strong {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.theme-studio__docdash-chart-center small {
+  color: var(--editor-muted-foreground);
+  font-size: 12px;
+}
+
+.theme-studio__docdash-chart-center span {
+  max-width: 220px;
+  color: var(--editor-muted-foreground);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.theme-studio__docdash-chart-note {
+  margin-top: -8px;
+  text-align: center;
+}
+
+.theme-studio__docdash-chart-note span {
+  color: var(--editor-base-foreground);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.theme-studio__docdash-chart-center_compact {
+  margin-top: 2px;
+  margin-bottom: 0;
+  align-items: flex-start;
+  text-align: left;
+  pointer-events: auto;
 }
 
 .theme-studio__mail-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 18px;
   min-width: 0;
-  background: color-mix(in srgb, var(--editor-sidebar), var(--editor-base) 8%);
-  color: var(--editor-sidebar-foreground);
-  border: 1px solid var(--editor-sidebar-border);
+  background: var(--editor-card);
+  color: var(--editor-foreground);
+  border: 0;
+  overflow: hidden;
+}
+
+.theme-studio__mail-panel,
+.theme-studio__mail-detail {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.theme-studio__mail-panel.ty-card > .ty-card__body,
+.theme-studio__mail-detail.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.theme-studio__mail-account {
+  width: 100%;
+}
+
+.theme-studio__mail-nav-group {
+  padding: 8px;
+  gap: 4px;
+}
+
+.theme-studio__mail-nav-group_secondary {
+  margin-top: 0;
+  padding-top: 8px;
+  border-top: 1px solid var(--editor-border);
+}
+
+.theme-studio__mail-menu.ty-menu {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+  gap: 4px;
+  --ty-menu-bg: transparent;
+  --ty-menu-border: transparent;
+  --ty-menu-item-color: var(--editor-foreground);
+  --ty-menu-item-hover-color: var(--editor-accent-foreground, var(--editor-foreground));
+  --ty-menu-item-hover-bg: var(--editor-accent);
+  --ty-menu-item-active-color: var(--editor-primary-foreground);
+  --ty-menu-item-active-bg: var(--editor-primary);
+  --ty-menu-item-selected-color: var(--editor-primary-foreground);
+  --ty-menu-item-selected-bg: var(--editor-primary);
+  --ty-menu-submenu-bg: transparent;
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title {
+  min-height: 36px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item__main,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title .ty-menu-item__main {
+  min-width: 0;
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item__icon,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title .ty-menu-item__icon {
+  width: 14px;
+  min-width: 14px;
+  justify-content: center;
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item__label,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title .ty-menu-item__label {
+  min-width: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item__extra,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title .ty-menu-item__extra {
+  color: var(--editor-muted-foreground);
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item:hover .ty-menu-item__extra,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title:hover .ty-menu-item__extra {
+  color: var(--editor-accent-foreground, var(--editor-foreground));
+}
+
+.theme-studio__mail-menu.ty-menu .ty-menu-item.ty-menu-item_selected .ty-menu-item__extra,
+.theme-studio__mail-menu.ty-menu .ty-menu-sub__title.ty-menu-sub__title_selected .ty-menu-item__extra {
+  color: var(--editor-primary-foreground);
+}
+
+.theme-studio__mail-nav-count {
+  flex: 0 0 auto;
+  min-width: 20px;
+  text-align: right;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.theme-studio__mail-panel-head {
+  padding: 20px 16px;
+  border-bottom: 1px solid var(--editor-border);
+}
+
+.theme-studio__mail-panel-head .ty-typography {
+  margin: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.theme-studio__mail-panel-head .ty-segmented {
+  flex: 0 0 auto;
+}
+
+.theme-studio__mail-search-wrap {
+  padding: 12px 16px;
+}
+
+.theme-studio__mail-search {
+  width: 100%;
+}
+
+.theme-studio__mail-thread-list {
+  gap: 8px;
+  min-height: 0;
+  max-height: 640px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0 16px 16px;
+}
+
+.theme-studio__mail-thread.ty-card {
+  background: var(--editor-card);
+  border: 1px solid var(--editor-border);
+  border-radius: 10px;
+  cursor: pointer;
+  box-shadow: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.theme-studio__mail-thread.ty-card > .ty-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+}
+
+.theme-studio__mail-thread.ty-card:hover {
+  background: var(--editor-accent);
+  color: var(--editor-accent-foreground);
 }
 
-.theme-studio__mail-sidebar .theme-studio__eyebrow,
-.theme-studio__mail-sidebar .ty-typography,
-.theme-studio__mail-sidebar .ty-typography-heading,
-.theme-studio__mail-sidebar .ty-typography-text {
-  color: var(--editor-sidebar-foreground);
+.theme-studio__mail-thread_active.ty-card {
+  background: var(--editor-muted);
+  border-color: var(--editor-border);
+  box-shadow: none;
 }
 
-.theme-studio__mail-sidebar .theme-studio__eyebrow,
-.theme-studio__mail-sidebar .theme-studio__sidebar-subtle {
-  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 28%);
+.theme-studio__mail-thread-head,
+.theme-studio__mail-detail-toolbar,
+.theme-studio__mail-detail-actions,
+.theme-studio__mail-message-head,
+.theme-studio__mail-reply-foot {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.theme-studio__mail-sidebar-head {
-  gap: 14px;
-  padding-bottom: 2px;
+.theme-studio__mail-thread-head {
+  align-items: center;
+  gap: 8px;
 }
 
-.theme-studio__mail-sidebar-head .ty-typography-heading {
+.theme-studio__mail-thread-sender.ty-typography {
   margin: 0;
-  overflow-wrap: anywhere;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.25;
 }
 
-.theme-studio__mail-panel,
-.theme-studio__mail-detail {
-  min-width: 0;
-  overflow: hidden;
+.theme-studio__mail-thread-time {
+  margin-left: auto;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--editor-muted-foreground);
 }
 
-.theme-studio__mail-panel.ty-card > .ty-card__body,
-.theme-studio__mail-detail.ty-card > .ty-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  min-width: 0;
-  padding: 18px;
+.theme-studio__mail-thread_active .theme-studio__mail-thread-time {
+  color: inherit;
 }
 
-.theme-studio__mail-panel-head,
-.theme-studio__mail-message-actions,
-.theme-studio__mail-item-head {
-  display: flex;
+.theme-studio__mail-thread-subject {
+  display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  color: inherit;
 }
 
-.theme-studio__mail-panel-head,
-.theme-studio__mail-message-head {
-  justify-content: space-between;
+.theme-studio__mail-thread .theme-studio__mail-thread-preview.ty-typography,
+.theme-studio__mail-thread-preview.ty-typography {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--editor-muted-foreground);
 }
 
-.theme-studio__mail-panel-head {
-  margin-bottom: 12px;
-  flex-wrap: wrap;
+.theme-studio__mail-thread_active .theme-studio__mail-thread-preview.ty-typography {
+  color: inherit;
+  opacity: 0.72;
 }
 
-.theme-studio__mail-panel-head .ty-input {
-  flex: 1 1 180px;
-  min-width: 0;
+.theme-studio__mail-thread-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--editor-primary);
 }
 
-.theme-studio__mail-message-meta {
-  gap: 12px;
-  min-width: 0;
+.theme-studio__mail-thread-tags {
+  gap: 6px;
 }
 
-.theme-studio__mail-message-meta > div {
-  min-width: 0;
+.theme-studio__mail-thread-tag.ty-tag {
+  border-radius: 6px;
+  min-height: 20px;
+  padding-inline: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  border: 1px solid var(--editor-border);
+  background: transparent;
+  color: var(--editor-foreground);
 }
 
-.theme-studio__mail-message-meta .ty-typography-text {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.theme-studio__mail-thread-tag_work.ty-tag {
+  border-color: transparent;
+  background: var(--editor-primary);
+  color: var(--editor-primary-foreground);
 }
 
-.theme-studio__mail-nav-item {
-  width: 100%;
-  display: flex;
+.theme-studio__mail-detail-toolbar {
   justify-content: space-between;
-  gap: 12px;
-  color: inherit;
-  text-align: left;
-  overflow: hidden;
-}
-
-.theme-studio__mail-nav-item span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding: 8px;
+  border-bottom: 1px solid var(--editor-border);
+  min-height: 52px;
 }
 
-.theme-studio__mail-nav-item small {
-  color: color-mix(in srgb, var(--editor-sidebar-foreground), transparent 28%);
+.theme-studio__mail-detail-actions {
+  flex-wrap: wrap;
+  gap: 4px;
 }
 
-.theme-studio__mail-nav-item_active {
-  color: var(--editor-sidebar-primary-foreground);
+.theme-studio__mail-icon-btn.ty-btn {
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
 }
 
-.theme-studio__mail-nav-item_active small {
-  color: inherit;
+.theme-studio__mail-message-head {
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  border-bottom: 1px solid var(--editor-border);
 }
 
-.theme-studio__mail-labels {
-  gap: 10px;
-  padding-top: 8px;
-  border-top: 1px solid color-mix(in srgb, var(--editor-sidebar-border), transparent 25%);
+.theme-studio__mail-message-meta {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  min-width: 0;
+  flex: 1;
 }
 
-.theme-studio__mail-item {
+.theme-studio__mail-message-copy {
+  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  background: color-mix(in srgb, var(--editor-card), var(--editor-base) 18%);
+  gap: 2px;
+}
+
+.theme-studio__mail-message-sender {
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
 }
 
-.theme-studio__mail-item.ty-card > .ty-card__body {
+.theme-studio__mail-message-subject {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.theme-studio__mail-message-replyto {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 14px;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-size: 12px;
+  line-height: 1.3;
+  color: var(--editor-foreground);
 }
 
-.theme-studio__mail-item small {
-  color: var(--editor-muted-foreground);
+.theme-studio__mail-message-replyto span:first-child {
+  font-weight: 500;
 }
 
-.theme-studio__mail-item-head span {
-  margin-left: auto;
+.theme-studio__mail-message-time {
+  white-space: nowrap;
   font-size: 12px;
   color: var(--editor-muted-foreground);
-  white-space: nowrap;
 }
 
-.theme-studio__mail-item-subject {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
+.theme-studio__mail-message-body {
+  gap: 12px;
+  min-height: 0;
+  padding: 16px;
+  flex: 1;
 }
 
-.theme-studio__mail-item-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--editor-primary);
+.theme-studio__mail-message-body .ty-typography {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
 }
 
-.theme-studio__mail-item_active {
-  border-color: var(--editor-ring);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--editor-ring), transparent 78%);
+.theme-studio__mail-reply {
+  margin-top: auto;
+  padding: 16px;
+  border-top: 1px solid var(--editor-border);
 }
 
-.theme-studio__mail-message-head {
+.theme-studio__mail-reply .ty-textarea {
+  width: 100%;
+}
+
+.theme-studio__mail-reply-foot {
   justify-content: space-between;
-  gap: 12px;
-  align-items: flex-start;
-  margin-bottom: 14px;
+  align-items: center;
+  margin-top: 12px;
   flex-wrap: wrap;
 }
 
-.theme-studio__mail-message-actions {
-  flex-wrap: wrap;
-  justify-content: flex-end;
+.theme-studio__mail-mute {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--editor-foreground);
 }
 
-.theme-studio__mail-thread-list {
-  margin-top: 12px;
-  gap: 12px;
+.theme-studio__pricing-grid,
+.theme-studio__palette-grid,
+.theme-studio__summary-grid {
+  display: grid;
+  gap: 16px;
 }
 
-.theme-studio__mail-detail {
-  justify-content: flex-start;
-  gap: 18px;
+.theme-studio__pricing-shell {
+  padding: clamp(16px, 2vw, 28px) 8px 20px;
 }
 
-.theme-studio__mail-toolbar {
-  gap: 8px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--editor-border);
-  flex-wrap: wrap;
+.theme-studio__pricing-stage {
+  gap: 42px;
+  padding: clamp(10px, 1.5vw, 20px);
+  background: transparent;
 }
 
-.theme-studio__chat-bubble {
-  max-width: 80%;
-  border-radius: var(--editor-card-radius);
+.theme-studio__pricing-intro {
+  gap: 12px;
 }
 
-.theme-studio__chat-bubble.ty-card > .ty-card__body {
-  padding: 10px 14px;
+.theme-studio__pricing-title {
+  margin: 0;
+  font-size: 50px;
+  font-weight: 700;
+  line-height: 0.98;
+  letter-spacing: -0.055em;
+  text-align: center;
+  color: var(--editor-card-foreground);
 }
 
-.theme-studio__chat-thread {
-  gap: 10px;
-  padding: 2px 0 4px;
+.theme-studio__pricing-subtitle {
+  font-size: 15px;
+  text-align: center;
+  color: color-mix(in srgb, var(--editor-card-foreground), transparent 42%);
 }
 
-.theme-studio__chat-bubble_in {
-  align-self: flex-start;
-  background: var(--editor-secondary);
-  color: var(--editor-secondary-foreground);
+.theme-studio__pricing-subtitle.ty-typography,
+.theme-studio__pricing-subtitle .ty-typography__content {
+  color: color-mix(in srgb, var(--editor-card-foreground), transparent 42%);
 }
 
-.theme-studio__chat-bubble_out {
-  align-self: flex-end;
-  background: var(--editor-primary);
-  color: var(--editor-primary-foreground);
+.theme-studio__pricing-switch {
+  // display: inline-flex;
+  // align-items: center;
+  // gap: 12px;
+  // line-height: 1;
+  // white-space: nowrap;
 }
 
-.theme-studio__pricing-grid,
-.theme-studio__palette-grid,
-.theme-studio__summary-grid {
-  display: grid;
-  gap: 16px;
+.theme-studio__pricing-switch-label {
+  font-size: 15px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--editor-card-foreground), transparent 14%);
+}
+
+.theme-studio__pricing-switch-label_active {
+  color: var(--editor-card-foreground);
+}
+
+.theme-studio__pricing-switch-control.ty-switch {
+  margin: 0;
+  flex-shrink: 0;
 }
 
 .theme-studio__pricing-grid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin-top: 12px;
-  gap: var(--theme-studio-block-gap);
-  row-gap: 20px;
-  column-gap: 18px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(320px, 336px));
+  align-items: stretch;
+  justify-content: center;
+  gap: 24px;
 }
 
-.theme-studio__pricing-hero {
-  justify-content: space-between;
-  gap: 18px;
-  align-items: flex-start;
+.theme-studio__pricing-grid > * {
+  height: 100%;
 }
 
 .theme-studio__pricing-card,
 .theme-studio__palette-card {
-  border-radius: var(--editor-card-radius);
+  border-radius: calc(var(--editor-card-radius) + 4px);
 }
 
 .theme-studio__preview-card.ty-card,
 .theme-studio__preview-grid .ty-card,
 .theme-studio__pricing-grid .theme-studio__pricing-card,
 .theme-studio__preview-grid .theme-studio__pricing-card {
-  border-radius: var(--editor-card-radius);
-}
-
-.theme-studio__preview-grid .ty-card__header,
-.theme-studio__preview-grid .ty-card > img:first-child {
-  border-radius: var(--editor-card-radius) var(--editor-card-radius) 0 0;
-}
-
-.theme-studio__pricing-card_featured {
-  background: linear-gradient(180deg, var(--editor-accent) 0%, var(--editor-card) 100%);
+  border-radius: calc(var(--editor-card-radius) + 4px);
 }
 
-.theme-studio__pricing-card {
+.theme-studio__pricing-card.ty-card {
   display: flex;
   flex-direction: column;
-  gap: 14px;
-  min-height: 320px;
+  border-color: color-mix(in srgb, var(--editor-border), transparent 8%);
+  background: var(--editor-card);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--editor-base-foreground), transparent 94%);
+  height: 100%;
 }
 
 .theme-studio__pricing-card.ty-card > .ty-card__body {
   display: flex;
-  flex-direction: column;
-  gap: 14px;
+  flex: 1;
+  padding: 0;
+}
+
+.theme-studio__pricing-card-content {
+  display: grid;
+  grid-template-rows: auto auto 1px minmax(0, 1fr) auto;
+  flex: 1;
+  gap: 20px;
   min-height: 100%;
+  padding: 26px 26px 24px;
 }
 
-.theme-studio__pricing-card-head {
-  gap: 8px;
-  min-height: 24px;
+.theme-studio__pricing-plan {
+  margin: 0 0 6px;
+  font-size: 21px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+  color: var(--editor-card-foreground);
 }
 
-.theme-studio__pricing-price {
+.theme-studio__pricing-caption,
+.theme-studio__pricing-note {
+  color: color-mix(in srgb, var(--editor-card-foreground), transparent 38%);
+}
+
+.theme-studio__pricing-caption.ty-typography,
+.theme-studio__pricing-caption .ty-typography__content,
+.theme-studio__pricing-note.ty-typography,
+.theme-studio__pricing-note .ty-typography__content {
+  color: color-mix(in srgb, var(--editor-card-foreground), transparent 38%);
+}
+
+.theme-studio__pricing-price-block {
+  display: flex;
+  flex-direction: column;
   gap: 6px;
 }
 
-.theme-studio__pricing-price .ty-typography-heading {
+.theme-studio__pricing-price {
+  font-size: clamp(46px, 5vw, 56px);
+  font-weight: 700;
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+  color: var(--editor-card-foreground);
+}
+
+.theme-studio__pricing-divider {
+  height: 1px;
+  background: color-mix(in srgb, var(--editor-border), transparent 25%);
+}
+
+.theme-studio__pricing-features {
+  display: grid;
+  gap: 12px;
+  flex: 1;
   margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-.theme-studio__pricing-feature-list {
+.theme-studio__pricing-feature {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
   gap: 10px;
-  margin: 0;
+  align-items: center;
 }
 
-.theme-studio__pricing-feature-list .ty-typography-text {
-  color: var(--editor-muted-foreground);
+.theme-studio__pricing-feature-icon {
+  color: var(--editor-card-foreground);
+  opacity: 0.9;
 }
 
-.theme-studio__pricing-card-footer {
-  margin-top: auto;
-  padding-top: 6px;
+.theme-studio__pricing-feature-text {
+  color: var(--editor-card-foreground);
 }
 
-.theme-studio__faq-list {
-  gap: 14px;
+.theme-studio__pricing-feature-text.ty-typography,
+.theme-studio__pricing-feature-text .ty-typography__content {
+  color: var(--editor-card-foreground);
 }
 
-.theme-studio__faq-item {
-  gap: 6px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid var(--editor-border);
+.theme-studio__pricing-feature-text_strong {
+  font-weight: 600;
+}
+
+.theme-studio__pricing-action.ty-btn {
+  margin-top: auto;
+  width: 100%;
+  min-height: 40px;
+  justify-content: center;
+  gap: 10px;
+  border-radius: 10px;
 }
 
 .theme-studio__faq-list .theme-studio__faq-item:last-child {
@@ -1355,17 +2318,40 @@
     position: static;
   }
 
-  .theme-studio__dashboard-shell,
+  .theme-studio__docdash,
+  .theme-studio__docdash-body,
   .theme-studio__mail-shell,
   .theme-studio__pricing-grid {
     grid-template-columns: 1fr;
   }
 
-  .theme-studio__cards-scene,
-  .theme-studio__cards-top-pair,
-  .theme-studio__cards-bottom-pair {
+  .theme-studio__docdash-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .theme-studio__docdash-chart-pair {
+    grid-template-columns: 1fr;
+  }
+
+  .theme-studio__cards-grid,
+  .theme-studio__cards-shell,
+  .theme-studio__cards-shell-right-top,
+  .theme-studio__cards-input-grid,
+  .theme-studio__cards-input-grid_compact {
     grid-template-columns: 1fr;
   }
+
+  .theme-studio__cards-payments-head,
+  .theme-studio__cards-payments-row {
+    grid-template-columns: 32px minmax(0, 1fr) 28px;
+  }
+
+  .theme-studio__cards-payments-head span:nth-child(3),
+  .theme-studio__cards-payments-head span:nth-child(4),
+  .theme-studio__cards-payments-row strong,
+  .theme-studio__cards-payments-row .ty-tag {
+    display: none;
+  }
 }
 
 @media (max-width: 900px) {
@@ -1384,20 +2370,36 @@
     flex-direction: column;
   }
 
-  .theme-studio__response-panel,
   .theme-studio__preview-grid,
   .theme-studio__palette-grid,
   .theme-studio__summary-grid {
     grid-template-columns: 1fr;
   }
 
-  .theme-studio__dashboard-top {
-    flex-direction: column;
-    align-items: flex-start;
+  .theme-studio__docdash-metrics,
+  .theme-studio__docdash-table-head,
+  .theme-studio__docdash-row {
+    grid-template-columns: 1fr;
   }
 
-  .theme-studio__pricing-hero {
+  .theme-studio__docdash-card-head,
+  .theme-studio__docdash-table-actions,
+  .theme-studio__docdash-table-footer,
+  .theme-studio__docdash-pagination {
     flex-direction: column;
     align-items: flex-start;
   }
+
+  .theme-studio__docdash-row {
+    padding-inline: 0;
+  }
+
+  .theme-studio__docdash-table-head {
+    display: none;
+  }
+
+  .theme-studio__pricing-grid {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
 }
diff --git a/apps/docs/src/containers/theme-studio/types.ts b/apps/docs/src/containers/theme-studio/types.ts
index 173db777e..0c8f3ada5 100644
--- a/apps/docs/src/containers/theme-studio/types.ts
+++ b/apps/docs/src/containers/theme-studio/types.ts
@@ -52,6 +52,7 @@ export interface ThemeEditorFields {
   h2Size: string;
   letterSpacing: string;
   radius: string;
+  shadowControl: string;
   shadowCard: string;
   shadowFocus: string;
   buttonRadius: string;
diff --git a/apps/docs/src/index.scss b/apps/docs/src/index.scss
index bbaaef1d9..76f6fdc9e 100755
--- a/apps/docs/src/index.scss
+++ b/apps/docs/src/index.scss
@@ -35,11 +35,11 @@ body {
   }
 
   &__layout {
-    padding: 40px 220px 40px #{$sidebar-width + 40px};
+    padding: 40px 220px 40px #{$sidebar-width + 20px};
     overflow-x: hidden;
 
     @media (max-width: $size-xl) {
-      padding: 40px 30px 40px #{$sidebar-width + 30px};
+      padding: 40px 30px 40px #{$sidebar-width + 20px};
     }
 
     @media (max-width: $size-md) {
diff --git a/packages/icons/src/icon-more.tsx b/packages/icons/src/icon-more.tsx
new file mode 100644
index 000000000..9443aabbc
--- /dev/null
+++ b/packages/icons/src/icon-more.tsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import type { IconProps } from './types';
+
+const IconMore = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
+  const { size = '1em', color = 'currentColor', className, style, ...rest } = props;
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 1024 1024"
+      width={size}
+      height={size}
+      fill="none"
+      className={className}
+      style={{ verticalAlign: 'middle', ...style }}
+      {...rest}
+    >
+      <circle cx="512" cy="207" r="72" fill={color} />
+      <circle cx="512" cy="512" r="72" fill={color} />
+      <circle cx="512" cy="817" r="72" fill={color} />
+    </svg>
+  );
+});
+
+IconMore.displayName = 'IconMore';
+
+export { IconMore };
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index c0bb0db3a..c6ceb9bed 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -8,6 +8,7 @@ export { IconColorlens } from './icon-colorlens';
 export { IconBrush } from './icon-brush';
 export { IconAccessible } from './icon-accessible';
 export { IconPlus } from './icon-plus';
+export { IconMore } from './icon-more';
 export { IconClose } from './icon-close';
 export { IconMinus } from './icon-minus';
 export { IconEye } from './icon-eye';
diff --git a/packages/react/SCSS_AUTHORING.md b/packages/react/SCSS_AUTHORING.md
index f8be00c41..827753e86 100644
--- a/packages/react/SCSS_AUTHORING.md
+++ b/packages/react/SCSS_AUTHORING.md
@@ -1,16 +1,19 @@
 # SCSS Authoring Spec
 
 ## Purpose
+
 This spec defines how component styles consume runtime theme tokens in `@tiny-design/react`. The goal is to keep existing class names and SCSS ergonomics while making every visual decision themeable through CSS custom properties.
 
 ## Rules
+
 1. SCSS defines structure, state, and selector relationships only.
 2. Visual values must come from `var(--ty-*)` tokens.
 3. New hard-coded colors, radii, shadows, font sizes, spacing, and motion values are not allowed.
-4. Component tokens use dot notation with kebab-case segments in source registries, for example `button.bg.primary-hover`.
+4. Component tokens use dot notation with kebab-case segments in source registries, for example `button.solid.primary.bg-hover`.
 5. CSS variables stay on the existing `--ty-*` prefix for v2 compatibility.
 
 ## Token Priority
+
 Use this fallback chain consistently:
 
 1. Component token
@@ -36,11 +39,13 @@ Direct semantic usage is only correct when the property should never diverge by
 ```
 
 ## Naming Conventions
+
 - Semantic CSS vars: `--ty-color-primary`, `--ty-border-radius`, `--ty-font-size-base`
-- Component CSS vars: `--ty-button-bg-primary`, `--ty-button-bg-primary-hover`, `--ty-card-header-padding`
+- Component CSS vars: `--ty-button-solid-primary-bg`, `--ty-button-solid-primary-bg-hover`, `--ty-card-header-padding`
 - Avoid aliases like `btn` or `picker` for new token names. Use full component names.
 
 ## Allowed Hard-coded Values
+
 Only structural values may be hard-coded when tokenizing them would not improve theming:
 
 - `display`, `position`, `flex`, `overflow`, `white-space`, `pointer-events`
@@ -51,6 +56,7 @@ Only structural values may be hard-coded when tokenizing them would not improve
 If a value affects brand, density, readability, affordance, or perceived motion, it must be tokenized.
 
 ## Examples
+
 Preferred:
 
 ```scss
@@ -58,8 +64,8 @@ Preferred:
   height: var(--ty-button-height-md, var(--ty-height-md));
   padding-inline: var(--ty-button-padding-inline-md, var(--ty-spacing-4));
   border-radius: var(--ty-button-radius, var(--ty-border-radius));
-  background: var(--ty-button-bg-primary, var(--ty-color-primary));
-  box-shadow: var(--ty-button-shadow-focus, var(--ty-shadow-focus));
+  background: var(--ty-button-solid-primary-bg, var(--ty-color-primary));
+  box-shadow: var(--ty-shadow-focus);
 }
 ```
 
@@ -75,6 +81,7 @@ Avoid:
 ```
 
 ## Migration Checklist
+
 When editing an existing component style file:
 
 1. Replace visual literals with `var(--ty-...)`.
diff --git a/packages/react/src/button/style/_mixin.scss b/packages/react/src/button/style/_mixin.scss
index 8fd2b6a45..39af557ab 100755
--- a/packages/react/src/button/style/_mixin.scss
+++ b/packages/react/src/button/style/_mixin.scss
@@ -2,17 +2,24 @@
   $color,
   $background,
   $border,
+  $shadow: null,
   $hover-background: null,
   $hover-border: null,
   $hover-color: $color,
+  $hover-shadow: $shadow,
   $active-background: null,
   $active-border: null,
-  $active-color: $color
+  $active-color: $color,
+  $active-shadow: $hover-shadow
 ) {
   color: $color;
   background: $background;
   border-color: $border;
 
+  @if $shadow {
+    box-shadow: $shadow;
+  }
+
   &:hover {
     color: $hover-color;
 
@@ -23,6 +30,10 @@
     @if $hover-border {
       border-color: $hover-border;
     }
+
+    @if $hover-shadow {
+      box-shadow: $hover-shadow;
+    }
   }
 
   &:focus {
@@ -36,6 +47,10 @@
       border-color: $hover-border;
     }
 
+    @if $hover-shadow {
+      box-shadow: $hover-shadow;
+    }
+
     z-index: 1;
   }
 
@@ -49,12 +64,17 @@
     @if $active-border {
       border-color: $active-border;
     }
+
+    @if $active-shadow {
+      box-shadow: $active-shadow;
+    }
   }
 
   &:disabled {
     color: var(--ty-button-disabled-text, var(--ty-color-text-quaternary));
     background-color: var(--ty-button-disabled-bg, var(--ty-color-bg-disabled));
     border-color: var(--ty-button-disabled-border, var(--ty-color-border));
+    box-shadow: none;
   }
 }
 
@@ -80,11 +100,15 @@
   $hover-text-fallback: $text-fallback,
   $active-bg-fallback: $hover-bg-fallback,
   $active-border-fallback: $hover-border-fallback,
-  $active-text-fallback: $hover-text-fallback
+  $active-text-fallback: $hover-text-fallback,
+  $shadow-fallback: none,
+  $hover-shadow-fallback: $shadow-fallback,
+  $active-shadow-fallback: $hover-shadow-fallback
 ) {
   --ty-button-current-text: var(--ty-button-#{$variant}-#{$color}-text, #{$text-fallback});
   --ty-button-current-bg: var(--ty-button-#{$variant}-#{$color}-bg, #{$bg-fallback});
   --ty-button-current-border: var(--ty-button-#{$variant}-#{$color}-border, #{$border-fallback});
+  --ty-button-current-shadow: var(--ty-button-#{$variant}-#{$color}-shadow, #{$shadow-fallback});
   --ty-button-current-text-hover: var(
     --ty-button-#{$variant}-#{$color}-text-hover,
     #{$hover-text-fallback}
@@ -97,6 +121,10 @@
     --ty-button-#{$variant}-#{$color}-border-hover,
     #{$hover-border-fallback}
   );
+  --ty-button-current-shadow-hover: var(
+    --ty-button-#{$variant}-#{$color}-shadow-hover,
+    #{$hover-shadow-fallback}
+  );
   --ty-button-current-text-active: var(
     --ty-button-#{$variant}-#{$color}-text-active,
     #{$active-text-fallback}
@@ -109,4 +137,8 @@
     --ty-button-#{$variant}-#{$color}-border-active,
     #{$active-border-fallback}
   );
+  --ty-button-current-shadow-active: var(
+    --ty-button-#{$variant}-#{$color}-shadow-active,
+    #{$active-shadow-fallback}
+  );
 }
diff --git a/packages/react/src/button/style/index.scss b/packages/react/src/button/style/index.scss
index 7b33127cb..1cc18816e 100755
--- a/packages/react/src/button/style/index.scss
+++ b/packages/react/src/button/style/index.scss
@@ -41,12 +41,15 @@ $btn-prefix: #{$prefix}-btn;
     var(--ty-button-current-text),
     var(--ty-button-current-bg),
     var(--ty-button-current-border),
+    var(--ty-button-current-shadow, none),
     var(--ty-button-current-bg-hover),
     var(--ty-button-current-border-hover),
     var(--ty-button-current-text-hover),
+    var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none)),
     var(--ty-button-current-bg-active),
     var(--ty-button-current-border-active),
-    var(--ty-button-current-text-active)
+    var(--ty-button-current-text-active),
+    var(--ty-button-current-shadow-active, var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none)))
   );
 
   &__loader {
@@ -88,7 +91,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-primary),
         var(--ty-color-fill),
         var(--ty-color-primary),
-        var(--ty-color-primary)
+        var(--ty-color-primary),
+        var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none)),
+        var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none))),
+        var(--ty-button-solid-default-shadow-active, var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none))))
       );
     }
 
@@ -104,7 +110,10 @@ $btn-prefix: #{$prefix}-btn;
         #fff,
         var(--ty-color-primary-active),
         var(--ty-color-primary-active),
-        #fff
+        #fff,
+        none,
+        none,
+        none
       );
     }
 
@@ -120,7 +129,10 @@ $btn-prefix: #{$prefix}-btn;
         #fff,
         var(--ty-color-info-active),
         var(--ty-color-info-active),
-        #fff
+        #fff,
+        none,
+        none,
+        none
       );
     }
 
@@ -136,7 +148,10 @@ $btn-prefix: #{$prefix}-btn;
         #fff,
         var(--ty-color-success-active),
         var(--ty-color-success-active),
-        #fff
+        #fff,
+        none,
+        none,
+        none
       );
     }
 
@@ -152,7 +167,10 @@ $btn-prefix: #{$prefix}-btn;
         #fff,
         var(--ty-color-warning-active),
         var(--ty-color-warning-active),
-        #fff
+        #fff,
+        none,
+        none,
+        none
       );
     }
 
@@ -168,7 +186,10 @@ $btn-prefix: #{$prefix}-btn;
         #fff,
         var(--ty-color-danger-active),
         var(--ty-color-danger-active),
-        #fff
+        #fff,
+        none,
+        none,
+        none
       );
     }
   }
@@ -186,7 +207,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-text),
         var(--ty-color-fill-secondary),
         var(--ty-color-border-secondary),
-        var(--ty-color-text)
+        var(--ty-color-text),
+        var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none)),
+        var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none))),
+        var(--ty-button-outline-default-shadow-active, var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none))))
       );
     }
 
@@ -202,7 +226,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-primary),
         var(--ty-color-primary-bg-hover),
         var(--ty-color-primary-active),
-        var(--ty-color-primary)
+        var(--ty-color-primary),
+        none,
+        none,
+        none
       );
     }
 
@@ -218,7 +245,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-info),
         rgba(64, 169, 255, 0.18),
         var(--ty-color-info-active),
-        var(--ty-color-info)
+        var(--ty-color-info),
+        none,
+        none,
+        none
       );
     }
 
@@ -234,7 +264,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-success),
         rgba(82, 196, 26, 0.18),
         var(--ty-color-success-active),
-        var(--ty-color-success)
+        var(--ty-color-success),
+        none,
+        none,
+        none
       );
     }
 
@@ -250,7 +283,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-warning),
         rgba(250, 173, 20, 0.18),
         var(--ty-color-warning-active),
-        var(--ty-color-warning)
+        var(--ty-color-warning),
+        none,
+        none,
+        none
       );
     }
 
@@ -266,7 +302,10 @@ $btn-prefix: #{$prefix}-btn;
         var(--ty-color-danger),
         rgba(255, 77, 79, 0.18),
         var(--ty-color-danger-active),
-        var(--ty-color-danger)
+        var(--ty-color-danger),
+        none,
+        none,
+        none
       );
     }
   }
diff --git a/packages/react/src/checkbox/style/index.scss b/packages/react/src/checkbox/style/index.scss
index 605cb96c8..368871388 100644
--- a/packages/react/src/checkbox/style/index.scss
+++ b/packages/react/src/checkbox/style/index.scss
@@ -36,6 +36,7 @@
     border-radius: var(--ty-checkbox-radius, 2px);
     border: 1px solid var(--ty-checkbox-border, var(--ty-color-border));
     background-color: var(--ty-checkbox-bg, var(--ty-color-bg-container));
+    box-shadow: var(--ty-checkbox-shadow, none);
     transition: 200ms;
     line-height: 1;
     vertical-align: middle;
diff --git a/packages/react/src/input/style/_mixin.scss b/packages/react/src/input/style/_mixin.scss
index c4295d4e9..effb2ce88 100755
--- a/packages/react/src/input/style/_mixin.scss
+++ b/packages/react/src/input/style/_mixin.scss
@@ -12,6 +12,7 @@
   border-radius: var(--ty-input-radius, var(--ty-border-radius));
   font-size: var(--ty-input-font-size-md, var(--ty-font-size-base));
   background-color: var(--ty-input-bg, var(--ty-color-bg-container));
+  box-shadow: var(--ty-input-shadow, none);
 
   &:hover {
     border-color: var(--ty-input-border-hover, var(--ty-color-primary));
diff --git a/packages/react/src/input/style/index.scss b/packages/react/src/input/style/index.scss
index 98f1a9475..476838b40 100755
--- a/packages/react/src/input/style/index.scss
+++ b/packages/react/src/input/style/index.scss
@@ -12,6 +12,7 @@
   border: 1px solid var(--ty-input-border);
   border-radius: var(--ty-input-radius, var(--ty-border-radius));
   background-color: var(--ty-input-bg, var(--ty-color-bg-container));
+  box-shadow: var(--ty-input-shadow, none);
   transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
 
   &:hover {
diff --git a/packages/react/src/radio/style/index.scss b/packages/react/src/radio/style/index.scss
index 939a2d589..8ee66ad87 100644
--- a/packages/react/src/radio/style/index.scss
+++ b/packages/react/src/radio/style/index.scss
@@ -29,6 +29,7 @@
     border-radius: 100%;
     background-color: var(--ty-radio-bg, var(--ty-color-bg-container));
     border: 1px solid var(--ty-radio-border, var(--ty-color-primary));
+    box-shadow: var(--ty-radio-shadow, none);
     align-items: center;
     justify-content: center;
 
diff --git a/packages/react/src/select/style/index.scss b/packages/react/src/select/style/index.scss
index 4bd491a06..797556247 100644
--- a/packages/react/src/select/style/index.scss
+++ b/packages/react/src/select/style/index.scss
@@ -64,6 +64,7 @@
     border: 1px solid var(--ty-select-border, var(--ty-input-border, var(--ty-color-border)));
     border-radius: var(--ty-select-radius, var(--ty-border-radius));
     background-color: var(--ty-select-bg, var(--ty-input-bg, var(--ty-color-bg-container)));
+    box-shadow: var(--ty-select-shadow, var(--ty-input-shadow, none));
     box-sizing: border-box;
     transition: all 0.3s;
 
diff --git a/packages/tokens/REGISTRY_SPEC.md b/packages/tokens/REGISTRY_SPEC.md
index 8fae22c4e..ddce407fa 100644
--- a/packages/tokens/REGISTRY_SPEC.md
+++ b/packages/tokens/REGISTRY_SPEC.md
@@ -1,6 +1,7 @@
 # Token Registry Spec
 
 ## Purpose
+
 The token registry is the canonical machine-readable index of all supported v2 tokens. It is generated from JSON token sources and consumed by:
 
 - Theme Studio
@@ -11,6 +12,7 @@ The token registry is the canonical machine-readable index of all supported v2 t
 The registry is metadata, not a theme document. It describes what tokens exist, how they map to CSS variables, and what fallback behavior they expect.
 
 ## Output Location
+
 The build step should generate:
 
 - `packages/tokens/dist/registry.json`
@@ -30,8 +32,8 @@ The build step should generate:
 
 ```json
 {
-  "key": "button.bg.primary",
-  "cssVar": "--ty-button-bg-primary",
+  "key": "button.solid.primary.bg",
+  "cssVar": "--ty-button-solid-primary-bg",
   "category": "component",
   "component": "button",
   "type": "color",
@@ -45,6 +47,7 @@ The build step should generate:
 ```
 
 ## Required Fields
+
 - `key`
 - `cssVar`
 - `category`
@@ -53,9 +56,10 @@ The build step should generate:
 - `status`
 
 ## Field Definitions
+
 - `key`
   Stable token id in dot notation with kebab-case segments.
-  Examples: `color-primary`, `button.bg.primary`, `card.header-padding`
+  Examples: `color-primary`, `button.solid.primary.bg`, `card.header-padding`
 - `cssVar`
   Public runtime CSS variable name.
 - `category`
@@ -76,23 +80,28 @@ The build step should generate:
   Recommended component style fallback target. This field is guidance metadata for component authors and docs tooling; it does not mean the build step will emit an automatic fallback chain in generated CSS.
 - `status`
   One of: `active`, `deprecated`, `internal`
+
 ## Naming Rules
+
 - `key` must match the theme schema token key pattern.
 - `cssVar` must always use kebab-case.
 - `component` names must use full nouns such as `button`, `input`, `card`.
 - New entries must use the primary v2 names directly. Short prefixes like `btn`, `picker`, or `kbd` are not allowed.
 
 ## Fallback Rules
+
 - Primitive tokens should not appear in authored component source styles.
 - Semantic tokens usually have no registry fallback.
 - Component tokens should include the semantic fallback they are expected to use in authored component source styles.
 
 Examples:
-- `button.bg.primary` -> fallback `--ty-color-primary`
+
+- `button.solid.primary.bg` -> fallback `--ty-color-primary`
 - `button.radius` -> fallback `--ty-border-radius`
 - `card.bg` -> fallback `--ty-color-bg-container`
 
 ## Status Rules
+
 - `active`
   Visible in Theme Studio and allowed in theme documents.
 - `deprecated`
@@ -132,6 +141,7 @@ Examples:
 ```
 
 ## Validation Rules
+
 Build should fail when:
 
 1. Two entries share the same `key`
diff --git a/packages/tokens/source/components/button.json b/packages/tokens/source/components/button.json
index 0dc4fc662..58412ab26 100644
--- a/packages/tokens/source/components/button.json
+++ b/packages/tokens/source/components/button.json
@@ -44,6 +44,42 @@
     "$type": "number",
     "description": "Overlay opacity during button loading state."
   },
+  "button.solid.default.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "solid default button shadow.",
+    "fallback": "--ty-shadow-control"
+  },
+  "button.solid.default.shadow-hover": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "solid default button hover shadow.",
+    "fallback": "--ty-shadow-control"
+  },
+  "button.solid.default.shadow-active": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "solid default button active shadow.",
+    "fallback": "--ty-shadow-control"
+  },
+  "button.outline.default.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "outline default button shadow.",
+    "fallback": "--ty-shadow-control"
+  },
+  "button.outline.default.shadow-hover": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "outline default button hover shadow.",
+    "fallback": "--ty-shadow-control"
+  },
+  "button.outline.default.shadow-active": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "outline default button active shadow.",
+    "fallback": "--ty-shadow-control"
+  },
   "button.font-size-sm": {
     "$value": "{control.font-size.sm}",
     "$type": "dimension",
diff --git a/packages/tokens/source/components/checkbox.json b/packages/tokens/source/components/checkbox.json
index bcb07dfce..3e016ae90 100644
--- a/packages/tokens/source/components/checkbox.json
+++ b/packages/tokens/source/components/checkbox.json
@@ -37,6 +37,12 @@
     "description": "Checkbox border color.",
     "fallback": "--ty-color-border"
   },
+  "checkbox.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "Checkbox control shadow.",
+    "fallback": "--ty-shadow-control"
+  },
   "checkbox.border.hover": {
     "$value": "{color-primary}",
     "$type": "color",
diff --git a/packages/tokens/source/components/input.json b/packages/tokens/source/components/input.json
index 580fff68f..946394b47 100644
--- a/packages/tokens/source/components/input.json
+++ b/packages/tokens/source/components/input.json
@@ -29,6 +29,12 @@
     "description": "Input border color.",
     "fallback": "--ty-color-border"
   },
+  "input.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "Input surface shadow.",
+    "fallback": "--ty-shadow-control"
+  },
   "input.border.hover": {
     "$value": "{color-primary}",
     "$type": "color",
diff --git a/packages/tokens/source/components/radio.json b/packages/tokens/source/components/radio.json
index 8be065623..28a309813 100644
--- a/packages/tokens/source/components/radio.json
+++ b/packages/tokens/source/components/radio.json
@@ -32,6 +32,12 @@
     "description": "Radio border color.",
     "fallback": "--ty-color-primary"
   },
+  "radio.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "Radio control shadow.",
+    "fallback": "--ty-shadow-control"
+  },
   "radio.border.checked": {
     "$value": "{color-primary}",
     "$type": "color",
diff --git a/packages/tokens/source/components/select.json b/packages/tokens/source/components/select.json
index e044d6e52..e675bc9c0 100644
--- a/packages/tokens/source/components/select.json
+++ b/packages/tokens/source/components/select.json
@@ -34,6 +34,12 @@
     "description": "Select trigger border color.",
     "fallback": "--ty-color-border"
   },
+  "select.shadow": {
+    "$value": "{shadow-control}",
+    "$type": "shadow",
+    "description": "Select trigger surface shadow.",
+    "fallback": "--ty-shadow-control"
+  },
   "select.border.hover": {
     "$value": "{color-primary}",
     "$type": "color",
diff --git a/packages/tokens/source/schema/theme.schema.json b/packages/tokens/source/schema/theme.schema.json
index b9b9a9be5..8c87b4eeb 100644
--- a/packages/tokens/source/schema/theme.schema.json
+++ b/packages/tokens/source/schema/theme.schema.json
@@ -125,8 +125,8 @@
           "border-radius": "12px"
         },
         "components": {
-          "button.bg.primary": "#3b82f6",
-          "button.bg.primary-hover": "#2563eb",
+          "button.solid.primary.bg": "#3b82f6",
+          "button.solid.primary.bg-hover": "#2563eb",
           "button.radius": "999px",
           "card.header-padding": "16px 20px"
         }
diff --git a/packages/tokens/source/semantic/effects.json b/packages/tokens/source/semantic/effects.json
index 38c966769..76ff5b97a 100644
--- a/packages/tokens/source/semantic/effects.json
+++ b/packages/tokens/source/semantic/effects.json
@@ -1,4 +1,9 @@
 {
+  "shadow-control": {
+    "$value": "none",
+    "$type": "shadow",
+    "description": "Control surface shadow used by input-like components and neutral buttons."
+  },
   "shadow-btn": {
     "$value": "inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075)",
     "$type": "shadow",