@lobb-js/studio 0.28.6 → 0.29.1

package/dist/components/workflowEditor.svelte

@@ -12,12 +12,12 @@
 
 <script lang="ts">
     import { getStudioContext } from "../context";
-    import CodeEditor from "../components/codeEditor.svelte";
+    import CodeEditor from "./codeEditor.svelte";
 
     const { lobb, ctx } = getStudioContext();
-    import Button from "../components/ui/button/button.svelte";
-    import Input from "../components/ui/input/input.svelte";
-    import { location } from "@wjfe/n-savant";
+    import Button from "./ui/button/button.svelte";
+    import Input from "./ui/input/input.svelte";
+    import { goto } from "$app/navigation";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";
     import { isEqual } from "lodash-es";
@@ -96,7 +96,7 @@
         const reponse = await lobb.createOne("core_workflows", workflow);
         const result = await reponse.json();
         const workflowEntry = result.data;
-        location.navigate(`/studio/workflows/${workflowEntry.name}`);
+        goto(`/studio/workflows/${workflowEntry.name}`);
         await refreshSidebar();
     }
 

package/dist/eventSystem.d.ts

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

package/dist/eventSystem.js

@@ -3,15 +3,17 @@ import { openCreateDetailView, openUpdateDetailView } from "./actions";
 export async function emitEvent(studioContext, eventName, input) {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter((workflow) => {
-        return eventName.startsWith(workflow.eventName);
+        return eventName === workflow.eventName;
     });
     for (let index = 0; index < workflows.length; index++) {
         const workflow = workflows[index];
         try {
-            const localOutput = await workflow.handler(input, await getEventContext(studioContext));
-            if (localOutput) {
-                input = localOutput;
-            }
+            // Whatever the handler returns becomes the input for the next
+            // subscriber and the final emit() return. No special handling of
+            // undefined — chain handlers should return their input, override
+            // handlers return undefined to opt out, observer handlers can
+            // return nothing if no one downstream reads input.
+            input = await workflow.handler(input, await getEventContext(studioContext));
         }
         catch (error) {
             toast.error(error.message);

package/dist/extensions/extension.types.d.ts

@@ -11,7 +11,8 @@ import type CreateDetailViewButton from "../components/detailView/create/createD
 import type UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
 import type { mediaQueries } from "../utils";
 import type Table from "../components/dataTable/table.svelte";
-import type { Location } from "@wjfe/n-savant";
+import type { page } from "$app/state";
+import type { goto } from "$app/navigation";
 import type RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import type DataTable from "../components/dataTable/dataTable.svelte";
 import type Drawer from "../components/drawer.svelte";
@@ -22,7 +23,7 @@ import * as Icons from "lucide-svelte";
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps } from "../actions";
 import { toast } from "svelte-sonner";
 import { Switch } from "../components/ui/switch";
 export interface Components {
@@ -50,18 +51,23 @@ export interface Components {
 export interface ExtensionUtils {
     ctx: CTX;
     lobb: LobbClient;
-    location: Location;
+    /**
+     * SvelteKit's reactive page proxy — exposes `url`, `params`, `route`,
+     * `data`, `state`, `error`. Access fields through the proxy
+     * (`utils.page.url.pathname`); don't destructure if you need
+     * reactivity (`const { url } = utils.page` is a one-time snapshot).
+     */
+    page: typeof page;
+    /**
+     * SvelteKit's client-side navigation. Same signature as
+     * `goto(href, options?)` — supports `replaceState`, `invalidateAll`,
+     * `noScroll`, `keepFocus`, etc.
+     */
+    goto: typeof goto;
     toast: typeof toast;
     showDialog: typeof showDialog;
-    openDataTableDrawer: (props: {
-        collectionName: string;
-        filter?: Record<string, any>;
-        title?: string;
-        showHeader?: boolean;
-        showFooter?: boolean;
-        position?: "side" | "bottom";
-    }) => void;
-    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
+    openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -72,6 +78,24 @@ interface DashboardNav {
     href?: string;
     onclick?: () => void;
     navs?: DashboardNav[];
+    /**
+     * The collection(s) this nav item represents — i.e. the UI surface it
+     * exposes for that data.
+     *
+     * Visibility is derived from this: the auth extension's `auth.canAccess`
+     * workflow checks the current user's read permission on the represented
+     * collection(s), and the item is hidden if denied. Items without a
+     * `represents` value are always visible.
+     *
+     * @example
+     * // single collection
+     * { label: "Reports", href: "/reports", icon: BarChart, represents: "reports_dashboards" }
+     *
+     * @example
+     * // multiple collections — user must be able to read all of them
+     * { label: "Audit", href: "/audit", icon: ShieldCheck, represents: ["audit_log", "auth_users"] }
+     */
+    represents?: string | string[];
 }
 export interface DashboardNavs {
     top?: DashboardNav[];
@@ -82,7 +106,7 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
-export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
+export type ExtensionComponentKey = `pages.${string}` | `publicPages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | "detailView.field.label" | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions` | `listView.header.actions` | (string & {});
 export type ExtensionComponent = any | {
     component: any;
     when: (props: Record<string, any>) => boolean;
@@ -94,7 +118,7 @@ export interface StudioWorkflowContext {
 }
 export interface StudioWorkflow {
     eventName: string;
-    handler: (input: Record<string, any>, context: StudioWorkflowContext) => Promise<any>;
+    handler: (input: any, context: StudioWorkflowContext) => Promise<any>;
 }
 export interface Extension {
     name: string;

package/dist/extensions/extensionUtils.js

@@ -18,7 +18,8 @@ import * as Breadcrumb from "../components/ui/breadcrumb";
 import { ContextMenu } from "bits-ui";
 import * as Popover from "../components/ui/popover";
 import * as Icons from "lucide-svelte";
-import { location } from "@wjfe/n-savant";
+import { page } from "$app/state";
+import { goto } from "$app/navigation";
 import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import DataTable from "../components/dataTable/dataTable.svelte";
 import Drawer from "../components/drawer.svelte";
@@ -52,7 +53,8 @@ export function getExtensionUtils(lobb, ctx) {
     return {
         ctx: ctx,
         lobb: lobb,
-        location: location,
+        page: page,
+        goto: goto,
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types";
-export { default as Studio } from "./components/Studio.svelte";
+export { default as StudioRoot } from "./components/StudioRoot.svelte";
 export { default as Landing } from "./components/landing.svelte";
+export { remountStudio } from "./studioLifecycle.svelte";
 export { Button } from "./components/ui/button";
 export { Input } from "./components/ui/input";
 export { Separator } from "./components/ui/separator";
@@ -10,6 +11,7 @@ export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
 export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
 export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
 export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export { default as DetailView } from "./components/detailView/detailView.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/dist/index.js

@@ -1,5 +1,6 @@
-export { default as Studio } from "./components/Studio.svelte";
+export { default as StudioRoot } from "./components/StudioRoot.svelte";
 export { default as Landing } from "./components/landing.svelte";
+export { remountStudio } from "./studioLifecycle.svelte";
 export { Button } from "./components/ui/button";
 export { Input } from "./components/ui/input";
 export { Separator } from "./components/ui/separator";
@@ -9,6 +10,7 @@ export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
 export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
 export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
 export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export { default as DetailView } from "./components/detailView/detailView.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/dist/store.types.d.ts

@@ -1,5 +1,5 @@
-import type { Extension } from "../extensions/extension.types";
-interface CollectionTab {
+import type { Extension } from "./extensions/extension.types";
+export interface CollectionTab {
     id?: string;
     label: string;
     filter?: Record<string, any>;

package/dist/studioLifecycle.svelte.d.ts

@@ -0,0 +1,2 @@
+export declare function getStudioMountKey(): number;
+export declare function remountStudio(): void;

package/dist/studioLifecycle.svelte.js

@@ -0,0 +1,15 @@
+// Module-level reactive signal that the Studio root listens to via {#key ...}.
+// Bumping this value tears down the entire Studio component tree and mounts
+// a fresh one, so onStartup re-runs and everything downstream (ctx,
+// extensions, sidebar) initialises with the new session state.
+//
+// Use cases: after login, after logout, after a role/permissions change.
+// Consumers (e.g. the auth extension) call `remountStudio()` instead of
+// having every UI surface listen for auth changes reactively.
+let mountKey = $state(0);
+export function getStudioMountKey() {
+    return mountKey;
+}
+export function remountStudio() {
+    mountKey += 1;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.28.6",
+  "version": "0.29.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.31.9",
+    "@lobb-js/core": "^0.32.1",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -87,7 +87,7 @@
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
     "@internationalized/date": "^3.12.0",
-    "@lobb-js/sdk": "^0.1.6",
+    "@lobb-js/sdk": "^0.2.1",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",
@@ -95,7 +95,6 @@
     "@tiptap/extension-underline": "^3.0.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",
-    "@wjfe/n-savant": "^0.3.0",
     "@xyflow/svelte": "^1.2.0",
     "bits-ui": "^1.8.0",
     "clsx": "^2.1.1",

package/src/app.css

@@ -20,6 +20,7 @@
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
+  --muted-soft: oklch(0.9904 0.0021 247.896);
   --accent: oklch(0.968 0.007 247.896);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
@@ -54,6 +55,7 @@
   --secondary-foreground: oklch(0.984 0.003 247.858);
   --muted: oklch(0.279 0.041 260.031);
   --muted-foreground: oklch(0.704 0.04 256.788);
+  --muted-soft: oklch(0.174 0.042 263.3);
   --accent: oklch(0.279 0.041 260.031);
   --accent-foreground: oklch(0.984 0.003 247.858);
   --destructive: oklch(0.704 0.191 22.216);
@@ -92,6 +94,7 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-muted-soft: var(--muted-soft);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);

package/src/lib/actions.ts

@@ -8,6 +8,7 @@ import type { UpdateDetailViewProp } from "./components/detailView/update/update
 import type { StudioContext } from "./context";
 import { createStudioContextMap } from "./context";
 import { getCollectionParamsFields } from "./components/dataTable/utils";
+import type { CollectionTab } from "./store.types";
 
 export interface OpenDataTableDrawerProps {
     collectionName: string;
@@ -16,6 +17,7 @@ export interface OpenDataTableDrawerProps {
     showHeader?: boolean;
     showFooter?: boolean;
     position?: "side" | "bottom";
+    tabs?: CollectionTab[];
 }
 
 export function showDialog(title: string, description: string): Promise<boolean> {

package/src/lib/components/Studio.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-    import { Toaster } from "../components/ui/sonner";
-    import { onMount, onDestroy } from "svelte";
+    import { Toaster } from "./ui/sonner";
+    import { onMount } from "svelte";
     import { ModeWatcher } from "mode-watcher";
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
-    import Header from "../components/header.svelte";
+    import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
-    import MiniSidebar from "../components/miniSidebar.svelte";
-    import * as Tooltip from "../components/ui/tooltip";
-    import { Router, Route, Fallback, init as initRouter } from "@wjfe/n-savant";
+    import MiniSidebar from "./miniSidebar.svelte";
+    import * as Tooltip from "./ui/tooltip";
+    import { page } from "$app/state";
+    import { afterNavigate } from "$app/navigation";
     import {
         executeExtensionsOnStartup,
         executeExtensionsOnRouteChange,
@@ -22,6 +23,7 @@
     import Collections from "./routes/collections/collections.svelte";
     import Workflows from "./routes/workflows/workflows.svelte";
     import Extension from "./routes/extensions/extension.svelte";
+    import PublicExtension from "./routes/extensions/publicExtension.svelte";
 
     interface StudioProps {
         lobbUrl?: string;
@@ -42,10 +44,11 @@
 
     let status: "loading" | "error" | "ready" = $state("loading");
     let isSmallScreen = $derived(!mediaQueries.sm.current);
-    let cleanupRouter: (() => void) | undefined;
 
     onMount(async () => {
-        cleanupRouter = initRouter();
+        // Remove the static loading screen defined in app.html — it shows instantly
+        // before JS loads to avoid a blank page, and is replaced by the Studio UI.
+        document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
@@ -56,19 +59,13 @@
             console.error(err);
             status = "error";
         }
-
-        // Fire onRouteChange hooks on every navigation
-        const onRouteChange = () => executeExtensionsOnRouteChange(lobb, ctx as any, window.location.pathname);
-        const originalPushState = history.pushState.bind(history);
-        history.pushState = function (...args) {
-            originalPushState(...args);
-            onRouteChange();
-        };
-        window.addEventListener("popstate", onRouteChange);
     });
 
-    onDestroy(() => {
-        if (cleanupRouter) cleanupRouter();
+    // Fire onRouteChange hooks via SvelteKit's afterNavigate lifecycle instead
+    // of monkey-patching history.pushState. Runs both on initial mount and on
+    // every client-side navigation.
+    afterNavigate(() => {
+        executeExtensionsOnRouteChange(lobb, ctx as any, page.url.pathname);
     });
 </script>
 
@@ -91,6 +88,18 @@
             <div class="text-xs">Could not connect to the lobb server at this endpoint ({ctx.lobbUrl})</div>
         </div>
     </div>
+{:else if page.url.pathname.startsWith("/studio/public/")}
+    <!-- Public extension pages skip the dashboard chrome (no sidebar, no
+         header) since the viewer is unauthenticated and shouldn't see any
+         navigation to gated areas. -->
+    <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
+        <main class="bg-background h-screen w-screen">
+            <PublicExtension
+                extension={page.url.pathname.split("/")[3]}
+                page={page.url.pathname.split("/")[4]}
+            />
+        </main>
+    </Tooltip.Provider>
 {:else}
     <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
         <main
@@ -100,34 +109,24 @@
             <MiniSidebar />
             <div class="second_grid">
                 <Header />
-                <Router id="root-router" basePath="/studio">
-                    <Route key="home" path="/">
-                        {#snippet children(params)}
-                            <Home />
-                        {/snippet}
-                    </Route>
-                    <Route key="collections" path="/collections/:collection?">
-                        {#snippet children(params)}
-                            <Collections collectionName={params?.collection} />
-                        {/snippet}
-                    </Route>
-                    <Route key="datamodel" path="/datamodel/*">
-                        {#snippet children(params)}
-                            <DataModel />
-                        {/snippet}
-                    </Route>
-                    <Route key="workflows" path="/workflows/:workflow?">
-                        {#snippet children(params)}
-                            <Workflows workflowName={params?.workflow} />
-                        {/snippet}
-                    </Route>
-                    <Route key="extensions" path="/extensions/:extension?/:page?/*">
-                        {#snippet children(params)}
-                            <Extension extension={params?.extension} page={params?.page} />
-                        {/snippet}
-                    </Route>
-                    <Fallback>Not Found</Fallback>
-                </Router>
+                {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
+                    <Home />
+                {:else if page.url.pathname.startsWith("/studio/collections")}
+                    <Collections collectionName={page.url.pathname.split("/")[3]} />
+                {:else if page.url.pathname.startsWith("/studio/datamodel")}
+                    <DataModel />
+                {:else if page.url.pathname.startsWith("/studio/workflows")}
+                    <Workflows workflowName={page.url.pathname.split("/")[3]} />
+                {:else if page.url.pathname.startsWith("/studio/extensions")}
+                    <Extension
+                        extension={page.url.pathname.split("/")[3]}
+                        page={page.url.pathname.split("/")[4]}
+                    />
+                {:else}
+                    <div class="flex h-full w-full items-center justify-center text-muted-foreground">
+                        Not Found
+                    </div>
+                {/if}
             </div>
         </main>
     </Tooltip.Provider>

package/src/lib/components/StudioRoot.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import Studio from "./Studio.svelte";
+    import { getStudioMountKey } from "../studioLifecycle.svelte";
+
+    interface StudioRootProps {
+        lobbUrl?: string;
+    }
+
+    let { lobbUrl }: StudioRootProps = $props();
+
+    // Tracked so any change to the mount key tears down the Studio tree and
+    // mounts a fresh one — fresh ctx, fresh extension load, fresh /me, etc.
+    // Bumped by remountStudio() on login/logout.
+    const mountKey = $derived(getStudioMountKey());
+</script>
+
+{#key mountKey}
+    <Studio {lobbUrl} />
+{/key}

package/src/lib/components/breadCrumbs.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import * as Breadcrumb from "./ui/breadcrumb";
 	import { mediaQueries } from "../utils";
-	import { location } from "@wjfe/n-savant";
+	import { page } from "$app/state";
+	import { goto } from "$app/navigation";
 
 	const isSmall = $derived(!mediaQueries.sm.current);
 	const pathNames = $derived(
-		location.url.pathname
+		page.url.pathname
 			.replace("/studio", "")
 			.split("/")
 			.filter((el: any) => el !== "")
@@ -26,7 +27,7 @@
 				{:else}
 					<Breadcrumb.Link
 						class="cursor-pointer"
-						onclick={() => location.navigate("/studio")}
+						onclick={() => goto("/studio")}
 					>
 						Home
 					</Breadcrumb.Link>
@@ -45,7 +46,7 @@
 						<Breadcrumb.Link
 							class="cursor-pointer"
 							onclick={() =>
-								location.navigate(`/studio/${currentFullPaths}`)}
+								goto(`/studio/${currentFullPaths}`)}
 						>
 							{path}
 						</Breadcrumb.Link>

package/src/lib/components/codeEditor.svelte

@@ -132,7 +132,7 @@
 	});
 </script>
 
-<div class={cn('resize-y rounded-md border bg-muted/30 h-60', className)}>
+<div class={cn('resize-y rounded-md border bg-muted-soft h-60', className)}>
 	<div bind:this={editorContainer} class="h-full w-full pl-2" />
 </div>
 

package/src/lib/components/combobox.svelte

@@ -2,9 +2,9 @@
     import CheckIcon from "@lucide/svelte/icons/check";
     import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
     import { tick } from "svelte";
-    import * as Command from "../components/ui/command/index.js";
-    import * as Popover from "../components/ui/popover/index.js";
-    import { Button } from "../components/ui/button/index.js";
+    import * as Command from "./ui/command/index.js";
+    import * as Popover from "./ui/popover/index.js";
+    import { Button } from "./ui/button/index.js";
     import { cn } from "../utils.js";
     import type { HTMLButtonAttributes } from "svelte/elements";
 

package/src/lib/components/confirmationDialog/confirmationDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as AlertDialog from "../../components/ui/alert-dialog/index";
+	import * as AlertDialog from "../ui/alert-dialog/index";
 	import { Check, X } from "lucide-svelte";
 	import Button from "../ui/button/button.svelte";