@lobb-js/studio 0.33.0 → 0.34.0

package/src/lib/{applyStudioTheme.ts → applyUITheme.ts}

@@ -1,11 +1,11 @@
-import type { StudioTheme } from "./store.types";
+import type { UITheme } from "./store.types";
 
-// Studio theme injection. Writes the configured CSS-variable overrides
-// into a single <style> tag — light overrides under `:root`, dark under
+// UI theme injection. Writes the configured CSS-variable overrides into
+// a single <style> tag — light overrides under `:root`, dark under
 // `.dark` — so each mode picks up its own variant. Idempotent: re-runs
 // replace the previous block.
 
-const STYLE_ID = "lobb-studio-theme";
+const STYLE_ID = "lobb-ui-theme";
 
 function buildDeclarations(vars: Record<string, string> | undefined): string {
     if (!vars) return "";
@@ -17,7 +17,7 @@ function buildDeclarations(vars: Record<string, string> | undefined): string {
     return out.join(" ");
 }
 
-export function applyStudioTheme(theme: StudioTheme | undefined): void {
+export function applyUITheme(theme: UITheme | undefined): void {
     if (typeof document === "undefined") return;
 
     document.getElementById(STYLE_ID)?.remove();

package/src/lib/components/LlmButton.svelte

@@ -16,6 +16,7 @@
 		format?: any;
 		messages?: any[];
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -28,6 +29,7 @@
 		description,
 		placeholder = "write prompt description",
 		variant = "default",
+		size,
 		Icon = Brain,
 		onApiResponseComplete,
 		messages,
@@ -98,7 +100,7 @@
 {#if ctx.meta.extensions.llm && ctx.meta.collections.llm_chat}
 	<Popover.Root bind:open={popoverOpen}>
 		<Popover.Trigger>
-			<Button {variant} class={props.class}>
+			<Button {variant} {size} class={props.class}>
 				{#if loading}
 					<LoaderIcon class="animate-spin" />
 				{:else}
@@ -129,7 +131,7 @@
 				<Button
 					type="submit"
 					Icon={Send}
-					class="h-7 px-3 text-xs font-normal">Submit</Button
+					size="sm">Submit</Button
 				>
 			</form>
 		</Popover.Content>

package/src/lib/components/Studio.svelte

@@ -5,7 +5,7 @@
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import MiniSidebar from "./miniSidebar.svelte";
+    import MainNav from "./mainNav.svelte";
     import * as Tooltip from "./ui/tooltip";
     import { page } from "$app/state";
     import { afterNavigate } from "$app/navigation";
@@ -17,7 +17,7 @@
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
-    import { applyStudioTheme } from "../applyStudioTheme";
+    import { applyUITheme } from "../applyUITheme";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
     import Collections from "./routes/collections/collections.svelte";
@@ -44,6 +44,12 @@
 
     let status: "loading" | "error" | "ready" = $state("loading");
     let isSmallScreen = $derived(!mediaQueries.sm.current);
+    // Horizontal nav forces the layout to row mode (top bar instead of
+    // left rail). Falls back to vertical when small-screen mode is on,
+    // since there's no useful horizontal layout below 640px.
+    const horizontalNav = $derived(
+        (ctx.meta as any)?.ui?.horizontalNav === true && !isSmallScreen,
+    );
 
     onMount(async () => {
         // Remove the static loading screen defined in app.html — it shows instantly
@@ -51,7 +57,7 @@
         document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
-            applyStudioTheme(ctx.meta.studio?.theme);
+            applyUITheme(ctx.meta.ui?.theme);
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             loadExtensionWorkflows(ctx as any);
@@ -104,11 +110,13 @@
 {:else}
     <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
         <main
-            class="bg-muted h-screen w-screen"
-            style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
+            class="bg-muted h-screen w-screen overflow-hidden"
+            style={horizontalNav
+                ? "display: grid; grid-template-rows: 3rem 1fr;"
+                : `display: grid; grid-template-columns: ${isSmallScreen ? '1fr' : '3.5rem 1fr'};`}
         >
-            <MiniSidebar />
-            <div class="min-h-0 h-screen overflow-hidden">
+            <MainNav orientation={horizontalNav ? "horizontal" : "vertical"} />
+            <div class="min-h-0 h-full overflow-hidden">
                 {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
                     <Home />
                 {:else if page.url.pathname.startsWith("/studio/collections")}

package/src/lib/components/createManyButton.svelte

@@ -90,14 +90,14 @@
 				<Button
 					variant="outline"
 					onclick={() => hideDrawer()}
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={X}
 				>
 					Cancel
 				</Button>
 				<Button
 					variant="default"
-					class="h-7 px-3 text-xs font-normal"
+					size="sm"
 					Icon={Plus}
 					onclick={handleCreateMany}
 				>

package/src/lib/components/dataTable/dataTable.svelte

@@ -279,7 +279,7 @@
 
 <div
     bind:clientWidth={dataTableContainerWidth}
-    class="flex flex-col overflow-auto h-full w-full"
+    class="flex flex-col overflow-auto h-full w-full bg-card"
 >
     {#snippet rowActionsSnippet(entry: Record<string, any>)}
         <ExtensionsComponents

package/src/lib/components/dataTable/dataTableTabs.svelte

@@ -44,7 +44,7 @@
 </script>
 
 {#if tabs}
-    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-card">
         {#each tabs as tab}
             {@const key = tab.id ?? tab.label}
             {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}

package/src/lib/components/dataTable/filter.svelte

@@ -71,7 +71,8 @@
         <Popover.Trigger
             class={buttonVariants({
                 variant: "ghost",
-                class: "h-7 px-2 text-xs font-normal text-muted-foreground",
+                size: "sm",
+                class: "text-muted-foreground",
             })}
         >
             <Plus />
@@ -184,7 +185,7 @@
                                     <Popover.Trigger
                                         class={buttonVariants({
                                             variant: "ghost",
-                                            class: "h-7 px-2 text-xs font-normal",
+                                            size: "sm",
                                         })}
                                     >
                                         <Plus />

package/src/lib/components/dataTable/filterButton.svelte

@@ -21,7 +21,7 @@
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
-			class: "h-7 px-3 text-xs font-normal",
+			size: "sm",
 		})}
 	>
 		<ListFilter />

package/src/lib/components/dataTable/footer.svelte

@@ -27,7 +27,7 @@
 
 <div
     bind:clientWidth={footerWidth}
-    class="flex justify-between box-content border-t bg-background px-2 h-10"
+    class="flex justify-between box-content border-t bg-card px-2 h-10"
 >
     <div class="flex items-center gap-2">
         <Button

package/src/lib/components/dataTable/header.svelte

@@ -4,7 +4,6 @@
     import type { ParentContext } from "./dataTable.svelte";
     import CanAccess from "../canAccess.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
-    import * as Tooltip from "../ui/tooltip";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -105,7 +104,7 @@
 </script>
 
 <div
-    class="flex justify-between items-center gap-2 p-2 border-b bg-background h-10"
+    class="flex justify-between items-center gap-2 p-2 border-b bg-card h-12"
     bind:clientWidth={headerWidth}
 >
     <div class="flex items-center gap-1">
@@ -115,7 +114,7 @@
                 Icon={Trash}
                 onclick={handleDeleteButton}
                 variant="outline"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
             >
                 Delete {selectedRecords.length}
                 {selectedRecords.length > 1 ? "records" : "record"}
@@ -135,7 +134,7 @@
                 variant="outline"
                 title="Filter table with AI"
                 description="Tell the AI how do you want to filter the table"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 format={{
                     type: "json_object",
                 }}
@@ -161,7 +160,8 @@
     <div>
         <Button
             variant="ghost"
-            class="h-7 px-2 font-normal text-muted-foreground"
+            size="sm"
+            class="text-muted-foreground"
             Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
@@ -169,20 +169,13 @@
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">
-                <Tooltip.Provider delayDuration={0}>
-                    <Tooltip.Root>
-                        <Tooltip.Trigger>
-                            <ImportButton
-                                {collectionName}
-                                variant="outline"
-                                class="h-7 px-2 text-xs font-normal"
-                                Icon={Download}
-                                onSuccessfullSave={() => (params = { ...params })}
-                            />
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>Import</Tooltip.Content>
-                    </Tooltip.Root>
-                </Tooltip.Provider>
+                <ImportButton
+                    {collectionName}
+                    variant="outline"
+                    size="sm"
+                    Icon={Download}
+                    onSuccessfullSave={() => (params = { ...params })}
+                />
             </CanAccess>
         {/if}
         <ExtensionsComponents
@@ -195,7 +188,7 @@
             <SelectRecord
                 {collectionName}
                 variant="outline"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={Link}
                 onSelect={handleLink}
             >
@@ -206,7 +199,7 @@
             <CreateDetailViewButton
                 {collectionName}
                 variant="default"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={Plus}
                 onChanges={onCreate ? handleCreate : undefined}
                 onSuccessfullSave={onCreate ? undefined : handleCreate}

package/src/lib/components/dataTable/listViewChildren.svelte

@@ -61,7 +61,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="ghost"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 values={{ [child.field]: recordId }}
                                 onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}

package/src/lib/components/dataTable/sort.svelte

@@ -143,7 +143,7 @@
             <Popover.Trigger
                 class={buttonVariants({
                     variant: "ghost",
-                    class: "h-7 px-3 text-xs font-normal",
+                    size: "sm",
                 })}
             >
                 <Plus />

package/src/lib/components/dataTable/sortButton.svelte

@@ -17,7 +17,7 @@
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
-			class: "h-7 px-3 text-xs font-normal",
+			size: "sm",
 		})}
 	>
 		<ArrowDownWideNarrow />

package/src/lib/components/dataTable/table.svelte

@@ -249,7 +249,7 @@
 					class="
 						sticky left-0
 						flex items-center p-2.5 text-xs h-10
-						bg-background
+						bg-card
 						border-r gap-2
 					"
 				>
@@ -295,8 +295,8 @@
 					}}
 					class="
 						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
-						{select ? 'cursor-pointer' : ''}
-						bg-background
+						{select ? 'cursor-pointer hover:bg-accent' : ''}
+						bg-card
 						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 					"
 				>
@@ -313,7 +313,7 @@
 						sticky right-0 z-10
 						flex items-center p-2.5 text-xs h-10
 						border-l gap-2
-						bg-background
+						bg-card
 					"
 				>
 					{@render rowActions?.(entry, index)}

package/src/lib/components/dataTablePopup/dataTablePopup.svelte

@@ -59,7 +59,7 @@
 
 	<div
 		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
-		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-card shadow-2xl"
 	>
 		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
 			<div class="text-sm font-medium">{title ?? collectionName}</div>

package/src/lib/components/detailView/create/createDetailView.svelte

@@ -143,14 +143,14 @@
             <Button
                 variant="outline"
                 onclick={handleCancel}
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={X}
             >
                 Cancel
             </Button>
             <Button
                 variant="default"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Plus}
                 onclick={handleSave}
             >

package/src/lib/components/detailView/create/createDetailViewButton.svelte

@@ -6,6 +6,7 @@
 
 	interface LocalProp extends CreateDetailViewProp {
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -17,6 +18,7 @@
 
 <Button
 	variant={props.variant}
+	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
 	onclick={() => { open = true; }}

package/src/lib/components/detailView/create/createDetailViewChildren.svelte

@@ -67,7 +67,7 @@
                             <SelectRecord
                                 collectionName={child.collection}
                                 variant="outline"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Link}
                                 onSelect={(r) => handleEmptyLink(child.collection, r)}
                             >
@@ -76,7 +76,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="default"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 onChanges={(c) => handleEmptyCreate(child.collection, c)}
                             >
@@ -86,7 +86,7 @@
                     </div>
                 </div>
             {:else}
-                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <div class="rounded-lg border bg-card overflow-hidden flex flex-col max-h-96">
                     <DataTable
                         collectionName={child.collection}
                         searchParams={{ children_of: collectionName, parent_id: -1 }}

package/src/lib/components/detailView/create/createManyView.svelte

@@ -137,12 +137,12 @@
                 text="Select existing"
                 onSelect={onRecordSelect}
                 filter={selectRecordFilter}
-                class="h-7 px-2 font-normal text-xs"
+                size="sm"
                 variant="ghost"
             />
             <CreateDetailViewButton
                 variant="ghost"
-                class="h-7 px-2 font-normal text-xs"
+                size="sm"
                 Icon={Plus}
                 {collectionName}
                 onChanges={(updated) => { addChanges = updated; }}

package/src/lib/components/detailView/update/updateDetailView.svelte

@@ -180,14 +180,14 @@
             <Button
                 variant="outline"
                 onclick={handleCancel}
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={X}
             >
                 Cancel
             </Button>
             <Button
                 variant="default"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
                 onclick={handleSave}
                 disabled={!hasChanges}

package/src/lib/components/detailView/update/updateDetailViewButton.svelte

@@ -7,6 +7,7 @@
 
 	interface LocalProp extends UpdateDetailViewProp {
 		variant?: ButtonProps["variant"];
+		size?: ButtonProps["size"];
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
@@ -33,6 +34,7 @@
 
 <Button
 	variant={props.variant}
+	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
 	onclick={openView}

package/src/lib/components/detailView/update/updateDetailViewChildren.svelte

@@ -75,7 +75,7 @@
                             <SelectRecord
                                 collectionName={child.collection}
                                 variant="outline"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Link}
                                 onSelect={(r) => handleEmptyLink(child.collection, r)}
                             >
@@ -84,7 +84,7 @@
                             <CreateDetailViewButton
                                 collectionName={child.collection}
                                 variant="default"
-                                class="h-7 px-3 text-xs font-normal"
+                                size="sm"
                                 Icon={Plus}
                                 onChanges={(c) => handleEmptyCreate(child.collection, c)}
                             >
@@ -94,7 +94,7 @@
                     </div>
                 </div>
             {:else}
-                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                <div class="rounded-lg border bg-card overflow-hidden flex flex-col max-h-96">
                     <DataTable
                         collectionName={child.collection}
                         searchParams={{ children_of: collectionName, parent_id: entry.id }}

package/src/lib/components/drawer.svelte

@@ -38,8 +38,8 @@
     <div
         transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
         class={position === "bottom"
-            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-background"
-            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"}
+            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-card"
+            : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-card"}
         style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
     >
         {@render children?.()}

package/src/lib/components/horizontalNav.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Popover from "./ui/popover";
+	import { getStudioContext } from "../context";
+	import { buildNavSections, isItemActive, type NavItem } from "./mainNavShared";
+
+	const { lobb, ctx } = getStudioContext();
+
+	let sections: NavItem[][] = $state([[], [], []]);
+	onMount(async () => {
+		sections = await buildNavSections(lobb, ctx);
+	});
+
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
+</script>
+
+{#snippet section(section: NavItem[])}
+	<div class="flex flex-row items-center gap-1">
+		{#each section as item}
+			{@const active = isItemActive(currentPath, item)}
+			{#if !item.navs}
+				<Button
+					onclick={() => { if (item.onclick) item.onclick(); }}
+					href={item.href}
+					class="h-8 px-2.5 text-xs font-normal {active
+						? 'bg-accent text-foreground'
+						: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+					variant="ghost"
+					Icon={item.icon}
+				>
+					{item.label}
+				</Button>
+			{:else}
+				<Popover.Root>
+					<Popover.Trigger>
+						<Button
+							class="h-8 px-2.5 text-xs font-normal {active
+								? 'bg-accent text-accent-foreground'
+								: 'text-muted-foreground'}"
+							variant="ghost"
+							Icon={item.icon}
+						>
+							{item.label}
+						</Button>
+					</Popover.Trigger>
+					<Popover.Content sideOffset={6} side="bottom" align="start" class="w-60 p-0">
+						<div class="py-1">
+							{#each item.navs as childItem}
+								{@const childActive = isItemActive(currentPath, childItem)}
+								<div class="px-1 text-xs text-muted-foreground">
+									<Button
+										variant="ghost"
+										class="flex h-7 w-full justify-start p-2 text-xs font-normal {childActive
+											? 'bg-accent text-accent-foreground'
+											: 'text-muted-foreground'}"
+										Icon={childItem.icon}
+										onclick={() => { if (childItem.onclick) childItem.onclick(); }}
+										href={childItem.href}
+									>
+										{childItem.label}
+									</Button>
+								</div>
+							{/each}
+						</div>
+					</Popover.Content>
+				</Popover.Root>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div class="relative border-b border-border bg-card text-foreground h-12 w-full px-3 flex items-center justify-between gap-2">
+	<div class="flex flex-row items-center gap-2">
+		{@render section(sections[0])}
+		{#if sections[1].length > 0}
+			<Separator orientation="vertical" class="h-6 bg-border" />
+			{@render section(sections[1])}
+		{/if}
+	</div>
+
+	{@render section(sections[2])}
+</div>

package/src/lib/components/importButton.svelte

@@ -170,7 +170,7 @@
 	}
 </script>
 
-<Button variant={rest.variant} class={rest.class} onclick={showDrawer}>
+<Button variant={rest.variant} size={rest.size} class={rest.class} onclick={showDrawer}>
 	<ExtensionsComponents
 		name="collections.import.button.content"
 		utils={getExtensionUtils(lobb, ctx)}
@@ -264,11 +264,11 @@
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button variant="outline" onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={X}>
+				<Button variant="outline" onclick={hideDrawer} size="sm" Icon={X}>
 					Cancel
 				</Button>
 				{#if activeTab === "paste"}
-					<Button onclick={() => processContent(pasteContent)} class="h-7 px-3 text-xs font-normal" Icon={FileText}>
+					<Button onclick={() => processContent(pasteContent)} size="sm" Icon={FileText}>
 						Parse
 					</Button>
 				{/if}
@@ -289,10 +289,10 @@
 			</div>
 
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button variant="outline" onclick={() => (step = "input")} class="h-7 px-3 text-xs font-normal" Icon={X}>
+				<Button variant="outline" onclick={() => (step = "input")} size="sm" Icon={X}>
 					Cancel
 				</Button>
-				<Button onclick={handleImport} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+				<Button onclick={handleImport} size="sm" Icon={Check}>
 					Import {transformedRows.length} records
 				</Button>
 			</div>
@@ -345,7 +345,7 @@
 				</div>
 			{/if}
 			<div class="flex h-12 shrink-0 items-center justify-end gap-2 border-t px-4">
-				<Button onclick={hideDrawer} class="h-7 px-3 text-xs font-normal" Icon={Check}>
+				<Button onclick={hideDrawer} size="sm" Icon={Check}>
 					Done
 				</Button>
 			</div>

package/src/lib/components/mainNav.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import VerticalNav from "./verticalNav.svelte";
+	import HorizontalNav from "./horizontalNav.svelte";
+
+	interface Props {
+		orientation?: "vertical" | "horizontal";
+	}
+	const { orientation = "vertical" }: Props = $props();
+</script>
+
+{#if orientation === "horizontal"}
+	<HorizontalNav />
+{:else}
+	<VerticalNav />
+{/if}