sync work in progress

.gitignore

@@ -1,2 +1,54 @@
-skills/
-node_modules/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+local-*
+.claude
+.z-ai-config
+*.log
+dev.log
+dev.out.log
+test
+prompt
+
+server.log
+# Skills directory
+/skills/

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

eslint.config.mjs

@@ -0,0 +1,50 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
+  rules: {
+    // TypeScript rules
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/no-unused-disable-directive": "off",
+    
+    // React rules
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/purity": "off",
+    "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
+    "react/prop-types": "off",
+    "react-compiler/react-compiler": "off",
+    
+    // Next.js rules
+    "@next/next/no-img-element": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    
+    // General JavaScript rules
+    "prefer-const": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "no-debugger": "off",
+    "no-empty": "off",
+    "no-irregular-whitespace": "off",
+    "no-case-declarations": "off",
+    "no-fallthrough": "off",
+    "no-mixed-spaces-and-tabs": "off",
+    "no-redeclare": "off",
+    "no-undef": "off",
+    "no-unreachable": "off",
+    "no-useless-escape": "off",
+  },
+}, {
+  ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts", "examples/**", "skills"]
+}];
+
+export default eslintConfig;

examples/websocket/frontend.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+type User = {
+  id: string;
+  username: string;
+}
+
+type Message = {
+  id: string;
+  username: string;
+  content: string;
+  timestamp: Date | string;
+  type: 'user' | 'system';
+}
+
+export default function SocketDemo() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputMessage, setInputMessage] = useState('');
+  const [username, setUsername] = useState('');
+  const [isUsernameSet, setIsUsernameSet] = useState(false);
+  const [socket, setSocket] = useState<any>(null);
+  const [isConnected, setIsConnected] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    // Connect to websocket server
+    // Never use PORT in the URL, alyways use XTransformPort
+    // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+    const socketInstance = io('/?XTransformPort=3003', {
+      transports: ['websocket', 'polling'],
+      forceNew: true,
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 1000,
+      timeout: 10000
+    })
+
+    setSocket(socketInstance);
+
+    socketInstance.on('connect', () => {
+      setIsConnected(true);
+    });
+
+    socketInstance.on('disconnect', () => {
+      setIsConnected(false);
+    });
+
+    socketInstance.on('message', (msg: Message) => {
+      setMessages(prev => [...prev, msg]);
+    });
+
+    socketInstance.on('user-joined', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => {
+        if (!prev.find(u => u.id === data.user.id)) {
+          return [...prev, data.user];
+        }
+        return prev;
+      });
+    });
+
+    socketInstance.on('user-left', (data: { user: User; message: Message }) => {
+      setMessages(prev => [...prev, data.message]);
+      setUsers(prev => prev.filter(u => u.id !== data.user.id));
+    });
+
+    socketInstance.on('users-list', (data: { users: User[] }) => {
+      setUsers(data.users);
+    });
+
+    return () => {
+      socketInstance.disconnect();
+    };
+  }, []);
+
+  const handleJoin = () => {
+    if (socket && username.trim() && isConnected) {
+      socket.emit('join', { username: username.trim() });
+      setIsUsernameSet(true);
+    }
+  };
+
+  const sendMessage = () => {
+    if (socket && inputMessage.trim() && username.trim()) {
+      socket.emit('message', {
+        content: inputMessage.trim(),
+        username: username.trim()
+      });
+      setInputMessage('');
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center justify-between">
+            WebSocket Demo
+            <span className={`text-sm px-2 py-1 rounded ${isConnected ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+              {isConnected ? 'Connected' : 'Disconnected'}
+            </span>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {!isUsernameSet ? (
+            <div className="space-y-2">
+              <Input
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleJoin();
+                  }
+                }}
+                placeholder="Enter your username..."
+                disabled={!isConnected}
+                className="flex-1"
+              />
+              <Button
+                onClick={handleJoin}
+                disabled={!isConnected || !username.trim()}
+                className="w-full"
+              >
+                Join Chat
+              </Button>
+            </div>
+          ) : (
+            <>
+              <ScrollArea className="h-80 w-full border rounded-md p-4">
+                <div className="space-y-2">
+                  {messages.length === 0 ? (
+                    <p className="text-gray-500 text-center">No messages yet</p>
+                  ) : (
+                    messages.map((msg) => (
+                      <div key={msg.id} className="border-b pb-2 last:border-b-0">
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <p className={`text-sm font-medium ${msg.type === 'system'
+                                ? 'text-blue-600 italic'
+                                : 'text-gray-700'
+                              }`}>
+                              {msg.username}
+                            </p>
+                            <p className={`${msg.type === 'system'
+                                ? 'text-blue-500 italic'
+                                : 'text-gray-900'
+                              }`}>
+                              {msg.content}
+                            </p>
+                          </div>
+                          <span className="text-xs text-gray-500">
+                            {new Date(msg.timestamp).toLocaleTimeString()}
+                          </span>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </ScrollArea>
+
+              <div className="flex space-x-2">
+                <Input
+                  value={inputMessage}
+                  onChange={(e) => setInputMessage(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                  placeholder="Type a message..."
+                  disabled={!isConnected}
+                  className="flex-1"
+                />
+                <Button
+                  onClick={sendMessage}
+                  disabled={!isConnected || !inputMessage.trim()}
+                >
+                  Send
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

examples/websocket/server.ts

@@ -0,0 +1,138 @@
+import { createServer } from 'http'
+import { Server } from 'socket.io'
+
+const httpServer = createServer()
+const io = new Server(httpServer, {
+  // DO NOT change the path, it is used by Caddy to forward the request to the correct port
+  path: '/',
+  cors: {
+    origin: "*",
+    methods: ["GET", "POST"]
+  },
+  pingTimeout: 60000,
+  pingInterval: 25000,
+})
+
+interface User {
+  id: string
+  username: string
+}
+
+interface Message {
+  id: string
+  username: string
+  content: string
+  timestamp: Date
+  type: 'user' | 'system'
+}
+
+const users = new Map<string, User>()
+
+const generateMessageId = () => Math.random().toString(36).substr(2, 9)
+
+const createSystemMessage = (content: string): Message => ({
+  id: generateMessageId(),
+  username: 'System',
+  content,
+  timestamp: new Date(),
+  type: 'system'
+})
+
+const createUserMessage = (username: string, content: string): Message => ({
+  id: generateMessageId(),
+  username,
+  content,
+  timestamp: new Date(),
+  type: 'user'
+})
+
+io.on('connection', (socket) => {
+  console.log(`User connected: ${socket.id}`)
+
+  // Add test event handler
+  socket.on('test', (data) => {
+    console.log('Received test message:', data)
+    socket.emit('test-response', { 
+      message: 'Server received test message', 
+      data: data,
+      timestamp: new Date().toISOString()
+    })
+  })
+
+  socket.on('join', (data: { username: string }) => {
+    const { username } = data
+    
+    // Create user object
+    const user: User = {
+      id: socket.id,
+      username
+    }
+    
+    // Add to user list
+    users.set(socket.id, user)
+    
+    // Send join message to all users
+    const joinMessage = createSystemMessage(`${username} joined the chat room`)
+    io.emit('user-joined', { user, message: joinMessage })
+    
+    // Send current user list to new user
+    const usersList = Array.from(users.values())
+    socket.emit('users-list', { users: usersList })
+    
+    console.log(`${username} joined the chat room, current online users: ${users.size}`)
+  })
+
+  socket.on('message', (data: { content: string; username: string }) => {
+    const { content, username } = data
+    const user = users.get(socket.id)
+    
+    if (user && user.username === username) {
+      const message = createUserMessage(username, content)
+      io.emit('message', message)
+      console.log(`${username}: ${content}`)
+    }
+  })
+
+  socket.on('disconnect', () => {
+    const user = users.get(socket.id)
+    
+    if (user) {
+      // Remove from user list
+      users.delete(socket.id)
+      
+      // Send leave message to all users
+      const leaveMessage = createSystemMessage(`${user.username} left the chat room`)
+      io.emit('user-left', { user: { id: socket.id, username: user.username }, message: leaveMessage })
+      
+      console.log(`${user.username} left the chat room, current online users: ${users.size}`)
+    } else {
+      console.log(`User disconnected: ${socket.id}`)
+    }
+  })
+
+  socket.on('error', (error) => {
+    console.error(`Socket error (${socket.id}):`, error)
+  })
+})
+
+const PORT = 3003
+httpServer.listen(PORT, () => {
+  console.log(`WebSocket server running on port ${PORT}`)
+})
+
+// Graceful shutdown
+process.on('SIGTERM', () => {
+  console.log('Received SIGTERM signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})
+
+process.on('SIGINT', () => {
+  console.log('Received SIGINT signal, shutting down server...')
+  httpServer.close(() => {
+    console.log('WebSocket server closed')
+    process.exit(0)
+  })
+})

next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  /* config options here */
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  reactStrictMode: false,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "nextjs_tailwind_shadcn_ts",
+  "version": "0.2.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000 2>&1 | tee dev.log",
+    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
+    "start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
+    "lint": "eslint .",
+    "db:push": "prisma db push --accept-data-loss",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev",
+    "db:reset": "prisma migrate reset"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.1.1",
+    "@mdxeditor/editor": "^3.39.1",
+    "@prisma/client": "^6.11.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@reactuses/core": "^6.0.5",
+    "@tanstack/react-query": "^5.82.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.525.0",
+    "next": "^16.1.1",
+    "next-auth": "^4.24.11",
+    "next-intl": "^4.3.4",
+    "next-themes": "^0.4.6",
+    "prisma": "^6.11.1",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.8.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.3",
+    "react-syntax-highlighter": "^15.6.1",
+    "recharts": "^2.15.4",
+    "sharp": "^0.34.3",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0",
+    "vaul": "^1.1.2",
+    "z-ai-web-dev-sdk": "^0.0.18",
+    "zod": "^4.0.2",
+    "zustand": "^5.0.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "bun-types": "^1.3.4",
+    "eslint": "^9",
+    "eslint-config-next": "^16.1.1",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

prisma/schema.prisma

@@ -0,0 +1,32 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Post {
+  id        String   @id @default(cuid())
+  title     String
+  content   String?
+  published Boolean  @default(false)
+  authorId  String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}

public/dssl/boot.js

@@ -0,0 +1,2 @@
+// boot.js — minimal entry so a plain <script type="module"> can load DSSL
+import './index.js';

public/dssl/engine.js

@@ -0,0 +1,447 @@
+/* =========================================================================
+ * DSSL — engine.js
+ * The style engine. No CSS output for regular rules: DSSL matches selectors
+ * against the live DOM itself and applies winning declarations directly to
+ * elements (inline style), running its own cascade:
+ *
+ *     cascade = (layer, source order)   — no specificity, ever
+ *     layers:  tokens < base < components < utilities < pin
+ *
+ * States (hover/focus/active/…) are implemented by the engine with event
+ * delegation + live `matches()` checks. `@media` uses matchMedia listeners,
+ * `@signal` is driven from JS, `@container` is evaluated against the nearest
+ * tracked container. Motion runs through the Web Animations API.
+ *
+ * Pseudo-elements (::before/::after/…) cannot be expressed inline, so they
+ * are the one thing compiled to real CSS in a shadow <style> tag — using the
+ * same tokens via var().
+ * ========================================================================= */
+
+const LAYER_RANK = { tokens: 0, base: 1, components: 2, utilities: 3, pin: 4 };
+
+function parseSizeQuery(q) {
+  // supports (min-width: 480px) | (max-width: 480px) | (width >= 480px) | (width <= 480px)
+  let m = q.match(/min-width\s*:\s*([0-9.]+)(px)?/) || q.match(/width\s*>=\s*([0-9.]+)(px)?/);
+  const min = m ? parseFloat(m[1]) : null;
+  m = q.match(/max-width\s*:\s*([0-9.]+)(px)?/) || q.match(/width\s*<=\s*([0-9.]+)(px)?/);
+  const max = m ? parseFloat(m[1]) : null;
+  return { min, max };
+}
+
+export class DsslEngine {
+  constructor({ scope = null, name = 'global', reset = false } = {}) {
+    this.name = name;
+    this.scope = scope || null;            // null = whole document
+    this.reset = reset;
+    this.bundles = new Map();              // bundleName -> resolved doc
+    this.rules = [];
+    this.shadowRules = [];
+    this.signalStore = new Map();
+    this.mqlCache = new Map();
+    this.containerEls = new Set();
+    this.ownMap = new WeakMap();           // element -> [props DSSL owns]
+    this.animMap = new WeakMap();          // element -> Map(key -> Animation)
+    this.stackPrev = new WeakMap();        // element -> [children we grid-area'd]
+    this.touched = new Set();              // every element we ever styled (so removals can be cleaned)
+    this.pending = new Set();
+    this.scheduled = false;
+    this.initialized = false;
+    this.shadowStyle = null;
+    this.seq = 0;                          // bundle insertion order
+    this.lastApply = 0;
+  }
+
+  /* ------------------------------------------------------------ *
+   * Bundles
+   * ------------------------------------------------------------ */
+
+  hasBundle(name) { return this.bundles.has(name); }
+
+  applyBundle(name, doc, { replace = false } = {}) {
+    // keep the original insertion order when replacing a bundle in place
+    const prev = this.bundles.get(name);
+    const seq = prev ? prev.seq : this.seq++;
+    if (replace) this.bundles.delete(name);
+    this.bundles.set(name, { seq, ...doc });
+    this.rebuild();
+  }
+
+  removeBundle(name) {
+    if (!this.bundles.has(name)) return;
+    this.bundles.delete(name);
+    this.rebuild();
+  }
+
+  rebuild() {
+    const rules = [];
+    const shadowRules = [];
+    const bundles = [...this.bundles.values()].sort((a, b) => a.seq - b.seq);
+    for (const b of bundles) {
+      for (const r of b.rules) {
+        rules.push(r); // scoped engines map :root rules onto the scope element
+      }
+      shadowRules.push(...b.shadowRules);
+    }
+    this.rules = rules;
+    this.shadowRules = shadowRules;
+
+    // unique media queries → MediaQueryList cache
+    for (const r of rules) for (const q of r.media) this.mql(q);
+    for (const r of shadowRules) for (const q of r.media) this.mql(q);
+
+    this.init();
+    this.renderShadow();
+    this.computeAll();
+  }
+
+  mql(query) {
+    let m = this.mqlCache.get(query);
+    if (!m) {
+      try { m = window.matchMedia(query); } catch { m = { matches: false, addEventListener() {} }; }
+      this.mqlCache.set(query, m);
+    }
+    return m;
+  }
+
+  /* ------------------------------------------------------------ *
+   * One-time wiring: events, observers, media listeners
+   * ------------------------------------------------------------ */
+
+  init() {
+    if (this.initialized) return;
+    this.initialized = true;
+
+    const root = this.scope || document;
+    const doc = this.scope ? this.scope : document.documentElement;
+
+    // --- element state events ---
+    const on = (type, fn) => root.addEventListener(type, fn, { passive: true, capture: type === 'focusin' || type === 'focusout' });
+    on('pointerover', (e) => this.stateEvent('hover', e.target));
+    on('pointerout', (e) => this.stateEvent('hover', e.target));
+    on('focusin', (e) => { this.stateEvent('focus', e.target); this.stateEvent('focus-visible', e.target); });
+    on('focusout', (e) => { this.stateEvent('focus', e.target); this.stateEvent('focus-visible', e.target); });
+    on('pointerdown', (e) => this.stateEvent('active', e.target));
+    on('pointerup', (e) => this.stateEvent('active', e.target));
+    on('pointercancel', (e) => this.stateEvent('active', e.target));
+
+    // --- DOM mutations ---
+    const mo = new MutationObserver((muts) => {
+      if (this._applying) return; // our own style writes — ignore
+      const batch = new Set();
+      for (const m of muts) {
+        if (m.type === 'attributes') {
+          if (m.attributeName === 'style') continue;
+          if (m.target === document.documentElement && m.attributeName.startsWith('data-dssl')) continue;
+          batch.add(m.target);
+          // class/attr changes can affect descendant rules — include small subtrees
+          if (m.target.querySelectorAll) {
+            const kids = m.target.querySelectorAll('*');
+            if (kids.length <= 300) kids.forEach(k => batch.add(k));
+          }
+        } else {
+          if (m.addedNodes) m.addedNodes.forEach(n => {
+            if (n.nodeType !== 1) return;
+            batch.add(n);
+            if (n.querySelectorAll) n.querySelectorAll('*').forEach(k => batch.add(k));
+          });
+          if (m.removedNodes) m.removedNodes.forEach(n => {
+            if (n.nodeType !== 1) return;
+            this.touched.delete(n);
+            if (n.querySelectorAll) n.querySelectorAll('*').forEach(k => this.touched.delete(k));
+          });
+        }
+      }
+      if (batch.size) this.schedule(batch);
+    });
+    mo.observe(doc, { childList: true, subtree: true, attributes: true, attributeFilter: undefined });
+    this._mo = mo;
+
+    // --- media changes ---
+    // (matchMedia listeners are added lazily per query in mql(); rewire here)
+    const origMql = this.mql.bind(this);
+    this.mql = (query) => {
+      const m = origMql(query);
+      if (!m._dsslWired) {
+        m._dsslWired = true;
+        try { m.addEventListener('change', () => this.computeAll()); } catch { /* old browsers */ }
+      }
+      return m;
+    };
+
+    // --- reduced motion ---
+    try {
+      const rm = window.matchMedia('(prefers-reduced-motion: reduce)');
+      rm.addEventListener('change', () => this.computeAll());
+      this.reducedMotion = rm;
+    } catch { this.reducedMotion = { matches: false }; }
+
+    // --- container tracking via ResizeObserver ---
+    this.ro = new ResizeObserver(() => this.computeAll());
+  }
+
+  stateEvent(state, target) {
+    if (!target || target.nodeType !== 1) return;
+    const batch = new Set();
+    for (const rule of this.rules) {
+      const hit = rule.states.has(state) || (state === 'focus' && rule.states.has('focus-visible')) || (state === 'focus-visible' && rule.states.has('focus'));
+      if (!hit) continue;
+      let els;
+      try { els = (this.scope || document).querySelectorAll(rule.sel); } catch { continue; }
+      els.forEach(el => batch.add(el));
+    }
+    if (batch.size) this.schedule(batch);
+  }
+
+  /* ------------------------------------------------------------ *
+   * Scheduling + cascade application
+   * ------------------------------------------------------------ */
+
+  schedule(els) {
+    els.forEach(el => this.pending.add(el));
+    if (this.scheduled) return;
+    this.scheduled = true;
+    queueMicrotask(() => {
+      this.scheduled = false;
+      const batch = [...this.pending];
+      this.pending.clear();
+      this._applying = true;
+      for (const el of batch) this.computeElement(el);
+      this._applying = false;
+    });
+  }
+
+  matches(el, sel) {
+    try { return el.matches(sel); } catch { return false; }
+  }
+
+  inScope(el) {
+    if (!this.scope) return true;
+    return this.scope === el || this.scope.contains(el);
+  }
+
+  signalsPass(rule) {
+    for (const s of rule.signals) {
+      const has = this.signalStore.has(s.name);
+      const val = this.signalStore.get(s.name);
+      if (s.op === 'truthy') { if (!has || val === false || val === null || val === 'false') return false; }
+      else if (s.op === '==') { if (!has || String(val) !== String(s.value)) return false; }
+      else if (s.op === '!=') { if (has && String(val) === String(s.value)) return false; }
+    }
+    return true;
+  }
+
+  containerPass(el, rule) {
+    if (!rule.containers.length) return true;
+    // nearest ancestor (or self) with container-type set via DSSL
+    let node = el;
+    while (node) {
+      if (this.containerEls.has(node)) break;
+      node = node.parentElement;
+    }
+    if (!node) return false;
+    const w = node.clientWidth;
+    for (const q of rule.containers) {
+      const { min, max } = parseSizeQuery(q);
+      if (min !== null && w < min) return false;
+      if (max !== null && w > max) return false;
+    }
+    return true;
+  }
+
+  computeAll() {
+    this._applying = true;
+    const rootEl = this.scope || document.documentElement;
+    const els = new Set([rootEl, ...this.touched]);   // include previously-styled elements — their rules may have STOPPED matching
+    const root = this.scope || document;
+    for (const rule of this.rules) {
+      if (rule.sel === ':root') { els.add(rootEl); continue; }
+      let found;
+      try { found = root.querySelectorAll(rule.sel); } catch { continue; }
+      found.forEach(el => els.add(el));
+    }
+    for (const el of els) this.computeElement(el);
+    this._applying = false;
+  }
+
+  computeElement(el) {
+    if (!el || !el.style || el.nodeType !== 1) return;
+    if (!this.inScope(el)) return;
+    this.touched.add(el);
+
+    const matched = [];
+    const rootEl = this.scope || document.documentElement;
+    for (const rule of this.rules) {
+      if (rule.sel === ':root') {
+        if (el !== rootEl) continue;
+      } else if (!this.matches(el, rule.sel)) continue;
+      if (!rule.media.every(q => this.mql(q).matches)) continue;
+      if (!this.signalsPass(rule)) continue;
+      if (!this.containerPass(el, rule)) continue;
+      matched.push(rule);
+    }
+    matched.sort((a, b) =>
+      (LAYER_RANK[a.layer] ?? 2) - (LAYER_RANK[b.layer] ?? 2) || a.order - b.order
+    );
+
+    // wipe what we owned before
+    const owned = this.ownMap.get(el) || [];
+    for (const p of owned) { try { el.style.removeProperty(p); } catch { } }
+
+    const newOwned = [];
+    const animSpecs = [];
+    let cancelAnims = false;
+    let stack = false;
+
+    for (const rule of matched) {
+      const imp = rule.layer === 'pin' ? 'important' : '';
+      for (const d of rule.decls) {
+        if (d.prop === '@animate') {
+          if (d.value === null) { cancelAnims = true; continue; }
+          animSpecs.push({ ...d.value, key: rule.id + '|' + rule.media.join('&') + '|' + rule.signals.map(s => s.name + s.op + s.value).join('&') });
+          continue;
+        }
+        if (d.prop === '@stack') { stack = true; continue; }
+        try {
+          el.style.setProperty(d.prop, d.value, imp);
+          newOwned.push(d.prop);
+        } catch { /* invalid value — resolver should have caught it */ }
+      }
+    }
+
+    this.ownMap.set(el, newOwned);
+    this.lastApply = Date.now();
+
+    // container registration
+    if (newOwned.includes('container-type')) {
+      if (!this.containerEls.has(el)) { this.containerEls.add(el); try { this.ro.observe(el); } catch { } }
+    } else if (this.containerEls.has(el)) {
+      this.containerEls.delete(el);
+      try { this.ro.unobserve(el); } catch { }
+    }
+
+    // stack behavior: children share grid cell
+    const prevStack = this.stackPrev.get(el) || [];
+    if (stack) {
+      for (const child of el.children) {
+        if (child.nodeType === 1) { try { child.style.gridArea = '1 / 1'; } catch { } }
+      }
+      this.stackPrev.set(el, [...el.children]);
+    } else if (prevStack.length) {
+      for (const child of prevStack) { try { child.style.removeProperty('grid-area'); } catch { } }
+      this.stackPrev.delete(el);
+    }
+
+    // animations
+    const anims = this.animMap.get(el) || new Map();
+    if (cancelAnims) {
+      anims.forEach(a => { try { a.cancel(); } catch { } });
+      anims.clear();
+    }
+    const reduced = this.reducedMotion && this.reducedMotion.matches;
+    for (const spec of animSpecs) {
+      if (spec.broken || !spec.frames || !spec.frames.length) continue;
+      if (reduced && !spec.essential) continue;
+      if (anims.has(spec.key)) continue;
+      let frames = spec.frames.map(f => ({ ...f.props, offset: f.offset / 100 }));
+      if (frames.length === 1) {
+        if (frames[0].offset === 0) frames = [frames[0], { offset: 1 }];
+        else frames = [{ offset: 0 }, frames[0]];
+      }
+      try {
+        const anim = el.animate(frames, {
+          duration: spec.duration, easing: spec.easing,
+          delay: spec.delay || 0, fill: spec.fill,
+        });
+        anims.set(spec.key, anim);
+      } catch { /* WAAPI unsupported property — skip */ }
+    }
+    if (animSpecs.length) this.animMap.set(el, anims);
+  }
+
+  /* ------------------------------------------------------------ *
+   * Signals (JS → styles bridge)
+   * ------------------------------------------------------------ */
+
+  signal(name, value) {
+    if (value === null || value === undefined) this.signalStore.delete(name);
+    else this.signalStore.set(name, String(value));
+    // DevTools-visible mirror
+    try {
+      if (value === null || value === undefined) document.documentElement.removeAttribute('data-dssl-signal-' + name);
+      else document.documentElement.setAttribute('data-dssl-signal-' + name, String(value));
+    } catch { }
+    this.computeAll();
+  }
+
+  getSignal(name) { return this.signalStore.get(name); }
+
+  /* ------------------------------------------------------------ *
+   * Pseudo-elements → shadow CSS (the only real CSS we emit)
+   * ------------------------------------------------------------ */
+
+  renderShadow() {
+    const idAttr = 'data-dssl-engine';
+    let host = this.scope;
+    if (this.scope && !this.scope.hasAttribute(idAttr)) this.scope.setAttribute(idAttr, this.name);
+
+    const prefix = this.scope ? `[${idAttr}="${this.name}"] ` : '';
+
+    const cssFor = (r) => {
+      let sel = prefix + r.sel + '::' + r.pseudo;
+      for (const s of r.signals) {
+        const attr = 'data-dssl-signal-' + s.name;
+        const cond = s.op === 'truthy' ? `html[${attr}]` : `html[${attr}="${s.value}"]`;
+        sel = cond + ' ' + sel;
+      }
+      let body = r.decls.map(d => `  ${d.prop}: ${d.value};`).join('\n');
+      let out = `${sel} {\n${body}\n}`;
+      for (const q of [...r.media].reverse()) out = `@media ${q} {\n${out}\n}`;
+      for (const c of [...r.containers].reverse()) out = `@container ${c} {\n${out}\n}`;
+      return out;
+    };
+
+    let css = this.shadowRules.map(cssFor).join('\n\n');
+
+    if (this.reset) {
+      css += `
+
+/* dssl reset */
+:where(html) { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
+:where(html *, html *::before, html *::after) { box-sizing: border-box; }
+:where(body) { margin: 0; }
+:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre) { margin: 0; }
+:where(ul,ol) { margin: 0; padding: 0; list-style: none; }
+:where(img,picture,video,canvas,svg) { display: block; max-width: 100%; }
+:where(input,button,textarea,select) { font: inherit; color: inherit; letter-spacing: inherit; }
+:where(a) { color: inherit; text-decoration: none; }
+:where(button) { background: none; border: none; padding: 0; cursor: pointer; }
+:where(table) { border-collapse: collapse; }`;
+    }
+
+    if (!this.shadowStyle) {
+      this.shadowStyle = document.createElement('style');
+      this.shadowStyle.setAttribute('data-dssl-shadow', this.name);
+      document.head.appendChild(this.shadowStyle);
+    }
+    this.shadowStyle.textContent = `/* generated by DSSL engine "${this.name}" — pseudo-elements + reset only */\n` + css;
+  }
+
+  /* ------------------------------------------------------------ *
+   * Replay animations
+   * ------------------------------------------------------------ */
+
+  replay(selector) {
+    const root = this.scope || document;
+    let els;
+    try { els = selector ? root.querySelectorAll(selector) : root.querySelectorAll('*'); } catch { return; }
+    this._applying = true;
+    for (const el of els) {
+      const anims = this.animMap.get(el);
+      if (!anims) continue;
+      anims.forEach(a => { try { a.cancel(); } catch { } });
+      anims.clear();
+      this.computeElement(el);
+    }
+    this._applying = false;
+  }
+}

public/dssl/index.js

@@ -0,0 +1,162 @@
+/* =========================================================================
+ * DSSL — index.js — public API + auto-boot
+ *
+ *   import '/dssl/index.js'        // or <script type="module" src="/dssl/index.js">
+ *
+ *   DSSL.load(['/styles/site.dssl'])          // fetch + apply
+ *   DSSL.apply(source, { name, scope })       // apply a source string
+ *   DSSL.compile(source)                      // parse + resolve only (no DOM)
+ *   DSSL.signal('theme', 'dark')              // JS → styles bridge
+ *   DSSL.refresh() / DSSL.replay(sel) / DSSL.errors
+ *
+ * Auto-boot: any <link rel="stylesheet/dssl" href="…"> or
+ * <style type="text/dssl"> on the page is fetched/applied on load.
+ * Add <html data-dssl-reset> to also get the small built-in reset.
+ * ========================================================================= */
+
+import { parse } from './parser.js';
+import { resolve, DEFAULT_TOKENS } from './resolver.js';
+import { DsslEngine } from './engine.js';
+
+export const VERSION = '0.2.0';
+
+let counter = 0;
+const engines = new Map();
+let lastErrors = [];
+
+// Token registry shared across bundles: tokens.dssl defines the palette,
+// every later stylesheet resolves against it.
+const tokenRegistry = new Map(Object.entries(DEFAULT_TOKENS));
+
+function getEngine(opts = {}) {
+  if (!opts.scope) {
+    if (!engines.has('global')) {
+      engines.set('global', new DsslEngine({ scope: null, name: 'global', reset: !!opts.reset || document.documentElement.hasAttribute('data-dssl-reset') }));
+    }
+    return engines.get('global');
+  }
+  const el = typeof opts.scope === 'string' ? document.querySelector(opts.scope) : opts.scope;
+  if (!el) throw new Error('[DSSL] scope not found: ' + opts.scope);
+  const key = 'scope:' + (el.getAttribute('data-dssl-engine') || (el.setAttribute('data-dssl-engine', 'scoped-' + engines.size), 'scoped-' + engines.size));
+  if (!engines.has(key)) engines.set(key, new DsslEngine({ scope: el, name: el.getAttribute('data-dssl-engine'), reset: !!opts.reset }));
+  return engines.get(key);
+}
+
+function reportErrors(errors, file) {
+  lastErrors = errors;
+  if (!errors.length) return;
+  try {
+    console.groupCollapsed(`%c[DSSL] ${errors.length} issue(s) in ${file}`, 'color:#b3372e;font-weight:bold');
+    for (const e of errors) {
+      console.warn(`${e.file || ''}${e.file ? ':' : ''}${e.line ?? ''} — ${e.message}${e.hint ? `\n    did you mean "${e.hint}"?` : ''}`);
+    }
+    console.groupEnd();
+  } catch { /* very old browsers */ }
+}
+
+/** Parse + resolve without touching the DOM. */
+export function compile(source, file = 'inline.dssl') {
+  const { ast, errors: parseErrors } = parse(source, file);
+  const doc = resolve(ast, file, Object.fromEntries(tokenRegistry));
+  const errors = [...parseErrors, ...doc.errors];
+  return {
+    ok: errors.length === 0,
+    errors,
+    stats: {
+      rules: doc.rules.length,
+      shadowRules: doc.shadowRules.length,
+      motions: Object.keys(doc.motions).length,
+      tokens: Object.keys(doc.tokens).length,
+      mediaQueries: doc.mediaQueries.length,
+    },
+    tokens: doc.tokens,
+    doc,
+  };
+}
+
+/** Apply a DSSL source string. opts: { name, scope, replace, reset } */
+export function apply(source, opts = {}) {
+  const name = opts.name || 'inline-' + (++counter);
+  const file = name.endsWith('.dssl') ? name : name + '.dssl';
+  const result = compile(source, file);
+  // fold this bundle's tokens into the shared registry for later bundles
+  let registryDirty = false;
+  for (const [k, v] of Object.entries(result.doc.tokens || {})) {
+    if (tokenRegistry.get(k) !== v) { tokenRegistry.set(k, v); registryDirty = true; }
+  }
+  if (!opts.keepErrors) reportErrors(result.errors, file);
+  if (result.ok || result.doc.rules.length || result.doc.shadowRules.length) {
+    const engine = getEngine(opts);
+    if (!opts.scope) {
+      // the shared registry is installed once as the first bundle; refresh it
+      // whenever any bundle's tokens changed. Scoped bundles keep their own
+      // :root rules mapped onto the scope element instead.
+      if (!engine.hasBundle('__dssl-tokens__') || registryDirty) {
+        engine.applyBundle('__dssl-tokens__', { rules: result.doc.registryRule ? [result.doc.registryRule] : [], shadowRules: [], motions: {}, mediaQueries: [], errors: [] }, { replace: true });
+      }
+    }
+    engine.applyBundle(name, result.doc, { replace: !!opts.replace });
+  }
+  return result;
+}
+
+/** Fetch and apply one or more .dssl files, in order. */
+export async function load(urls, opts = {}) {
+  const list = Array.isArray(urls) ? urls : [urls];
+  const results = [];
+  for (const url of list) {
+    const res = await fetch(url);
+    if (!res.ok) {
+      const errors = [{ file: url, line: 0, message: `could not load stylesheet (HTTP ${res.status})` }];
+      reportErrors(errors, url);
+      results.push({ ok: false, errors });
+      continue;
+    }
+    const text = await res.text();
+    results.push(apply(text, { ...opts, name: opts.name || url }));
+  }
+  return results;
+}
+
+export function signal(name, value) { for (const e of engines.values()) e.signal(name, value); }
+export function getSignal(name) { return engines.get('global')?.getSignal(name); }
+export function refresh() { for (const e of engines.values()) e.computeAll(); }
+export function replay(selector) { for (const e of engines.values()) e.replay(selector); }
+export function errors() { return lastErrors; }
+export function version() { return VERSION; }
+
+export const DSSL = {
+  version: VERSION, compile, apply, load, signal, getSignal, refresh, replay, errors,
+  __debug: { engines },
+};
+
+if (typeof window !== 'undefined') {
+  window.DSSL = DSSL;
+
+  // ---- auto-boot -------------------------------------------------------
+  const boot = async () => {
+    try {
+      const links = [...document.querySelectorAll('link[rel="stylesheet/dssl"]')];
+      const inlines = [...document.querySelectorAll('style[type="text/dssl"]')];
+
+      const sources = [];
+      for (const l of links) sources.push({ name: l.getAttribute('href'), kind: 'link', el: l });
+      for (const s of inlines) sources.push({ name: 'inline-<style>-' + (++counter), kind: 'style', el: s });
+
+      for (const src of sources) {
+        try {
+          if (src.kind === 'link') await load(src.name);
+          else apply(src.el.textContent, { name: src.name });
+        } catch (e) {
+          reportErrors([{ file: src.name, line: 0, message: 'boot failed: ' + e.message }], src.name);
+        }
+      }
+    } finally {
+      // always announce readiness — even when there was nothing to auto-load
+      window.dispatchEvent(new CustomEvent('dssl-ready', { detail: { version: VERSION } }));
+    }
+  };
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
+  else boot();
+}

public/dssl/parser.js

@@ -0,0 +1,228 @@
+/* =========================================================================
+ * DSSL — Domain Specific Style Language
+ * parser.js — tokenizer + parser for the braces syntax
+ *
+ * Line-oriented parser:
+ *   - blocks open with `header {` and close with `}`
+ *   - declarations are `prop: value` (newline- or `;`-terminated)
+ *   - one-liners like `.card { padding: 12 }` are allowed
+ *   - comments: `// ...` and block comments
+ *
+ * Produces a node tree; classification of headers happens here, value
+ * resolution happens in resolver.js.
+ * ========================================================================= */
+
+const STATE_WORDS = new Set([
+  'hover', 'focus', 'focus-visible', 'active', 'disabled', 'checked',
+  'empty', 'target', 'required', 'invalid', 'valid', 'open', 'closed',
+  'placeholder-shown', 'read-only', 'read-write', 'enabled',
+  'indeterminate', 'first-child', 'last-child', 'only-child',
+  'first-of-type', 'last-of-type', 'link', 'visited',
+]);
+
+const PSEUDO_ELEMENTS = new Set([
+  'before', 'after', 'placeholder', 'selection', 'marker',
+  'first-line', 'first-letter', 'backdrop', 'file-selector-button',
+]);
+
+/** find index of first top-level occurrence of `ch` (skips strings + parens) */
+function scanFor(str, ch, from = 0) {
+  let depth = 0, q = null;
+  for (let i = from; i < str.length; i++) {
+    const c = str[i];
+    if (q) { if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; continue; }
+    if (c === '(' || c === '[') { depth++; continue; }
+    if (c === ')' || c === ']') { depth = Math.max(0, depth - 1); continue; }
+    if (depth === 0 && c === ch) return i;
+  }
+  return -1;
+}
+
+/** split a string on a top-level separator */
+function splitTop(str, sep) {
+  const out = [];
+  let cur = '', depth = 0, q = null;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (q) { cur += c; if (c === q && str[i - 1] !== '\\') q = null; continue; }
+    if (c === '"' || c === "'") { q = c; cur += c; continue; }
+    if (c === '(' || c === '[') { depth++; cur += c; continue; }
+    if (c === ')' || c === ']') { depth = Math.max(0, depth - 1); cur += c; continue; }
+    if (depth === 0 && c === sep) { out.push(cur); cur = ''; continue; }
+    cur += c;
+  }
+  out.push(cur);
+  return out;
+}
+
+/** strip comments (respecting strings), newlines preserved so lines survive */
+function stripComments(src) {
+  let out = '', q = null;
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i], n = src[i + 1];
+    if (q) {
+      out += c;
+      if (c === q && src[i - 1] !== '\\') q = null;
+      continue;
+    }
+    if (c === '"' || c === "'") { q = c; out += c; continue; }
+    if (c === '/' && n === '/') {
+      while (i < src.length && src[i] !== '\n') i++;
+      out += '\n'; i--; continue;
+    }
+    if (c === '/' && n === '*') {
+      let j = i + 2;
+      while (j < src.length && !(src[j] === '*' && src[j + 1] === '/')) {
+        out += src[j] === '\n' ? '\n' : ' ';
+        j++;
+      }
+      i = j + 1; // skip past the closing */
+      continue;
+    }
+    out += c;
+  }
+  return out;
+}
+
+export function parse(source, file = 'inline.dssl') {
+  const errors = [];
+  const err = (line, message, hint) => errors.push({ file, line, message, hint });
+  const root = { kind: 'root', children: [] };
+  const stack = [root];
+
+  const clean = stripComments(source);
+  const lines = clean.split('\n');
+
+  const classify = (header, line) => {
+    const h = header.trim();
+    if (h === 'tokens') return { kind: 'tokens' };
+    if (h === 'pin') return { kind: 'pin' };
+    if (h.startsWith('behavior ')) return { kind: 'behavior', name: h.slice(9).trim() };
+    if (h.startsWith('motion ')) return { kind: 'motion', name: h.slice(7).trim() };
+    if (h.startsWith('@layer ')) return { kind: 'layer', name: h.slice(7).trim() };
+    if (h.startsWith('@media ')) return { kind: 'media', query: h.slice(7).trim() };
+    if (h.startsWith('@container')) return { kind: 'container', query: h.slice(10).trim() };
+    if (h.startsWith('@signal ')) return { kind: 'signal', expr: h.slice(8).trim() };
+    if (h.startsWith('@')) {
+      err(line, `unknown at-rule "${h.split(' ')[0]}"`, 'try @media, @container, @signal or @layer');
+      return { kind: 'bogus' };
+    }
+    if (h.startsWith('::')) {
+      const name = h.slice(2).split(/[\s(]/)[0];
+      if (!PSEUDO_ELEMENTS.has(name)) {
+        err(line, `unknown pseudo-element "::${name}"`, 'try ::before, ::after, ::placeholder, ::selection');
+        return { kind: 'bogus' };
+      }
+      return { kind: 'pseudo', name };
+    }
+    if (STATE_WORDS.has(h)) return { kind: 'state', name: h };
+    return { kind: 'selector', sel: h };
+  };
+
+  /** process a chunk, walking top-level braces so one-liners work */
+  const processChunk = (chunk, line) => {
+    let rest = chunk;
+    while (rest.length) {
+      rest = rest.trim();
+      if (!rest) return;
+
+      const open = scanFor(rest, '{');
+      const close = scanFor(rest, '}');
+
+      if (close !== -1 && (open === -1 || close < open)) {
+        const before = rest.slice(0, close).trim();
+        if (before) processContent(before, line);
+        if (stack.length === 1) err(line, 'unexpected "}"');
+        else stack.pop();
+        rest = rest.slice(close + 1);
+        continue;
+      }
+
+      if (open !== -1) {
+        const header = rest.slice(0, open).trim();
+        if (!header) { err(line, 'block is missing a header before "{"'); rest = rest.slice(open + 1); continue; }
+        const meta = classify(header, line);
+        const node = { ...meta, line, children: [] };
+        stack[stack.length - 1].children.push(node);
+        if (meta.kind !== 'bogus') stack.push(node);
+        rest = rest.slice(open + 1);
+        continue;
+      }
+
+      processContent(rest, line);
+      return;
+    }
+  };
+
+  const processContent = (content, line) => {
+    for (const piece of splitTop(content, ';')) {
+      const part = piece.trim();
+      if (!part) continue;
+      const colon = scanFor(part, ':');
+      if (colon === -1) {
+        // `use behavior-name` — keyword declaration with a name argument
+        const useMatch = part.match(/^use\s+([A-Za-z][\w-]*)$/);
+        if (useMatch) {
+          stack[stack.length - 1].children.push({ kind: 'decl', prop: 'use', value: useMatch[1], line });
+          continue;
+        }
+        // valueless semantic property (e.g. `truncate`) — resolver decides if legal
+        if (/^[a-z][a-z0-9-]*$/i.test(part)) {
+          stack[stack.length - 1].children.push({ kind: 'decl', prop: part.toLowerCase(), value: '', line });
+        } else {
+          err(line, `expected ":" in "${part.slice(0, 40)}"`, 'declarations look like  prop: value');
+        }
+        continue;
+      }
+      const prop = part.slice(0, colon).trim().toLowerCase();
+      const value = part.slice(colon + 1).trim();
+      if (!prop) { err(line, 'declaration is missing a property name'); continue; }
+      if (!/^(-{1,2}[a-z][a-z0-9-]*|[a-z][a-z0-9-]*)$/i.test(prop)) {
+        err(line, `"${prop}" is not a valid property name`);
+        continue;
+      }
+      stack[stack.length - 1].children.push({ kind: 'decl', prop, value, line });
+    }
+  };
+
+  // ---- line loop with continuation buffering ----
+  // A logical chunk grows across lines while:
+  //   - parens/brackets are unbalanced   (multi-line values)
+  //   - it ends with a top-level comma   (multi-line selector lists)
+  //   - it ends with a top-level colon   (value on the next line)
+  let buf = '', bufLine = 0;
+
+  const needsMore = (s) => {
+    let depth = 0, q = null;
+    for (let i = 0; i < s.length; i++) {
+      const c = s[i];
+      if (q) { if (c === q && s[i - 1] !== '\\') q = null; continue; }
+      if (c === '"' || c === "'") { q = c; continue; }
+      if (c === '(' || c === '[') depth++;
+      else if (c === ')' || c === ']') depth--;
+    }
+    if (depth !== 0) return true;
+    const t = s.trimEnd();
+    const last = t[t.length - 1];
+    return last === ',' || last === ':';
+  };
+
+  lines.forEach((raw, idx) => {
+    const line = idx + 1;
+    const trimmed = raw.trim();
+    if (!trimmed) return; // blank lines never split a pending chunk
+    const candidate = buf ? buf + ' ' + trimmed : raw;
+    if (buf && needsMore(candidate)) { buf = candidate; return; }
+    if (buf) { processChunk(candidate, bufLine || line); buf = ''; return; }
+    if (needsMore(candidate)) { buf = candidate; bufLine = line; return; }
+    processChunk(candidate, line);
+  });
+  if (buf.trim()) processChunk(buf, bufLine);
+
+  if (stack.length > 1) {
+    err(lines.length, `${stack.length - 1} block(s) were never closed with "}"`, 'every "{" needs a matching "}"');
+  }
+
+  return { ast: root, errors };
+}

public/dssl/resolver.js

@@ -0,0 +1,776 @@
+/* =========================================================================
+ * DSSL — resolver.js
+ * Walks the parsed tree and produces flat, engine-ready rules:
+ *
+ *   rule = {
+ *     id, sel,                       // full structural selector (may contain native pseudo-classes)
+ *     media: [query],                // all must match
+ *     signals: [{name, op, value}],  // JS-driven conditions
+ *     containers: [query],           // container-query conditions
+ *     layer, order,                  // cascade: (layer, order) — no specificity
+ *     decls: [{prop, value} | special],
+ *     file, line
+ *   }
+ *
+ * Also resolves tokens (→ custom properties on <html>), semantic properties,
+ * behaviors (`use`), motions (→ Web Animations keyframes) and pseudo-element
+ * rules (→ generated "shadow" CSS, the only thing inline styles can't reach).
+ * ========================================================================= */
+
+import { levenshtein, didYouMean } from './utils.js';
+
+/* ------------------------------------------------------------------ *
+ * Vocabulary
+ * ------------------------------------------------------------------ */
+
+const CSS_KEYWORDS = new Set(('inherit,initial,unset,revert,revert-layer,none,auto,currentcolor,transparent,' +
+  'black,silver,gray,white,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua,' +
+  'orange,gold,pink,brown,violet,cyan,magenta,indigo,crimson,coral,tomato,goldenrod,khaki,' +
+  'slategray,slategrey,dimgray,dimgrey,lightgray,lightgrey,darkgray,darkgrey,gainsboro,whitesmoke,' +
+  'ghostwhite,ivory,beige,linen,seashell,snow,honeydew,mintcream,azure,aliceblue,lavender,' +
+  'canvas,canvastext,linktext,visitedtext,activetext,buttonface,buttontext,buttonborder,field,fieldtext,highlight,highlighttext,' +
+  'solid,dashed,dotted,double,groove,ridge,inset,outset,hidden,visible,' +
+  'block,inline,inline-block,flex,inline-flex,grid,inline-grid,flow-root,contents,table,table-row,table-cell,list-item,' +
+  'relative,absolute,fixed,sticky,static,sticky,' +
+  'start,end,center,left,right,between,around,evenly,baseline,stretch,normal,space-between,space-around,space-evenly,' +
+  'wrap,nowrap,reverse,row,column,row-reverse,column-reverse,' +
+  'bold,bolder,lighter,italic,oblique,small-caps,uppercase,lowercase,capitalize,underline,overline,line-through,blink,' +
+  'ellipsis,clip,break-word,anywhere,pre,pre-wrap,pre-line,subpixel-antialiased,antialiased,' +
+  'pointer,progress,default,move,text,wait,help,grab,grabbing,not-allowed,zoom-in,zoom-out,copy,alias,crosshair,' +
+  'serif,sans-serif,monospace,cursive,fantasy,system-ui,ui-sans-serif,ui-monospace,ui-serif,ui-rounded,' +
+  'system-ui,-apple-system,Roboto,Helvetica,Arial,Menlo,Consolas,SFMono-Regular,Liberation-Mono,Inter,Noto-Sans,Ubuntu,Cantarell,Oxygen,Fira-Sans,Droid-Sans,' +
+  'border-box,content-box,padding-box,fill-box,stroke-box,view-box,' +
+  'contain,cover,fill,fit-content,min-content,max-content,minmax,repeat,clamp,calc,var,url,env,attr,' +
+  'scaleX,scaleY,translateX,translateY,translate,rotate,skew,skewX,skewY,matrix,' +
+  'ease,ease-in,ease-out,ease-in-out,linear,step-start,step-end,steps,cubic-bezier,spring,bounce,smooth,snap,' +
+  'forwards,backwards,both,infinite,alternate,alternate-reverse,running,paused,reverse,' +
+  'safe,unsafe,legacy,loose,strict,spell-out,letters,isolate,isolation,blend,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue,saturation,color,luminosity,plus-lighter,' +
+  'blur,brightness,contrast,grayscale,invert,opacity,sepia,saturate,drop-shadow,' +
+  'pointer coarse fine hover interactive,first,last,odd,even,all,portrait,landscape,print,screen,and,not,only,' +
+  'inline-size,size,scroll-state,normal,snapped,physical,logical,' +
+  'in,oklab,oklch,srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50,xyz-d65,shorter,longer,deg,grad,rad,turn,' +
+  'to,top,bottom,left,right,above,below,closest-side,farthest-side,ellipse,circle,at,padding-box,border-box,' +
+  'isolate,plaintext,sideways,upright,mixed,ltr,rtl,transform,auto,' +
+  '-webkit-box,-webkit-inline-box,' +
+  'thin,thick,medium,separate,collapse,vertical,horizontal,balance,pretty,orphans,' +
+  'flex-start,flex-end,self-start,self-end,snap-block,snap-inline').split(','));
+
+const UNITLESS_PROPS = new Set([
+  'opacity', 'line-height', 'z-index', 'font-weight', 'flex-grow', 'flex-shrink',
+  'flex', 'order', 'scale', 'widows', 'orphans', 'column-count', 'aspect-ratio',
+  'animation-iteration-count', 'flood-opacity', 'fill-opacity', 'stop-opacity',
+  'shape-image-threshold', 'animation-delay', 'transition-delay',
+]);
+
+// A practical whitelist of standard CSS properties (loud errors beat silent ones)
+const KNOWN_PROPS = new Set(('all,appearance,accent-color,align-content,align-items,align-self,align-tracks,aspect-ratio,' +
+  'backdrop-filter,backface-visibility,background,background-attachment,background-blend-mode,background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size,' +
+  'block-size,border,border-block,border-block-color,border-block-end,border-block-end-color,border-block-end-style,border-block-end-width,border-block-start,border-block-start-color,border-block-start-style,border-block-start-width,border-block-style,border-block-width,' +
+  'border-bottom,border-bottom-color,border-bottom-left-radius,border-bottom-right-radius,border-bottom-style,border-bottom-width,' +
+  'border-collapse,border-color,border-end-end-radius,border-end-start-radius,border-image,border-image-outset,border-image-repeat,border-image-slice,border-image-source,border-image-width,' +
+  'border-inline,border-inline-color,border-inline-end,border-inline-end-color,border-inline-end-style,border-inline-end-width,border-inline-start,border-inline-start-color,border-inline-start-style,border-inline-start-width,border-inline-style,border-inline-width,' +
+  'border-left,border-left-color,border-left-style,border-left-width,border-radius,border-right,border-right-color,border-right-style,border-right-width,' +
+  'border-spacing,border-start-end-radius,border-start-start-radius,border-style,border-top,border-top-color,border-top-left-radius,border-top-right-radius,border-top-style,border-top-width,border-width,' +
+  'bottom,box-decoration-break,box-shadow,box-sizing,break-after,break-before,break-inside,caret-color,caret-shape,clear,clip,clip-path,color,color-scheme,column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns,contain,contain-intrinsic-size,container,container-name,container-type,content,cursor,caret,display,empty-cells,filter,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,float,font,font-family,font-feature-settings,font-kerning,font-language-override,font-optical-sizing,font-palette,font-size,font-size-adjust,font-stretch,font-style,font-synthesis,font-variant,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-variation-settings,font-weight,forced-color-adjust,gap,grid,grid-area,grid-auto-columns,grid-auto-flow,grid-auto-rows,grid-column,grid-column-end,grid-column-gap,grid-column-start,grid-gap,grid-row,grid-row-end,grid-row-gap,grid-row-start,grid-template,grid-template-areas,grid-template-columns,grid-template-rows,' +
+  'hanging-punctuation,height,hyphenate-character,hyphenate-limit-chars,hyphens,image-orientation,image-rendering,inline-size,inset,inset-block,inset-block-end,inset-block-start,inset-inline,inset-inline-end,inset-inline-start,isolation,justify-content,justify-items,justify-self,justify-tracks,left,letter-spacing,line-break,line-height,list-style,list-style-image,list-style-position,list-style-type,margin,margin-block,margin-block-end,margin-block-start,margin-bottom,margin-inline,margin-inline-end,margin-inline-start,margin-left,margin-right,margin-top,margin-trim,mask,mask-border,mask-border-mode,mask-border-outset,mask-border-repeat,mask-border-slice,mask-border-source,mask-border-width,mask-clip,mask-composite,mask-image,mask-mode,mask-origin,mask-position,mask-repeat,mask-size,max-height,max-inline-size,max-width,min-block-size,min-height,min-inline-size,min-width,mix-blend-mode,object-fit,object-position,offset,offset-anchor,offset-distance,offset-path,offset-rotate,opacity,order,outline,outline-color,outline-offset,outline-style,outline-width,overflow,overflow-anchor,overflow-clip-margin,overflow-wrap,overflow-x,overflow-y,overscroll-behavior,overscroll-behavior-block,overscroll-behavior-inline,overscroll-behavior-x,overscroll-behavior-y,padding,padding-block,padding-block-end,padding-block-start,padding-bottom,padding-inline,padding-inline-end,padding-inline-start,padding-left,padding-right,padding-top,page-break-after,page-break-before,page-break-inside,paint-order,perspective,perspective-origin,place-content,place-items,place-self,pointer-events,position,print-color-adjust,quotes,resize,right,rotate,row-gap,ruby-align,ruby-merge,scale,scroll-behavior,scroll-margin,scroll-margin-block,scroll-margin-block-end,scroll-margin-block-start,scroll-margin-bottom,scroll-margin-inline,scroll-margin-inline-end,scroll-margin-inline-start,scroll-margin-left,scroll-margin-right,scroll-margin-top,scroll-padding,scroll-padding-block,scroll-padding-bottom,scroll-padding-inline,scroll-padding-left,scroll-padding-right,scroll-padding-top,scroll-snap-align,scroll-snap-stop,scroll-snap-type,scrollbar-color,scrollbar-gutter,scrollbar-width,shape-image-threshold,shape-margin,shape-outside,tab-size,table-layout,text-align,text-align-last,text-combine-upright,text-decoration,text-decoration-color,text-decoration-line,text-decoration-skip-ink,text-decoration-style,text-decoration-thickness,text-emphasis,text-emphasis-color,text-emphasis-position,text-emphasis-style,text-indent,text-justify,text-orientation,text-overflow,text-rendering,text-shadow,text-transform,text-underline-offset,text-underline-position,top,touch-action,transform,transform-box,transform-origin,transform-style,transition,transition-behavior,transition-delay,transition-duration,transition-property,transition-timing-function,translate,unicode-bidi,user-select,vertical-align,visibility,white-space,white-space-collapse,width,will-change,word-break,word-spacing,word-wrap,writing-mode,z-index,zoom,' +
+  'animation,animation-composition,animation-delay,animation-direction,animation-duration,animation-fill-mode,animation-iteration-count,animation-name,animation-play-state,animation-range,animation-timeline,animation-timing-function,' +
+  'view-transition-name,interpolate-size,text-box,text-box-edge,text-box-trim,dynamic-range-limit,field-sizing,anchor-name,position-anchor,position-area,scroll-timeline,scroll-timeline-axis,scroll-timeline-name,timeline-scope,view-timeline,view-timeline-axis,view-timeline-name,' +
+  '-webkit-background-clip,-webkit-text-fill-color,-webkit-box-orient,-webkit-line-clamp,-webkit-tap-highlight-color,-webkit-font-smoothing,-moz-osx-font-smoothing,-webkit-box-shadow,-webkit-text-stroke').split(','));
+
+/* ------------------------------------------------------------------ *
+ * Built-in token defaults (overridable via `tokens { }`)
+ * ------------------------------------------------------------------ */
+
+export const DEFAULT_TOKENS = {
+  'color.ink': '#16161d',
+  'color.paper': '#faf7f2',
+  'color.card': '#ffffff',
+  'color.muted': '#6f6a7a',
+  'color.line': '#e5ded2',
+  'color.accent': 'oklch(62% 0.19 35)',
+  'color.accent-ink': '#fff6ee',
+  'color.ok': '#2e7d4f',
+  'color.err': '#b3372e',
+  'space.1': '4', 'space.2': '8', 'space.3': '12', 'space.4': '16',
+  'space.5': '24', 'space.6': '32', 'space.7': '48', 'space.8': '64',
+  'radius.sm': '8', 'radius.md': '14', 'radius.lg': '22', 'radius.full': '999',
+  'shadow.sm': '0 1 2 color.ink/8, 0 1 3 color.ink/6',
+  'shadow.md': '0 2 4 color.ink/10, 0 4 12 color.ink/8',
+  'shadow.lg': '0 4 8 color.ink/12, 0 12 32 color.ink/12',
+  'shadow.xl': '0 8 16 color.ink/14, 0 24 64 color.ink/16',
+  'font.sans': 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  'font.mono': 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace',
+};
+
+const EASINGS = {
+  snap: 'cubic-bezier(0.2, 0.9, 0.3, 1)',
+  smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  linear: 'linear',
+  ease: 'ease',
+  'ease-in': 'ease-in',
+  'ease-out': 'ease-out',
+  'ease-in-out': 'ease-in-out',
+};
+
+const PLACE_WORDS = {
+  center: ['center', 'center'], start: ['start', 'flex-start'], end: ['end', 'flex-end'],
+  between: ['center', 'space-between'], around: ['center', 'space-around'],
+  evenly: ['center', 'space-evenly'], stretch: ['stretch', 'flex-start'],
+  baseline: ['baseline', 'flex-start'],
+};
+
+/* ------------------------------------------------------------------ *
+ * Value resolution
+ * ------------------------------------------------------------------ */
+
+const IDENT_RE = /^-?(?:[A-Za-z_]|--[A-Za-z_])[A-Za-z0-9_.\\-]*/;
+
+// functions whose numeric arguments are NOT lengths — numbers stay bare
+const UNITLESS_FN = new Set(('oklch,oklab,lab,lch,hsl,hsla,rgb,rgba,hwb,color,color-mix,light-dark,' +
+  'brightness,saturate,contrast,grayscale,sepia,invert,opacity,' +
+  'scale,scalex,scaley,scalez,scale3d,steps,cubic-bezier,linear,radial,conic').split(','));
+// functions whose bare numbers ARE lengths (px)
+const LENGTH_FN = new Set('calc,min,max,clamp,round,mod,rem,abs,sign,hypot,pow,sqrt,log,exp,blur,drop-shadow'.split(','));
+
+/**
+ * Resolve a raw value string into its final form:
+ *   - bare numbers get `px` (unless ctx.unitless)
+ *   - token references become var(--dssl-…), `token/NN` becomes color-mix
+ *   - unknown identifiers are errors (with did-you-mean)
+ */
+function resolveValue(raw, ctx) {
+  let out = '';
+  let i = 0;
+  const n = raw.length;
+
+  const err = (msg, hint) => ctx.errors.push({ file: ctx.file, line: ctx.line, message: msg, hint });
+
+  while (i < n) {
+    const c = raw[i];
+
+    if (/\s/.test(c)) { out += c; i++; continue; }
+
+    if (c === '"' || c === "'") {
+      let j = i + 1;
+      while (j < n && raw[j] !== c) j++;
+      out += raw.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+
+    if (/[0-9]/.test(c) || (c === '.' && /[0-9]/.test(raw[i + 1] || '')) || ((c === '-' || c === '+') && /[0-9.]/.test(raw[i + 1] || ''))) {
+      let j = i + 1;
+      while (j < n && /[0-9.]/.test(raw[j])) j++;
+      const num = raw.slice(i, j);
+      // optional unit
+      let unit = '';
+      if (j < n && /[a-z%]/i.test(raw[j])) {
+        let k = j;
+        while (k < n && /[a-z%]/i.test(raw[k])) k++;
+        unit = raw.slice(j, k).toLowerCase();
+        j = k;
+      }
+      out += num + (unit ? unit : (ctx.unitless ? '' : 'px'));
+      i = j;
+      continue;
+    }
+
+    const idm = raw.slice(i).match(IDENT_RE);
+    if (idm) {
+      let ident = idm[0];
+      i += ident.length;
+
+      if (ident.startsWith('--')) { out += ident; continue; } // custom property
+
+      // function call — resolve the inside
+      if (raw[i] === '(') {
+        let depth = 1, j = i + 1;
+        while (j < n && depth > 0) {
+          if (raw[j] === '(') depth++;
+          if (raw[j] === ')') depth--;
+          if (depth > 0 && (raw[j] === '"' || raw[j] === "'")) {
+            const q = raw[j]; j++;
+            while (j < n && raw[j] !== q) j++;
+          }
+          j++;
+        }
+        const inner = raw.slice(i + 1, j - 1);
+        const fname = ident.toLowerCase();
+        // color-ish functions keep bare numbers bare; calc-family gets px
+        const innerUnitless = UNITLESS_FN.has(fname) ? true : LENGTH_FN.has(fname) ? false : ctx.unitless;
+        const resolvedInner = resolveValue(inner, { ...ctx, unitless: innerUnitless });
+        out += ident + '(' + resolvedInner + ')';
+        i = j;
+        continue;
+      }
+
+      // token reference?
+      const tokenKey = findToken(ctx.tokens, ident);
+      if (tokenKey) {
+        const varRef = 'var(--dssl-' + tokenKey.replace(/\./g, '-') + ')';
+        // alpha modifier:  ink/20
+        let rest = raw.slice(i).match(/^\s*\/\s*([0-9.]+)\s*%?/);
+        if (rest) {
+          out += `color-mix(in oklab, ${varRef} ${rest[1]}%, transparent)`;
+          i += rest[0].length;
+          continue;
+        }
+        out += varRef;
+        continue;
+      }
+
+      // known keyword?
+      if (CSS_KEYWORDS.has(ident) || CSS_KEYWORDS.has(ident.toLowerCase())) {
+        out += ident;
+        continue;
+      }
+
+      err(`unknown value "${ident}" for property "${ctx.prop}"`,
+        didYouMean(ident, [...ctx.tokenNames, ...CSS_KEYWORDS]));
+      out += ident; // keep going so the rest still resolves
+      continue;
+    }
+
+    // punctuation: copy (handles / , + * # etc.)
+    if (c === '#') { // hex color
+      let j = i + 1;
+      while (j < n && /[0-9a-fA-F]/.test(raw[j])) j++;
+      out += raw.slice(i, j);
+      i = j;
+      continue;
+    }
+    out += c;
+    i++;
+  }
+  return out;
+}
+
+function findToken(tokens, ident) {
+  if (tokens.has(ident)) return ident;
+  // try progressive dot paths (a.b.c defined, user typed a.b.c — exact only, plus flat fallback)
+  if (ident.includes('.')) {
+    const parts = ident.split('.');
+    for (let k = parts.length - 1; k > 0; k--) {
+      const key = parts.slice(0, k).join('.');
+      if (tokens.has(key)) return key; // hmm — partial match would change meaning; require exact
+    }
+  }
+  return null;
+}
+
+/* ------------------------------------------------------------------ *
+ * Semantic properties
+ * ------------------------------------------------------------------ */
+
+const len = (raw, ctx) => resolveValue(raw, { ...ctx, unitless: false });
+const num = (raw, ctx) => resolveValue(raw, { ...ctx, unitless: true });
+
+function parseFlexWords(value, ctx, dir) {
+  const out = [{ prop: 'display', value: 'flex' }, { prop: 'flex-direction', value: dir }];
+  const atoms = value.split(/\s+/).filter(Boolean);
+  for (let k = 0; k < atoms.length; k++) {
+    const a = atoms[k];
+    if (a === 'gap') {
+      const v = atoms[++k];
+      if (v === undefined) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: 'gap needs a value' }); break; }
+      out.push({ prop: 'gap', value: len(v, ctx) });
+      continue;
+    }
+    if (a === 'wrap') { out.push({ prop: 'flex-wrap', value: 'wrap' }); continue; }
+    if (a === 'nowrap') { out.push({ prop: 'flex-wrap', value: 'nowrap' }); continue; }
+    if (a === 'reverse') { out[1].value = dir + '-reverse'; continue; }
+    if (a === 'inline') { out[0].value = 'inline-flex'; continue; }
+    if (PLACE_WORDS[a]) {
+      out.push({ prop: 'align-items', value: PLACE_WORDS[a][0] });
+      out.push({ prop: 'justify-content', value: PLACE_WORDS[a][1] });
+      continue;
+    }
+    ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown word "${a}" in ${dir}`, hint: didYouMean(a, ['gap', 'center', 'start', 'end', 'between', 'around', 'evenly', 'stretch', 'baseline', 'wrap', 'nowrap', 'reverse', 'inline']) });
+  }
+  return out;
+}
+
+const SEMANTIC = {
+  size(v, ctx) {
+    const parts = v.split(/\s+/).filter(Boolean);
+    const w = len(parts[0] || 'auto', ctx);
+    const h = parts[1] !== undefined ? len(parts[1], ctx) : w;
+    return [{ prop: 'width', value: w }, { prop: 'height', value: h }];
+  },
+  row: (v, ctx) => parseFlexWords(v, ctx, 'row'),
+  column: (v, ctx) => parseFlexWords(v, ctx, 'column'),
+  grid(v, ctx) {
+    const atoms = v.split(/\s+/).filter(Boolean);
+    let cols;
+    if (atoms.length === 1 && /^[0-9]+$/.test(atoms[0])) {
+      cols = `repeat(${atoms[0]}, 1fr)`;
+    } else if ((atoms[0] === 'auto-fill' || atoms[0] === 'auto-fit') && atoms[1]) {
+      cols = `repeat(${atoms[0]}, minmax(${len(atoms[1], ctx)}, 1fr))`;
+    } else {
+      cols = atoms.map(a => len(a, ctx)).join(' ');
+    }
+    return [{ prop: 'display', value: 'grid' }, { prop: 'grid-template-columns', value: cols }];
+  },
+  stack(v, ctx) {
+    const word = (v || 'center').trim();
+    const p = PLACE_WORDS[word];
+    if (!p) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown place "${word}" in stack`, hint: didYouMean(word, Object.keys(PLACE_WORDS)) });
+      return [{ prop: '@stack', value: '1' }];
+    }
+    return [{ prop: 'display', value: 'grid' }, { prop: 'place-items', value: `${p[0]} ${p[1]}` }, { prop: '@stack', value: '1' }];
+  },
+  place(v, ctx) {
+    const p = PLACE_WORDS[v.trim()];
+    if (!p) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown place "${v}"`, hint: didYouMean(v, Object.keys(PLACE_WORDS)) });
+      return [];
+    }
+    return [{ prop: 'place-items', value: `${p[0]} ${p[1]}` }, { prop: 'place-content', value: `${p[0]} ${p[1]}` }];
+  },
+  cover(v, ctx) {
+    const pos = (v || 'absolute').trim();
+    return [{ prop: 'position', value: pos }, { prop: 'inset', value: '0' }];
+  },
+  sticky(v, ctx) {
+    return [{ prop: 'position', value: 'sticky' }, { prop: 'top', value: len(v || '0', ctx) }];
+  },
+  font(v, ctx) {
+    const out = [];
+    const slash = v.split('/');
+    const head = slash[0].trim().split(/\s+/).filter(Boolean);
+    out.push({ prop: 'font-size', value: len(head[0] || '16', ctx) });
+    if (slash[1]) {
+      const tail = slash[1].trim().split(/\s+/).filter(Boolean);
+      out.push({ prop: 'line-height', value: num(tail[0] || '1.5', ctx) });
+      if (tail.length > 1) out.push({ prop: 'color', value: resolveValue(tail.slice(1).join(' '), ctx) });
+    } else if (head.length > 1) {
+      out.push({ prop: 'color', value: resolveValue(head.slice(1).join(' '), ctx) });
+    }
+    return out;
+  },
+  fluid(v, ctx) {
+    const parts = v.split(',').map(s => s.trim());
+    const px = (s) => {
+      const m = String(s).match(/^([0-9.]+)\s*(px|rem|em|%)?$/);
+      if (!m) { ctx.errors.push({ file: ctx.file, line: ctx.line, message: `fluid: "${s}" is not a size` }); return '0px'; }
+      return m[2] ? `${m[1]}${m[2]}` : `${m[1]}px`;
+    };
+    const min = px(parts[0]); const max = px(parts[1]);
+    const vmin = px(parts[2] || '360'); const vmax = px(parts[3] || '1200');
+    const mv = parseFloat(min), xv = parseFloat(max);
+    const slope = ((xv - mv) / (parseFloat(vmax) - parseFloat(vmin))) * 100;
+    return [{ prop: 'font-size', value: `clamp(${min}, calc(${min} + ${slope.toFixed(3)}vw), ${max})` }];
+  },
+  shadow(v, ctx) {
+    const t = v.trim();
+    if (['sm', 'md', 'lg', 'xl', 'none'].includes(t)) {
+      return [{ prop: 'box-shadow', value: t === 'none' ? 'none' : `var(--dssl-shadow-${t})` }];
+    }
+    return [{ prop: 'box-shadow', value: resolveValue(v, ctx) }];
+  },
+  radius(v, ctx) {
+    const atoms = v.trim().split(/\s+/).filter(Boolean);
+    const out = atoms.map(a => {
+      if (['sm', 'md', 'lg', 'full', 'xl'].includes(a)) return `var(--dssl-radius-${a})`;
+      return resolveValue(a, ctx);
+    });
+    return [{ prop: 'border-radius', value: out.join(' ') }];
+  },
+  circle(v, ctx) {
+    const s = len(v, ctx);
+    return [
+      { prop: 'width', value: s },
+      { prop: 'height', value: s },
+      { prop: 'border-radius', value: '50%' },
+    ];
+  },
+  align(v, ctx) {
+    const map = { center: 'center', start: 'start', end: 'end', stretch: 'stretch', baseline: 'baseline' };
+    const val = map[v.trim()];
+    if (!val) {
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown align "${v}"`, hint: didYouMean(v, Object.keys(map)) });
+      return [];
+    }
+    return [{ prop: 'align-items', value: val }];
+  },
+  z(v, ctx) { return [{ prop: 'z-index', value: num(v, ctx) }]; },
+  grow(v, ctx) { return [{ prop: 'flex-grow', value: num(v || '1', ctx) }]; },
+  shrink(v, ctx) { return [{ prop: 'flex-shrink', value: num(v || '1', ctx) }]; },
+  basis(v, ctx) { return [{ prop: 'flex-basis', value: len(v, ctx) }]; },
+  truncate() {
+    return [
+      { prop: 'overflow', value: 'hidden' },
+      { prop: 'text-overflow', value: 'ellipsis' },
+      { prop: 'white-space', value: 'nowrap' },
+    ];
+  },
+  transition(v, ctx) {
+    const t = v.trim();
+    if (t === 'none') return [{ prop: 'transition', value: 'none' }];
+    const atoms = t.split(/\s+/);
+    const dur = atoms[0];
+    const easing = atoms[1] && EASINGS[atoms[1]] ? EASINGS[atoms[1]] : (atoms[1] || 'ease');
+    const ms = /^\d+$/.test(dur) ? dur + 'ms' : dur;
+    return [{ prop: 'transition', value: `all ${ms} ${easing}` }];
+  },
+  animate(v, ctx) {
+    const t = v.trim();
+    if (t === 'none') return [{ prop: '@animate', value: null }];
+    const atoms = t.split(/\s+/);
+    const spec = { motion: atoms[0], duration: 400, easing: EASINGS.smooth, fill: 'both', delay: 0 };
+    for (let k = 1; k < atoms.length; k++) {
+      const a = atoms[k];
+      if (/^\d+(ms|s)?$/.test(a)) {
+        const ms = a.endsWith('s') && !a.endsWith('ms') ? parseFloat(a) * 1000 : parseFloat(a);
+        if (k === 1) spec.duration = ms; else spec.delay = ms;
+        continue;
+      }
+      if (EASINGS[a]) { spec.easing = EASINGS[a]; continue; }
+      if (['both', 'forwards', 'backwards', 'none', 'auto'].includes(a)) { spec.fill = a; continue; }
+      ctx.errors.push({ file: ctx.file, line: ctx.line, message: `unknown animate part "${a}"`, hint: didYouMean(a, Object.keys(EASINGS).concat(['both', 'forwards', 'backwards'])) });
+    }
+    return [{ prop: '@animate', value: spec }];
+  },
+};
+
+/* ------------------------------------------------------------------ *
+ * resolveDecl — one declaration → zero or more engine decls
+ * ------------------------------------------------------------------ */
+
+function resolveDecl(prop, value, ctx) {
+  const errors = ctx.errors;
+  const ctx2 = { ...ctx, prop, errors };
+
+  if (prop.startsWith('--')) return [{ prop, value: resolveValue(value, { ...ctx2, unitless: false }) }];
+
+  const sem = SEMANTIC[prop];
+  if (sem) return sem(value, ctx2);
+
+  if (!KNOWN_PROPS.has(prop)) {
+    errors.push({
+      file: ctx.file, line: ctx.line,
+      message: `unknown property "${prop}"`,
+      hint: didYouMean(prop, [...KNOWN_PROPS, ...Object.keys(SEMANTIC)]),
+    });
+    return [];
+  }
+  return [{ prop, value: resolveValue(value, { ...ctx2, unitless: UNITLESS_PROPS.has(prop) }) }];
+}
+
+/* ------------------------------------------------------------------ *
+ * Media / container / signal normalization
+ * ------------------------------------------------------------------ */
+
+function normalizeMedia(query, ctx, line) {
+  let q = query.trim();
+  if (!q) {
+    ctx.errors.push({ file: ctx.file, line, message: '@media needs a condition', hint: 'e.g. @media (width >= 768)' });
+    return '(min-width: 0)';
+  }
+  // bare numbers become px:  (width >= 768)  →  (width >= 768px)
+  q = q.replace(/([>=<]\s*)(\d+(?:\.\d+)?)\b(?!\s*(?:px|%|em|rem|vh|vw|vmin|vmax|s|ms|deg|dppx|x))/g, '$1$2px');
+  return q;
+}
+
+function parseSignal(expr, ctx, line) {
+  const m = expr.match(/^([A-Za-z_][\w-]*)\s*(==|!=)\s*(.+)$/);
+  if (m) {
+    let v = m[3].trim();
+    if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) v = v.slice(1, -1);
+    return { name: m[1], op: m[2], value: v };
+  }
+  if (/^[A-Za-z_][\w-]*$/.test(expr.trim())) return { name: expr.trim(), op: 'truthy', value: null };
+  ctx.errors.push({ file: ctx.file, line, message: `bad @signal expression "${expr}"`, hint: 'try:  @signal theme == dark   or   @signal compact' });
+  return { name: expr.trim(), op: 'truthy', value: null };
+}
+
+/* ------------------------------------------------------------------ *
+ * The flattener
+ * ------------------------------------------------------------------ */
+
+export function resolve(ast, file = 'inline.dssl', baseTokens = null) {
+  const errors = [];
+  const rules = [];
+  const shadowRules = [];
+  const motions = {};
+  const behaviors = {};
+  let tokenMap = new Map(Object.entries(baseTokens || DEFAULT_TOKENS));
+  const tokenLines = new Map(); // for docs/debug
+  let order = 0;
+  let ruleId = 0;
+
+  /* ---- pass 1: collect tokens / behaviors / motions ---- */
+
+  const collectTokens = (node, path, acc) => {
+    for (const child of node.children) {
+      if (child.kind === 'decl') {
+        const key = path ? path + '.' + child.prop : child.prop;
+        tokenMap.set(key, child.value);
+        tokenLines.set(key, child.line);
+        if (acc) acc.push(key);
+      } else if (child.kind === 'selector' || child.kind === 'tokens') {
+        // nested groups written as bare words: `color { ink: ... }`
+        collectTokens(child, path ? path + '.' + child.sel : child.sel, acc);
+      } else {
+        errors.push({ file, line: child.line, message: `unexpected "${child.kind}" inside tokens` });
+      }
+    }
+  };
+
+  const prepass = (nodes) => {
+    for (const node of nodes) {
+      if (node.kind === 'tokens') collectTokens(node, '');
+      else if (node.kind === 'behavior') {
+        if (behaviors[node.name]) errors.push({ file, line: node.line, message: `behavior "${node.name}" is defined twice` });
+        behaviors[node.name] = node;
+      } else if (node.kind === 'motion') {
+        motions[node.name] = node;
+      } else {
+        for (const child of node.children) if (child.kind !== 'decl') prepass([child]);
+      }
+    }
+  };
+  prepass(ast.children);
+
+  /* ---- motions → keyframes ---- */
+
+  const parseMotion = (name) => {
+    const node = motions[name];
+    if (!node) return null;
+    if (node._parsed) return node._parsed;
+    node._parsed = { essential: false, frames: [] };
+    const frameOf = (label) => {
+      if (label === 'from') return 0;
+      if (label === 'to') return 100;
+      const m = label.match(/^at\s+([0-9.]+)\s*%?$/);
+      return m ? parseFloat(m[1]) : null;
+    };
+    const ctxBase = { file, line: node.line, errors, tokens: tokenMap, tokenNames: [...tokenMap.keys()], prop: 'motion', unitless: false };
+    for (const child of node.children) {
+      if (child.kind === 'decl' && child.prop === 'essential') {
+        node._parsed.essential = child.value === '' || child.value === 'true';
+        continue;
+      }
+      if (child.kind === 'decl') {
+        errors.push({ file, line: child.line, message: `"${child.prop}" is not allowed inside motion`, hint: 'motions take from/to/at blocks and `essential`' });
+        continue;
+      }
+      if (child.kind === 'selector') {
+        const offset = frameOf(child.sel);
+        if (offset === null) {
+          errors.push({ file, line: child.line, message: `bad keyframe selector "${child.sel}"`, hint: 'use from, to, or at 40%' });
+          continue;
+        }
+        const props = {};
+        for (const d of child.children) {
+          if (d.kind !== 'decl') continue;
+          const resolved = resolveDecl(d.prop, d.value, { ...ctxBase, line: d.line });
+          for (const r of resolved) {
+            if (r.prop.startsWith('@') || r.prop.startsWith('--')) continue;
+            const camel = r.prop.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+            props[camel] = r.value;
+          }
+        }
+        node._parsed.frames.push({ offset, props });
+      }
+    }
+    node._parsed.frames.sort((a, b) => a.offset - b.offset);
+    return node._parsed;
+  };
+
+  /* ---- token emission ---- */
+
+  const tokenNames = () => [...tokenMap.keys()];
+
+  const resolveTokenDecls = (keys, conds) => {
+    const decls = [];
+    const ctxBase = { file, line: 0, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: 'token', unitless: false };
+    for (const key of keys) {
+      const raw = tokenMap.get(key);
+      const prop = '--dssl-' + key.replace(/\./g, '-');
+      decls.push({ prop, value: resolveValue(raw, { ...ctxBase, prop: key }) });
+    }
+    if (!decls.length) return null;
+    return {
+      id: ruleId++, sel: ':root', media: conds.media, signals: conds.signals,
+      containers: conds.containers, layer: 'tokens', order: order++,
+      decls, file, line: 0, pseudo: null, states: new Set(),
+    };
+  };
+
+  /** used by index.js to install the shared registry as a base bundle */
+  // Built immediately, before the walk, so its cascade order sorts below every
+  // author rule (engine cascade: layer first, then source order).
+  const registryRule = resolveTokenDecls([...tokenMap.keys()], { media: [], signals: [], containers: [] });
+
+  /* ---- main recursive walk ---- */
+
+  const walk = (children, ctx, ctxRule) => {
+    for (const node of children) {
+      switch (node.kind) {
+        case 'decl': {
+          if (node.prop === 'use') {
+            const name = node.value.trim();
+            const bh = behaviors[name];
+            if (!bh) {
+              errors.push({ file, line: node.line, message: `unknown behavior "${name}"`, hint: didYouMean(name, Object.keys(behaviors)) });
+              break;
+            }
+            if (bh._active) { errors.push({ file, line: node.line, message: `behavior cycle involving "${name}"` }); break; }
+            bh._active = true;
+            walk(bh.children, ctx, ctxRule);
+            bh._active = false;
+            break;
+          }
+          const resolved = resolveDecl(node.prop, node.value, { file, line: node.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: node.prop, unitless: false });
+          for (const r of resolved) ctxRule.decls.push({ ...r, line: node.line });
+          break;
+        }
+        case 'selector': {
+          const sel = ctx.sel === '' ? node.sel : combine(ctx.sel, node.sel);
+          const childCtx = { ...ctx, sel };
+          const sub = { decls: [] };
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
+          break;
+        }
+        case 'state': {
+          if (!ctx.sel) {
+            errors.push({ file, line: node.line, message: `"${node.name}" needs a selector around it` });
+            break;
+          }
+          const childCtx = { ...ctx, sel: ctx.sel + ':' + node.name };
+          const sub = { decls: [] };
+          walk(node.children, childCtx, sub);
+          flush(sub, childCtx, node.line);
+          break;
+        }
+        case 'media': {
+          const q = normalizeMedia(node.query, { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, media: [...ctx.media, q] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'container': {
+          const q = normalizeMedia(node.query || '(min-width: 0)', { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, containers: [...ctx.containers, q] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'signal': {
+          const sig = parseSignal(node.expr, { errors, file, line: node.line }, node.line);
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, signals: [...ctx.signals, sig] }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'layer':
+        case 'pin': {
+          const layer = node.kind === 'pin' ? 'pin' : (['tokens', 'base', 'components', 'utilities', 'pin'].includes(node.name) ? node.name : 'components');
+          const sub = { decls: [] };
+          walk(node.children, { ...ctx, layer }, sub);
+          flush(sub, ctx, node.line);
+          break;
+        }
+        case 'pseudo': {
+          const base = ctx.sel || '*'; // top-level ::selection etc. means every element
+          const srule = {
+            id: ruleId++, sel: base, pseudo: node.name,
+            media: ctx.media, signals: ctx.signals, containers: ctx.containers,
+            layer: ctx.layer, order: order++, decls: [], file, line: node.line,
+          };
+          for (const d of node.children) {
+            if (d.kind !== 'decl') { errors.push({ file, line: d.line, message: 'only declarations may appear inside a pseudo-element block (v0.2)' }); continue; }
+            if (d.prop === 'content' && d.value === '') { srule.decls.push({ prop: 'content', value: '""', line: d.line }); continue; }
+            const resolved = resolveDecl(d.prop, d.value, { file, line: d.line, errors, tokens: tokenMap, tokenNames: tokenNames(), prop: d.prop, unitless: false });
+            srule.decls.push(...resolved.map(r => ({ ...r, line: d.line })));
+          }
+          if (srule.decls.length) shadowRules.push(srule);
+          break;
+        }
+        case 'tokens': {
+          if (ctx.sel) { errors.push({ file, line: node.line, message: 'tokens must be top-level or inside @media / @signal' }); break; }
+          // structural tracking: only keys THIS block declares are emitted,
+          // so conditional palettes don't shadow unrelated tokens
+          const ownKeys = [];
+          collectTokens(node, '', ownKeys);
+          const tr = ownKeys.length ? resolveTokenDecls(ownKeys, ctx) : null;
+          if (tr) rules.push(tr);
+          break;
+        }
+        case 'behavior':
+        case 'motion':
+          if (ctx.depth) errors.push({ file, line: node.line, message: `${node.kind} "${node.name}" must be top-level` });
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  function flush(sub, ctx, line) {
+    if (!sub.decls.length) return;
+    if (!ctx.sel) {
+      errors.push({ file, line, message: 'declarations must live inside a selector', hint: 'top-level blocks are tokens, behavior, motion, @layer, @media… — or a selector like .card' });
+      return;
+    }
+    rules.push({
+      id: ruleId++, sel: ctx.sel, media: ctx.media, signals: ctx.signals,
+      containers: ctx.containers, layer: ctx.layer, order: order++,
+      decls: sub.decls, file, line, pseudo: null,
+      states: scanStates(ctx.sel),
+    });
+  }
+
+  /* ---- go ---- */
+
+  const topCtx = { sel: '', media: [], signals: [], containers: [], layer: 'components', depth: 0 };
+  const rootRule = { decls: [] };
+  walk(ast.children, topCtx, rootRule);
+  flush(rootRule, topCtx, 0);
+
+  // parse all motions that were referenced
+  for (const r of rules) {
+    for (const d of r.decls) {
+      if (d.prop === '@animate' && d.value && d.value.motion) {
+        const m = parseMotion(d.value.motion);
+        if (!m) {
+          errors.push({
+            file, line: d.line,
+            message: `unknown motion "${d.value.motion}"`,
+            hint: didYouMean(d.value.motion, Object.keys(motions)),
+          });
+          d.value.broken = true;
+        } else {
+          d.value.frames = m.frames;
+          d.value.essential = m.essential;
+        }
+      }
+    }
+  }
+
+  const mediaQueries = new Set();
+  for (const r of [...rules, ...shadowRules]) r.media.forEach(q => mediaQueries.add(q));
+
+  return { rules, shadowRules, motions, errors, mediaQueries: [...mediaQueries], tokens: Object.fromEntries(tokenMap), registryRule };
+}
+
+/** naive `&` substitution + descendant join */
+function combine(parent, child) {
+  if (child.includes('&')) return child.split('&').join(parent);
+  return parent + ' ' + child;
+}
+
+const STATE_SCAN = /:(hover|focus-visible|focus|active|disabled|checked|empty|target|invalid|valid|required|open|closed|read-only|read-write|placeholder-shown|first-child|last-child|only-child)\b/g;
+function scanStates(sel) {
+  const s = new Set();
+  if (!sel) return s;
+  let m;
+  const re = new RegExp(STATE_SCAN.source, 'g');
+  while ((m = re.exec(sel))) s.add(m[1]);
+  return s;
+}

public/dssl/utils.js

@@ -0,0 +1,34 @@
+/* DSSL — utils.js — tiny shared helpers */
+
+export function levenshtein(a, b) {
+  if (a === b) return 0;
+  const m = a.length, n = b.length;
+  if (!m) return n;
+  if (!n) return m;
+  let prev = new Array(n + 1);
+  let cur = new Array(n + 1);
+  for (let j = 0; j <= n; j++) prev[j] = j;
+  for (let i = 1; i <= m; i++) {
+    cur[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + cost);
+    }
+    [prev, cur] = [cur, prev];
+  }
+  return prev[n];
+}
+
+/** best "did you mean ..." suggestion, or undefined */
+export function didYouMean(word, candidates) {
+  if (!word || !candidates || !candidates.length) return undefined;
+  let best = undefined, bestDist = Infinity;
+  const w = word.toLowerCase();
+  for (const c of candidates) {
+    if (!c) continue;
+    const d = levenshtein(w, String(c).toLowerCase());
+    if (d < bestDist) { bestDist = d; best = c; }
+  }
+  const tolerance = Math.max(2, Math.floor(w.length / 3));
+  return bestDist <= tolerance ? String(best) : undefined;
+}

public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

public/styles/changelog.dssl

@@ -0,0 +1,97 @@
+// =========================================================================
+// changelog.dssl — the "grown while building" timeline
+// =========================================================================
+
+.tl {
+  border-left: 2 solid color.line
+  margin-left: 8
+  padding-left: 26
+  column: gap space.6
+  margin-top: space.5
+}
+
+.tl-item {
+  position: relative
+}
+
+.tl-item::before {
+  content: ""
+  position: absolute
+  left: -33
+  top: 5
+  size: 12
+  circle: 12
+  background: color.accent
+  border: 2 solid color.paper
+  box-shadow: 0 0 0 2 color.accent/25
+}
+
+.tl-item-add::before {
+  background: color.ok
+  box-shadow: 0 0 0 2 color.ok/25
+}
+
+.tl-date {
+  font-family: font.mono
+  font-size: 11.5
+  color: color.muted
+  letter-spacing: 0.06em
+  text-transform: uppercase
+}
+
+.tl-item h3 {
+  font-size: 17
+  font-weight: 700
+  margin: 3 0 6
+  letter-spacing: -0.01em
+}
+
+.tl-item p {
+  font-size: 14
+  color: color.muted
+  line-height: 1.65
+  margin: 0 0 8
+  max-width: 640
+}
+
+.tl-why {
+  font-family: font.mono
+  font-size: 12
+  color: color.accent
+  background: color.accent/8
+  border: 1 solid color.accent/20
+  padding: 3 9
+  radius: full
+  display: inline-block
+  margin-bottom: 8
+}
+
+.tl-version {
+  font-family: font.mono
+  font-size: 12
+  color: color.muted
+  border: 1 solid color.line
+  padding: 3 9
+  radius: full
+  display: inline-block
+  margin-bottom: 8
+  margin-right: 6
+  background: color.card
+}
+
+.vote-badge {
+  font-family: font.mono
+  font-size: 12
+  padding: 3 10
+  radius: full
+  border: 1 solid color.ok/35
+  color: color.ok
+  background: color.ok/8
+  display: inline-block
+}
+
+.vote-badge-veto {
+  border-color: color.err/35
+  color: color.err
+  background: color.err/8
+}

public/styles/docs.dssl

@@ -0,0 +1,321 @@
+// =========================================================================
+// docs.dssl — language reference layout (also used by the spec view)
+// =========================================================================
+
+.page-head {
+  padding: space.6 0 space.2
+}
+
+.page-title {
+  fluid: 30, 44
+  font-weight: 800
+  letter-spacing: -0.03em
+  margin: space.2 0 space.2
+}
+
+.page-sub {
+  color: color.muted
+  font-size: 16.5
+  line-height: 1.65
+  max-width: 640
+}
+
+.docs-layout {
+  display: grid
+  grid-template-columns: 230 minmax(0, 1fr)
+  gap: space.6
+  align-items: start
+  padding-bottom: space.7
+}
+
+@media (width <= 920) {
+  .docs-layout {
+    grid-template-columns: 1fr
+  }
+  .docs-side {
+    display: none
+  }
+}
+
+.docs-side {
+  position: sticky
+  top: 88
+  column: gap 1
+  max-height: calc(100vh - 110)
+  overflow-y: auto
+  padding-right: 6
+  scrollbar-width: thin
+}
+
+.side-head {
+  font-family: font.mono
+  font-size: 10.5
+  text-transform: uppercase
+  letter-spacing: 0.14em
+  color: color.muted
+  padding: 0 12
+  margin: space.3 0 4
+}
+
+.side-head:first-child {
+  margin-top: 0
+}
+
+.docs-side a {
+  padding: 6 12
+  radius: 0 sm sm 0
+  font-size: 13.5
+  color: color.muted
+  transition: 130
+  border-left: 2 solid transparent
+  line-height: 1.4
+}
+
+.docs-side a:hover {
+  color: color.ink
+  background: color.line/50
+  border-left-color: color.accent/40
+}
+
+.docs-body {
+  min-width: 0
+  column: gap space.7
+}
+
+.doc-block {
+  column: gap space.3
+  scroll-margin-top: 92
+}
+
+.doc-lead {
+  color: color.muted
+  font-size: 15.5
+  line-height: 1.7
+  margin: 0
+}
+
+// live example well
+.demo-box {
+  display: grid
+  place: center
+  gap: 12
+  border: 1 dashed color.line
+  radius: md
+  padding: space.5
+  background:
+    radial-gradient(color.line/45 1, transparent 1)
+  background-size: 16 16
+  min-height: 96
+}
+
+// tables (semantic property reference, spec votes, …)
+.tbl {
+  width: 100%
+  border-collapse: collapse
+  font-size: 13.5
+}
+
+.tbl th {
+  text-align: left
+  padding: 9 12
+  background: color.card
+  border-bottom: 2 solid color.line
+  font-size: 11
+  text-transform: uppercase
+  letter-spacing: 0.09em
+  color: color.muted
+  font-family: font.mono
+}
+
+.tbl td {
+  padding: 10 12
+  border-bottom: 1 solid color.line
+  vertical-align: top
+  line-height: 1.55
+  color: color.ink/90
+}
+
+.tbl tr:hover td {
+  background: color.accent/4
+}
+
+.tbl code {
+  font-family: font.mono
+  font-size: 12.5
+  color: color.accent
+  background: color.accent/9
+  padding: 1 6
+  radius: 5
+  white-space: nowrap
+}
+
+.tbl-note {
+  font-size: 12.5
+  color: color.muted
+  margin: 8 0 0
+}
+
+// callouts
+.note {
+  border-left: 3 solid color.accent
+  background: color.accent/7
+  radius: 0 md md 0
+  padding: space.3 space.4
+  font-size: 14
+  line-height: 1.65
+  color: color.ink/90
+}
+
+.note-warn {
+  border-left-color: color.err
+  background: color.err/7
+}
+
+.note b {
+  font-weight: 700
+}
+
+// docs live-demo widgets
+.doc-btn {
+  padding: 10 18
+  radius: sm
+  background: color.card
+  border: 1 solid color.line
+  font-weight: 600
+  font-size: 14
+  cursor: pointer
+  transition: 150
+  color: color.ink
+}
+
+.doc-btn:hover {
+  border-color: color.accent/50
+  translate: 0 -1px
+  shadow: sm
+}
+
+.doc-card {
+  width: 250
+  padding: space.4
+  radius: md
+  background: color.card
+  border: 1 solid color.line
+  shadow: sm
+  transition: 200
+  column: gap 8
+  font-size: 13.5
+}
+
+.doc-card:hover {
+  translate: 0 -4px
+  shadow: lg
+}
+
+.doc-card-title {
+  font-weight: 700
+  font-size: 14.5
+}
+
+.doc-card-sub {
+  color: color.muted
+  font-size: 12.5
+  line-height: 1.5
+}
+
+.motion-box {
+  padding: space.4 space.5
+  radius: md
+  background: color.code-bg
+  color: color.code-ink
+  font-family: font.mono
+  font-size: 13.5
+  min-width: 220
+  text-align: center
+}
+
+.signal-box {
+  padding: space.4 space.5
+  radius: md
+  border: 1 solid color.line
+  background: color.card
+  font-size: 14
+  font-weight: 600
+  transition: 250
+  color: color.muted
+}
+
+@signal docdemo == hot {
+  .signal-box {
+    background: color.accent
+    border-color: color.accent
+    color: color.accent-ink
+    translate: 0 -3px
+    shadow: md
+  }
+}
+
+.tok-demo {
+  row: gap 10 center
+}
+
+.tok-dot {
+  size: 34
+  circle: 34
+  place: center
+  font-family: font.mono
+  font-size: 11
+  border: 1 solid color.line
+  background: color.card
+  color: color.muted
+  transition: 200
+  cursor: pointer
+}
+
+.tok-dot:hover {
+  translate: 0 -3px
+  shadow: md
+  border-color: color.accent/40
+  color: color.accent
+}
+
+.scale-bar {
+  row: gap 6
+  align-items: flex-end
+}
+
+.scale-step {
+  width: 34
+  background: color.accent/70
+  radius: 4 4 0 0
+  transition: 150
+}
+
+.scale-step:hover {
+  background: color.accent
+}
+
+// motion demo — replayed via DSSL.replay()
+motion pop {
+  from {
+    opacity: 0
+    translate: 0 16
+    scale: 0.9
+  }
+}
+
+.motion-box {
+  animate: pop 500 snap
+}
+
+// fluid type demo
+.fluid-demo {
+  fluid: 20, 44
+  font-weight: 800
+  letter-spacing: -0.02em
+  line-height: 1.15
+  text-align: center
+}
+
+.fine-print {
+  font-size: 13
+}

public/styles/home.dssl

@@ -0,0 +1,422 @@
+// =========================================================================
+// home.dssl — the landing view
+// =========================================================================
+
+// ------------------------------------------------------------------- hero
+
+.hero {
+  position: relative
+  overflow: hidden
+  padding: space.8 0 space.7
+}
+
+.hero-glow {
+  position: absolute
+  top: -220
+  right: -160
+  size: 560
+  circle: 560
+  background: radial-gradient(circle, color.accent/16, transparent 65%)
+  pointer-events: none
+}
+
+.hero-glow-2 {
+  position: absolute
+  bottom: -260
+  left: -200
+  size: 520
+  circle: 520
+  background: radial-gradient(circle, color.accent/9, transparent 60%)
+  pointer-events: none
+}
+
+.hero-grid {
+  row: gap space.6 between
+  align: center
+  position: relative
+}
+
+@media (width <= 940) {
+  .hero-grid {
+    display: grid
+    gap: space.6
+  }
+}
+
+.hero-copy {
+  max-width: 560
+}
+
+.hero-title {
+  fluid: 40, 62
+  font-weight: 800
+  line-height: 1.04
+  letter-spacing: -0.035em
+  margin: space.3 0 space.4
+}
+
+.hero-title em {
+  font-style: normal
+  color: color.accent
+}
+
+.hero-sub {
+  font-size: 17.5
+  line-height: 1.7
+  color: color.muted
+  margin: 0 0 space.5
+}
+
+.hero-ctas {
+  row: gap 12 center
+}
+
+.hero-meta {
+  row: gap 14 center
+  margin-top: space.5
+  color: color.muted
+  font-size: 13
+  font-family: font.mono
+}
+
+.hero-meta span::before {
+  content: ""
+  inline-size: 4
+  aspect-ratio: 1
+  background: color.ok
+  radius: full
+  display: inline-block
+  margin-right: 7
+  vertical-align: 1
+}
+
+// ------------------------------------------------------- hero demo stage
+
+.demo {
+  width: 100%
+  max-width: 480
+}
+
+.demo-tabs {
+  row: gap 6
+  margin-bottom: 10
+}
+
+.demo-tab {
+  padding: 7 14
+  radius: full
+  font-size: 13
+  font-weight: 600
+  color: color.muted
+  border: 1 solid color.line
+  background: color.card/50
+  cursor: pointer
+  transition: 140
+}
+
+.demo-tab:hover {
+  color: color.ink
+  translate: 0 -1px
+}
+
+.demo-tab[aria-pressed="true"] {
+  background: color.accent
+  border-color: color.accent
+  color: color.accent-ink
+}
+
+.demo-stage {
+  background: color.card
+  border: 1 solid color.line
+  radius: xl
+  overflow: hidden
+  shadow: lg
+}
+
+.demo-code {
+  border: none
+  border-bottom: 1 solid color.code-line/60
+  radius: 0
+  font-size: 12.5
+  padding: space.3 space.4
+  min-height: 168
+}
+
+.demo-canvas {
+  padding: space.5
+  display: grid
+  place: center
+  gap: 14
+  min-height: 190
+}
+
+// shared vertical rhythm between intro text and grids
+.sect-gap {
+  margin-top: space.4
+}
+
+// the live demo card — every rule below is real, hovering it really works
+motion rise-in {
+  from {
+    opacity: 0
+    translate: 0 12
+  }
+}
+
+.demo-card {
+  width: 240
+  padding: space.4
+  radius: md
+  background: color.card
+  border: 1 solid color.line
+  shadow: md
+  transition: 200
+  column: gap 10
+  animate: rise-in 500 snap
+}
+
+.demo-card:hover {
+  translate: 0 -5px
+  shadow: lg
+  border-color: color.accent/40
+}
+
+.demo-swatch {
+  height: 64
+  radius: sm
+  background: linear-gradient(135deg, color.accent, color.accent/45)
+  transition: 250
+}
+
+.demo-card:hover .demo-swatch {
+  background: linear-gradient(135deg, color.accent/60, color.ink/80)
+}
+
+.demo-card h4 {
+  font-size: 15.5
+  font-weight: 700
+}
+
+.demo-card p {
+  font-size: 13
+  color: color.muted
+  line-height: 1.5
+  margin: 0
+}
+
+.demo-chip {
+  align-self: start
+  font-family: font.mono
+  font-size: 11
+  color: color.accent
+  background: color.accent/12
+  padding: 3 9
+  radius: full
+}
+
+// states demo: a real focusable button styled by focus-visible
+.demo-btn {
+  padding: 12 22
+  radius: md
+  background: color.ink
+  color: color.paper
+  font-weight: 650
+  font-size: 14.5
+  cursor: pointer
+  transition: 160
+  border: none
+}
+
+.demo-btn:hover { translate: 0 -2px; shadow: md }
+
+// motion demo
+.demo-motion {
+  width: 200
+  padding: space.4
+  radius: md
+  background: color.code-bg
+  color: color.code-ink
+  font-family: font.mono
+  font-size: 13
+  text-align: center
+}
+
+// signal demo — the button toggles a JS signal; DSSL re-styles live
+.demo-signal-card {
+  width: 240
+  padding: space.4
+  radius: md
+  background: color.card
+  border: 1 solid color.line
+  transition: 300
+  column: gap 8
+  font-size: 13.5
+  color: color.muted
+}
+
+@signal demo == on {
+  .demo-signal-card {
+    background: color.accent
+    border-color: color.accent
+    color: color.accent-ink
+    translate: 0 -4px
+    shadow: lg
+  }
+}
+
+// ------------------------------------------------------------ pain cards
+
+.pain-grid {
+  display: grid
+  grid-template-columns: repeat(2, 1fr)
+  gap: space.4
+}
+
+@media (width <= 760) {
+  .pain-grid {
+    grid-template-columns: 1fr
+  }
+}
+
+.pain-card {
+  padding: space.5
+  column: gap 10
+}
+
+.pain-label {
+  font-family: font.mono
+  font-size: 12
+  color: color.err
+  font-weight: 600
+}
+
+.pain-cure {
+  font-family: font.mono
+  font-size: 12
+  color: color.ok
+  font-weight: 600
+}
+
+.pain-card h3 {
+  font-size: 17
+  font-weight: 700
+  margin: 0
+}
+
+.pain-card p {
+  margin: 0
+  font-size: 14
+  line-height: 1.65
+  color: color.muted
+}
+
+// ------------------------------------------------------------ comparison
+
+.compare {
+  display: grid
+  grid-template-columns: 1fr 1fr
+  gap: space.4
+  align-items: start
+}
+
+@media (width <= 820) {
+  .compare {
+    grid-template-columns: 1fr
+  }
+}
+
+.compare-col {
+  column: gap 10
+}
+
+.compare-tag {
+  font-family: font.mono
+  font-size: 12.5
+  font-weight: 700
+  row: gap 8 center
+}
+
+.compare-tag-css { color: color.err }
+.compare-tag-dssl { color: color.ok }
+
+// ---------------------------------------------------------- feature grid
+
+.feature-grid {
+  display: grid
+  grid-template-columns: repeat(4, 1fr)
+  gap: space.4
+}
+
+@media (width <= 980) {
+  .feature-grid {
+    grid-template-columns: repeat(2, 1fr)
+  }
+}
+
+@media (width <= 560) {
+  .feature-grid {
+    grid-template-columns: 1fr
+  }
+}
+
+.feature {
+  padding: space.5
+  column: gap 10
+}
+
+.feature-icon {
+  size: 40
+  circle: 40
+  place: center
+  background: color.accent/12
+  color: color.accent
+  font-size: 19
+  font-weight: 700
+  font-family: font.mono
+}
+
+.feature h3 {
+  font-size: 16
+  font-weight: 700
+  margin: 0
+}
+
+.feature p {
+  margin: 0
+  font-size: 13.5
+  line-height: 1.6
+  color: color.muted
+}
+
+// ------------------------------------------------------------------- cta
+
+.cta-band {
+  text-align: center
+  padding: space.8 space.4
+  radius: xl
+  background:
+    radial-gradient(ellipse at 30% 0%, color.accent/14, transparent 55%),
+    radial-gradient(ellipse at 75% 100%, color.accent/10, transparent 50%),
+    color.card
+  border: 1 solid color.line
+  column: gap space.4
+  align-items: center
+}
+
+.cta-band h2 {
+  fluid: 28, 40
+  font-weight: 800
+  letter-spacing: -0.03em
+  margin: 0
+}
+
+.cta-band p {
+  color: color.muted
+  max-width: 520
+  line-height: 1.65
+  margin: 0
+}
+
+.cta-band .hero-ctas {
+  justify-content: center
+}

public/styles/playground.dssl

@@ -0,0 +1,180 @@
+// =========================================================================
+// playground.dssl — the live editor view
+// =========================================================================
+
+.pg-layout {
+  display: grid
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
+  gap: space.4
+  align-items: stretch
+}
+
+@media (width <= 940) {
+  .pg-layout {
+    grid-template-columns: 1fr
+  }
+}
+
+.pg-pane {
+  background: color.card
+  border: 1 solid color.line
+  radius: lg
+  overflow: hidden
+  display: flex
+  flex-direction: column
+  min-height: 560
+}
+
+.pg-head {
+  row: gap 8 between
+  align: center
+  padding: 10 14
+  border-bottom: 1 solid color.line
+  font-family: font.mono
+  font-size: 12
+  color: color.muted
+  background: color.card
+}
+
+.pg-head-tools {
+  row: gap 8 center
+}
+
+.pg-select {
+  font-family: font.mono
+  font-size: 12
+  background: color.card
+  color: color.ink
+  border: 1 solid color.line
+  radius: sm
+  padding: 5 8
+  cursor: pointer
+}
+
+.pg-editor {
+  flex: 1
+  width: 100%
+  min-height: 420
+  border: none
+  outline: none
+  resize: vertical
+  background: color.code-bg
+  color: color.code-ink
+  font-family: font.mono
+  font-size: 13
+  line-height: 1.7
+  padding: space.4
+  tab-size: 2
+  white-space: pre
+  overflow-wrap: normal
+  overflow-x: auto
+}
+
+.pg-canvas-wrap {
+  flex: 1
+  display: flex
+  flex-direction: column
+  min-height: 420
+}
+
+.pg-canvas {
+  flex: 1
+  padding: space.5
+  background:
+    conic-gradient(color.line/30 25%, transparent 0 50%, color.line/30 0 75%, transparent 0)
+  background-size: 18 18
+  overflow: auto
+}
+
+.pg-canvas-title {
+  font-family: font.mono
+  font-size: 11
+  color: color.muted
+  letter-spacing: 0.1em
+  text-transform: uppercase
+  margin: 0 0 space.3
+}
+
+.pg-status {
+  row: gap 8 center
+  padding: 8 14
+  font-family: font.mono
+  font-size: 12
+  border-top: 1 solid color.line
+  background: color.card
+  color: color.muted
+}
+
+.pg-status-ok { color: color.ok }
+.pg-status-err { color: color.err }
+
+.pg-errors {
+  column: gap 8
+  padding: 12 14
+  background: color.err/6
+  border-top: 1 solid color.err/25
+  max-height: 240
+  overflow-y: auto
+  scrollbar-width: thin
+}
+
+.pg-error {
+  font-family: font.mono
+  font-size: 12.5
+  color: color.err
+  line-height: 1.55
+  column: gap 2
+}
+
+.pg-error-hint {
+  color: color.muted
+  font-size: 12
+}
+
+.pg-error-hint em {
+  color: color.ok
+  font-style: normal
+  font-weight: 600
+}
+
+// playground canvas starts empty — that's the point.
+// The hint below shows only while nothing has been matched yet.
+.pg-hint {
+  place-self: center
+  text-align: center
+  color: color.muted
+  font-size: 14
+  line-height: 1.7
+  max-width: 380
+  padding: space.5
+  border: 1 dashed color.line
+  radius: md
+  background: color.card/70
+}
+
+.pg-hint code {
+  font-family: font.mono
+  color: color.accent
+  font-size: 13
+}
+
+// stat chips under the editor
+.pg-stats {
+  row: gap 8
+  flex-wrap: wrap
+}
+
+.stat-chip {
+  font-family: font.mono
+  font-size: 11.5
+  color: color.muted
+  border: 1 solid color.line
+  background: color.card
+  radius: full
+  padding: 4 10
+}
+
+.stat-chip b {
+  color: color.ink
+  font-weight: 700
+}

public/styles/site.dssl

@@ -0,0 +1,472 @@
+// =========================================================================
+// site.dssl — chrome shared by every view of the DSSL site
+// =========================================================================
+
+html {
+  font-family: font.sans
+  -webkit-font-smoothing: antialiased
+  scroll-behavior: smooth
+}
+
+body {
+  background: color.paper
+  color: color.ink
+}
+
+::selection {
+  background: color.accent/22
+}
+
+// accessibility: one behavior, used everywhere
+behavior focus-ring {
+  focus-visible {
+    outline: 2 solid color.accent
+    outline-offset: 2
+    radius: 4
+  }
+}
+
+a { use focus-ring }
+button { use focus-ring }
+input { use focus-ring }
+textarea { use focus-ring }
+select { use focus-ring }
+[tabindex] { use focus-ring }
+
+// ---------------------------------------------------------------- layout
+
+.site {
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+}
+
+.wrap {
+  width: 100%
+  max-width: 1140
+  margin: 0 auto
+  padding: 0 space.5
+}
+
+.main {
+  flex: 1
+}
+
+// ------------------------------------------------------------------ nav
+
+.nav {
+  position: sticky
+  top: 0
+  z: 50
+  background: color.paper/82
+  backdrop-filter: blur(14) saturate(1.5)
+  border-bottom: 1 solid color.line
+  transition: 200
+}
+
+.nav-inner {
+  row: gap space.4 between
+  height: 64
+  align: center
+}
+
+.nav-logo {
+  row: gap 2 center
+  font-weight: 800
+  font-size: 21
+  letter-spacing: -0.02em
+  color: color.ink
+  transition: 120
+}
+
+.logo-mark {
+  font-family: font.mono
+  color: color.accent
+  font-weight: 700
+  margin-right: 6
+}
+
+.nav-links {
+  row: gap 4 center
+}
+
+.nav-link {
+  padding: 8 13
+  radius: sm
+  color: color.muted
+  font-size: 14.5
+  font-weight: 550
+  transition: 130
+}
+
+.nav-link:hover {
+  color: color.ink
+  background: color.line/60
+}
+
+// active view highlighting via a data attribute on <main> — no JS needed
+[data-view="home"] .nl-home,
+[data-view="docs"] .nl-docs,
+[data-view="spec"] .nl-spec,
+[data-view="playground"] .nl-playground,
+[data-view="changelog"] .nl-changelog {
+  color: color.accent
+  background: color.accent/10
+}
+
+.nav-side {
+  row: gap 8 center
+}
+
+.theme-btn {
+  circle: 36
+  place: center
+  color: color.muted
+  transition: 150
+  border: 1 solid color.line
+}
+
+.theme-btn:hover {
+  color: color.ink
+  background: color.line/70
+  translate: 0 -1px
+}
+
+// icon switching driven by an html attribute — the engine re-styles on
+// attribute mutations, so the toggle needs zero style manipulation in JS
+html[data-theme-mode="dark"] .icon-sun { display: none }
+html[data-theme-mode="light"] .icon-moon { display: none }
+html:not([data-theme-mode="dark"]):not([data-theme-mode="light"]) .theme-btn {
+  border-style: dashed
+}
+
+.ver-badge {
+  font-family: font.mono
+  font-size: 11.5
+  color: color.muted
+  border: 1 solid color.line
+  radius: full
+  padding: 4 10
+  background: color.card/60
+}
+
+.nav-toggle { display: none }
+
+@media (width <= 860) {
+  .nav-toggle {
+    display: grid
+    place: center
+    size: 36
+    radius: sm
+    color: color.muted
+    border: 1 solid color.line
+    transition: 130
+  }
+  .nav-toggle:hover { color: color.ink; background: color.line/60 }
+
+  .nav-links {
+    display: none
+    position: absolute
+    top: 64
+    left: 0
+    right: 0
+    column: gap 2
+    padding: space.3 space.5 space.4
+    background: color.paper
+    border-bottom: 1 solid color.line
+    box-shadow: shadow.lg
+  }
+
+  @signal nav == open {
+    .nav-links { display: flex }
+  }
+}
+
+// ---------------------------------------------------------------- buttons
+
+.btn {
+  row: gap 8 center
+  padding: 11 20
+  radius: md
+  font-weight: 620
+  font-size: 15
+  transition: 160
+  cursor: pointer
+  border: 1 solid transparent
+  user-select: none
+  line-height: 1.2
+}
+
+.btn-primary {
+  background: color.accent
+  color: color.accent-ink
+  shadow: sm
+}
+
+.btn-primary:hover {
+  translate: 0 -2px
+  shadow: md
+}
+
+.btn-primary:active {
+  translate: 0 0
+  shadow: sm
+  transition: 60
+}
+
+.btn-ghost {
+  border-color: color.line
+  color: color.ink
+  background: color.card/40
+}
+
+.btn-ghost:hover {
+  background: color.line/45
+  translate: 0 -2px
+  shadow: sm
+}
+
+.btn-sm {
+  padding: 8 14
+  font-size: 13.5
+  radius: sm
+}
+
+// ------------------------------------------------------------------ cards
+
+.card {
+  background: color.card
+  border: 1 solid color.line
+  radius: lg
+  transition: 180
+}
+
+.card-hover:hover {
+  translate: 0 -3px
+  shadow: lg
+  border-color: color.accent/35
+}
+
+.kicker {
+  font-family: font.mono
+  font-size: 12.5
+  font-weight: 600
+  color: color.accent
+  letter-spacing: 0.14em
+  text-transform: uppercase
+  row: gap 8 center
+}
+
+.kicker::before {
+  content: "//"
+  color: color.accent/55
+}
+
+.section {
+  padding: space.8 0
+}
+
+.section-title {
+  font-size: 30
+  font-weight: 750
+  letter-spacing: -0.025em
+  margin: space.2 0 space.3
+}
+
+.section-sub {
+  color: color.muted
+  font-size: 16.5
+  line-height: 1.65
+  max-width: 640
+}
+
+// -------------------------------------------------------------- code block
+
+.code {
+  background: color.code-bg
+  color: color.code-ink
+  radius: md
+  padding: space.4
+  font-family: font.mono
+  font-size: 13
+  line-height: 1.75
+  overflow-x: auto
+  tab-size: 2
+  border: 1 solid color.code-line/60
+}
+
+.code code {
+  font-family: font.mono
+}
+
+.code-head {
+  row: gap 8 between
+  align: center
+  padding: 10 space.4
+  background: color.code-bg
+  border: 1 solid color.code-line/60
+  border-bottom: none
+  radius: md md 0 0
+  font-family: font.mono
+  font-size: 12
+  color: color.code-com
+}
+
+.code-head + .code {
+  radius: 0 0 md md
+}
+
+.code-plain {
+  radius: md
+}
+
+.copy-btn {
+  color: color.code-com
+  font-size: 11.5
+  row: gap 6 center
+  padding: 4 10
+  radius: full
+  border: 1 solid color.code-line
+  transition: 130
+  cursor: pointer
+  font-family: font.mono
+}
+
+.copy-btn:hover {
+  color: color.code-ink
+  border-color: color.code-com
+}
+
+// syntax token colors (spans produced by the site's tiny highlighter)
+.tok-com { color: color.code-com; font-style: italic }
+.tok-sel { color: color.code-sel }
+.tok-prop { color: color.code-prop }
+.tok-at { color: color.code-key; font-weight: 600 }
+.tok-state { color: color.code-key }
+.tok-num { color: color.code-num }
+.tok-str { color: color.code-str }
+.tok-val { color: color.code-ink }
+.tok-punct { color: color.code-com }
+.tok-use { color: color.code-num }
+
+// ------------------------------------------------------------------ prose
+
+.prose {
+  max-width: 780
+}
+
+.prose p {
+  margin: 0 0 space.4
+  line-height: 1.8
+  color: color.ink/88
+  font-size: 16
+}
+
+.prose p:last-child { margin-bottom: 0 }
+
+.prose h2 {
+  font-size: 26
+  font-weight: 750
+  letter-spacing: -0.02em
+  margin: space.7 0 space.3
+  scroll-margin-top: 88
+}
+
+.prose h3 {
+  font-size: 19
+  font-weight: 700
+  margin: space.5 0 space.2
+  scroll-margin-top: 88
+}
+
+.prose ul {
+  margin: 0 0 space.4
+  column: gap 8
+  padding: 0
+}
+
+.prose li {
+  padding-left: 18
+  position: relative
+  line-height: 1.7
+  color: color.ink/88
+  font-size: 15.5
+}
+
+.prose li::before {
+  content: ""
+  position: absolute
+  left: 0
+  top: 9
+  size: 6
+  circle: 6
+  background: color.accent
+}
+
+.prose strong {
+  font-weight: 700
+  color: color.ink
+}
+
+.prose code {
+  font-family: font.mono
+  font-size: 0.86em
+  background: color.accent/10
+  color: color.accent
+  padding: 2 6
+  radius: 6
+}
+
+.prose .code code {
+  background: transparent
+  color: inherit
+  padding: 0
+}
+
+.inline-tag {
+  font-family: font.mono
+  font-size: 12
+  background: color.accent/10
+  color: color.accent
+  border: 1 solid color.accent/25
+  padding: 2 8
+  radius: full
+}
+
+// ----------------------------------------------------------------- footer
+
+.footer {
+  margin-top: auto
+  border-top: 1 solid color.line
+  padding: space.6 0 space.5
+  background: color.card/40
+}
+
+.footer-inner {
+  row: gap space.4 between
+  align: center
+}
+
+.footer-note {
+  color: color.muted
+  font-size: 13.5
+  line-height: 1.6
+}
+
+.footer-links {
+  row: gap 4 center
+}
+
+// -------------------------------------------------------------- utilities
+
+@layer utilities {
+  .visually-hidden {
+    position: absolute
+    width: 1
+    height: 1
+    overflow: hidden
+    clip-path: inset(50%)
+    white-space: nowrap
+  }
+  .mt-0 { margin-top: 0 }
+}

public/styles/tokens.dssl

@@ -0,0 +1,104 @@
+// =========================================================================
+// tokens.dssl — DSSL's own design tokens
+// The dark palette lives in a behavior and is `use`d by both the system
+// preference and the manual theme signal — define once, apply twice.
+// =========================================================================
+
+tokens {
+  color {
+    paper: #faf8f4
+    card: #ffffff
+    ink: #1a1721
+    muted: #6d6680
+    line: #e9e3d9
+    accent: oklch(0.58 0.19 33)
+    accent-ink: #fff6ee
+    ok: #2e7d4f
+    err: #b3372e
+    code-bg: #211d2b
+    code-ink: #ece9f4
+    code-line: #37314a
+    code-key: #f2a86c
+    code-sel: #8fd0b2
+    code-prop: #9ec1f0
+    code-str: #d8b16e
+    code-num: #d8a0df
+    code-com: #857d9c
+  }
+  radius {
+    sm: 8
+    md: 14
+    lg: 20
+    xl: 28
+    full: 999
+  }
+  shadow {
+    sm: 0 1 2 color.ink/8, 0 1 3 color.ink/6
+    md: 0 2 4 color.ink/10, 0 4 14 color.ink/8
+    lg: 0 4 8 color.ink/12, 0 14 36 color.ink/12
+  }
+}
+
+// ---- dark palette (shared) ---------------------------------------------
+
+behavior palette-dark {
+  tokens {
+    color {
+      paper: #14111c
+      card: #1d1927
+      ink: #edeaf6
+      muted: #a29ab8
+      line: #2c2739
+      accent: oklch(0.72 0.15 45)
+      accent-ink: #241304
+      ok: #6fc793
+      err: #e5766a
+      code-bg: #100e18
+      code-ink: #e4e0f0
+      code-line: #292438
+      code-key: #f2a86c
+      code-sel: #8fd0b2
+      code-prop: #9ec1f0
+      code-str: #d8b16e
+      code-num: #d8a0df
+      code-com: #6f6885
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  use palette-dark
+}
+
+@signal theme == dark {
+  use palette-dark
+}
+
+@signal theme == light {
+  use palette-light
+}
+
+behavior palette-light {
+  tokens {
+    color {
+      paper: #faf8f4
+      card: #ffffff
+      ink: #1a1721
+      muted: #6d6680
+      line: #e9e3d9
+      accent: oklch(0.58 0.19 33)
+      accent-ink: #fff6ee
+      ok: #2e7d4f
+      err: #b3372e
+      code-bg: #211d2b
+      code-ink: #ece9f4
+      code-line: #37314a
+      code-key: #f2a86c
+      code-sel: #8fd0b2
+      code-prop: #9ec1f0
+      code-str: #d8b16e
+      code-num: #d8a0df
+      code-com: #857d9c
+    }
+  }
+}

scripts/dssl-smoke.mjs

@@ -0,0 +1,131 @@
+// Smoke test for the DSSL compiler (parser + resolver, no DOM)
+import { parse } from '../public/dssl/parser.js';
+import { resolve } from '../public/dssl/resolver.js';
+
+const sample = `
+// tokens + defaults override
+tokens {
+  color {
+    ink: #16161d
+    paper: #faf7f2
+    accent: oklch(62% 0.19 35)
+  }
+  radius {
+    sm: 8
+    md: 14
+  }
+}
+
+behavior focus-ring {
+  focus-visible {
+    outline: 2 solid color.accent
+    outline-offset: 2
+  }
+}
+
+motion rise-in {
+  from {
+    opacity: 0
+    translate: 0 12
+  }
+}
+
+.card {
+  background: color.card
+  padding: space.4
+  radius: md
+  shadow: md
+  transition: 150 snap
+  font: 16/1.5 color.ink
+  use focus-ring
+  animate: rise-in 400 snap both
+
+  .title {
+    font-weight: 700
+    color: color.ink/80
+  }
+
+  hover {
+    translate: 0 -2px
+    shadow: lg
+
+    .tip { opacity: 1 }
+  }
+
+  ::before {
+    content: ""
+    background: color.accent
+  }
+}
+
+gallery {
+  grid: auto-fill 220
+  gap: space.4
+}
+
+@media (width >= 768) {
+  .card { padding: space.6 }
+}
+
+@signal theme == dark {
+  tokens { color { paper: #14121a } }
+  .card { background: color.card }
+}
+
+@layer utilities {
+  .mt-0 { margin-top: 0 }
+}
+
+pin { .hero-title { color: red } }
+
+// deliberate errors below (should produce did-you-mean hints):
+.badge {
+  colour: red
+  background: color.acnt
+  flex-direction: banana
+}
+`;
+
+const { ast, errors: parseErrors } = parse(sample, 'smoke.dssl');
+console.log('parse errors:', parseErrors.length);
+for (const e of parseErrors) console.log(`  PARSE line ${e.line}: ${e.message}${e.hint ? `  (${e.hint})` : ''}`);
+const doc = resolve(ast, 'smoke.dssl');
+
+console.log('--- resolve errors:', doc.errors.length);
+for (const e of doc.errors) console.log(`  line ${e.line}: ${e.message}${e.hint ? `  (did you mean "${e.hint}"?)` : ''}`);
+
+console.log('--- rules:', doc.rules.length, ' shadowRules:', doc.shadowRules.length);
+for (const r of doc.rules) {
+  const conds = [
+    r.media.length ? `@media[${r.media.join(' ')}]` : '',
+    r.signals.length ? `@signal[${r.signals.map(s => s.name + s.op + s.value).join(' ')}]` : '',
+  ].filter(Boolean).join(' ');
+  console.log(`  #${r.id} L${r.layer} ord${r.order} ${conds} ${r.sel}  ->  ${r.decls.map(d => d.prop).join(', ')}`);
+}
+console.log('--- shadow rules:');
+for (const s of doc.shadowRules) console.log(`  ${s.sel}::${s.pseudo} -> ${s.decls.map(d => d.prop + ':' + d.value).join('; ')}`);
+console.log('--- media queries:', doc.mediaQueries.join(' | '));
+console.log('--- sample token values:');
+for (const k of ['color.ink', 'space.4', 'radius.sm', 'font.sans']) console.log('  ', k, '=', doc.tokens[k]);
+
+// sanity asserts
+const assert = (cond, msg) => { if (!cond) { console.error('ASSERT FAIL:', msg); process.exitCode = 1; } };
+assert(parseErrors.length === 0, 'no parse errors');
+assert(doc.errors.length >= 3, 'expected at least 3 resolver errors (typos)');
+assert(doc.errors.some(e => e.hint === 'color'), 'did-you-mean for color.acnt -> color');
+assert(doc.errors.some(e => e.message.includes('banana')), 'unknown value error for flex-direction: banana');
+const cardRule = doc.rules.find(r => r.sel === '.card');
+assert(cardRule, '.card rule exists');
+assert(cardRule.decls.some(d => d.prop === 'background' && d.value.includes('var(--dssl-color-card)')), 'background resolved to var');
+assert(cardRule.decls.some(d => d.prop === 'padding' && d.value.includes('var(--dssl-space-4)')), 'space.4 resolved to var ref');
+assert(cardRule.decls.some(d => d.prop === '@animate' && d.value.frames && d.value.frames.length === 1), 'animate wired with frames');
+assert(doc.rules.some(r => r.sel === '.card:focus-visible'), 'behavior expanded into state selector');
+assert(doc.rules.some(r => r.sel === '.card:hover .tip'), 'nested state descendant composed');
+assert(doc.rules.some(r => r.sel === ':root' && r.signals.length === 1), 'signal token override rule');
+assert(doc.rules.some(r => r.layer === 'utilities' && r.sel === '.mt-0'), 'layer assignment');
+assert(doc.rules.some(r => r.layer === 'pin' && r.sel === '.hero-title'), 'pin layer');
+assert(doc.rules.some(r => r.sel === 'gallery' && r.decls.some(d => String(d.value).includes('minmax(220px'))), 'grid sugar');
+assert(doc.rules.some(r => r.sel === '.card' && r.media.length === 1), 'media rule for .card');
+const shadow = doc.shadowRules.find(s => s.pseudo === 'before');
+assert(shadow && shadow.decls.some(d => d.prop === 'content' && d.value === '""'), 'content autoclosed');
+console.log(process.exitCode ? 'SMOKE TEST FAILED' : 'SMOKE TEST OK');

scripts/dssl-styles-check.mjs

@@ -0,0 +1,28 @@
+// Compile the real site stylesheets through the DSSL compiler,
+// sharing a token registry exactly like the runtime does (tokens.dssl first).
+import { readFileSync, readdirSync } from 'fs';
+import { parse } from '../public/dssl/parser.js';
+import { resolve, DEFAULT_TOKENS } from '../public/dssl/resolver.js';
+
+const dir = new URL('../public/styles/', import.meta.url).pathname;
+const order = ['tokens.dssl', 'site.dssl', 'home.dssl', 'docs.dssl', 'playground.dssl', 'changelog.dssl'];
+const files = readdirSync(dir).filter(f => f.endsWith('.dssl'));
+const sorted = order.filter(f => files.includes(f)).concat(files.filter(f => !order.includes(f)));
+const registry = new Map(Object.entries(DEFAULT_TOKENS));
+let failed = false;
+
+for (const f of sorted) {
+  const src = readFileSync(dir + f, 'utf8');
+  const { ast, errors: perrs } = parse(src, f);
+  const doc = resolve(ast, f, Object.fromEntries(registry));
+  for (const [k, v] of Object.entries(doc.tokens)) registry.set(k, v);
+  const errs = [...perrs, ...doc.errors];
+  console.log(`\n=== ${f}: ${doc.rules.length} rules, ${doc.shadowRules.length} shadow, ${errs.length} error(s)`);
+  for (const e of errs) {
+    failed = true;
+    console.log(`   line ${e.line}: ${e.message}${e.hint ? `  (did you mean "${e.hint}"?)` : ''}`);
+  }
+}
+
+console.log(failed ? '\nSTYLESHEET CHECK FAILED' : '\nSTYLESHEET CHECK OK');
+process.exitCode = failed ? 1 : 0;

src/app/api/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello, world!" });
+}

src/app/globals.css

@@ -0,0 +1,2 @@
+/* This app is styled by DSSL (public/styles/*.dssl), not by CSS.
+   This file is intentionally empty. */

src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "DSSL — Domain Specific Style Language",
+  description:
+    "DSSL is a styling language for the web: design tokens, its own cascade, loud errors and zero specificity wars. Ships as a ~20 kB engine, no build step.",
+  keywords: ["DSSL", "CSS alternative", "style language", "design tokens", "web"],
+  icons: { icon: "/favicon.svg" },
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
+// The ONLY non-DSSL styling in this app: a pre-paint shim so the very first
+// frame doesn't flash white before the DSSL engine boots (dark-mode respect).
+const prePaint = `
+  html { background: #faf8f4; }
+  @media (prefers-color-scheme: dark) { html { background: #14111c; } }
+`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" data-dssl-reset suppressHydrationWarning>
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: prePaint }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,5 @@
+import SiteRoot from "@/components/dssl/SiteRoot";
+
+export default function Home() {
+  return <SiteRoot />;
+}

src/components/dssl/CodeBlock.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import { highlightDssl } from "./highlight";
+import { CheckIcon, CopyIcon } from "./icons";
+
+export default function CodeBlock({
+  code,
+  file,
+  plain = false,
+}: {
+  code: string;
+  file?: string;
+  plain?: boolean;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1400);
+    } catch { /* clipboard unavailable */ }
+  };
+
+  const body = (
+    <pre className={`code${plain ? " code-plain" : ""}`}>
+      <code dangerouslySetInnerHTML={{ __html: highlightDssl(code) }} />
+    </pre>
+  );
+
+  if (!file) return body;
+
+  return (
+    <div>
+      <div className="code-head">
+        <span>{file}</span>
+        <button type="button" className="copy-btn" onClick={copy} aria-label="Copy code">
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? "copied" : "copy"}
+        </button>
+      </div>
+      {body}
+    </div>
+  );
+}

src/components/dssl/SiteRoot.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import HomeView from "./views/HomeView";
+import DocsView from "./views/DocsView";
+import SpecView from "./views/SpecView";
+import PlaygroundView from "./views/PlaygroundView";
+import ChangelogView from "./views/ChangelogView";
+import { SunIcon, MoonIcon, MenuIcon } from "./icons";
+
+export type ViewName = "home" | "docs" | "spec" | "playground" | "changelog";
+
+const VIEWS: { name: ViewName; label: string }[] = [
+  { name: "home", label: "Home" },
+  { name: "docs", label: "Docs" },
+  { name: "spec", label: "Spec" },
+  { name: "playground", label: "Playground" },
+  { name: "changelog", label: "Changelog" },
+];
+
+function viewFromHash(): ViewName {
+  const h = window.location.hash;
+  const m = h.match(/^#\/(\w+)/);
+  const name = m?.[1] as ViewName | undefined;
+  return name && VIEWS.some(v => v.name === name) ? name : "home";
+}
+
+const subscribeHash = (cb: () => void) => {
+  window.addEventListener("hashchange", cb);
+  return () => window.removeEventListener("hashchange", cb);
+};
+
+declare global {
+  interface Window {
+    DSSL?: {
+      load: (urls: string[], opts?: { reset?: boolean }) => Promise<unknown>;
+      apply: (src: string, opts?: { name?: string; scope?: string; replace?: boolean }) => DsslApplyResult;
+      compile?: (src: string) => DsslApplyResult;
+      signal: (n: string, v: string | null) => void;
+      getSignal?: (n: string) => string | undefined;
+      replay: (sel?: string) => void;
+      refresh: () => void;
+      version: string;
+    };
+  }
+}
+
+export interface DsslError {
+  file?: string;
+  line?: number;
+  message: string;
+  hint?: string;
+}
+
+export interface DsslApplyResult {
+  ok: boolean;
+  errors: DsslError[];
+  stats: { rules: number; shadowRules: number; motions: number; tokens: number; mediaQueries: number };
+}
+
+export default function SiteRoot() {
+  // the view IS the hash — derived, never stored twice
+  const view = useSyncExternalStore(
+    subscribeHash,
+    viewFromHash,
+    () => "home" as ViewName,
+  );
+  const [dsslReady, setDsslReady] = useState(false);
+
+  // ---- boot the DSSL engine (once) ----
+  useEffect(() => {
+    if (window.DSSL) {
+      const t = setTimeout(() => setDsslReady(true), 0);
+      return () => clearTimeout(t);
+    }
+    const existing = document.getElementById("dssl-engine-script");
+    const onReady = () => setDsslReady(true);
+    window.addEventListener("dssl-ready", onReady);
+    if (!existing) {
+      const s = document.createElement("script");
+      s.id = "dssl-engine-script";
+      s.type = "module";
+      s.src = "/dssl/boot.js";
+      document.head.appendChild(s);
+    }
+    return () => window.removeEventListener("dssl-ready", onReady);
+  }, []);
+
+  // ---- apply the stylesheets (once the engine is up) ----
+  useEffect(() => {
+    if (!dsslReady || !window.DSSL) return;
+    void window.DSSL.load([
+      "/styles/tokens.dssl",
+      "/styles/site.dssl",
+      "/styles/home.dssl",
+      "/styles/docs.dssl",
+      "/styles/playground.dssl",
+      "/styles/changelog.dssl",
+    ]);
+  }, [dsslReady]);
+
+  // ---- hash router: view IS the hash (bare anchors like #tokens don't re-route) ----
+
+  const go = useCallback((v: ViewName) => {
+    window.location.hash = v === "home" ? "" : `#/${v}`;
+    window.DSSL?.signal("nav", null); // close the mobile sheet
+    window.scrollTo({ top: 0, behavior: "instant" as ScrollBehavior });
+  }, []);
+
+  const cycleTheme = useCallback(() => {
+    if (!window.DSSL) return;
+    const cur = document.documentElement.getAttribute("data-theme-mode");
+    const next = cur === "light" ? "dark" : cur === "dark" ? null : "light";
+    if (next) {
+      document.documentElement.setAttribute("data-theme-mode", next);
+      window.DSSL.signal("theme", next);
+    } else {
+      document.documentElement.removeAttribute("data-theme-mode");
+      window.DSSL.signal("theme", null); // back to "auto" (system preference)
+    }
+  }, []);
+
+  const toggleNav = useCallback(() => {
+    const open = window.DSSL?.getSignal?.("nav") === "open";
+    window.DSSL?.signal("nav", open ? null : "open");
+  }, []);
+
+  return (
+    <div className="site">
+      <header className="nav">
+        <div className="wrap nav-inner">
+          <a href="#/" className="nav-logo" onClick={(e) => { e.preventDefault(); go("home"); }}>
+            <span className="logo-mark">{"//"}</span>
+            DSSL
+          </a>
+
+          <nav className="nav-links" aria-label="Main">
+            {VIEWS.map(v => (
+              <a
+                key={v.name}
+                href={`#/${v.name}`}
+                className={`nav-link nl-${v.name}`}
+                onClick={(e) => { e.preventDefault(); go(v.name); }}
+              >
+                {v.label}
+              </a>
+            ))}
+          </nav>
+
+          <div className="nav-side">
+            <span className="ver-badge">v0.2.0</span>
+            <button type="button" className="theme-btn" onClick={cycleTheme} aria-label="Toggle color theme" title="Theme: auto / light / dark">
+              <span className="icon-sun"><SunIcon /></span>
+              <span className="icon-moon"><MoonIcon /></span>
+            </button>
+            <button type="button" className="nav-toggle" onClick={toggleNav} aria-label="Toggle menu">
+              <MenuIcon />
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <main className="main" data-view={view}>
+        {view === "home" && <HomeView go={go} />}
+        {view === "docs" && <DocsView />}
+        {view === "spec" && <SpecView />}
+        {view === "playground" && <PlaygroundView />}
+        {view === "changelog" && <ChangelogView />}
+      </main>
+
+      <footer className="footer">
+        <div className="wrap footer-inner">
+          <div className="footer-note">
+            <strong>DSSL</strong> — domain specific style language. Built v0.1 → v0.2 while
+            building this site; every feature it needed, it grew. This page runs on its own
+            engine, no stylesheet attached.
+          </div>
+          <nav className="footer-links" aria-label="Footer">
+            {VIEWS.map(v => (
+              <a key={v.name} href={`#/${v.name}`} className="nav-link" onClick={(e) => { e.preventDefault(); go(v.name); }}>
+                {v.label}
+              </a>
+            ))}
+          </nav>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/components/dssl/highlight.ts

@@ -0,0 +1,87 @@
+// A ~40-line DSSL syntax highlighter for code samples.
+// Emits <span class="tok-*"> markup; colors come from DSSL itself (site.dssl).
+
+const escapeHtml = (s: string) =>
+  s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+const STATES = new Set([
+  "hover", "focus", "focus-visible", "active", "disabled", "checked", "empty",
+  "target", "invalid", "valid", "required", "open", "placeholder-shown",
+]);
+
+export function highlightDssl(src: string): string {
+  const lines = src.split("\n");
+  const out: string[] = [];
+
+  for (const line of lines) {
+    let html = "";
+    let i = 0;
+    const n = line.length;
+
+    while (i < n) {
+      const rest = line.slice(i);
+
+      // comments
+      const com = rest.match(/^\/\/.*/);
+      if (com) { html += `<span class="tok-com">${escapeHtml(com[0])}</span>`; break; }
+
+      const ws = rest.match(/^\s+/);
+      if (ws) { html += ws[0]; i += ws[0].length; continue; }
+
+      // strings
+      const str = rest.match(/^"[^"]*"|^'[^']*'/);
+      if (str) { html += `<span class="tok-str">${escapeHtml(str[0])}</span>`; i += str[0].length; continue; }
+
+      // at-rules
+      const at = rest.match(/^@[a-z-]+/);
+      if (at) { html += `<span class="tok-at">${escapeHtml(at[0])}</span>`; i += at[0].length; continue; }
+
+      // numbers with optional unit
+      const num = rest.match(/^-?\d*\.?\d+(?:[a-z%]+)?/);
+      if (num) { html += `<span class="tok-num">${escapeHtml(num[0])}</span>`; i += num[0].length; continue; }
+
+      // use keyword
+      const use = rest.match(/^use\s+[\w-]+/);
+      if (use) { html += `<span class="tok-use">${escapeHtml(use[0])}</span>`; i += use[0].length; continue; }
+
+      // identifiers (may contain dots for token refs)
+      const id = rest.match(/^--?[A-Za-z_][\w.\\-]*/);
+      if (id) {
+        const word = id[0];
+        const after = line.slice(i + word.length).trimStart();
+        const isBlock = after.startsWith("{");
+        const isState = STATES.has(word);
+        const isHeader = isBlock && !word.includes(".") && !word.startsWith("-") && !word.startsWith("&");
+        if (isState) html += `<span class="tok-state">${escapeHtml(word)}</span>`;
+        else if (word.startsWith("--")) html += `<span class="tok-num">${escapeHtml(word)}</span>`;
+        else if (isHeader) html += `<span class="tok-sel">${escapeHtml(word)}</span>`;
+        else {
+          // declaration property vs bare value identifier (like `pin` or a selector fragment)
+          const colonNext = /^[\w.\\-]*\s*:/.test(rest) && !after.startsWith(":");
+          const looksProp = /^[a-z][a-z0-9-]*$/i.test(word) && /^\s*:/.test(line.slice(i + word.length));
+          html += `<span class="${looksProp || colonNext && looksProp ? "tok-prop" : isBlock ? "tok-sel" : "tok-val"}">${escapeHtml(word)}</span>`;
+        }
+        i += word.length;
+        continue;
+      }
+
+      // pseudo classes in selectors
+      const pseudo = rest.match(/^::?[a-z-]+/);
+      if (pseudo) { html += `<span class="tok-state">${escapeHtml(pseudo[0])}</span>`; i += pseudo[0].length; continue; }
+
+      // punctuation
+      const punct = rest.match(/^[{}:,()[\]&*>~+.#/-]+/);
+      if (punct) {
+        const cls = punct[0].startsWith(".") || punct[0].startsWith("#") ? "tok-sel" : "tok-punct";
+        html += `<span class="${cls}">${escapeHtml(punct[0])}</span>`;
+        i += punct[0].length;
+        continue;
+      }
+
+      html += escapeHtml(line[i]);
+      i++;
+    }
+    out.push(html);
+  }
+  return out.join("\n");
+}

src/components/dssl/icons.tsx

@@ -0,0 +1,58 @@
+// Tiny inline icon set (no icon library needed — DSSL styles the rest)
+export function SunIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+    </svg>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
+    </svg>
+  );
+}
+
+export function MenuIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <path d="M4 7h16M4 12h16M4 17h16" />
+    </svg>
+  );
+}
+
+export function ArrowIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M5 12h14M13 6l6 6-6 6" />
+    </svg>
+  );
+}
+
+export function CopyIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <rect x="9" y="9" width="12" height="12" rx="2" />
+      <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+    </svg>
+  );
+}
+
+export function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export function PlayIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M8 5.5v13l11-6.5-11-6.5Z" />
+    </svg>
+  );
+}

