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

package/dist/lib/components/app-shell/ShellStyleMenu.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ShellStyle } from './shell-style';
+type $$ComponentProps = {
+    /** The anatomy currently rendered (resolved, not just the preference). */
+    current: ShellStyle;
+    /** Optional hook for hosts that persist the choice beyond the cookie (e.g. account settings). */
+    onchange?: (style: ShellStyle) => void;
+    /** Notified after the user picks a color theme (hosts may persist to account settings). */
+    onThemeChange?: (presetId: string) => void;
+    /** Notified after a mode pick; hosts may persist the preference to an account. */
+    onModeChange?: (mode: 'system' | 'light' | 'dark') => void;
+    /** Where "Create & customize themes" leads (the account appearance page). */
+    appearanceHref?: string;
+    class?: string;
+};
+declare const ShellStyleMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShellStyleMenu = ReturnType<typeof ShellStyleMenu>;
+export default ShellStyleMenu;

package/dist/lib/components/app-shell/SidebarNavigation.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from "../ui/sidebar";
+import * as HoverCard from "../ui/hover-card";
+import { Icon } from "../icon";
+import { onMount, untrack } from "svelte";
+import { kitLogger } from "../../kit-logger";
+import { capturePreferenceStorage } from "../../preferences/capture-preference-storage.js";
+import { readPreference, sidebarExpandedPreference, writePreference } from "../../preferences/preference-storage.js";
+import { isNavItemActive } from "./nav-active";
+const logger = kitLogger("vibeskit-app-shell-sidebar-navigation");
+let { navigation = [], pathname = "", collapsibleSections = true, storageKey = "sidebar-navigation", onNavigate } = $props();
+// Expanded state persists in the runtime's preference storage, resolved after mount.
+const resolveStorage = capturePreferenceStorage();
+let storage;
+let expandedSections = $state({});
+let expandedItems = $state({});
+// Read collapsed (icon-rail) state from the surrounding Sidebar provider so
+// items with children can swap their inline sub-menu for a portal'd hover
+// pop-out flyout (an inline flyout would be clipped by the rail's overflow).
+const sidebar = useSidebar();
+const collapsed = $derived(sidebar.state === "collapsed" && !sidebar.isMobile);
+const itemsStorageKey = $derived(`${storageKey}-items`);
+let previousPathname = untrack(() => pathname);
+$effect(() => {
+	if (pathname === previousPathname) return;
+	previousPathname = pathname;
+	// Only committed routes dismiss the drawer; opening or expanding it must not.
+	untrack(() => sidebar.setOpenMobile(false));
+});
+function getGroupKey(group, index) {
+	return group.id ?? group.title ?? `group-${index}`;
+}
+function isItemActive(item) {
+	return isNavItemActive(item, pathname);
+}
+function isGroupExpanded(group, index) {
+	if (!collapsibleSections || group.collapsible === false) return true;
+	const key = getGroupKey(group, index);
+	if (key in expandedSections) return expandedSections[key];
+	if (group.defaultExpanded === true || group.defaultExpanded === false) return group.defaultExpanded;
+	return group.items.some((item) => isItemActive(item));
+}
+function iconIsUrl(icon) {
+	return typeof icon === "string" && (icon.startsWith("/") || icon.startsWith("http"));
+}
+// Expanded state is a convenience: a refused storage write is logged, and the in-memory state still applies.
+function writeExpandedState(key, state) {
+	const written = writePreference(storage, sidebarExpandedPreference(key), state);
+	if (written === "blocked") {
+		logger.warn("Sidebar expanded state not saved", { reason: written });
+	}
+}
+function persist(state) {
+	writeExpandedState(storageKey, state);
+}
+function setGroupExpanded(group, index, open) {
+	if (!collapsibleSections || group.collapsible === false) return;
+	const key = getGroupKey(group, index);
+	const next = {
+		...expandedSections,
+		[key]: open
+	};
+	expandedSections = next;
+	persist(next);
+}
+function hasChildren(item) {
+	return Array.isArray(item.children) && item.children.length > 0;
+}
+function isChildActive(item) {
+	return hasChildren(item) && item.children.some((child) => isItemActive(child));
+}
+function getItemKey(item, index) {
+	return item.id ?? item.value ?? item.href ?? `item-${index}`;
+}
+function isItemExpanded(item, index) {
+	const key = getItemKey(item, index);
+	// Respect an explicit user toggle; otherwise default open so nested links
+	// are discoverable (and always show the open state when a child is active).
+	if (key in expandedItems) return expandedItems[key];
+	return true;
+}
+function setItemExpanded(item, index, open) {
+	const key = getItemKey(item, index);
+	const next = {
+		...expandedItems,
+		[key]: open
+	};
+	expandedItems = next;
+	writeExpandedState(itemsStorageKey, next);
+}
+// Malformed or blocked storage holds no saved state: the declared default ({}) applies.
+function readExpandedState(key) {
+	const read = readPreference(storage, sidebarExpandedPreference(key));
+	if (read.status === "blocked" || read.status === "malformed") {
+		logger.warn("Sidebar expanded state unreadable", { reason: read.status });
+	}
+	return read.status === "found" ? read.value : undefined;
+}
+onMount(() => {
+	void resolveStorage().then((resolved) => {
+		storage = resolved;
+		expandedItems = readExpandedState(itemsStorageKey) ?? expandedItems;
+		if (!collapsibleSections) return;
+		expandedSections = readExpandedState(storageKey) ?? expandedSections;
+	});
+});
+</script>
+
+{#each navigation as group, index (getGroupKey(group, index))}
+	{#if group.items.length > 0}
+		{@const expanded = isGroupExpanded(group, index)}
+		<SidebarGroup class="py-1">
+			{#if collapsibleSections && group.collapsible !== false}
+				<button
+					type="button"
+					class="flex w-full cursor-pointer items-center justify-between overflow-hidden rounded-md px-3 py-1.5 text-xs font-semibold tracking-[0.04em] uppercase group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 hover:bg-sidebar-accent"
+					aria-expanded={expanded}
+					onclick={() => setGroupExpanded(group, index, !expanded)}
+				>
+					<span
+						class="flex min-w-0 items-center gap-2 group-data-[collapsible=icon]:justify-center"
+					>
+						{#if group.icon}
+							{#if iconIsUrl(group.icon)}
+								<img src={group.icon} alt="" class="size-4 shrink-0 object-contain" />
+							{:else if typeof group.icon === 'string'}
+								<Icon
+									icon={group.icon}
+									class={`size-4 shrink-0 ${group.iconClass ?? 'text-primary'}`}
+								/>
+							{:else}
+								{@const GroupIcon = group.icon}
+								<GroupIcon class={`size-4 shrink-0 ${group.iconClass ?? 'text-primary'}`} />
+							{/if}
+						{/if}
+						<span
+							class="truncate text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+						>
+							{group.title}
+						</span>
+					</span>
+					<Icon
+						icon="lucide:chevron-down"
+						class={`size-3.5 shrink-0 text-sidebar-accent-foreground/70 transition-transform duration-200 group-data-[collapsible=icon]:hidden ${expanded ? 'rotate-180' : ''}`}
+					/>
+				</button>
+			{:else if group.title}
+				<div
+					class="flex min-w-0 items-center gap-2 overflow-hidden px-3 py-1.5 text-xs font-semibold tracking-[0.04em] uppercase group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:w-8 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
+				>
+					{#if group.icon}
+						{#if iconIsUrl(group.icon)}
+							<img src={group.icon} alt="" class="size-4 shrink-0 object-contain" />
+						{:else if typeof group.icon === 'string'}
+							<Icon
+								icon={group.icon}
+								class={`size-4 shrink-0 ${group.iconClass ?? 'text-primary'}`}
+							/>
+						{:else}
+							{@const GroupIcon = group.icon}
+							<GroupIcon class={`size-4 shrink-0 ${group.iconClass ?? 'text-primary'}`} />
+						{/if}
+					{/if}
+					<span
+						class="truncate text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+					>
+						{group.title}
+					</span>
+				</div>
+			{/if}
+
+			{#if expanded}
+				<SidebarGroupContent class={group.collapsible === false ? '' : 'mt-1'}>
+					<SidebarMenu>
+						{#each group.items as item, itemIndex (item.id ?? item.href)}
+							{#if hasChildren(item)}
+								{@const open = isItemExpanded(item, itemIndex)}
+								<SidebarMenuItem>
+									{#if collapsed}
+										<!-- Icon rail: portal'd hover pop-out so the flyout escapes the
+											 rail's overflow-hidden clip. Trigger is the parent link itself. -->
+										<HoverCard.Root openDelay={60} closeDelay={120}>
+											<HoverCard.Trigger>
+												{#snippet child({ props: triggerProps })}
+													<SidebarMenuButton
+														isActive={isItemActive(item) || isChildActive(item)}
+														{...triggerProps}
+													>
+														{#snippet child({ props })}
+															<a
+																href={item.href}
+																onclick={() => onNavigate?.()}
+																data-sveltekit-reload={item.reload || undefined}
+																{...props}
+															>
+																{@render leafButtonInner(item)}
+															</a>
+														{/snippet}
+													</SidebarMenuButton>
+												{/snippet}
+											</HoverCard.Trigger>
+											<HoverCard.Content
+												side="right"
+												align="start"
+												sideOffset={8}
+												class="mt-0 w-56 p-1"
+											>
+												<a
+													href={item.href}
+													onclick={() => onNavigate?.()}
+													data-sveltekit-reload={item.reload || undefined}
+													class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent hover:text-accent-foreground"
+												>
+													{@render itemIcon(item.icon, item.iconClass ?? 'text-muted-foreground')}
+													<span class="truncate">{item.label}</span>
+												</a>
+												<div class="my-1 h-px bg-border"></div>
+												{#each item.children as sub (sub.id ?? sub.href)}
+													<a
+														href={sub.href}
+														onclick={() => onNavigate?.()}
+														data-sveltekit-reload={sub.reload || undefined}
+														data-active={isItemActive(sub)}
+														class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground"
+													>
+														{@render itemIcon(sub.icon, sub.iconClass ?? 'text-muted-foreground')}
+														<span class="truncate">{sub.label}</span>
+													</a>
+												{/each}
+											</HoverCard.Content>
+										</HoverCard.Root>
+									{:else}
+										<!-- Expanded rail: parent link + collapse toggle, with an inline sub-menu. -->
+										<div class="flex items-center gap-1">
+											<SidebarMenuButton
+												isActive={isItemActive(item) || isChildActive(item)}
+												class="flex-1"
+											>
+												{#snippet child({ props })}
+													<a
+														href={item.href}
+														onclick={() => onNavigate?.()}
+														data-sveltekit-reload={item.reload || undefined}
+														{...props}
+													>
+														{@render leafButtonInner(item)}
+													</a>
+												{/snippet}
+											</SidebarMenuButton>
+											<button
+												type="button"
+												class="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+												aria-expanded={open}
+												aria-label={`${open ? 'Collapse' : 'Expand'} ${item.label}`}
+												onclick={() => setItemExpanded(item, itemIndex, !open)}
+											>
+												<Icon
+													icon="lucide:chevron-down"
+													class={`size-4 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+												/>
+											</button>
+										</div>
+										{#if open}
+											<SidebarMenuSub>
+												{#each item.children as sub (sub.id ?? sub.href)}
+													<SidebarMenuSubItem>
+														<SidebarMenuSubButton isActive={isItemActive(sub)}>
+															{#snippet child({ props })}
+																<a
+																	href={sub.href}
+																	onclick={() => onNavigate?.()}
+																	data-sveltekit-reload={sub.reload || undefined}
+																	{...props}
+																>
+																	{@render itemIcon(
+																		sub.icon,
+																		sub.iconClass ?? 'text-muted-foreground'
+																	)}
+																	<span class="truncate">{sub.label}</span>
+																</a>
+															{/snippet}
+														</SidebarMenuSubButton>
+													</SidebarMenuSubItem>
+												{/each}
+											</SidebarMenuSub>
+										{/if}
+									{/if}
+								</SidebarMenuItem>
+							{:else}
+								<SidebarMenuItem>
+									<SidebarMenuButton isActive={isItemActive(item)}>
+										{#snippet child({ props })}
+											<a
+												href={item.href}
+												onclick={() => onNavigate?.()}
+												data-sveltekit-reload={item.reload || undefined}
+												{...props}
+											>
+												{@render leafButtonInner(item)}
+											</a>
+										{/snippet}
+									</SidebarMenuButton>
+								</SidebarMenuItem>
+							{/if}
+						{/each}
+					</SidebarMenu>
+				</SidebarGroupContent>
+			{/if}
+		</SidebarGroup>
+	{/if}
+{/each}
+
+{#snippet itemIcon(icon: AppSidebarItem['icon'], defaultClass: string)}
+	{#if icon}
+		{#if iconIsUrl(icon)}
+			<img src={icon} alt="" class="size-4 shrink-0 object-contain" />
+		{:else if typeof icon === 'string'}
+			<Icon {icon} class={`size-4 shrink-0 ${defaultClass}`} />
+		{:else}
+			{@const ItemIcon = icon}
+			<ItemIcon class={`size-4 shrink-0 ${defaultClass}`} />
+		{/if}
+	{/if}
+{/snippet}
+
+{#snippet leafButtonInner(item: AppSidebarItem)}
+	{@render itemIcon(item.icon, item.iconClass ?? 'text-muted-foreground')}
+	<span class="truncate group-data-[collapsible=icon]:hidden">{item.label}</span>
+	{#if item.badge}
+		<span class="ml-auto group-data-[collapsible=icon]:hidden">
+			{@render item.badge()}
+		</span>
+	{:else if item.external}
+		<Icon
+			icon="lucide:external-link"
+			class="ml-auto size-3.5 text-muted-foreground group-data-[collapsible=icon]:hidden"
+		/>
+	{/if}
+{/snippet}

package/dist/lib/components/app-shell/SidebarNavigation.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppSidebarGroup } from './schemas/app-navigation';
+type $$ComponentProps = {
+    navigation?: AppSidebarGroup[];
+    pathname?: string;
+    collapsibleSections?: boolean;
+    storageKey?: string;
+    onNavigate?: (() => void) | undefined;
+};
+declare const SidebarNavigation: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarNavigation = ReturnType<typeof SidebarNavigation>;
+export default SidebarNavigation;

package/dist/lib/components/app-shell/UserMenu.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+import { Icon } from "../icon";
+import { currentModeStore } from "../../preferences/preference-stores.js";
+let { user = null, signOutHref = "/auth/signout", accountHref = "/account", showThemeToggle = true, extraMenuContent, variant = "sidebar" } = $props();
+// The mode toggle acts on the preference store its shell provided.
+const modeStore = currentModeStore();
+let open = $state(false);
+function userInitials(u) {
+	if (u.name) {
+		return u.name.split(" ").map((p) => p[0]).join("").slice(0, 2).toUpperCase();
+	}
+	if (u.email) return u.email[0].toUpperCase();
+	return "?";
+}
+const displayName = $derived(user?.name || user?.email || "User");
+const avatarSrc = $derived(user?.image || undefined);
+</script>
+
+{#if user}
+	{#snippet menuContent()}
+		<DropdownMenuContent
+			class={variant === 'sidebar'
+				? 'w-[var(--bits-dropdown-menu-anchor-width)] min-w-56'
+				: 'min-w-56'}
+			side={variant === 'sidebar' ? 'top' : 'bottom'}
+			align="end"
+			sideOffset={4}
+		>
+			<DropdownMenuLabel class="font-normal">
+				<div class="flex flex-col space-y-1">
+					<p class="text-sm leading-none font-medium">{displayName}</p>
+					<p class="text-xs leading-none text-muted-foreground">{user.email ?? ''}</p>
+				</div>
+			</DropdownMenuLabel>
+			<DropdownMenuSeparator />
+
+			<DropdownMenuGroup>
+				<DropdownMenuItem>
+					{#snippet child({ props })}
+						<a href={accountHref} class="flex items-center gap-2" {...props}>
+							<Icon icon="lucide:user" class="h-4 w-4" />
+							<span>Account</span>
+						</a>
+					{/snippet}
+				</DropdownMenuItem>
+			</DropdownMenuGroup>
+
+			{#if extraMenuContent}
+				<DropdownMenuSeparator />
+				{@render extraMenuContent()}
+			{/if}
+
+			{#if showThemeToggle}
+				<DropdownMenuSeparator />
+				<DropdownMenuGroup>
+					<DropdownMenuItem>
+						{#snippet child({ props })}
+							<button
+								type="button"
+								class="flex w-full items-center gap-2"
+								{...props}
+								onclick={(e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									modeStore.toggleMode();
+								}}
+							>
+								<Icon icon="lucide:sun-moon" class="h-4 w-4" />
+								<span>Toggle theme</span>
+							</button>
+						{/snippet}
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+			{/if}
+
+			<DropdownMenuSeparator />
+			<DropdownMenuItem>
+				{#snippet child({ props })}
+					<form action={signOutHref} method="POST" class="w-full">
+						<button type="submit" class="flex w-full items-center gap-2" {...props}>
+							<Icon icon="lucide:log-out" class="h-4 w-4" />
+							<span>Sign out</span>
+						</button>
+					</form>
+				{/snippet}
+			</DropdownMenuItem>
+		</DropdownMenuContent>
+	{/snippet}
+
+	{#if variant === 'toolbar'}
+		<DropdownMenu bind:open onOpenChange={(value: boolean) => (open = value)}>
+			<DropdownMenuTrigger>
+				{#snippet child({ props })}
+					<button
+						type="button"
+						class="flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+						aria-label={`Account — ${displayName}`}
+						{...props}
+					>
+						<Avatar class="size-7 rounded-full">
+							{#if avatarSrc}
+								<AvatarImage src={avatarSrc} alt={displayName} />
+							{/if}
+							<AvatarFallback class="rounded-full text-xs">{userInitials(user)}</AvatarFallback>
+						</Avatar>
+					</button>
+				{/snippet}
+			</DropdownMenuTrigger>
+			{@render menuContent()}
+		</DropdownMenu>
+	{:else}
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu bind:open onOpenChange={(value: boolean) => (open = value)}>
+					<DropdownMenuTrigger>
+						{#snippet child({ props })}
+							<SidebarMenuButton
+								size="lg"
+								class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+								{...props}
+							>
+								<Avatar class="h-8 w-8 rounded-lg">
+									{#if avatarSrc}
+										<AvatarImage src={avatarSrc} alt={displayName} />
+									{/if}
+									<AvatarFallback class="rounded-lg text-xs">{userInitials(user)}</AvatarFallback>
+								</Avatar>
+								<div
+									class="grid min-w-0 flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden"
+								>
+									<span class="truncate font-semibold">{displayName}</span>
+									<span class="truncate text-xs text-muted-foreground">{user.email ?? ''}</span>
+								</div>
+								<Icon
+									icon="lucide:chevrons-up-down"
+									class="ml-auto size-4 group-data-[collapsible=icon]:hidden"
+								/>
+							</SidebarMenuButton>
+						{/snippet}
+					</DropdownMenuTrigger>
+					{@render menuContent()}
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	{/if}
+{/if}

package/dist/lib/components/app-shell/UserMenu.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+type AppShellUser = {
+    name?: string | null;
+    email?: string | null;
+    image?: string | null;
+};
+type $$ComponentProps = {
+    user?: AppShellUser | null;
+    signOutHref?: string;
+    accountHref?: string;
+    showThemeToggle?: boolean;
+    extraMenuContent?: Snippet;
+    /**
+     * 'sidebar' renders the full identity row inside sidebar chrome;
+     * 'toolbar' renders a compact avatar button for rail-less anatomies
+     * (Canvas). Menu content is identical.
+     */
+    variant?: 'sidebar' | 'toolbar';
+};
+declare const UserMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type UserMenu = ReturnType<typeof UserMenu>;
+export default UserMenu;

package/dist/lib/components/app-shell/WorkspaceLink.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+import { Icon } from "../icon";
+import { requiresDocumentNavigation } from "./packaged-navigation.js";
+let { href, label = "All Projects", description = "View all your projects", icon = "lucide:briefcase" } = $props();
+const packagedNavigation = $derived(requiresDocumentNavigation(href));
+</script>
+
+<SidebarMenu>
+	<SidebarMenuItem>
+		<SidebarMenuButton
+			size="lg"
+			variant="outline"
+			tooltipContent={label}
+			class="border border-sidebar-border bg-sidebar-accent/60 text-sidebar-foreground shadow-none hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+		>
+			{#snippet child({ props })}
+				<a
+					{href}
+					class="flex w-full items-center gap-2 group-data-[collapsible=icon]:justify-center"
+					{...props}
+					data-sveltekit-reload={packagedNavigation ? true : undefined}
+				>
+					<div
+						class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md border border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm group-data-[collapsible=icon]:size-7"
+					>
+						<Icon {icon} class="size-4" />
+					</div>
+					<div
+						data-slot="workspace-link-text"
+						class="flex min-w-0 flex-1 flex-col gap-0.5 text-left leading-none group-data-[collapsible=icon]:hidden"
+					>
+						<span class="font-semibold">{label}</span>
+						<span class="truncate text-xs text-sidebar-foreground/70">{description}</span>
+					</div>
+				</a>
+			{/snippet}
+		</SidebarMenuButton>
+	</SidebarMenuItem>
+</SidebarMenu>

package/dist/lib/components/app-shell/WorkspaceLink.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    href: string;
+    label?: string;
+    description?: string;
+    icon?: string;
+};
+declare const WorkspaceLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type WorkspaceLink = ReturnType<typeof WorkspaceLink>;
+export default WorkspaceLink;

package/dist/lib/components/app-shell/app-navigation.d.ts

@@ -0,0 +1 @@
+export type { AppShellNavigationProjection, VibesAppOriginMap } from './schemas/app-navigation.ts';

package/dist/lib/components/app-shell/app-navigation.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/app-shell/app-shell-utilities.svelte.d.ts

@@ -0,0 +1,67 @@
+import { type RuntimeSvelteStore } from '@vibesdotdev/surface-sveltekit/svelte/state';
+import { type AppShellUtilityComponent, type AppShellUtilityDescriptor, type AppShellUtilityError, type AppShellUtilityPlacement, type AppShellUtilitySurface } from './schemas/app-shell-utility.ts';
+export interface AppShellUtilityViewerInput {
+    readonly signedIn: boolean;
+    readonly surface: AppShellUtilitySurface;
+    readonly error?: AppShellUtilityError;
+    /** Route template the host supplied (`page.route.id`), passed to components. */
+    readonly route?: string;
+    /** Utilities an enclosing surface already shows; this surface skips them. */
+    readonly shownElsewhere?: () => ReadonlySet<string>;
+}
+/** Utilities for one Kit surface (the shell chrome, or an error page). */
+export declare class AppShellUtilities {
+    #private;
+    utilities: {
+        kind: "app-shell/utility";
+        id: string;
+        name: string;
+        icon: string;
+        placement: "header" | "user-menu";
+        order: number;
+        visibility: "always" | "signed-in" | "on-error";
+        enabled: boolean;
+        tags?: string[] | undefined;
+        hardware?: string[] | undefined;
+        priority?: number | undefined;
+        capabilityId?: string | undefined;
+        requiredContext?: string[] | undefined;
+        optionalContext?: string[] | undefined;
+        config?: unknown;
+        retention?: string | {
+            reason: string;
+            maxAgeDays?: number | undefined;
+            maxEntries?: number | undefined;
+            maxBytes?: number | undefined;
+            cascadeFrom?: string | undefined;
+            ageField?: string | undefined;
+            enforcedBy?: string | undefined;
+        } | undefined;
+        description?: string | undefined;
+    }[];
+    /** Loaded components, by utility id; a component stays mounted once loaded. */
+    components: Record<string, AppShellUtilityComponent>;
+    openId: string | null;
+    /** The trigger that opened the current utility. */
+    openedFrom: "error" | "header" | "user-menu";
+    constructor(store: RuntimeSvelteStore | undefined, viewer: () => AppShellUtilityViewerInput);
+    get viewer(): AppShellUtilityViewerInput;
+    /** Every utility this surface shows to its current viewer, in display order. */
+    get visible(): AppShellUtilityDescriptor[];
+    at(placement: AppShellUtilityPlacement): AppShellUtilityDescriptor[];
+    /** Ids this surface shows; an enclosed error surface skips them. */
+    shownIds(): ReadonlySet<string>;
+    /**
+     * Load descriptors from the handed runtime and attach to its utility host.
+     * Resolves the cleanup. No store, no kind, or a failed load renders nothing.
+     */
+    start(): Promise<() => void>;
+    /** Load the utility's component (once) and open it. */
+    open(utility: AppShellUtilityDescriptor, from: AppShellUtilityPlacement | 'error'): Promise<void>;
+    setOpen(id: string, open: boolean): void;
+}
+/** Read the runtime from context and create this surface's utilities. */
+export declare function captureAppShellUtilities(viewer: () => AppShellUtilityViewerInput): AppShellUtilities;
+/** ProductShell publishes its utilities so an enclosed ErrorPage does not repeat them. */
+export declare function provideShellUtilities(utilities: AppShellUtilities): void;
+export declare function peekShellUtilities(): AppShellUtilities | undefined;