@archetypeai/ds-cli 0.9.0 → 0.10.0

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

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, copyFileSync, readdirSync } from 'fs';
+import { existsSync, copyFileSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import * as p from '@clack/prompts';
@@ -6,29 +6,6 @@ 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}`);
@@ -52,23 +29,7 @@ export function setupCursor(projectDir) {
   copyFile(join(FILES_DIR, 'AGENTS.md'), join(projectDir, 'AGENTS.md'));
   copyFile(join(FILES_DIR, 'ds-manifest.json'), join(projectDir, 'ds-manifest.json'));
 
-  // 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) {
@@ -78,21 +39,6 @@ export function setupClaude(projectDir) {
   copyFile(join(FILES_DIR, 'CLAUDE.md'), join(projectDir, 'CLAUDE.md'));
   copyFile(join(FILES_DIR, 'ds-manifest.json'), join(projectDir, 'ds-manifest.json'));
 
-  // 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');
 }
 
@@ -130,8 +76,8 @@ Usage:
     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, default' }
+        { value: 'cursor', label: 'Cursor', hint: 'AGENTS.md + ds-manifest.json' },
+        { value: 'claude', label: 'Claude Code', hint: 'CLAUDE.md + ds-manifest.json, default' }
       ]
     });
     if (p.isCancel(agent)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archetypeai/ds-cli",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Archetype AI Design System CLI Tool",
   "type": "module",
   "bin": {
@@ -21,7 +21,7 @@
     "@clack/prompts": "^0.10.0"
   },
   "scripts": {
-    "build": "rm -rf dist && mkdir -p dist/commands dist/lib dist/files && cp bin.js package.json ../LICENSE dist/ && cp commands/*.js dist/commands/ && cp lib/*.js dist/lib/ && cp -r ../ds-config-codeagent/labs/AGENTS.md ../ds-config-codeagent/labs/CLAUDE.md ../ds-config-codeagent/labs/ds-manifest.json dist/files/ && cp -r ../ds-config-codeagent/labs/skills ../ds-config-codeagent/labs/rules dist/files/ && cp ../LICENSE dist/files/ && chmod +x dist/bin.js && cp ../docs/DS-CLI.md dist/README.md"
+    "build": "rm -rf dist && mkdir -p dist/commands dist/lib dist/files && cp bin.js package.json ../LICENSE dist/ && cp commands/*.js dist/commands/ && cp lib/*.js dist/lib/ && cp ../ds-config-codeagent/AGENTS.md ../ds-config-codeagent/CLAUDE.md ../ds-config-codeagent/ds-manifest.json dist/files/ && chmod +x dist/bin.js && cp ../docs/DS-CLI.md dist/README.md"
   },
   "repository": {
     "type": "git",

package/files/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Archetype AI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/files/rules/accessibility.md

@@ -1,268 +0,0 @@
-# Accessibility Rules
-
-## Screen Reader Support
-
-Use `sr-only` for text that should be accessible but visually hidden:
-
-```svelte
-<button>
-  <XIcon />
-  <span class="sr-only">Close</span>
-</button>
-```
-
-The `sr-only` class hides content visually while keeping it accessible to screen readers.
-
-## aria-label
-
-### Icon-Only Buttons
-
-Always provide `aria-label` for buttons that only contain an icon:
-
-```svelte
-<!-- Correct -->
-<Button size="icon" aria-label="Search">
-  <SearchIcon />
-</Button>
-
-<!-- Wrong - no accessible name -->
-<Button size="icon">
-  <SearchIcon />
-</Button>
-```
-
-### Interactive Groups
-
-Provide `aria-label` for grouped interactive elements:
-
-```svelte
-<ButtonGroup.Root aria-label="Pagination">
-  <Button variant="outline" size="icon-sm" aria-label="Previous page">
-    <ChevronLeftIcon />
-  </Button>
-  <ButtonGroup.Text>Page 1 of 10</ButtonGroup.Text>
-  <Button variant="outline" size="icon-sm" aria-label="Next page">
-    <ChevronRightIcon />
-  </Button>
-</ButtonGroup.Root>
-```
-
-### Toggles
-
-```svelte
-<Toggle variant="outline" aria-label="Toggle bookmark">
-  <BookmarkIcon />
-</Toggle>
-```
-
-## aria-hidden
-
-Use `aria-hidden="true"` for decorative elements that shouldn't be announced:
-
-```svelte
-<!-- Decorative icons next to text -->
-<CardTitle>Sensor Status</CardTitle>
-<Icon strokeWidth={1.25} class="text-muted-foreground size-6" aria-hidden="true" />
-
-<!-- Icons in buttons WITH text labels -->
-<Button>
-  <PlusIcon aria-hidden="true" />
-  Add Item
-</Button>
-```
-
-Do NOT use `aria-hidden` on icon-only buttons - use `aria-label` instead.
-
-## role Attributes
-
-### Lists
-
-```svelte
-<div role="list" data-slot="item-group">
-  {#each items as item}
-    <div role="listitem">{item}</div>
-  {/each}
-</div>
-```
-
-### Groups
-
-```svelte
-<!-- Input groups -->
-<div role="group" data-slot="input-group">
-  <Input />
-  <Button>Submit</Button>
-</div>
-
-<!-- Button groups -->
-<div role="group" aria-label="Text formatting" data-slot="button-group">
-  <Button>Bold</Button>
-  <Button>Italic</Button>
-</div>
-```
-
-### Status
-
-```svelte
-<!-- Spinners/loading indicators -->
-<svg role="status" aria-label="Loading" class="animate-spin"> ... </svg>
-```
-
-## aria-invalid Styling
-
-Components use `aria-invalid` for validation states. The styling pattern:
-
-```svelte
-<input
-  class={cn(
-    'border-input focus-visible:ring-ring/50',
-    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
-    'aria-invalid:border-destructive'
-  )}
-  aria-invalid={hasError}
-/>
-```
-
-This applies to: inputs, textareas, selects, checkboxes, buttons, badges.
-
-To trigger invalid styling, set `aria-invalid="true"`:
-
-```svelte
-<Input aria-invalid={errors.email ? true : undefined} />
-```
-
-## Focus Management
-
-### Focus Ring Pattern
-
-All interactive elements use this focus pattern:
-
-```svelte
-<button
-  class={cn(
-    'outline-none',
-    'focus-visible:border-ring',
-    'focus-visible:ring-ring/50',
-    'focus-visible:ring-[3px]'
-  )}
->
-```
-
-Key points:
-
-- `outline-none` removes default browser outline
-- `focus-visible` only shows on keyboard focus (not mouse clicks)
-- `ring-[3px]` provides visible focus indicator
-- `ring-ring/50` uses semantic ring color at 50% opacity
-
-### Disabled States
-
-```svelte
-<button
-  class="disabled:pointer-events-none disabled:opacity-50"
-  disabled={isDisabled}
->
-```
-
-For links styled as buttons (can't use `disabled` attribute):
-
-```svelte
-<a
-  href={disabled ? undefined : href}
-  aria-disabled={disabled}
-  role={disabled ? 'button' : undefined}
-  tabindex={disabled ? -1 : undefined}
-  class="aria-disabled:pointer-events-none aria-disabled:opacity-50"
->
-```
-
-## Keyboard Navigation
-
-### bits-ui Primitives
-
-Most keyboard navigation is handled automatically by bits-ui:
-
-- Dialog: Escape to close, focus trap
-- Select: Arrow keys to navigate, Enter to select
-- Command: Arrow keys, Enter, type to filter
-- Popover: Escape to close
-
-### Custom Components
-
-For custom interactive elements, ensure:
-
-```svelte
-<div
-  role="button"
-  tabindex="0"
-  onkeydown={(e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      handleClick();
-    }
-  }}
-  onclick={handleClick}
->
-```
-
-## Page Structure
-
-### Skip Link
-
-Every page should have a skip link as the first focusable element:
-
-```svelte
-<a
-  href="#main-content"
-  class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:ring-2 focus:ring-ring"
->
-  Skip to content
-</a>
-
-<main id="main-content">
-  <!-- page content -->
-</main>
-```
-
-### Semantic Landmarks
-
-Use semantic HTML elements instead of generic `<div>` wrappers:
-
-```svelte
-<!-- Before -->
-<div class="header">...</div>
-<div class="nav">...</div>
-<div class="content">...</div>
-
-<!-- After -->
-<header>...</header>
-<nav>...</nav>
-<main id="main-content">...</main>
-```
-
-### Heading Hierarchy
-
-Every page needs an `<h1>`. If the visual design doesn't include one, add it as screen-reader-only:
-
-```svelte
-<h1 class="sr-only">Dashboard</h1>
-```
-
-Never skip heading levels (e.g. `<h1>` → `<h3>`). Use the correct level for the document outline.
-
-## Checklist
-
-When building components, verify:
-
-- [ ] Page has a skip-to-content link as the first focusable element
-- [ ] Page uses semantic landmarks (`<main>`, `<header>`, `<nav>`)
-- [ ] Page has an `<h1>` (visible or `sr-only`)
-- [ ] Heading hierarchy doesn't skip levels
-- [ ] Icon-only buttons have `aria-label`
-- [ ] Decorative icons have `aria-hidden="true"`
-- [ ] Interactive groups have `aria-label`
-- [ ] Form inputs support `aria-invalid` styling
-- [ ] Focus states are visible (`focus-visible:ring-*`)
-- [ ] Disabled states prevent interaction and reduce opacity
-- [ ] Loading states use `role="status"`
-- [ ] Lists use `role="list"` and `role="listitem"`

package/files/rules/charts.md

@@ -1,256 +0,0 @@
----
-paths:
-  - '**/chart*/**'
-  - '**/*Chart*.svelte'
-  - '**/*chart*.svelte'
-  - '**/dashboard*/**'
----
-
-# Chart Rules
-
-## Stack
-
-- **layerchart** - Svelte-native charting library
-- **d3-scale** - Scale functions (scaleUtc, scaleLinear, scaleOrdinal)
-- **d3-shape** - Curve functions (curveNatural, curveMonotoneX)
-- **Chart primitives** - Chart.Container, Chart.Tooltip from the design system
-
-## Chart.Container
-
-Wrap all charts in Chart.Container with a config prop:
-
-```svelte
-<script>
-  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
-
-  const chartConfig = {
-    temperature: { label: 'Temperature', color: 'var(--chart-1)' },
-    humidity: { label: 'Humidity', color: 'var(--chart-2)' }
-  };
-</script>
-
-<Chart.Container config={chartConfig} class="aspect-auto h-[220px] w-full">
-  <LineChart ... />
-</Chart.Container>
-```
-
-The config maps data keys to labels and colors for tooltips and legends.
-
-## Chart Token Colors
-
-Use semantic chart colors from the theme:
-
-```javascript
-const chartColors = [
-  'var(--chart-1)', // purple
-  'var(--chart-2)', // red-orange
-  'var(--chart-3)', // green
-  'var(--chart-4)', // yellow
-  'var(--chart-5)' // coral
-];
-```
-
-In series config:
-
-```javascript
-let series = $derived(
-  Object.entries(signals).map(([key, label], i) => ({
-    key,
-    label,
-    color: chartColors[i % chartColors.length]
-  }))
-);
-```
-
-## LineChart Pattern
-
-Basic line chart with layerchart:
-
-```svelte
-<script>
-  import { LineChart } from 'layerchart';
-  import { scaleUtc, scaleLinear } from 'd3-scale';
-  import { curveNatural } from 'd3-shape';
-
-  let { data, xKey = 'timestamp', yMin, yMax } = $props();
-
-  const series = [{ key: 'value', label: 'Value', color: 'var(--chart-1)' }];
-</script>
-
-<LineChart
-  {data}
-  x={xKey}
-  xScale={scaleUtc()}
-  yScale={scaleLinear()}
-  yDomain={[yMin, yMax]}
-  {series}
-  props={{
-    spline: {
-      curve: curveNatural,
-      strokeWidth: 1.5
-    }
-  }}
-/>
-```
-
-## D3 Scale Usage
-
-### Time Scale (x-axis with dates)
-
-```javascript
-import { scaleUtc } from 'd3-scale';
-
-xScale={scaleUtc()}
-```
-
-### Linear Scale (numeric values)
-
-```javascript
-import { scaleLinear } from 'd3-scale';
-
-yScale={scaleLinear()}
-yDomain={[0, 100]}  // fixed domain
-```
-
-### Dynamic Domain
-
-```javascript
-// Let layerchart calculate domain from data
-yDomain = { undefined };
-
-// Or calculate manually
-let yDomain = $derived([
-  Math.min(...data.map((d) => d.value)),
-  Math.max(...data.map((d) => d.value))
-]);
-```
-
-## Streaming Data Pattern
-
-For real-time charts with a sliding window:
-
-```svelte
-<script>
-  let {
-    data = [],
-    maxPoints = 100,  // sliding window size
-    ...
-  } = $props();
-
-  // Slice to maxPoints for display
-  let displayData = $derived(
-    maxPoints && data.length > maxPoints 
-      ? data.slice(-maxPoints) 
-      : data
-  );
-
-  // Add index for stable x positioning
-  let indexedData = $derived(
-    displayData.map((d, i) => ({ ...d, _index: i }))
-  );
-
-  // Use index-based x scale for streaming
-  let useIndexX = $derived(maxPoints !== undefined);
-  let xDomain = $derived(
-    useIndexX ? [0, (maxPoints || displayData.length) - 1] : undefined
-  );
-</script>
-
-<LineChart
-  data={indexedData}
-  x={useIndexX ? '_index' : xKey}
-  xScale={useIndexX ? scaleLinear() : scaleUtc()}
-  {xDomain}
-  ...
-/>
-```
-
-## Axis Configuration
-
-```svelte
-<LineChart
-  axis="both"  // "both" | "x" | "y" | "none"
-  props={{
-    xAxis: {
-      format: (date) => formatTime(date)  // custom formatter
-    },
-    yAxis: {
-      ticks: [0, 25, 50, 75, 100],  // explicit tick values
-      format: (v) => `${v}%`
-    },
-    grid: {
-      y: true,
-      x: false,
-      yTicks: [0, 25, 50, 75, 100]
-    }
-  }}
-/>
-```
-
-## Time Formatting
-
-Relative time (MM:SS from start):
-
-```javascript
-let baseTimestamp = $derived(
-  displayData.length > 0 && displayData[0][xKey] ? new Date(displayData[0][xKey]).getTime() : 0
-);
-
-function formatTime(date) {
-  if (!baseTimestamp) return '00:00';
-  const diffMs = date.getTime() - baseTimestamp;
-  const totalSeconds = Math.floor(diffMs / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-}
-```
-
-## Curve Types
-
-```javascript
-import { curveNatural, curveMonotoneX, curveStep, curveLinear } from 'd3-shape';
-
-props={{
-  spline: {
-    curve: curveNatural,    // smooth natural curve
-    // curve: curveMonotoneX, // monotonic (no overshooting)
-    // curve: curveStep,      // stepped line
-    // curve: curveLinear,    // straight lines
-    strokeWidth: 1.5
-  }
-}}
-```
-
-## Tooltip Integration
-
-```svelte
-<LineChart
-  tooltip={false}  // disable default tooltip
-  ...
-/>
-
-<!-- Or use custom Chart.Tooltip -->
-<Chart.Container config={chartConfig}>
-  <LineChart tooltip={{ ... }} />
-</Chart.Container>
-```
-
-## Legend Pattern
-
-Manual legend below chart:
-
-```svelte
-{#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}
-```
-
-For a complete chart example, see the `sensor-chart` component (import from `@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart`; editable source at https://design-system-labs.archetypeai.workers.dev/r/sensor-chart.json).