create-kai 0.1.0

package/dist/templates/tanstack-start/src/components/HydrationBadge.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * THE SERVER-RENDERING PROOF, ON THE PAGE.
+ *
+ * This starter's original job was to show that a `kai-*` element survives SSR +
+ * hydration, and this badge is what makes that visible without opening devtools.
+ * It is worth keeping alongside the working chat because HYDRATION FAILURE LOOKS
+ * LIKE SUCCESS: TanStack Start can emit perfectly correct HTML and then throw
+ * during hydration, leaving a page that reads exactly right and does nothing. A
+ * screenshot cannot tell those apart. This badge can, because the only way it
+ * turns green is for client JavaScript to have run.
+ *
+ * HOW IT AVOIDS BEING THE BUG IT REPORTS. The state starts `null` — the same value
+ * on the server and on React's first client render — so the two trees agree and
+ * hydration has nothing to reconcile. Only afterwards does the effect (which never
+ * runs on the server) look at `customElements` and re-render. Reading
+ * `customElements` during render instead would produce "none" in the server HTML
+ * and "5" in the client tree, i.e. a hydration mismatch inside the hydration
+ * detector.
+ *
+ * The tags are polled on a rAF loop rather than checked once: each React wrapper
+ * registers its own element from a layout effect and the element modules load as
+ * dynamic imports, so the definitions land over the next few frames rather than
+ * all at once.
+ */
+const TAGS = ['kai-button', 'kai-conversations', 'kai-thread', 'kai-prompt-input', 'kai-resizable'] as const;
+
+export function HydrationBadge() {
+  const [defined, setDefined] = useState<number | null>(null);
+
+  useEffect(() => {
+    let raf = 0;
+    const check = () => {
+      const n = TAGS.filter((t) => !!customElements.get(t)).length;
+      setDefined(n);
+      if (n < TAGS.length) raf = requestAnimationFrame(check);
+    };
+    check();
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  const hydrated = defined === TAGS.length;
+  return (
+    <span
+      className="hydration"
+      data-testid="registration-status"
+      data-state={hydrated ? 'hydrated' : 'server'}
+      title={
+        hydrated
+          ? `Client JS ran: all ${TAGS.length} kai-* elements are defined in customElements.`
+          : 'Server-rendered markup. The kai-* tags are still bare — no client JS has registered them yet.'
+      }
+    >
+      <span className="hydration-dot" aria-hidden />
+      {defined === null
+        ? 'server-rendered · elements not yet registered'
+        : hydrated
+          ? `hydrated · ${defined}/${TAGS.length} kai-* elements registered`
+          : `hydrating · ${defined}/${TAGS.length} kai-* elements registered`}
+    </span>
+  );
+}

package/dist/templates/tanstack-start/src/components/Sidebar.tsx

@@ -0,0 +1,43 @@
+import { Conversations } from '@kitn.ai/ui/react';
+import type { Theme } from '../theme';
+import type { Conversation } from '../chat-data';
+
+interface SidebarProps {
+  theme: Theme;
+  conversations: Conversation[];
+  activeId: string;
+  collapsed: boolean;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onToggle: () => void;
+}
+
+/**
+ * The conversation rail — a thin wrapper over `<kai-conversations>`.
+ *
+ * `conversations` is an ARRAY, so it crosses as a JS property rather than an HTML
+ * attribute. That is the half of the contract server rendering makes visible: the
+ * SSR pass emits `<kai-conversations></kai-conversations>` with no `conversations`
+ * attribute anywhere, because the wrapper assigns the property from a layout
+ * effect that only ever runs in the browser.
+ *
+ * The `.sidebar` div owns the shell's right border (kept OFF the element so it follows
+ * the shell's light/dark tokens, not the light-mode ones the element pins on itself at
+ * `:host`).
+ */
+export function Sidebar({ theme, conversations, activeId, collapsed, onSelect, onNewChat, onToggle }: SidebarProps) {
+  return (
+    <aside className="sidebar">
+      <Conversations
+        theme={theme}
+        groups={[]} /* flat list: the element buckets `conversations` by recency itself */
+        conversations={conversations}
+        activeId={activeId}
+        collapsed={collapsed}
+        onConversationSelect={(e) => onSelect(e.detail.id)}
+        onNewChat={onNewChat}
+        onToggleSidebar={onToggle}
+      />
+    </aside>
+  );
+}

package/dist/templates/tanstack-start/src/components/ThemeToggle.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@kitn.ai/ui/react';
+import type { Theme } from '../theme';
+import { MoonIcon, SunIcon } from './icons';
+
+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 it carries the accessible
+ * label; the glyph is decorative (`aria-hidden`) and sits in the `icon` slot.
+ *
+ * The glyph is chosen from `theme`, which is route state seeded to the same value
+ * on both sides of hydration — NOT from `prefers-color-scheme`, which the server
+ * cannot read and which would therefore render a different icon than the client.
+ */
+export function ThemeToggle({ theme, onToggle }: ThemeToggleProps) {
+  const Glyph = theme === 'light' ? MoonIcon : SunIcon;
+  return (
+    <Button theme={theme} variant="ghost" size="icon" label="Toggle light/dark theme" onClick={onToggle}>
+      <Glyph slot="icon" aria-hidden />
+    </Button>
+  );
+}

package/dist/templates/tanstack-start/src/components/ThreadView.tsx

@@ -0,0 +1,48 @@
+import { Thread } from '@kitn.ai/ui/react';
+import type { ChatMessage } from '@kitn.ai/ui/react';
+import { partsToText } from '@kitn.ai/ui/state';
+import type { Theme } from '../theme';
+
+interface ThreadViewProps {
+  theme: Theme;
+  messages: ChatMessage[];
+}
+
+/**
+ * The scrolling message list, and the piece that carries the server-rendering
+ * proof.
+ *
+ * `<kai-thread>` (React `<Thread>`) owns the message rendering, the centered
+ * fixed-width column and stick-to-bottom scroll. The server emits it as an EMPTY
+ * tag — no `messages` attribute, no serialized thread — and the array only arrives
+ * once the wrapper's layout effect assigns `el.messages` in the browser. Streaming
+ * is that same channel repeated: a NEW array reference per chunk, which is why
+ * mutating the existing array in place would render nothing.
+ *
+ * This component just bakes the per-message actions onto the assistant turns and
+ * wires the custom `speak` action to the browser's speech synthesis. `copy` (and
+ * the feedback votes) are handled inside the element.
+ */
+export function ThreadView({ theme, messages }: ThreadViewProps) {
+  // <Thread> reads `actions` off each message; only assistant replies get them.
+  const withActions: ChatMessage[] = messages.map((m) =>
+    m.role === 'assistant'
+      ? { ...m, actions: ['copy', { id: 'speak', label: 'Read aloud', icon: 'volume-2' }] }
+      : m,
+  );
+  return (
+    <Thread
+      className="thread"
+      theme={theme}
+      messages={withActions}
+      onMessageAction={(e) => {
+        if (e.detail.action === 'speak') {
+          const m = messages.find((x) => x.id === e.detail.messageId);
+          if (!m) return;
+          window.speechSynthesis.cancel();
+          window.speechSynthesis.speak(new SpeechSynthesisUtterance(partsToText(m.parts)));
+        }
+      }}
+    />
+  );
+}

package/dist/templates/tanstack-start/src/components/icons/MoonIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Moon glyph — shown in light mode (tap the toggle → dark). moon/sun aren't in the
+ * kit's `<Icon>` set, so the example owns them. Props spread straight onto the
+ * `<svg>`, so `slot="icon"`, `className`, and `aria-hidden` pass through and it
+ * drops into `<Button>`'s icon slot.
+ */
+export function MoonIcon({ size = 20, ...props }: { size?: number } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  );
+}

package/dist/templates/tanstack-start/src/components/icons/SunIcon.tsx

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+
+/**
+ * Sun glyph — shown in dark mode (tap the toggle → light). See `MoonIcon` for why
+ * the example owns these icons. Props spread straight onto the `<svg>`.
+ */
+export function SunIcon({ size = 20, ...props }: { size?: number } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...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" />
+    </svg>
+  );
+}

