@archetypeai/ds-cli 0.3.16 → 0.3.18

package/README.md

@@ -26,13 +26,19 @@ Sets up a SvelteKit + Tailwind v4 + shadcn-svelte project with design tokens, co
 |------|--------|---------|
 | `--framework` | `svelte` | prompt |
 | `--pm` | `npm`, `pnpm`, `bun`, `yarn` | prompt |
+| `--fonts <path>` | path to PP Neue Montreal fonts folder | prompt |
+| `--no-fonts` | skip font installation (use system fallback) | — |
 | `--no-components` | skip component install | install all |
 | `--codeagent` | `cursor`, `claude`, `none` | prompt |
+| `--defaults` | force non-interactive mode | — |
 
 ```bash
-npx @archetypeai/ds-cli create my-app --framework svelte --pm pnpm --codeagent none
+npx @archetypeai/ds-cli create my-app --pm pnpm --no-fonts --codeagent claude
+npx @archetypeai/ds-cli create my-app --pm npm --fonts /path/to/fonts --codeagent claude
 ```
 
+**Non-interactive mode** (no TTY or `--defaults`): all required flags must be specified. The CLI lists missing options and exits so agents can ask the user before proceeding.
+
 ---
 
 ### `init` → Add DS to an existing project
@@ -47,11 +53,15 @@ Run from a SvelteKit project root. Auto-detects your package manager, installs t
 | Flag | Values | Default |
 |------|--------|---------|
 | `--pm` | `npm`, `pnpm`, `bun`, `yarn` | auto-detect |
+| `--fonts <path>` | path to PP Neue Montreal fonts folder | prompt |
+| `--no-fonts` | skip font installation (use system fallback) | — |
 | `--no-components` | skip component install | install all |
 | `--codeagent` | `cursor`, `claude`, `none` | prompt |
+| `--defaults` | force non-interactive mode | — |
 
 ```bash
-npx @archetypeai/ds-cli init --pm npm --codeagent none
+npx @archetypeai/ds-cli init --pm npm --no-fonts --codeagent claude
+npx @archetypeai/ds-cli init --pm npm --fonts /path/to/fonts --codeagent claude
 ```
 
 ---

package/bin.js

@@ -28,19 +28,22 @@ Usage:
 Create flags:
   --framework <svelte>              Framework to use (default: prompt)
   --pm <npm|pnpm|bun|yarn>          Package manager (default: prompt)
-  --fonts / --no-fonts              Install internal fonts (default: prompt)
+  --fonts <path>                    Install fonts from local folder
+  --no-fonts                        Skip font installation
   --no-components                   Skip component installation (default: install all)
   --codeagent <cursor|claude|none>  Agent configuration (default: prompt)
   --defaults                        Skip prompts, use sensible defaults
 
 Init flags:
   --pm <npm|pnpm|bun|yarn>          Package manager (default: auto-detect)
-  --fonts / --no-fonts              Install internal fonts (default: prompt)
+  --fonts <path>                    Install fonts from local folder
+  --no-fonts                        Skip font installation
   --no-components                   Skip component installation (default: install all)
   --codeagent <cursor|claude|none>  Agent configuration (default: prompt)
-  --defaults                        Skip prompts, use sensible defaults
+  --defaults                        Force non-interactive mode
 
-Non-interactive shells (no TTY) automatically use defaults.
+Non-interactive mode (no TTY or --defaults):
+  All required options must be specified via flags. Missing options are listed and the CLI exits.
 
 Add targets:
   ds-ui-svelte                      Install all design system components

package/commands/create.js

@@ -14,7 +14,8 @@ import {
   createDemoPage,
   installAgentConfig
 } from '../lib/scaffold-ds-svelte-project.js';
