@archetypeai/ds-cli 0.3.15 → 0.3.16

package/files/rules/charts.md

@@ -21,7 +21,7 @@ Wrap all charts in Chart.Container with a config prop:
 
 ```svelte
 <script>
-  import * as Chart from '$lib/components/ui/chart/index.js';
+  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
 
   const chartConfig = {
     temperature: { label: 'Temperature', color: 'var(--chart-1)' },
@@ -258,8 +258,8 @@ Manual legend below chart:
 ```svelte
 <script>
   import { cn } from '$lib/utils.js';
-  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
-  import * as Chart from '$lib/components/ui/chart/index.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';

package/files/rules/frontend-architecture.md

@@ -23,11 +23,11 @@ Common extraction candidates: media inputs, status displays, result/summary view
 
 The project includes pattern components that demonstrate these conventions. Study them before building new ones:
 
-- `$lib/components/ui/VideoPlayer.svelte` — media playback with controls, composes Card + AspectRatio + Button + Slider
-- `$lib/components/ui/ExpandableLog.svelte` — streaming log display, composes Collapsible + Item + Badge
-- `$lib/components/ui/StatusBadge.svelte` — health indicator with derived state, composes Badge + Avatar
-- `$lib/components/ui/HealthscoreCard.svelte` — score card with derived state, composes Card sub-components
-- `$lib/components/ui/Menubar.svelte` — branded header with snippet slots
+- `$lib/components/ui/patterns/video-player/video-player.svelte` — media playback with controls, composes Card + AspectRatio + Button + Slider
+- `$lib/components/ui/patterns/expandable-log/expandable-log.svelte` — streaming log display, composes Collapsible + Item + Badge
+- `$lib/components/ui/patterns/status-badge/status-badge.svelte` — health indicator with derived state, composes Badge + Avatar
+- `$lib/components/ui/patterns/healthscore-card/healthscore-card.svelte` — score card with derived state, composes Card sub-components
+- `$lib/components/ui/patterns/menubar/menubar.svelte` — branded header with snippet slots
 
 Check if an existing pattern fits before building a new one. Use `@skills/build-pattern` to create new patterns that follow these same conventions.
 

package/files/skills/apply-ds/SKILL.md

@@ -68,15 +68,15 @@ Swap native HTML elements for their DS component equivalents. Add imports as nee
 
 | Native Element | DS Component | Import From |
 | --- | --- | --- |
-| `<button>` | `<Button>` | `$lib/components/ui/button` |
-| `<input>` | `<Input>` | `$lib/components/ui/input` |
-| `<textarea>` | `<Textarea>` | `$lib/components/ui/textarea` |
-| `<select>` | `<Select.Root>` + `<Select.Trigger>` + `<Select.Content>` + `<Select.Item>` | `$lib/components/ui/select` |
-| `<table>` | `<Table.Root>` + `<Table.Header>` + `<Table.Row>` + `<Table.Head>` + `<Table.Body>` + `<Table.Cell>` | `$lib/components/ui/table` |
-| `<dialog>` | `<Dialog.Root>` + `<Dialog.Content>` + `<Dialog.Header>` + `<Dialog.Title>` | `$lib/components/ui/dialog` |
-| `<hr>` | `<Separator>` | `$lib/components/ui/separator` |
-| `<label>` | `<Label>` | `$lib/components/ui/label` |
-| `<a>` (styled as button) | `<Button variant="link">` or `<Button>` with `href` | `$lib/components/ui/button` |
+| `<button>` | `<Button>` | `$lib/components/ui/primitives/button` |
+| `<input>` | `<Input>` | `$lib/components/ui/primitives/input` |
+| `<textarea>` | `<Textarea>` | `$lib/components/ui/primitives/textarea` |
+| `<select>` | `<Select.Root>` + `<Select.Trigger>` + `<Select.Content>` + `<Select.Item>` | `$lib/components/ui/primitives/select` |
+| `<table>` | `<Table.Root>` + `<Table.Header>` + `<Table.Row>` + `<Table.Head>` + `<Table.Body>` + `<Table.Cell>` | `$lib/components/ui/primitives/table` |
+| `<dialog>` | `<Dialog.Root>` + `<Dialog.Content>` + `<Dialog.Header>` + `<Dialog.Title>` | `$lib/components/ui/primitives/dialog` |
+| `<hr>` | `<Separator>` | `$lib/components/ui/primitives/separator` |
+| `<label>` | `<Label>` | `$lib/components/ui/primitives/label` |
+| `<a>` (styled as button) | `<Button variant="link">` or `<Button>` with `href` | `$lib/components/ui/primitives/button` |
 
 For each replacement:
 
