@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/theme/theme-presets.js

@@ -0,0 +1,78 @@
+import * as z from 'zod/v4';
+import { decodeJsonText } from "./theme-colors.js";
+import { SHADCN_SYSTEM_THEME_PRESETS } from "./presets/theme-preset-builtins.js";
+const themeColorMapSchema = z.record(z.string(), z.string());
+const themeColorsSchema = z.object({
+    light: themeColorMapSchema,
+    dark: themeColorMapSchema
+});
+export const themePresetSchema = z.object({
+    id: z.string().min(1),
+    name: z.string().min(1),
+    description: z.string().default(''),
+    enabled: z.boolean().default(true),
+    builtIn: z.boolean().default(false),
+    colors: themeColorsSchema,
+    customCss: z.string().default('')
+});
+function clonePreset(preset) {
+    return {
+        ...preset,
+        colors: {
+            light: { ...preset.colors.light },
+            dark: { ...preset.colors.dark }
+        }
+    };
+}
+/** The stored presets that decode, each on its own: one malformed preset never discards the rest. */
+function parsePresetArray(value) {
+    const text = z.string().safeParse(value);
+    const items = z.array(z.json()).safeParse(text.success ? decodeJsonText(text.data) : value);
+    if (!items.success)
+        return [];
+    return items.data.flatMap((item) => {
+        const result = themePresetSchema.safeParse(item);
+        return result.success ? [result.data] : [];
+    });
+}
+export function normalizeThemePresets(value) {
+    const parsed = parsePresetArray(value);
+    const parsedById = new Map(parsed.map((preset) => [preset.id, preset]));
+    const builtInPresets = SHADCN_SYSTEM_THEME_PRESETS.map((preset) => {
+        const existing = parsedById.get(preset.id);
+        const cloned = clonePreset(preset);
+        if (existing)
+            cloned.enabled = existing.enabled;
+        return cloned;
+    });
+    const customPresets = parsed.filter((preset) => !preset.builtIn);
+    const filteredCustom = customPresets.filter((preset) => !SHADCN_SYSTEM_THEME_PRESETS.some((builtIn) => builtIn.id === preset.id));
+    return [...builtInPresets, ...filteredCustom.map(clonePreset)];
+}
+export function serializeThemePresets(value) {
+    return JSON.stringify(value);
+}
+export function getEnabledThemePresets(value) {
+    return value.filter((preset) => preset.enabled);
+}
+export function createCustomThemePreset(name, colors, customCss = '') {
+    const slug = name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 48);
+    const timestamp = Date.now().toString(36);
+    const id = `custom-${slug || 'theme'}-${timestamp}`;
+    return {
+        id,
+        name,
+        description: 'Custom preset',
+        enabled: true,
+        builtIn: false,
+        colors: {
+            light: { ...colors.light },
+            dark: { ...colors.dark }
+        },
+        customCss
+    };
+}

package/dist/lib/components/theme/vibes.tokens.meta.json

@@ -0,0 +1,56 @@
+{
+	"catalogId": "vibes.design-tokens",
+	"contentHash": "24d46a998dc39cd6fb6a2f926c7827a08a82213098babb4dd998d74511dc7a52",
+	"presetIds": [
+		"vibes",
+		"vibes",
+		"vibes-pulse",
+		"vibes-pulse",
+		"corpo-vibes",
+		"corpo-vibes",
+		"nordic-frost",
+		"nordic-frost",
+		"forest-emerald",
+		"forest-emerald",
+		"obsidian-pro",
+		"obsidian-pro",
+		"shadcn-zinc",
+		"shadcn-zinc",
+		"shadcn-slate",
+		"shadcn-slate",
+		"shadcn-stone",
+		"shadcn-stone",
+		"shadcn-gray",
+		"shadcn-gray",
+		"shadcn-neutral",
+		"shadcn-neutral",
+		"shadcn-blue",
+		"shadcn-blue",
+		"shadcn-emerald",
+		"shadcn-emerald",
+		"shadcn-violet",
+		"shadcn-violet",
+		"shadcn-amber",
+		"shadcn-amber",
+		"shadcn-walnut",
+		"shadcn-walnut",
+		"shadcn-rose",
+		"shadcn-rose",
+		"synthwave-84",
+		"synthwave-84",
+		"cyber-matrix",
+		"cyber-matrix",
+		"y2k-sunset",
+		"y2k-sunset",
+		"tokyo-night",
+		"tokyo-night",
+		"glitter-nostalgia",
+		"glitter-nostalgia",
+		"nerv",
+		"nerv"
+	],
+	"presetCount": 23,
+	"generatedAt": "2026-10-20T10:18:33.061Z",
+	"source": "kit/scripts/emit-design-tokens-dtcg.ts",
+	"officialThemeId": "vibes"
+}

