@archetypeai/ds-cli 0.7.8 → 0.8.0

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/primitives/chart/index.js';
+  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
 
   const chartConfig = {
     temperature: { label: 'Temperature', color: 'var(--chart-1)' },
@@ -253,4 +253,4 @@ Manual legend below chart:
 {/if}
 ```
 
-For a complete chart pattern example, see the `sensor-chart` pattern source in `$lib/components/ui/patterns/sensor-chart/`.
+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).

package/files/rules/components.md

@@ -2,8 +2,7 @@
 paths:
   - '**/components/**/*.svelte'
   - '$lib/**/*.svelte'
-  - '**/primitives/**/*.svelte'
-  - '**/patterns/**/*.svelte'
+  - '**/custom/**/*.svelte'
 ---
 
 # Component Authoring Rules
@@ -75,7 +74,7 @@ When wrapping bits-ui primitives, import the primitive and wrap it:
 </SelectPrimitive.Trigger>
 ```
 
-For the full primitives catalog with import paths, see `@skills/build-pattern`.
+For the full component catalog with import paths, read `ds-manifest.json` at the project root (see `@skills/build-component`).
 
 ## tailwind-variants (tv)
 

package/files/rules/frontend-architecture.md

@@ -21,26 +21,25 @@ Common extraction candidates: media inputs, status displays, result/summary view
 
 ## Gold-standard references
 
-The project includes pattern components that demonstrate these conventions. Study them before building new ones:
+The labs package ships composite components that demonstrate these conventions. Study their source (registry URLs in `ds-manifest.json`) before building new ones:
 
-- `$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
+- `video-player` (labs) — media playback with controls, composes console Card + Button with labs AspectRatio + Slider
+- `menubar` (labs) — branded header with snippet slots, composes console Button + the theme `darkMode` store
+- `sensor-chart` / `scatter-chart` (labs) — chart cards with typed data/axis config
 
-Check if an existing pattern fits before building a new one. Use `@skills/build-pattern` to create new patterns that follow these same conventions.
+Check `ds-manifest.json` for an existing component that fits before building a new one. Use `@skills/build-component` to create new components that follow these same conventions.
 
 ## Directory structure
 
+Components come from the npm packages by default — most projects need no local copies at all.
+
 ```
 $lib/components/ui/
-  primitives/   — DS registry primitives (Card, Badge, Button, etc.)
-  patterns/     — DS registry patterns (BackgroundCard, FlatLogItem, etc.)
-  custom/       — Project-specific components not from the registry
+  custom/       — project-specific components composed from the packages
+  <name>/       — registry-installed editable source (only for deliberately modified components)
 ```
 
-Place custom components (ones you create for this project that are not installed from the registry) in `$lib/components/ui/custom/`. Never put custom components directly in `ui/` next to `primitives/` and `patterns/`.
+Place custom components (ones you create for this project) in `$lib/components/ui/custom/`. Never edit anything in `node_modules`, and never put custom components next to registry-installed source.
 
 ## Component conventions
 
@@ -50,7 +49,7 @@ Follow `@rules/components` for the full conventions. The essentials:
 - `cn()` for all class merging — never raw string concatenation
 - `$derived` for computed state
 - Spread `...restProps` on the root element
-- Compose from DS primitives (Card, Badge, Button, etc.) — not raw HTML
+- Compose from DS package components (Card, Badge, Button, etc.) — not raw HTML
 
 ## Page-level orchestration
 
@@ -80,7 +79,7 @@ For skills that stream results (SSE, polling), prefer:
 
 - Progressive rendering — show results as they arrive, don't wait for completion
 - Live counters or progress indicators
-- Auto-scrolling log views (reference ExpandableLog pattern)
+- Auto-scrolling log views
 
 ## Override clause
 

package/files/rules/styling.md

@@ -82,23 +82,15 @@ For class merging with `cn()`, see `@rules/components`.
 In your global CSS file:
 
 ```css
+@import 'tailwindcss';
+@import 'tw-animate-css';
 @import '@archetypeai/ds-lib-tokens/fonts.css';
 @import '@archetypeai/ds-lib-tokens/theme.css';
-@import 'tailwindcss';
-@import 'tw-animate-css'; /* optional, for animations */
+@source '../../node_modules/@archetypeai/ds-ui-svelte-console/dist';
+@source '../../node_modules/@archetypeai/ds-ui-svelte-labs/dist';
 ```
 
-Order matters - tokens must come before Tailwind.
-
-### Hide Scrollbars
-
-Always add this rule to the root layout CSS (`src/app.css` or `src/routes/layout.css`) to hide visible scrollbars in ScrollArea components:
-
-```css
-[data-slot='scroll-area-scrollbar'] {
-	display: none !important;
-}
-```
+Order matters — `tailwindcss` first, then the tokens theme, then the package `@source` directives (they make Tailwind emit classes used inside the package dists).
 
 ## Tailwind v4 Specifics
 

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

@@ -1,12 +1,12 @@
 ---
 name: apply-ds
-description: Apply DS tokens, components, and patterns to an existing demo initialized with ds-cli init.
+description: Apply DS tokens and components to an existing demo initialized with ds-cli init.
 allowed-tools: Read, Edit, Grep, Bash
 ---
 
 # Applying the Design System to a Demo
 
-This skill assumes `npx @archetypeai/ds-cli init` has already been run. The project has tokens, Tailwind v4, shadcn-svelte, and DS components installed. The goal is to migrate the demo's existing UI to use DS primitives and semantic tokens.
+This skill assumes `npx @archetypeai/ds-cli init` has already been run. The project has tokens, Tailwind v4, and both design system packages (`@archetypeai/ds-ui-svelte-console`, `@archetypeai/ds-ui-svelte-labs`) installed. The goal is to migrate the demo's existing UI to use DS components and semantic tokens. Read `ds-manifest.json` at the project root for the full component catalog.
 
 ## Steps
 
@@ -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/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` |
+| `<button>` | `<Button>` | `@archetypeai/ds-ui-svelte-console/primitives/button` |
+| `<input>` | `<Input>` | `@archetypeai/ds-ui-svelte-console/primitives/input` |
+| `<textarea>` | `<Textarea>` | `@archetypeai/ds-ui-svelte-console/primitives/textarea` |
+| `<select>` | `<Select.Root>` + `<Select.Trigger>` + `<Select.Content>` + `<Select.Item>` | `@archetypeai/ds-ui-svelte-console/primitives/select` |
+| `<table>` | `<Table.Root>` + `<Table.Header>` + `<Table.Row>` + `<Table.Head>` + `<Table.Body>` + `<Table.Cell>` | `@archetypeai/ds-ui-svelte-console/primitives/table` |
+| `<dialog>` | `<Dialog.Root>` + `<Dialog.Content>` + `<Dialog.Header>` + `<Dialog.Title>` | `@archetypeai/ds-ui-svelte-console/primitives/dialog` |
+| `<hr>` | `<Separator>` | `@archetypeai/ds-ui-svelte-console/primitives/separator` |
+| `<label>` | `<Label>` | `@archetypeai/ds-ui-svelte-console/primitives/label` |
+| `<a>` (styled as button) | `<Button variant="link">` or `<Button>` with `href` | `@archetypeai/ds-ui-svelte-console/primitives/button` |
 
 For each replacement:
 
@@ -92,11 +92,11 @@ Identify structural opportunities to use DS composition patterns:
 - **Cards** — wrap content sections in `<Card.Root>` / `<Card.Header>` / `<Card.Content>` instead of raw `<div>` with border/shadow classes
 - **Separators** — replace `<hr>` or border-bottom hacks with `<Separator>`
 - **Badges** — replace styled `<span>` status indicators with `<Badge>`
-- **Skeleton** — replace loading placeholders with `<Skeleton>`
-- **Scroll Area** — replace overflow containers with `<ScrollArea>`
+- **Spinners** — replace loading placeholders with `<Spinner>`
+- **Empty states** — replace ad-hoc "no data" markup with `<EmptyState>`
 - **Tooltips** — replace `title` attributes with `<Tooltip.Root>` / `<Tooltip.Trigger>` / `<Tooltip.Content>`
 
-Import primitives from `$lib/components/ui/primitives/` and patterns from `$lib/components/ui/patterns/` as needed.
+Import console components from `@archetypeai/ds-ui-svelte-console/primitives/<name>` and labs components (menubar, charts, slider, switch, ...) from `@archetypeai/ds-ui-svelte-labs/primitives/<name>` — see `ds-manifest.json` for the catalog.
 
 ## 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/primitives/` or `$lib/components/ui/patterns/`
+- [ ] Component imports resolve to the design system packages (`@archetypeai/ds-ui-svelte-console`, `@archetypeai/ds-ui-svelte-labs`) — or `$lib/components/ui/` only for deliberately modified registry source
 - [ ] `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-component/SKILL.md

@@ -0,0 +1,153 @@
+---
+name: build-component
+description: Creates composite UI components by assembling design system package primitives. Use when building reusable components that combine multiple primitives (Card, Button, Input, etc.), creating dashboard widgets, form groups, sensor cards, data displays, or any complex component from existing design system components. Also use when the user asks to create a "component", "widget", or "pattern" that should follow design system conventions.
+---
+
+# Building Components
+
+Custom components are composed from the design system packages and live in
+`$lib/components/ui/custom/` — never next to registry-installed source and never
+inside `node_modules`.
+
+## Decision: compose vs extend vs modify
+
+**Before building, read `ds-manifest.json` at the project root.** It lists every
+component in both tiers (console = stable base, labs = experimental) with import
+subpaths, variant axes, and registry source URLs. If an existing component
+covers the use case — even partially — use it rather than creating a new one.
+
+**Compose a custom component when:**
+
+- Combining 3+ package components into a reusable unit
+- The combination will be used in multiple places
+- The component has its own props/state logic
+
+**Use variants instead when:**
+
+- The design space is already covered by a component's variant axes (check the
+  manifest's `variants` entry before adding wrappers)
+
+**Modify via the registry only when:**
+
+- A component's internals must diverge from the package. Install its editable
+  source (`npx shadcn-svelte@latest add <source URL from ds-manifest.json>`) and
+  import the copy from `$lib/components/ui/`.
+
+## Component Structure
+
+```svelte
+<script>
+  import { cn } from '$lib/utils.js';
+  import * as Card from '@archetypeai/ds-ui-svelte-console/primitives/card';
+  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
+
+  let { title, class: className, children, ...restProps } = $props();
+</script>
+
+<Card.Root class={cn('p-4', className)} {...restProps}>
+  <Card.Header>
+    <Card.Title>{title}</Card.Title>
+  </Card.Header>
+  <Card.Content>
+    {@render children?.()}
+  </Card.Content>
+</Card.Root>
+```
+
+## Key Conventions
+
+### Props Pattern
+
+Always use this structure:
+
+```javascript
+let {
+  ref = $bindable(null), // optional DOM reference
+  class: className, // rename to avoid reserved word
+  children, // snippet for slot content
+  ...restProps // pass-through attributes
+} = $props();
+```
+
+### Class Merging
+
+Always use `cn()` for classes:
+
+```svelte
+<div class={cn('bg-card p-4', className)}>
+```
+
+Never concatenate strings directly.
+
+### Spreading restProps
+
+Always spread on the root element:
+
+```svelte
+<Card.Root class={cn('p-4', className)} {...restProps}>
+```
+
+This ensures aria attributes, data attributes, and event handlers pass through.
+
+### Rendering Children
+
+Use `{@render}` for slot content:
+
+```svelte
+{@render children?.()}
+```
+
+## Available Components
+
+Do not rely on a memorized catalog — read `ds-manifest.json` for the current
+component list. The shape per tier:
+
+- **console** (`@archetypeai/ds-ui-svelte-console/primitives/<name>`): stable
+  base primitives — alert, badge, button, card, checkbox, codeblock,
+  collapsible, dialog, dropdown-menu, dropzone, empty-state, input, input-group,
+  item, label, progress, select, separator, sonner, spinner, table, tabs, theme,
+  textarea, tooltip
+- **labs** (`@archetypeai/ds-ui-svelte-labs/primitives/<name>`): experimental
+  components — aspect-ratio, chart, kbd, logo, menubar, scatter-chart,
+  sensor-chart, slider, switch, toggle, video-player
+
+The manifest is generated from the registries; trust it over this list if they
+disagree. Variant values flagged `consoleProductOnly` (e.g. `runSession`,
+`topNav*`) must not be used outside the console product.
+
+## Example: Sensor Card Component
+
+```svelte
+<script>
+  import { cn } from '$lib/utils.js';
+  import * as Card from '@archetypeai/ds-ui-svelte-console/primitives/card';
+  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
+
+  let { title = 'Sensor', icon: Icon, data = [], class: className, ...restProps } = $props();
+</script>
+
+<Card.Root class={cn('p-4', className)} {...restProps}>
+  <Card.Header class="flex flex-row items-center justify-between p-0">
+    <Card.Title class="text-foreground font-mono text-base uppercase">
+      {title}
+    </Card.Title>
+    {#if Icon}
+      <Icon class="text-muted-foreground size-6" aria-hidden="true" />
+    {/if}
+  </Card.Header>
+  <Card.Content class="p-0">
+    <Chart.Container config={{}} class="h-[220px] w-full">
+      <!-- chart content -->
+    </Chart.Container>
+  </Card.Content>
+</Card.Root>
+```
+
+## Detailed Conventions
+
+See `@rules/components.md` for:
+
+- bits-ui wrapper patterns
+- tailwind-variants (tv) usage
+- Conditional rendering patterns
+- Icon handling

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

@@ -13,9 +13,9 @@ 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/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`)
+1. Read `ds-manifest.json` at the project root — it lists every component in both packages (console + labs) with import subpaths and variant axes
+2. Components come from the npm packages (`@archetypeai/ds-ui-svelte-console`, `@archetypeai/ds-ui-svelte-labs`); also check `$lib/components/ui/` for registry-installed (modified) copies and prefer those when present
+3. If a required component does not exist in either tier, build it via `@skills/build-component`
 4. **Never inline raw markup as a substitute for a missing component**
 
 The dashboard requires at minimum: `Menubar`, `Button`. For card-based layouts: `Card`.
@@ -38,14 +38,14 @@ Unless the user explicitly asks for a different layout:
 
 ## Menubar
 
-Use the `Menubar` pattern. It renders a branded `<header>` with the Archetype AI Logo on the left and a partner logo placeholder. Pass action content as children. The Menubar includes a built-in dark mode toggle on the far right that detects system preference and defaults to dark. To disable it, pass `darkToggle={false}`.
+Use the labs `Menubar` component. It renders a branded `<header>` with the Archetype AI Logo on the left. Pass action content as children. The Menubar includes a built-in dark mode toggle on the far right that toggles the host app's dark class (via the console `darkMode` store). To disable it, pass `darkToggle={false}`.
 
 **Every dashboard Menubar must include a "Send Report" button.** Additional actions can be appended alongside it.
 
 ```svelte
 <script>
-  import Menubar from '$lib/components/ui/patterns/menubar/index.js';
-  import { Button } from '$lib/components/ui/primitives/button/index.js';
+  import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
+  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
 </script>
 
 <Menubar>
@@ -54,7 +54,7 @@ Use the `Menubar` pattern. It renders a branded `<header>` with the Archetype AI
 </Menubar>
 ```
 
-For co-branding, pass a `partnerLogo` snippet to replace the default placeholder:
+For co-branding, pass a `partnerLogo` snippet to add a separator and partner logo beside the Archetype AI Logo:
 
 ```svelte
 <Menubar>
@@ -68,8 +68,8 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 
 ## Preservation Rules
 
-- **Never rewrite or replace** the Menubar component file in `$lib/components/ui/`
-- **Never modify installed primitives/patterns** in `$lib/components/ui/` — those are design system files
+- **Never edit design system files in `node_modules`** — compose and override via props/`class`
+- **Never rewrite or replace** registry-installed component source in `$lib/components/ui/` unless the user asked you to modify that component
 - When a Menubar already has children (buttons, actions), **append** new actions alongside existing ones — do not replace them
 - When a page already has content, **integrate alongside** existing markup — do not overwrite the file
 
@@ -77,8 +77,8 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 
 ```svelte
 <script>
-  import Menubar from '$lib/components/ui/patterns/menubar/index.js';
-  import { Button } from '$lib/components/ui/primitives/button/index.js';
+  import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
+  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
 </script>
 
 <div class="bg-background grid h-screen w-screen grid-rows-[auto_1fr] overflow-hidden">
@@ -169,9 +169,9 @@ The `flex-1` on the last left-column card makes it grow to fill remaining vertic
 ```svelte
 <!-- src/routes/+page.svelte -->
 <script>
-  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';
+  import Menubar from '@archetypeai/ds-ui-svelte-labs/primitives/menubar';
+  import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
+  import { Card, CardHeader, CardTitle, CardContent } from '@archetypeai/ds-ui-svelte-console/primitives/card';
 </script>
 
 <div
@@ -202,12 +202,12 @@ The `flex-1` on the last left-column card makes it grow to fill remaining vertic
 </div>
 ```
 
-## Populating Panels with Pattern Components
+## Populating Panels
 
-Panels should contain pattern components, not raw markup. Before building new components:
+Panels should contain components, not raw markup. Before building new components:
 
-1. Fetch `https://design-system.archetypeai.workers.dev/r/patterns.json` to discover available patterns. Each has a `description` summarizing its purpose. If one fits, use it.
-2. If no existing pattern fits, create one via `@skills/build-pattern`
+1. Read `ds-manifest.json` to discover available components in both tiers. Each has a `description` summarizing its purpose. If one fits, use it.
+2. If no existing component fits, create one via `@skills/build-component`
 3. Each panel should contain one primary component with clear props for data flow
 
 This keeps dashboards composable and consistent with the design system.

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

@@ -7,25 +7,23 @@ description: Sets up data visualizations using layerchart and the Chart primitiv
 
 Build charts using layerchart wrapped in the Chart.Container primitive.
 
-## Discovering Components
+## Where Charts Come From
 
-Before building, check which components are installed in the project already:
+The chart components live in the labs package — import them, do not create chart files by hand:
 
-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`
-
-## Chart Primitive Installation
-
-The `chart` primitive is a multi-file package (chart-container, chart-style, chart-tooltip, scatter-tooltip, chart-utils, index). These files use relative imports between each other (e.g., `./chart-utils.js`).
+```svelte
+<script>
+  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
+  import ScatterChart from '@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart';
+  import SensorChart from '@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart';
+</script>
+```
 
-**NEVER manually create chart primitive files.** Always install via the registry:
+`ds-manifest.json` at the project root lists the full catalog (both tiers) with import subpaths. For card-wrapped charts compose with `@archetypeai/ds-ui-svelte-console/primitives/card`.
 
-```bash
-npx shadcn-svelte@latest add --registry https://design-system.archetypeai.workers.dev/r chart
-```
+Only if a chart must diverge from the package, install its editable source via the registry (URL in the manifest), e.g. `npx shadcn-svelte@latest add https://design-system-labs.archetypeai.workers.dev/r/chart.json`. **NEVER manually create chart primitive files** — the multi-file chart source uses relative imports that break when files are hand-written.
 
-If you create individual files by hand, relative imports will break and the chart will fail to render.
+`layerchart` is installed at an exact pinned prerelease; newer prereleases break the chart components. Never loosen the pin.
 
 ## Choosing a Chart Type
 

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

@@ -2,13 +2,13 @@
 
 Scatter plots for cluster visualizations, embedding data, and 2D point clouds.
 
-## Installation
+## Import
 
-```bash
-npx shadcn-svelte@latest add --registry https://design-system.archetypeai.workers.dev/r scatter-chart
+```svelte
+import ScatterChart from '@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart';
 ```
 
-This installs `ScatterChart.svelte` and its dependencies (`card`, `chart`, `utils`, `layerchart`, `d3-scale`).
+No install needed — the labs package ships it. Only to modify the component, pull its editable source instead: `npx shadcn-svelte@latest add https://design-system-labs.archetypeai.workers.dev/r/scatter-chart.json` (also installs its chart/utils source dependencies).
 
 ## Props
 
@@ -75,7 +75,7 @@ The `embedding.csv` contains dimensionality-reduced coordinates. To prepare it f
 
 ```svelte
 <script>
-  import ScatterChart from '$lib/components/ui/patterns/scatter-chart/index.js';
+  import ScatterChart from '@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart';
   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/patterns/scatter-chart/index.js';
+  import ScatterChart from '@archetypeai/ds-ui-svelte-labs/primitives/scatter-chart';
   import ScatterChartIcon from '@lucide/svelte/icons/scatter-chart';
 
   let streamData = $state([]);
@@ -179,13 +179,13 @@ The `embedding.csv` contains dimensionality-reduced coordinates. To prepare it f
 />
 ```
 
-## Building Inline (Without Pattern)
+## Building Inline (custom variant)
 
-If the `scatter-chart` pattern is not installed, use `card` + `chart` primitives with `ScatterChart` from layerchart:
+If `scatter-chart` doesn't fit and a custom chart is required, compose the console `card` and labs `chart` components with `ScatterChart` from layerchart:
 
 ```svelte
 <script>
-  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
+  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
   import { ScatterChart } from 'layerchart';
   import { scaleLinear } from 'd3-scale';
 

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

@@ -2,13 +2,13 @@
 
 Line charts for time series data, sensor readings, and streaming signals.
 
-## Installation
+## Import
 
-```bash
-npx shadcn-svelte@latest add --registry https://design-system.archetypeai.workers.dev/r sensor-chart
+```svelte
+import SensorChart from '@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart';
 ```
 
-This installs `SensorChart.svelte` and its dependencies (`card`, `chart`, `utils`, `layerchart`, `d3-scale`, `d3-shape`).
+No install needed — the labs package ships it. Only to modify the component, pull its editable source instead: `npx shadcn-svelte@latest add https://design-system-labs.archetypeai.workers.dev/r/sensor-chart.json` (also installs its chart/utils source dependencies).
 
 ## Props
 
@@ -38,7 +38,7 @@ This installs `SensorChart.svelte` and its dependencies (`card`, `chart`, `utils
 
 ```svelte
 <script>
-  import SensorChart from '$lib/components/ui/patterns/sensor-chart/index.js';
+  import SensorChart from '@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart';
   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/patterns/sensor-chart/index.js';
+  import SensorChart from '@archetypeai/ds-ui-svelte-labs/primitives/sensor-chart';
   import ThermometerIcon from '@lucide/svelte/icons/thermometer';
 
   let streamingData = $state([]);
@@ -120,13 +120,13 @@ For real-time data with a sliding window, use the `maxPoints` prop and feed data
 />
 ```
 
-## Building Inline (Without Pattern)
+## Building Inline (custom variant)
 
-If the `sensor-chart` pattern is not installed, build the equivalent using `card` + `chart` primitives with `LineChart` from layerchart:
+If `sensor-chart` doesn't fit and a custom chart is required, compose the console `card` and labs `chart` components with `LineChart` from layerchart:
 
 ```svelte
 <script>
-  import * as Chart from '$lib/components/ui/primitives/chart/index.js';
+  import * as Chart from '@archetypeai/ds-ui-svelte-labs/primitives/chart';
   import { LineChart } from 'layerchart';
   import { scaleUtc, scaleLinear } from 'd3-scale';
   import { curveNatural } from 'd3-shape';

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

@@ -48,8 +48,9 @@ function copyFile(src, dest) {
 export function setupCursor(projectDir) {
   p.log.step('Setting up for Cursor IDE');
 
-  // copy AGENTS.md to root
+  // copy AGENTS.md + machine-readable component manifest to root
   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');
@@ -73,8 +74,9 @@ export function setupCursor(projectDir) {
 export function setupClaude(projectDir) {
   p.log.step('Setting up for Claude Code');
 
-  // copy CLAUDE.md to root
+  // copy CLAUDE.md + machine-readable component manifest to root
   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');