create-kai 0.1.0

package/dist/templates/vue/src/components/Composer.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { KaiPromptInputElementProps } from '@kitn.ai/ui/elements';
+import type { Theme } from '../types';
+import { useVoiceInput } from '../composables';
+
+/**
+ * The bottom composer. Wraps `<kai-prompt-input>` and owns the input-DOM concerns:
+ * the element ref, a live text mirror, clear-on-submit, and seeding voice.
+ *
+ * The prompt input stays UNCONTROLLED so the `/`+`@` trigger menus keep a live
+ * caret. We NEVER bind `:value` with a plain STRING: that flips the element into
+ * controlled mode, which re-applies the property and collapses the shadow-DOM
+ * selection, disabling the caret-anchored menu. So clear-on-submit goes through
+ * the element's `clear()` method, and voice seeds a ComposerDoc (a non-string
+ * value is a one-time seed that leaves the input uncontrolled). We keep the live
+ * text mirrored in `liveText` (from `kai-value-change`) so voice can append.
+ */
+defineProps<{
+  theme: Theme;
+  loading: boolean;
+  suggestions: string[];
+  // The kit owns this shape. Take it straight off the element's own prop type
+  // (`@kitn.ai/ui/elements`) instead of re-declaring it here, so a change to the
+  // trigger contract shows up as a build error rather than silent drift.
+  triggers: NonNullable<KaiPromptInputElementProps['triggers']>;
+}>();
+
+const emit = defineEmits<{
+  submit: [value: string];
+  suggestion: [value: string];
+}>();
+
+// Ref to the underlying <kai-prompt-input> element for the imperative pushes
+// (clear() on submit, ComposerDoc seed from voice); `liveText` mirrors the text.
+const promptRef = ref<HTMLElement | null>(null);
+let liveText = '';
+
+// Voice: on a transcript, append it to the current text and seed the (uncontrolled)
+// input as a ComposerDoc. A non-string `value` is a one-time seed into the
+// element's internal state; a plain STRING would instead flip it into controlled
+// mode and re-break the `/`+`@` triggers and submit.
+const { supported: voiceSupported, start: startVoice } = useVoiceInput((transcript) => {
+  const next = (liveText ? liveText + ' ' : '') + transcript;
+  liveText = next;
+  const el = promptRef.value as (HTMLElement & { value?: unknown }) | null;
+  if (el) el.value = [{ type: 'text', text: next }];
+});
+
+function handleVoice() {
+  // Mic is Chromium-only; degrade gracefully everywhere else.
+  if (!voiceSupported) {
+    alert('Voice input needs a Chromium browser.');
+    return;
+  }
+  startVoice();
+}
+
+function onValueChange(e: Event) {
+  liveText = (e as CustomEvent<{ value: string }>).detail.value;
+}
+
+function onSubmit(e: Event) {
+  // Clear our own uncontrolled input first — reset the mirror + call the element's
+  // clear() method (uncontrolled-safe; fires kai-value-change internally, never a
+  // string assignment) — then hand the text up. The parent owns append + streaming.
+  liveText = '';
+  (promptRef.value as (HTMLElement & { clear?: () => void }) | null)?.clear?.();
+  emit('submit', (e as CustomEvent<{ value: string }>).detail.value);
+}
+
+function onSuggestionClick(e: Event) {
+  emit('suggestion', (e as CustomEvent<{ value: string }>).detail.value);
+}
+</script>
+
+<template>
+  <div class="composer">
+    <kai-prompt-input
+      ref="promptRef"
+      :theme="theme"
+      placeholder="Message the demo…"
+      :loading="loading"
+      :suggestions.prop="suggestions"
+      :triggers.prop="triggers"
+      :voice.prop="true"
+      @kai-voice="handleVoice"
+      @kai-value-change="onValueChange"
+      @kai-submit="onSubmit"
+      @kai-suggestion-click="onSuggestionClick"
+    ></kai-prompt-input>
+    <p class="composer-hint">
+      Type <kbd>/</kbd> for skills · <kbd>@</kbd> for agents
+    </p>
+  </div>
+</template>

