@aphexcms/cms-core 0.1.3 → 0.1.5

package/dist/components/layout/OrganizationSwitcher.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { organizations } from '../../api/index.js';
+	import { invalidateAll, goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+	import {
+		DropdownMenu,
+		DropdownMenuContent,
+		DropdownMenuItem,
+		DropdownMenuLabel,
+		DropdownMenuSeparator,
+		DropdownMenuTrigger
+	} from '@aphexcms/ui/shadcn/dropdown-menu';
+	import {
+		SidebarMenu,
+		SidebarMenuItem,
+		SidebarMenuButton,
+		useSidebar
+	} from '@aphexcms/ui/shadcn/sidebar';
+	import type { SidebarOrganization } from '../../types/sidebar.js';
+
+	type Props = {
+		organizations?: SidebarOrganization[];
+		activeOrganization?: SidebarOrganization;
+		canCreateOrganization?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	};
+
+	let {
+		organizations: orgs = [],
+		activeOrganization,
+		canCreateOrganization = false,
+		onOpenChange
+	}: Props = $props();
+
+	const sidebar = useSidebar();
+
+	let isSwitching = $state(false);
+
+	// Set initial orgId in URL if not present
+	$effect(() => {
+		if (activeOrganization && !page.url.searchParams.has('orgId')) {
+			const params = new SvelteURLSearchParams(page.url.searchParams);
+			params.set('orgId', activeOrganization.id);
+			goto(`${page.url.pathname}?${params.toString()}`, { replaceState: true });
+		}
+	});
+
+	async function handleSwitchOrganization(org: SidebarOrganization) {
+		if (org.id === activeOrganization?.id) return;
+
+		isSwitching = true;
+		try {
+			// Switch organization on the server
+			await organizations.switch({ organizationId: org.id });
+
+			// Update URL with new orgId and clear editor state
+			const params = new SvelteURLSearchParams();
+			params.set('orgId', org.id);
+
+			// Preserve docType if present, but clear editor-specific params
+			const currentDocType = page.url.searchParams.get('docType');
+			if (currentDocType) {
+				params.set('docType', currentDocType);
+			}
+
+			await goto(`${page.url.pathname}?${params.toString()}`, { replaceState: false });
+
+			// Invalidate all data to refetch with new organization context
+			await invalidateAll();
+		} catch (error) {
+			console.error('Failed to switch organization:', error);
+			// TODO: Show error toast
+		} finally {
+			isSwitching = false;
+		}
+	}
+
+	function getOrganizationInitials(name: string): string {
+		return name
+			.split(' ')
+			.map((word) => word[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+
+	function getRoleLabel(role: string): string {
+		return role.charAt(0).toUpperCase() + role.slice(1);
+	}
+</script>
+
+<SidebarMenu>
+	<SidebarMenuItem>
+		<DropdownMenu {onOpenChange}>
+			<DropdownMenuTrigger>
+				{#snippet child({ props })}
+					<SidebarMenuButton
+						{...props}
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						disabled={isSwitching}
+					>
+						{#if activeOrganization}
+							<div
+								class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg text-sm font-semibold"
+							>
+								{getOrganizationInitials(activeOrganization.name)}
+							</div>
+							<div class="grid flex-1 text-left text-sm leading-tight">
+								<span class="truncate font-medium">
+									{activeOrganization.name}
+								</span>
+								<span class="text-muted-foreground truncate text-xs">
+									{getRoleLabel(activeOrganization.role)}
+								</span>
+							</div>
+						{:else}
+							<div
+								class="bg-muted flex aspect-square size-8 items-center justify-center rounded-lg"
+							>
+								<span class="text-muted-foreground text-xs">?</span>
+							</div>
+							<span class="text-muted-foreground">No organization</span>
+						{/if}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="ml-auto"
+						>
+							<path d="m7 15 5 5 5-5" />
+							<path d="m7 9 5-5 5 5" />
+						</svg>
+					</SidebarMenuButton>
+				{/snippet}
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				class="w-[--bits-dropdown-menu-anchor-width] min-w-56 rounded-lg"
+				align="start"
+				side={sidebar.isMobile ? 'bottom' : 'right'}
+				sideOffset={4}
+			>
+				<DropdownMenuLabel class="text-muted-foreground text-xs">Organizations</DropdownMenuLabel>
+				{#each orgs as org, index (org.id)}
+					<DropdownMenuItem
+						onSelect={() => handleSwitchOrganization(org)}
+						class="gap-2 p-2"
+						disabled={isSwitching || org.id === activeOrganization?.id}
+					>
+						<div
+							class="flex size-6 items-center justify-center rounded-md border text-xs font-semibold"
+						>
+							{getOrganizationInitials(org.name)}
+						</div>
+						<div class="flex flex-1 flex-col">
+							<span class="text-sm">{org.name}</span>
+							<span class="text-muted-foreground text-xs">{getRoleLabel(org.role)}</span>
+						</div>
+						{#if org.id === activeOrganization?.id}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="text-primary"
+							>
+								<path d="M20 6 9 17l-5-5" />
+							</svg>
+						{/if}
+					</DropdownMenuItem>
+				{/each}
+				<DropdownMenuSeparator />
+				<DropdownMenuItem onSelect={() => goto('/admin/organizations')} class="gap-2 p-2">
+					<button class="text-muted-foreground font-medium">View all organizations</button>
+				</DropdownMenuItem>
+				{#if canCreateOrganization}
+					<DropdownMenuSeparator />
+					<DropdownMenuItem class="gap-2 p-2">
+						<div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<path d="M5 12h14" />
+								<path d="M12 5v14" />
+							</svg>
+						</div>
+						<button
+							class="text-muted-foreground font-medium"
+							onclick={() => {
+								goto('/admin/organizations?action=create');
+							}}>Create organization</button
+						>
+					</DropdownMenuItem>
+				{/if}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	</SidebarMenuItem>
+</SidebarMenu>

package/dist/components/layout/OrganizationSwitcher.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SidebarOrganization } from '../../types/sidebar.js';
+type Props = {
+    organizations?: SidebarOrganization[];
+    activeOrganization?: SidebarOrganization;
+    canCreateOrganization?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const OrganizationSwitcher: import("svelte").Component<Props, {}, "">;
+type OrganizationSwitcher = ReturnType<typeof OrganizationSwitcher>;
+export default OrganizationSwitcher;
+//# sourceMappingURL=OrganizationSwitcher.svelte.d.ts.map

package/dist/components/layout/OrganizationSwitcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/OrganizationSwitcher.svelte.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,KAAK,KAAK,GAAG;IACZ,aAAa,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACtC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAqJH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/components/layout/Sidebar.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { SidebarProvider, SidebarInset, SidebarTrigger } from '@aphexcms/ui/shadcn/sidebar';
+	import { Separator } from '@aphexcms/ui/shadcn/separator';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { ModeWatcher } from 'mode-watcher';
+	import { Sun, Moon } from 'lucide-svelte';
+	import { toggleMode } from 'mode-watcher';
+	import { page } from '$app/state';
+	import type { SidebarData } from '../../types/sidebar.js';
+	import AppSidebar from './sidebar/AppSidebar.svelte';
+
+	type Props = {
+		data: SidebarData;
+		onSignOut?: () => void | Promise<void>;
+		children: any;
+		enableGraphiQL?: boolean;
+		activeTab?: { value: 'structure' | 'vision' };
+	};
+
+	let { data, onSignOut, children, enableGraphiQL = false, activeTab }: Props = $props();
+
+	// Only show tabs on the main /admin page
+	const showTabs = $derived(page.url.pathname === '/admin');
+</script>
+
+<ModeWatcher />
+<SidebarProvider class="h-screen">
+	<AppSidebar {data} {onSignOut} />
+	<SidebarInset class="flex h-full flex-col">
+		<header
+			class="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
+		>
+			<div class="flex w-full items-center px-4" class:justify-between={showTabs}>
+				<!-- Left: Trigger and Separator -->
+				<div class="flex items-center gap-2">
+					<SidebarTrigger class="-ml-1" />
+					<Separator orientation="vertical" class="mr-2 h-4" />
+				</div>
+
+				<!-- Center: Structure/Vision Tabs (only on /admin page) -->
+				{#if showTabs && activeTab}
+					<div
+						class="bg-muted text-muted-foreground mx-auto inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]"
+					>
+						<button
+							onclick={() => {
+								if (activeTab) activeTab.value = 'structure';
+							}}
+							class="{activeTab.value === 'structure'
+								? 'bg-background text-foreground shadow'
+								: 'text-muted-foreground'} ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+						>
+							Structure
+						</button>
+						{#if enableGraphiQL}
+							<button
+								onclick={() => {
+									if (activeTab) activeTab.value = 'vision';
+								}}
+								class="{activeTab.value === 'vision'
+									? 'bg-background text-foreground shadow'
+									: 'text-muted-foreground'} ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							>
+								Vision
+							</button>
+						{/if}
+					</div>
+				{/if}
+
+				<!-- Right: Theme Toggle -->
+				<div class:ml-auto={!showTabs}>
+					<Button onclick={toggleMode} variant="outline" size="icon">
+						<Sun
+							class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+						/>
+						<Moon
+							class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+						/>
+						<span class="sr-only">Toggle theme</span>
+					</Button>
+				</div>
+			</div>
+		</header>
+		<main class="flex flex-1 flex-col overflow-hidden pt-0">
+			{@render children()}
+		</main>
+	</SidebarInset>
+</SidebarProvider>

package/dist/components/layout/Sidebar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SidebarData } from '../../types/sidebar.js';
+type Props = {
+    data: SidebarData;
+    onSignOut?: () => void | Promise<void>;
+    children: any;
+    enableGraphiQL?: boolean;
+    activeTab?: {
+        value: 'structure' | 'vision';
+    };
+};
+declare const Sidebar: import("svelte").Component<Props, {}, "">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;
+//# sourceMappingURL=Sidebar.svelte.d.ts.map

package/dist/components/layout/Sidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Sidebar.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIzD,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,QAAQ,EAAE,GAAG,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,WAAW,GAAG,QAAQ,CAAA;KAAE,CAAC;CAC9C,CAAC;AAuEH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/sidebar/AppSidebar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import {
+		Sidebar,
+		SidebarContent,
+		SidebarFooter,
+		SidebarHeader,
+		SidebarRail
+	} from '@aphexcms/ui/shadcn/sidebar';
+	import OrganizationSwitcher from '../OrganizationSwitcher.svelte';
+	import NavMain from './NavMain.svelte';
+	import NavUser from './NavUser.svelte';
+	import type { SidebarData } from '../../../types/sidebar.js';
+	import type { ComponentProps } from 'svelte';
+
+	type Props = ComponentProps<typeof Sidebar> & {
+		data: SidebarData;
+		onSignOut?: () => void | Promise<void>;
+	};
+
+	let { data, onSignOut, ...restProps }: Props = $props();
+
+	// Convert navItems to the format expected by NavMain
+	const navMainItems = $derived(
+		data?.navItems?.map((item) => ({
+			title: item.label,
+			url: item.href,
+			icon: undefined, // We'll keep icons simple for now
+			isActive: false
+		})) || [
+			{
+				title: 'Content',
+				url: '/admin',
+				icon: undefined,
+				isActive: false
+			}
+		]
+	);
+</script>
+
+<Sidebar collapsible="icon" {...restProps}>
+	<SidebarHeader>
+		<!-- Organization Switcher -->
+		{#if data?.organizations && data.organizations.length > 0}
+			<OrganizationSwitcher
+				organizations={data.organizations}
+				activeOrganization={data.activeOrganization}
+				canCreateOrganization={data.user?.role === 'super_admin'}
+			/>
+		{/if}
+	</SidebarHeader>
+
+	<SidebarContent>
+		<NavMain items={navMainItems} />
+	</SidebarContent>
+
+	<SidebarFooter>
+		{#if data?.user}
+			<NavUser user={data.user} {onSignOut} />
+		{/if}
+	</SidebarFooter>
+
+	<SidebarRail />
+</Sidebar>

package/dist/components/layout/sidebar/AppSidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Sidebar } from '@aphexcms/ui/shadcn/sidebar';
+import type { SidebarData } from '../../../types/sidebar.js';
+import type { ComponentProps } from 'svelte';
+type Props = ComponentProps<typeof Sidebar> & {
+    data: SidebarData;
+    onSignOut?: () => void | Promise<void>;
+};
+declare const AppSidebar: import("svelte").Component<Props, {}, "">;
+type AppSidebar = ReturnType<typeof AppSidebar>;
+export default AppSidebar;
+//# sourceMappingURL=AppSidebar.svelte.d.ts.map

package/dist/components/layout/sidebar/AppSidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/sidebar/AppSidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EAKP,MAAM,6BAA6B,CAAC;AAItC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,KAAK,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IAC7C,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAqDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/layout/sidebar/NavMain.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import * as Collapsible from '@aphexcms/ui/shadcn/collapsible';
+	import {
+		SidebarGroup,
+		SidebarGroupLabel,
+		SidebarMenu,
+		SidebarMenuItem,
+		SidebarMenuButton,
+		SidebarMenuSub,
+		SidebarMenuSubItem,
+		SidebarMenuSubButton
+	} from '@aphexcms/ui/shadcn/sidebar';
+	import { ChevronRight, type Icon as IconType } from 'lucide-svelte';
+
+	type NavItem = {
+		title: string;
+		url: string;
+		icon?: typeof IconType;
+		isActive?: boolean;
+		items?: {
+			title: string;
+			url: string;
+		}[];
+	};
+
+	type Props = {
+		items: NavItem[];
+		label?: string;
+	};
+
+	let { items, label = 'Content' }: Props = $props();
+
+	let currentPath = $derived(page.url.pathname);
+</script>
+
+<SidebarGroup>
+	<SidebarGroupLabel>{label}</SidebarGroupLabel>
+	<SidebarMenu>
+		{#each items as item (item.title)}
+			{#if item.items && item.items.length > 0}
+				<Collapsible.Root open={item.isActive} class="group/collapsible">
+					{#snippet child({ props })}
+						<SidebarMenuItem {...props}>
+							<Collapsible.Trigger>
+								{#snippet child({ props })}
+									<SidebarMenuButton {...props} tooltipContent={item.title}>
+										{#if item.icon}
+											{@const Icon = item.icon}
+											<Icon class="h-4 w-4" />
+										{/if}
+										<span>{item.title}</span>
+										<ChevronRight
+											class="ml-auto h-4 w-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+										/>
+									</SidebarMenuButton>
+								{/snippet}
+							</Collapsible.Trigger>
+							<Collapsible.Content>
+								<SidebarMenuSub>
+									{#each item.items as subItem (subItem.title)}
+										<SidebarMenuSubItem>
+											<SidebarMenuSubButton>
+												{#snippet child({ props })}
+													<a href={subItem.url} {...props}>
+														<span>{subItem.title}</span>
+													</a>
+												{/snippet}
+											</SidebarMenuSubButton>
+										</SidebarMenuSubItem>
+									{/each}
+								</SidebarMenuSub>
+							</Collapsible.Content>
+						</SidebarMenuItem>
+					{/snippet}
+				</Collapsible.Root>
+			{:else}
+				<SidebarMenuItem>
+					<SidebarMenuButton
+						onclick={() => goto(item.url)}
+						isActive={currentPath.startsWith(item.url)}
+						tooltipContent={item.title}
+					>
+						{#if item.icon}
+							{@const Icon = item.icon}
+							<Icon class="h-4 w-4" />
+						{/if}
+						<span>{item.title}</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			{/if}
+		{/each}
+	</SidebarMenu>
+</SidebarGroup>

package/dist/components/layout/sidebar/NavMain.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type Icon as IconType } from 'lucide-svelte';
+type NavItem = {
+    title: string;
+    url: string;
+    icon?: typeof IconType;
+    isActive?: boolean;
+    items?: {
+        title: string;
+        url: string;
+    }[];
+};
+type Props = {
+    items: NavItem[];
+    label?: string;
+};
+declare const NavMain: import("svelte").Component<Props, {}, "">;
+type NavMain = ReturnType<typeof NavMain>;
+export default NavMain;
+//# sourceMappingURL=NavMain.svelte.d.ts.map

package/dist/components/layout/sidebar/NavMain.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMain.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/sidebar/NavMain.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAgB,KAAK,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGnE,KAAK,OAAO,GAAG;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;KACZ,EAAE,CAAC;CACJ,CAAC;AAEF,KAAK,KAAK,GAAG;IACZ,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAsEH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/sidebar/NavSecondary.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import {
+		SidebarGroup,
+		SidebarGroupContent,
+		SidebarMenu,
+		SidebarMenuItem,
+		SidebarMenuButton
+	} from '@aphexcms/ui/shadcn/sidebar';
+	import { Sun, Moon } from 'lucide-svelte';
+	import { toggleMode } from 'mode-watcher';
+
+	type Props = {
+		enableGraphiQL?: boolean;
+		activeTab?: 'structure' | 'vision';
+		onTabChange?: (tab: 'structure' | 'vision') => void;
+	};
+
+	let { enableGraphiQL = false, activeTab = $bindable('structure'), onTabChange }: Props = $props();
+
+	function handleTabClick(tab: 'structure' | 'vision') {
+		activeTab = tab;
+		if (onTabChange) {
+			onTabChange(tab);
+		}
+	}
+</script>
+
+<SidebarGroup class="mt-auto">
+	<SidebarGroupContent>
+		<SidebarMenu>
+			<!-- Structure Tab -->
+			<SidebarMenuItem>
+				<SidebarMenuButton
+					onclick={() => handleTabClick('structure')}
+					isActive={activeTab === 'structure'}
+					tooltipContent="Structure"
+					size="sm"
+				>
+					<span>Structure</span>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+
+			<!-- Vision Tab (if GraphiQL is enabled) -->
+			{#if enableGraphiQL}
+				<SidebarMenuItem>
+					<SidebarMenuButton
+						onclick={() => handleTabClick('vision')}
+						isActive={activeTab === 'vision'}
+						tooltipContent="Vision"
+						size="sm"
+					>
+						<span>Vision</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			{/if}
+
+			<!-- Theme Toggle -->
+			<SidebarMenuItem>
+				<SidebarMenuButton onclick={toggleMode} tooltipContent="Toggle theme" size="sm">
+					<Sun class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon
+						class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+					/>
+					<span>Theme</span>
+				</SidebarMenuButton>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	</SidebarGroupContent>
+</SidebarGroup>

package/dist/components/layout/sidebar/NavSecondary.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    enableGraphiQL?: boolean;
+    activeTab?: 'structure' | 'vision';
+    onTabChange?: (tab: 'structure' | 'vision') => void;
+};
+declare const NavSecondary: import("svelte").Component<Props, {}, "activeTab">;
+type NavSecondary = ReturnType<typeof NavSecondary>;
+export default NavSecondary;
+//# sourceMappingURL=NavSecondary.svelte.d.ts.map

package/dist/components/layout/sidebar/NavSecondary.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavSecondary.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/sidebar/NavSecondary.svelte.ts"],"names":[],"mappings":"AAcC,KAAK,KAAK,GAAG;IACZ,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,QAAQ,KAAK,IAAI,CAAC;CACpD,CAAC;AAkDH,QAAA,MAAM,YAAY,oDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}