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

package/dist/lib/components/multiselect/MultiselectComboboxAdvanced.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">let { options, selected = $bindable([]), placeholder = "Select...", searchPlaceholder = "Search...", disabled = false } = $props();
+let open = $state(false);
+let search = $state("");
+let filteredOptions = $derived(options.filter((o) => search ? o.label.toLowerCase().includes(search.toLowerCase()) : true));
+function toggleOption(val) {
+	if (disabled) return;
+	if (selected.includes(val)) {
+		selected = selected.filter((v) => v !== val);
+	} else {
+		selected = [...selected, val];
+	}
+}
+function removeOption(val) {
+	if (disabled) return;
+	selected = selected.filter((v) => v !== val);
+}
+function getLabel(val) {
+	return options.find((o) => o.value === val)?.label ?? val;
+}
+export {};
+</script>
+
+<div>
+	<div
+		class="multiselect-advanced-trigger"
+		role="combobox"
+		tabindex={disabled ? -1 : 0}
+		aria-expanded={open}
+		aria-haspopup="listbox"
+		aria-controls="multiselect-advanced-listbox"
+		aria-disabled={disabled}
+		onclick={() => !disabled && (open = !open)}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') open = false;
+			if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				open = !open;
+			}
+		}}
+	>
+		{#if selected.length === 0}
+			<span class="multiselect-advanced-placeholder">{placeholder}</span>
+		{:else}
+			{#each selected as val (val)}
+				<span class="multiselect-advanced-tag">
+					{getLabel(val)}
+					<button
+						type="button"
+						class="multiselect-advanced-tag-remove"
+						onclick={(e) => {
+							e.stopPropagation();
+							removeOption(val);
+						}}
+						aria-label="Remove {getLabel(val)}"
+					>
+						&times;
+					</button>
+				</span>
+			{/each}
+		{/if}
+	</div>
+
+	{#if open}
+		<div id="multiselect-advanced-listbox" class="multiselect-advanced-dropdown" role="listbox">
+			<input
+				type="text"
+				class="multiselect-advanced-search focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+				placeholder={searchPlaceholder}
+				bind:value={search}
+				onfocus={() => (open = true)}
+			/>
+			{#each filteredOptions as option (option.value)}
+				<button
+					type="button"
+					class="multiselect-advanced-option"
+					class:selected={selected.includes(option.value)}
+					role="option"
+					aria-selected={selected.includes(option.value)}
+					onclick={() => toggleOption(option.value)}
+				>
+					{#if selected.includes(option.value)}
+						<span class="multiselect-advanced-check">&#10003;</span>
+					{/if}
+					{option.label}
+				</button>
+			{/each}
+			{#if filteredOptions.length === 0}
+				<div class="multiselect-advanced-empty">No results</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.multiselect-advanced-trigger {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		min-height: 2.25rem;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--border, #e2e8f0);
+		border-radius: 0.375rem;
+		cursor: pointer;
+		align-items: center;
+	}
+
+	.multiselect-advanced-trigger[aria-disabled='true'] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.multiselect-advanced-placeholder {
+		color: var(--muted-foreground, #94a3b8);
+		font-size: 0.875rem;
+	}
+
+	.multiselect-advanced-tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.125rem 0.5rem;
+		background: var(--secondary, #f1f5f9);
+		border-radius: 0.25rem;
+		font-size: 0.8125rem;
+	}
+
+	.multiselect-advanced-tag-remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+		line-height: 1;
+		font-size: 1rem;
+		color: var(--muted-foreground, #64748b);
+	}
+
+	.multiselect-advanced-dropdown {
+		position: absolute;
+		z-index: 50;
+		margin-top: 0.25rem;
+		border: 1px solid var(--border, #e2e8f0);
+		border-radius: 0.375rem;
+		background: var(--popover, white);
+		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+		max-height: 15rem;
+		overflow-y: auto;
+		min-width: 100%;
+	}
+
+	.multiselect-advanced-search {
+		width: 100%;
+		padding: 0.5rem;
+		border: none;
+		border-bottom: 1px solid var(--border, #e2e8f0);
+		font-size: 0.875rem;
+		box-sizing: border-box;
+	}
+
+	.multiselect-advanced-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		background: none;
+		cursor: pointer;
+		font-size: 0.875rem;
+		text-align: left;
+	}
+
+	.multiselect-advanced-option:hover {
+		background: var(--accent, #f1f5f9);
+	}
+
+	.multiselect-advanced-option.selected {
+		background: var(--accent, #f1f5f9);
+	}
+
+	.multiselect-advanced-check {
+		font-size: 0.75rem;
+		color: var(--primary, #3b82f6);
+	}
+
+	.multiselect-advanced-empty {
+		padding: 0.5rem;
+		text-align: center;
+		color: var(--muted-foreground, #94a3b8);
+		font-size: 0.875rem;
+	}
+</style>

package/dist/lib/components/multiselect/MultiselectComboboxAdvanced.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Option {
+    value: string;
+    label: string;
+    icon?: Snippet;
+}
+interface Props {
+    options: Option[];
+    selected?: string[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+}
+declare const MultiselectComboboxAdvanced: import("svelte").Component<Props, {}, "selected">;
+type MultiselectComboboxAdvanced = ReturnType<typeof MultiselectComboboxAdvanced>;
+export default MultiselectComboboxAdvanced;

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

@@ -0,0 +1 @@
+export { default as MultiselectCombobox } from './MultiselectCombobox.svelte';

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

@@ -0,0 +1 @@
+export { default as MultiselectCombobox } from './MultiselectCombobox.svelte';

package/dist/lib/components/navigation/NavLink.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">import { Sidebar, SidebarMenuItem, SidebarMenuButton } from "../ui";
+import { Icon } from "../icon";
+import { useNavigationContext } from "./nav-context.svelte";
+let { href, label, icon, match = "exact", openInNewTab = false, requiresProject = false, disabledTooltip, requiresSubscriptionPlan = null, dataNavSection, dataNavItem, highlightOverview = false, additionalMatchPaths = [], class: className = "" } = $props();
+const navigation = useNavigationContext();
+const currentPath = $derived(navigation.state.currentPath);
+function normalizePath(target) {
+	// A target that is not a URL has no pathname to normalize; it matches as written.
+	if (!URL.canParse(target, "https://example.com")) return target;
+	return new URL(target, "https://example.com").pathname;
+}
+const hrefPathname = $derived.by(() => normalizePath(href));
+const isActive = $derived.by(() => {
+	const exactMatch = currentPath === hrefPathname;
+	const prefixMatch = currentPath.startsWith(`${hrefPathname}/`);
+	const baseMatch = match === "startsWith" ? exactMatch || prefixMatch : exactMatch;
+	if (baseMatch) return true;
+	if (!additionalMatchPaths.length) return false;
+	return additionalMatchPaths.some((path) => {
+		const normalized = normalizePath(path);
+		if (path.endsWith("/*")) {
+			const prefix = normalized.slice(0, -2);
+			return currentPath === prefix || currentPath.startsWith(`${prefix}/`);
+		}
+		return currentPath === normalized;
+	});
+});
+const projectMissing = $derived(requiresProject && !navigation.state.currentProject);
+const gatedByPlan = $derived(requiresSubscriptionPlan !== null && !navigation.state.hasActiveSubscription);
+function handleNavigate(e) {
+	if (gatedByPlan) {
+		e.preventDefault();
+		handleUpgrade();
+		return;
+	}
+	if (openInNewTab || projectMissing) return;
+	navigation.actions.closeOnNavigate();
+}
+function handleUpgrade() {
+	if (!requiresSubscriptionPlan) return;
+	navigation.actions.openUpgrade(label);
+}
+</script>
+
+<SidebarMenuItem>
+	{#if projectMissing}
+		<div class="navlink-disabled">
+			<SidebarMenuButton isActive={false} class="cursor-not-allowed opacity-70">
+				{#snippet child({ props })}
+					<span class={`${props.class} cursor-not-allowed`}>
+						<Icon {icon} class="size-4" />
+						<span>{label}</span>
+					</span>
+				{/snippet}
+			</SidebarMenuButton>
+			{#if disabledTooltip}
+				<div class="navlink-tooltip">{disabledTooltip}</div>
+			{/if}
+		</div>
+	{:else}
+		<SidebarMenuButton
+			{isActive}
+			tooltipContent={gatedByPlan
+				? `Upgrade to ${requiresSubscriptionPlan} to access ${label}`
+				: label}
+			class={gatedByPlan ? 'opacity-60 hover:opacity-80' : ''}
+		>
+			{#snippet child({ props })}
+				<a
+					{href}
+					class={`${props.class} ${highlightOverview ? 'sidebar-overview-link' : ''} ${gatedByPlan ? 'text-muted-foreground' : ''} ${className}`}
+					target={openInNewTab ? '_blank' : undefined}
+					rel={openInNewTab ? 'noreferrer noopener' : undefined}
+					data-nav-section={dataNavSection}
+					data-nav-item={dataNavItem ?? href}
+					onclick={handleNavigate}
+				>
+					<Icon {icon} class="size-4" />
+					<span>{label}</span>
+				</a>
+			{/snippet}
+		</SidebarMenuButton>
+	{/if}
+</SidebarMenuItem>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	.navlink-disabled {
+		@apply relative;
+	}
+
+	.navlink-tooltip {
+		@apply pointer-events-none absolute top-1/2 left-full z-50 ml-2 -translate-y-1/2 rounded-md border bg-popover px-3 py-2 text-sm whitespace-nowrap text-popover-foreground opacity-0 shadow-md transition-opacity duration-200;
+	}
+
+	.navlink-disabled:hover .navlink-tooltip {
+		@apply opacity-100;
+	}
+</style>

package/dist/lib/components/navigation/NavLink.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    href: string;
+    label: string;
+    icon: string;
+    match?: 'exact' | 'startsWith';
+    openInNewTab?: boolean;
+    requiresProject?: boolean;
+    disabledTooltip?: string;
+    requiresSubscriptionPlan?: string | null;
+    dataNavSection?: string;
+    dataNavItem?: string;
+    highlightOverview?: boolean;
+    additionalMatchPaths?: string[];
+    class?: string;
+};
+declare const NavLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavLink = ReturnType<typeof NavLink>;
+export default NavLink;

package/dist/lib/components/navigation/SectionShell.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">import { BROWSER } from "esm-env";
+import { Sidebar, SidebarGroup, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarSeparator, Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui";
+import { Icon } from "../icon";
+import { useNavigationContext } from "./nav-context.svelte";
+import { kitLogger } from "../../kit-logger";
+import { capturePreferenceStorage } from "../../preferences/capture-preference-storage.js";
+import { readPreference, sectionOpenPreference, writePreference } from "../../preferences/preference-storage.js";
+/** Reports through the host-injected kit logger (a no-op before the kit is initialized). */
+const logger = kitLogger("vibeskit-navigation");
+let { sectionKey, title, icon, iconColor, showSeparatorBefore = false, defaultOpen = false, autoOpenPaths = [], children } = $props();
+const navigation = useNavigationContext();
+const currentPath = $derived(navigation.state.currentPath);
+let open = $state(false);
+let isInitialized = false;
+// Section state persists in the runtime's preference storage; unset reads as `defaultOpen`.
+const resolveStorage = capturePreferenceStorage();
+let storage = $state();
+$effect(() => {
+	// Initialize from the runtime's preference storage on first run
+	if (!isInitialized && BROWSER) {
+		isInitialized = true;
+		open = defaultOpen;
+		void resolveStorage().then((resolved) => {
+			storage = resolved;
+			const read = readPreference(storage, sectionOpenPreference(sectionKey, defaultOpen));
+			if (read.status === "blocked" || read.status === "malformed") {
+				logger.error("Failed to read sidebar section state", { reason: read.status });
+			} else if (read.status === "found") {
+				open = read.value;
+			}
+		});
+	}
+});
+$effect(() => {
+	// Persist to the runtime's preference storage after initialization
+	if (!isInitialized || !BROWSER) return;
+	const persisted = writePreference(storage, sectionOpenPreference(sectionKey, defaultOpen), open);
+	if (persisted === "blocked") {
+		logger.error("Failed to persist sidebar section state", { reason: persisted });
+	}
+});
+$effect(() => {
+	if (!autoOpenPaths.length) return;
+	const shouldOpen = autoOpenPaths.some((path) => {
+		if (path.endsWith("/*")) {
+			const prefix = path.slice(0, -2);
+			return currentPath === prefix || currentPath.startsWith(`${prefix}/`);
+		}
+		return currentPath === path;
+	});
+	if (shouldOpen) {
+		open = true;
+	}
+});
+function handleToggle(state) {
+	open = state;
+}
+</script>
+
+{#if showSeparatorBefore}
+	<SidebarSeparator class="my-2" />
+{/if}
+
+<Collapsible {open} onOpenChange={handleToggle} class="group/collapsible mb-1">
+	<SidebarGroup>
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<SidebarMenuButton
+					tooltipContent={title}
+					size="sm"
+					variant="outline"
+					class="bg-sidebar-accent/50 group-data-[collapsible=icon]:bg-sidebar-accent/70 hover:bg-sidebar-accent"
+				>
+					{#snippet child({ props })}
+						<CollapsibleTrigger
+							class="flex w-full items-center justify-between py-1.5 sm:py-1 {props.class}"
+							data-nav-group={sectionKey}
+							{...props}
+						>
+							<div class="flex items-center gap-2">
+								<Icon
+									{icon}
+									class={`size-4 transition-all group-data-[collapsible=icon]:size-5 sm:size-4 ${iconColor}`}
+								/>
+								<span
+									class="text-xs font-semibold tracking-wider text-sidebar-accent-foreground uppercase sm:text-xs"
+								>
+									{title}
+								</span>
+							</div>
+							<Icon
+								icon="lucide:chevron-down"
+								class="size-4 text-sidebar-accent-foreground/70 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-180 sm:size-3.5"
+							/>
+						</CollapsibleTrigger>
+					{/snippet}
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+		</SidebarMenu>
+
+		<CollapsibleContent>
+			<SidebarMenu class={`mt-1 space-y-1 ${sectionKey}-menu-section`}>
+				{#if children}
+					{@render children()}
+				{/if}
+			</SidebarMenu>
+		</CollapsibleContent>
+	</SidebarGroup>
+</Collapsible>

package/dist/lib/components/navigation/SectionShell.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    sectionKey: string;
+    title: string;
+    icon: string;
+    iconColor: string;
+    showSeparatorBefore?: boolean;
+    defaultOpen?: boolean;
+    autoOpenPaths?: string[];
+    children?: import('svelte').Snippet;
+};
+declare const SectionShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type SectionShell = ReturnType<typeof SectionShell>;
+export default SectionShell;