package/dist/templates/vue/src/components/Sidebar.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { Theme } from '../types';
+import type { Conversation } from '../chat-data';
+
+/**
+ * The conversation rail — a thin wrapper over `<kai-conversations>`. 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`).
+ * The rail's `collapsed` is CONTROLLED by the app's collapsed state, so it stays in
+ * sync with the parent `<kai-resizable-item collapsed>` and re-expands the list on
+ * restore; the internal hamburger still reports the toggle intent up via
+ * `@kai-toggle-sidebar`.
+ *
+ * Array/object props (`groups`, `conversations`) MUST be set as DOM properties, so
+ * they use the `.prop` modifier. `activeId` / `collapsed` are scalars.
+ */
+defineProps<{
+  theme: Theme;
+  conversations: Conversation[];
+  activeId: string;
+  collapsed: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [id: string];
+  newChat: [];
+  toggle: [];
+}>();
+
+function onSelect(e: Event) {
+  emit('select', (e as CustomEvent<{ id: string }>).detail.id);
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <kai-conversations
+      :theme="theme"
+      :groups.prop="[]"
+      :conversations.prop="conversations"
+      :active-id="activeId"
+      :collapsed.prop="collapsed"
+      @kai-conversation-select="onSelect"
+      @kai-new-chat="emit('newChat')"
+      @kai-toggle-sidebar="emit('toggle')"
+    ></kai-conversations>
+  </aside>
+</template>

package/dist/templates/vue/src/components/ThemeToggle.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Theme } from '../types';
+import MoonIcon from './icons/MoonIcon.vue';
+import SunIcon from './icons/SunIcon.vue';
+
+/**
+ * Light/dark switch for the top bar. Shows the moon in light mode (tap -> dark)
+ * and the sun in dark mode. `<kai-button>` is icon-only, so it carries the
+ * accessible label; the glyph is decorative (`aria-hidden`) in the `icon` slot.
+ * The native click on the shadow-root button bubbles, so a plain `@click` works.
+ */
+defineProps<{ theme: Theme }>();
+defineEmits<{ toggle: [] }>();
+</script>
+
+<template>
+  <kai-button
+    :theme="theme"
+    variant="ghost"
+    size="icon"
+    label="Toggle light/dark theme"
+    @click="$emit('toggle')"
+  >
+    <MoonIcon v-if="theme === 'light'" slot="icon" aria-hidden="true" />
+    <SunIcon v-else slot="icon" aria-hidden="true" />
+  </kai-button>
+</template>

package/dist/templates/vue/src/components/ThreadView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ChatMessage } from '@kitn.ai/ui';
+import { partsToText } from '@kitn.ai/ui/state';
+import type { Theme } from '../types';
+
+/**
+ * The scrolling message list. `<kai-thread>` owns the message rendering, the
+ * centered fixed-width column, and stick-to-bottom scroll, so 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.
+ *
+ * `messages` is passed to the element as a DOM PROPERTY (`.prop`); a NEW array
+ * reference per streaming chunk is what re-renders it. The `withActions` computed
+ * derives that fresh array whenever `messages` changes.
+ */
+const props = defineProps<{
+  theme: Theme;
+  messages: ChatMessage[];
+}>();
+
+// <kai-thread> reads `actions` off each message; only assistant replies get them.
+const withActions = computed<ChatMessage[]>(() =>
+  props.messages.map((m) =>
+    m.role === 'assistant'
+      ? { ...m, actions: ['copy', { id: 'speak', label: 'Read aloud', icon: 'volume-2' }] }
+      : m,
+  ),
+);
+
+function onMessageAction(e: Event) {
+  const detail = (e as CustomEvent<{ messageId: string; action: string }>).detail;
+  if (detail.action === 'speak') {
+    const m = props.messages.find((x) => x.id === detail.messageId);
+    if (!m) return;
+    window.speechSynthesis.cancel();
+    window.speechSynthesis.speak(new SpeechSynthesisUtterance(partsToText(m.parts)));
+  }
+}
+</script>
+
+<template>
+  <kai-thread
+    class="thread"
+    :theme="theme"
+    :messages.prop="withActions"
+    @kai-message-action="onMessageAction"
+  ></kai-thread>
+</template>

package/dist/templates/vue/src/components/icons/MoonIcon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * 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. Fallthrough attributes land on the
+ * root <svg>, so `slot="icon"` and `aria-hidden` pass through and it drops into
+ * <kai-button>'s icon slot.
+ */
+withDefaults(defineProps<{ size?: number }>(), { size: 20 });
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  </svg>
+</template>

package/dist/templates/vue/src/components/icons/SunIcon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Sun glyph — shown in dark mode (tap the toggle -> light). See MoonIcon for why
+ * the example owns these icons. Fallthrough attributes land on the root <svg>.
+ */
+withDefaults(defineProps<{ size?: number }>(), { size: 20 });
+</script>
+
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <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>
+</template>

package/dist/templates/vue/src/composables/index.ts

@@ -0,0 +1,3 @@
+export { useChat, type ChatController } from './useChat';
+export { useConversations } from './useConversations';
+export { useVoiceInput } from './useVoiceInput';

package/dist/templates/vue/src/composables/useChat.ts

