@lobb-js/studio 0.30.0 → 0.32.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/miniSidebar.svelte

@@ -90,12 +90,15 @@
 	// prefix of everything); other items use startsWith so sub-paths
 	// (e.g. /studio/collections/risks) still highlight their parent.
 	// Popover items with children are active when any of their children match.
-	const currentPath = $derived(page.url.pathname);
+	// SvelteKit's pathname can come back with a trailing slash (`/studio/`)
+	// depending on config, so we normalize it before comparing.
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
 	function isItemActive(item: any): boolean {
 		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
 		if (!item.href) return false;
-		if (item.href === "/studio") return currentPath === "/studio";
-		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+		const itemHref = item.href.replace(/\/$/, "") || "/";
+		if (itemHref === "/studio") return currentPath === "/studio";
+		return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
 	}
 
 	// onMount is enough — Studio gets remounted on login/logout (see

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/routes/extensions/extension.svelte

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="grid overflow-auto bg-background">
+<div class="grid h-full overflow-auto bg-background">
     {#key extension && page}
         <ExtensionsComponents
             name="pages.{page}"

package/dist/components/routes/home.svelte

@@ -3,29 +3,43 @@
     import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="flex flex-col">
-    <div
-        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
-        <div class="flex flex-col items-center justify-center p-4">
-            <div class="text-3xl">Welcome to Lobb!</div>
-            <div class="text-xs text-center">
-                Your journey starts here. Explore and make the most of your
-                experience.
+<!--
+    Any extension that registers a `pages.home` component takes over /studio
+    (e.g. an app-specific overview dashboard). ExtensionsComponents falls
+    back to rendering its children when nothing matches, so the default
+    Lobb welcome below stays as the safety net for projects without an
+    overriding extension.
+-->
+<ExtensionsComponents name="pages.home" utils={getExtensionUtils(lobb, ctx)}>
+    <div class="flex h-full flex-col">
+        <div
+            class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+        >
+            <div class="flex flex-col items-center justify-center p-4">
+                <div class="text-3xl">Welcome to Lobb!</div>
+                <div class="text-xs text-center">
+                    Your journey starts here. Explore and make the most of your
+                    experience.
+                </div>
+            </div>
+            <div class="flex flex-col items-center justify-center">
+                <Button
+                    Icon={ArrowRight}
+                    variant="outline"
+                    class="h-7 px-3 text-xs font-normal"
+                    onclick={() => goto("/studio/collections")}
+                >
+                    Go to collections
+                </Button>
             </div>
         </div>
-        <div class="flex flex-col items-center justify-center">
-            <Button
-                Icon={ArrowRight}
-                variant="outline"
-                class="h-7 px-3 text-xs font-normal"
-                onclick={() => goto("/studio/collections")}
-            >
-                Go to collections
-            </Button>
-        </div>
+        <HomeFooter />
     </div>
-    <HomeFooter />
-</div>
+</ExtensionsComponents>

package/dist/components/ui/input/numberInput.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import IMask from "imask";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	// Locale-neutral grouping: space for thousands, dot for decimals
+	// (ISO 31-0). Norwegian, French, scientific contexts — same shape, and
+	// space can't be confused with comma-as-decimal vs comma-as-thousands.
+	const THOUSANDS = " ";
+	const RADIX = ".";
+
+	type Props = Omit<HTMLInputAttributes, "type" | "value" | "step"> & {
+		value?: number | string | null;
+		// 0 = integer-only, > 0 = allow that many decimal places.
+		scale?: number;
+		// When false, render a plain browser number input — no masking, no
+		// formatting. Default false so the component is safe to drop in
+		// anywhere; opt into grouping only where it makes sense.
+		groupDigits?: boolean;
+	};
+
+	let {
+		value = $bindable<number | string | null | undefined>(),
+		scale = 0,
+		groupDigits = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let inputEl: HTMLInputElement | undefined = $state();
+	let mask: ReturnType<typeof IMask> | null = null;
+	// Re-entrance guard: imask's `accept` event fires when we programmatically
+	// set unmaskedValue, which would create a sync→reflect loop with the
+	// "external value changed" effect below.
+	let applyingExternal = false;
+
+	$effect(() => {
+		if (!groupDigits) return;
+		if (!inputEl) return;
+		mask = IMask(inputEl, {
+			mask: Number,
+			thousandsSeparator: THOUSANDS,
+			radix: RADIX,
+			scale,
+			signed: true,
+			padFractionalZeros: false,
+			normalizeZeros: true,
+			// Allow the user to type either radix; imask remaps to the chosen
+			// one and ignores stray locale separators on input.
+			mapToRadix: [",", "."],
+		});
+
+		mask.on("accept", () => {
+			if (applyingExternal) return;
+			const unmasked = mask!.unmaskedValue;
+			value = unmasked === "" ? null : Number(unmasked);
+		});
+
+		applyingExternal = true;
+		mask.unmaskedValue = value == null ? "" : String(value);
+		applyingExternal = false;
+
+		return () => {
+			mask?.destroy();
+			mask = null;
+		};
+	});
+
+	// Sync external value changes back into the mask (e.g. form reset, parent
+	// clearing the value). No-op when grouping is off.
+	$effect(() => {
+		const v = value;
+		if (!mask) return;
+		const next = v == null ? "" : String(v);
+		if (mask.unmaskedValue === next) return;
+		applyingExternal = true;
+		mask.unmaskedValue = next;
+		applyingExternal = false;
+	});
+</script>
+
+{#if groupDigits}
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode={scale > 0 ? "decimal" : "numeric"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		{...rest}
+	/>
+{:else}
+	<input
+		type="number"
+		step={scale > 0 ? "any" : "1"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		bind:value
+		{...rest}
+	/>
+{/if}

package/dist/components/ui/input/numberInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type Props = Omit<HTMLInputAttributes, "type" | "value" | "step"> & {
+    value?: number | string | null;
+    scale?: number;
+    groupDigits?: boolean;
+};
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.32.1",
+    "@lobb-js/core": "^0.33.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",
@@ -101,6 +101,7 @@
     "codemirror": "^6.0.2",
     "fflate": "^0.8.2",
     "fuse.js": "^7.3.0",
+    "imask": "^7.6.1",
     "javascript-time-ago": "^2.6.4",
     "json-stable-stringify": "^1.3.0",
     "lucide-svelte": "^0.488.0",

package/src/lib/actions.ts

@@ -24,6 +24,8 @@ export interface OpenDataTableDrawerProps {
 export interface OpenDataTablePopupProps {
     collectionName: string;
     filter?: Record<string, any>;
+    sort?: Record<string, "asc" | "desc">;
+    limit?: number;
     title?: string;
     showHeader?: boolean;
     showFooter?: boolean;

package/src/lib/components/Studio.svelte

@@ -4,7 +4,6 @@
     import { ModeWatcher } from "mode-watcher";
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
-    import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
     import MiniSidebar from "./miniSidebar.svelte";
     import * as Tooltip from "./ui/tooltip";
@@ -107,8 +106,7 @@
             style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
         >
             <MiniSidebar />
-            <div class="second_grid">
-                <Header />
+            <div class="min-h-0 h-screen overflow-hidden">
                 {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
                     <Home />
                 {:else if page.url.pathname.startsWith("/studio/collections")}
@@ -131,10 +129,3 @@
         </main>
     </Tooltip.Provider>
 {/if}
-
-<style>
-    .second_grid {
-        display: grid;
-        grid-template-rows: 2.5rem 1fr;
-    }
-</style>