@lobb-js/studio 0.31.0 → 0.33.0

package/dist/components/detailView/update/updateDetailViewChildren.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import DataTable from "../../dataTable/dataTable.svelte";
+    import { getStudioContext } from "../../../context";
+    import { Table, Link, Plus } from "lucide-svelte";
+    import { untrack } from "svelte";
+    import CreateDetailViewButton from "../create/createDetailViewButton.svelte";
+    import SelectRecord from "../../selectRecord.svelte";
+
+    const { ctx } = getStudioContext();
+
+    import type { Changes, ChildrenChanges } from "../utils";
+
+    interface LocalProp {
+        collectionName: string;
+        entry: any;
+        changes?: Changes;
+        onChanges?: (children: Changes["children"]) => void;
+    }
+
+    let { collectionName, entry, changes, onChanges }: LocalProp = $props();
+
+    const children = (ctx.meta.collections[collectionName]?.children ?? [])
+        .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
+
+    let localChildren = $state<Changes["children"]>(untrack(() => changes?.children ?? {}));
+    let serverCounts = $state<Record<string, number | undefined>>({});
+
+    function handleChildChanges(collection: string, updated: ChildrenChanges) {
+        localChildren[collection] = updated;
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleDataLoad(collection: string, total: number) {
+        serverCounts[collection] = total;
+    }
+
+    function handleEmptyCreate(collection: string, c: Changes) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].created.push({ data: c.data });
+        onChanges?.($state.snapshot(localChildren));
+    }
+
+    function handleEmptyLink(collection: string, record: any) {
+        if (!localChildren[collection]) {
+            localChildren[collection] = { created: [], updated: [], deleted: [], linked: [], unlinked: [] };
+        }
+        localChildren[collection].linked.push(record);
+        onChanges?.($state.snapshot(localChildren));
+    }
+</script>
+
+{#if children.length}
+    <div class="flex flex-col gap-3 border-t p-4">
+        <div class="flex items-center gap-2">
+            <Link size="14" class="text-muted-foreground" />
+            <span class="text-sm font-medium">Sub Records</span>
+        </div>
+        {#each children as child}
+            {@const serverCount = serverCounts[child.collection]}
+            {@const localAdditions = (localChildren[child.collection]?.created.length ?? 0) + (localChildren[child.collection]?.linked.length ?? 0)}
+            {@const showEmpty = serverCount !== undefined && serverCount === 0 && localAdditions === 0}
+            {#if showEmpty}
+                <div class="rounded-lg border bg-muted-soft overflow-hidden flex flex-col">
+                    <div class="flex flex-col items-center justify-center gap-3 py-6 px-4">
+                        <div class="flex flex-col items-center gap-2 text-center">
+                            <div class="flex items-center gap-1.5 text-sm font-medium text-muted-foreground">
+                                <span>No records in</span>
+                                <span class="rounded-md border bg-muted px-2 py-0.5 text-xs font-normal">{child.collection}</span>
+                            </div>
+                            <span class="text-xs text-muted-foreground/70">Create a new record or link an existing one.</span>
+                        </div>
+                        <div class="flex gap-2">
+                            <SelectRecord
+                                collectionName={child.collection}
+                                variant="outline"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Link}
+                                onSelect={(r) => handleEmptyLink(child.collection, r)}
+                            >
+                                Link
+                            </SelectRecord>
+                            <CreateDetailViewButton
+                                collectionName={child.collection}
+                                variant="default"
+                                class="h-7 px-3 text-xs font-normal"
+                                Icon={Plus}
+                                onChanges={(c) => handleEmptyCreate(child.collection, c)}
+                            >
+                                Create
+                            </CreateDetailViewButton>
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <div class="rounded-lg border bg-background overflow-hidden flex flex-col max-h-96">
+                    <DataTable
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: entry.id }}
+                        parentContext={{ collectionName, recordId: entry.id }}
+                        onChanges={(updated) => handleChildChanges(child.collection, updated)}
+                        changes={localChildren[child.collection]}
+                        showImport={false}
+                        showHeader={true}
+                        showFooter={true}
+                        showDelete={child.type === "fk" || child.type === "m2m"}
+                        tableProps={{ showLastColumnBorder: false, showLastRowBorder: true }}
+                        onDataLoad={(total) => handleDataLoad(child.collection, total)}
+                    >
+                        {#snippet headerLeft()}
+                            <div class="flex items-center gap-2 px-1">
+                                <Table size="14" class="text-muted-foreground" />
+                                <span class="text-sm font-medium">{child.collection}</span>
+                            </div>
+                        {/snippet}
+                    </DataTable>
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}

