@lobb-js/studio 0.28.6 → 0.29.1

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 } from "../actions";
 import { toast } from "svelte-sonner";
 import type Drawer from "../components/drawer.svelte";
 import { Switch } from "../components/ui/switch";
@@ -54,11 +55,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;
@@ -71,6 +84,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 +119,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 +145,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

@@ -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,7 +63,8 @@ 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),

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";
+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/vite-plugins/index.js

@@ -1,12 +1,10 @@
-import { contextualLibAlias } from "./contextual-lib-alias.js";
-import { lobbWorkspaceOptimize } from "./workspace-optimize.js";
+import { lobbWorkspaceFsAllow } from "./workspace-fs-allow.js";
 import { lobbExtensionsPlugin } from "./lobb-extensions.js";
 import { lobbProxyPlugin } from "./lobb-proxy.js";
 
 export function lobbStudioPlugins() {
   return [
-    contextualLibAlias(),
-    lobbWorkspaceOptimize(),
+    lobbWorkspaceFsAllow(),
     lobbExtensionsPlugin(),
     lobbProxyPlugin(),
   ];

package/vite-plugins/utils.js

@@ -0,0 +1,15 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+
+export function getMonorepoRoot() {
+  let dir = process.cwd();
+  while (true) {
+    try {
+      const pkg = JSON.parse(readFileSync(join(dir, "package.json"), "utf-8"));
+      if (pkg?.workspaces) return dir;
+    } catch { /* no package.json here, keep walking */ }
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}

package/vite-plugins/{workspace-optimize.js → workspace-fs-allow.js}

@@ -1,5 +1,4 @@
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { getMonorepoRoot } from "./utils.js";
 
 /**
  * In monorepo dev, workspace packages are symlinked into node_modules.
@@ -13,13 +12,13 @@ import { dirname, join } from "node:path";
  *
  * @returns {import('vite').Plugin}
  */
-export function lobbWorkspaceOptimize() {
+export function lobbWorkspaceFsAllow() {
   return {
-    name: "lobb-workspace-optimize",
+    name: "lobb-workspace-fs-allow",
     config(_, { command }) {
       if (command !== "serve") return;
 
-      const monorepoRoot = findMonorepoRoot();
+      const monorepoRoot = getMonorepoRoot();
       if (!monorepoRoot) return;
 
       return {
@@ -32,16 +31,3 @@ export function lobbWorkspaceOptimize() {
     },
   };
 }
-
-function findMonorepoRoot() {
-  let dir = process.cwd();
-  while (true) {
-    try {
-      const pkg = JSON.parse(readFileSync(join(dir, "package.json"), "utf-8"));
-      if (pkg?.workspaces) return dir;
-    } catch { /* no package.json here, keep walking */ }
-    const parent = dirname(dir);
-    if (parent === dir) return null;
-    dir = parent;
-  }
-}

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

@@ -1,94 +0,0 @@
-<script lang="ts">
-    import DiffViewer from "../../../components/diffViewer.svelte";
-    import { getStudioContext } from "../../../context";
-
-    const { lobb, ctx } = getStudioContext();
-    import { onMount } from "svelte";
-    import stringify from "json-stable-stringify";
-    import CodeEditor from "../../../components/codeEditor.svelte";
-    import Table from "../../../components/dataTable/table.svelte";
-    import Button from "../../../components/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 "../../../components/diffViewer.svelte";
-    import { getStudioContext } from "../../../context";
-
-    const { lobb, ctx } = getStudioContext();
-    import { onMount } from "svelte";
-    import stringify from "json-stable-stringify";
-    import CodeEditor from "../../../components/codeEditor.svelte";
-    import Table from "../../../components/dataTable/table.svelte";
-    import Button from "../../../components/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/vite-plugins/contextual-lib-alias.js

@@ -1,67 +0,0 @@
-import path from "path";
-import fs from "fs";
-
-/**
- * Vite plugin that resolves $lib imports contextually based on the importing file's package.
- *
- * Walks up the directory tree from the importer to find the nearest package.json,
- * then checks if that package has a src/lib directory. If so, resolves $lib to that path.
- *
- * This allows any package using the src/lib convention to use $lib imports without conflicts.
- *
- * @returns {import('vite').Plugin}
- */
-export function contextualLibAlias() {
-  const packageRootCache = new Map();
-
-  function findPackageRoot(filePath) {
-    const dir = path.dirname(filePath);
-
-    // Check cache
-    if (packageRootCache.has(dir)) {
-      return packageRootCache.get(dir);
-    }
-
-    // Walk up directories to find package.json
-    let currentDir = dir;
-    const rootDir = path.parse(currentDir).root;
-
-    while (currentDir !== rootDir) {
-      const pkgPath = path.join(currentDir, "package.json");
-      if (fs.existsSync(pkgPath)) {
-        packageRootCache.set(dir, currentDir);
-        return currentDir;
-      }
-      currentDir = path.dirname(currentDir);
-    }
-
-    // Not found
-    packageRootCache.set(dir, null);
-    return null;
-  }
-
-  return {
-    name: "contextual-lib-alias",
-    enforce: "pre",
-
-    async resolveId(source, importer, options) {
-      if (!source.startsWith("$lib")) return null;
-      if (!importer) return null;
-
-      // Find the package root for the importing file
-      const packageRoot = findPackageRoot(importer);
-      if (!packageRoot) return null;
-
-      // Check if this package has src/lib
-      const libPath = path.join(packageRoot, "src/lib");
-      if (!fs.existsSync(libPath)) return null;
-
-      // Resolve $lib to this package's src/lib
-      const importPath = source.slice(4); // Remove "$lib"
-      const resolvedPath = path.join(libPath, importPath);
-
-      // Let Vite resolve the actual file (handles .js, .ts, .svelte extensions)
-      return this.resolve(resolvedPath, importer, { skipSelf: true, ...options });
-    }
-  };
-}