@archetypeai/ds-cli 0.3.7

package/files/skills/setup-chart/references/sensor-chart.md

@@ -0,0 +1,156 @@
+# SensorChart Pattern Reference
+
+Line charts for time series data, sensor readings, and streaming signals.
+
+## Installation
+
+```bash
+npx shadcn-svelte@latest add --registry https://design-system.archetypeai.workers.dev/r sensor-chart
+```
+
+This installs `SensorChart.svelte` and its dependencies (`card`, `chart`, `utils`, `layerchart`, `d3-scale`, `d3-shape`).
+
+## Props
+
+| Prop        | Type                                   | Default            | Description                                       |
+| ----------- | -------------------------------------- | ------------------ | ------------------------------------------------- |
+| `title`     | string                                 | `"UNKNOWN SENSOR"` | Card header label identifying the sensor          |
+| `icon`      | Component                              | undefined          | Lucide icon component for header                  |
+| `data`      | Array<Record<string, any>>             | `[]`               | Array of data points to chart                     |
+| `signals`   | Record<string, string>                 | `{}`               | Map of data key to display label (defines series) |
+| `xKey`      | string                                 | `"timestamp"`      | Data key for x-axis values                        |
+| `maxPoints` | number                                 | undefined          | Enables streaming mode with sliding window        |
+| `yMin`      | number                                 | **required**       | Minimum y-axis value                              |
+| `yMax`      | number                                 | **required**       | Maximum y-axis value                              |
+| `yTicks`    | number[]                               | undefined          | Explicit y-axis tick values                       |
+| `axis`      | `"both"` \| `"x"` \| `"y"` \| `"none"` | `"both"`           | Which axes to display                             |
+| `class`     | string                                 | undefined          | Additional CSS classes                            |
+
+## Key Behaviors
+
+- **Static mode** (no `maxPoints`): Uses `scaleUtc()` for x-axis with timestamp-based positioning. X-axis shows MM:SS relative to first data point.
+- **Streaming mode** (`maxPoints` set): Uses `scaleLinear()` with index-based x positioning (`_index`). Data window slides as new points arrive.
+- **Series**: Derived from `signals` prop. Each entry maps a data key to a display label and auto-assigns theme colors (`--chart-1` through `--chart-5`).
+- **Curve**: Uses `curveNatural` from d3-shape for smooth lines.
+- **Chart type**: Uses `LineChart` from layerchart — NOT `AreaChart` (which renders with unwanted fill).
+
+## Complete Example — Static Data
+
+```svelte
+<script>
+  import SensorChart from '$lib/components/ui/SensorChart.svelte';
+  import AudioWaveformIcon from '@lucide/svelte/icons/audio-waveform';
+  import timeseriesCsv from '$lib/data/timeseries.csv?raw';
+
+  function parseCsv(csvText) {
+    const lines = csvText
+      .trim()
+      .split('\n')
+      .filter((line) => line.trim());
+    if (lines.length === 0) return [];
+    const headers = lines[0].split(',').map((h) => h.trim());
+    return lines.slice(1).map((line) => {
+      const values = line.split(',');
+      const row = {};
+      headers.forEach((header, index) => {
+        row[header] = values[index]?.trim() || '';
+      });
+      return row;
+    });
+  }
+
+  const rawRows = parseCsv(timeseriesCsv);
+  const data = rawRows.map((row) => ({
+    timestamp: new Date(row.timestamp),
+    accel_x: parseFloat(row.accel_x),
+    accel_y: parseFloat(row.accel_y),
+    accel_z: parseFloat(row.accel_z)
+  }));
+</script>
+
+<SensorChart
+  title="ACCELERATION SENSOR"
+  icon={AudioWaveformIcon}
+  {data}
+  signals={{ accel_x: 'Accel X', accel_y: 'Accel Y', accel_z: 'Accel Z' }}
+  yMin={-30}
+  yMax={30}
+  yTicks={[-30, -15, 0, 15, 30]}
+/>
+```
+
+## Complete Example — Streaming Data
+
+For real-time data with a sliding window, use the `maxPoints` prop and feed data incrementally:
+
+```svelte
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import SensorChart from '$lib/components/ui/SensorChart.svelte';
+  import ThermometerIcon from '@lucide/svelte/icons/thermometer';
+
+  let streamingData = $state([]);
+  let interval;
+
+  onMount(() => {
+    interval = setInterval(() => {
+      streamingData = [
+        ...streamingData,
+        {
+          timestamp: new Date(),
+          gyro_x: (Math.random() - 0.5) * 4
+        }
+      ];
+    }, 120);
+  });
+
+  onDestroy(() => clearInterval(interval));
+</script>
+
+<SensorChart
+  title="GYROSCOPE SENSOR"
+  icon={ThermometerIcon}
+  data={streamingData}
+  signals={{ gyro_x: 'Gyro X' }}
+  maxPoints={50}
+  yMin={-2}
+  yMax={2}
+  yTicks={[-2, -1, 0, 1, 2]}
+  axis="y"
+/>
+```
+
+## Building Inline (Without Pattern)
+
+If the `sensor-chart` pattern is not installed, build the equivalent using `card` + `chart` primitives with `LineChart` from layerchart:
+
+```svelte
+<script>
+  import * as Chart from '$lib/components/ui/chart/index.js';
+  import { LineChart } from 'layerchart';
+  import { scaleUtc, scaleLinear } from 'd3-scale';
+  import { curveNatural } from 'd3-shape';
+
+  let { data } = $props();
+
+  const chartConfig = {
+    value: { label: 'Value', color: 'var(--chart-1)' }
+  };
+</script>
+
+<Chart.Container config={chartConfig} class="h-[220px] w-full">
+  <LineChart
+    {data}
+    x="timestamp"
+    xScale={scaleUtc()}
+    yScale={scaleLinear()}
+    series={[{ key: 'value', color: 'var(--chart-1)' }]}
+    tooltip={false}
+    props={{
+      spline: { curve: curveNatural, strokeWidth: 1.5 },
+      grid: { y: true, x: false },
+      highlight: { lines: false, points: false }
+    }}
+  />
+</Chart.Container>
+```

