@lobb-js/studio 0.36.0 → 0.37.1

package/dist/components/canAccess.svelte

@@ -14,7 +14,7 @@
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
 	import { getStudioContext } from "../context";
-	import { emitEvent } from "../eventSystem";
+	import { checkAuthAccess } from "../eventSystem";
 
 	interface Props {
 		collection: string;
@@ -31,17 +31,7 @@
 	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;
-		}
+		allowed = await checkAuthAccess({ lobb, ctx }, collection, action);
 	});
 </script>
 

package/dist/components/dataTable/dataTable.svelte

@@ -165,6 +165,7 @@
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
+    let hasLoaded = $state(false);
     const columns: TableProps["columns"] = $state(
         getCollectionColumns(ctx, collectionName),
     );
@@ -197,6 +198,7 @@
         totalCount = res.meta.totalCount;
         onDataLoad?.(totalCount);
         loading = false;
+        hasLoaded = true;
     }
 
     async function handleDelete(entryId: string) {
@@ -297,6 +299,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
@@ -310,7 +313,7 @@
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
-                {#if loading}
+                {#if loading && !hasLoaded}
                     <div class="flex flex-col gap-2 p-2 w-full">
                         <Skeleton class="h-8 w-full" />
                         <Skeleton class="h-8 w-[80%]" />

package/dist/components/dataTable/header.svelte

@@ -3,7 +3,7 @@
     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 { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -26,6 +26,7 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
+        loading?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -37,6 +38,7 @@
         onLink,
         onCreate,
         showImport = true,
+        loading = false,
         left
     }: Props = $props();
 
@@ -162,10 +164,15 @@
             variant="ghost"
             size="sm"
             class="text-muted-foreground"
-            Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
-            {headerIsSmall ? "" : "Refresh"}
+            {#if loading}
+                <LoaderCircle size={16} class="animate-spin" />
+                {headerIsSmall ? "" : "Loading"}
+            {:else}
+                <ListRestart size={16} />
+                {headerIsSmall ? "" : "Refresh"}
+            {/if}
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">

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

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

package/dist/components/dataTable/table.svelte

@@ -223,8 +223,8 @@
 			{:else}
 				<ColumnIcon size="12.5" class="text-muted-foreground" />
 			{/if}
-			<div class="font-bold">{column.id}</div>
-			<div class="text-muted-foreground text-[0.7rem]">
+			<div class="font-bold whitespace-nowrap">{column.id}</div>
+			<div class="text-muted-foreground text-[0.7rem] whitespace-nowrap">
 				{column.subtext}
 			</div>
 		</button>

package/dist/components/detailView/create/createDetailViewChildren.svelte

@@ -95,8 +95,8 @@
                         showImport={false}
                         showHeader={true}
                         showFooter={false}
-                        showDelete={false}
-                        showEdit={false}
+                        showDelete={true}
+                        showEdit={true}
                         tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
                     >
                         {#snippet headerLeft()}

package/dist/components/detailView/create/createManyView.svelte

@@ -60,9 +60,7 @@
             relation.to.collection === parentRecord?.collectionName,
     )?.from.field;
     const createValues = {
-        [refrenceFieldName]: {
-            id: 0,
-        },
+        [refrenceFieldName]: 0,
     };
     let selectedRecordsIds: string[] = $derived(
         entries.filter((entry) => entry.id).map((entry) => entry.id),

package/dist/components/mainNavShared.js

@@ -1,14 +1,10 @@
 import { House, Layers, Library, Workflow } from "lucide-svelte";
-import { emitEvent } from "../eventSystem";
+import { checkAuthAccess } from "../eventSystem";
 import { getDashboardNavs } from "../extensions/extensionUtils";
 async function isItemVisible(lobb, ctx, item) {
     if (!item.represents)
         return true;
-    const res = await emitEvent({ lobb, ctx }, "auth.canAccess", {
-        collection: item.represents,
-        action: "read",
-    });
-    return res === true;
+    return checkAuthAccess({ lobb, ctx }, item.represents, "read");
 }
 export async function buildNavSections(lobb, ctx) {
     const rawSections = [

package/dist/components/routes/collections/collections.svelte

@@ -2,7 +2,7 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
-    import { emitEvent } from "../../../eventSystem";
+    import { checkAuthAccess } from "../../../eventSystem";
     import Collection from "./collection.svelte";
     import { onMount } from "svelte";
 
@@ -18,7 +18,7 @@
     let { collectionName } = $props();
 
     // Start empty so unreadable collections never flash. Populated after the
-    // auth.canAccess checks resolve below.
+    // Populated after checkAuthAccess calls resolve below.
     let collectionsList = $state<SideBarData>([]);
 
     onMount(async () => {
@@ -31,14 +31,9 @@
         );
         const visibleNames = (
             await Promise.all(
-                allNames.map(async (name) => {
-                    const res = await emitEvent(
-                        { lobb, ctx },
-                        "auth.canAccess",
-                        { collection: name, action: "read" },
-                    );
-                    return res === true ? name : null;
-                }),
+                allNames.map(async (name) =>
+                    (await checkAuthAccess({ lobb, ctx }, name, "read")) ? name : null
+                ),
             )
         ).filter((n): n is string => n !== null);
 

package/dist/eventSystem.d.ts

@@ -1,2 +1,3 @@
 import type { StudioContext } from "./context";
+export declare function checkAuthAccess(studioContext: StudioContext, collection: string, action: string): Promise<boolean>;
 export declare function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any>;

package/dist/eventSystem.js

@@ -1,5 +1,14 @@
 import { toast } from "svelte-sonner";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
+export async function checkAuthAccess(studioContext, collection, action) {
+    try {
+        const result = await emitEvent(studioContext, "auth.canAccess", { collection, action });
+        return result !== false;
+    }
+    catch {
+        return false;
+    }
+}
 export async function emitEvent(studioContext, eventName, input) {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter((workflow) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.36.0",
+  "version": "0.37.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,8 @@
     }
   },
   "scripts": {
-    "dev": "vite dev",
+    "dev": "bun run --watch lobb.ts",
+    "dev:studio": "vite dev",
     "build": "vite build && bun run package",
     "package": "svelte-kit sync && svelte-package --input src/lib",
     "preview": "vite preview",
@@ -36,14 +37,17 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:unit": "vitest",
     "test-storybook": "vitest --project=storybook",
     "prepublishOnly": "./scripts/prepublish.sh",
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.36.0",
+    "@lobb-js/core": "^0.37.0",
     "@chromatic-com/storybook": "^4.1.2",
+    "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -53,6 +57,7 @@
     "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
     "@tsconfig/svelte": "^5.0.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/mustache": "^4.2.6",
     "@types/node": "^24.10.1",
     "@types/qs": "^6.9.18",
@@ -69,8 +74,7 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "^8.0.13",
-    "vitest": "^4.0.5",
-    "@types/lodash-es": "^4.17.12"
+    "vitest": "^4.0.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/src/lib/components/canAccess.svelte

@@ -14,7 +14,7 @@
 	import type { Snippet } from "svelte";
 	import { onMount } from "svelte";
 	import { getStudioContext } from "../context";
-	import { emitEvent } from "../eventSystem";
+	import { checkAuthAccess } from "../eventSystem";
 
 	interface Props {
 		collection: string;
@@ -31,17 +31,7 @@
 	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;
-		}
+		allowed = await checkAuthAccess({ lobb, ctx }, collection, action);
 	});
 </script>
 

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

@@ -165,6 +165,7 @@
     let totalCount = $state(0);
     let serverData: TableProps["data"] = $state([]);
     let loading = $state(true);
+    let hasLoaded = $state(false);
     const columns: TableProps["columns"] = $state(
         getCollectionColumns(ctx, collectionName),
     );
@@ -197,6 +198,7 @@
         totalCount = res.meta.totalCount;
         onDataLoad?.(totalCount);
         loading = false;
+        hasLoaded = true;
     }
 
     async function handleDelete(entryId: string) {
@@ -297,6 +299,7 @@
             {collectionName}
             bind:selectedRecords
             {showImport}
+            {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
             onCreate={isRecordingMode ? handleCreate : undefined}
@@ -310,7 +313,7 @@
     <div class="relative flex-1 overflow-auto w-full">
         {#key activeTabFilter}
             <div class="h-full w-full" in:fade={{ duration: 120 }}>
-                {#if loading}
+                {#if loading && !hasLoaded}
                     <div class="flex flex-col gap-2 p-2 w-full">
                         <Skeleton class="h-8 w-full" />
                         <Skeleton class="h-8 w-[80%]" />

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

@@ -3,7 +3,7 @@
     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 { Download, ListRestart, LoaderCircle, Plus, Trash, Link } from "lucide-svelte";
     import LlmButton from "../LlmButton.svelte";
     import FilterButton from "./filterButton.svelte";
     import SortButton from "./sortButton.svelte";
@@ -26,6 +26,7 @@
         onLink?: (record: any) => void;
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
+        loading?: boolean;
         left?: Snippet<[]>;
     }
 
@@ -37,6 +38,7 @@
         onLink,
         onCreate,
         showImport = true,
+        loading = false,
         left
     }: Props = $props();
 
@@ -162,10 +164,15 @@
             variant="ghost"
             size="sm"
             class="text-muted-foreground"
-            Icon={ListRestart}
             onclick={() => (params = { ...params })}
         >
-            {headerIsSmall ? "" : "Refresh"}
+            {#if loading}
+                <LoaderCircle size={16} class="animate-spin" />
+                {headerIsSmall ? "" : "Loading"}
+            {:else}
+                <ListRestart size={16} />
+                {headerIsSmall ? "" : "Refresh"}
+            {/if}
         </Button>
         {#if showImport}
             <CanAccess collection={collectionName} action="create">

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

@@ -223,8 +223,8 @@
 			{:else}
 				<ColumnIcon size="12.5" class="text-muted-foreground" />
 			{/if}
-			<div class="font-bold">{column.id}</div>
-			<div class="text-muted-foreground text-[0.7rem]">
+			<div class="font-bold whitespace-nowrap">{column.id}</div>
+			<div class="text-muted-foreground text-[0.7rem] whitespace-nowrap">
 				{column.subtext}
 			</div>
 		</button>

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

@@ -95,8 +95,8 @@
                         showImport={false}
                         showHeader={true}
                         showFooter={false}
-                        showDelete={false}
-                        showEdit={false}
+                        showDelete={true}
+                        showEdit={true}
                         tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
                     >
                         {#snippet headerLeft()}

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

@@ -60,9 +60,7 @@
             relation.to.collection === parentRecord?.collectionName,
     )?.from.field;
     const createValues = {
-        [refrenceFieldName]: {
-            id: 0,
-        },
+        [refrenceFieldName]: 0,
     };
     let selectedRecordsIds: string[] = $derived(
         entries.filter((entry) => entry.id).map((entry) => entry.id),

package/src/lib/components/mainNavShared.ts

@@ -1,5 +1,5 @@
 import { House, Layers, Library, Workflow } from "lucide-svelte";
-import { emitEvent } from "../eventSystem";
+import { checkAuthAccess } from "../eventSystem";
 import { getDashboardNavs } from "../extensions/extensionUtils";
 
 export type NavItem = {
@@ -13,11 +13,7 @@ export type 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;
+    return checkAuthAccess({ lobb, ctx }, item.represents, "read");
 }
 
 export async function buildNavSections(lobb: any, ctx: any): Promise<NavItem[][]> {

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

@@ -2,7 +2,7 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
-    import { emitEvent } from "../../../eventSystem";
+    import { checkAuthAccess } from "../../../eventSystem";
     import Collection from "./collection.svelte";
     import { onMount } from "svelte";
 
@@ -18,7 +18,7 @@
     let { collectionName } = $props();
 
     // Start empty so unreadable collections never flash. Populated after the
-    // auth.canAccess checks resolve below.
+    // Populated after checkAuthAccess calls resolve below.
     let collectionsList = $state<SideBarData>([]);
 
     onMount(async () => {
@@ -31,14 +31,9 @@
         );
         const visibleNames = (
             await Promise.all(
-                allNames.map(async (name) => {
-                    const res = await emitEvent(
-                        { lobb, ctx },
-                        "auth.canAccess",
-                        { collection: name, action: "read" },
-                    );
-                    return res === true ? name : null;
-                }),
+                allNames.map(async (name) =>
+                    (await checkAuthAccess({ lobb, ctx }, name, "read")) ? name : null
+                ),
             )
         ).filter((n): n is string => n !== null);
 

package/src/lib/eventSystem.ts

@@ -3,6 +3,15 @@ import type { StudioContext } from "./context";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 
+export async function checkAuthAccess(studioContext: StudioContext, collection: string, action: string): Promise<boolean> {
+    try {
+        const result = await emitEvent(studioContext, "auth.canAccess", { collection, action });
+        return result !== false;
+    } catch {
+        return false;
+    }
+}
+
 export async function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any> {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter(

package/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import "../app.css";
+
+  let { children } = $props();
+</script>
+
+{@render children()}

package/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false;

package/src/routes/[...path]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { StudioRoot } from "$lib/index.js";
+</script>
+
+<StudioRoot />

package/src/routes/+page.svelte

@@ -1,6 +0,0 @@
-<script lang="ts">
-  import { Studio } from '$lib/index.js';
-  import '../app.css';
-</script>
-
-<Studio />