package/dist/lib/components/toast/Toaster.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">import { Toaster as SonnerToaster } from "svelte-sonner";
+let { position = "bottom-right", richColors = true, closeButton = true, duration = 4e3, visibleToasts = 5, darkMode = true } = $props();
+// Position class mapping
+const positionClasses = {
+	"top-left": "[--toast-x:0px] [--toast-y:0px]",
+	"top-right": "[--toast-x:calc(100vw-100%)] [--toast-y:0px]",
+	"bottom-left": "[--toast-x:0px] [--toast-y:calc(100vh-100%)]",
+	"bottom-right": "[--toast-x:calc(100vw-100%)] [--toast-y:calc(100vh-100%)]",
+	"top-center": "[--toast-x:50%] [--toast-y:0px]",
+	"bottom-center": "[--toast-x:50%] [--toast-y:calc(100vh-100%)]"
+};
+</script>
+
+<div class="vibes-toaster {positionClasses[position]}">
+	<SonnerToaster
+		{position}
+		{richColors}
+		{closeButton}
+		{duration}
+		{visibleToasts}
+		theme={darkMode ? 'dark' : 'light'}
+	/>
+</div>
+
+<style>
+	.vibes-toaster {
+		/* Ensure toaster is above modals and drawers */
+		--toaster-z-index: 9999;
+	}
+
+	:global([data-sonner-toast]) {
+		font-family: inherit;
+	}
+</style>

package/dist/lib/components/toast/Toaster.svelte.d.ts