package/dist/components/detailView/update/updateDetailViewChildren.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Changes } from "../utils";
+interface LocalProp {
+    collectionName: string;
+    entry: any;
+    changes?: Changes;
+    onChanges?: (children: Changes["children"]) => void;
+}
+declare const UpdateDetailViewChildren: import("svelte").Component<LocalProp, {}, "">;
+type UpdateDetailViewChildren = ReturnType<typeof UpdateDetailViewChildren>;
+export default UpdateDetailViewChildren;

package/dist/components/detailView/utils.d.ts

@@ -6,8 +6,7 @@ export type ChildrenChanges = {
     }>;
     updated: Array<{
         id: string | number;
-        data: Record<string, any>;
-        children: Record<string, ChildrenChanges>;
+        changes: Changes;
     }>;
     deleted: Array<Record<string, any>>;
     linked: Array<Record<string, any>>;

package/dist/components/importButton.svelte

@@ -132,7 +132,7 @@
 			importResults = [];
 			let hasSuccess = false;
 			for (const row of finalRows) {
-				const response = await lobb.createOne(collectionName, row);
+				const response = await lobb.createOne(collectionName, { data: row });
 				if (response.ok) {
 					importResults.push({ row, error: null });
 					hasSuccess = true;

package/dist/components/richTextEditor.svelte

@@ -72,6 +72,8 @@
 			extensions: [
 				StarterKit.configure({
 					heading: { levels: [1, 2, 3] },
+					underline: false,
+					link: false,
 				}),
 				UnderlineExt,
 				LinkExt.configure({ openOnClick: false }),

package/dist/components/workflowEditor.svelte

@@ -93,7 +93,7 @@
             return;
         }
 
-        const reponse = await lobb.createOne("core_workflows", workflow);
+        const reponse = await lobb.createOne("core_workflows", { data: workflow });
         const result = await reponse.json();
         const workflowEntry = result.data;
         goto(`/studio/workflows/${workflowEntry.name}`);
@@ -107,9 +107,11 @@
             );
         }
         const reponse = await lobb.updateOne("core_workflows", workflow.id, {
-            name: workflow.name,
-            event_name: workflow.event_name,
-            handler: workflow.handler,
+            data: {
+                name: workflow.name,
+                event_name: workflow.event_name,
+                handler: workflow.handler,
+            },
         });
         const result = await reponse.json();
 

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.s
 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 { default as CanAccess } from "./components/canAccess.svelte";
+export { default as ExtensionsComponents } from "./components/extensionsComponents.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/dist/index.js

@@ -11,6 +11,8 @@ export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.s
 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 { default as CanAccess } from "./components/canAccess.svelte";
+export { default as ExtensionsComponents } from "./components/extensionsComponents.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

@@ -30,8 +30,15 @@ interface Collection {
     };
 }
 type Collections = Record<string, Collection>;