src/components/dssl/views/ChangelogView.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import CodeBlock from "../CodeBlock";
+
+const ENTRIES: {
+  version: string;
+  date: string;
+  title: string;
+  why?: string;
+  body: string;
+  code?: string;
+  kind?: "spec" | "vote" | "add";
+}[] = [
+  {
+    version: "v0.1",
+    date: "phase 1 · draft",
+    title: "“First Light” draft published",
+    kind: "spec",
+    body:
+      "The full language spec goes up for review: thesis (CSS talks to the engine, DSSL talks to the design), tokens, one-cascade-sentence, semantic properties, behaviors, motion, signals, loud errors — and a deliberate list of what v0.1 would NOT do.",
+  },
+  {
+    version: "v0.1 → v0.2",
+    date: "phase 1 · ratification",
+    title: "Seven votes, seven decisions",
+    kind: "vote",
+    body:
+      "Braces over indentation. Own engine over compile-to-CSS (the bold pick). Bare numbers are px. Cascade: layers + order, no specificity, no !important. Moderate vocabulary. CSS-shaped conditions (@media, nested state blocks — plus @signal as the JS bridge). Docs site shape. The spec was amended to match.",
+  },
+  {
+    version: "v0.2.0",
+    date: "build phase",
+    title: "Engine skeleton",
+    kind: "add",
+    body:
+      "parser.js → resolver.js → engine.js → index.js: the four-module runtime. Braces grammar with one-liners, flattening, behaviors, motion, scoped engines, event-delegated states, MutationObserver re-matching. ~1,000 lines, zero dependencies.",
+  },
+  {
+    version: "v0.2.1",
+    date: "build phase",
+    title: "Color-aware functions",
+    why: "tokens.dssl — the palette",
+    body:
+      "The first stylesheet broke the compiler: oklch(62% 0.19 35) had its chroma and hue gaining phantom px. Bare numbers inside color functions (oklch, rgb, color-mix, cubic-bezier, steps…) must stay bare; calc-family keeps px.",
+    code: `// before: oklch(62% 0.19px 35px)  ← nonsense
+accent: oklch(62% 0.19 35)   // now: untouched`,
+  },
+  {
+    version: "v0.2.2",
+    date: "build phase",
+    title: "Color-space & gradient vocabulary",
+    why: "site.dssl — chrome",
+    body:
+      "Real stylesheets say “in oklab”, “to bottom right”, “flex-end”, “thin”, “collapse”, “vertical”. The keyword pass-list grew from ~200 to ~260 words. Loud errors need a generous dictionary.",
+  },
+  {
+    version: "v0.2.3",
+    date: "build phase",
+    title: "circle: sugar",
+    why: "theme toggle & feature icons",
+    body:
+      "size: 36 + border-radius: 50% appeared four times before anyone admitted it was one concept. circle: N sets width, height and a 50% radius.",
+    code: `.theme-btn {
+  circle: 36
+  place: center
+}`,
+  },
+  {
+    version: "v0.2.4",
+    date: "build phase",
+    title: "Multi-atom radius presets",
+    why: "code block headers",
+    body:
+      "radius: md md 0 0 — a corner-aware radius that mixes token presets with raw values, per atom. The single-atom shortcut had to become a real parser.",
+    code: `.code-head + .code {
+  radius: 0 0 md md
+}`,
+  },
+  {
+    version: "v0.2.5",
+    date: "build phase",
+    title: "Multi-line values & selector lists",
+    why: "hero gradients, nav active states",
+    body:
+      "The parser was strictly line-oriented, which died the moment a radial-gradient wanted two lines or the nav wanted a five-selector list. Logical chunks now continue while parens are open or the line ends with a top-level comma/colon.",
+    code: `background:
+  radial-gradient(ellipse at 30% 0%, color.accent/14,
+    transparent 55%),
+  color.card
+
+[data-view="home"] .nl-home,
+[data-view="docs"] .nl-docs {
+  color: color.accent
+}`,
+  },
+  {
+    version: "v0.2.6",
+    date: "build phase",
+    title: "align: property",
+    why: "nav & footer centering",
+    body:
+      "align: center → align-items: center. The one-word grid/flex alignment the vocabulary was missing.",
+  },
+  {
+    version: "v0.2.7",
+    date: "build phase",
+    title: "Top-level pseudo-elements",
+    why: "site.dssl — ::selection",
+    body:
+      "::selection at the top level now means “every element” (::selection with a * base) instead of an error.",
+  },
+  {
+    version: "v0.2.8",
+    date: "build phase",
+    title: "Shared token registry",
+    why: "every view referencing the palette",
+    body:
+      "Each bundle resolved in isolation, so color.code-bg — defined in tokens.dssl — was invisible to site.dssl. Bundles now resolve against a registry that folds in every previous bundle's tokens, in load order.",
+  },
+  {
+    version: "v0.2.9",
+    date: "build phase",
+    title: "Scoped stylesheets & scoped tokens",
+    why: "the playground",
+    body:
+      "The playground applies user code with DSSL.apply(src, { scope: '#pg-canvas', name: 'pg', replace: true }). Scoped engines keep stylesheets sandboxed, and :root rules map onto the scope element so presets can define their own tokens without touching the page.",
+    code: `DSSL.apply(src, {
+  scope: '#pg-canvas',
+  name: 'pg',
+  replace: true,
+})`,
+  },
+  {
+    version: "v0.2.11",
+    date: "browser testing",
+    title: "Stale-style cleanup",
+    why: "the theme toggle",
+    body:
+      "Cycling auto → light → dark → auto left the theme icons invisible: computeAll only enumerated elements whose rules CURRENTLY matched, so elements a rule had stopped matching were never cleaned up. The engine now keeps a registry of every element it ever styled (with mutation-driven garbage collection) and re-evaluates all of them.",
+  },
+  {
+    version: "v0.2.12",
+    date: "browser testing",
+    title: "Registry as a base bundle",
+    why: "dark mode itself",
+    body:
+      "Every stylesheet bundle re-emitted the full token map unconditionally, so site.dssl's light tokens out-cascaded tokens.dssl's @signal dark palette — dark mode silently stayed light. Bundles now emit only the tokens they actually declare, and the shared registry is installed once as a base bundle that sorts below every author rule.",
+  },
+];
+
+export default function ChangelogView() {
+  return (
+    <div className="wrap">
+      <div className="page-head">
+        <div className="kicker">built with itself</div>
+        <h1 className="page-title">Changelog</h1>
+        <p className="page-sub">
+          The deal was: build the language, then build its website, and every time the
+          website needs something the language lacks — add it, honestly. This page is
+          that list.
+        </p>
+      </div>
+
+      <div className="tl">
+        {ENTRIES.map((e) => (
+          <div key={e.version + e.title} className={`tl-item ${e.kind === "add" ? "tl-item-add" : ""}`}>
+            <span className="tl-date">{e.date}</span>
+            <span className="tl-version">{e.version}</span>
+            {e.why && <span className="tl-why">needed by: {e.why}</span>}
+            <h3>{e.title}</h3>
+            <p>{e.body}</p>
+            {e.code && <CodeBlock plain code={e.code} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/dssl/views/DocsView.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import CodeBlock from "../CodeBlock";
+import { PlayIcon } from "../icons";
+
+const SIDE = [
+  { head: "language", id: "start", label: "Getting started" },
+  { head: null, id: "syntax", label: "Syntax" },
+  { head: null, id: "tokens", label: "Tokens" },
+  { head: null, id: "selectors", label: "Selectors & nesting" },
+  { head: null, id: "states", label: "States" },
+  { head: null, id: "world", label: "@media · @container · @signal" },
+  { head: null, id: "cascade", label: "Cascade & layers" },
+  { head: "properties", id: "semantic", label: "Semantic properties" },
+  { head: null, id: "behaviors", label: "Behaviors" },
+  { head: null, id: "motion", label: "Motion" },
+  { head: null, id: "errors", label: "Errors" },
+  { head: "runtime", id: "api", label: "JS API" },
+];
+
+export default function DocsView() {
+  const toggleDocSignal = (hot: boolean) => {
+    window.DSSL?.signal("docdemo", hot ? "hot" : null);
+  };
+
+  return (
+    <div className="wrap">
+      <div className="page-head">
+        <div className="kicker">language tour</div>
+        <h1 className="page-title">The DSSL docs</h1>
+        <p className="page-sub">
+          Everything in v0.2, with live examples — the boxes you can hover, focus and
+          toggle are styled by exactly the rules shown next to them.
+        </p>
+      </div>
+
+      <div className="docs-layout">
+        {/* ------------------------------------------------ sidebar */}
+        <aside className="docs-side">
+          {SIDE.map((s, i) => (
+            <div key={s.id}>
+              {s.head && <div className="side-head">{s.head}</div>}
+              <a href={`#${s.id}`}>{s.label}</a>
+            </div>
+          ))}
+        </aside>
+
+        {/* ------------------------------------------------ body */}
+        <div className="docs-body">
+          <section className="doc-block" id="start">
+            <h2 className="section-title">Getting started</h2>
+            <p className="doc-lead">
+              DSSL ships as plain ES modules. No bundler, no build step, no dependencies —
+              drop two files on any HTML page (any vintage), point a link tag at your
+              stylesheet, and the engine does the rest client-side.
+            </p>
+            <CodeBlock file="index.html" code={`<link rel="stylesheet/dssl" href="app.dssl">
+<script type="module" src="dssl/boot.js"></script>
+
+<!-- works with React, Vue, Svelte, anything that emits DOM:
+     the engine re-matches automatically on mutations -->`} />
+            <p className="doc-lead">
+              Styles live in <code>.dssl</code> files. The engine fetches them, parses,
+              resolves tokens, and applies the winning declarations straight onto elements.
+            </p>
+          </section>
+
+          <section className="doc-block" id="syntax">
+            <h2 className="section-title">Syntax</h2>
+            <p className="doc-lead">
+              Braces, one declaration per line, no required semicolons. Newlines end
+              declarations; <code>;</code> is optional sugar for packing declarations.
+              Comments are <code>{"// line"}</code> or block comments. Values span lines
+              when parens are open or the line ends with a comma or colon.
+            </p>
+            <CodeBlock file="syntax.dssl" code={`.card {
+  background: color.card   // no semicolon needed
+  padding: space.4; radius: md   // optional semicolons
+
+  .title {
+    font: 16/1.4 color.ink   // size / line-height / color
+  }
+}
+
+.one-liner { padding: 8; shadow: sm }
+
+background:                     // values can continue
+  linear-gradient(135deg,
+    color.accent, color.accent/45)`} />
+          </section>
+
+          <section className="doc-block" id="tokens">
+            <h2 className="section-title">Tokens</h2>
+            <p className="doc-lead">
+              Design tokens are the variables. They compile to custom properties on
+              <code> :root</code> (inspectable in DevTools), and any bare identifier in a
+              value resolves against them — misspell one and you get an error, not silence.
+              A slash adds alpha via <code>color-mix</code>.
+            </p>
+            <CodeBlock file="tokens.dssl" code={`tokens {
+  color {
+    ink: #16161d
+    accent: oklch(62% 0.19 35)
+  }
+  radius { md: 14 }
+  shadow { md: 0 2 4 ink/10, 0 4 12 ink/8 }
+}
+
+.card {
+  background: color.card
+  color: color.ink/85      // alpha modifier
+  radius: md
+  shadow: md
+}`} />
+            <div className="demo-box">
+              <div className="tok-demo">
+                <button type="button" className="tok-dot">ink</button>
+                <button type="button" className="tok-dot">muted</button>
+                <button type="button" className="tok-dot">accent</button>
+                <button type="button" className="tok-dot">ok</button>
+                <button type="button" className="tok-dot">err</button>
+              </div>
+              <p className="doc-lead fine-print">
+                These dots resolve <code>color.*</code> tokens — flip the theme in the nav
+                and watch them re-evaluate.
+              </p>
+              <div className="scale-bar" aria-label="Spacing scale">
+                {"space.1 space.2 space.3 space.4 space.5 space.6".split(" ").map(s => (
+                  <div key={s} className="scale-step" title={s} style={{ height: (parseInt(s.slice(-1)) * 8 + 8) }} />
+                ))}
+              </div>
+            </div>
+            <p className="tbl-note">
+              Built-ins ship with sensible defaults: <code>space.1–.8</code>,{" "}
+              <code>radius.sm–full</code>, <code>shadow.sm–xl</code>, <code>font.sans/mono</code>.
+              Override any of them from your own <code>tokens</code> block.
+            </p>
+          </section>
+
+          <section className="doc-block" id="selectors">
+            <h2 className="section-title">Selectors & nesting</h2>
+            <p className="doc-lead">
+              Every CSS selector works — elements, classes, ids, attributes, combinators,
+              structural pseudo-classes. Nesting is native: a nested selector is a
+              descendant; <code>&amp;</code> substitutes the parent explicitly.
+            </p>
+            <CodeBlock file="selectors.dssl" code={`.gallery {
+  gap: space.4
+
+  .tile { shadow: sm }              // .gallery .tile
+  &.featured { border-color: color.accent }   // .gallery.featured
+  > .tile:nth-child(2n) { translate: 0 -2 }
+
+  hover {                            // states nest too (next section)
+    .tile { shadow: lg }
+  }
+}`} />
+          </section>
+
+          <section className="doc-block" id="states">
+            <h2 className="section-title">States</h2>
+            <p className="doc-lead">
+              An element&apos;s own pseudo-states are plain nested blocks —{" "}
+              <code>hover</code>, <code>focus</code>, <code>focus-visible</code>,{" "}
+              <code>active</code>, <code>disabled</code>, <code>checked</code>… The engine
+              listens to the events and re-evaluates live. Rules inside a state block can
+              target descendants (tooltips, dropdowns) or the element itself.
+            </p>
+            <CodeBlock file="states.dssl" code={`.doc-card {
+  transition: 200
+
+  hover {
+    translate: 0 -4
+    shadow: lg
+  }
+
+  focus-visible {
+    outline: 2 solid color.accent
+    outline-offset: 2
+  }
+
+  active { translate: 0 -1 }
+}`} />
+            <div className="demo-box">
+              <div className="doc-card">
+                <span className="doc-card-title">Hover me</span>
+                <span className="doc-card-sub">
+                  This card lifts on hover — the engine matched <code>:hover</code> itself.
+                </span>
+              </div>
+              <button type="button" className="doc-btn">Tab to me — focus-visible ring</button>
+            </div>
+          </section>
+
+          <section className="doc-block" id="world">
+            <h2 className="section-title">@media · @container · @signal</h2>
+            <p className="doc-lead">
+              The world around the element is one shape: CSS-shaped conditions.{" "}
+              <code>@media</code> for viewport and preferences (bare numbers mean px),{" "}
+              <code>@container</code> for container queries, and <code>@signal</code> —
+              the JS bridge. Conditions compose by nesting.
+            </p>
+            <CodeBlock file="world.dssl" code={`.panel {
+  padding: space.3
+
+  @media (width >= 768) {
+    padding: space.6
+  }
+
+  @container (min-width: 480px) {
+    grid: 2
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background: color.ink
+  }
+
+  @signal theme == dark {          // JS: DSSL.signal('theme', 'dark')
+    background: color.ink
+  }
+
+  @media (width <= 860) {
+    @signal nav == open {          // composed: narrow AND menu open
+      display: block
+    }
+  }
+}`} />
+            <div className="demo-box">
+              <div className="signal-box">@signal docdemo == hot — cold</div>
+              <div className="tok-demo">
+                <button type="button" className="doc-btn" onClick={() => toggleDocSignal(true)}>heat it</button>
+                <button type="button" className="doc-btn" onClick={() => toggleDocSignal(false)}>cool it</button>
+              </div>
+            </div>
+          </section>
+
+          <section className="doc-block" id="cascade">
+            <h2 className="section-title">Cascade & layers</h2>
+            <p className="doc-lead">
+              The whole cascade in one sentence: <b>later wins, layers trump order.</b>{" "}
+              No specificity arithmetic, no <code>!important</code>. Rules live in{" "}
+              <code>tokens &lt; base &lt; components &lt; utilities &lt; pin</code>; yours
+              default to <code>components</code>. The <code>pin</code> block is the single
+              sanctioned escape hatch.
+            </p>
+            <CodeBlock file="cascade.dssl" code={`#hero .title { color: color.ink }
+
+.legacy .panel .title { color: color.paper }
+// ↑ WINS in DSSL (it is later) — CSS would score the #id higher
+
+@layer utilities {
+  .mt-0 { margin-top: 0 }
+}
+
+.wonky-badge {
+  pin: color color.accent-ink    // beats everything DSSL emitted
+}`} />
+            <div className="note">
+              <b>Why no specificity?</b> Because it never survives contact with a real
+              codebase. Source order is readable, predictable, and refactorable — and when
+              you truly need to win, <code>pin</code> says so explicitly instead of
+              leaking <code>!important</code> into every stylesheet.
+            </div>
+          </section>
+
+          <section className="doc-block" id="semantic">
+            <h2 className="section-title">Semantic properties</h2>
+            <p className="doc-lead">
+              All standard CSS properties pass through untouched. On top of them, DSSL
+              speaks a small design vocabulary — properties that expand to the machinery
+              they mean. Bare numbers are pixels; unitless where CSS wants them.
+            </p>
+            <table className="tbl">
+              <thead>
+                <tr><th>Property</th><th>Example</th><th>Expands to</th></tr>
+              </thead>
+              <tbody>
+                <tr><td><code>size</code></td><td><code>size: 40</code> · <code>size: 100% 40</code></td><td>width + height (one or two values)</td></tr>
+                <tr><td><code>row</code> / <code>column</code></td><td><code>row: gap 8 center wrap</code></td><td>flexbox + only the words you name (between, reverse, inline…)</td></tr>
+                <tr><td><code>grid</code></td><td><code>grid: 3</code> · <code>grid: auto-fill 220</code></td><td>repeat(3, 1fr) · repeat(auto-fill, minmax(220px, 1fr))</td></tr>
+                <tr><td><code>stack</code></td><td><code>stack: center</code></td><td>overlay grid; children share cell 1/1</td></tr>
+                <tr><td><code>place</code> / <code>align</code></td><td><code>place: center</code></td><td>place-items/content · align-items</td></tr>
+                <tr><td><code>cover</code></td><td><code>cover: fixed</code></td><td>position + inset: 0</td></tr>
+                <tr><td><code>sticky</code></td><td><code>sticky: 0</code></td><td>position: sticky; top: 0px</td></tr>
+                <tr><td><code>font</code></td><td><code>font: 16/1.4 ink</code></td><td>font-size / line-height / color</td></tr>
+                <tr><td><code>fluid</code></td><td><code>fluid: 16, 24</code></td><td>clamp() interpolating 16→24px across 360→1200px</td></tr>
+                <tr><td><code>shadow</code> / <code>radius</code></td><td><code>shadow: lg</code></td><td>token presets (sm/md/lg/xl) or raw values</td></tr>
+                <tr><td><code>circle</code></td><td><code>circle: 36</code></td><td>width + height + border-radius: 50%</td></tr>
+                <tr><td><code>grow</code> / <code>shrink</code> / <code>basis</code></td><td><code>grow: 1</code></td><td>flex-grow / flex-shrink / flex-basis</td></tr>
+                <tr><td><code>truncate</code></td><td><code>truncate</code></td><td>ellipsis overflow (overflow hidden, nowrap)</td></tr>
+                <tr><td><code>z</code></td><td><code>z: 50</code></td><td>z-index</td></tr>
+                <tr><td><code>transition</code></td><td><code>transition: 150 snap</code></td><td>all 150ms cubic-bezier(0.2, 0.9, 0.3, 1)</td></tr>
+                <tr><td><code>animate</code></td><td><code>animate: pop 400 snap</code></td><td>Web Animations API run of a motion block</td></tr>
+              </tbody>
+            </table>
+            <p className="tbl-note">Named easings: <code>snap</code>, <code>smooth</code>, <code>bounce</code> + the standard set.</p>
+          </section>
+
+          <section className="doc-block" id="behaviors">
+            <h2 className="section-title">Behaviors</h2>
+            <p className="doc-lead">
+              A behavior is a named chunk of DSSL — declarations, states, even nested
+              rules — spliced into any rule with <code>use</code>. Perfect for focus
+              rings, chip styles, reset-ish bundles. No parameters in v0.2; compose by
+              nesting behaviors.
+            </p>
+            <CodeBlock file="behaviors.dssl" code={`behavior focus-ring {
+  focus-visible {
+    outline: 2 solid color.accent
+    outline-offset: 2
+  }
+}
+
+button { use focus-ring }
+.card  { use focus-ring }
+
+// the dark palette on this very site is a behavior,
+// reused by @media and @signal — define once, apply twice`} />
+          </section>
+
+          <section className="doc-block" id="motion">
+            <h2 className="section-title">Motion</h2>
+            <p className="doc-lead">
+              Declare a <code>motion</code> with keyframe blocks (<code>from</code>,{" "}
+              <code>to</code>, <code>at 40%</code>) — the missing end interpolates from the
+              element&apos;s natural state. Apply it with <code>animate</code>. The engine
+              runs it through the Web Animations API, and every animation silently
+              disables under reduced-motion unless the motion is{" "}
+              <code>essential: true</code>.
+            </p>
+            <CodeBlock file="motion.dssl" code={`motion pop {
+  from {
+    opacity: 0
+    translate: 0 16
+    scale: 0.9
+  }
+}
+
+.motion-box {
+  animate: pop 500 snap        // name · duration · easing · fill
+}`} />
+            <div className="demo-box">
+              <div className="motion-box">motion pop — replay me</div>
+              <button type="button" className="doc-btn" onClick={() => window.DSSL?.replay(".motion-box")}>
+                <span className="tok-demo"><PlayIcon /> DSSL.replay(&apos;.motion-box&apos;)</span>
+              </button>
+            </div>
+          </section>
+
+          <section className="doc-block" id="errors">
+            <h2 className="section-title">Errors that talk back</h2>
+            <p className="doc-lead">
+              CSS fails silently; DSSL refuses to compile and tells you where and what it
+              expected, with a did-you-mean built from edit distance over every known
+              property, token and motion. The playground shows this live.
+            </p>
+            <CodeBlock file="typo.dssl" code={`.badge {
+  colour: red            // ✗ unknown property "colour"
+                         //   → did you mean "color"?
+
+  background: color.acnt // ✗ unknown value "color.acnt"
+                         //   → did you mean "color.accent"?
+
+  flex-direction: banana // ✗ unknown value "banana"
+}`} />
+            <div className="note">
+              <b>Escape hatches are explicit.</b> Custom properties (<code>--*</code>) pass
+              through unvalidated, and unknown identifiers inside <code>calc()</code> and
+              friends are your business — the loud checks protect the design vocabulary,
+              not the pressure valve.
+            </div>
+          </section>
+
+          <section className="doc-block" id="api">
+            <h2 className="section-title">JS API</h2>
+            <p className="doc-lead">
+              The engine exposes a small, synchronous surface. Signals are the bridge:
+              they re-evaluate every <code>@signal</code> rule and mirror onto{" "}
+              <code>data-dssl-*</code> attributes for DevTools visibility.
+            </p>
+            <table className="tbl">
+              <thead>
+                <tr><th>Call</th><th>What it does</th></tr>
+              </thead>
+              <tbody>
+                <tr><td><code>DSSL.load(urls, opts?)</code></td><td>fetch + apply .dssl files in order (shared token registry)</td></tr>
+                <tr><td><code>DSSL.apply(src, opts?)</code></td><td>apply a source string; <code>{"{ scope, name, replace }"}</code> for scoped stylesheets</td></tr>
+                <tr><td><code>DSSL.compile(src)</code></td><td>parse + resolve without touching the DOM — powers the playground</td></tr>
+                <tr><td><code>DSSL.signal(name, value)</code></td><td>set/clear a signal; @signal rules re-evaluate instantly</td></tr>
+                <tr><td><code>DSSL.replay(sel?)</code></td><td>re-run animations on matching elements</td></tr>
+                <tr><td><code>DSSL.refresh()</code></td><td>full re-compute (rarely needed — the engine watches the DOM)</td></tr>
+                <tr><td><code>DSSL.errors()</code></td><td>structured errors from the last apply</td></tr>
+              </tbody>
+            </table>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dssl/views/HomeView.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { useState } from "react";
+import CodeBlock from "../CodeBlock";
+import { highlightDssl } from "../highlight";
+import { ArrowIcon, PlayIcon } from "../icons";
+import type { ViewName } from "../SiteRoot";
+
+const DEMOS = {
+  tokens: `.demo-card {
+  background: color.card
+  radius: md
+  shadow: md
+
+  .demo-chip {
+    color: color.accent
+    background: color.accent/12
+  }
+
+  .demo-swatch {
+    background: linear-gradient(
+      135deg, color.accent, color.accent/45)
+  }
+}`,
+  states: `.demo-card {
+  transition: 200
+}
+
+.demo-card:hover {
+  translate: 0 -5px
+  shadow: lg
+  border-color: color.accent/40
+
+  .demo-swatch {
+    background: linear-gradient(
+      135deg, color.accent/60, color.ink/80)
+  }
+}`,
+  motion: `motion rise-in {
+  from {
+    opacity: 0
+    translate: 0 12
+  }
+}
+
+.demo-card {
+  animate: rise-in 500 snap both
+}`,
+};
+
+type DemoKey = keyof typeof DEMOS;
+
+export default function HomeView({ go }: { go: (v: ViewName) => void }) {
+  const [demo, setDemo] = useState<DemoKey>("tokens");
+  const [signalOn, setSignalOn] = useState(false);
+
+  const toggleSignal = () => {
+    const next = !signalOn;
+    setSignalOn(next);
+    window.DSSL?.signal("demo", next ? "on" : null);
+  };
+
+  const replayMotion = () => window.DSSL?.replay(".demo-motion");
+
+  return (
+    <>
+      {/* ------------------------------------------------ hero */}
+      <section className="hero">
+        <div className="hero-glow" aria-hidden="true" />
+        <div className="hero-glow-2" aria-hidden="true" />
+        <div className="wrap hero-grid">
+          <div className="hero-copy">
+            <div className="kicker">domain specific style language</div>
+            <h1 className="hero-title">
+              CSS talks to the <em>engine</em>.
+              <br />
+              DSSL talks to the <em>design</em>.
+            </h1>
+            <p className="hero-sub">
+              A styling language for the web that pairs with any HTML and any JavaScript.
+              Its own cascade — no specificity math, no <code>!important</code> — design
+              tokens as the vocabulary, states you can read, motion in four words, and
+              errors that actually speak up. Zero dependencies, no build step.
+            </p>
+            <div className="hero-ctas">
+              <button type="button" className="btn btn-primary" onClick={() => go("docs")}>
+                Read the docs <ArrowIcon />
+              </button>
+              <button type="button" className="btn btn-ghost" onClick={() => go("playground")}>
+                <PlayIcon /> Try the playground
+              </button>
+            </div>
+            <div className="hero-meta" aria-label="Engine facts">
+              <span>~20 kB engine</span>
+              <span>zero dependencies</span>
+              <span>any HTML, any JS</span>
+            </div>
+          </div>
+
+          {/* live demo stage — the tabs swap real DSSL, the card below is styled by it */}
+          <div className="demo" aria-label="Live DSSL demo">
+            <div className="demo-tabs">
+              {(Object.keys(DEMOS) as DemoKey[]).map(k => (
+                <button
+                  key={k}
+                  type="button"
+                  className="demo-tab"
+                  aria-pressed={demo === k}
+                  onClick={() => setDemo(k)}
+                >
+                  {k}
+                </button>
+              ))}
+            </div>
+            <div className="demo-stage">
+              <pre className="code demo-code">
+                <code dangerouslySetInnerHTML={{ __html: highlightDssl(DEMOS[demo]) }} />
+              </pre>
+              <div className="demo-canvas">
+                <div className="demo-card">
+                  <div className="demo-swatch" />
+                  <h4>Styled by DSSL</h4>
+                  <p>Hover me — states, tokens and motion are all handled by the engine.</p>
+                  <span className="demo-chip">live</span>
+                </div>
+                {demo === "motion" && (
+                  <button type="button" className="btn btn-ghost btn-sm" onClick={() => window.DSSL?.replay(".demo-card")}>
+                    <PlayIcon /> replay rise-in
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ------------------------------------------------ pain points */}
+      <section className="section">
+        <div className="wrap">
+          <div className="kicker">why another language</div>
+          <h2 className="section-title">Four fights CSS makes you pick. DSSL refuses all of them.</h2>
+          <div className="pain-grid sect-gap">
+            <div className="card card-hover pain-card">
+              <span className="pain-label">CSS · specificity wars</span>
+              <h3>Cascade by arithmetic</h3>
+              <p>
+                <code>#id</code> beats <code>.class</code> beats <code>tag</code>, then{" "}
+                <code>!important</code> beats everyone. In DSSL the rule is one sentence:
+                later wins, inside layers. That is the whole cascade.
+              </p>
+              <span className="pain-cure">DSSL · layers + source order</span>
+            </div>
+            <div className="card card-hover pain-card">
+              <span className="pain-label">CSS · silent failures</span>
+              <h3>Typo? Shipped anyway.</h3>
+              <p>
+                Misspell <code>background</code> or a variable and CSS quietly does nothing.
+                DSSL refuses to compile: file, line, and a did-you-mean that usually nails it.
+              </p>
+              <span className="pain-cure">DSSL · loud errors</span>
+            </div>
+            <div className="card card-hover pain-card">
+              <span className="pain-label">CSS · keyframe ceremony</span>
+              <h3>Motion needs a paragraph</h3>
+              <p>
+                <code>@keyframes</code> plus an <code>animation</code> shorthand with five
+                comma-separated values. DSSL: declare a motion once, then{" "}
+                <code>animate: rise-in 400 snap</code>.
+              </p>
+              <span className="pain-cure">DSSL · motion blocks</span>
+            </div>
+            <div className="card card-hover pain-card">
+              <span className="pain-label">CSS · invisible theming</span>
+              <h3>JS ↔ styles is a hack</h3>
+              <p>
+                Theming from JavaScript means poking data-attributes or inline styles by hand.
+                DSSL has a first-class bridge: <code>DSSL.signal(&apos;theme&apos;, &apos;dark&apos;)</code>{" "}
+                re-styles the page, inspectably.
+              </p>
+              <span className="pain-cure">DSSL · signals</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ------------------------------------------------ side-by-side */}
+      <section className="section">
+        <div className="wrap">
+          <div className="kicker">same card, two languages</div>
+          <h2 className="section-title">The vocabulary is the difference</h2>
+          <div className="compare sect-gap">
+            <div className="compare-col">
+              <span className="compare-tag compare-tag-css">styles.css — 14 lines of machinery</span>
+              <CodeBlock plain code={`.card {
+  background-color: var(--card);
+  border-radius: 14px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgb(0 0 0 / .1),
+              0 4px 14px rgb(0 0 0 / .08);
+  transition: all 160ms cubic-bezier(.2,.9,.3,1);
+}
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 8px rgb(0 0 0 / .12),
+              0 14px 36px rgb(0 0 0 / .12);
+}
+.card:hover .chip { background: var(--accent-soft); }`} />
+            </div>
+            <div className="compare-col">
+              <span className="compare-tag compare-tag-dssl">card.dssl — 8 lines of design</span>
+              <CodeBlock plain code={`.card {
+  background: color.card
+  radius: md
+  padding: space.4
+  shadow: md
+  transition: 160 snap
+
+  hover {
+    translate: 0 -4
+    shadow: lg
+    .chip { background: color.accent/12 }
+  }
+}`} />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ------------------------------------------------ features */}
+      <section className="section">
+        <div className="wrap">
+          <div className="kicker">the engine</div>
+          <h2 className="section-title">No stylesheet is attached to this page</h2>
+          <p className="section-sub">
+            Every rule below is implemented by the DSSL engine — it matches selectors
+            against the live DOM itself, runs its own cascade, and drives motion through
+            the Web Animations API. Only pseudo-elements fall back to generated CSS.
+          </p>
+          <div className="feature-grid sect-gap">
+            <div className="card card-hover feature">
+              <span className="feature-icon">{"{}"}</span>
+              <h3>Its own cascade</h3>
+              <p>Later wins. Layers when you care. No specificity score, no !important — ever.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">◆</span>
+              <h3>Tokens as vocabulary</h3>
+              <p>color.ink, space.4, radius.md — references compile to inspectable custom properties.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">→</span>
+              <h3>Readable states</h3>
+              <p>hover, focus-visible, active as blocks. Nested rules under a state just work.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">≋</span>
+              <h3>One-word conditions</h3>
+              <p>@media, @container and @signal in the same shape. Bare numbers mean pixels.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">✦</span>
+              <h3>Motion in four words</h3>
+              <p>Declare a motion, then animate: rise-in 400 snap both. Reduced-motion is respected by default.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">§</span>
+              <h3>Behaviors</h3>
+              <p>Name a pattern once — focus rings, chips — and use it anywhere with one line.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">!</span>
+              <h3>Loud errors</h3>
+              <p>Unknown property, unknown token, bad value — each fails with file, line and a suggestion.</p>
+            </div>
+            <div className="card card-hover feature">
+              <span className="feature-icon">⇄</span>
+              <h3>JS bridge</h3>
+              <p>dssl.signal() re-styles live, dssl.replay() re-runs motion, dssl.compile() powers tools.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ------------------------------------------------ bridge demo */}
+      <section className="section">
+        <div className="wrap">
+          <div className="kicker">javascript, meet styles</div>
+          <h2 className="section-title">One call restyles the page</h2>
+          <div className="compare sect-gap" style={{ alignItems: "center" }}>
+            <div className="compare-col">
+              <CodeBlock file="theme-toggle.js" code={`// flip a signal — DSSL re-evaluates
+// every @signal rule in the page
+
+DSSL.signal('demo', 'on')   // on
+DSSL.signal('demo', null)   // off`} />
+            </div>            <div className="compare-col demo-canvas" style={{ maxWidth: 480 }}>
+              <button type="button" className="btn btn-primary" onClick={toggleSignal}>
+                {signalOn ? "signal: demo == on" : "signal: demo == off"} — click
+              </button>
+              <div className="demo-signal-card">
+                <strong>@signal demo == on</strong>
+                <span>This card is styled by a signal-conditional rule. Flip the signal and the engine recomputes it — inspect the html element to see the mirror attribute.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ------------------------------------------------ cta */}
+      <section className="section">
+        <div className="wrap">
+          <div className="cta-band">
+            <h2>Write styles that read like design.</h2>
+            <p>
+              The full language tour takes about ten minutes. Or paste straight into the
+              playground and break things — the errors will keep you company.
+            </p>
+            <div className="hero-ctas">
+              <button type="button" className="btn btn-primary" onClick={() => go("docs")}>
+                Language tour <ArrowIcon />
+              </button>
+              <button type="button" className="btn btn-ghost" onClick={() => go("spec")}>
+                Read the spec
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

src/components/dssl/views/PlaygroundView.tsx

@@ -0,0 +1,387 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { DsslError, DsslApplyResult } from "../SiteRoot";
+
+const PRESETS: Record<string, { label: string; src: string }> = {
+  cards: {
+    label: "Cards",
+    src: `// style the canvas — bare numbers are px,
+// bare identifiers are tokens
+tokens {
+  color {
+    hotspot: oklch(0.62 0.17 55)
+  }
+}
+
+.pc-board {
+  grid: auto-fill 190
+  gap: space.4
+  width: 100%
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  shadow: sm
+  column: gap 8
+  transition: 180
+
+  hover {
+    translate: 0 -4
+    shadow: lg
+    border-color: color.hotspot/45
+
+    .pc-badge {
+      background: color.hotspot
+      color: color.accent-ink
+    }
+  }
+}
+
+.pc-badge {
+  align-self: start
+  font-family: font.mono
+  font-size: 11
+  background: color.accent/12
+  color: color.accent
+  padding: 3 9
+  radius: full
+  transition: 180
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13; line-height: 1.55 }
+
+.pc-btn {
+  padding: 8 14
+  radius: sm
+  background: color.ink
+  color: color.paper
+  font-size: 13
+  font-weight: 600
+
+  hover { translate: 0 -2 }
+  active { translate: 0 0 }
+}`,
+  },
+  tokens: {
+    label: "Tokens",
+    src: `// tokens compile to custom properties on the
+// canvas element — try flipping these
+tokens {
+  color {
+    pop: oklch(0.65 0.19 300)
+    calm: oklch(0.68 0.13 190)
+  }
+  radius { md: 18 }
+}
+
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border-top: 4 solid color.pop
+  radius: md
+  padding: space.4
+  column: gap 8
+  shadow: sm
+}
+
+.pc-card:nth-child(2) {
+  border-top-color: color.calm
+}
+
+.pc-card:nth-child(3) {
+  border-top-color: color.pop/55
+}
+
+.pc-badge {
+  background: color.pop/12
+  color: color.pop
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }`,
+  },
+  motion: {
+    label: "Motion",
+    src: `// declare once, animate anywhere.
+// reduced-motion users: this all politely
+// does nothing unless marked essential
+motion float {
+  from {
+    opacity: 0
+    translate: 0 18
+    scale: 0.94
+  }
+}
+
+motion shimmer {
+  at 0   { translate: 0 0 }
+  at 50  { translate: 0 -10 }
+  at 100 { translate: 0 0 }
+}
+
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  column: gap 8
+  animate: float 600 snap both
+
+  hover { shadow: lg; translate: 0 -4 }
+}
+
+.pc-card:nth-child(2) { animate: float 600 snap 150 both }
+.pc-card:nth-child(3) { animate: float 600 snap 300 both }
+
+.pc-badge {
+  background: color.accent/12
+  color: color.accent
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }
+
+// press "replay" above to re-run the motion`,
+  },
+  signals: {
+    label: "Signals",
+    src: `// press the button in the canvas —
+// DSSL.signal('pgdemo', 'hot') re-styles live
+.pc-board {
+  grid: 3
+  gap: space.4
+}
+
+.pc-card {
+  background: color.card
+  border: 1 solid color.line
+  radius: md
+  padding: space.4
+  column: gap 8
+  transition: 250
+}
+
+@signal pgdemo == hot {
+  .pc-card {
+    background: color.accent
+    border-color: color.accent
+    color: color.accent-ink
+    translate: 0 -3
+    shadow: lg
+
+    .pc-text { color: color.accent-ink/80 }
+    .pc-badge {
+      background: color.accent-ink/20
+      color: color.accent-ink
+    }
+  }
+}
+
+.pc-badge {
+  background: color.accent/12
+  color: color.accent
+  padding: 3 9
+  radius: full
+  font-family: font.mono
+  font-size: 11
+  align-self: start
+}
+
+.pc-title { font-weight: 700; font-size: 15 }
+.pc-text  { color: color.muted; font-size: 13 }`,
+  },
+  errors: {
+    label: "Errors",
+    src: `// this preset fails on purpose —
+// read the panel below the editor
+.pc-card {
+  backgroud: color.card       // typo
+  radius: md
+  padding: space.4
+  colr: color.ink             // typo
+  shadow: color.acnt          // unknown token
+}
+
+.pc-title {
+  font-weight: 700
+  bananify: 12                // unknown property
+}`,
+  },
+};
+
+const SAMPLE_CARDS = [
+  { badge: "one", title: "Styled live", text: "Everything on the left is applied to this canvas by the DSSL engine — scoped, so the rest of the site is untouched." },
+  { badge: "two", title: "Tokens & states", text: "Use color.*, space.*, radius.* — or define your own. Hover states work right here." },
+  { badge: "three", title: "Loud errors", text: "Misspell a token and the panel below explains what it thinks you meant." },
+];
+
+export default function PlaygroundView() {
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [errors, setErrors] = useState<DsslError[]>([]);
+  const [stats, setStats] = useState<DsslApplyResult["stats"] | null>(null);
+  const [engineReady, setEngineReady] = useState(false);
+  const [preset, setPreset] = useState("cards");
+  const [hot, setHot] = useState(false);
+
+  const run = useCallback((src: string) => {
+    if (!window.DSSL) return;
+    const res = window.DSSL.apply(src, { scope: "#pg-canvas", name: "pg", replace: true });
+    setErrors(res.errors);
+    setStats(res.stats);
+  }, []);
+
+  // wait for the engine, then run the default preset (scoped!)
+  useEffect(() => {
+    if (window.DSSL) {
+      const t = setTimeout(() => setEngineReady(true), 0);
+      return () => clearTimeout(t);
+    }
+    const onReady = () => setEngineReady(true);
+    window.addEventListener("dssl-ready", onReady);
+    return () => window.removeEventListener("dssl-ready", onReady);
+  }, []);
+
+  useEffect(() => {
+    if (!engineReady) return;
+    const t = setTimeout(() => run(PRESETS.cards.src), 0);
+    return () => clearTimeout(t);
+  }, [engineReady, run]);
+
+  const onEdit = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      if (editorRef.current) run(editorRef.current.value);
+    }, 450);
+  };
+
+  const loadPreset = (key: string) => {
+    setPreset(key);
+    if (editorRef.current) {
+      editorRef.current.value = PRESETS[key].src;
+      run(PRESETS[key].src);
+    }
+  };
+
+  const toggleHot = () => {
+    const next = !hot;
+    setHot(next);
+    window.DSSL?.signal("pgdemo", next ? "hot" : null);
+  };
+
+  const ok = errors.length === 0;
+
+  return (
+    <div className="wrap">
+      <div className="page-head">
+        <div className="kicker">try it</div>
+        <h1 className="page-title">Playground</h1>
+        <p className="page-sub">
+          Real engine, real errors, zero setup. Your stylesheet is applied{" "}
+          <b>scoped</b> to the canvas — nothing leaks to the rest of the page.
+        </p>
+      </div>
+
+      <div className="pg-layout">
+        {/* ------------------------------------ editor */}
+        <div className="pg-pane">
+          <div className="pg-head">
+            <span>canvas.dssl</span>
+            <div className="pg-head-tools">
+              <select
+                className="pg-select"
+                value={preset}
+                aria-label="Load preset"
+                onChange={(e) => loadPreset(e.target.value)}
+              >
+                {Object.entries(PRESETS).map(([k, p]) => (
+                  <option key={k} value={k}>{p.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <textarea
+            ref={editorRef}
+            className="pg-editor"
+            defaultValue={PRESETS.cards.src}
+            onInput={onEdit}
+            spellCheck={false}
+            aria-label="DSSL source editor"
+          />
+          <div className={`pg-status ${ok ? "pg-status-ok" : "pg-status-err"}`} role="status">
+            {ok
+              ? `ok — ${stats?.rules ?? 0} rules, ${stats?.tokens ?? 0} tokens, ${stats?.motions ?? 0} motions`
+              : `${errors.length} error${errors.length === 1 ? "" : "s"} — fix and keep going`}
+          </div>
+          {!ok && (
+            <div className="pg-errors" aria-live="polite">
+              {errors.map((e, i) => (
+                <div key={i} className="pg-error">
+                  <span>line {e.line ?? "?"} — {e.message}</span>
+                  {e.hint && <span className="pg-error-hint">did you mean <em>“{e.hint}”</em>?</span>}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* ------------------------------------ canvas */}
+        <div className="pg-pane">
+          <div className="pg-head">
+            <span>#pg-canvas — scoped</span>
+            <div className="pg-head-tools">
+              {preset === "signals" && (
+                <button type="button" className="doc-btn btn-sm" onClick={toggleHot}>
+                  {hot ? "signal: hot" : "signal: cold"}
+                </button>
+              )}
+              {(preset === "motion" || preset === "cards") && (
+                <button type="button" className="doc-btn btn-sm" onClick={() => window.DSSL?.replay(".pc-card")}>
+                  replay
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="pg-canvas-wrap">
+            <div className="pg-canvas" id="pg-canvas">
+              <p className="pg-canvas-title">canvas — your dssl styles this</p>
+              <div className="pc-board">
+                {SAMPLE_CARDS.map(c => (
+                  <article className="pc-card" key={c.badge}>
+                    <span className="pc-badge">{c.badge}</span>
+                    <h4 className="pc-title">{c.title}</h4>
+                    <p className="pc-text">{c.text}</p>
+                  </article>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dssl/views/SpecView.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import CodeBlock from "../CodeBlock";
+
+export default function SpecView() {
+  return (
+    <div className="wrap">
+      <div className="page-head">
+        <div className="kicker">normative</div>
+        <h1 className="page-title">DSSL v0.2 — “First Light”, ratified</h1>
+        <p className="page-sub">
+          The v0.1 draft was put to a seven-point vote. This document is the result —
+          every decision below is implemented by the engine serving this page.
+        </p>
+      </div>
+
+      <div className="docs-layout">
+        <aside className="docs-side">
+          {[
+            ["decision", "Decision log"],
+            ["architecture", "Architecture"],
+            ["s-syntax", "Syntax"],
+            ["s-tokens", "Tokens"],
+            ["s-cascade", "Cascade"],
+            ["s-conditions", "Conditions"],
+            ["s-motion", "Motion"],
+            ["s-signals", "Signals"],
+            ["s-errors", "Errors"],
+            ["s-limits", "Deliberate limits"],
+            ["s-version", "Versioning"],
+          ].map(([id, label]) => (
+            <a key={id} href={`#${id}`}>{label}</a>
+          ))}
+        </aside>
+
+        <div className="docs-body prose">
+          <section className="doc-block" id="decision">
+            <h2 className="section-title">Decision log</h2>
+            <p className="doc-lead">
+              Seven questions, seven answers — the draft spec was amended to match.
+            </p>
+            <table className="tbl">
+              <thead>
+                <tr><th>#</th><th>Question</th><th>Decision</th><th>Consequence</th></tr>
+              </thead>
+              <tbody>
+                <tr><td>1</td><td>Syntax style</td><td><b>Braces</b></td><td>C-shaped blocks; semicolons optional, newline-terminated declarations</td></tr>
+                <tr><td>2</td><td>Styling engine</td><td><b>Own engine</b></td><td>No CSS output for regular rules — selectors matched against the live DOM, declarations applied directly; pseudo-elements excepted (shadow CSS)</td></tr>
+                <tr><td>3</td><td>Bare numbers</td><td><b>px</b></td><td><code>padding: 16</code> is 16px; unitless preserved where CSS demands it</td></tr>
+                <tr><td>4</td><td>Cascade</td><td><b>Layers + order</b></td><td>No specificity, no !important; five layers; pin as the only escape hatch</td></tr>
+                <tr><td>5</td><td>Vocabulary</td><td><b>Moderate sugar</b></td><td>All CSS names valid + a small semantic set (row, grid, fluid, …)</td></tr>
+                <tr><td>6</td><td>Conditions</td><td><b>CSS shapes</b></td><td>Nested state blocks (hover, focus…) + @media / @container; @signal added as the JS bridge</td></tr>
+                <tr><td>7</td><td>Website shape</td><td><b>Docs site</b></td><td>Multi-view docs with live examples, playground, spec and changelog</td></tr>
+              </tbody>
+            </table>
+          </section>
+
+          <section className="doc-block" id="architecture">
+            <h2 className="section-title">1 · Architecture</h2>
+            <p>
+              DSSL is a styling <b>language plus engine</b>. Source files use the{" "}
+              <code>.dssl</code> extension. The engine — four dependency-free ES modules
+              (parser, resolver, engine, API) — fetches stylesheets, parses them, resolves
+              tokens, and computes styles for elements in the live DOM. It survives DOM
+              mutations via a MutationObserver, re-evaluates states on interaction events,
+              and re-runs media conditions through <code>matchMedia</code> listeners.
+            </p>
+            <p>
+              Regular rules produce <b>no CSS</b>: winning declarations are applied to
+              elements directly. Pseudo-elements, which cannot be expressed inline, are
+              the single exception — they compile to a shadow stylesheet that references
+              the same tokens. A tiny opt-in reset (<code>data-dssl-reset</code>) is
+              likewise generated CSS, zero-specificity via <code>:where()</code>.
+            </p>
+            <CodeBlock file="pipeline.txt" code={`.dssl source
+  └─ parser.js     braces syntax → node tree (loud, line-numbered errors)
+      └─ resolver.js   tokens · semantic expansion · behaviors · flatten
+          └─ engine.js   match → cascade (layer, order) → element.style
+                          states via events · @media via matchMedia
+                          motion via Web Animations API
+              └─ shadow CSS  ::before/::after/::selection + reset only`} />
+          </section>
+
+          <section className="doc-block" id="s-syntax">
+            <h2 className="section-title">2 · Syntax</h2>
+            <ul>
+              <li>Blocks open with <code>header {"{"}</code> and close with <code>{"}"}</code>; one-liners allowed.</li>
+              <li>Declarations are <code>prop: value</code>, newline- or <code>;</code>-terminated. Valueless semantics (<code>truncate</code>) and <code>use name</code> need no colon.</li>
+              <li>Comments: <code>{"//"}</code> and block comments. Strings are <code>&quot;…&quot;</code> or <code>&apos;…&apos;</code>.</li>
+              <li>Values continue across lines while parens are open, or the line ends with a top-level comma or colon.</li>
+              <li>Bare numbers are px; <code>16/1.4</code> size-over-lineheight in <code>font</code>; <code>token/40</code> is alpha.</li>
+            </ul>
+          </section>
+
+          <section className="doc-block" id="s-tokens">
+            <h2 className="section-title">3 · Tokens</h2>
+            <p>
+              <code>tokens {"{ }"}</code> blocks define named values in nested groups
+              (<code>color.ink</code>, <code>space.4</code>). They compile to{" "}
+              <code>--dssl-*</code> custom properties on <code>:root</code>. Reference
+              resolution is strict: an identifier that matches no token and no known
+              keyword is a compile error with a suggestion. Tokens may be defined
+              conditionally (inside <code>@media</code>/<code>@signal</code>) — that is
+              how theming works. Bundles share one token registry in load order.
+            </p>
+          </section>
+
+          <section className="doc-block" id="s-cascade">
+            <h2 className="section-title">4 · Cascade</h2>
+            <p>
+              For every element, the engine collects all structurally-matching rules
+              whose conditions pass, sorts them by <b>(layer, source order)</b>, and
+              applies declarations in sequence — later declarations overwrite earlier
+              ones on the element. Layers, lowest first:
+            </p>
+            <CodeBlock plain code={`tokens < base < components < utilities < pin`} />
+            <p>
+              Author rules default to <code>components</code>. <code>@layer</code>{" "}
+              re-assigns a subtree. <code>pin</code> blocks apply with{" "}
+              <code>!important</code>-grade priority as the single sanctioned escape
+              hatch. Selectors keep their native meaning — ids and pseudo-classes select
+              exactly as in CSS — they simply carry <b>no weight</b> in conflict
+              resolution.
+            </p>
+          </section>
+
+          <section className="doc-block" id="s-conditions">
+            <h2 className="section-title">5 · Conditions</h2>
+            <ul>
+              <li><b>Element states</b> — nested blocks named for the pseudo-class (<code>hover</code>, <code>focus-visible</code>, <code>active</code>, <code>disabled</code>, <code>checked</code>, …). The engine wires the events; rules re-evaluate live via <code>matches()</code>.</li>
+              <li><b>@media</b> — any media query; bare numbers become px (<code>(width &gt;= 768)</code>).</li>
+              <li><b>@container</b> — evaluated against the nearest ancestor with <code>container-type</code> set, tracked by the engine with a ResizeObserver.</li>
+              <li><b>@signal</b> — <code>name</code> (truthy), <code>name == value</code>, <code>name != value</code>; driven from JS.</li>
+              <li>Conditions compose by nesting; siblings AND together. Raw pseudo-classes in selector text (<code>.tab:hover</code>) also work.</li>
+            </ul>
+          </section>
+
+          <section className="doc-block" id="s-motion">
+            <h2 className="section-title">6 · Motion</h2>
+            <p>
+              <code>motion name {"{ }"}</code> declares keyframes (<code>from</code>,{" "}
+              <code>to</code>, <code>at N%</code>); a single terminal block interpolates
+              from the element&apos;s natural state. <code>animate: name duration easing fill</code>{" "}
+              runs it via the Web Animations API — the engine deduplicates re-runs so
+              recomputes never restart animations; <code>DSSL.replay()</code> does that
+              on demand. Reduced-motion disables animations unless{" "}
+              <code>essential: true</code>.
+            </p>
+          </section>
+
+          <section className="doc-block" id="s-signals">
+            <h2 className="section-title">7 · Signals</h2>
+            <p>
+              <code>DSSL.signal(name, value)</code> sets a named value in the engine and
+              mirrors it onto <code>&lt;html&gt;</code> as{" "}
+              <code>data-dssl-signal-&lt;name&gt;</code> — inspectable, framework-free
+              theming and UI state. Clearing with <code>null</code> returns conditions to
+              their system-preference defaults.
+            </p>
+          </section>
+
+          <section className="doc-block" id="s-errors">
+            <h2 className="section-title">8 · Errors</h2>
+            <p>
+              Unknown properties, unknown tokens, unknown motions, malformed conditions
+              and bad header shapes are <b>compile errors</b> carrying file, line,
+              message and — where the edit distance is close — a suggestion. Error
+              objects are structured (<code>DSSL.errors()</code>) so tools like the
+              playground can render them. Uncaught selector evaluation failures are
+              contained per-rule and reported once.
+            </p>
+          </section>
+
+          <section className="doc-block" id="s-limits">
+            <h2 className="section-title">9 · Deliberate limits (v0.2)</h2>
+            <ul>
+              <li>No <code>@import</code>/module graph — bundles merge in load order.</li>
+              <li>Behaviors take no parameters; no loops or user functions.</li>
+              <li>Comma selector lists do not combine with nested state blocks (bind states per-rule instead).</li>
+              <li>Pseudo-element rules accept declarations only.</li>
+              <li>No minification or build step — the engine is the pipeline.</li>
+            </ul>
+            <div className="note">
+              <b>The growth protocol:</b> anything the site needed that the language
+              lacked was added to the language, logged in the changelog with the reason.
+              That is how v0.1 became v0.2.
+            </div>
+          </section>
+
+          <section className="doc-block" id="s-version">
+            <h2 className="section-title">10 · Versioning</h2>
+            <p>
+              DSSL follows semver for the language surface: new semantic properties,
+              condition kinds and API calls are minor versions; breaking grammar changes
+              are major. The engine reports <code>DSSL.version</code> — currently{" "}
+              <b>0.2.0</b>, “First Light”, ratified and grown during the construction of
+              the site you are reading.
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}