@lobb-js/studio 0.33.0 → 0.35.0

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/src/lib/utils.ts

@@ -24,6 +24,18 @@ export const mediaQueries = {
     '2xl': new MediaQuery('min-width: 1536px'),
 }
 
+// User-facing label for a field type. "string"/"text" are jargon to
+// non-technical users, so we surface "Text"/"Long text" instead. Types
+// not in the map fall through to the raw identifier — extend as needed.
+const FIELD_TYPE_LABELS: Record<string, string> = {
+    string: "Text",
+    text: "Long text",
+};
+export function getFieldTypeLabel(type: string | undefined | null): string {
+    if (!type) return "";
+    return FIELD_TYPE_LABELS[type] ?? type;
+}
+
 
 export function calculateDrawerWidth() {
     const backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");

package/dist/applyStudioTheme.d.ts

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

package/dist/components/miniSidebar.svelte

@@ -1,300 +0,0 @@
-<script lang="ts" module>
-	let isSmallScreen = $derived(!mediaQueries.sm.current);
-	let isCollapsed = $derived(isSmallScreen);
-
-	export let collapseMiniSideBar = () => {
-		isCollapsed = true;
-	};
-	export let expandMiniSideBar = () => {
-		isCollapsed = false;
-	};
-</script>
-
-<script lang="ts">
-	import { House, Layers, Library, Workflow, X } from "lucide-svelte";
-	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 { onMount } from "svelte";
-
-	import { getStudioContext } from "../context";
-	import { getDashboardNavs } from "../extensions/extensionUtils";
-	import { emitEvent } from "../eventSystem";
-
-	const { lobb, ctx } = getStudioContext();
-	import { mediaQueries } from "../utils";
-	import * as Popover from "./ui/popover";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-
-	const rawSections: any[][] = [
-		[
-			{
-				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] = [...rawSections[0], ...navs.top];
-	}
-	if (navs.middle) {
-		rawSections[1] = [...rawSections[1], ...navs.middle];
-	}
-	if (navs.bottom) {
-		rawSections[2] = [...rawSections[2], ...navs.bottom];
-	}
-
-	// Items without a `represents` are always visible. Items with one are
-	// gated by emitting auth.canAccess — the auth extension (or any
-	// drop-in replacement) decides based on the current user's session.
-	// Start empty so nothing flashes before the answers come back.
-	let sections: any[][] = $state([[], [], []]);
-
-	async function isItemVisible(item: any): Promise<boolean> {
-		if (!item.represents) return true;
-		const res = await emitEvent(
-			{ lobb, ctx },
-			"auth.canAccess",
-			{ collection: item.represents, action: "read" },
-		);
-		return res === true;
-	}
-
-	// Highlight the nav item matching the current URL. "/studio" requires an
-	// exact match (otherwise it would light up on every sub-route since it's a
-	// prefix of everything); other items use startsWith so sub-paths
-	// (e.g. /studio/collections/risks) still highlight their parent.
-	// Popover items with children are active when any of their children match.
-	// SvelteKit's pathname can come back with a trailing slash (`/studio/`)
-	// depending on config, so we normalize it before comparing.
-	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
-	function isItemActive(item: any): boolean {
-		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
-		if (!item.href) return false;
-		const itemHref = item.href.replace(/\/$/, "") || "/";
-		if (itemHref === "/studio") return currentPath === "/studio";
-		return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
-	}
-
-	// onMount is enough — Studio gets remounted on login/logout (see
-	// remountStudio in @lobb-js/studio), so by the time this component
-	// mounts, ctx.extensions.auth.user / permissions are already populated.
-	onMount(async () => {
-		const result: any[][] = [[], [], []];
-		for (let i = 0; i < rawSections.length; i++) {
-			for (const item of rawSections[i]) {
-				if (item.navs) {
-					const visibleChildren: any[] = [];
-					for (const child of item.navs) {
-						if (await isItemVisible(child)) visibleChildren.push(child);
-					}
-					if (visibleChildren.length && (await isItemVisible(item))) {
-						result[i].push({ ...item, navs: visibleChildren });
-					}
-				} else if (await isItemVisible(item)) {
-					result[i].push(item);
-				}
-			}
-		}
-		sections = result;
-	});
-</script>
-
-{#snippet section(section: any)}
-	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
-		{#each section as item}
-			{@const active = isItemActive(item)}
-			{#if isSmallScreen}
-				{#if !item.navs}
-					<Button
-						onclick={() => {
-							if (item.onclick) {
-								item.onclick();
-							} else {
-								goto(item.href);
-							}
-							isCollapsed = true;
-						}}
-						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-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-muted-foreground'}"
-								>
-									<item.icon size="18" />
-									<div class="text-nowrap">{item.label}</div>
-								</div>
-							</Accordion.Trigger>
-							<Accordion.Content class="pl-2 border-l">
-								{#each item.navs as childItem}
-									{@const childActive = isItemActive(childItem)}
-									<Button
-										onclick={() => {
-											if (childItem.onclick) {
-												childItem.onclick();
-											} else {
-												goto(item.href);
-											}
-											isCollapsed = true;
-										}}
-										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
-											? 'bg-accent text-accent-foreground'
-											: 'text-muted-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();
-									}
-									isCollapsed = true;
-								}}
-								href={item.href}
-								class={active
-									? 'bg-accent text-accent-foreground'
-									: 'text-muted-foreground'}
-								variant="ghost"
-								size="icon"
-								Icon={item.icon}
-							></Button>
-						{:else}
-							<Popover.Root>
-								<Popover.Trigger>
-									<Button
-										class={active
-											? 'bg-accent text-accent-foreground'
-											: 'text-muted-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(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 bg-background 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}
-		{#if !isCollapsed}
-			<X
-				class="absolute h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
-				style="left: 0.6rem; top: 0rem;"
-				size="18"
-				onclick={() => (isCollapsed = !isCollapsed)}
-			/>
-		{/if}
-	{/if}
-	<div
-		class="flex h-full flex-col justify-between gap-2 w-full overflow-hidden"
-	>
-		<!-- upper part -->
-		<div class="flex flex-col gap-2 {isSmallScreen ? 'pt-8' : ''}">
-			{@render section(sections[0])}
-			<Separator />
-			{@render section(sections[1])}
-		</div>
-		<div class="flex flex-col gap-2">
-			<Separator />
-			{@render section(sections[2])}
-		</div>
-	</div>
-</div>

package/dist/components/miniSidebar.svelte.d.ts

@@ -1,5 +0,0 @@
-export declare let collapseMiniSideBar: () => void;
-export declare let expandMiniSideBar: () => void;
-declare const MiniSidebar: import("svelte").Component<Record<string, never>, {}, "">;
-type MiniSidebar = ReturnType<typeof MiniSidebar>;
-export default MiniSidebar;

package/src/lib/components/miniSidebar.svelte

@@ -1,300 +0,0 @@
-<script lang="ts" module>
-	let isSmallScreen = $derived(!mediaQueries.sm.current);
-	let isCollapsed = $derived(isSmallScreen);
-
-	export let collapseMiniSideBar = () => {
-		isCollapsed = true;
-	};
-	export let expandMiniSideBar = () => {
-		isCollapsed = false;
-	};
-</script>
-
-<script lang="ts">
-	import { House, Layers, Library, Workflow, X } from "lucide-svelte";
-	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 { onMount } from "svelte";
-
-	import { getStudioContext } from "../context";
-	import { getDashboardNavs } from "../extensions/extensionUtils";
-	import { emitEvent } from "../eventSystem";
-
-	const { lobb, ctx } = getStudioContext();
-	import { mediaQueries } from "../utils";
-	import * as Popover from "./ui/popover";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-
-	const rawSections: any[][] = [
-		[
-			{
-				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] = [...rawSections[0], ...navs.top];
-	}
-	if (navs.middle) {
-		rawSections[1] = [...rawSections[1], ...navs.middle];
-	}
-	if (navs.bottom) {
-		rawSections[2] = [...rawSections[2], ...navs.bottom];
-	}
-
-	// Items without a `represents` are always visible. Items with one are
-	// gated by emitting auth.canAccess — the auth extension (or any
-	// drop-in replacement) decides based on the current user's session.
-	// Start empty so nothing flashes before the answers come back.
-	let sections: any[][] = $state([[], [], []]);
-
-	async function isItemVisible(item: any): Promise<boolean> {
-		if (!item.represents) return true;
-		const res = await emitEvent(
-			{ lobb, ctx },
-			"auth.canAccess",
-			{ collection: item.represents, action: "read" },
-		);
-		return res === true;
-	}
-
-	// Highlight the nav item matching the current URL. "/studio" requires an
-	// exact match (otherwise it would light up on every sub-route since it's a
-	// prefix of everything); other items use startsWith so sub-paths
-	// (e.g. /studio/collections/risks) still highlight their parent.
-	// Popover items with children are active when any of their children match.
-	// SvelteKit's pathname can come back with a trailing slash (`/studio/`)
-	// depending on config, so we normalize it before comparing.
-	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
-	function isItemActive(item: any): boolean {
-		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
-		if (!item.href) return false;
-		const itemHref = item.href.replace(/\/$/, "") || "/";
-		if (itemHref === "/studio") return currentPath === "/studio";
-		return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
-	}
-
-	// onMount is enough — Studio gets remounted on login/logout (see
-	// remountStudio in @lobb-js/studio), so by the time this component
-	// mounts, ctx.extensions.auth.user / permissions are already populated.
-	onMount(async () => {
-		const result: any[][] = [[], [], []];
-		for (let i = 0; i < rawSections.length; i++) {
-			for (const item of rawSections[i]) {
-				if (item.navs) {
-					const visibleChildren: any[] = [];
-					for (const child of item.navs) {
-						if (await isItemVisible(child)) visibleChildren.push(child);
-					}
-					if (visibleChildren.length && (await isItemVisible(item))) {
-						result[i].push({ ...item, navs: visibleChildren });
-					}
-				} else if (await isItemVisible(item)) {
-					result[i].push(item);
-				}
-			}
-		}
-		sections = result;
-	});
-</script>
-
-{#snippet section(section: any)}
-	<div class="flex flex-col {isSmallScreen ? 'gap-0' : 'gap-2'}">
-		{#each section as item}
-			{@const active = isItemActive(item)}
-			{#if isSmallScreen}
-				{#if !item.navs}
-					<Button
-						onclick={() => {
-							if (item.onclick) {
-								item.onclick();
-							} else {
-								goto(item.href);
-							}
-							isCollapsed = true;
-						}}
-						class="flex items-center justify-start flex-nowrap text-nowrap h-10 w-full {active
-							? 'bg-accent text-accent-foreground'
-							: 'text-muted-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-muted-foreground'}"
-								>
-									<item.icon size="18" />
-									<div class="text-nowrap">{item.label}</div>
-								</div>
-							</Accordion.Trigger>
-							<Accordion.Content class="pl-2 border-l">
-								{#each item.navs as childItem}
-									{@const childActive = isItemActive(childItem)}
-									<Button
-										onclick={() => {
-											if (childItem.onclick) {
-												childItem.onclick();
-											} else {
-												goto(item.href);
-											}
-											isCollapsed = true;
-										}}
-										class="flex items-center justify-start flex-nowrap text-nowrap h-8 w-full {childActive
-											? 'bg-accent text-accent-foreground'
-											: 'text-muted-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();
-									}
-									isCollapsed = true;
-								}}
-								href={item.href}
-								class={active
-									? 'bg-accent text-accent-foreground'
-									: 'text-muted-foreground'}
-								variant="ghost"
-								size="icon"
-								Icon={item.icon}
-							></Button>
-						{:else}
-							<Popover.Root>
-								<Popover.Trigger>
-									<Button
-										class={active
-											? 'bg-accent text-accent-foreground'
-											: 'text-muted-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(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 bg-background 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}
-		{#if !isCollapsed}
-			<X
-				class="absolute h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
-				style="left: 0.6rem; top: 0rem;"
-				size="18"
-				onclick={() => (isCollapsed = !isCollapsed)}
-			/>
-		{/if}
-	{/if}
-	<div
-		class="flex h-full flex-col justify-between gap-2 w-full overflow-hidden"
-	>
-		<!-- upper part -->
-		<div class="flex flex-col gap-2 {isSmallScreen ? 'pt-8' : ''}">
-			{@render section(sections[0])}
-			<Separator />
-			{@render section(sections[1])}
-		</div>
-		<div class="flex flex-col gap-2">
-			<Separator />
-			{@render section(sections[2])}
-		</div>
-	</div>
-</div>