package/dist/templates/tanstack-start/src/components/icons/index.ts

@@ -0,0 +1,2 @@
+export { MoonIcon } from './MoonIcon';
+export { SunIcon } from './SunIcon';

package/dist/templates/tanstack-start/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useConversations } from './useConversations';

package/dist/templates/tanstack-start/src/hooks/useConversations.ts

@@ -0,0 +1,42 @@
+import { useCallback, useState } from 'react';
+import type { KaiChatController } from '@kitn.ai/ui/react';
+import { THREADS, newId, type Conversation } from '../chat-data';
+
+/**
+ * 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 `useKaiChat` controller so it can read the live
+ * messages when stashing and reset them when loading another thread.
+ *
+ * In-memory on purpose — this is where a real app would read and write a database
+ * from a TanStack server function. Nothing here runs on the server: the hook's
+ * initial state is the same on both sides of hydration, and every mutation is
+ * driven by a user event.
+ */
+export function useConversations(chat: KaiChatController, initial: Conversation[]) {
+  const [conversations, setConversations] = useState<Conversation[]>(initial);
+  const [activeId, setActiveId] = useState(initial[0].id);
+
+  const selectConversation = useCallback(
+    (id: string) => {
+      THREADS[activeId] = chat.messages; // stash the open thread
+      setActiveId(id);
+      chat.setMessages(THREADS[id] ?? []); // load the picked one
+    },
+    [activeId, chat],
+  );
+
+  const newChat = useCallback(() => {
+    const id = newId();
+    THREADS[activeId] = chat.messages;
+    THREADS[id] = [];
+    setConversations((cs) => [
+      { id, title: 'New conversation', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      ...cs,
+    ]);
+    setActiveId(id);
+    chat.setMessages([]);
+  }, [activeId, chat]);
+
+  return { conversations, activeId, selectConversation, newChat };
+}

package/dist/templates/tanstack-start/src/router.tsx

@@ -0,0 +1,16 @@
+import { createRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  });
+  return router;
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/dist/templates/tanstack-start/src/routes/__root.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import {
+  Outlet,
+  createRootRoute,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router';
+
+// The kit's design tokens, as PLAIN COMPILED CSS.
+//
+// IT MUST BE `theme.tokens.css`, NOT `theme.css`. They are not two spellings of
+// one file: `@kitn.ai/ui/theme.css` is Tailwind v4 SOURCE — its light tokens live
+// inside an `@theme { … }` block, which is a Tailwind at-rule, not CSS. The test
+// is whether TAILWIND PROCESSES THE FILE, not which specifier you import: this app
+// runs none, so `theme.css` would reach the browser verbatim, where an unknown
+// at-rule is DISCARDED WHOLE. (The Solid starter imports that same file and is
+// right to — it runs Tailwind, so the block is compiled rather than discarded.)
+//
+// The damage is narrow, which is why it survives review. Dark mode is unaffected
+// (those tokens are a plain `.dark` rule), and anything inside a `kai-*` element
+// still resolves. What loses its colours is the chrome OUTSIDE every element —
+// here `html`/`body` and `.app`. It builds green either way.
+//
+// Importing it from the root route is what puts it in the SERVER-rendered <head>:
+// React 19 hoists the stylesheet link out of the module graph and emits it with
+// `data-precedence`, so the SSR'd document already carries
+// `<link rel="stylesheet">` and there is no flash of unstyled custom elements.
+import '@kitn.ai/ui/theme.tokens.css';
+import '../styles.css';
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { title: '@kitn.ai/ui — TanStack Start example' },
+    ],
+  }),
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/dist/templates/tanstack-start/src/routes/index.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router';
+import { Button, Resizable, ResizableItem, useKaiChat } from '@kitn.ai/ui/react';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';
+import { CONVERSATIONS, THREADS, SUGGESTIONS, TRIGGERS, newId, mockResponse } from '../chat-data';
+import { Sidebar } from '../components/Sidebar';
+import { ThreadView } from '../components/ThreadView';
+import { Composer } from '../components/Composer';
+import { ThemeToggle } from '../components/ThemeToggle';
+import { HydrationBadge } from '../components/HydrationBadge';
+import { useConversations } from '../hooks';
+import type { Theme } from '../theme';
+
+/**
+ * A mini chat **workspace composed by hand** from @kitn.ai/ui's individual
+ * elements — server-rendered by TanStack Start, then hydrated and streamed into.
+ *
+ *   <Resizable>/<ResizableItem>  — the draggable sidebar | main split
+ *   <Conversations>  — the sidebar list (fed `conversations`, emits select/new)
+ *   <Thread>         — the scrolling message list (kai-thread; stick-to-bottom built in)
+ *   <PromptInput>    — the composer at the bottom
+ *
+ * `useKaiChat` owns the message array + streaming; everything else is plain React
+ * state. Swap `mockResponse(text)` for a real `fetch` to ship a real app.
+ *
+ * WHAT THIS ROUTE PROVES ABOUT SERVER RENDERING
+ * ---------------------------------------------
+ * This starter exists to show that the `kai-*` web components survive SSR. It used
+ * to show that with a static `<Chat>` fed a frozen array. A composed thread that
+ * hydrates and then STREAMS proves strictly more, so the demonstration moved here
+ * rather than being kept alongside:
+ *
+ *   1. The server emits BARE TAGS. `@kitn.ai/ui/react` registers each element from
+ *      a layout effect, and layout effects do not run on the server, so the SSR'd
+ *      HTML contains `<kai-thread></kai-thread>` and nothing inside it. View source
+ *      and you will find empty elements — that is correct, not a bug.
+ *   2. Array and object props NEVER become attributes. `messages`, `conversations`
+ *      and `triggers` are assigned as live DOM properties after hydration, so
+ *      there is no serialize/parse step and no `messages="[{...}]"` in the markup.
+ *      The static version proved this ONCE, at mount.
+ *   3. Streaming proves the channel KEEPS working. Every chunk assigns a new
+ *      `messages` array reference to the same element that the server rendered
+ *      empty. A page that hydrated badly can still look right; it cannot stream.
+ *      The badge in the top bar reports which of those you are looking at.
+ *
+ * Nothing on this page is fetched from the server: no loader, no server function.
+ * The reply comes from the kit's mock responder in the browser. That keeps the SSR
+ * question — does the ELEMENT survive hydration — separate from a data-loading
+ * question this starter is not about.
+ */
+export const Route = createFileRoute('/')({
+  component: Home,
+});
+
+function Home() {
+  const [theme, setTheme] = useState<Theme>('dark');
+  const [collapsed, setCollapsed] = useState(false);
+  const chat = useKaiChat({ initialMessages: THREADS[CONVERSATIONS[0].id] ?? [] });
+  const { conversations, activeId, selectConversation, newChat } = useConversations(chat, CONVERSATIONS);
+
+  const send = useCallback(
+    async (raw: string) => {
+      const text = raw.trim();
+      if (!text) return;
+      // The Composer already cleared its own input; here we just append the user
+      // message and stream the (mock) assistant reply.
+      chat.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+      const stream = chat.streamAssistant();
+      // NO BACKEND AND NO PROVIDER. mockResponse() yields canned SSE frames that
+      // go through the SAME reader a real model's response would, so this preview
+      // exercises the real path. To go live, only this one expression changes —
+      // `mockResponse(text)` becomes a POST to a TanStack server route, with
+      // toOpenAIMessages(chat.messages) as the body. The line below stays.
+      await readOpenAIStream(mockResponse(text), stream);
+      stream.done();
+    },
+    [chat],
+  );
+
+  return (
+    <div className={`app${theme === 'dark' ? ' dark' : ''}`}>
+      {/* <kai-resizable> owns the sidebar width + the divider. The handle defaults
+          to the `line` hairline (transparent at rest, tinting on hover/drag);
+          collapsing the sidebar maps to <ResizableItem collapsed>. */}
+      <Resizable theme={theme} orientation="horizontal">
+        <ResizableItem theme={theme} size="280px" min="220px" max="420px" collapsed={collapsed}>
+          <Sidebar
+            theme={theme}
+            conversations={conversations}
+            activeId={activeId}
+            collapsed={collapsed}
+            onSelect={selectConversation}
+            onNewChat={newChat}
+            onToggle={() => setCollapsed((c) => !c)}
+          />
+        </ResizableItem>
+
+        <ResizableItem theme={theme}>
+          <main className="main">
+            <header className="bar">
+              <div className="bar-left">
+                {collapsed && (
+                  <Button
+                    theme={theme}
+                    variant="ghost"
+                    size="icon"
+                    icon="panel-left"
+                    label="Show sidebar"
+                    onClick={() => setCollapsed(false)}
+                  />
+                )}
+                <span className="brand">@kitn.ai/ui · composed chat on TanStack Start</span>
+              </div>
+              <div className="bar-right">
+                <HydrationBadge />
+                <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))} />
+              </div>
+            </header>
+
+            <ThreadView theme={theme} messages={chat.messages} />
+
+            <Composer
+              theme={theme}
+              loading={chat.loading}
+              suggestions={chat.messages.length <= 2 ? SUGGESTIONS : []}
+              triggers={TRIGGERS}
+              onSubmit={send}
+              onSuggestionClick={send}
+            />
+          </main>
+        </ResizableItem>
+      </Resizable>
+    </div>
+  );
+}

