create-kai 0.1.0

package/dist/templates/svelte/src/lib/chat.svelte.ts

@@ -0,0 +1,52 @@
+import type { ChatMessage } from '@kitn.ai/ui';
+import {
+  appendMessage,
+  createAssistantStream,
+  onStreamSettled,
+  type SetMessages,
+  type AssistantStream,
+} from '@kitn.ai/ui/state';
+
+/**
+ * Svelte port of the kit's `useKaiChat` (a React hook), built on the SAME
+ * framework-neutral state core (`@kitn.ai/ui/state`) the React hook uses. It owns
+ * the message array + the `loading` flag and exposes ergonomic ops. Swap
+ * `mockResponse(text)` for a real `fetch` to ship a real app.
+ *
+ * `messages` is a `$state` rune (this file is `.svelte.ts` so runes work): every op
+ * assigns a BRAND-NEW array reference (`messages = updater(prev)`), which is exactly
+ * what re-renders `<kai-thread>` — mutating the array in place does not. Consumers
+ * read `chat.messages` / `chat.loading` through the getters so Svelte tracks them
+ * across the module boundary; destructuring would break reactivity.
+ */
+export interface ChatController {
+  readonly messages: ChatMessage[];
+  readonly loading: boolean;
+  append: (msg: ChatMessage) => void;
+  setMessages: (next: ChatMessage[]) => void;
+  streamAssistant: (init?: Partial<ChatMessage>) => AssistantStream;
+}
+
+export function createChat(initialMessages: ChatMessage[] = []): ChatController {
+  let messages = $state<ChatMessage[]>([...initialMessages]);
+  let loading = $state(false);
+
+  // The one universal contract the state core drives: a functional-updater setter
+  // (React setState shape) that assigns a fresh array each time.
+  const set: SetMessages = (updater) => { messages = updater(messages); };
+
+  const append = (msg: ChatMessage) => set((prev) => appendMessage(prev, msg));
+  const setMessages = (next: ChatMessage[]) => { messages = [...next]; };
+  const streamAssistant = (init?: Partial<ChatMessage>): AssistantStream => {
+    loading = true;
+    return onStreamSettled(createAssistantStream(set, init), () => { loading = false; });
+  };
+
+  return {
+    get messages() { return messages; },
+    get loading() { return loading; },
+    append,
+    setMessages,
+    streamAssistant,
+  };
+}

package/dist/templates/svelte/src/lib/conversations.svelte.ts

