@archetypeai/ds-cli 0.3.7

package/files/AGENTS.md

@@ -0,0 +1,63 @@
+# Archetype AI Design System
+
+## Stack
+
+- Svelte 5 with runes (`$props`, `$state`, `$derived`, `$bindable`)
+- Tailwind v4 with semantic tokens (`@archetypeai/ds-lib-tokens`)
+- shadcn-svelte registry pattern (via `@archetypeai/ds-cli`)
+- bits-ui for headless primitives
+- layerchart for data visualization
+
+## Commands
+
+- `npx @archetypeai/ds-cli add ds-ui-svelte` - install all components
+- `npx shadcn-svelte@latest add <url>` - install individual component
+
+## Tokens
+
+Prefer semantic tokens for themed colors:
+
+- `bg-background`, `text-foreground`, `border-border`
+- `bg-primary`, `text-primary-foreground`
+- `bg-muted`, `text-muted-foreground`
+- `bg-card`, `bg-popover`, `bg-accent`, `bg-destructive`
+- `bg-atai-neutral`, `text-atai-good`, `text-atai-warning`, `text-atai-critical`
+- etc.
+
+Standard Tailwind is fine for:
+
+- Spacing/sizing: `p-4`, `w-full`, `gap-2`, `h-screen`
+- Layout: `flex`, `grid`, `absolute`, `relative`
+- One-off colors: gradients, illustrations, custom accents
+
+## CSS Import Order
+
+```css
+@import '@archetypeai/ds-lib-fonts-internal';
+@import '@archetypeai/ds-lib-tokens/theme.css';
+@import 'tailwindcss';
+```
+
+## Component Patterns
+
+- **Props**: `let { class: className, ref = $bindable(null), children, ...restProps } = $props();`
+- **Classes**: `cn()` from `$lib/utils.js` - never raw concatenation
+- **Variants**: `tailwind-variants` (tv) for component variants
+- **Slots**: `{@render children?.()}`
+
+## Skills
+
+Read these when relevant to your task:
+
+- `@skills/apply-ds` - setup tokens in new project
+- `@skills/build-pattern` - create composite patterns from primitives
+- `@skills/setup-chart` - set up charts with layerchart
+- `@skills/create-dashboard` - scaffold a full-viewport dashboard with menubar and panels
+- `@skills/fix-accessibility` - audit and fix a11y issues
+- `@skills/fix-metadata` - update page titles, favicons, and OG tags
+- `@skills/deploy-worker` - deploy SvelteKit projects to Cloudflare Workers
+- `@skills/explain-code` - explain code with structure and traced execution
+
+## Rules
+
+See `@rules/` for comprehensive guidance on design principles, components, styling, charts, and linting.

package/files/CLAUDE.md

@@ -0,0 +1,63 @@
+# Archetype AI Design System
+
+## Stack
+
+- Svelte 5 with runes (`$props`, `$state`, `$derived`, `$bindable`)
+- Tailwind v4 with semantic tokens (`@archetypeai/ds-lib-tokens`)
+- shadcn-svelte registry pattern (via `@archetypeai/ds-cli`)
+- bits-ui for headless primitives
+- layerchart for data visualization
+
+## Commands
+
+- `npx @archetypeai/ds-cli add ds-ui-svelte` - install all components
+- `npx shadcn-svelte@latest add <url>` - install individual component
+
+## Tokens
+
+Prefer semantic tokens for themed colors:
+
+- `bg-background`, `text-foreground`, `border-border`
+- `bg-primary`, `text-primary-foreground`
+- `bg-muted`, `text-muted-foreground`
+- `bg-card`, `bg-popover`, `bg-accent`, `bg-destructive`
+- `bg-atai-neutral`, `text-atai-good`, `text-atai-warning`, `text-atai-critical`
+- etc.
+
+Standard Tailwind is fine for:
+
+- Spacing/sizing: `p-4`, `w-full`, `gap-2`, `h-screen`
+- Layout: `flex`, `grid`, `absolute`, `relative`
+- One-off colors: gradients, illustrations, custom accents
+
+## CSS Import Order
+
+```css
+@import '@archetypeai/ds-lib-fonts-internal';
+@import '@archetypeai/ds-lib-tokens/theme.css';
+@import 'tailwindcss';
+```
+
+## Component Patterns
+
+- **Props**: `let { class: className, ref = $bindable(null), children, ...restProps } = $props();`
+- **Classes**: `cn()` from `$lib/utils.js` - never raw concatenation
+- **Variants**: `tailwind-variants` (tv) for component variants
+- **Slots**: `{@render children?.()}`
+
+## Skills
+
+Read these when relevant to your task:
+
+- `@skills/apply-ds` - setup tokens in new project
+- `@skills/build-pattern` - create composite patterns from primitives
+- `@skills/setup-chart` - set up charts with layerchart
+- `@skills/create-dashboard` - scaffold a full-viewport dashboard with menubar and panels
+- `@skills/fix-accessibility` - audit and fix a11y issues
+- `@skills/fix-metadata` - update page titles, favicons, and OG tags
+- `@skills/deploy-worker` - deploy SvelteKit projects to Cloudflare Workers
+- `@skills/explain-code` - explain code with structure and traced execution
+
+## Rules
+
+See `@rules/` for comprehensive guidance on design principles, components, styling, charts, and linting.