package/dist/templates/tanstack-start/src/styles.css

@@ -0,0 +1,153 @@
+/* The app shell. Colors come from the kit's `--color-*` tokens, imported in
+   `routes/__root.tsx` as `@kitn.ai/ui/theme.tokens.css`.
+
+   READ THE TOKEN IMPORT NOTE IN `__root.tsx` BEFORE CHANGING IT. The tokens have
+   to be the COMPILED stylesheet, not `@kitn.ai/ui/theme.css` — that one is
+   Tailwind v4 source, this app runs no Tailwind, and `html`/`body`/`.app` would
+   silently lose their light-mode colours with a completely green build. The rules
+   that sit INSIDE <kai-resizable> (`.sidebar`, `.bar`, `.composer`) would survive
+   it, which is what makes the failure hard to see. */
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* Full-height workspace shell. `.dark` is toggled on THIS element rather than on
+   <html>, which is what keeps the theme out of the server-rendered document: the
+   theme is route state, so the server and the first client render agree on it and
+   there is nothing for hydration to disagree about. <kai-resizable> fills this box
+   (its `:host` is `height:100%`) and owns the sidebar | main split. */
+.app {
+  height: 100dvh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+
+/* The sidebar is its own surface: `--color-muted` sits a step off
+   `--color-background` in both themes. That step is subtle in light mode, so a 1px
+   right border marks the at-rest division — <kai-resizable>'s `line` handle is
+   transparent until hover/drag, so the boundary has to come from the panel itself.
+   `box-sizing: border-box` keeps the border inside the 280px item so it doesn't
+   shift the content width. */
+.sidebar {
+  background: var(--color-muted);
+  border-right: 1px solid var(--color-border);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bar-left,
+.bar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The hydration badge (see components/HydrationBadge.tsx). Two states, and the
+   colours are the point: server-rendered HTML shows the neutral one, and it only
+   goes green once a client effect has run. */
+.hydration {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  padding: 0.2rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+  white-space: nowrap;
+}
+
+.hydration[data-state='hydrated'] {
+  color: var(--color-foreground);
+}
+
+.hydration-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--color-muted-foreground);
+}
+
+.hydration[data-state='hydrated'] .hydration-dot {
+  background: #22c55e;
+}
+
+/* <kai-thread> scrolls internally and centers its own fixed-width column, so the
+   host just needs to fill the remaining height of the main flex column. */
+.thread {
+  flex: 1;
+  min-height: 0;
+}
+
+/* No top divider above the input — the composer floats against the thread. Extra
+   bottom padding lifts the input + hint off the viewport edge. */
+.composer {
+  padding: 0.75rem 1rem 1.5rem;
+}
+
+/* Match the composer to the centered message column above it. */
+.composer > * {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.composer-hint {
+  margin: 0.5rem auto 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-muted-foreground);
+}
+
+.composer-hint kbd {
+  font-family: inherit;
+  font-size: 0.6875rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}

package/dist/templates/tanstack-start/src/theme.ts

@@ -0,0 +1,10 @@
+/**
+ * The shell's color mode.
+ *
+ * Its own module rather than an export from the route: `src/routes/*` is compiled
+ * by the TanStack Router plugin, which rewrites those files to build the route
+ * tree, so components in `src/components/` importing a type back out of a route
+ * would point the dependency the wrong way round. Everything shared between the
+ * route and its components lives outside `routes/`.
+ */
+export type Theme = 'light' | 'dark';