@archetypeai/ds-cli 0.3.19 → 0.3.21

package/README.md

@@ -66,7 +66,7 @@ npx @archetypeai/ds-cli init --pm npm --fonts /path/to/fonts --codeagent claude
 
 ---
 
-### `add` → Add components or agent config
+### `add` → Add components, tokens, or agent config
 
 #### `add ds-ui-svelte`
 
@@ -74,7 +74,37 @@ npx @archetypeai/ds-cli init --pm npm --fonts /path/to/fonts --codeagent claude
 npx @archetypeai/ds-cli add ds-ui-svelte
 ```
 
-Installs all components from the registry. Requires shadcn-svelte (`components.json` must exist).
+Installs design tokens, all components from the registry, and optionally local fonts. Requires shadcn-svelte (`components.json` must exist).
+
+| Flag | Values | Default |
+|------|--------|---------|
+| `--fonts <path>` | path to PP Neue Montreal fonts folder | prompt |
+| `--no-fonts` | skip font installation (use system fallback) | — |
+
+```bash
+npx @archetypeai/ds-cli add ds-ui-svelte --fonts /path/to/fonts
+npx @archetypeai/ds-cli add ds-ui-svelte --no-fonts
+```
+
+#### `add ds-lib-tokens`
+
+```bash
+npx @archetypeai/ds-cli add ds-lib-tokens
+```
+
+Installs `@archetypeai/ds-lib-tokens` and optionally local fonts.
+
+| Flag | Values | Default |
+|------|--------|---------|
+| `--fonts <path>` | path to PP Neue Montreal fonts folder | prompt |
+| `--no-fonts` | skip font installation (use system fallback) | — |
+
+```bash
+npx @archetypeai/ds-cli add ds-lib-tokens --fonts /path/to/fonts
+npx @archetypeai/ds-cli add ds-lib-tokens --no-fonts
+```
+
+**Non-interactive mode** (no TTY or `--defaults`): font flags must be specified. The CLI lists missing options and exits so agents can ask the user before proceeding.
 
 #### `add ds-config-codeagent`
 

package/commands/add.js

@@ -1,16 +1,24 @@
 import * as p from '@clack/prompts';
 import { addDsUiSvelte } from '../lib/add-ds-ui-svelte.js';
+import { addDsLibTokens } from '../lib/add-ds-lib-tokens.js';
 import { addDsConfigCodeagent } from '../lib/add-ds-config-codeagent.js';
 
-const VALID_TARGETS = ['ds-ui-svelte', 'ds-config-codeagent'];
+const VALID_TARGETS = ['ds-ui-svelte', 'ds-lib-tokens', 'ds-config-codeagent'];
 
 function printUsage() {
   console.log(`
 ds add - Add components or configurations
 
 Usage:
-  npx @archetypeai/ds-cli add ds-ui-svelte                     Install all design system components
+  npx @archetypeai/ds-cli add ds-ui-svelte [flags]             Install all design system components
+  npx @archetypeai/ds-cli add ds-lib-tokens [flags]            Install design tokens
   npx @archetypeai/ds-cli add ds-config-codeagent [flags]      Install agent configuration