package/lib/add-ds-config-codeagent.js

@@ -0,0 +1,154 @@
+import { existsSync, mkdirSync, copyFileSync, readdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import * as p from '@clack/prompts';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const FILES_DIR = join(__dirname, '..', 'files');
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) return;
+
+  mkdirSync(dest, { recursive: true });
+
+  const entries = readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      if (existsSync(destPath)) {
+        p.log.warn(`Skipped (exists): ${destPath}`);
+      } else {
+        copyFileSync(srcPath, destPath);
+        p.log.success(`Copied: ${destPath}`);
+      }
+    }
+  }
+}
+
+function copyFile(src, dest) {
+  if (!existsSync(src)) {
+    p.log.warn(`Source not found: ${src}`);
+    return false;
+  }
+
+  if (existsSync(dest)) {
+    p.log.warn(`Skipped (exists): ${dest}`);
+    return false;
+  }
+
+  copyFileSync(src, dest);
+  p.log.success(`Copied: ${dest}`);
+  return true;
+}
+
+export function setupCursor(projectDir) {
+  p.log.step('Setting up for Cursor IDE');
+
+  // copy AGENTS.md to root
+  copyFile(join(FILES_DIR, 'AGENTS.md'), join(projectDir, 'AGENTS.md'));
+
+  // copy skills to .cursor/skills/
+  const skillsSrc = join(FILES_DIR, 'skills');
+  if (existsSync(skillsSrc)) {
+    copyDir(skillsSrc, join(projectDir, '.cursor', 'skills'));
+  }
+
+  // copy rules to .cursor/rules/
+  const rulesSrc = join(FILES_DIR, 'rules');
+  if (existsSync(rulesSrc)) {
+    copyDir(rulesSrc, join(projectDir, '.cursor', 'rules'));
+  }
+
+  // copy LICENSE to .cursor/
+  copyFile(join(FILES_DIR, 'LICENSE'), join(projectDir, '.cursor', 'LICENSE'));
+
+  p.log.success('Cursor setup complete');
+  p.log.info('Tip: Reload Cursor window (Cmd+Shift+P > "Reload Window")');
+}
+
+export function setupClaude(projectDir) {
+  p.log.step('Setting up for Claude Code');
+
+  // copy CLAUDE.md to root
+  copyFile(join(FILES_DIR, 'CLAUDE.md'), join(projectDir, 'CLAUDE.md'));
+
+  // copy skills to .claude/skills/
+  const skillsSrc = join(FILES_DIR, 'skills');
+  if (existsSync(skillsSrc)) {
+    copyDir(skillsSrc, join(projectDir, '.claude', 'skills'));
+  }
+
+  // copy rules to .claude/rules/
+  const rulesSrc = join(FILES_DIR, 'rules');
+  if (existsSync(rulesSrc)) {
+    copyDir(rulesSrc, join(projectDir, '.claude', 'rules'));
+  }
+
+  // copy LICENSE to .claude/
+  copyFile(join(FILES_DIR, 'LICENSE'), join(projectDir, '.claude', 'LICENSE'));
+
+  p.log.success('Claude Code setup complete');
+}
+
+export async function addDsConfigCodeagent(flags) {
+  const isCursor = flags.includes('--cursor');
+  const isClaude = flags.includes('--claude');
+  const isHelp = flags.includes('--help') || flags.includes('-h');
+
+  if (isHelp) {
+    console.log(`
+ds add ds-config-codeagent - Install agent configurations
+
+Usage:
+  npx @archetypeai/ds-cli add ds-config-codeagent --cursor   Setup for Cursor IDE
+  npx @archetypeai/ds-cli add ds-config-codeagent --claude    Setup for Claude Code
+`);
+    return;
+  }
+
+  let agent;
+
+  if (isCursor && isClaude) {
+    p.log.error('Please specify only one: --cursor or --claude');
+    process.exit(1);
+  } else if (isCursor) {
+    agent = 'cursor';
+  } else if (isClaude) {
+    agent = 'claude';
+  } else {
+    // interactive prompt when no flag is passed
+    agent = await p.select({
+      message: 'Which agent configuration?',
+      options: [
+        { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + skills + rules' },
+        { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + skills + rules' }
+      ]
+    });
+    if (p.isCancel(agent)) {
+      p.cancel('Setup cancelled.');
+      process.exit(0);
+    }
+  }
+
+  // verify files directory exists
+  if (!existsSync(FILES_DIR)) {
+    p.log.error('Package files not found. This may be a corrupted installation.');
+    process.exit(1);
+  }
+
+  p.intro('Installing Archetype AI agent configurations.');
+
+  const projectDir = process.cwd();
+
+  if (agent === 'cursor') {
+    setupCursor(projectDir);
+  } else {
+    setupClaude(projectDir);
+  }
+
+  p.outro('Agent configuration installed.');
+}

package/lib/add-ds-ui-svelte.js

@@ -0,0 +1,93 @@
+import { execFileSync } from 'child_process';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import * as p from '@clack/prompts';
+import { validateRegistryUrl } from './validate-url.js';
+import { detectPm, getPm } from './use-package-manager.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REGISTRY_URL = process.env.REGISTRY_URL || 'https://design-system.archetypeai.workers.dev';
+const ALL_COMPONENTS_URL = `${REGISTRY_URL}/r/all.json`;
+
+export async function addDsUiSvelte() {
+  p.intro('Install all components from Archetype AI Design System.');
+
+  const projectDir = process.cwd();
+
+  // check if shadcn-svelte is initialized
+  if (!existsSync(join(projectDir, 'components.json'))) {
+    p.log.error('shadcn-svelte is not initialized in this project.');
+    p.log.info('Please run: npx shadcn-svelte@latest init');
+    process.exit(1);
+  }
+
+  // detect package manager from lockfile, fall back to npm
+  const pmName = detectPm(projectDir) || 'npm';
+  const pm = getPm(pmName);
+
+  const s = p.spinner();
+  s.start('Fetching component list from registry');
+
+  try {
+    const response = await fetch(ALL_COMPONENTS_URL, {
+      signal: AbortSignal.timeout(15_000)
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch components: ${response.status} ${response.statusText}`);
+    }
+
+    const componentUrls = await response.json();
+    if (!Array.isArray(componentUrls) || componentUrls.length === 0) {
+      throw new Error('No components found in registry');
+    }
+
+    // validate all URLs before passing to shell
+    for (const url of componentUrls) {
+      validateRegistryUrl(url);
+    }
+
+    s.stop(`Found ${componentUrls.length} components`);
+
+    const installSpinner = p.spinner();
+    installSpinner.start('Installing components');
+
+    const [dlxCmd, ...dlxArgs] = pm.dlx.split(/\s+/);
+    execFileSync(
+      dlxCmd,
+      [...dlxArgs, 'shadcn-svelte@latest', 'add', ...componentUrls, '--yes', '--overwrite'],
+      { stdio: 'pipe', cwd: projectDir }
+    );
+
+    installSpinner.stop('All components installed');
+
+    // copy LICENSE alongside installed components
+    try {
+      const licenseSrc = join(__dirname, '..', 'LICENSE');
+      if (existsSync(licenseSrc)) {
+        let componentsDir = 'src/lib/components/ui';
+        try {
+          const config = JSON.parse(readFileSync(join(projectDir, 'components.json'), 'utf8'));
+          if (config.aliases?.components) {
+            componentsDir = config.aliases.components.replace('$lib', 'src/lib');
+          }
+        } catch {
+          p.log.warn('Could not read components.json alias config, using default path');
+        }
+        const licenseDest = join(projectDir, componentsDir, 'LICENSE');
+        if (!existsSync(licenseDest)) {
+          writeFileSync(licenseDest, readFileSync(licenseSrc, 'utf8'));
+          p.log.success(`License copied to ${componentsDir}/LICENSE`);
+        }
+      }
+    } catch {
+      p.log.warn('Could not copy LICENSE file');
+    }
+
+    p.outro('Components installed successfully.');
+  } catch (error) {
+    s.stop('Failed');
+    p.log.error(error.message);
+    process.exit(1);
+  }
+}

package/lib/scaffold-ds-svelte-project.js

@@ -0,0 +1,272 @@
+import { execFileSync } from 'child_process';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import * as p from '@clack/prompts';
+import { setupCursor, setupClaude } from './add-ds-config-codeagent.js';
+
+// run a command without a shell to prevent injection
+function run(command, args, opts) {
+  execFileSync(command, args, { stdio: 'pipe', ...opts });
+}
+
+// write a file
+function writeFile(filePath, content) {
+  const dir = filePath.substring(0, filePath.lastIndexOf('/'));
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+  writeFileSync(filePath, content);
+}
+
+// split a package manager command string into [command, ...args]
+function splitCmd(cmdString) {
+  return cmdString.split(/\s+/);
+}
+
+// run sveltekit create
+export function runSvCreate(pm, name, targetDir) {
+  const [cmd, ...baseArgs] = splitCmd(pm.dlx);
+  const args = [
+    ...baseArgs,
+    'sv@latest',
+    'create',
+    name,
+    '--template',
+    'minimal',
+    '--no-types',
+    '--add',
+    'tailwindcss=plugins:none',
+    ...splitCmd(pm.svInstallFlag)
+  ];
+  const s = p.spinner();
+  s.start('Creating SvelteKit project');
+  try {
+    run(cmd, args, { cwd: targetDir });
+    s.stop('SvelteKit project created');
+    return true;
+  } catch (error) {
+    s.stop('Failed to create SvelteKit project');
+    p.log.error(error.stderr?.toString() || error.message);
+    return false;
+  }
+}
+
+// install design tokens
+export function installTokens(pm, projectPath) {
+  const [cmd, ...baseArgs] = splitCmd(pm.install);
+  const args = [...baseArgs, '@archetypeai/ds-lib-tokens'];
+  const s = p.spinner();
+  s.start('Installing design tokens');
+  try {
+    run(cmd, args, { cwd: projectPath });
+    s.stop('Design tokens installed');
+    return true;
+  } catch (error) {
+    s.stop('Failed to install design tokens');
+    p.log.error(error.stderr?.toString() || error.message);
+    return false;
+  }
+}
+
+// install internal fonts package
+export function installFonts(pm, projectPath) {
+  const [cmd, ...baseArgs] = splitCmd(pm.install);
+  const args = [...baseArgs, '@archetypeai/ds-lib-fonts-internal'];
+  const s = p.spinner();
+  s.start('Installing internal fonts');
+  try {
+    run(cmd, args, { cwd: projectPath });
+    s.stop('Internal fonts installed');
+    return true;
+  } catch {
+    s.stop('Failed to install internal fonts');
+    p.log.warn('Make sure you are authenticated with npm (run: npm login)');
+    return false;
+  }
+}
+
+// init shadcn-svelte
+export function initShadcn(pm, projectPath) {
+  const s = p.spinner();
+  s.start('Setting up shadcn-svelte');
+  try {
+    const componentsJson = {
+      $schema: 'https://shadcn-svelte.com/schema.json',
+      style: 'default',
+      tailwind: {
+        config: '',
+        css: 'src/routes/layout.css',
+        baseColor: 'slate',
+        cssVariables: true,
+        prefix: ''
+      },
+      aliases: {
+        utils: '$lib/utils',
+        primitives: '$lib/components/primitives',
+        lib: '$lib',
+        components: '$lib/components'
+      },
+      typescript: false
+    };
+
+    const componentsJsonPath = join(projectPath, 'components.json');
+    if (existsSync(componentsJsonPath)) {
+      p.log.info('components.json already exists, skipping');
+    } else {
+      writeFile(componentsJsonPath, JSON.stringify(componentsJson, null, 2));
+    }
+
+    const utilsPath = join(projectPath, 'src/lib/utils.js');
+    const utilsContent = `import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+\treturn twMerge(clsx(inputs));
+}
+`;
+    if (existsSync(utilsPath)) {
+      p.log.info('src/lib/utils.js already exists, skipping');
+    } else {
+      writeFile(utilsPath, utilsContent);
+    }
+
+    const [cmd, ...baseArgs] = splitCmd(pm.install);
+    run(cmd, [...baseArgs, 'clsx', 'tailwind-merge', 'tw-animate-css'], { cwd: projectPath });
+
+    s.stop('shadcn-svelte ready');
+    return true;
+  } catch (error) {
+    s.stop('Failed to set up shadcn-svelte');
+    p.log.error(error.stderr?.toString() || error.message);
+    return false;
+  }
+}
+
+// configure CSS
+export function configureCss(projectPath, includeFonts) {
+  let css = '';
+  if (includeFonts) {
+    css += '@import "@archetypeai/ds-lib-fonts-internal";\n';
+  }
+  css += '@import "@archetypeai/ds-lib-tokens/theme.css";\n';
+  css += '@import "tailwindcss";\n';
+  css += '@import "tw-animate-css";\n';
+
+  const cssPath = join(projectPath, 'src/routes/layout.css');
+  writeFile(cssPath, css);
+  p.log.success('CSS configured');
+}
+
+// install Tailwind CSS v4
+export function installTailwind(pm, projectPath) {
+  const [cmd, ...baseArgs] = splitCmd(pm.install);
+  const args = [...baseArgs, 'tailwindcss@latest'];
+  const s = p.spinner();
+  s.start('Installing Tailwind CSS v4');
+  try {
+    run(cmd, args, { cwd: projectPath });
+    s.stop('Tailwind CSS installed');
+    return true;
+  } catch (error) {
+    s.stop('Failed to install Tailwind CSS');
+    p.log.error(error.stderr?.toString() || error.message);
+    return false;
+  }
+}
+
+// prepend CSS imports to existing layout.css
+export function prependCss(projectPath, includeFonts) {
+  const cssPath = join(projectPath, 'src/routes/layout.css');
+
+  let existing = '';
+  if (existsSync(cssPath)) {
+    existing = readFileSync(cssPath, 'utf-8');
+  }
+
+  // skip if DS imports are already present
+  if (existing.includes('@archetypeai/ds-lib-tokens/theme.css')) {
+    p.log.info('DS imports already present in layout.css, skipping');
+    return;
+  }
+
+  let imports = '';
+  if (includeFonts) {
+    imports += '@import "@archetypeai/ds-lib-fonts-internal";\n';
+  }
+  imports += '@import "@archetypeai/ds-lib-tokens/theme.css";\n';
+  imports += '@import "tailwindcss";\n';
+  imports += '@import "tw-animate-css";\n';
+
+  const dir = cssPath.substring(0, cssPath.lastIndexOf('/'));
+  if (!existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+  writeFileSync(cssPath, existing ? imports + '\n' + existing : imports);
+  p.log.success('CSS configured');
+}
+
+// install components from shadcn-svelte registry
+export function installComponents(pm, projectPath, componentUrls) {
+  const s = p.spinner();
+  s.start(`Installing ${componentUrls.length} components`);
+  try {
+    const urls = componentUrls.map((c) => c.url);
+    const [dlxCmd, ...dlxArgs] = splitCmd(pm.dlx);
+    run(dlxCmd, [...dlxArgs, 'shadcn-svelte@latest', 'add', ...urls, '--yes', '--overwrite'], {
+      cwd: projectPath
+    });
+
+    const [installCmd, ...installArgs] = splitCmd(pm.install);
+    run(
+      installCmd,
+      [...installArgs, 'tailwind-variants', 'bits-ui', '@lucide/svelte', 'layerchart', 'paneforge'],
+      { cwd: projectPath }
+    );
+
+    s.stop(`${componentUrls.length} components installed`);
+    return true;
+  } catch (error) {
+    s.stop('Failed to install components');
+    p.log.error(error.stderr?.toString() || error.message);
+    return false;
+  }
+}
+
+// add a demo page with Button examples to app
+export function createDemoPage(projectPath) {
+  const pagePath = join(projectPath, 'src/routes/+page.svelte');
+  const demoContent = `<script>
+\timport Button from "$lib/components/ui/button/button.svelte";
+</script>
+
+<div class="flex flex-col items-center justify-center min-h-screen space-y-xl">
+  <Button variant="default">Default</Button>
+  <Button variant="ghost">Ghost</Button>
+  <Button variant="outline">Outline</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="destructive">Destructive</Button>
+  <Button variant="link">Link</Button>
+</div>
+`;
+  writeFile(pagePath, demoContent);
+  p.log.success('Demo page created');
+}
+
+// install agent configuration
+export function installAgentConfig(projectPath, agentType) {
+  const s = p.spinner();
+  s.start(`Installing ${agentType === 'cursor' ? 'Cursor' : 'Claude Code'} agent configuration`);
+  try {
+    if (agentType === 'cursor') {
+      setupCursor(projectPath);
+    } else {
+      setupClaude(projectPath);
+    }
+    s.stop('Agent configuration installed');
+    return true;
+  } catch (error) {
+    s.stop('Failed to install agent configuration');
+    p.log.error(error.message);
+    return false;
+  }
+}