+export interface StudioTheme {
+    light?: Record<string, string>;
+    dark?: Record<string, string>;
+}
 interface Meta {
     version: string;
+    studio?: {
+        theme?: StudioTheme;
+    };
     relations: Array<any>;
     collections: Collections;
     extensions: Record<string, any>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.33.0",
+    "@lobb-js/core": "^0.34.0",
     "@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.2.1",
+    "@lobb-js/sdk": "^0.3.0",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.3.0",
     "@tiptap/core": "^3.0.0",

package/src/lib/actions.ts

@@ -30,6 +30,7 @@ export interface OpenDataTablePopupProps {
     showHeader?: boolean;
     showFooter?: boolean;
     tabs?: CollectionTab[];
+    view?: { id: string; [key: string]: any };
 }
 
 export function showDialog(title: string, description: string): Promise<boolean> {

package/src/lib/applyStudioTheme.ts

@@ -0,0 +1,38 @@
+import type { StudioTheme } from "./store.types";
+
+// Studio theme injection. Writes the configured CSS-variable overrides
+// into a single <style> tag — light overrides under `:root`, dark under
+// `.dark` — so each mode picks up its own variant. Idempotent: re-runs
+// replace the previous block.
+
+const STYLE_ID = "lobb-studio-theme";
+
+function buildDeclarations(vars: Record<string, string> | undefined): string {
+    if (!vars) return "";
+    const out: string[] = [];
+    for (const [key, value] of Object.entries(vars)) {
+        if (!key.startsWith("--") || !value) continue;
+        out.push(`${key}: ${value};`);
+    }
+    return out.join(" ");
+}
+
+export function applyStudioTheme(theme: StudioTheme | undefined): void {
+    if (typeof document === "undefined") return;
+
+    document.getElementById(STYLE_ID)?.remove();
+    if (!theme) return;
+
+    const light = buildDeclarations(theme.light);
+    const dark = buildDeclarations(theme.dark);
+    if (!light && !dark) return;
+
+    const rules: string[] = [];
+    if (light) rules.push(`:root { ${light} }`);
+    if (dark) rules.push(`.dark { ${dark} }`);
+
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = rules.join(" ");
+    document.head.appendChild(style);
+}

package/src/lib/components/Studio.svelte

@@ -17,6 +17,7 @@
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
     import { mediaQueries } from "../utils";
+    import { applyStudioTheme } from "../applyStudioTheme";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
     import Collections from "./routes/collections/collections.svelte";
@@ -50,6 +51,7 @@
         document.getElementById("app-loading")?.remove();
         try {
             ctx.meta = await lobb.getMeta();
+            applyStudioTheme(ctx.meta.studio?.theme);
             ctx.extensions = await loadExtensions(lobb, ctx, extensionMap);
             await executeExtensionsOnStartup(lobb, ctx);
             loadExtensionWorkflows(ctx as any);

package/src/lib/components/canAccess.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	// Declarative permission gate. Replaces the recurring pattern of
+	// `let canX = $state(false); onMount(async () => canX = await emitEvent
+	// ("auth.canAccess", { collection, action }) === true);` plus an `{#if canX}`.
+	//
+	// Usage:
+	//   <CanAccess collection="risks" action="update">
+	//     <EditButton ... />
+	//   </CanAccess>
+	//
+	// Optional `fallback` snippet renders when the user is NOT allowed
+	// (defaults to nothing). The brief in-flight window before the answer
+	// is known renders nothing so we don't flash unauthorized content.
+	import type { Snippet } from "svelte";
+	import { onMount } from "svelte";
+	import { getStudioContext } from "../context";
+	import { emitEvent } from "../eventSystem";
+
+	interface Props {
+		collection: string;
+		action: "read" | "create" | "update" | "delete" | string;
+		children: Snippet;
+		fallback?: Snippet;
+	}
+
+	const { collection, action, children, fallback }: Props = $props();
+	const { lobb, ctx } = getStudioContext();
+
+	// null = "haven't checked yet" — distinguished from false so the fallback
+	// doesn't flash during the async resolution.
+	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;
+		}
+	});
+</script>
+
+{#if allowed === true}
+	{@render children()}
+{:else if allowed === false && fallback}
+	{@render fallback()}
+{/if}