@archetypeai/ds-cli 0.3.16 → 0.3.18

package/files/rules/components.md

@@ -75,22 +75,7 @@ When wrapping bits-ui primitives, import the primitive and wrap it:
 </SelectPrimitive.Trigger>
 ```
 
-Common bits-ui primitives:
-
-- `Dialog` - Dialog.Root, Dialog.Portal, Dialog.Content, Dialog.Trigger, Dialog.Close
-- `AlertDialog` - AlertDialog.Root, AlertDialog.Trigger, AlertDialog.Content, AlertDialog.Action, AlertDialog.Cancel
-- `Select` - Select.Root, Select.Trigger, Select.Content, Select.Item
-- `Popover` - Popover.Root, Popover.Portal, Popover.Content, Popover.Trigger
-- `HoverCard` - HoverCard.Root, HoverCard.Trigger, HoverCard.Content
-- `Tooltip` - Tooltip.Root, Tooltip.Trigger, Tooltip.Content
-- `DropdownMenu` - DropdownMenu.Root, DropdownMenu.Trigger, DropdownMenu.Content, DropdownMenu.Item
-- `ContextMenu` - ContextMenu.Root, ContextMenu.Trigger, ContextMenu.Content, ContextMenu.Item
-- `Accordion` - Accordion.Root, Accordion.Item, Accordion.Trigger, Accordion.Content
-- `Tabs` - Tabs.Root, Tabs.List, Tabs.Trigger, Tabs.Content
-- `Collapsible` - Collapsible.Root, Collapsible.Trigger, Collapsible.Content
-- `Command` - Command.Root, Command.Input, Command.List, Command.Item
-
-Additional bits-ui primitives: Calendar, RangeCalendar, Checkbox, Switch, Slider, Toggle, ToggleGroup, RadioGroup, Menubar, NavigationMenu, Pagination, InputOTP, Sidebar, Progress, Label, Separator, AspectRatio, Avatar, ScrollArea, Sheet. Check the source files for their wrapper patterns.
+For the full primitives catalog with import paths, see `@skills/build-pattern`.
 
 ## tailwind-variants (tv)
 

package/files/rules/design-principles.md

@@ -1,3 +1,9 @@
+---
+paths:
+  - '**/*.svelte'
+  - '**/+page.svelte'
+---
+
 # Physical AI Design Principles
 
 ## Scope
@@ -53,4 +59,13 @@ Interaction unfolds within a three-way relationship: **person, system, and physi
 
 - Default to interfaces that support perception and reasoning rather than autonomous AI action
 - Where possible, distinguish between "the system shows" (Measure) and "the system suggests" (Reason)
-- Prefer framing AI output as observations or suggestions rather than commands or decisions
+- Prefer framing AI output as observations or suggestions rather than commands or decisions
+
+## Aesthetic Conventions
+
+### Typography
+- Use mono font (`font-mono`) with careful consideration: prefer it on badges, buttons, card headers, and numeric values. Do not apply mono to body text or descriptions.
+
+### Card Defaults
+- For single-purpose card components (status display, score, chart), use BackgroundCard as the default container.
+- Status cards showing a single metric or state often do not need a CardHeader — omit when content is self-explanatory.

package/files/rules/frontend-architecture.md

@@ -31,6 +31,17 @@ The project includes pattern components that demonstrate these conventions. Stud
 
 Check if an existing pattern fits before building a new one. Use `@skills/build-pattern` to create new patterns that follow these same conventions.
 
+## Directory structure
+
+```
+$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
+```
+
+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/`.
+
 ## Component conventions
 
 Follow `@rules/components` for the full conventions. The essentials:

package/files/rules/state.md

@@ -330,50 +330,18 @@ Log when values change (removed in production builds):
 
 ### Async Code Doesn't Track Dependencies
 
-```svelte
-<script>
-  let color = $state('red');
-  let size = $state(100);
-
-  $effect(() => {
-    // color is tracked (read synchronously)
-    console.log(color);
-
-    setTimeout(() => {
-      // size is NOT tracked (read async)
-      console.log(size);
-    }, 100);
-  });
-</script>
-```
+Only synchronously-read state inside `$effect` is tracked. State read inside `setTimeout`, `await`, or callbacks is not tracked.
 
 ### Exporting Reassigned State
 
