@lobb-js/studio 0.29.0 → 0.30.0

package/src/lib/components/ui/button/button.svelte

@@ -49,7 +49,6 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import { LoaderCircle } from "lucide-svelte";
-	import { Link, location } from "@wjfe/n-savant";
 
 	let {
 		class: className,
@@ -94,9 +93,9 @@
 {/snippet}
 
 {#if href}
-	<Link {href} class={cn(buttonVariants({ variant, size }), className)}>
+	<a {href} class={cn(buttonVariants({ variant, size }), className)}>
 		{@render innerPart()}
-	</Link>
+	</a>
 {:else}
 	<button
 		bind:this={ref}

package/src/lib/components/workflowEditor.svelte

@@ -17,7 +17,7 @@
     const { lobb, ctx } = getStudioContext();
     import Button from "./ui/button/button.svelte";
     import Input from "./ui/input/input.svelte";
-    import { location } from "@wjfe/n-savant";
+    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/src/lib/eventSystem.ts

@@ -3,25 +3,26 @@ import type { StudioContext } from "./context";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 
-export async function emitEvent(studioContext: StudioContext, eventName: string, input: Record<string, any>) {
+export async function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any> {
     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(
+        // 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),
         );
-
-        if (localOutput) {
-            input = localOutput;
-        }
       } catch (error) {
         toast.error((error as any).message);
         throw error;

package/src/lib/extensions/extension.types.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, type OpenDataTablePopupProps } from "../actions";
 import { toast } from "svelte-sonner";
 import type Drawer from "../components/drawer.svelte";
 import { Switch } from "../components/ui/switch";
@@ -54,11 +55,24 @@ 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;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
+    emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -71,6 +85,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 {
@@ -88,11 +120,13 @@ export interface ExtensionProps {
 // TODO: instead of doing them this way. you can make the components generic and have static keys and we can pass some dynamic data so that we for example extend the list view
 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`
@@ -112,7 +146,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>;
 }
 
 // extension exported object

package/src/lib/extensions/extensionUtils.ts

@@ -7,7 +7,7 @@ import type {
 import type { LobbClient } from "@lobb-js/sdk";
 import type { CTX } from "../store.types";
 import { toast } from "svelte-sonner";
-import { showDialog, openDataTableDrawer } from "../actions";
+import { showDialog, openDataTableDrawer, openDataTablePopup } from "../actions";
 import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -26,7 +26,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";
@@ -62,10 +63,12 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
   return {
     ctx: ctx,
     lobb: lobb,
-    location: location,
+    page: page,
+    goto: goto,
     toast: toast,
     showDialog: showDialog,
     openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+    openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
     emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
     components: getComponents(),
     mediaQueries: mediaQueries,

package/src/lib/index.ts

@@ -1,7 +1,8 @@
 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";
@@ -11,6 +12,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/src/lib/store.types.ts

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

package/src/lib/studioLifecycle.svelte.ts

@@ -0,0 +1,17 @@
+// 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(): number {
+  return mountKey;
+}
+
+export function remountStudio(): void {
+  mountKey += 1;
+}

package/dist/components/routes/data_model/syncManager.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-    import DiffViewer from "../../diffViewer.svelte";
-    import { getStudioContext } from "../../../context";
-
-    const { lobb, ctx } = getStudioContext();
-    import { onMount } from "svelte";
-    import stringify from "json-stable-stringify";
-    import CodeEditor from "../../codeEditor.svelte";
-    import Table from "../../dataTable/table.svelte";
-    import Button from "../../ui/button/button.svelte";
-    import { LoaderCircle, SendHorizontal } from "lucide-svelte";
-
-    let configSchema: string = $state("");
-    let dbSchema: string = $state("");
-    let sqlPrompt = $state("");
-    let sqlResult = $state([]);
-
-    onMount(() => {
-        loadSchemas();
-    });
-
-    async function loadSchemas() {
-        configSchema = "";
-        dbSchema = "";
-        const response = await fetch(`${ctx.lobbUrl}/api/schema/diff`);
-        const result = await response.json();
-        configSchema = stringify(result.dbSchema, {
-            space: 2,
-        }) as string;
-        dbSchema = stringify(result.configSchema, {
-            space: 2,
-        }) as string;
-    }
-
-    async function handleExecute() {
-        const response = await lobb.createOne("core_query", {
-            query: sqlPrompt,
-        });
-        const result = await response.json();
-        sqlResult = result.data;
-        loadSchemas();
-    }
-</script>
-
-<div class="h-[50%] border-b overflow-auto">
-    {#if configSchema && dbSchema}
-        <DiffViewer
-            type="json"
-            original={configSchema}
-            modified={dbSchema}
-            class="h-full rounded-none border-0"
-        />
-    {:else}
-        <div class="flex justify-center items-center h-full gap-2">
-            <LoaderCircle class="animate-spin" />
-            <div>loading...</div>
-        </div>
-    {/if}
-</div>
-<div class="flex h-[50%] w-full">
-    <div class="h-full flex-1 flex flex-col border-r">
-        <div
-            class="h-10 flex items-center px-2 bg-background border-b justify-between"
-        >
-            <div>Query Editor</div>
-            <Button
-                class="h-7 px-3 text-xs font-normal"
-                Icon={SendHorizontal}
-                onclick={handleExecute}
-            >
-                Execute
-            </Button>
-        </div>
-        <CodeEditor
-            type="sql"
-            name="prompt"
-            bind:value={sqlPrompt}
-            class="flex-1 rounded-none border-0"
-        />
-    </div>
-    <div class="flex-1">
-        {#if Array.isArray(sqlResult) && sqlResult.length}
-            <Table
-                data={sqlResult}
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-            />
-        {:else}
-            <div class="flex flex-1 h-full items-center justify-center">
-                No results
-            </div>
-        {/if}
-    </div>
-</div>

package/dist/components/routes/data_model/syncManager.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const SyncManager: import("svelte").Component<Record<string, never>, {}, "">;
-type SyncManager = ReturnType<typeof SyncManager>;
-export default SyncManager;

package/src/lib/components/routes/data_model/syncManager.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-    import DiffViewer from "../../diffViewer.svelte";
-    import { getStudioContext } from "../../../context";
-
-    const { lobb, ctx } = getStudioContext();
-    import { onMount } from "svelte";
-    import stringify from "json-stable-stringify";
-    import CodeEditor from "../../codeEditor.svelte";
-    import Table from "../../dataTable/table.svelte";
-    import Button from "../../ui/button/button.svelte";
-    import { LoaderCircle, SendHorizontal } from "lucide-svelte";
-
-    let configSchema: string = $state("");
-    let dbSchema: string = $state("");
-    let sqlPrompt = $state("");
-    let sqlResult = $state([]);
-
-    onMount(() => {
-        loadSchemas();
-    });
-
-    async function loadSchemas() {
-        configSchema = "";
-        dbSchema = "";
-        const response = await fetch(`${ctx.lobbUrl}/api/schema/diff`);
-        const result = await response.json();
-        configSchema = stringify(result.dbSchema, {
-            space: 2,
-        }) as string;
-        dbSchema = stringify(result.configSchema, {
-            space: 2,
-        }) as string;
-    }
-
-    async function handleExecute() {
-        const response = await lobb.createOne("core_query", {
-            query: sqlPrompt,
-        });
-        const result = await response.json();
-        sqlResult = result.data;
-        loadSchemas();
-    }
-</script>
-
-<div class="h-[50%] border-b overflow-auto">
-    {#if configSchema && dbSchema}
-        <DiffViewer
-            type="json"
-            original={configSchema}
-            modified={dbSchema}
-            class="h-full rounded-none border-0"
-        />
-    {:else}
-        <div class="flex justify-center items-center h-full gap-2">
-            <LoaderCircle class="animate-spin" />
-            <div>loading...</div>
-        </div>
-    {/if}
-</div>
-<div class="flex h-[50%] w-full">
-    <div class="h-full flex-1 flex flex-col border-r">
-        <div
-            class="h-10 flex items-center px-2 bg-background border-b justify-between"
-        >
-            <div>Query Editor</div>
-            <Button
-                class="h-7 px-3 text-xs font-normal"
-                Icon={SendHorizontal}
-                onclick={handleExecute}
-            >
-                Execute
-            </Button>
-        </div>
-        <CodeEditor
-            type="sql"
-            name="prompt"
-            bind:value={sqlPrompt}
-            class="flex-1 rounded-none border-0"
-        />
-    </div>
-    <div class="flex-1">
-        {#if Array.isArray(sqlResult) && sqlResult.length}
-            <Table
-                data={sqlResult}
-                showLastRowBorder={true}
-                showLastColumnBorder={true}
-            />
-        {:else}
-            <div class="flex flex-1 h-full items-center justify-center">
-                No results
-            </div>
-        {/if}
-    </div>
-</div>