create-kai 0.1.0

package/dist/templates/solid/src/components/Composer.tsx

@@ -0,0 +1,90 @@
+import { createSignal, For, Show } from 'solid-js';
+import {
+  Button,
+  PromptInput,
+  PromptInputActions,
+  PromptInputTextarea,
+  PromptSuggestion,
+} from '@kitn.ai/ui/solid';
+import { ArrowUpIcon, PlusIcon } from './icons';
+
+interface ComposerProps {
+  loading: () => boolean;
+  suggestions: () => string[];
+  onSubmit: (value: string) => void;
+}
+
+/**
+ * The bottom composer: the suggestion chips, the text input and the send button.
+ *
+ * It owns the DRAFT — the text being typed — and nothing else. That is the seam
+ * worth noticing: the draft is the composer's business, and the moment it is
+ * submitted it stops being a draft and becomes a message, which is `App`'s. So
+ * `onSubmit` hands the text up and the input clears itself here; the parent
+ * never sees a keystroke.
+ *
+ * `<PromptInput>` is CONTROLLED here (`value` + `onValueChange`), which is the
+ * plain-string case and is fine. The React starter deliberately leaves its
+ * `<kai-prompt-input>` uncontrolled instead, because assigning a string value to
+ * the ELEMENT re-applies the property and collapses its shadow-DOM selection,
+ * which breaks the caret-anchored `/` and `@` trigger menus. That is a web
+ * component concern; these are Solid components rendering into the light DOM,
+ * with no shadow root and no trigger menus, so the simple form applies.
+ */
+export function Composer(props: ComposerProps) {
+  const [draft, setDraft] = createSignal('');
+
+  const submit = () => {
+    const text = draft().trim();
+    if (!text || props.loading()) return;
+    setDraft('');
+    props.onSubmit(text);
+  };
+
+  return (
+    <div class="shrink-0 bg-background px-3 pb-3 md:px-5 md:pb-5">
+      <div class="mx-auto max-w-3xl">
+        {/* Suggestions fill the draft rather than sending it, so the user can edit
+            before committing. They fall away once the thread is underway. */}
+        <Show when={props.suggestions().length > 0}>
+          <div class="flex flex-wrap gap-2 pb-3">
+            <For each={props.suggestions()}>
+              {(text) => (
+                <PromptSuggestion onClick={() => setDraft(text)}>{text}</PromptSuggestion>
+              )}
+            </For>
+          </div>
+        </Show>
+
+        <PromptInput value={draft()} onValueChange={setDraft} onSubmit={submit}>
+          <div class="flex flex-col">
+            <PromptInputTextarea placeholder="Ask about SolidJS…" class="min-h-[44px] pt-3 pl-4" />
+            <PromptInputActions class="mt-2 flex w-full items-center justify-between gap-2 px-3 pb-3">
+              <div class="flex items-center gap-2">
+                {/* Disabled on purpose: attachments are a real feature of the kit
+                    (<kai-attachments>), and wiring them is beyond a starter. */}
+                <Button variant="outline" size="icon-sm" class="rounded-full" disabled>
+                  <PlusIcon size={16} aria-hidden />
+                  <span class="sr-only">Attach a file</span>
+                </Button>
+              </div>
+              <Button
+                size="icon-sm"
+                class="rounded-full"
+                disabled={!draft().trim() || props.loading()}
+                onClick={submit}
+              >
+                <ArrowUpIcon size={16} aria-hidden />
+                <span class="sr-only">Send message</span>
+              </Button>
+            </PromptInputActions>
+          </div>
+        </PromptInput>
+
+        <p class="mt-2 text-center text-xs text-muted-foreground">
+          Replies come from the kit's mock responder — no model was contacted.
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/templates/solid/src/components/Sidebar.tsx

@@ -0,0 +1,36 @@
+import { ConversationList } from '@kitn.ai/ui/solid';
+import type { ConversationGroup, ConversationSummary } from '@kitn.ai/ui/solid';
+
+interface SidebarProps {
+  groups: ConversationGroup[];
+  conversations: () => ConversationSummary[];
+  activeId: () => string;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onToggleSidebar: () => void;
+}
+
+/**
+ * The conversation rail — a thin wrapper over `<ConversationList>`, which owns
+ * the grouping, the search box, the active highlight and the "New chat" button.
+ *
+ * The `<aside>` around it carries the surface: `--color-muted` sits one step off
+ * `--color-background` in both themes, and a 1px right border marks the
+ * sidebar | main division at rest, since `<ResizableHandle>` only tints on
+ * hover/drag. Kept on the wrapper rather than on the element so it follows the
+ * shell's light/dark tokens.
+ */
+export function Sidebar(props: SidebarProps) {
+  return (
+    <aside class="h-full min-h-0 overflow-hidden border-r border-border bg-muted">
+      <ConversationList
+        groups={props.groups}
+        conversations={props.conversations()}
+        activeId={props.activeId()}
+        onSelect={props.onSelect}
+        onNewChat={props.onNewChat}
+        onToggleSidebar={props.onToggleSidebar}
+      />
+    </aside>
+  );
+}

package/dist/templates/solid/src/components/ThemeToggle.tsx

@@ -0,0 +1,25 @@
+import { Show } from 'solid-js';
+import { Button } from '@kitn.ai/ui/solid';
+import { MoonIcon, SunIcon } from './icons';
+import type { Theme } from '../lib/types';
+
+interface ThemeToggleProps {
+  theme: () => Theme;
+  onToggle: () => void;
+}
+
+/**
+ * Light/dark switch for the top bar. Shows the moon in light mode (tap → dark)
+ * and the sun in dark mode. The button is icon-only, so the glyph is decorative
+ * (`aria-hidden`) and the accessible name comes from the `sr-only` span.
+ */
+export function ThemeToggle(props: ThemeToggleProps) {
+  return (
+    <Button variant="ghost" size="icon-sm" onClick={props.onToggle}>
+      <Show when={props.theme() === 'light'} fallback={<SunIcon size={18} aria-hidden />}>
+        <MoonIcon size={18} aria-hidden />
+      </Show>
+      <span class="sr-only">Toggle light/dark theme</span>
+    </Button>
+  );
+}

package/dist/templates/solid/src/components/ThreadView.tsx

@@ -0,0 +1,122 @@
+import { createMemo, createSignal, For, Show } from 'solid-js';
+import {
+  ChatContainer,
+  ChatContainerContent,
+  ChatContainerScrollAnchor,
+  Message,
+  MessageBody,
+  ScrollButton,
+} from '@kitn.ai/ui/solid';
+import type { ChatMessage, FeedbackVote } from '@kitn.ai/ui/solid';
+import { partsToText } from '@kitn.ai/ui/state';
+import { ASSISTANT_ACTIONS } from '../chat-data';
+
+interface ThreadViewProps {
+  messages: () => ChatMessage[];
+  onRegenerate: (messageId: string) => void;
+}
+
+/**
+ * The scrolling message list.
+ *
+ * This is the component that makes the Solid starter different from the other
+ * five: React/Vue/Svelte/Angular/vanilla drop in `<kai-thread>`, one tag that
+ * owns the whole list. Solid renders the components DIRECTLY, so the list is
+ * spelled out — `<ChatContainer>` for the scroll box and stick-to-bottom,
+ * `<Message>` per turn, `<MessageBody>` to walk that turn's ordered `parts` and
+ * render each kind (text as markdown, reasoning as a collapsible block, a tool
+ * call as a panel, cards through the card registry).
+ *
+ * It owns the action bar's transient state — the vote and the "copied" flag —
+ * because `<MessageBody>` is prop-driven and holds no signals of its own. That
+ * is view state, so it lives with the view. `regenerate` is NOT: it re-runs the
+ * gateway, so it goes up to `App`.
+ */
+export function ThreadView(props: ThreadViewProps) {
+  const [votes, setVotes] = createSignal<Record<string, FeedbackVote | undefined>>({});
+  const [copiedId, setCopiedId] = createSignal<string | null>(null);
+
+  // The list's KEYS, not the messages. `<For>` is reference-keyed, and every
+  // delta rebuilds the streaming message as a new object — so keying on the
+  // messages themselves makes each chunk look like a brand-new list and rebuilds
+  // the whole row. Diffing ids (plain strings) instead means a delta produces an
+  // identical key list, nothing moves, and the row survives the update.
+  //
+  // Not `<Index>`: position-keying leaves a row's local state (an open tool or
+  // reasoning panel) with the SLOT rather than the message, so prepending older
+  // turns would shift every open disclosure onto the wrong message. Position is
+  // the right key INSIDE a message, which is what `<MessageBody>` does.
+  const messageKeys = createMemo(() => props.messages().map((m) => m.id));
+
+  /** One handler for the whole action bar — `id` is the built-in action name. */
+  const handleAction = (msg: ChatMessage, id: string) => {
+    if (id === 'copy') {
+      void navigator.clipboard?.writeText(partsToText(msg.parts));
+      setCopiedId(msg.id);
+      setTimeout(() => setCopiedId((c) => (c === msg.id ? null : c)), 2000);
+      return;
+    }
+    if (id === 'like' || id === 'dislike') {
+      setVotes((prev) => ({ ...prev, [msg.id]: prev[msg.id] === id ? undefined : id }));
+      return;
+    }
+    if (id === 'regenerate') props.onRegenerate(msg.id);
+  };
+
+  return (
+    <div class="relative flex-1 overflow-y-auto">
+      <ChatContainer class="h-full">
+        <ChatContainerContent class="space-y-0 px-5 pt-4 pb-12">
+          <For each={messageKeys()}>
+            {(_id, i) => (
+              // The row reads its message through <For>'s index accessor, never
+              // through a captured value: it outlives the delta that replaced its
+              // object, so every read has to go through msg() for the new content
+              // to land. <Show> supplies the non-null accessor and covers the
+              // frame where a removal has shortened the array.
+              <Show when={props.messages()[i()]}>
+                {(msg) => (
+                  <Message
+                    // `role` is the SPEAKER, not an ARIA role — <Message> turns it
+                    // into role="article" plus an aria-label naming the speaker,
+                    // and a data-role hook for styling. Omit it and the row is an
+                    // unlabelled <div> that tells a screen reader nothing about
+                    // who is talking. That is #176: every framework reading
+                    // `m.role` for its alignment classes and then not passing it
+                    // on. The alignment below reads the same value — if you are
+                    // deriving CSS from a semantic field, the semantics have to
+                    // reach the DOM too.
+                    role={msg().role}
+                    class={`mx-auto flex w-full max-w-3xl flex-col gap-2 px-6 ${
+                      msg().role === 'user' ? 'items-end' : 'items-start'
+                    }`}
+                  >
+                    <div class="group flex w-full flex-col gap-0">
+                      <MessageBody
+                        parts={msg().parts}
+                        isUser={msg().role === 'user'}
+                        markdown={msg().role !== 'user'}
+                        actions={msg().role === 'user' ? undefined : ASSISTANT_ACTIONS}
+                        actionsReveal="hover"
+                        activeFeedback={votes()[msg().id]}
+                        copied={copiedId() === msg().id}
+                        onAction={(id) => handleAction(msg(), id)}
+                      />
+                    </div>
+                  </Message>
+                )}
+              </Show>
+            )}
+          </For>
+
+          <ChatContainerScrollAnchor />
+        </ChatContainerContent>
+
+        {/* Scroll-to-bottom button */}
+        <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
+          <ScrollButton class="shadow-sm" />
+        </div>
+      </ChatContainer>
+    </div>
+  );
+}

package/dist/templates/solid/src/components/icons/index.tsx

@@ -0,0 +1,84 @@
+import { splitProps, type JSX } from 'solid-js';
+
+/**
+ * The four glyphs this example needs, hand-rolled.
+ *
+ * WHY NOT AN ICON PACKAGE. This starter used to pull `lucide-solid` in for two
+ * of them. Four inline `<path>`s are smaller than the dependency, and they keep
+ * the starter's runtime dependencies to exactly `solid-js` + the kit — which is
+ * the more honest demonstration, since a reader can then tell which of the
+ * things on screen come from `@kitn.ai/ui` and which are their own. Mirrors
+ * `examples/starters/react/src/components/icons/`, where moon/sun are owned by
+ * the example for the same reason: they are not in the kit's `<Icon>` set.
+ *
+ * Props spread onto the `<svg>`, so `class` and `aria-hidden` pass through.
+ * `splitProps` rather than destructuring: destructuring a Solid props object
+ * reads every field once, eagerly, and severs reactivity — these are static
+ * today, but the habit is the point in a file people copy.
+ */
+export type IconProps = { size?: number } & JSX.SvgSVGAttributes<SVGSVGElement>;
+
+function Glyph(props: IconProps & { children: JSX.Element }) {
+  const [local, rest] = splitProps(props, ['size', 'children']);
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={local.size ?? 20}
+      height={local.size ?? 20}
+      fill="none"
+      stroke="currentColor"
+      stroke-width={2}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...rest}
+    >
+      {local.children}
+    </svg>
+  );
+}
+
+/** Moon — shown in light mode (tap the toggle → dark). */
+export function MoonIcon(props: IconProps) {
+  return (
+    <Glyph {...props}>
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </Glyph>
+  );
+}
+
+/** Sun — shown in dark mode (tap the toggle → light). */
+export function SunIcon(props: IconProps) {
+  return (
+    <Glyph {...props}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </Glyph>
+  );
+}
+
+/** Submit arrow, on the composer's send button. */
+export function ArrowUpIcon(props: IconProps) {
+  return (
+    <Glyph {...props}>
+      <path d="M12 19V5" />
+      <path d="m5 12 7-7 7 7" />
+    </Glyph>
+  );
+}
+
+/** Attach — the disabled affordance on the composer, left of centre. */
+export function PlusIcon(props: IconProps) {
+  return (
+    <Glyph {...props}>
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
+    </Glyph>
+  );
+}

