@lobb-js/studio 0.32.0 → 0.34.0

package/dist/actions.d.ts

@@ -20,6 +20,10 @@ export interface OpenDataTablePopupProps {
     showHeader?: boolean;
     showFooter?: boolean;
     tabs?: CollectionTab[];
+    view?: {
+        id: string;
+        [key: string]: any;
+    };
 }
 export declare function showDialog(title: string, description: string): Promise<boolean>;
 export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;

package/dist/applyUITheme.d.ts

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

package/dist/applyUITheme.js

@@ -0,0 +1,36 @@
+// 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-ui-theme";
+function buildDeclarations(vars) {
+    if (!vars)
+        return "";
+    const out = [];
+    for (const [key, value] of Object.entries(vars)) {
+        if (!key.startsWith("--") || !value)
+            continue;
+        out.push(`${key}: ${value};`);
+    }
+    return out.join(" ");
+}
+export function applyUITheme(theme) {
+    if (typeof document === "undefined")
+        return;
+    document.getElementById(STYLE_ID)?.remove();
+    if (!theme)
+        return;
+    const light = buildDeclarations(theme.light);
+    const dark = buildDeclarations(theme.dark);
+    if (!light && !dark)
+        return;
+    const rules = [];
+    if (light)
+        rules.push(`:root { ${light} }`);
+    if (dark)
+        rules.push(`.dark { ${dark} }`);
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = rules.join(" ");
+    document.head.appendChild(style);
+}

package/dist/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/dist/components/LlmButton.svelte.d.ts

@@ -7,6 +7,7 @@ interface LocalProp {
     format?: any;
     messages?: any[];
     variant?: ButtonProps["variant"];
+    size?: ButtonProps["size"];
     class?: ButtonProps["class"];
     Icon?: ButtonProps["Icon"];
     children?: ButtonProps["children"];

package/dist/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,6 +17,7 @@
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
+    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";
@@ -43,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
@@ -50,6 +57,7 @@
         document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
+            applyUITheme(ctx.meta.ui?.theme);
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             loadExtensionWorkflows(ctx as any);
@@ -102,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/dist/components/canAccess.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	// Declarative permission gate. Replaces the recurring pattern of
+	// `let canX = $state(false); onMount(async () => canX = await emitEvent
+	// ("auth.canAccess", { collection, action }) === true);` plus an `{#if canX}`.
+	//
+	// Usage:
+	//   <CanAccess collection="risks" action="update">
+	//     <EditButton ... />
+	//   </CanAccess>
+	//
+	// Optional `fallback` snippet renders when the user is NOT allowed
+	// (defaults to nothing). The brief in-flight window before the answer
+	// is known renders nothing so we don't flash unauthorized content.
+	import type { Snippet } from "svelte";
+	import { onMount } from "svelte";
+	import { getStudioContext } from "../context";
+	import { emitEvent } from "../eventSystem";
+
+	interface Props {
+		collection: string;
+		action: "read" | "create" | "update" | "delete" | string;
+		children: Snippet;
+		fallback?: Snippet;
+	}
+
+	const { collection, action, children, fallback }: Props = $props();
+	const { lobb, ctx } = getStudioContext();
+
+	// null = "haven't checked yet" — distinguished from false so the fallback
+	// doesn't flash during the async resolution.
+	let allowed = $state<boolean | null>(null);
+
+	onMount(async () => {
+		try {
+			const result = await emitEvent({ lobb, ctx }, "auth.canAccess", {
+				collection,
+				action,
+			});
+			allowed = result === true;
+		} catch {
+			// No handler registered (auth extension not loaded), or the
+			// handler threw — fail closed.
+			allowed = false;
+		}
+	});
+</script>
+
+{#if allowed === true}
+	{@render children()}
+{:else if allowed === false && fallback}
+	{@render fallback()}
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    collection: string;
+    action: "read" | "create" | "update" | "delete" | string;
+    children: Snippet;
+    fallback?: Snippet;
+}
+declare const CanAccess: import("svelte").Component<Props, {}, "">;
+type CanAccess = ReturnType<typeof CanAccess>;
+export default CanAccess;

package/dist/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/dist/components/dataTable/dataTable.svelte

@@ -13,6 +13,7 @@
     import Header from "./header.svelte";
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
+    import CanAccess from "../canAccess.svelte";
     import { Pencil, Trash, Unlink } from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
     import FieldCell from "./fieldCell.svelte";
@@ -24,8 +25,7 @@
     import type { ChildrenChanges } from "../detailView/utils";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
-    import { emitEvent } from "../../eventSystem";
-    import { onMount, untrack } from "svelte";
+    import { untrack } from "svelte";
     import Tabs from "./dataTableTabs.svelte";
     import { fade } from "svelte/transition";
     import type { CollectionTab } from "../../store.types";
@@ -48,6 +48,7 @@
         tableProps?: Partial<TableProps>;
         tabs?: CollectionTab[];
         headerLeft?: Snippet<[]>;
+        view?: { id: string; [key: string]: any };
     }
 
     let {
@@ -66,6 +67,7 @@
         tableProps,
         tabs,
         headerLeft,
+        view,
     }: Props = $props();
 
     const isRecordingMode = onChanges !== undefined;
@@ -73,19 +75,6 @@
         untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
     );
 