-Can't directly export state that gets reassigned:
+Can't directly export state that gets reassigned. Wrap in an object instead:
 
 ```javascript
 // state.svelte.js
-
-// BAD - won't work across modules
-export let count = $state(0);
-export function increment() {
-  count++;
-}
-
-// GOOD - wrap in object
 export const counter = $state({ count: 0 });
 export function increment() {
   counter.count++;
 }
-
-// GOOD - use getters
-let count = $state(0);
-export function getCount() {
-  return count;
-}
-export function increment() {
-  count++;
-}
 ```
 
 ### Effects Only Run in Browser

package/files/rules/styling.md

@@ -6,68 +6,17 @@ paths:
 
 # Styling Rules
 
-## Semantic Token Reference
-
-### Background & Foreground Colors
-
-| Token                     | Usage                        |
-| ------------------------- | ---------------------------- |
-| `bg-background`           | Page/app background          |
-| `text-foreground`         | Primary text color           |
-| `bg-card`                 | Card backgrounds             |
-| `text-card-foreground`    | Text on cards                |
-| `bg-popover`              | Popover/dropdown backgrounds |
-| `text-popover-foreground` | Text in popovers             |
-| `bg-muted`                | Muted/subtle backgrounds     |
-| `text-muted-foreground`   | Secondary/muted text         |
-
-### Interactive Colors
-
-| Token                       | Usage                         |
-| --------------------------- | ----------------------------- |
-| `bg-primary`                | Primary buttons, links        |
-| `text-primary-foreground`   | Text on primary backgrounds   |
-| `bg-secondary`              | Secondary buttons             |
-| `text-secondary-foreground` | Text on secondary backgrounds |
-| `bg-accent`                 | Hover states, highlights      |
-| `text-accent-foreground`    | Text on accent backgrounds    |
-| `bg-destructive`            | Delete/error actions          |
-
-### Border & Input Colors
-
-| Token           | Usage                |
-| --------------- | -------------------- |
-| `border-border` | Default border color |
-| `border-input`  | Input field borders  |
-| `ring-ring`     | Focus ring color     |
-
-### Chart Colors
-
-| Token       | Usage                            |
-| ----------- | -------------------------------- |
-| `--chart-1` | First series color (purple)      |
-| `--chart-2` | Second series color (red-orange) |
-| `--chart-3` | Third series color (green)       |
-| `--chart-4` | Fourth series color (yellow)     |
-| `--chart-5` | Fifth series color (coral)       |
-
-### ATAI Brand Colors
-
-| Token                | Usage                 |
-| -------------------- | --------------------- |
-| `bg-atai-neutral`    | Brand blue accent     |
-| `text-atai-good`     | Success/healthy state |
-| `text-atai-warning`  | Warning state         |
-| `text-atai-critical` | Critical/error state  |
-
-### Sidebar Colors
-
-| Token                     | Usage                |
-| ------------------------- | -------------------- |
-| `bg-sidebar`              | Sidebar background   |
-| `text-sidebar-foreground` | Sidebar text         |
-| `bg-sidebar-accent`       | Sidebar hover/active |
-| `border-sidebar-border`   | Sidebar borders      |
+## Semantic Tokens
+
+For the complete token reference including dark mode overrides, type scale (h1–h6, p, small), and spacing definitions, read `node_modules/@archetypeai/ds-lib-tokens/theme.css`.
+
+Token naming pattern: `bg-{token}`, `text-{token}-foreground`, `border-{token}`.
+
+Core tokens: `background`, `foreground`, `primary`, `secondary`, `muted`, `card`, `accent`, `destructive`, `border`, `input`, `ring`.
+
+ATAI brand tokens: `atai-neutral`, `atai-good`, `atai-warning`, `atai-critical`.
+
+Chart series: `--chart-1` through `--chart-5` (see `@rules/charts`).
 
 ## When to Use Semantic vs Standard Tailwind
 
