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

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

@@ -0,0 +1,21 @@
+<script lang="ts">// User-menu triggers for `app-shell/utility` contributions. Selecting one
+// closes the menu; the component mounts outside it, so a dialog survives.
+import { DropdownMenuGroup, DropdownMenuItem } from "../ui/dropdown-menu";
+import { Icon } from "../icon";
+let { utilities } = $props();
+const items = $derived(utilities.at("user-menu"));
+</script>
+
+{#if items.length > 0}
+	<DropdownMenuGroup>
+		{#each items as utility (utility.id)}
+			<DropdownMenuItem
+				data-app-shell-utility={utility.id}
+				onSelect={() => void utilities.open(utility, 'user-menu')}
+			>
+				<Icon icon={utility.icon} class="h-4 w-4" aria-hidden="true" />
+				<span>{utility.name}</span>
+			</DropdownMenuItem>
+		{/each}
+	</DropdownMenuGroup>
+{/if}

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

@@ -0,0 +1,7 @@
+import type { AppShellUtilities } from './app-shell-utilities.svelte.ts';
+type $$ComponentProps = {
+    utilities: AppShellUtilities;
+};
+declare const AppShellUtilityMenuItems: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellUtilityMenuItems = ReturnType<typeof AppShellUtilityMenuItems>;
+export default AppShellUtilityMenuItems;

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

@@ -0,0 +1,20 @@
+<script lang="ts">let { utilities } = $props();
+const mounted = $derived(utilities.utilities.filter((utility) => utilities.components[utility.id] !== undefined));
+export {};
+</script>
+
+{#each mounted as utility (utility.id)}
+	{@const UtilityComponent = utilities.components[utility.id]}
+	{#if UtilityComponent}
+		<UtilityComponent
+			open={utilities.openId === utility.id}
+			onOpenChange={(open: boolean) => utilities.setOpen(utility.id, open)}
+			{utility}
+			surface={utilities.viewer.surface}
+			placement={utilities.openId === utility.id ? utilities.openedFrom : utility.placement}
+			signedIn={utilities.viewer.signedIn}
+			error={utilities.viewer.error}
+			route={utilities.viewer.route}
+		/>
+	{/if}
+{/each}

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

@@ -0,0 +1,7 @@
+import type { AppShellUtilities } from './app-shell-utilities.svelte.ts';
+type $$ComponentProps = {
+    utilities: AppShellUtilities;
+};
+declare const AppShellUtilityMounts: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellUtilityMounts = ReturnType<typeof AppShellUtilityMounts>;
+export default AppShellUtilityMounts;

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

@@ -0,0 +1,36 @@
+<script lang="ts">// Kit-owned triggers for `app-shell/utility` contributions. The utility's
+// component mounts separately (AppShellUtilityMounts), outside any menu.
+import { Button } from "../ui/button";
+import { Icon } from "../icon";
+let { utilities, placement } = $props();
+const items = $derived(placement === "error" ? utilities.visible : utilities.at("header"));
+</script>
+
+{#each items as utility (utility.id)}
+	{#if placement === 'header'}
+		<Button
+			variant="ghost"
+			size="icon"
+			class="h-8 w-8"
+			aria-label={utility.name}
+			title={utility.name}
+			data-app-shell-utility={utility.id}
+			aria-haspopup="dialog"
+			aria-expanded={utilities.openId === utility.id}
+			onclick={() => utilities.open(utility, 'header')}
+		>
+			<Icon icon={utility.icon} class="h-4 w-4" aria-hidden="true" />
+		</Button>
+	{:else}
+		<Button
+			variant="outline"
+			data-app-shell-utility={utility.id}
+			aria-haspopup="dialog"
+			aria-expanded={utilities.openId === utility.id}
+			onclick={() => utilities.open(utility, 'error')}
+		>
+			<Icon icon={utility.icon} class="mr-2 h-4 w-4" aria-hidden="true" />
+			{utility.name}
+		</Button>
+	{/if}
+{/each}

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

@@ -0,0 +1,9 @@
+import type { AppShellUtilities } from './app-shell-utilities.svelte.ts';
+type $$ComponentProps = {
+    utilities: AppShellUtilities;
+    /** `header`: compact icon buttons; `error`: labelled recovery actions. */
+    placement: 'header' | 'error';
+};
+declare const AppShellUtilityTriggers: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShellUtilityTriggers = ReturnType<typeof AppShellUtilityTriggers>;
+export default AppShellUtilityTriggers;

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

@@ -0,0 +1,108 @@
+<script lang="ts">import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import { Icon } from "../icon";
+import { cn } from "../../utils.js";
+let { apps, currentAppId, orientation = "vertical", class: className } = $props();
+const containerLayout = $derived(orientation === "vertical" ? "flex-col items-center gap-1 py-3" : "flex-row items-center gap-1 px-2 py-2 overflow-x-auto");
+function iconIsUrl(icon) {
+	return typeof icon === "string" && (icon.startsWith("/") || icon.startsWith("http"));
+}
+</script>
+
+<TooltipProvider delayDuration={150}>
+	<nav
+		data-slot="app-switcher-rail"
+		data-orientation={orientation}
+		aria-label="Switch app"
+		class={cn(
+			'flex border-sidebar-border bg-sidebar text-sidebar-foreground',
+			orientation === 'vertical' ? 'border-r' : 'border-b',
+			containerLayout,
+			className
+		)}
+	>
+		{#each apps as app (app.id)}
+			{@const isActive = app.id === currentAppId}
+			{@const displayName = app.brand?.name ?? app.label}
+			{@const iconValue = app.brand?.logo ?? app.icon}
+			<Tooltip>
+				<TooltipTrigger>
+					{#snippet child({ props })}
+						<a
+							href={app.href}
+							aria-label={displayName}
+							aria-current={isActive ? 'page' : undefined}
+							data-app-id={app.id}
+							data-active={isActive ? 'true' : 'false'}
+							class={cn(
+								'group/rail-item relative flex h-10 w-10 shrink-0 items-center justify-center rounded-md transition-colors',
+								'hover:bg-sidebar-accent focus-visible:bg-sidebar-accent focus-visible:ring-2 focus-visible:ring-sidebar-ring focus-visible:outline-none',
+								isActive &&
+									'shadow-[inset_0_0_0_0.5px_color-mix(in_oklab,var(--brand)_20%,transparent)] [background:linear-gradient(180deg,color-mix(in_oklab,var(--brand-fill)_16%,transparent),color-mix(in_oklab,var(--brand-fill)_8%,transparent))]'
+							)}
+							{...props}
+						>
+							{#if iconValue}
+								{#if typeof iconValue === 'string'}
+									{#if iconIsUrl(iconValue)}
+										<img
+											src={iconValue}
+											alt=""
+											class={cn(
+												'max-h-6 max-w-7 object-contain transition-opacity',
+												app.brand?.logoClass,
+												!isActive && 'opacity-70 group-hover/rail-item:opacity-100'
+											)}
+										/>
+									{:else}
+										<Icon
+											icon={iconValue}
+											class={cn(
+												'size-5 transition-colors',
+												isActive
+													? 'text-brand'
+													: 'text-muted-foreground group-hover/rail-item:text-foreground'
+											)}
+										/>
+									{/if}
+								{:else}
+									{@const IconComponent = iconValue as Component}
+									<IconComponent
+										class={cn(
+											'size-5 transition-opacity',
+											app.iconClass ?? 'text-sidebar-foreground',
+											!isActive && 'opacity-70 group-hover/rail-item:opacity-100'
+										)}
+									/>
+								{/if}
+							{/if}
+							{#if isActive}
+								{#if orientation === 'vertical'}
+									<span
+										aria-hidden="true"
+										data-slot="app-switcher-rail-indicator"
+										class={cn(
+											'absolute top-1/2 left-0 h-6 w-0.5 -translate-y-1/2 rounded-r-full bg-current',
+											'text-brand'
+										)}
+									></span>
+								{:else}
+									<span
+										aria-hidden="true"
+										data-slot="app-switcher-rail-indicator"
+										class={cn(
+											'absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-t-full bg-current',
+											'text-brand'
+										)}
+									></span>
+								{/if}
+							{/if}
+						</a>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent side={orientation === 'vertical' ? 'right' : 'bottom'}>
+					{displayName}
+				</TooltipContent>
+			</Tooltip>
+		{/each}
+	</nav>
+</TooltipProvider>

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

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+import type { VibesAppLink } from './schemas/app-navigation';
+type $$ComponentProps = {
+    apps: VibesAppLink[];
+    currentAppId?: string;
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+};
+declare const AppSwitcherRail: Component<$$ComponentProps, {}, "">;
+type AppSwitcherRail = ReturnType<typeof AppSwitcherRail>;
+export default AppSwitcherRail;

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

@@ -0,0 +1,19 @@
+<script lang="ts">import { DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "../ui/dropdown-menu";
+import { Icon } from "../icon";
+let { label = "Interface Type", options, value, onChange, disabled = false } = $props();
+</script>
+
+<DropdownMenuGroup>
+	<DropdownMenuLabel>{label}</DropdownMenuLabel>
+	<DropdownMenuRadioGroup {value} onValueChange={onChange}>
+		{#each options as option (option.value)}
+			<DropdownMenuRadioItem value={option.value} {disabled}>
+				{#if option.icon}<Icon icon={option.icon} class="h-4 w-4" />{/if}
+				<div class="flex-1">
+					<div class="text-sm font-medium">{option.label}</div>
+					{#if option.hint}<div class="text-xs text-muted-foreground">{option.hint}</div>{/if}
+				</div>
+			</DropdownMenuRadioItem>
+		{/each}
+	</DropdownMenuRadioGroup>
+</DropdownMenuGroup>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    label?: string;
+    options: readonly {
+        value: string;
+        label: string;
+        hint?: string;
+        icon?: string;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+};
+declare const InterfaceTypeMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type InterfaceTypeMenu = ReturnType<typeof InterfaceTypeMenu>;
+export default InterfaceTypeMenu;

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

@@ -0,0 +1,81 @@
+<script lang="ts">import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+import { Icon } from "../icon";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "../ui/dropdown-menu";
+let { organizations = [], activeOrgId = null, onOrganizationSwitch, oncreate, createLabel = "+ New Organization" } = $props();
+const activeOrg = $derived(activeOrgId ? organizations.find((o) => o.id === activeOrgId) ?? null : null);
+function handleSwitch(organizationId) {
+	onOrganizationSwitch?.(organizationId);
+}
+function handleCreate() {
+	oncreate?.();
+}
+</script>
+
+{#if organizations.length > 0}
+	<SidebarMenu>
+		<SidebarMenuItem>
+			<DropdownMenu>
+				<DropdownMenuTrigger>
+					{#snippet child({ props })}
+						<SidebarMenuButton
+							size="sm"
+							class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+							{...props}
+						>
+							<div
+								class="flex aspect-square size-8 items-center justify-center rounded-lg bg-muted"
+							>
+								<Icon icon="lucide:building-2" class="size-4 text-muted-foreground" />
+							</div>
+							<div class="flex flex-1 flex-col gap-0.5 text-left leading-none">
+								{#if activeOrg}
+									<span class="truncate text-xs font-medium">{activeOrg.name}</span>
+									<span class="truncate text-[10px] text-muted-foreground"
+										>{activeOrg.role ?? 'Member'}</span
+									>
+								{:else}
+									<span class="text-xs font-medium">Personal</span>
+									<span class="text-[10px] text-muted-foreground">No organization</span>
+								{/if}
+							</div>
+							<Icon icon="lucide:chevron-down" class="ml-auto size-3 text-muted-foreground" />
+						</SidebarMenuButton>
+					{/snippet}
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" side="right" class="w-[200px]">
+					<DropdownMenuItem onSelect={() => handleSwitch('__personal__')} class="cursor-pointer">
+						<span class="flex-1">Personal</span>
+						{#if !activeOrgId}
+							<Icon icon="lucide:check" class="size-3.5" />
+						{/if}
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					{#each organizations as org (org.id)}
+						<DropdownMenuItem onSelect={() => handleSwitch(org.id)} class="cursor-pointer">
+							<div class="flex flex-1 flex-col gap-0.5">
+								<span>{org.name}</span>
+								{#if org.role}
+									<span class="text-[10px] text-muted-foreground">{org.role}</span>
+								{/if}
+							</div>
+							{#if activeOrgId === org.id}
+								<Icon icon="lucide:check" class="size-3.5" />
+							{/if}
+						</DropdownMenuItem>
+					{/each}
+					{#if oncreate}
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							onSelect={handleCreate}
+							class="cursor-pointer"
+							data-testid="org-switcher-create"
+						>
+							<Icon icon="lucide:plus" class="size-3.5" />
+							<span class="flex-1">{createLabel}</span>
+						</DropdownMenuItem>
+					{/if}
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</SidebarMenuItem>
+	</SidebarMenu>
+{/if}

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

@@ -0,0 +1,16 @@
+export interface OrgOption {
+    id: string;
+    name: string;
+    slug?: string;
+    role?: string;
+}
+type $$ComponentProps = {
+    organizations?: OrgOption[];
+    activeOrgId?: string | null;
+    onOrganizationSwitch?: (organizationId: string) => void;
+    oncreate?: () => void;
+    createLabel?: string;
+};
+declare const OrgSwitcher: import("svelte").Component<$$ComponentProps, {}, "">;
+type OrgSwitcher = ReturnType<typeof OrgSwitcher>;
+export default OrgSwitcher;