@@ -96,7 +96,7 @@ Identify structural opportunities to use DS composition patterns:
 - **Scroll Area** — replace overflow containers with `<ScrollArea>`
 - **Tooltips** — replace `title` attributes with `<Tooltip.Root>` / `<Tooltip.Trigger>` / `<Tooltip.Content>`
 
-Import patterns from `$lib/components/ui/` as needed.
+Import primitives from `$lib/components/ui/primitives/` and patterns from `$lib/components/ui/patterns/` as needed.
 
 ## Step 5: Lint and Format
 
@@ -114,7 +114,7 @@ Confirm the design system is properly applied:
 
 - [ ] No raw Tailwind color utilities in `.svelte` files (re-run the audit script)
 - [ ] Native elements replaced with DS components where appropriate
-- [ ] All component imports resolve to `$lib/components/ui/`
+- [ ] All component imports resolve to `$lib/components/ui/primitives/` or `$lib/components/ui/patterns/`
 - [ ] `cn()` used for class merging — no string concatenation
 - [ ] Linting passes: `npm run lint && npm run format:check`
 - [ ] App builds without errors: `npm run build`

package/files/skills/build-pattern/SKILL.md

@@ -25,8 +25,8 @@ Patterns are composite components assembled from design system primitives.
 ```svelte
 <script>
   import { cn } from '$lib/utils.js';
-  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
-  import { Button } from '$lib/components/ui/button/index.js';
+  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/primitives/card/index.js';
+  import { Button } from '$lib/components/ui/primitives/button/index.js';
 
   let { title, class: className, children, ...restProps } = $props();
 </script>
@@ -86,7 +86,7 @@ Use `{@render}` for slot content:
 
 ## Available Primitives
 
-Import from `$lib/components/ui/`. Before building, list `$lib/components/ui/` to discover all installed primitives.
+Import primitives from `$lib/components/ui/primitives/` and patterns from `$lib/components/ui/patterns/`. Before building, list these directories to discover all installed components.
 
 ### Layout & Structure
 
@@ -169,8 +169,8 @@ Import from `$lib/components/ui/`. Before building, list `$lib/components/ui/` t
 ```svelte
 <script>
   import { cn } from '$lib/utils.js';
-  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
-  import * as Chart from '$lib/components/ui/chart/index.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';
 
   let { title = 'SENSOR', icon: Icon, data = [], class: className, ...restProps } = $props();
 </script>

package/files/skills/create-dashboard/SKILL.md

@@ -13,7 +13,7 @@ Scaffold a full-viewport dashboard with a branded menubar and panel-based conten
 
 Before building, check which components are installed in the project:
 
-1. List `$lib/components/ui/` to discover available primitives (subdirectories with `index.js`) and patterns (PascalCase `.svelte` files)
+1. List `$lib/components/ui/primitives/` and `$lib/components/ui/patterns/` to discover available primitives and patterns (each in a kebab-case subdirectory with `index.js`)
 2. Only use components that actually exist in the project
 3. If a required component is missing, ask the user to install it (via `npx shadcn-svelte@latest add`) or build it (via `@skills/build-pattern`)
 4. **Never inline raw markup as a substitute for a missing component**
@@ -44,8 +44,8 @@ Use the `Menubar` pattern. It renders a branded `<header>` with the Archetype AI
 
 ```svelte
 <script>
-  import Menubar from '$lib/components/ui/Menubar.svelte';
-  import { Button } from '$lib/components/ui/button/index.js';
+  import Menubar from '$lib/components/ui/patterns/menubar/index.js';
+  import { Button } from '$lib/components/ui/primitives/button/index.js';
 </script>
 
 <Menubar>
@@ -61,7 +61,7 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
   {#snippet partnerLogo()}
     <img src="/partner-logo.svg" alt="Partner" class="h-6" />
   {/snippet}
-  <!-- additive example — append to existing children, don't replace them -->
+  <!-- additive example — append to existing children, don't replace them  -->
   <Button variant="link" class="text-muted-foreground">Send Report</Button>
 </Menubar>
 ```
