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

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

@@ -0,0 +1,122 @@
+<script lang="ts">/**
+* The suite switcher for rail-less anatomies (Focus sidebar header, Canvas
+* toolbar): current app identity as a chip, opening a grid of suite apps.
+* When the suite identity is hidden (tenant brands) or there are no other
+* apps, the chip renders inert — identity only, no menu.
+*/
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { Icon } from "../icon";
+import VibesLogo from "../brand/VibesLogo.svelte";
+import { cn } from "../../utils.js";
+let { apps = [], currentAppId, appLabel, brand, compact = false, class: className } = $props();
+const currentApp = $derived(apps.find((app) => app.id === currentAppId));
+const displayName = $derived(brand?.name ?? appLabel ?? currentApp?.label ?? "vibes");
+const switchable = $derived(!brand?.hideSuiteIdentity && apps.length > 1);
+function isIconName(icon) {
+	return typeof icon === "string";
+}
+function appIcon(app) {
+	return isIconName(app.icon) ? app.icon : undefined;
+}
+</script>
+
+{#snippet chipFace()}
+	<span
+		class={cn(
+			'flex shrink-0 items-center justify-center rounded-lg text-white shadow-[inset_0_1px_0_rgb(255_255_255/.22)] ring-1 ring-black/5 [background:var(--brand-gradient,var(--brand-fill))] dark:ring-white/10',
+			compact ? 'size-6' : 'size-8'
+		)}
+	>
+		{#if brand?.logo && typeof brand.logo === 'string' && (brand.logo.startsWith('/') || brand.logo.startsWith('http'))}
+			<img src={brand.logo} alt="" class="size-full rounded-lg object-contain" />
+		{:else if currentApp && appIcon(currentApp)}
+			<Icon icon={appIcon(currentApp)!} class={compact ? 'size-4' : 'size-5'} />
+		{:else}
+			<VibesLogo size={compact ? 16 : 20} class="object-contain" />
+		{/if}
+	</span>
+	<span class="flex min-w-0 flex-col items-start">
+		<span
+			class={cn(
+				'truncate font-semibold tracking-tight',
+				compact ? 'text-[13.5px] leading-tight' : 'text-sm leading-tight'
+			)}
+		>
+			{displayName}
+		</span>
+		{#if !compact && !brand?.hideSuiteIdentity}
+			<span class="text-[11px] leading-tight text-muted-foreground">vibes suite</span>
+		{/if}
+	</span>
+	{#if switchable}
+		<Icon icon="lucide:chevrons-up-down" class="ml-auto size-3.5 shrink-0 text-muted-foreground" />
+	{/if}
+{/snippet}
+
+{#if switchable}
+	<DropdownMenu>
+		<DropdownMenuTrigger>
+			{#snippet child({ props })}
+				<button
+					type="button"
+					data-slot="app-menu-chip"
+					class={cn(
+						'flex w-full min-w-0 items-center gap-2.5 rounded-lg text-left transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+						compact ? 'h-8 px-2' : 'px-2 py-1.5',
+						className
+					)}
+					aria-label={`Switch app — currently ${displayName}`}
+					{...props}
+				>
+					{@render chipFace()}
+				</button>
+			{/snippet}
+		</DropdownMenuTrigger>
+		<DropdownMenuContent align="start" class="w-72">
+			<DropdownMenuLabel>Switch app</DropdownMenuLabel>
+			<DropdownMenuSeparator />
+			<div class="grid grid-cols-2 gap-1 p-1">
+				{#each apps as app (app.id)}
+					{@const active = app.id === currentAppId}
+					<DropdownMenuItem>
+						{#snippet child({ props })}
+							<a
+								href={app.href}
+								class={cn(
+									'flex items-center gap-2.5 rounded-md px-2 py-2',
+									active && 'bg-brand/12 text-brand'
+								)}
+								aria-current={active ? 'page' : undefined}
+								{...props}
+							>
+								{#if appIcon(app)}
+									<Icon
+										icon={appIcon(app)!}
+										class={cn('size-4 shrink-0', active ? 'text-brand' : 'text-muted-foreground')}
+									/>
+								{:else}
+									{@const AppIconComponent = app.icon as Component}
+									<AppIconComponent
+										class={cn('size-4 shrink-0', active ? 'text-brand' : 'text-muted-foreground')}
+									/>
+								{/if}
+								<span class="truncate text-sm">{app.brand?.name ?? app.label}</span>
+							</a>
+						{/snippet}
+					</DropdownMenuItem>
+				{/each}
+			</div>
+		</DropdownMenuContent>
+	</DropdownMenu>
+{:else}
+	<div
+		data-slot="app-menu-chip"
+		class={cn(
+			'flex w-full min-w-0 items-center gap-2.5 rounded-lg',
+			compact ? 'h-8 px-2' : 'px-2 py-1.5',
+			className
+		)}
+	>
+		{@render chipFace()}
+	</div>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+import type { VibesAppBrand, VibesAppLink } from './schemas/app-navigation';
+type $$ComponentProps = {
+    apps?: VibesAppLink[];
+    currentAppId?: string;
+    /** Display name for the current app (falls back to brand name). */
+    appLabel?: string;
+    brand?: VibesAppBrand;
+    /** Compact = toolbar-height chip (Canvas); default = sidebar-header chip (Focus). */
+    compact?: boolean;
+    class?: string;
+};
+declare const AppMenuChip: Component<$$ComponentProps, {}, "">;
+type AppMenuChip = ReturnType<typeof AppMenuChip>;
+export default AppMenuChip;

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

@@ -0,0 +1,73 @@
+<script lang="ts">import ProductShell from "./ProductShell.svelte";
+import { getContext, setContext, onDestroy } from "svelte";
+import { SidebarLayoutStore } from "../sidebar-layout/sidebar-layout-store.svelte";
+let { appId, appLabel, appIcon = undefined, location, pathname = "", route, navigation = [], navigationProjection, user = null, viewer, signInHref, signOutHref = "/auth/signout", accountHref, workspaceHref, workspaceLabel, workspaceDescription, organizations = [], activeOrgId = null, onOrganizationSwitch, children, header, headerActions, breadcrumbs = [], extraUserMenuContent, collapsibleSections = true, showAppSwitcher = true, showModeSwitcher = true, showMessenger = true, messengerChatOrigin, appOrigins, marshalProjectId, brand, presentation = "default", contentScroll = "page", contentClass = "p-4 md:p-6", sidebar, banner, provider, messenger, searchSlot, sidebarOpen, onSidebarOpenChange, chrome, chromeLocked = false, showShellStyleMenu = true, onShellStyleChange, appearanceHref, onThemePresetChange, onModeChange, ambient = true, disableInlineAppearanceBootstrap = true } = $props();
+const resolvedAppLabel = $derived(appLabel);
+// Provide SidebarLayoutStore context if no parent already set one.
+// Apps that need custom initialization can setContext('layout', ...) in their +layout.svelte
+// before AppShell mounts, and this will be a no-op.
+const existingLayout = getContext("layout");
+if (!existingLayout) {
+	const layout = new SidebarLayoutStore({
+		title: "",
+		description: "",
+		keywords: []
+	});
+	setContext("layout", layout);
+	onDestroy(() => layout.dispose());
+}
+</script>
+
+<ProductShell
+	{appId}
+	title={resolvedAppLabel}
+	{location}
+	{pathname}
+	{route}
+	{navigation}
+	{navigationProjection}
+	{user}
+	{viewer}
+	{signInHref}
+	{signOutHref}
+	{accountHref}
+	{workspaceHref}
+	{workspaceLabel}
+	{workspaceDescription}
+	{organizations}
+	{activeOrgId}
+	{onOrganizationSwitch}
+	{extraUserMenuContent}
+	{breadcrumbs}
+	{header}
+	{headerActions}
+	{collapsibleSections}
+	{showAppSwitcher}
+	{showModeSwitcher}
+	{showMessenger}
+	{messengerChatOrigin}
+	{appOrigins}
+	{marshalProjectId}
+	{brand}
+	{presentation}
+	{contentScroll}
+	{contentClass}
+	{sidebar}
+	{banner}
+	{provider}
+	{messenger}
+	{searchSlot}
+	{sidebarOpen}
+	{onSidebarOpenChange}
+	{chrome}
+	{chromeLocked}
+	{showShellStyleMenu}
+	{onShellStyleChange}
+	{appearanceHref}
+	{onThemePresetChange}
+	{onModeChange}
+	{ambient}
+	{disableInlineAppearanceBootstrap}
+>
+	{@render children()}
+</ProductShell>

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

@@ -0,0 +1,99 @@
+import type { AppShellNavigationProjection, AppShellUser, AppShellViewer, AppSidebarGroup, VibesAppBrand } from './schemas/app-navigation';
+import { type Component, type Snippet } from 'svelte';
+import type { ShellStyle } from './shell-style';
+import type { AppShellLocation } from './shell-location.ts';
+type $$ComponentProps = {
+    appId: string;
+    appLabel?: string;
+    appIcon?: string | Component;
+    /** Current URL supplied by the host. SvelteKit consumers may pass `page.url` directly. */
+    location?: AppShellLocation;
+    pathname?: string;
+    /**
+     * Route template (SvelteKit `page.route.id`, e.g. `/projects/[id]`) handed
+     * to app-shell utilities. Never a concrete path.
+     */
+    route?: string | null;
+    navigation?: AppSidebarGroup[];
+    navigationProjection?: AppShellNavigationProjection;
+    user?: AppShellUser | null;
+    /** Legacy viewer input; hosts project audience visibility in navigationProjection. */
+    viewer?: AppShellViewer;
+    signInHref?: string;
+    signOutHref?: string;
+    accountHref?: string;
+    workspaceHref?: string;
+    workspaceLabel?: string;
+    workspaceDescription?: string;
+    organizations?: {
+        id: string;
+        name: string;
+        slug?: string;
+        role?: string;
+    }[];
+    activeOrgId?: string | null;
+    onOrganizationSwitch?: (organizationId: string) => void;
+    children: Snippet;
+    header?: Snippet;
+    headerActions?: Snippet;
+    breadcrumbs?: {
+        href?: string;
+        label: string;
+        icon?: string;
+    }[];
+    extraUserMenuContent?: Snippet;
+    collapsibleSections?: boolean;
+    showAppSwitcher?: boolean;
+    showModeSwitcher?: boolean;
+    showMessenger?: boolean;
+    messengerChatOrigin?: string;
+    appOrigins?: import('./app-navigation.ts').VibesAppOriginMap;
+    /** Active project id, surfaced to Marshal as context (optional). */
+    marshalProjectId?: string;
+    /** Brand override; otherwise uses navigationProjection.app.brand. */
+    brand?: VibesAppBrand;
+    /** Generic visual behavior profile; native keeps shell materials platform-like. */
+    presentation?: 'default' | 'native';
+    /** One scroll owner: the shell page or an embedded full-height pane. */
+    contentScroll?: 'page' | 'pane';
+    contentClass?: string;
+    /** Replace the built-in branded sidebar with a consumer-supplied one (forwarded to ProductShell). */
+    sidebar?: Snippet;
+    /** Banner rendered above the page header (forwarded to ProductShell). */
+    banner?: Snippet;
+    /** Wraps the main content in an app-specific provider scope (forwarded to ProductShell). */
+    provider?: Snippet<[{
+        content: Snippet;
+    }]>;
+    /** Replace the default docked messenger widget (forwarded to ProductShell). */
+    messenger?: Snippet;
+    /** Omnibar / search slot rendered in the center of the header (forwarded to ProductShell). */
+    searchSlot?: Snippet;
+    /** Controlled sidebar open state, paired with `onSidebarOpenChange` (forwarded to ProductShell). */
+    sidebarOpen?: boolean;
+    /** Change handler paired with `sidebarOpen` (forwarded to ProductShell). */
+    onSidebarOpenChange?: (open: boolean) => void;
+    /** App-default shell anatomy — 'suite' | 'focus' | 'canvas' (forwarded to ProductShell). */
+    chrome?: ShellStyle;
+    /** Pin the anatomy: ignore user preference, hide the picker (forwarded to ProductShell). */
+    chromeLocked?: boolean;
+    /** Offer the Suite/Focus/Canvas picker (forwarded to ProductShell). */
+    showShellStyleMenu?: boolean;
+    /** Notified after the user picks a layout (forwarded to ProductShell). */
+    onShellStyleChange?: (style: ShellStyle) => void;
+    /** Target for the picker's theme-customization link (forwarded to ProductShell). */
+    appearanceHref?: string;
+    /** Notified after a color-theme pick (forwarded to ProductShell). */
+    onThemePresetChange?: (presetId: string) => void;
+    /** Notified after a mode pick (forwarded to ProductShell). */
+    onModeChange?: (mode: 'system' | 'light' | 'dark') => void;
+    /** Keep first-paint inline appearance bootstraps disabled (the default).
+     * Pass false only for an explicit legacy host; see ProductShell. */
+    disableInlineAppearanceBootstrap?: boolean;
+    /** Drifting aurora behind the chrome; the CSS ambient ground stays either
+     *  way. Off for surfaces that own the whole canvas (forwarded to ProductShell). */
+    ambient?: boolean;
+};
+declare const AppShell: Component<$$ComponentProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;