package/dist/templates/solid/src/index.tsx

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import "./styles.css";
+import App from "./App";
+
+render(() => <App />, document.getElementById("root")!);

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

@@ -0,0 +1,64 @@
+import { createSignal, type Accessor } from 'solid-js';
+import type { ChatMessage } from '@kitn.ai/ui/solid';
+import {
+  appendMessage,
+  createAssistantStream,
+  onStreamSettled,
+  type AssistantStream,
+  type SetMessages,
+} from '@kitn.ai/ui/state';
+
+/**
+ * Solid port of the kit's `useKaiChat` (a React hook), built on the SAME
+ * framework-neutral state core (`@kitn.ai/ui/state`) the React hook and the
+ * Svelte starter's `createChat` are built on. It owns the message array + the
+ * `loading` flag and exposes ergonomic ops.
+ *
+ * WHY A `createSignal` AND NOT A STORE. A store's whole selling point is
+ * fine-grained mutation of nested fields, and that is the one thing the state
+ * core must not do: `createAssistantStream` drives everything through a
+ * functional-updater setter that returns a BRAND-NEW array with a brand-new
+ * message object inside it, because a fresh reference is what the thread reads
+ * as "this changed". A store would either fight that (deep-diffing a whole array
+ * we already know is new) or invite someone to reach in and mutate `parts` in
+ * place, which does not re-render. Signals model "replace the value" exactly,
+ * so the seam between the kit's core and Solid is one line — `set` below.
+ *
+ * `messages` and `loading` are returned as ACCESSORS, not values. Reading them
+ * is what subscribes a component, so handing back `messages()` here would
+ * snapshot the array once at call time and never update. Callers write
+ * `chat.messages()`.
+ */
+export interface ChatController {
+  messages: Accessor<ChatMessage[]>;
+  loading: Accessor<boolean>;
+  append: (msg: ChatMessage) => void;
+  setMessages: (next: ChatMessage[]) => void;
+  streamAssistant: (init?: Partial<ChatMessage>) => AssistantStream;
+}
+
+export function createChat(initialMessages: ChatMessage[] = []): ChatController {
+  const [messages, setMessagesSignal] = createSignal<ChatMessage[]>([...initialMessages]);
+  const [loading, setLoading] = createSignal(false);
+
+  // The one universal contract the state core drives: a functional-updater
+  // setter (React setState shape). Solid's setter already takes an updater, so
+  // this is a straight pass-through — the arrow is kept rather than writing
+  // `setMessagesSignal` bare because a signal setter's updater overload is only
+  // selected for a FUNCTION argument, and being explicit about which overload we
+  // mean costs nothing and reads unambiguously.
+  const set: SetMessages = (updater) => setMessagesSignal((prev) => updater(prev));
+
+  return {
+    messages,
+    loading,
+    append: (msg) => set((prev) => appendMessage(prev, msg)),
+    // A fresh array, so swapping conversations is a reference change like every
+    // other update rather than a special case the thread has to detect.
+    setMessages: (next) => setMessagesSignal([...next]),
+    streamAssistant: (init) => {
+      setLoading(true);
+      return onStreamSettled(createAssistantStream(set, init), () => setLoading(false));
+    },
+  };
+}

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