@@ -0,0 +1,22 @@
+type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+/**
+ * Toast wrapper that provides consistent toast notifications across all apps
+ * with ARIA live region integration for accessibility
+ */
+interface Props {
+    /** Position of toast notifications */
+    position?: ToastPosition;
+    /** Enable rich colors (success/error/warning/info) */
+    richColors?: boolean;
+    /** Enable close button on toasts */
+    closeButton?: boolean;
+    /** Duration in milliseconds before auto-dismiss */
+    duration?: number;
+    /** Visible toast limit */
+    visibleToasts?: number;
+    /** Enable dark mode support */
+    darkMode?: boolean;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/lib/components/toast/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Toast notification system.
+ *
+ * Wraps svelte-sonner, which owns the toast viewport and its ARIA live-region
+ * semantics. The separate Announcer stays scoped to its Svelte component tree.
+ *
+ * Note: this file was originally checked in with `<script lang="ts">`
+ * Svelte tags wrapping a TypeScript module — svelte-package emitted
+ * malformed JavaScript (`</script>`/`< script` literals leaked into
+ * dist/components/toast/index.js) that broke Vite's import-analysis
+ * for every app consuming `@vibesdotdev/kit`. This is a plain `.ts`
+ * module now, with `Toaster` re-exported at top-level.
+ */
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+export interface ToastOptions {
+    description?: string;
+    duration?: number;
+    id?: string | number;
+}
+/**
+ * Show a success toast.
+ */
+export declare function success(message: string, options?: ToastOptions): string | number;
+/**
+ * Show an error toast.
+ */
+export declare function error(message: string, options?: ToastOptions): string | number;
+/**
+ * Show a warning toast.
+ */
+export declare function warning(message: string, options?: ToastOptions): string | number;
+/**
+ * Show an info toast.
+ */
+export declare function info(message: string, options?: ToastOptions): string | number;
+/**
+ * Show a loading toast.
+ */
+export declare function loading(message: string, options?: ToastOptions): string | number;
+/**
+ * Show a generic toast.
+ */
+export declare function message(message: string, options?: ToastOptions): string | number;
+/**
+ * Dismiss a specific toast by ID
+ */
+export declare function dismiss(toastId?: string | number): string | number | undefined;
+/**
+ * Dismiss all toasts
+ */
+export declare function dismissAll(): void;
+/**
+ * Update an existing toast
+ */
+export declare function update(toastId: string | number, type: ToastType, message: string, options?: ToastOptions): string | number;

package/dist/lib/components/toast/index.js

@@ -0,0 +1,161 @@
+/**
+ * Toast notification system.
+ *
+ * Wraps svelte-sonner, which owns the toast viewport and its ARIA live-region
+ * semantics. The separate Announcer stays scoped to its Svelte component tree.
+ *
+ * Note: this file was originally checked in with `<script lang="ts">`
+ * Svelte tags wrapping a TypeScript module — svelte-package emitted
+ * malformed JavaScript (`</script>`/`< script` literals leaked into
+ * dist/components/toast/index.js) that broke Vite's import-analysis
+ * for every app consuming `@vibesdotdev/kit`. This is a plain `.ts`
+ * module now, with `Toaster` re-exported at top-level.
+ */
+import { BROWSER } from 'esm-env';
+import { kitLogger } from '../../kit-logger';
+import { settle } from '../../attempt';
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger('vibeskit-toast');
+let generatedToastId = 0;
+let sonnerToastPromise = null;
+let sonnerOperationQueue = Promise.resolve();
+function nextToastId() {
+    const id = generatedToastId;
+    generatedToastId += 1;
+    return `vibes-toast-${id}`;
+}
+function withToastId(options) {
+    return {
+        ...options,
+        id: options?.id ?? nextToastId()
+    };
+}
+/** Narrows svelte-sonner's generic toast function to the string-message calls this module makes. */
+function sonnerApiOf(toast) {
+    return {
+        success: (message, options) => toast.success(message, options),
+        error: (message, options) => toast.error(message, options),
+        warning: (message, options) => toast.warning(message, options),
+        info: (message, options) => toast.info(message, options),
+        loading: (message, options) => toast.loading(message, options),
+        message: (message, options) => toast.message(message, options),
+        dismiss: (toastId) => toast.dismiss(toastId)
+    };
+}
+function loadSonnerToast() {
+    if (!sonnerToastPromise) {
+        sonnerToastPromise = import('svelte-sonner').then(({ toast }) => sonnerApiOf(toast));
+    }
+    return sonnerToastPromise;
+}
+function enqueueSonnerOperation(operation) {
+    if (!BROWSER)
+        return;
+    sonnerOperationQueue = sonnerOperationQueue.then(async () => {
+        const result = await settle(async () => {
+            const toast = await loadSonnerToast();
+            operation(toast);
+        });
+        if (!result.ok) {
+            // Only the failure's class is logged, never the raw error.
+            logger.warn('Failed to run toast operation', {
+                reason: result.error instanceof Error ? result.error.name : 'non-error'
+            });
+        }
+    });
+}
+function showToast(type, message, options) {
+    const optionsWithId = withToastId(options);
+    enqueueSonnerOperation((toast) => {
+        toast[type](message, optionsWithId);
+    });
+    return optionsWithId.id;
+}
+/**
+ * Show a success toast.
+ */
+export function success(message, options) {
+    return showToast('success', message, {
+        description: options?.description,
+        duration: options?.duration,
+        id: options?.id
+    });
+}
+/**
+ * Show an error toast.
+ */
+export function error(message, options) {
+    return showToast('error', message, {
+        description: options?.description,
+        duration: options?.duration ?? 6000, // Longer duration for errors
+        id: options?.id,
+        important: true
+    });
+}
+/**
+ * Show a warning toast.
+ */
+export function warning(message, options) {
+    return showToast('warning', message, {
+        description: options?.description,
+        duration: options?.duration,
+        id: options?.id
+    });
+}
+/**
+ * Show an info toast.
+ */
+export function info(message, options) {
+    return showToast('info', message, {
+        description: options?.description,
+        duration: options?.duration,
+        id: options?.id
+    });
+}
+/**
+ * Show a loading toast.
+ */
+export function loading(message, options) {
+    return showToast('loading', message, {
+        description: options?.description,
+        id: options?.id
+    });
+}
+/**
+ * Show a generic toast.
+ */
+export function message(message, options) {
+    return showToast('message', message, {
+        description: options?.description,
+        duration: options?.duration,
+        id: options?.id
+    });
+}
+/**
+ * Dismiss a specific toast by ID
+ */
+export function dismiss(toastId) {
+    enqueueSonnerOperation((toast) => {
+        toast.dismiss(toastId);
+    });
+    return toastId;
+}
+/**
+ * Dismiss all toasts
+ */
+export function dismissAll() {
+    enqueueSonnerOperation((toast) => {
+        toast.dismiss();
+    });
+}
+/**
+ * Update an existing toast
+ */
+export function update(toastId, type, message, options) {
+    showToast(type, message, {
+        description: options?.description,
+        duration: options?.duration,
+        id: toastId
+    });
+    return toastId;
+}

package/dist/lib/components/tool-widgets/DefaultToolCard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">/**
+* DefaultToolCard — fallback renderer for USER-authored tools (`custom:*`)
+* that have not registered a `tools/ui` widget. First-party tools must ship
+* their own Svelte/TUI widgets; this card is not their home.
+*
+* JSON blobs render through Kit's read-only syntax surface (`CodeViewer`),
+* not a raw preformatted block.
+*/
+import CodeViewer from "../code/CodeViewer.svelte";
+import ToolCard from "./ToolCard.svelte";
+import ToolCardBody from "./ToolCardBody.svelte";
+import { approvalCopy, formatToolData, isRedundantFailureOutput, toolBlobLanguage } from "./tool-meta.js";
+let { tool, compact = false, actions } = $props();
+const inputText = $derived(formatToolData(tool.input));
+// The chrome already renders tool.error; a loop failure envelope that only
+// echoes it would dump a redundant blob beneath the banner.
+const outputText = $derived(isRedundantFailureOutput(tool.output, tool.error) ? "" : formatToolData(tool.output));
+const approval = $derived(approvalCopy(tool));
+// `tool.error` is rendered by the shared ToolCard chrome (so EVERY widget shows
+// failures consistently); don't duplicate it here.
+const hasDetail = $derived(Boolean(inputText || outputText || approval));
+</script>
+
+<ToolCard {tool} {compact} {actions}>
+	<ToolCardBody {compact}>
+		{#if inputText}
+			<div>
+				<div class="mb-1 text-caption font-medium tracking-wider text-muted-foreground uppercase">
+					Input
+				</div>
+				<CodeViewer
+					code={inputText}
+					language={toolBlobLanguage(inputText, tool.input)}
+					appearance="system"
+					maxHeight="16rem"
+					minHeight="0"
+					showLineNumbers={false}
+				/>
+			</div>
+		{/if}
+		{#if outputText}
+			<div>
+				<div class="mb-1 text-caption font-medium tracking-wider text-muted-foreground uppercase">
+					Output
+				</div>
+				<CodeViewer
+					code={outputText}
+					language={toolBlobLanguage(outputText, tool.output)}
+					appearance="system"
+					maxHeight="16rem"
+					minHeight="0"
+					showLineNumbers={false}
+				/>
+			</div>
+		{/if}
+		{#if approval}
+			<div class="text-xs text-muted-foreground">{approval}</div>
+		{/if}
+		{#if !hasDetail}
+			<div class="text-xs text-muted-foreground italic">No additional detail.</div>
+		{/if}
+	</ToolCardBody>
+</ToolCard>

package/dist/lib/components/tool-widgets/DefaultToolCard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolWidgetProps } from './types.js';
+declare const DefaultToolCard: import("svelte").Component<ToolWidgetProps, {}, "">;
+type DefaultToolCard = ReturnType<typeof DefaultToolCard>;
+export default DefaultToolCard;

package/dist/lib/components/tool-widgets/MessageToolCalls.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">import ToolCallRenderer from "./ToolCallRenderer.svelte";
+import { groupToolCallsByPlacement, toolCallKey } from "./grouping.js";
+let { tools, compact = false, inlineBeforeBody = false, body, resolver, actions, fallback } = $props();
+const grouped = $derived(groupToolCallsByPlacement(tools, resolver));
+</script>
+
+{#if grouped.top.length > 0}
+	<div class="message-tool-calls message-tool-calls--top">
+		{#each grouped.top as tool (toolCallKey(tool))}
+			<ToolCallRenderer {tool} {compact} {resolver} {actions} {fallback} />
+		{/each}
+	</div>
+{/if}
+
+{#if inlineBeforeBody && grouped.inline.length > 0}
+	<div class="message-tool-calls message-tool-calls--inline">
+		{#each grouped.inline as tool (toolCallKey(tool))}
+			<ToolCallRenderer {tool} {compact} {resolver} {actions} {fallback} />
+		{/each}
+	</div>
+{/if}
+
+{@render body?.()}
+
+{#if !inlineBeforeBody && grouped.inline.length > 0}
+	<div class="message-tool-calls message-tool-calls--inline">
+		{#each grouped.inline as tool (toolCallKey(tool))}
+			<ToolCallRenderer {tool} {compact} {resolver} {actions} {fallback} />
+		{/each}
+	</div>
+{/if}
+
+{#if grouped.bottom.length > 0}
+	<div class="message-tool-calls message-tool-calls--bottom">
+		{#each grouped.bottom as tool (toolCallKey(tool))}
+			<ToolCallRenderer {tool} {compact} {resolver} {actions} {fallback} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.message-tool-calls {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	.message-tool-calls--top {
+		margin-bottom: 0.4rem;
+	}
+	.message-tool-calls--inline {
+		margin-top: 0.4rem;
+	}
+	.message-tool-calls--bottom {
+		margin-top: 0.4rem;
+	}
+</style>

package/dist/lib/components/tool-widgets/MessageToolCalls.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+     * MessageToolCalls — renders an assistant message's tool calls with the
+     * registry-declared placement spec: `top`-pinned widgets first, then the
+     * message body (passed as the `body` snippet), then `inline` widgets in
+     * emission order, then `bottom`-pinned widgets.
+     *
+     * Inline tool widgets render AFTER the body text by default because the
+     * persisted message is a single content blob (the agent's summary) plus an
+     * emission-ordered tool-call list — the common shape is "agent calls tools,
+     * then narrates". `inlineBeforeBody` flips that for surfaces that prefer the
+     * call cards above the summary. (True per-segment interleaving of text and
+     * tools — full TUI parity for messages that narrate BETWEEN calls — needs a
+     * segmented message model; tracked separately.)
+     *
+     * Every chat surface uses this one component so placement + ordering stay
+     * identical across web/casework/bridge/dock.
+     */
+import type { Snippet } from 'svelte';
+import type { ToolCallView, ToolWidgetActions, ToolWidgetFallback } from './types.js';
+import type { ToolWidgetResolver } from './registry.js';
+interface Props {
+    tools: ToolCallView[];
+    compact?: boolean;
+    resolver?: ToolWidgetResolver;
+    /** Render inline tool widgets above the body instead of below it. */
+    inlineBeforeBody?: boolean;
+    /** The message body (text content). Omitted → only the tool widgets render. */
+    body?: Snippet;
+    /** Host-owned controls rendered in each tool widget header. */
+    actions?: ToolWidgetActions;
+    /** Host fallback for unresolved or failed widgets. */
+    fallback?: ToolWidgetFallback;
+}
+declare const MessageToolCalls: import("svelte").Component<Props, {}, "">;
+type MessageToolCalls = ReturnType<typeof MessageToolCalls>;
+export default MessageToolCalls;

package/dist/lib/components/tool-widgets/ToolCallRenderer.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">/**
+* ToolCallRenderer — resolves the bespoke widget registered for a tool id and
+* renders it. Unregistered user tools use `DefaultToolCard`; first-party
+* missing, import-pending, and import-failed states remain distinct and use
+* the canonical non-JSON state card unless the host supplies `fallback`.
+*/
+import DefaultToolCard from "./DefaultToolCard.svelte";
+import ToolWidgetStateCard from "./ToolWidgetStateCard.svelte";
+import { isUserAuthoredTool, loadToolWidget } from "./registry.js";
+import { setToolWidgetPresentation } from "./tool-widget-context.js";
+let { tool, compact = false, resolver, actions, fallback } = $props();
+setToolWidgetPresentation({ get actions() {
+	return actions;
+} });
+const widget = $derived(loadToolWidget(tool.name, resolver));
+const unregisteredState = $derived(isUserAuthoredTool(tool.name) ? { kind: "unregistered-user" } : { kind: "first-party-missing" });
+</script>
+
+{#snippet renderState(state: ToolWidgetFallbackState)}
+	<div data-tool-widget-state={state.kind} data-tool-fallback={state.kind}>
+		{#if fallback}
+			{@render fallback(tool, state)}
+		{:else if state.kind === 'unregistered-user'}
+			<DefaultToolCard {tool} {compact} {actions} />
+		{:else}
+			<ToolWidgetStateCard {tool} {compact} {actions} {state} />
+		{/if}
+	</div>
+{/snippet}
+
+{#if widget}
+	{#await widget}
+		{@render renderState({ kind: 'loading' })}
+	{:then Widget}
+		<Widget {tool} {compact} {actions} />
+	{:catch error}
+		{@render renderState({ kind: 'load-failed', error })}
+	{/await}
+{:else}
+	{@render renderState(unregisteredState)}
+{/if}

package/dist/lib/components/tool-widgets/ToolCallRenderer.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ToolWidgetResolver } from './registry.js';
+import type { ToolCallView, ToolWidgetActions, ToolWidgetFallback } from './types.js';
+interface Props {
+    tool: ToolCallView;
+    compact?: boolean;
+    resolver?: ToolWidgetResolver;
+    actions?: ToolWidgetActions;
+    /** Host presentation for explicit fallback states. Kit supplies truthful defaults. */
+    fallback?: ToolWidgetFallback;
+}
+declare const ToolCallRenderer: import("svelte").Component<Props, {}, "">;
+type ToolCallRenderer = ReturnType<typeof ToolCallRenderer>;
+export default ToolCallRenderer;