+
+Font flags (ds-ui-svelte, ds-lib-tokens):
+    --fonts <path>                                          Install internal fonts from local path
+    --no-fonts                                              Skip font installation
+
+Agent flags (ds-config-codeagent):
     --cursor                                                Setup for Cursor IDE
     --claude                                                Setup for Claude Code
 `);
@@ -24,6 +32,9 @@ export async function add(args) {
     case 'ds-ui-svelte':
       await addDsUiSvelte(flags);
       break;
+    case 'ds-lib-tokens':
+      await addDsLibTokens(flags);
+      break;
     case 'ds-config-codeagent':
       await addDsConfigCodeagent(flags);
       break;

package/lib/add-ds-lib-tokens.js

@@ -0,0 +1,137 @@
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import * as p from '@clack/prompts';
+import { detectPm, getPm } from './use-package-manager.js';
+import { validateFontsPath, installLocalFonts } from './install-fonts-local.js';
+import { isInteractive } from './is-interactive.js';
+import { prependCss } from './scaffold-ds-svelte-project.js';
+
+const execFileAsync = promisify(execFile);
+
+function parseFlags(args) {
+  const flags = { fonts: null, defaults: false };
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--fonts' && args[i + 1]) {
+      flags.fonts = args[++i];
+    } else if (arg === '--no-fonts') {
+      flags.fonts = false;
+    } else if (arg === '--defaults') {
+      flags.defaults = true;
+    }
+  }
+  return flags;
+}
+
+export async function addDsLibTokens(args) {
+  const flags = parseFlags(args);
+  const interactive = isInteractive(flags);
+  const projectDir = process.cwd();
+
+  // preflight: in non-interactive mode, list unspecified options and exit
+  if (!interactive && flags.fonts === null) {
+    console.log(
+      '[CONFIGURATION REQUIRED] Do not assume defaults. Ask the user to choose each option:\n\n' +
+        '  --fonts <path> | --no-fonts        Internal fonts (PP Neue Montreal)\n\n' +
+        'Once the user has answered, re-run with their choices:\n' +
+        '  ds add ds-lib-tokens --fonts <path>\n' +
+        '  ds add ds-lib-tokens --no-fonts\n'
+    );
+    process.exit(1);
+  }
+
+  p.intro('Install design tokens from Archetype AI Design System.');
+
+  // detect package manager from lockfile, fall back to npm
+  const pmName = detectPm(projectDir) || 'npm';
+  const pm = getPm(pmName);
+
+  // install tokens
+  const s = p.spinner();
+  s.start('Installing design tokens');
+  try {
+    const [cmd, ...baseArgs] = pm.install.split(/\s+/);
+    await execFileAsync(
+      cmd,
+      [...baseArgs, '@archetypeai/ds-lib-tokens', 'tailwindcss', 'tw-animate-css'],
+      {
+        stdio: 'pipe',
+        maxBuffer: 10 * 1024 * 1024,
+        cwd: projectDir
+      }
+    );
+    s.stop('Design tokens installed');
+  } catch (error) {
+    s.stop('Failed');
+    p.log.error(error.stderr?.toString() || error.message);
+    process.exit(1);
+  }
+
+  // local fonts step
+  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 {
+      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(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;
+        }
+      }
+    }
+  }
+
+  if (includeFonts && fontsPath) {
+    const fontSpinner = p.spinner();
+    fontSpinner.start('Installing fonts');
+    const fontResult = installLocalFonts(fontsPath, projectDir);
+    if (fontResult.success) {
+      fontSpinner.stop(`${fontResult.fileCount} font files installed`);
+    } else {
+      fontSpinner.stop('Failed to install fonts');
+      p.log.warn(fontResult.error);
+    }
+  }
+
+  // configure CSS imports in layout.css
+  prependCss(projectDir, includeFonts);
+
+  p.outro('Design tokens installed successfully.');
+}

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

@@ -1,11 +1,14 @@
 import { execFile } from 'child_process';
 import { promisify } from 'util';
-import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync, mkdirSync } 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';
+import { validateFontsPath, installLocalFonts } from './install-fonts-local.js';
+import { isInteractive } from './is-interactive.js';
+import { prependCss } from './scaffold-ds-svelte-project.js';
 
 const execFileAsync = promisify(execFile);
 
@@ -13,22 +16,84 @@ 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.');
+function parseFlags(args) {
+  const flags = { fonts: null, defaults: false };
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--fonts' && args[i + 1]) {
+      flags.fonts = args[++i];
+    } else if (arg === '--no-fonts') {
+      flags.fonts = false;
+    } else if (arg === '--defaults') {
+      flags.defaults = true;
+    }
+  }
+  return flags;
+}
 
+export async function addDsUiSvelte(args) {
+  const flags = parseFlags(args);
+  const interactive = isInteractive(flags);
   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');
+  // preflight: in non-interactive mode, list unspecified options and exit
+  if (!interactive && flags.fonts === null) {
+    console.log(
+      '[CONFIGURATION REQUIRED] Do not assume defaults. Ask the user to choose each option:\n\n' +
+        '  --fonts <path> | --no-fonts        Internal fonts (PP Neue Montreal)\n\n' +
+        'Once the user has answered, re-run with their choices:\n' +
+        '  ds add ds-ui-svelte --fonts <path>\n' +
+        '  ds add ds-ui-svelte --no-fonts\n'
+    );
     process.exit(1);
   }
 
+  p.intro('Install all components from Archetype AI Design System.');
+
   // detect package manager from lockfile, fall back to npm
   const pmName = detectPm(projectDir) || 'npm';
   const pm = getPm(pmName);
 
+  // initialize shadcn-svelte if not already set up
+  const componentsJsonPath = join(projectDir, 'components.json');
+  if (!existsSync(componentsJsonPath)) {
+    p.log.info('shadcn-svelte not initialized, setting up...');
+    const componentsJson = {
+      $schema: 'https://shadcn-svelte.com/schema.json',
+      tailwind: {
+        css: 'src/routes/layout.css',
+        baseColor: 'slate'
+      },
+      aliases: {
+        utils: '$lib/utils',
+        ui: '$lib/components/ui',
+        components: '$lib/components',
+        hooks: '$lib/hooks',
+        lib: '$lib'
+      },
+      typescript: false
+    };
+    writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2));
+
+    const utilsPath = join(projectDir, 'src', 'lib', 'utils.js');
+    if (!existsSync(utilsPath)) {
+      const utilsDir = dirname(utilsPath);
+      if (!existsSync(utilsDir)) mkdirSync(utilsDir, { recursive: true });
+      writeFileSync(
+        utilsPath,
+        `import { clsx } from "clsx";\nimport { twMerge } from "tailwind-merge";\n\nexport function cn(...inputs) {\n\treturn twMerge(clsx(inputs));\n}\n`
+      );
+    }
+
+    const [setupCmd, ...setupArgs] = pm.install.split(/\s+/);
+    await execFileAsync(setupCmd, [...setupArgs, 'clsx', 'tailwind-merge', 'tw-animate-css'], {
+      stdio: 'pipe',
+      maxBuffer: 10 * 1024 * 1024,
+      cwd: projectDir
+    });
+    p.log.success('shadcn-svelte initialized');
+  }
+
   const s = p.spinner();
   s.start('Fetching component list from registry');
 
@@ -52,6 +117,83 @@ export async function addDsUiSvelte() {
 
     s.stop(`Found ${componentUrls.length} components`);
 
+    // install design tokens
+    const tokenSpinner = p.spinner();
+    tokenSpinner.start('Installing design tokens');
+    const [installCmd, ...installArgs] = pm.install.split(/\s+/);
+    await execFileAsync(installCmd, [...installArgs, '@archetypeai/ds-lib-tokens'], {
+      stdio: 'pipe',
+      maxBuffer: 10 * 1024 * 1024,
+      cwd: projectDir
+    });
+    tokenSpinner.stop('Design tokens installed');
+
+    // local fonts step
+    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 {
+        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(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;
+          }
+        }
+      }
+    }
+
+    if (includeFonts && fontsPath) {
+      const fontSpinner = p.spinner();
+      fontSpinner.start('Installing fonts');
+      const fontResult = installLocalFonts(fontsPath, projectDir);
+      if (fontResult.success) {
+        fontSpinner.stop(`${fontResult.fileCount} font files installed`);
+      } else {
+        fontSpinner.stop('Failed to install fonts');
+        p.log.warn(fontResult.error);
+      }
+    }
+
+    // configure CSS imports in layout.css
+    prependCss(projectDir, includeFonts);
+
     const installSpinner = p.spinner();
     installSpinner.start('Installing components');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archetypeai/ds-cli",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "Archetype AI Design System CLI Tool",
   "type": "module",
   "bin": {