-    // Gate row/header buttons by the current user's permissions:
-    // - showUpdate → per-row edit button
-    // - showCreate → header's Create + Import buttons (passed to Header)
-    let showUpdate = $state(false);
-    let showCreate = $state(false);
-    onMount(async () => {
-        const [update, create] = await Promise.all([
-            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "update" }),
-            emitEvent({ lobb, ctx }, "auth.canAccess", { collection: collectionName, action: "create" }),
-        ]);
-        showUpdate = update === true;
-        showCreate = create === true;
-    });
 
     // Derives the displayed rows by applying localChanges on top of server data.
     const data = $derived.by(() => {
@@ -122,6 +111,23 @@
 
     let activeTabFilter = $state<any>(undefined);
 
+    // Named-view lookup: when a `view` prop is supplied, resolve the
+    // matching `dataTable.view.<view.id>` registration. Exact key match,
+    // no `when` predicate — the caller already picked the view they want.
+    const customViewComponent = $derived.by(() => {
+        if (!view?.id) return null;
+        const key = `dataTable.view.${view.id}`;
+        for (const ext of Object.values(ctx.extensions ?? {})) {
+            const components = (ext as any)?.components ?? {};
+            const entry = components[key];
+            if (!entry) continue;
+            return entry && typeof entry === "object" && "component" in entry
+                ? entry.component
+                : entry;
+        }
+        return null;
+    });
+
     // Canonicalize the incoming filter so values like `{ status: "Open" }`
     // become `{ status: { $eq: "Open" } }`. The Filter UI and the server
     // both expect operator objects, so doing this once at the boundary
@@ -273,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
@@ -291,7 +297,6 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
-            {showCreate}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
@@ -311,6 +316,18 @@
                         <Skeleton class="h-8 w-[80%]" />
                         <Skeleton class="h-8 w-[60%]" />
                     </div>
+                {:else if customViewComponent}
+                    {@const CustomView = customViewComponent}
+                    <CustomView
+                        {collectionName}
+                        {data}
+                        {columns}
+                        bind:params
+                        {loading}
+                        refresh={() => { params = { ...params }; }}
+                        {view}
+                        utils={getExtensionUtils(lobb, ctx)}
+                    />
                 {:else}
                     <Table
                         {data}
@@ -325,17 +342,19 @@
                         {...tableProps}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                         {#snippet tools(entry)}
-                            {#if showUpdate && showEdit}
-                                <UpdateDetailViewButton
-                                    {collectionName}
-                                    recordId={entry.id}
-                                    variant="ghost"
-                                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                                    Icon={Pencil}
-                                    changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
-                                    onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
-                                    onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
-                                ></UpdateDetailViewButton>
+                            {#if showEdit}
+                                <CanAccess collection={collectionName} action="update">
+                                    <UpdateDetailViewButton
+                                        {collectionName}
+                                        recordId={entry.id}
+                                        variant="ghost"
+                                        class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
+                                        Icon={Pencil}
+                                        changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
+                                        onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
+                                        onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
+                                    ></UpdateDetailViewButton>
+                                </CanAccess>
                             {/if}
                             {#if parentContext}
                                 <Button

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

@@ -22,6 +22,10 @@ interface Props {
     tableProps?: Partial<TableProps>;
     tabs?: CollectionTab[];
     headerLeft?: Snippet<[]>;
+    view?: {
+        id: string;
+        [key: string]: any;
+    };
 }
 declare const DataTable: import("svelte").Component<Props, {}, "">;
 type DataTable = ReturnType<typeof DataTable>;

package/dist/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/dist/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/dist/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/dist/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/dist/components/dataTable/header.svelte

@@ -2,8 +2,8 @@
     import { getStudioContext } from "../../context";
     import type { Changes } from "../detailView/utils";
     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";
@@ -26,7 +26,6 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
-        showCreate?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -38,7 +37,6 @@
         onLink,
         onCreate,
         showImport = true,
-        showCreate = false,
         left
     }: Props = $props();
 
@@ -106,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">
@@ -116,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"}
@@ -136,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",
                 }}
@@ -162,27 +160,23 @@
     <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 })}
         >
             {headerIsSmall ? "" : "Refresh"}
         </Button>
-        {#if showImport && showCreate}
-            <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>
+        {#if showImport}
+            <CanAccess collection={collectionName} action="create">
+                <ImportButton
+                    {collectionName}
+                    variant="outline"
+                    size="sm"
+                    Icon={Download}
+                    onSuccessfullSave={() => (params = { ...params })}
+                />
+            </CanAccess>
         {/if}
         <ExtensionsComponents
             name="listView.header.actions"
@@ -194,24 +188,24 @@
             <SelectRecord
                 {collectionName}
                 variant="outline"
-                class="h-7 px-3 text-xs font-normal"
+                size="sm"
                 Icon={Link}
                 onSelect={handleLink}
             >
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>
         {/if}
-        {#if showCreate}
+        <CanAccess collection={collectionName} action="create">
             <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}
             >
                 {headerIsSmall ? "" : "Create"}
             </CreateDetailViewButton>
-        {/if}
+        </CanAccess>
     </div>
 </div>

package/dist/components/dataTable/header.svelte.d.ts

@@ -9,7 +9,6 @@ interface Props {
     onLink?: (record: any) => void;
     onCreate?: (changes: Changes) => void;
     showImport?: boolean;
-    showCreate?: boolean;
     left?: Snippet<[]>;
 }
 declare const Header: import("svelte").Component<Props, {}, "selectedRecords" | "params">;

package/dist/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/dist/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/dist/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/dist/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/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -19,6 +19,7 @@
 		showFooter?: boolean;
 		tableProps?: Partial<TableProps>;
 		tabs?: CollectionTab[];
+		view?: { id: string; [key: string]: any };
 		onClose?: () => void;
 	}
 
@@ -32,6 +33,7 @@
 		showFooter = true,
 		tableProps,
 		tabs,
+		view,
 		onClose,
 	}: Props = $props();
 
@@ -57,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>
@@ -78,6 +80,7 @@
 				{showFooter}
 				{tableProps}
 				{tabs}
+				{view}
 			/>
 		</div>
 	</div>