@@ -126,33 +75,7 @@ For custom dark mode overrides, use the `dark:` prefix:
 <div class="bg-white dark:bg-slate-900">  <!-- custom dark override -->
 ```
 
-## cn() Utility
-
-Import and use for all class composition:
-
-```javascript
-import { cn } from '$lib/utils.js';
-```
-
-```svelte
-<div class={cn(
-  'base-classes here',
-  conditional && 'conditional-classes',
-  className
-)}>
-```
-
-The utility:
-
-- Uses `clsx` for conditional class joining
-- Uses `tailwind-merge` to resolve conflicts (last wins)
-
-Example conflict resolution:
-
-```javascript
-cn('p-4', 'p-2'); // → 'p-2' (later wins)
-cn('bg-red-500', 'bg-background'); // → 'bg-background' (later wins)
-```
+For class merging with `cn()`, see `@rules/components`.
 
 ## CSS Import Order
 
@@ -167,6 +90,16 @@ In your global CSS file:
 
 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;
+}
+```
+
 ## Tailwind v4 Specifics
 
 ### @theme Directive
@@ -212,34 +145,6 @@ Prefer Tailwind classes directly in markup. Use @apply only in base layer CSS:
 
 ## Common Patterns
 
-### Focus States
-
-```svelte
-<button class="focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 outline-none">
-```
-
-### Disabled States
-
-```svelte
-<button class="disabled:pointer-events-none disabled:opacity-50">
-```
-
-### Data State Animations
+For focus ring, disabled state, and data-state animation CSS patterns, see `@rules/accessibility`.
 
-```svelte
-<div class="data-[state=open]:animate-in data-[state=closed]:animate-out">
-```
-
-### Responsive Design
-
-```svelte
-<div class="w-full max-w-[calc(100%-2rem)] sm:max-w-lg">
-<div class="flex flex-col sm:flex-row">
-```
-
-### Icon Sizing
-
-```svelte
-<!-- Default icon sizing utility -->
-<button class="[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-```
+For icon sizing conventions, see `@rules/components`.

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

@@ -9,6 +9,8 @@ Patterns are composite components assembled from design system primitives.
 
 ## Decision: Pattern vs Extension
 
+**Before building, fetch `https://design-system.archetypeai.workers.dev/r/patterns.json` and check if an existing pattern covers the use case — even partially. Use or extend it rather than creating a new one.**
+
 **Build a pattern when:**
 
 - Combining 3+ primitives into a reusable unit

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

@@ -33,7 +33,7 @@ Dashboards fill the entire viewport with no scrolling:
 Unless the user explicitly asks for a different layout:
 
 - **Equal-width columns** — use `grid-cols-2`, `grid-cols-3`, etc. Never mix fixed and fluid widths for card grids (e.g., don't use `grid-cols-[300px_1fr]` for cards — that's for sidebar layouts only)
-- **Equal-height cards** — CSS grid rows distribute height evenly. Add `max-h-full` to each Card so content stays constrained to its grid cell
+- **Cards fill available height** — cards must stretch to fill their grid cell or flex container. Add `max-h-full` to constrain content. For asymmetric layouts (stacked cards in one column, full-height card in another), use a flex column with `flex-1` on the card that should grow
 - **Consistent spacing** — always use `gap-4` between cards and `p-4` padding around the grid
 
 ## Menubar
@@ -123,7 +123,7 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 </main>
 ```
 
-### Grid of Cards
+### Grid of Cards (Equal)
 
 ```svelte
 <main class="grid grid-cols-2 grid-rows-2 gap-4 overflow-hidden p-4">