@@ -0,0 +1,54 @@
+import { createSignal, type Accessor } from 'solid-js';
+import type { ConversationSummary } from '@kitn.ai/ui/solid';
+import { THREADS, newId } from '../chat-data';
+import type { ChatController } from './chat';
+
+/**
+ * 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` and the Svelte `createConversations`.
+ */
+export interface ConversationsController {
+  conversations: Accessor<ConversationSummary[]>;
+  activeId: Accessor<string>;
+  selectConversation: (id: string) => void;
+  newChat: () => void;
+}
+
+export function createConversations(
+  chat: ChatController,
+  initial: ConversationSummary[],
+): ConversationsController {
+  const [conversations, setConversations] = createSignal<ConversationSummary[]>([...initial]);
+  const [activeId, setActiveId] = createSignal(initial[0].id);
+
+  const selectConversation = (id: string) => {
+    THREADS[activeId()] = chat.messages(); // stash the open thread
+    setActiveId(id);
+    chat.setMessages(THREADS[id] ?? []); // load the picked one
+  };
+
+  const newChat = () => {
+    const id = newId();
+    THREADS[activeId()] = chat.messages();
+    THREADS[id] = [];
+    setConversations((prev) => [
+      {
+        id,
+        title: 'New conversation',
+        groupId: 'today',
+        scope: { type: 'document' },
+        messageCount: 0,
+        lastMessageAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+      ...prev,
+    ]);
+    setActiveId(id);
+    chat.setMessages([]);
+  };
+
+  return { conversations, activeId, selectConversation, newChat };
+}

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

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

package/dist/templates/solid/src/styles.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+@import "@kitn.ai/ui/theme.css";
+@source "../node_modules/@kitn.ai/ui";
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}

package/dist/templates/solid/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [
+    solidPlugin(),
+    tailwindcss(),
+  ],
+});

package/dist/templates/svelte/_gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store

package/dist/templates/svelte/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@kitn.ai/ui Svelte example</title>
+    <style>
+      * { box-sizing: border-box; margin: 0; padding: 0; }
+      html, body, #app { height: 100%; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/dist/templates/svelte/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@kitn.ai/ui-example-svelte",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings && vite build",
+    "preview": "vite preview",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings"
+  },
+  "dependencies": {
+    "@kitn.ai/ui": "workspace:*",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "@types/node": "^22.19.21",
+    "svelte-check": "^4.0.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0"
+  }
+}