@lobb-js/studio 0.33.0 → 0.34.0

package/src/lib/components/mainNavShared.ts

@@ -0,0 +1,67 @@
+import { House, Layers, Library, Workflow } from "lucide-svelte";
+import { emitEvent } from "../eventSystem";
+import { getDashboardNavs } from "../extensions/extensionUtils";
+
+export type NavItem = {
+    label: string;
+    href?: string;
+    icon: any;
+    represents?: string;
+    onclick?: () => void;
+    navs?: NavItem[];
+};
+
+async function isItemVisible(lobb: any, ctx: any, item: NavItem): Promise<boolean> {
+    if (!item.represents) return true;
+    const res = await emitEvent({ lobb, ctx }, "auth.canAccess", {
+        collection: item.represents,
+        action: "read",
+    });
+    return res === true;
+}
+
+export async function buildNavSections(lobb: any, ctx: any): Promise<NavItem[][]> {
+    const rawSections: NavItem[][] = [
+        [
+            { label: "Home", href: "/studio", icon: House },
+            { label: "Collections", href: "/studio/collections", icon: Library },
+            { label: "Data Model", href: "/studio/datamodel", icon: Layers, represents: "core_data_model" },
+            { label: "Workflows", href: "/studio/workflows", icon: Workflow, represents: "core_workflows" },
+        ],
+        [],
+        [],
+    ];
+
+    const navs = getDashboardNavs(ctx);
+    if (navs.top) rawSections[0].push(...(navs.top as NavItem[]));
+    if (navs.middle) rawSections[1].push(...(navs.middle as NavItem[]));
+    if (navs.bottom) rawSections[2].push(...(navs.bottom as NavItem[]));
+
+    const result: NavItem[][] = [[], [], []];
+    for (let i = 0; i < rawSections.length; i++) {
+        for (const item of rawSections[i]) {
+            if (item.navs) {
+                const visibleChildren: NavItem[] = [];
+                for (const child of item.navs) {
+                    if (await isItemVisible(lobb, ctx, child)) visibleChildren.push(child);
+                }
+                if (visibleChildren.length && (await isItemVisible(lobb, ctx, item))) {
+                    result[i].push({ ...item, navs: visibleChildren });
+                }
+            } else if (await isItemVisible(lobb, ctx, item)) {
+                result[i].push(item);
+            }
+        }
+    }
+    return result;
+}
+
+export function isItemActive(currentPath: string, item: NavItem): boolean {
+    if (item.navs) return item.navs.some((c) => isItemActive(currentPath, c));
+    if (!item.href) return false;
+    const itemHref = item.href.replace(/\/$/, "") || "/";
+    // "/studio" needs an exact match — it's a prefix of every other
+    // route, so startsWith would always light it up.
+    if (itemHref === "/studio") return currentPath === "/studio";
+    return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
+}

package/src/lib/components/rangeCalendarButton.svelte

@@ -33,9 +33,8 @@
     <Popover.Root>
         <Popover.Trigger
             class={cn(
-                buttonVariants({ variant: "outline" }),
+                buttonVariants({ variant: "outline", size: "sm" }),
                 !value && "text-muted-foreground",
-                "h-7 px-3 text-xs font-normal",
             )}
         >
             <CalendarIcon class="mr-2 size-4" />

package/src/lib/components/routes/home.svelte

@@ -33,7 +33,7 @@
                 <Button
                     Icon={ArrowRight}
                     variant="outline"
-                    class="h-7 px-3 text-xs font-normal"
+                    size="sm"
                     onclick={() => goto("/studio/collections")}
                 >
                     Go to collections

package/src/lib/components/routes/workflows/workflows.svelte

