@lobb-js/studio 0.32.0 → 0.34.0

package/src/lib/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/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

@@ -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/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

@@ -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>

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>