context-engine · livelifelively · Jan 22, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 
-v0-docs
+crystal
diff --git a/.ignore b/.ignore
@@ -1,5 +1,5 @@
 # Override .gitignore exclusions for AI editors/indexers
-# This makes v0-docs accessible to AI coding assistants
+# This makes crystal accessible to AI coding assistants
 # even though it's excluded from Git tracking
 
-!v0-docs
+!crystal
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,13 @@
+{
+    "svelte.plugin.svelte.useNewTransformation": true,
+    "svelte.enable-ts-plugin": true,
+    "files.associations": {
+        "svelte.config.js": "javascript"
+    },
+    "files.exclude": {
+        "**/.svelte-kit": true
+    },
+    "[svelte]": {
+        "editor.defaultFormatter": "svelte.svelte-vscode"
+    }
+}
diff --git a/bun.lock b/bun.lock
diff --git a/bunfig.toml b/bunfig.toml
@@ -28,5 +28,5 @@ coverageIgnorePatterns = [
 # Test timeout in milliseconds
 timeout = 10000
 
-# Preload test setup (if needed)
-# preload = ["./test-setup.ts"]
+# Preload test setup (UI package needs happy-dom for DOM environment)
+preload = ["./packages/ui/tests/svelte-plugin.ts", "./packages/ui/tests/setup.ts"]
diff --git a/package.json b/package.json
@@ -30,4 +30,4 @@
 		"@types/bun": "^1.3.6",
 		"fast-check": "^4.5.3"
 	}