@@ -134,6 +134,25 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 </main>
 ```
 
+### Asymmetric Cards (Stacked Left + Full-Height Right)
+
+When one column has multiple cards and the other has a single tall card, use `grid-rows-subgrid` or nested flex columns. Cards must stretch to fill available height — never leave empty space at the bottom.
+
+```svelte
+<main class="grid grid-cols-[1fr_2fr] gap-4 overflow-hidden p-4">
+  <!-- Left column: stacked cards that fill height -->
+  <div class="flex flex-col gap-4 overflow-hidden">
+    <Card class="max-h-full"><!-- input --></Card>
+    <Card class="max-h-full"><!-- status --></Card>
+    <Card class="max-h-full flex-1"><!-- summary (grows to fill remaining space) --></Card>
+  </div>
+  <!-- Right column: single card spanning full height -->
+  <Card class="max-h-full overflow-hidden"><!-- log / results --></Card>
+</main>
+```
+
+The `flex-1` on the last left-column card makes it grow to fill remaining vertical space. Adjust column ratio (`1fr_2fr`, `1fr_1fr`, etc.) to match content needs.
+
 ## Key Tailwind Classes
 
 | Class                    | Purpose                                      |
@@ -187,7 +206,7 @@ For co-branding, pass a `partnerLogo` snippet to replace the default placeholder
 
 Panels should contain pattern components, not raw markup. Before building new components:
 
-1. Check if existing patterns fit the need — `VideoPlayer`, `ExpandableLog`, `StatusBadge`, `HealthscoreCard`, `SensorChart`, `ScatterChart`
+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`
 3. Each panel should contain one primary component with clear props for data flow
 

package/files/skills/embedding-from-file/SKILL.md

@@ -8,7 +8,20 @@ argument-hint: [csv-file-path]
 
 Generate a script that streams time-series data from a CSV file to the Archetype AI Embedding Lens and collects embedding vectors. Supports both Python and JavaScript/Web.
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (file input, status display, visualization) rather than a monolithic page. Extract API/streaming logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| File input | `DataInput.svelte` | BackgroundCard, Button, Input | `onselect`, `status` |
+| Scatter plot | Reuse ScatterChart pattern | BackgroundCard, Chart | `data[]`, `categories` |
+| Progress | `StreamProgress.svelte` | BackgroundCard, Progress | `current`, `total` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract streaming and session logic into `$lib/api/embeddings.js`
 
 ---
 

package/files/skills/embedding-from-sensor/SKILL.md

@@ -8,7 +8,20 @@ argument-hint: [source-type]
 
 Generate a script that streams real-time IMU sensor data to the Archetype AI Embedding Lens for live embedding extraction. Supports both Python and JavaScript/Web.
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (sensor connection, status display, embedding visualization) rather than a monolithic page. Extract sensor and API logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| Sensor input | `DataInput.svelte` | BackgroundCard, Button, Input | `onselect`, `status` |
+| Scatter plot | Reuse ScatterChart pattern | BackgroundCard, Chart | `data[]`, `categories` |
+| Progress | `StreamProgress.svelte` | BackgroundCard, Progress | `current`, `total` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract streaming and session logic into `$lib/api/embeddings.js`
 
 ---
 

package/files/skills/embedding-upload/SKILL.md

@@ -8,7 +8,20 @@ argument-hint: [csv-file-path]
 
 Generate a script that uploads a CSV file to the Archetype AI platform and extracts embeddings server-side. The server reads the file directly — no local streaming loop required. Supports both Python and JavaScript/Web.
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (file upload, status display, results view) rather than a monolithic page. Extract API logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| File upload | `DataInput.svelte` | BackgroundCard, Button, Input | `onselect`, `status` |
+| Scatter plot | Reuse ScatterChart pattern | BackgroundCard, Chart | `data[]`, `categories` |
+| Progress | `StreamProgress.svelte` | BackgroundCard, Progress | `current`, `total` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract upload and session logic into `$lib/api/embeddings.js`
 
 ---
 

package/files/skills/newton-activity-monitor-lens-on-video/SKILL.md