package/files/LICENSE

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,219 @@
+# 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}
+>
+```
+
+## Checklist
+
+When building components, verify:
+
+- [ ] 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

@@ -0,0 +1,352 @@
+---
+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 '$lib/components/ui/chart/index.js';
+
+  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}
+```
+
+## Complete SensorChart Example
+
+```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 { LineChart } from 'layerchart';
+  import { curveNatural } from 'd3-shape';
+  import { scaleUtc, scaleLinear } from 'd3-scale';
+
+  let {
+    title = 'SENSOR',
+    icon: Icon = undefined,
+    data = [],
+    signals = {},
+    xKey = 'timestamp',
+    maxPoints = undefined,
+    yMin,
+    yMax,
+    yTicks,
+    class: className,
+    ...restProps
+  } = $props();
+
+  const chartColors = [
+    'var(--chart-1)',
+    'var(--chart-2)',
+    'var(--chart-3)',
+    'var(--chart-4)',
+    'var(--chart-5)'
+  ];
+
+  let displayData = $derived(maxPoints && data.length > maxPoints ? data.slice(-maxPoints) : data);
+
+  let indexedData = $derived(displayData.map((d, i) => ({ ...d, _index: i })));
+
+  let series = $derived(
+    Object.entries(signals).map(([key, label], i) => ({
+      key,
+      label,
+      color: chartColors[i % chartColors.length]
+    }))
+  );
+
+  let chartConfig = $derived(
+    Object.fromEntries(series.map((s) => [s.key, { label: s.label, color: s.color }]))
+  );
+
+  let useIndexX = $derived(maxPoints !== undefined);
+  let xDomain = $derived(useIndexX ? [0, (maxPoints || displayData.length) - 1] : undefined);
+</script>
+
+<Card class={cn('p-4', className)} {...restProps}>
+  <CardHeader class="flex flex-row items-center justify-between p-0">
+    <CardTitle class="text-foreground font-mono text-base uppercase">
+      {title}
+    </CardTitle>
+    {#if Icon}
+      <Icon strokeWidth={1.25} class="text-muted-foreground size-6" />
+    {/if}
+  </CardHeader>
+
+  <CardContent class="flex flex-col gap-6 p-0">
+    <Chart.Container config={chartConfig} class="aspect-auto h-[220px] w-full">
+      <LineChart
+        data={indexedData}
+        x={useIndexX ? '_index' : xKey}
+        xScale={useIndexX ? scaleLinear() : scaleUtc()}
+        {xDomain}
+        yScale={scaleLinear()}
+        yDomain={[yMin, yMax]}
+        {series}
+        tooltip={false}
+        props={{
+          spline: { curve: curveNatural, strokeWidth: 1.5 },
+          yAxis: { ticks: yTicks }
+        }}
+      />
+    </Chart.Container>
+
+    {#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}
+  </CardContent>
+</Card>
+```