@lobb-js/studio 0.29.1 → 0.31.0

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>

package/src/lib/components/dataTable/dataTable.svelte

@@ -122,10 +122,28 @@
 
     let activeTabFilter = $state<any>(undefined);
 
+    // Canonicalize the incoming filter so values like `{ status: "Open" }`
+    // become `{ status: { $eq: "Open" } }`. The Filter UI and the server
+    // both expect operator objects, so doing this once at the boundary
+    // keeps the rest of the data flow uniform.
+    function normalizeFilter(f: Record<string, any> | undefined) {
+        const out: Record<string, any> = {};
+        for (const [key, value] of Object.entries(f ?? {})) {
+            if (key === "$and" || key === "$or") {
+                out[key] = value;
+            } else if (!_.isPlainObject(value)) {
+                out[key] = { $eq: value };
+            } else {
+                out[key] = value;
+            }
+        }
+        return out;
+    }
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: { ...filter, ...activeTabFilter },
+        filter: { ...normalizeFilter(filter), ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
@@ -134,7 +152,7 @@
 
     $effect(() => {
         const tabFilter = activeTabFilter;
-        params.filter = { ...filter, ...tabFilter };
+        params.filter = { ...normalizeFilter(filter), ...tabFilter };
     });
 
     let selectedRecords = $state([]);

package/src/lib/components/dataTable/fieldCell.svelte

@@ -8,6 +8,7 @@
     import { getStudioContext } from "../../context";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import NumberCell from "./numberCell.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -92,6 +93,8 @@
             <div>{date}</div>
         {:else if field.type === "time"}
             <div>{value}</div>
+        {:else if field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float"}
+            <NumberCell {value} groupDigits={field.ui?.groupDigits ?? false} />
         {:else}
             {value}
         {/if}

package/src/lib/components/dataTable/filter.svelte

@@ -33,21 +33,6 @@
     let firstPopover = $state(false);
     let secondPopover = $state(false);
 
-    $effect.pre(() => {
-        // convert direct values to { $eq: (value) }
-        for (let index = 0; index < Object.keys(filter).length; index++) {
-            const key = Object.keys(filter)[index];
-            const value = filter[key];
-            if (key !== "$and" && key !== "$or") {
-                if (!_.isPlainObject(value)) {
-                    filter[key] = {
-                        $eq: value,
-                    };
-                }
-            }
-        }
-    });
-
     function groupAddingHandler(filter: any, key: string) {
         if (key === "$and" || key === "$or") {
             filter[key] = [];

package/src/lib/components/dataTable/numberCell.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	// Matches the input mask in numberInput.svelte: space-grouped thousands,
+	// dot decimal (ISO 31-0). Up to 20 fractional digits so we don't silently
+	// round decimal column values on display.
+	const formatter = new Intl.NumberFormat("en-US", {
+		useGrouping: true,
+		maximumFractionDigits: 20,
+	});
+
+	interface Props {
+		value: any;
+		// When false, render the value plainly with no grouping. Default false
+		// so dropping this in for any number type is safe; opt into grouping
+		// only where it makes sense (quantities/amounts, not identifiers).
+		groupDigits?: boolean;
+	}
+
+	const { value, groupDigits = false }: Props = $props();
+
+	const formatted = $derived.by(() => {
+		if (!groupDigits) return String(value);
+		const n = Number(value);
+		if (!Number.isFinite(n)) return String(value);
+		return formatter.format(n).replaceAll(",", " ");
+	});
+</script>
+
+<div class="tabular-nums">{formatted}</div>

package/src/lib/components/dataTablePopup/dataTablePopup.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { untrack } from "svelte";
+	import { fade, scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import Portal from "svelte-portal";
+	import Button from "../ui/button/button.svelte";
+	import DataTable from "../dataTable/dataTable.svelte";
+	import type { TableProps } from "../dataTable/table.svelte";
+	import type { CollectionTab } from "../../store.types";
+
+	interface Props {
+		collectionName: string;
+		filter?: Record<string, any>;
+		sort?: Record<string, "asc" | "desc">;
+		limit?: number;
+		title?: string;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		tableProps?: Partial<TableProps>;
+		tabs?: CollectionTab[];
+		onClose?: () => void;
+	}
+
+	let {
+		collectionName,
+		filter,
+		sort,
+		limit,
+		title,
+		showHeader = true,
+		showFooter = true,
+		tableProps,
+		tabs,
+		onClose,
+	}: Props = $props();
+
+	// Read once on mount — sort/limit are fixed for the popup's lifetime,
+	// and DataTable only reads searchParams during its initial $state setup
+	// so even live updates wouldn't propagate. untrack makes that intent
+	// explicit and silences Svelte's "captures initial value" warning.
+	const searchParams = untrack(() => {
+		const p: Record<string, any> = {};
+		if (sort) p.sort = sort;
+		if (limit != null) p.limit = String(limit);
+		return p;
+	});
+</script>
+
+<Portal target="body">
+	<button
+		transition:fade={{ duration: 200 }}
+		onclick={() => onClose?.()}
+		class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
+		aria-label="background used to close the popup"
+	></button>
+
+	<div
+		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+	>
+		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
+			<div class="text-sm font-medium">{title ?? collectionName}</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => onClose?.()}
+				class="h-8 w-8 rounded-full text-muted-foreground"
+				Icon={X}
+			/>
+		</div>
+		<div class="min-h-0 flex-1 overflow-auto">
+			<DataTable
+				{collectionName}
+				{filter}
+				{searchParams}
+				{showHeader}
+				{showFooter}
+				{tableProps}
+				{tabs}
+			/>
+		</div>
+	</div>
+</Portal>

package/src/lib/components/detailView/detailView.svelte

@@ -20,8 +20,13 @@
     }: Props = $props();
 
     const { lobb, ctx } = getStudioContext();
+    // Singleton collections only ever have one row, and `id` is auto-
+    // generated for that row — there's no value to showing it in the form.
     const fieldNames = $derived(
-        Object.keys(ctx.meta.collections[collectionName].fields),
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (fieldName) =>
+                !(ctx.meta.collections[collectionName].singleton && fieldName === "id"),
+        ),
     );
 </script>
 

package/src/lib/components/detailView/fieldInput.svelte

@@ -6,6 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
+	import NumberInput from "../ui/input/numberInput.svelte";
 	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
@@ -257,11 +258,12 @@
 					</Select.Item>
 				</Select.Content>
 			</Select.Root>
-		{:else if field.type === "decimal"}
-			<Input
+		{:else if field.type === "decimal" || field.type === "float" || field.type === "integer" || field.type === "long"}
+			{@const isFloat = field.type === "decimal" || field.type === "float"}
+			<NumberInput
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
-				step="any"
+				scale={isFloat ? 20 : 0}
+				groupDigits={ui?.groupDigits ?? false}
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
@@ -271,7 +273,7 @@
 		{:else}
 			<Input
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
+				type="text"
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/extensions/extension.types.ts

@@ -23,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, type OpenDataTableDrawerProps } 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";
@@ -71,6 +71,7 @@ export interface ExtensionUtils {
     toast: typeof toast;
     showDialog: typeof showDialog;
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;

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";
@@ -68,6 +68,7 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
     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/dist/components/breadCrumbs.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import * as Breadcrumb from "./ui/breadcrumb";
-	import { mediaQueries } from "../utils";
-	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
-
-	const isSmall = $derived(!mediaQueries.sm.current);
-	const pathNames = $derived(
-		page.url.pathname
-			.replace("/studio", "")
-			.split("/")
-			.filter((el: any) => el !== "")
-			.slice(0, 3),
-	);
-</script>
-
-{#if isSmall}
-	<div class="text-muted-foreground text-sm">
-		{pathNames[pathNames.length - 1] || "Home"}
-	</div>
-{:else}
-	<Breadcrumb.Root>
-		<Breadcrumb.List class="flex-nowrap">
-			<Breadcrumb.Item>
-				{#if pathNames.length === 0}
-					<Breadcrumb.Page>Home</Breadcrumb.Page>
-				{:else}
-					<Breadcrumb.Link
-						class="cursor-pointer"
-						onclick={() => goto("/studio")}
-					>
-						Home
-					</Breadcrumb.Link>
-					<Breadcrumb.Separator />
-				{/if}
-			</Breadcrumb.Item>
-			{#each pathNames as path, index}
-				{@const isLastElement = pathNames.length - 1 === index}
-				{@const currentFullPaths = pathNames
-					.slice(0, index + 1)
-					.join("/")}
-				<Breadcrumb.Item>
-					{#if isLastElement}
-						<Breadcrumb.Page>{path}</Breadcrumb.Page>
-					{:else}
-						<Breadcrumb.Link
-							class="cursor-pointer"
-							onclick={() =>
-								goto(`/studio/${currentFullPaths}`)}
-						>
-							{path}
-						</Breadcrumb.Link>
-					{/if}
-				</Breadcrumb.Item>
-				{#if !isLastElement}
-					<Breadcrumb.Separator />
-				{/if}
-			{/each}
-		</Breadcrumb.List>
-	</Breadcrumb.Root>
-{/if}

package/dist/components/breadCrumbs.svelte.d.ts

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

package/dist/components/header.svelte

@@ -1,45 +0,0 @@
-<script>
-	import * as Tooltip from "./ui/tooltip";
-	import Button from "./ui/button/button.svelte";
-	import { Menu, Moon, Sun } from "lucide-svelte";
-	import BreadCrumbs from "./breadCrumbs.svelte";
-	import { toggleMode, mode } from "mode-watcher";
-	import { mediaQueries } from "../utils";
-	import { expandMiniSideBar } from "./miniSidebar.svelte";
-
-	let isSmallScreen = $derived(!mediaQueries.sm.current);
-</script>
-
-<div
-	class="flex items-center justify-between border-b border-input bg-background px-3"
->
-	<div class="flex items-center gap-4">
-		{#if isSmallScreen}
-			<Menu
-				class="h-10 text-muted-foreground hover:bg-transparent cursor-pointer hover:text-foreground"
-				style="left: 0.6rem; top: 0rem;"
-				size="18"
-				onclick={() => expandMiniSideBar()}
-			/>
-		{/if}
-		<BreadCrumbs />
-	</div>
-	<div class="flex h-full items-center gap-3">
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<Button
-					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-					variant="ghost"
-					size="icon"
-					onclick={toggleMode}
-					Icon={$mode === "light" ? Moon : Sun}
-				></Button>
-			</Tooltip.Trigger>
-			<Tooltip.Content side="bottom" sideOffset={7.5}
-				>{$mode === "light"
-					? "Night Mode"
-					: "Light Mode"}</Tooltip.Content
-			>
-		</Tooltip.Root>
-	</div>
-</div>

package/dist/components/header.svelte.d.ts

@@ -1,6 +0,0 @@
-export default Header;
-type Header = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
-};
-declare const Header: import("svelte").Component<Record<string, never>, {}, "">;