@@ -0,0 +1,46 @@
+import { THREADS, newId, type Conversation } from '../chat-data';
+import type { ChatController } from './chat.svelte';
+
+/**
+ * Owns the conversation list + which one is active, plus the in-memory `THREADS`
+ * stash: on select/new we swap the OPEN thread out to `THREADS` and swap the
+ * picked one in. Takes the `createChat` controller so it can read the live messages
+ * when stashing and reset them when loading another thread. Mirrors the React /
+ * Vue `useConversations`.
+ */
+export interface ConversationsController {
+  readonly conversations: Conversation[];
+  readonly activeId: string;
+  selectConversation: (id: string) => void;
+  newChat: () => void;
+}
+
+export function createConversations(chat: ChatController, initial: Conversation[]): ConversationsController {
+  let conversations = $state<Conversation[]>([...initial]);
+  let activeId = $state(initial[0].id);
+
+  const selectConversation = (id: string) => {
+    THREADS[activeId] = chat.messages; // stash the open thread
+    activeId = id;
+    chat.setMessages(THREADS[id] ?? []); // load the picked one
+  };
+
+  const newChat = () => {
+    const id = newId();
+    THREADS[activeId] = chat.messages;
+    THREADS[id] = [];
+    conversations = [
+      { id, title: 'New conversation', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      ...conversations,
+    ];
+    activeId = id;
+    chat.setMessages([]);
+  };
+
+  return {
+    get conversations() { return conversations; },
+    get activeId() { return activeId; },
+    selectConversation,
+    newChat,
+  };
+}

package/dist/templates/svelte/src/lib/types.ts

@@ -0,0 +1,2 @@
+// Shared across the example's components. Mirrors `examples/vue/src/types.ts`.
+export type Theme = 'light' | 'dark';

package/dist/templates/svelte/src/lib/voiceInput.ts

@@ -0,0 +1,57 @@
+/** Minimal shape of a Web Speech recognition result event — enough to read the
+ *  first transcript. The full SpeechRecognition API isn't in TS's lib.dom yet. */
+interface SpeechResultEvent {
+  results: ArrayLike<ArrayLike<{ transcript: string }>>;
+}
+interface SpeechRecognitionLike {
+  lang: string;
+  interimResults: boolean;
+  onresult: ((event: SpeechResultEvent) => void) | null;
+  start(): void;
+}
+type SpeechRecognitionCtor = new () => SpeechRecognitionLike;
+
+/** Resolve the Chromium (`webkitSpeechRecognition`) or standard constructor, if any. */
+function getSpeechRecognition(): SpeechRecognitionCtor | undefined {
+  if (typeof window === 'undefined') return undefined;
+  const w = window as unknown as {
+    SpeechRecognition?: SpeechRecognitionCtor;
+    webkitSpeechRecognition?: SpeechRecognitionCtor;
+  };
+  return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+}
+
+/**
+ * Web Speech mic → one-shot transcript. Chromium-only (`webkitSpeechRecognition`);
+ * `supported` is false elsewhere so the caller can degrade gracefully. Svelte port
+ * of the kit's `useVoiceInput` (a React hook). It hands the raw transcript to
+ * `onTranscript` and lets the caller decide what to do with it (the composer mic
+ * appends it to the live text). No composer or DOM knowledge.
+ *
+ * @param onTranscript called with the final recognized transcript.
+ * @returns `supported` (Chromium-only availability) and a `start` that begins one
+ *   recognition pass (a no-op when unsupported).
+ */
+export function createVoiceInput(onTranscript: (transcript: string) => void): {
+  supported: boolean;
+  start: () => void;
+} {
+  // Latest-callback ref: keeps `start` stable while always calling the current
+  // `onTranscript`, mirroring the React hook (no stale closure).
+  const cbRef = { current: onTranscript };
+  cbRef.current = onTranscript;
+
+  const supported = getSpeechRecognition() !== undefined;
+
+  const start = () => {
+    const Recognition = getSpeechRecognition();
+    if (!Recognition) return;
+    const rec = new Recognition();
+    rec.lang = 'en-US';
+    rec.interimResults = false;
+    rec.onresult = (event) => cbRef.current(event.results[0][0].transcript);
+    rec.start();
+  };
+
+  return { supported, start };
+}

package/dist/templates/svelte/src/main.ts

@@ -0,0 +1,18 @@
+import { mount } from 'svelte';
+import '@kitn.ai/ui/elements'; // registers the kai-* custom elements (async)
+import '@kitn.ai/ui/theme.tokens.css'; // plain --color-* tokens for the shell (NOT the tailwind source)
+import './index.css';
+import App from './App.svelte';
+
+const target = document.getElementById('app');
+if (!target) throw new Error('Root element not found');
+
+// The kai-* elements register asynchronously. Wait until the tags we use are
+// defined before mounting, so Svelte's `bind:this` + `$effect` property writes land
+// on UPGRADED elements. Raw web-component consumers have no upgrade-race guard
+// (unlike the React wrappers), so a property set before upgrade is lost and static
+// seed data never re-applies. Attributes survive upgrade; array/object properties do not.
+const TAGS = ['kai-resizable', 'kai-resizable-item', 'kai-conversations', 'kai-thread', 'kai-prompt-input', 'kai-button'];
+Promise.all(TAGS.map((t) => customElements.whenDefined(t))).then(() => {
+  mount(App, { target });
+});

package/dist/templates/svelte/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+// Read by both vite-plugin-svelte and svelte-check. `vitePreprocess` lets the
+// `<script lang="ts">` blocks use TypeScript. No SvelteKit here — this is a plain
+// Svelte 5 SPA.
+export default {
+  preprocess: vitePreprocess(),
+};

package/dist/templates/svelte/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Svelte */
+    "verbatimModuleSyntax": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte.ts", "src/**/*.svelte", "src/**/*.d.ts"]
+}

package/dist/templates/svelte/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/dist/templates/svelte/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "types": ["node"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts", "svelte.config.js"]
+}

package/dist/templates/svelte/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// `@kitn.ai/ui` is linked into this example via `workspace:*`, so it resolves
+// through node_modules + the package's `exports` map exactly like a published
+// consumer would — no aliases, no source stubs. Build the kit first (`nx build ui`).
+//
+// Unlike Vue, Svelte needs no `isCustomElement` config: the compiler already
+// treats any hyphenated tag (`kai-*`) as a native custom element and passes
+// props/events straight through to the DOM.
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  server: { port: 5175 },
+});

package/dist/templates/tanstack-start/_gitignore

@@ -0,0 +1,14 @@
+node_modules/
+dist/
+.output/
+.nitro/
+.tanstack/
+.vinxi/
+# Auto-generated by the TanStack Start / Router Vite plugin on first run.
+src/routeTree.gen.ts
+.env
+.env.local
+*.log
+.DS_Store
+vendor/
+*.tgz

package/dist/templates/tanstack-start/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@kitn.ai/ui-example-tanstack-start",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node serve.mjs",
+    "test": "node --test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kitn.ai/ui": "file:../../../packages/ui",
+    "@tanstack/react-router": "^1.170.16",
+    "@tanstack/react-start": "^1.168.26",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.7.2",
+    "vite": "^7.0.0"
+  }
+}

package/dist/templates/tanstack-start/serve.mjs