@@ -78,7 +78,7 @@ Decompose the UI into components rather than building a monolithic `+page.svelte
 | Video input | `VideoUpload.svelte` (or reuse VideoPlayer pattern) | Card, Button | `onupload`, `status`, `videoUrl` |
 | Status | `ProcessingStatus.svelte` | Card, Badge, Spinner | `status`, `message` |
 | Summary | `AnalysisSummary.svelte` | Card | `title`, `summary` |
-| Log | Reuse ExpandableLog pattern | Collapsible, Badge, Item | `title`, `logs[]`, `count` |
+| Log | Use FlatLogItem pattern in ScrollArea | FlatLogItem, ScrollArea | `status`, `message`, `detail` |
 
 ### Layout and API logic
 

package/files/skills/newton-camera-frame-analysis/SKILL.md

@@ -9,7 +9,20 @@ allowed-tools: Bash(python *), Read
 
 Capture live webcam frames, encode as base64 JPEG, and send to Newton's vision model via `model.query` (synchronous request/response). Supports Python (OpenCV) and JavaScript (getUserMedia + canvas).
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (webcam input, status display, results view) rather than a monolithic page. Extract API logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| Camera feed | `WebcamView.svelte` | Card, AspectRatio | `stream`, `status` |
+| Status | `ConnectionStatus.svelte` | StatusBadge pattern | `status`, `label` |
+| Results | Use FlatLogItem pattern in ScrollArea | FlatLogItem, ScrollArea | `status`, `message`, `detail` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract webcam capture and API logic into `$lib/api/camera-analysis.js`
 
 **This skill is for LIVE WEBCAM input only.** For analyzing uploaded video files, use `/activity-monitor-lens-on-video` instead.
 

package/files/skills/newton-direct-query/SKILL.md

@@ -9,6 +9,15 @@ allowed-tools: Bash(python *), Read
 
 Send a text query directly to Newton via `POST /v0.5/query`. No lens registration, no session, no SSE — just a simple request/response. Use for API testing, text Q&A, or post-processing results from other lenses.
 
+## Frontend Architecture
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| Query input | `QueryInput.svelte` | BackgroundCard, Input, Button | `onsubmit`, `loading` |
+| Response | `QueryResponse.svelte` | BackgroundCard | `response`, `loading` |
+
+- Use `@skills/create-dashboard` for the page layout
+
 ---
 
 ## API Endpoint

package/files/skills/newton-machine-state-from-file/SKILL.md

@@ -8,7 +8,21 @@ argument-hint: [csv-file-path]
 
 Generate a script that streams time-series data from a CSV file to the Archetype AI Machine State Lens for n-shot state classification. Supports both Python and JavaScript/Web.
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (file input, status display, results view) rather than a monolithic page. Extract API/streaming logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| File input | `DataInput.svelte` | BackgroundCard, Button, Input | `onselect`, `status` |
+| Classification | `StateDisplay.svelte` | BackgroundCard, Badge | `currentState`, `confidence` |
+| Time series | Reuse SensorChart pattern | BackgroundCard, Chart | `data[]`, `signals` |
+| Results | Use FlatLogItem pattern in ScrollArea | FlatLogItem, ScrollArea | `status`, `message`, `detail` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract streaming and session logic into `$lib/api/machine-state.js`
 
 ---
 

package/files/skills/newton-machine-state-from-sensor/SKILL.md

@@ -8,7 +8,21 @@ argument-hint: [source-type]
 
 Generate a script that streams real-time IMU sensor data to the Archetype AI Machine State Lens for live n-shot state classification. Supports both Python and JavaScript/Web.
 
-> **Frontend architecture:** When building a web UI for this skill, decompose into components (sensor connection, status display, results view) rather than a monolithic page. Extract sensor and API logic into `$lib/api/`. See `@rules/frontend-architecture` for conventions and `@skills/create-dashboard` / `@skills/build-pattern` for layout and component patterns.
+## Frontend Architecture
+
+Decompose the UI into components. See `@rules/frontend-architecture` for conventions.
+
+### Recommended decomposition
+
+| UI Area | Component | Pattern/Primitives | Key Props |
+|---------|-----------|-------------------|-----------|
+| Sensor input | `DataInput.svelte` | BackgroundCard, Button, Input | `onselect`, `status` |
+| Classification | `StateDisplay.svelte` | BackgroundCard, Badge | `currentState`, `confidence` |
+| Time series | Reuse SensorChart pattern | BackgroundCard, Chart | `data[]`, `signals` |
+| Results | Use FlatLogItem pattern in ScrollArea | FlatLogItem, ScrollArea | `status`, `message`, `detail` |
+
+- Use `@skills/create-dashboard` for the page layout
+- Extract streaming and session logic into `$lib/api/machine-state.js`
 
 ---