@@ -77,8 +77,8 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 
 ```svelte
 <script>
-  import Menubar from '$lib/components/ui/Menubar.svelte';
-  import { Button } from '$lib/components/ui/button/index.js';
+  import Menubar from '$lib/components/ui/patterns/menubar/index.js';
+  import { Button } from '$lib/components/ui/primitives/button/index.js';
 </script>
 
 <div class="bg-background grid h-screen w-screen grid-rows-[auto_1fr] overflow-hidden">
@@ -150,9 +150,9 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 ```svelte
 <!-- src/routes/+page.svelte -->
 <script>
-  import Menubar from '$lib/components/ui/Menubar.svelte';
-  import { Button } from '$lib/components/ui/button/index.js';
-  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/card/index.js';
+  import Menubar from '$lib/components/ui/patterns/menubar/index.js';
+  import { Button } from '$lib/components/ui/primitives/button/index.js';
+  import { Card, CardHeader, CardTitle, CardContent } from '$lib/components/ui/primitives/card/index.js';
 </script>
 
 <div

package/files/skills/setup-chart/SKILL.md

@@ -11,7 +11,7 @@ Build charts using layerchart wrapped in the Chart.Container primitive.
 
 Before building, check which components are installed in the project already:
 
-1. List `$lib/components/ui/` to discover available primitives and patterns
+1. List `$lib/components/ui/primitives/` and `$lib/components/ui/patterns/` to discover available primitives and patterns
 2. Only use components that actually exist in the project
 3. Charts require at minimum: `chart`. For card-wrapped charts: `card`, `chart`
 

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

@@ -75,7 +75,7 @@ The `embedding.csv` contains dimensionality-reduced coordinates. To prepare it f
 
 ```svelte
 <script>
-  import ScatterChart from '$lib/components/ui/ScatterChart.svelte';
+  import ScatterChart from '$lib/components/ui/patterns/scatter-chart/index.js';
   import ScatterChartIcon from '@lucide/svelte/icons/scatter-chart';
   import embeddingCsv from '$lib/data/embedding.csv?raw';
 
@@ -135,7 +135,7 @@ The `embedding.csv` contains dimensionality-reduced coordinates. To prepare it f
 ```svelte
 <script>
   import { onMount, onDestroy } from 'svelte';
-  import ScatterChart from '$lib/components/ui/ScatterChart.svelte';
+  import ScatterChart from '$lib/components/ui/patterns/scatter-chart/index.js';
   import ScatterChartIcon from '@lucide/svelte/icons/scatter-chart';
 
   let streamData = $state([]);
@@ -185,7 +185,7 @@ If the `scatter-chart` pattern is not installed, use `card` + `chart` primitives
 
 ```svelte
 <script>
-  import * as Chart from '$lib/components/ui/chart/index.js';
+  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
   import { ScatterChart } from 'layerchart';
   import { scaleLinear } from 'd3-scale';
 

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

@@ -38,7 +38,7 @@ This installs `SensorChart.svelte` and its dependencies (`card`, `chart`, `utils
 
 ```svelte
 <script>
-  import SensorChart from '$lib/components/ui/SensorChart.svelte';
+  import SensorChart from '$lib/components/ui/patterns/sensor-chart/index.js';
   import AudioWaveformIcon from '@lucide/svelte/icons/audio-waveform';
   import timeseriesCsv from '$lib/data/timeseries.csv?raw';
 
@@ -86,7 +86,7 @@ For real-time data with a sliding window, use the `maxPoints` prop and feed data
 ```svelte
 <script>
   import { onMount, onDestroy } from 'svelte';
-  import SensorChart from '$lib/components/ui/SensorChart.svelte';
+  import SensorChart from '$lib/components/ui/patterns/sensor-chart/index.js';
   import ThermometerIcon from '@lucide/svelte/icons/thermometer';
 
   let streamingData = $state([]);
@@ -126,7 +126,7 @@ If the `sensor-chart` pattern is not installed, build the equivalent using `card
 
 ```svelte
 <script>
-  import * as Chart from '$lib/components/ui/chart/index.js';
+  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
   import { LineChart } from 'layerchart';
   import { scaleUtc, scaleLinear } from 'd3-scale';
   import { curveNatural } from 'd3-shape';

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

@@ -260,7 +260,7 @@ export async function installComponents(pm, projectPath, componentUrls) {
 export function createDemoPage(projectPath) {
   const pagePath = join(projectPath, 'src/routes/+page.svelte');
   const demoContent = `<script>
-\timport Button from "$lib/components/ui/button/button.svelte";
+\timport Button from "$lib/components/ui/primitives/button/button.svelte";
 </script>
 
 <div class="flex flex-col items-center justify-center min-h-screen space-y-xl">

package/package.json

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