@@ -0,0 +1,129 @@
+// Minimal production server for the TanStack Start build.
+//
+// `vite build` emits a portable Web-`fetch` handler at dist/server/server.js
+// (not a Node http listener) plus the static client assets in dist/client. A
+// real deploy would pick a target (Node, Bun, a CDN/worker, …); for this example
+// we bridge Node's http to the fetch handler and serve the static assets, so
+// `npm start` runs the SSR build locally. Node 18+ provides the Web globals
+// (Request/Response/ReadableStream) this needs.
+import { createServer } from 'node:http';
+import { readFile, stat } from 'node:fs/promises';
+import { join, extname, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const root = fileURLToPath(new URL('.', import.meta.url));
+const clientDir = join(root, 'dist', 'client');
+// Trailing separator, on purpose. A bare `startsWith(clientDir)` also matches
+// SIBLINGS whose name merely begins with it (dist/client-secret/), so the boundary
+// has to be the separator, not the string.
+const clientPrefix = clientDir.endsWith(sep) ? clientDir : clientDir + sep;
+const { default: handler } = await import('./dist/server/server.js');
+
+const PORT = Number(process.env.PORT) || 3000;
+const TYPES = {
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.map': 'application/json',
+};
+
+const badRequest = () => new Response('Bad Request', { status: 400 });
+
+// Returns a Response to send, or null to hand the request to the SSR handler.
+//
+// THE ORDER HERE IS THE WHOLE POINT: decode, then resolve, then check containment,
+// then touch the disk. `url.pathname` is still percent-encoded, so the string we
+// would validate and the string the filesystem actually opens are different
+// strings. Validate the encoded one and `/..%2f..%2fsecret` sails past a guard that
+// has already pronounced the path safe, because `..%2f` only becomes `../` after
+// the decode. `serve.traversal.test.mjs` pins this down by running the same probes
+// against a build with the check before the decode, and asserting it LEAKS.
+//
+// `new URL` in the request handler does part of the job already: it resolves
+// dot-segments and counts `%2e` as a dot, so plain `..` and `%2e%2e/` never arrive
+// here. It does NOT touch `%2f`, which is exactly the vector this function has to
+// stop. Don't lean on that upstream pass; it is one refactor away from disappearing.
+async function serveStatic(pathname) {
+  if (pathname === '/' || pathname.endsWith('/')) return null;
+
+  let decoded;
+  try {
+    decoded = decodeURIComponent(pathname);
+  } catch {
+    return badRequest(); // decodeURIComponent('%') throws URIError. A 400, not a crash.
+  }
+
+  // Exactly one decode pass, never a loop-until-stable: re-decoding would turn
+  // `%252e%252e` back into `..` and reopen the hole from the other side. After one
+  // pass `%252e%252e` is a literal filename, which is the correct reading of it.
+
+  // A NUL truncates the path at the syscall boundary; a backslash is a separator on
+  // Windows and a legal filename character on POSIX, so the same request would mean
+  // two different files. Neither appears in a real Vite asset name.
+  if (decoded.includes('\0') || decoded.includes('\\')) return badRequest();
+
+  // join(), not resolve(): `decoded` is attacker-controlled and may be absolute, and
+  // resolve() would honour that and walk out of clientDir entirely. join() re-roots
+  // it and normalises away the `..` the decode just produced.
+  const filePath = join(clientDir, decoded);
+  if (filePath === clientDir) return null;
+  if (!filePath.startsWith(clientPrefix)) return badRequest();
+
+  let body;
+  try {
+    if (!(await stat(filePath)).isFile()) return null;
+    body = await readFile(filePath);
+  } catch {
+    return null;
+  }
+  return new Response(body, {
+    headers: { 'content-type': TYPES[extname(filePath)] ?? 'application/octet-stream' },
+  });
+}
+
+const server = createServer(async (req, res) => {
+  try {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+
+    // Hashed client assets are static files; serve them straight from disk.
+    const staticRes = await serveStatic(url.pathname);
+    const webRes = staticRes ?? (await handler.fetch(toRequest(req, url)));
+
+    res.statusCode = webRes.status;
+    webRes.headers.forEach((v, k) => res.setHeader(k, v));
+    if (webRes.body) {
+      const reader = webRes.body.getReader();
+      for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        res.write(value);
+      }
+    }
+    res.end();
+  } catch (err) {
+    console.error(err);
+    res.statusCode = 500;
+    res.end('Internal Server Error');
+  }
+});
+
+function toRequest(req, url) {
+  const headers = new Headers();
+  for (const [k, v] of Object.entries(req.headers)) {
+    if (v !== undefined) headers.set(k, Array.isArray(v) ? v.join(', ') : v);
+  }
+  const hasBody = req.method !== 'GET' && req.method !== 'HEAD';
+  return new Request(url, {
+    method: req.method,
+    headers,
+    body: hasBody ? req : undefined,
+    duplex: hasBody ? 'half' : undefined,
+  });
+}
+
+server.listen(PORT, () => {
+  console.log(`▶ TanStack Start (production) on http://localhost:${PORT}`);
+});