-import { isInteractive, DEFAULTS, logDefaultsNotice } from '../lib/is-interactive.js';
+import { validateFontsPath, installLocalFonts } from '../lib/install-fonts-local.js';
+import { isInteractive, DEFAULTS } from '../lib/is-interactive.js';
 
 // parse flags
 export function parseFlags(args) {
@@ -22,6 +23,7 @@ export function parseFlags(args) {
     name: null,
     framework: null,
     pm: null,
+    fonts: null,
     components: true,
     agent: null,
     defaults: false
@@ -33,6 +35,10 @@ export function parseFlags(args) {
       flags.framework = args[++i];
     } else if (arg === '--pm' && args[i + 1]) {
       flags.pm = args[++i];
+    } else if (arg === '--fonts' && args[i + 1]) {
+      flags.fonts = args[++i];
+    } else if (arg === '--no-fonts') {
+      flags.fonts = false;
     } else if (arg === '--no-components') {
       flags.components = false;
     } else if (arg === '--codeagent' && args[i + 1]) {
@@ -52,6 +58,30 @@ export async function create(args) {
   const flags = parseFlags(args);
   const interactive = isInteractive(flags);
 
+  // preflight: in non-interactive mode, list all unspecified options and exit
+  if (!interactive) {
+    const missing = [];
+    if (!flags.name)
+      missing.push('  <project-name>                     Project name (positional argument)');
+    if (!flags.pm) missing.push('  --pm <npm (default)|pnpm|bun|yarn> Package manager');
+    if (flags.fonts === null)
+      missing.push('  --fonts <path> | --no-fonts        Internal fonts (PP Neue Montreal)');
+    if (!flags.agent) missing.push('  --codeagent <cursor|claude|none>   AI agent configuration');
+
+    if (missing.length > 0) {
+      console.log(
+        '[CONFIGURATION REQUIRED] Do not assume defaults. Ask the user to choose each option:\n\n' +
+          missing.join('\n') +
+          '\n\nOptional:\n' +
+          '  --no-components                    Skip component installation\n\n' +
+          'Once the user has answered, re-run with their choices:\n' +
+          '  ds create my-app --pm <choice> --fonts <path> --codeagent <choice>\n' +
+          '  ds create my-app --pm <choice> --no-fonts --codeagent <choice>\n'
+      );
+      process.exit(1);
+    }
+  }
+
   p.intro('Create a new project using Archetype AI Design System.');
 
   // specify project name
@@ -95,44 +125,87 @@ export async function create(args) {
     process.exit(1);
   }
 
-  // specify framework
-  let framework = flags.framework;
-  if (!framework) {
-    if (!interactive) {
-      framework = DEFAULTS.framework;
-    } else {
-      framework = await p.select({
-        message: 'Which framework?',
-        options: [{ value: 'svelte', label: 'SvelteKit', hint: 'Svelte 5 + Tailwind v4, default' }]
-      });
-      if (p.isCancel(framework)) {
-        p.cancel('Setup cancelled.');
-        process.exit(0);
-      }
+  // specify framework (only svelte supported, default silently)
+  let framework = flags.framework || 'svelte';
+  if (!flags.framework && interactive) {
+    framework = await p.select({
+      message: 'Which framework?',
+      options: [{ value: 'svelte', label: 'SvelteKit', hint: 'Svelte 5 + Tailwind v4, default' }]
+    });
+    if (p.isCancel(framework)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
     }
   }
 
   // specify package manager
   let pmName = flags.pm;
   if (!pmName) {
-    if (!interactive) {
-      pmName = DEFAULTS.pm;
+    pmName = await p.select({
+      message: 'Which package manager?',
+      options: pmNames.map((n) => ({
+        value: n,
+        label: n,
+        ...(n === DEFAULTS.pm && { hint: 'default' })
+      }))
+    });
+    if (p.isCancel(pmName)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
+    }
+  }
+  const pm = getPm(pmName);
+
+  // specify fonts
+  let fontsPath = null;
+  let includeFonts = false;
+  if (flags.fonts === false) {
+    // --no-fonts: skip
+  } else if (typeof flags.fonts === 'string') {
+    fontsPath = flags.fonts;
+    const result = validateFontsPath(fontsPath);
+    if (!result.valid) {
+      if (!interactive) {
+        p.log.error(result.error);
+        process.exit(1);
+      }
+      p.log.warn(result.error);
+      p.log.warn('Continuing without fonts.');
+      fontsPath = null;
     } else {
-      pmName = await p.select({
-        message: 'Which package manager?',
-        options: pmNames.map((n) => ({
-          value: n,
-          label: n,
-          ...(n === DEFAULTS.pm && { hint: 'default' })
-        }))
+      includeFonts = true;
+    }
+  } else {
+    const useFonts = await p.confirm({
+      message: 'Do you want to use internal fonts?',
+      initialValue: false
+    });
+    if (p.isCancel(useFonts)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
+    }
+    if (useFonts) {
+      const fontInput = await p.text({
+        message: 'Drop your fonts folder here:',
+        placeholder: '/path/to/fonts'
       });
-      if (p.isCancel(pmName)) {
+      if (p.isCancel(fontInput)) {
         p.cancel('Setup cancelled.');
         process.exit(0);
       }
+      if (fontInput && fontInput.trim()) {
+        fontsPath = fontInput.trim();
+        const result = validateFontsPath(fontsPath);
+        if (!result.valid) {
+          p.log.warn(result.error);
+          p.log.warn('Continuing without fonts.');
+          fontsPath = null;
+        } else {
+          includeFonts = true;
+        }
+      }
     }
   }
-  const pm = getPm(pmName);
 
   // verify package manager is installed
   if (!isPmInstalled(pmName)) {
@@ -177,8 +250,22 @@ export async function create(args) {
   // init shadcn-svelte
   await initShadcn(pm, projectPath);
 
+  // install local fonts
+  if (includeFonts && fontsPath) {
+    const s = p.spinner();
+    s.start('Installing fonts');
+    const fontResult = installLocalFonts(fontsPath, projectPath);
+    if (fontResult.success) {
+      s.stop(`${fontResult.fileCount} font files installed`);
+    } else {
+      s.stop('Failed to install fonts');
+      p.log.warn(fontResult.error);
+      p.log.warn('Continuing without fonts.');
+      includeFonts = false;
+    }
+  }
+
   // configure CSS
-  const includeFonts = false;
   configureCss(projectPath, includeFonts);
 
   // set up linting and formatting
@@ -202,33 +289,20 @@ export async function create(args) {
   // specify agent config
   let agent = flags.agent;
   if (!agent) {
-    if (!interactive) {
-      agent = DEFAULTS.agent;
-    } else {
-      agent = await p.select({
-        message: 'Install AI agent configuration?',
-        options: [
-          { value: 'none', label: 'None' },
-          { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + skills + rules' },
-          { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + skills + rules, default' }
-        ]
-      });
-      if (p.isCancel(agent)) {
-        p.cancel('Setup cancelled.');
-        process.exit(0);
-      }
+    agent = await p.select({
+      message: 'Install AI agent configuration?',
+      options: [
+        { value: 'none', label: 'None' },
+        { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + skills + rules' },
+        { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + skills + rules, default' }
+      ]
+    });
+    if (p.isCancel(agent)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
     }
   }
 
-  // log defaults notice
-  if (!interactive) {
-    const applied = {};
-    if (!flags.framework) applied.framework = framework;
-    if (!flags.pm) applied.pm = pmName;
-    if (!flags.agent) applied.codeagent = agent;
-    logDefaultsNotice(applied);
-  }
-
   const validAgents = ['cursor', 'claude', 'none'];
   if (!validAgents.includes(agent)) {
     p.log.error(`Invalid --codeagent value "${agent}". Must be one of: ${validAgents.join(', ')}`);

package/commands/init.js

@@ -13,12 +13,14 @@ import {
   installComponents,
   installAgentConfig
 } from '../lib/scaffold-ds-svelte-project.js';
-import { isInteractive, DEFAULTS, logDefaultsNotice } from '../lib/is-interactive.js';
+import { validateFontsPath, installLocalFonts } from '../lib/install-fonts-local.js';
+import { isInteractive, DEFAULTS } from '../lib/is-interactive.js';
 
 // parse flags
 export function parseFlags(args) {
   const flags = {
     pm: null,
+    fonts: null,
     components: true,
     agent: null,
     defaults: false
@@ -28,6 +30,10 @@ export function parseFlags(args) {
     const arg = args[i];
     if (arg === '--pm' && args[i + 1]) {
       flags.pm = args[++i];
+    } else if (arg === '--fonts' && args[i + 1]) {
+      flags.fonts = args[++i];
+    } else if (arg === '--no-fonts') {
+      flags.fonts = false;
     } else if (arg === '--no-components') {
       flags.components = false;
     } else if (arg === '--codeagent' && args[i + 1]) {
@@ -57,6 +63,29 @@ export async function init(args) {
   const interactive = isInteractive(flags);
   const projectPath = process.cwd();
 
+  // preflight: in non-interactive mode, list all unspecified options and exit
+  if (!interactive) {
+    const missing = [];
+    if (!flags.pm && !detectPm(projectPath))
+      missing.push('  --pm <npm (default)|pnpm|bun|yarn> Package manager');
+    if (flags.fonts === null)
+      missing.push('  --fonts <path> | --no-fonts        Internal fonts (PP Neue Montreal)');
+    if (!flags.agent) missing.push('  --codeagent <cursor|claude|none>   AI agent configuration');
+
+    if (missing.length > 0) {
+      console.log(
+        '[CONFIGURATION REQUIRED] Do not assume defaults. Ask the user to choose each option:\n\n' +
+          missing.join('\n') +
+          '\n\nOptional:\n' +
+          '  --no-components                    Skip component installation\n\n' +
+          'Once the user has answered, re-run with their choices:\n' +
+          '  ds init --pm <choice> --fonts <path> --codeagent <choice>\n' +
+          '  ds init --pm <choice> --no-fonts --codeagent <choice>\n'
+      );
+      process.exit(1);
+    }
+  }
+
   // validate --pm flag
   if (flags.pm && !pmNames.includes(flags.pm)) {
     p.log.error(`Invalid --pm value "${flags.pm}". Must be one of: ${pmNames.join(', ')}`);
@@ -91,32 +120,71 @@ export async function init(args) {
     }
   }
   if (!pmName) {
-    if (!interactive) {
-      pmName = DEFAULTS.pm;
+    pmName = await p.select({
+      message: 'Which package manager?',
+      options: pmNames.map((n) => ({
+        value: n,
+        label: n,
+        ...(n === DEFAULTS.pm && { hint: 'default' })
+      }))
+    });
+    if (p.isCancel(pmName)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
+    }
+  }
+  const pm = getPm(pmName);
+
+  // specify fonts
+  let fontsPath = null;
+  let includeFonts = false;
+  if (flags.fonts === false) {
+    // --no-fonts: skip
+  } else if (typeof flags.fonts === 'string') {
+    fontsPath = flags.fonts;
+    const result = validateFontsPath(fontsPath);
+    if (!result.valid) {
+      if (!interactive) {
+        p.log.error(result.error);
+        process.exit(1);
+      }
+      p.log.warn(result.error);
+      p.log.warn('Continuing without fonts.');
+      fontsPath = null;
     } else {
-      pmName = await p.select({
-        message: 'Which package manager?',
-        options: pmNames.map((n) => ({
-          value: n,
-          label: n,
-          ...(n === DEFAULTS.pm && { hint: 'default' })
-        }))
+      includeFonts = true;
+    }
+  } else {
+    const useFonts = await p.confirm({
+      message: 'Do you want to use internal fonts?',
+      initialValue: false
+    });
+    if (p.isCancel(useFonts)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
+    }
+    if (useFonts) {
+      const fontInput = await p.text({
+        message: 'Drop your fonts folder here:',
+        placeholder: '/path/to/fonts'
       });
-      if (p.isCancel(pmName)) {
+      if (p.isCancel(fontInput)) {
         p.cancel('Setup cancelled.');
         process.exit(0);
       }
+      if (fontInput && fontInput.trim()) {
+        fontsPath = fontInput.trim();
+        const result = validateFontsPath(fontsPath);
+        if (!result.valid) {
+          p.log.warn(result.error);
+          p.log.warn('Continuing without fonts.');
+          fontsPath = null;
+        } else {
+          includeFonts = true;
+        }
+      }
     }
   }
-  const pm = getPm(pmName);
-
-  // log defaults notice
-  if (!interactive) {
-    const applied = {};
-    if (!flags.pm) applied.pm = pmName;
-    if (!flags.agent) applied.codeagent = DEFAULTS.agent;
-    logDefaultsNotice(applied);
-  }
 
   // verify package manager is installed
   if (!isPmInstalled(pmName)) {
@@ -142,8 +210,22 @@ export async function init(args) {
   // init shadcn-svelte
   await initShadcn(pm, projectPath);
 
+  // install local fonts
+  if (includeFonts && fontsPath) {
+    const s = p.spinner();
+    s.start('Installing fonts');
+    const fontResult = installLocalFonts(fontsPath, projectPath);
+    if (fontResult.success) {
+      s.stop(`${fontResult.fileCount} font files installed`);
+    } else {
+      s.stop('Failed to install fonts');
+      p.log.warn(fontResult.error);
+      p.log.warn('Continuing without fonts.');
+      includeFonts = false;
+    }
+  }
+
   // configure CSS (prepend to existing)
-  const includeFonts = false;
   prependCss(projectPath, includeFonts);
 
   // set up linting and formatting
@@ -167,21 +249,17 @@ export async function init(args) {
   // specify agent config
   let agent = flags.agent;
   if (!agent) {
-    if (!interactive) {
-      agent = DEFAULTS.agent;
-    } else {
-      agent = await p.select({
-        message: 'Install AI agent configuration?',
-        options: [
-          { value: 'none', label: 'None' },
-          { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + skills + rules' },
-          { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + skills + rules, default' }
-        ]
-      });
-      if (p.isCancel(agent)) {
-        p.cancel('Setup cancelled.');
-        process.exit(0);
-      }
+    agent = await p.select({
+      message: 'Install AI agent configuration?',
+      options: [
+        { value: 'none', label: 'None' },
+        { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + skills + rules' },
+        { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + skills + rules, default' }
+      ]
+    });
+    if (p.isCancel(agent)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
     }
   }
 

package/files/AGENTS.md

@@ -44,8 +44,24 @@ Standard Tailwind is fine for:
 - **Variants**: `tailwind-variants` (tv) for component variants
 - **Slots**: `{@render children?.()}`
 
+## Pattern Registry
+
+Before building a new component, fetch the pattern catalog from:
+`https://design-system.archetypeai.workers.dev/r/patterns.json`
+
+Each entry includes a `name`, `title`, `description`, and `registryDependencies`. Reuse or extend existing patterns instead of rebuilding from scratch.
+
+Before installing, check if the pattern already exists locally in `$lib/components/ui/patterns/{name}/`. Only install if it is missing:
+`npx shadcn-svelte@latest add https://design-system.archetypeai.workers.dev/r/{name}.json`
+
 ## Skills
 
+**Skill composition:** When building a demo that uses a Newton or Embedding API skill:
+1. Use `@skills/create-dashboard` for the page layout (dashboard with Menubar)
+2. Fetch `https://design-system.archetypeai.workers.dev/r/patterns.json` and reuse existing patterns before creating new components
+3. Apply `@rules/design-principles` aesthetic conventions (BackgroundCard for single-purpose cards, mono font for headers/numbers)
+4. Only include chart components if the user's request involves time-series or explicitly mentions charts
+
 Read these when relevant to your task:
 
 - `@skills/apply-ds` - apply DS tokens, components, and patterns to an existing demo

package/files/CLAUDE.md

@@ -44,9 +44,23 @@ Standard Tailwind is fine for:
 - **Variants**: `tailwind-variants` (tv) for component variants
 - **Slots**: `{@render children?.()}`
 
+## Pattern Registry
+
+Before building a new component, fetch the pattern catalog from:
+`https://design-system.archetypeai.workers.dev/r/patterns.json`
+
+Each entry includes a `name`, `title`, `description`, and `registryDependencies`. Reuse or extend existing patterns instead of rebuilding from scratch.
+
+Before installing, check if the pattern already exists locally in `$lib/components/ui/patterns/{name}/`. Only install if it is missing:
+`npx shadcn-svelte@latest add https://design-system.archetypeai.workers.dev/r/{name}.json`
+
 ## Skills
 
-**Skill composition:** When building a demo that uses a Newton or Embedding API skill, also consult `@skills/create-dashboard` for dashboard layouts and `@skills/build-pattern` for extracting components. Only include chart components (SensorChart, ScatterChart) if the user's request involves time-series or explicitly mentions charts.
+**Skill composition:** When building a demo that uses a Newton or Embedding API skill:
+1. Use `@skills/create-dashboard` for the page layout (dashboard with Menubar)
+2. Fetch `https://design-system.archetypeai.workers.dev/r/patterns.json` and reuse existing patterns before creating new components
+3. Apply `@rules/design-principles` aesthetic conventions (BackgroundCard for single-purpose cards, mono font for headers/numbers)
+4. Only include chart components if the user's request involves time-series or explicitly mentions charts
 
 Read these when relevant to your task:
 

package/files/rules/charts.md

@@ -253,100 +253,4 @@ Manual legend below chart:
 {/if}
 ```
 
-## Complete SensorChart Example
-
-```svelte
-<script>
-  import { cn } from '$lib/utils.js';
-  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/primitives/card/index.js';
-  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
-  import { LineChart } from 'layerchart';
-  import { curveNatural } from 'd3-shape';
-  import { scaleUtc, scaleLinear } from 'd3-scale';
-
-  let {
-    title = 'SENSOR',
-    icon: Icon = undefined,
-    data = [],
-    signals = {},
-    xKey = 'timestamp',
-    maxPoints = undefined,
-    yMin,
-    yMax,
-    yTicks,
-    class: className,
-    ...restProps
-  } = $props();
-
-  const chartColors = [
-    'var(--chart-1)',
-    'var(--chart-2)',
-    'var(--chart-3)',
-    'var(--chart-4)',
-    'var(--chart-5)'
-  ];
-
-  let displayData = $derived(maxPoints && data.length > maxPoints ? data.slice(-maxPoints) : data);
-
-  let indexedData = $derived(displayData.map((d, i) => ({ ...d, _index: i })));
-
-  let series = $derived(
-    Object.entries(signals).map(([key, label], i) => ({
-      key,
-      label,
-      color: chartColors[i % chartColors.length]
-    }))
-  );
-
-  let chartConfig = $derived(
-    Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]))
-  );
-
-  let useIndexX = $derived(maxPoints !== undefined);
-  let xDomain = $derived(useIndexX ? [0, (maxPoints || displayData.length) - 1] : undefined);
-</script>
-
-<Card class={cn('p-4', className)} {...restProps}>
-  <CardHeader class="flex flex-row items-center justify-between p-0">
-    <CardTitle class="text-foreground font-mono text-base uppercase">
-      {title}
-    </CardTitle>
-    {#if Icon}
-      <Icon strokeWidth={1.25} class="text-muted-foreground size-6" />
-    {/if}
-  </CardHeader>
-
-  <CardContent class="flex flex-col gap-6 p-0">
-    <Chart.Container config={chartConfig} class="aspect-auto h-[220px] w-full">
-      <LineChart
-        data={indexedData}
-        x={useIndexX ? '_index' : xKey}
-        xScale={useIndexX ? scaleLinear() : scaleUtc()}
-        {xDomain}
-        yScale={scaleLinear()}
-        yDomain={[yMin, yMax]}
-        {series}
-        tooltip={false}
-        props={{
-          spline: { curve: curveNatural, strokeWidth: 1.5 },
-          yAxis: { ticks: yTicks }
-        }}
-      />
-    </Chart.Container>
-
-    {#if series.length > 0}
-      <div class="flex items-center justify-center gap-10">
-        {#each series as s (s.key)}
-          <div class="flex items-center gap-2">
-            <div
-              class="size-2 rounded-full bg-(--legend-color)"
-              style:--legend-color={s.color}
-            ></div>
-            <span class="text-foreground text-sm">{s.label}</span>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </CardContent>
-</Card>
-```
+For a complete chart pattern example, see the `sensor-chart` pattern source in `$lib/components/ui/patterns/sensor-chart/`.