-}
+}
diff --git a/packages/ui/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc b/packages/ui/.cursor/rules/use-bun-instead-of-node-vite-npm-pnpm.mdc
@@ -0,0 +1,111 @@
+---
+description: Use Bun instead of Node.js, npm, pnpm, or vite.
+globs: "*.ts, *.tsx, *.html, *.css, *.js, *.jsx, package.json"
+alwaysApply: false
+---
+
+Default to using Bun instead of Node.js.
+
+- Use `bun <file>` instead of `node <file>` or `ts-node <file>`
+- Use `bun test` instead of `jest` or `vitest`
+- Use `bun build <file.html|file.ts|file.css>` instead of `webpack` or `esbuild`
+- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`
+- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`
+- Use `bunx <package> <command>` instead of `npx <package> <command>`
+- Bun automatically loads .env, so don't use dotenv.
+
+## APIs
+
+- `Bun.serve()` supports WebSockets, HTTPS, and routes. Don't use `express`.
+- `bun:sqlite` for SQLite. Don't use `better-sqlite3`.
+- `Bun.redis` for Redis. Don't use `ioredis`.
+- `Bun.sql` for Postgres. Don't use `pg` or `postgres.js`.
+- `WebSocket` is built-in. Don't use `ws`.
+- Prefer `Bun.file` over `node:fs`'s readFile/writeFile
+- Bun.$`ls` instead of execa.
+
+## Testing
+
+Use `bun test` to run tests.
+
+```ts#index.test.ts
+import { test, expect } from "bun:test";
+
+test("hello world", () => {
+  expect(1).toBe(1);
+});
+```
+
+## Frontend
+
+Use HTML imports with `Bun.serve()`. Don't use `vite`. HTML imports fully support React, CSS, Tailwind.
+
+Server:
+
+```ts#index.ts
+import index from "./index.html"
+
+Bun.serve({
+  routes: {
+    "/": index,
+    "/api/users/:id": {
+      GET: (req) => {
+        return new Response(JSON.stringify({ id: req.params.id }));
+      },
+    },
+  },
+  // optional websocket support
+  websocket: {
+    open: (ws) => {
+      ws.send("Hello, world!");
+    },
+    message: (ws, message) => {
+      ws.send(message);
+    },
+    close: (ws) => {
+      // handle close
+    }
+  },
+  development: {
+    hmr: true,
+    console: true,
+  }
+})
+```
+
+HTML files can import .tsx, .jsx or .js files directly and Bun's bundler will transpile & bundle automatically. `<link>` tags can point to stylesheets and Bun's CSS bundler will bundle.
+
+```html#index.html
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>
+```
+
+With the following `frontend.tsx`:
+
+```tsx#frontend.tsx
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+// import .css files directly and it works
+import './index.css';
+
+const root = createRoot(document.body);
+
+export default function Frontend() {
+  return <h1>Hello, world!</h1>;
+}
+
+root.render(<Frontend />);
+```
+
+Then, run index.ts
+
+```sh
+bun --hot ./index.ts
+```
+
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
@@ -0,0 +1,37 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+storybook-static
+debug-storybook.log
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store
+.svelte-kit
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
@@ -0,0 +1,15 @@
+import type { StorybookConfig } from "@storybook/svelte-vite";
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.stories.@(js|ts|svelte)"],
+	addons: ["@storybook/addon-essentials"],
+	framework: {
+		name: "@storybook/svelte-vite",
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+};
+
+export default config;
diff --git a/packages/ui/.storybook/preview-head.html b/packages/ui/.storybook/preview-head.html
@@ -0,0 +1,8 @@
+<script>
+  // Inline script to prevent theme flash in Storybook
+  document.documentElement.classList.add('no-transition');
+  const theme = localStorage.getItem('say2-theme');
+  if (theme && theme !== 'system') {
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+</script>
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
@@ -0,0 +1,46 @@
+import type { Preview } from "@storybook/svelte";
+
+// Import tokens (includes typography)
+import '../src/lib/tokens/index.css';
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		backgrounds: {
+			default: "light",
+			values: [
+				{ name: "light", value: "#ffffff" },
+				{ name: "dark", value: "#1a1a1a" },
+			],
+		},
+	},
+	decorators: [
+		// Ensure fonts are loaded
+		(Story, context) => {
+			// Add Google Fonts link if not present
+			if (typeof document !== 'undefined') {
+				const linkId = 'google-fonts';
+				if (!document.getElementById(linkId)) {
+					const link = document.createElement('link');
+					link.id = linkId;
+					link.rel = 'stylesheet';
+					link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap';
+					document.head.appendChild(link);
+				}
+
+				// Sync data-theme with Storybook background
+				const bgName = context.globals?.backgrounds?.value;
+				const theme = bgName === '#1a1a1a' ? 'dark' : 'light';
+				document.documentElement.setAttribute('data-theme', theme);
+			}
+			return Story();
+		}
+	]
+};
+
+export default preview;
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -0,0 +1,87 @@
+# @say2/ui
+
+UI component library for Say2, built with Svelte 5 and TypeScript.
+
+## Overview
+
+This package provides a set of primitive and composite UI components using:
+- **Svelte 5** (with runes)
+- **bits-ui** for headless component primitives
+- **TypeScript** for type safety
+- **Storybook** for component development and documentation
+- **Bun** for testing
+
+## Installation
+
+```bash
+bun install
+```
+
+## Development
+
+### Storybook
+
+Run Storybook for interactive component development:
+
+```bash
+bun run dev
+```
+
+This will start Storybook at [http://localhost:6006](http://localhost:6006) where you can:
+- Browse all components in isolation
+- View component documentation
+- Interact with component controls
+- Test different component states and variants
+
+### Build Storybook
+
+To build a static version of Storybook:
+
+```bash
+bun run build:storybook
+```
+
+## Testing
+
+Run all tests:
+
+```bash
+bun run test
+```
+
+Run tests in watch mode:
+
+```bash
+bun run test:watch
+```
+
+## Building
+
+Build the component library for distribution:
+
+```bash
+bun run build
+```
+
+This generates the package output in the `dist/` directory.
+
+## Type Checking
+
+Run Svelte type checking:
+
+```bash
+bun run check
+```
+
+## Component Structure
+
+Components are organized into:
+- **Primitives** (`src/lib/primitives/`) - Basic UI building blocks
+  - Button, Badge, Input, Checkbox, Select, etc.
+- **Composites** (`src/lib/composites/`) - Complex components built from primitives
+
+Each component typically includes:
+- `*.svelte` - Component implementation
+- `*.stories.ts` - Storybook stories
+- `*.test.ts` - Unit tests
+- `index.ts` - Barrel export
diff --git a/packages/ui/bunfig.toml b/packages/ui/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = ["./tests/svelte-plugin.ts", "./tests/setup.ts"]
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
@@ -0,0 +1 @@
+console.log("Hello via Bun!");
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,4 +36,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json @@
     # Finder (MacOS) folder config
     .DS_Store
-    v0-docs
+    crystal
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		[test]
		preload = ["./tests/svelte-plugin.ts", "./tests/setup.ts"]