@@ -103,7 +103,7 @@
     {#snippet belowSearch()}
         <div class="pb-4 px-2">
             <Button
-                class="h-7 px-3 text-xs font-normal w-full"
+                size="sm" class="w-full"
                 variant="outline"
                 onclick={() => goto("/studio/workflows/new")}
                 Icon={Plus}

package/src/lib/components/setServerPage.svelte

@@ -34,7 +34,7 @@
 			<div class="text-4xl">Welcome back</div>
 			<div>Sign in to your account</div>
 		</div>
-		<div class="flex flex-col gap-6 rounded-md border bg-white p-6">
+		<div class="flex flex-col gap-6 rounded-md border bg-card p-6">
 			<div class="flex flex-col gap-2">
 				<div>
 					<div class="mb-1 text-sm font-medium">Server</div>

package/src/lib/components/sidebar/sidebar.svelte

@@ -90,7 +90,7 @@
 >
     <div
         class="
-			bg-background border-r overflow-hidden
+			bg-card border-r overflow-hidden
 		"
         style="
 			{sidebarProperties.collapsed ? 'border-right-width: 0px; padding: 0px;' : ''}
@@ -123,7 +123,7 @@
             </div>
             <div
                 class="
-					text-primary p-2 overflow-y-auto overflow-x-clip
+					text-foreground p-2 overflow-y-auto overflow-x-clip
 				"
                 style="max-height: {sidebarBodyHeight}px;"
             >

package/src/lib/components/sidebar/sidebarElements.svelte

@@ -89,8 +89,8 @@
                     href={node.href}
                     variant="ghost"
                     class="
-						flex items-center justify-between p-2 gap-2 hover:bg-muted-soft text-muted-foreground
-						rounded-md {isselected ? 'bg-muted' : ''}
+						flex items-center justify-between p-2 gap-2 text-muted-foreground
+						rounded-md {isselected ? 'bg-muted' : 'hover:bg-muted-soft'}
 					"
                     title={node.name}
                 >
@@ -98,7 +98,7 @@
                         {#if node.icon}
                             <node.icon size="17.5" />
                         {/if}
-                        <div class="text-xs {isselected ? 'text-primary font-medium' : ''}">
+                        <div class="text-xs {isselected ? 'text-foreground font-medium' : ''}">
                             {node.name}
                         </div>
                     </div>

package/src/lib/components/singletone.svelte

@@ -39,12 +39,12 @@
 </script>
 
 <div class="flex flex-col h-full bg-background">
-    <div class="flex justify-between items-center gap-2 p-2 border-b h-10 shrink-0">
+    <div class="flex justify-between items-center gap-2 p-2 border-b h-12 shrink-0">
         <div class="flex items-center gap-1">
             <SidebarTrigger />
         </div>
         <div>
-            <Button class="h-7 px-2 font-normal text-xs" Icon={Save} onclick={handleSave}>
+            <Button size="sm" Icon={Save} onclick={handleSave}>
                 Save
             </Button>
         </div>

package/src/lib/components/ui/skeleton/skeleton.svelte

@@ -15,7 +15,7 @@
 <div
 	bind:this={ref}
 	class={cn(
-		"bg-primary/10 animate-pulse rounded-md",
+		"bg-muted animate-pulse rounded-md",
 		className,
 	)}
 	{...restProps}

package/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -14,7 +14,7 @@
 	bind:ref
 	{sideOffset}
 	class={cn(
-		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		"bg-popover text-popover-foreground border shadow-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
 		className
 	)}
 	{...restProps}

package/src/lib/components/verticalNav.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+	import { goto } from "$app/navigation";
+	import Button from "./ui/button/button.svelte";
+	import Separator from "./ui/separator/separator.svelte";
+	import * as Tooltip from "./ui/tooltip";
+	import * as Accordion from "./ui/accordion/index.js";
+	import * as Popover from "./ui/popover";
+	import { getStudioContext } from "../context";
+	import { mediaQueries } from "../utils";
+	import { buildNavSections, isItemActive, type NavItem } from "./mainNavShared";
+
+	const { lobb, ctx } = getStudioContext();
+
+	let isSmallScreen = $derived(!mediaQueries.sm.current);
+	let isCollapsed = $state(true);
+	$effect(() => {
+		isCollapsed = isSmallScreen;
+	});
+
+	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-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
+		{#each section as item}
+			{@const active = isItemActive(currentPath, item)}
+			{#if isSmallScreen}
+				{#if !item.navs}
+					<Button
+						onclick={() => {
+							if (item.onclick) item.onclick();
+							else if (item.href) goto(item.href);
+							isCollapsed = true;
+						}}
+						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
+							? 'bg-accent text-foreground'
+							: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+						variant="ghost"
+						size="icon"
+						Icon={item.icon}
+					>
+						{item.label}
+					</Button>
+				{:else}
+					<Accordion.Root type="single">
+						<Accordion.Item class="border-b-0">
+							<Accordion.Trigger class="justify-between p-0 h-10">
+								<div
+									class="flex items-center gap-2 {active
+										? 'text-accent-foreground'
+										: 'text-foreground/70'}"
+								>
+									<item.icon size="18" />
+									<div class="text-nowrap">{item.label}</div>
+								</div>
+							</Accordion.Trigger>
+							<Accordion.Content class="pl-2 border-l border-border">
+								{#each item.navs as childItem}
+									{@const childActive = isItemActive(currentPath, childItem)}
+									<Button
+										onclick={() => {
+											if (childItem.onclick) childItem.onclick();
+											else if (childItem.href) goto(childItem.href);
+											isCollapsed = true;
+										}}
+										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
+											? 'bg-accent text-foreground'
+											: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}"
+										variant="ghost"
+										size="icon"
+										Icon={childItem.icon}
+									>
+										{childItem.label}
+									</Button>
+								{/each}
+							</Accordion.Content>
+						</Accordion.Item>
+					</Accordion.Root>
+				{/if}
+			{:else}
+				<Tooltip.Root>
+					<Tooltip.Trigger>
+						{#if !item.navs}
+							<Button
+								onclick={() => { if (item.onclick) item.onclick(); }}
+								href={item.href}
+								class={active
+									? 'bg-accent text-foreground'
+									: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}
+								variant="ghost"
+								size="icon"
+								Icon={item.icon}
+							></Button>
+						{:else}
+							<Popover.Root>
+								<Popover.Trigger>
+									<Button
+										class={active
+											? 'bg-accent text-foreground'
+											: 'text-foreground/70 hover:bg-accent/50 hover:text-foreground'}
+										variant="ghost"
+										size="icon"
+										Icon={item.icon}
+									></Button>
+								</Popover.Trigger>
+								<Popover.Content sideOffset={17.5} side="right" class="popover_content w-60 mb-4 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}
+					</Tooltip.Trigger>
+					<Tooltip.Content side="right" sideOffset={15}>
+						{item.label}
+					</Tooltip.Content>
+				</Tooltip.Root>
+			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<div
+	class="
+		{isSmallScreen ? 'fixed top-0 left-0 h-full z-50' : 'relative'}
+		border-r border-border bg-card text-foreground w-screen
+		{isCollapsed
+			? 'max-w-0 p-0'
+			: `max-w-14 ${isSmallScreen ? 'px-3 pb-3' : 'p-2'}`}"
+	style="transition: max-width 150ms, padding 150ms; {isSmallScreen && !isCollapsed ? 'max-width: 100vw' : ''}"
+>
+	{#if isSmallScreen && !isCollapsed}
+		<X
+			class="absolute h-10 text-foreground/70 hover:bg-transparent cursor-pointer hover:text-foreground"
+			style="left: 0.6rem; top: 0rem;"
+			size="18"
+			onclick={() => (isCollapsed = !isCollapsed)}
+		/>
+	{/if}
+	<div class="flex h-full flex-col justify-between gap-2 w-full overflow-hidden">
+		<div class="flex flex-col gap-2 {isSmallScreen ? 'pt-8' : ''}">
+			{@render section(sections[0])}
+			<Separator class="bg-border" />
+			{@render section(sections[1])}
+		</div>
+		<div class="flex flex-col gap-2">
+			<Separator class="bg-border" />
+			{@render section(sections[2])}
+		</div>
+	</div>
+</div>

package/src/lib/components/workflowEditor.svelte

@@ -157,7 +157,7 @@
         <div>
             {#if workflow.id}
                 <Button
-                    class="h-7 px-3 text-xs font-normal w-full"
+                    size="sm" class="w-full"
                     variant="default"
                     onclick={handleUpdateWorkflow}
                     Icon={Edit}
@@ -167,7 +167,7 @@
                 </Button>
             {:else}
                 <Button
-                    class="h-7 px-3 text-xs font-normal w-full"
+                    size="sm" class="w-full"
                     variant="default"
                     onclick={handleCreateWorkflow}
                     Icon={Plus}

package/src/lib/store.types.ts

@@ -27,14 +27,14 @@ interface Collection {
 }
 type Collections = Record<string, Collection>;
 
-export interface StudioTheme {
+export interface UITheme {
     light?: Record<string, string>;
     dark?: Record<string, string>;
 }
 
 interface Meta {
     version: string;
-    studio?: { theme?: StudioTheme };
+    ui?: { theme?: UITheme; horizontalNav?: boolean };
     relations: Array<any>;
     collections: Collections;
     extensions: Record<string, any>;

package/dist/applyStudioTheme.d.ts

@@ -1,2 +0,0 @@
-import type { StudioTheme } from "./store.types";
-export declare function applyStudioTheme(theme: StudioTheme | undefined): void;