@@ -0,0 +1,47 @@
+import { ref, shallowRef, type Ref } from 'vue';
+import type { ChatMessage } from '@kitn.ai/ui';
+import {
+  appendMessage,
+  createAssistantStream,
+  onStreamSettled,
+  type SetMessages,
+  type AssistantStream,
+} from '@kitn.ai/ui/state';
+
+/**
+ * Vue 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 `shallowRef` on purpose: every op assigns a BRAND-NEW array
+ * reference (`messages.value = updater(prev)`), which is exactly what re-renders
+ * `<kai-thread>` — mutating the array in place does not. A shallowRef also keeps
+ * the array plain (no deep proxy), so what reaches the element's `messages`
+ * property is a clean `ChatMessage[]`.
+ */
+export interface ChatController {
+  messages: Ref<ChatMessage[]>;
+  loading: Ref<boolean>;
+  append: (msg: ChatMessage) => void;
+  setMessages: (next: ChatMessage[]) => void;
+  streamAssistant: (init?: Partial<ChatMessage>) => AssistantStream;
+}
+
+export function useChat(initialMessages: ChatMessage[] = []): ChatController {
+  const messages = shallowRef<ChatMessage[]>([...initialMessages]);
+  const loading = ref(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.value = updater(messages.value); };
+
+  const append = (msg: ChatMessage) => set((prev) => appendMessage(prev, msg));
+  const setMessages = (next: ChatMessage[]) => { messages.value = [...next]; };
+  const streamAssistant = (init?: Partial<ChatMessage>): AssistantStream => {
+    loading.value = true;
+    return onStreamSettled(createAssistantStream(set, init), () => { loading.value = false; });
+  };
+
+  return { messages, loading, append, setMessages, streamAssistant };
+}

package/dist/templates/vue/src/composables/useConversations.ts

@@ -0,0 +1,42 @@
+import { shallowRef, type Ref } from 'vue';
+import { THREADS, newId, type Conversation } from '../chat-data';
+import type { ChatController } from './useChat';
+
+/**
+ * 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 `useChat` controller so it can read the live messages
+ * when stashing and reset them when loading another thread. Mirrors the React
+ * `useConversations` hook.
+ */
+export interface ConversationsController {
+  conversations: Ref<Conversation[]>;
+  activeId: Ref<string>;
+  selectConversation: (id: string) => void;
+  newChat: () => void;
+}
+
+export function useConversations(chat: ChatController, initial: Conversation[]): ConversationsController {
+  const conversations = shallowRef<Conversation[]>([...initial]);
+  const activeId = shallowRef(initial[0].id);
+
+  const selectConversation = (id: string) => {
+    THREADS[activeId.value] = chat.messages.value; // stash the open thread
+    activeId.value = id;
+    chat.setMessages(THREADS[id] ?? []); // load the picked one
+  };
+
+  const newChat = () => {
+    const id = newId();
+    THREADS[activeId.value] = chat.messages.value;
+    THREADS[id] = [];
+    conversations.value = [
+      { id, title: 'New conversation', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      ...conversations.value,
+    ];
+    activeId.value = id;
+    chat.setMessages([]);
+  };
+
+  return { conversations, activeId, selectConversation, newChat };
+}

package/dist/templates/vue/src/composables/useVoiceInput.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. Vue 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 useVoiceInput(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/vue/src/index.css

@@ -0,0 +1,111 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* Full-height workspace shell. Colors come from the kit's --color-* tokens, which
+   flip to dark under the `.dark` class we toggle on `.app`. <kai-resizable> fills
+   this box (its `:host` is `height:100%`) and owns the sidebar | main split, the
+   panel widths, and the draggable divider. */
+.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 (near-white grey in light, a shade lighter than the base in dark). That
+   #f4f4f5-on-white step is subtle, so a 1px right border marks the at-rest sidebar | main
+   division: <kai-resizable>'s `line` handle is transparent at rest and only tints on
+   hover/drag, so the boundary has to come from the panel itself. The border uses
+   `var(--color-border)`, which now tracks the shell's light/dark tokens because the parent
+   <ResizableItem theme={theme}> forwards the theme (a light hairline in light mode, dark in
+   dark). `box-sizing: border-box` keeps the 1px inside the 280px item so it doesn't shift
+   the content width. Collapse is handled by the parent <ResizableItem collapsed> (the panel
+   + its divider drop out), so the old `.sidebar.collapsed` rule is gone. */
+.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;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+}
+
+/* <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;
+}
+
+/* Muted, centered helper line under the input pointing out the / and @ triggers. */
+.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/vue/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue';
+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.vue';
+
+const root = document.getElementById('app');
+if (!root) throw new Error('Root element not found');
+
+// The kai-* elements register asynchronously. Wait until the tags we use are
+// defined before mounting, so Vue's `:prop.prop` bindings 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(() => {
+  createApp(App).mount(root);
+});

package/dist/templates/vue/src/types.ts

@@ -0,0 +1,4 @@
+// Shared across the example's components. In the React reference this lives in
+// App.tsx (`export type Theme`); a Vue SFC can't re-export a named type as
+// cleanly, so the example keeps it here.
+export type Theme = 'light' | 'dark';

package/dist/templates/vue/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,29 @@
+{
+  "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,
+
+    /* Vue SFC JSX handling (harmless with no .tsx present) */
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+}

package/dist/templates/vue/tsconfig.json

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

package/dist/templates/vue/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"]
+}

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

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// `@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`).
+//
+// The one Vue-specific bit: tell the template compiler that every `kai-*` tag is a
+// native custom element. Without this Vue tries to resolve them as Vue components
+// (warning "unknown custom element"); with it, Vue leaves them alone and passes
+// props/events straight through to the DOM.
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('kai-'),
+        },
+      },
+    }),
+  ],
+  server: { port: 5174 },
+});