@lobb-js/studio 0.30.0 → 0.32.0

package/dist/actions.d.ts

@@ -14,6 +14,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/dist/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/dist/components/dataTable/dataTable.svelte

@@ -21,11 +21,11 @@
     import { showDialog } from "../../actions";
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import type { Snippet } from "svelte";
-    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { ChildrenChanges } from "../detailView/utils";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
     import { emitEvent } from "../../eventSystem";
-    import { onMount } from "svelte";
+    import { onMount, untrack } from "svelte";
     import Tabs from "./dataTableTabs.svelte";
     import { fade } from "svelte/transition";
     import type { CollectionTab } from "../../store.types";
@@ -37,11 +37,14 @@
         filter?: any;
         searchParams?: Record<string, any>;
         parentContext?: ParentContext;
+        onChanges?: (changes: ChildrenChanges) => void;
         changes?: ChildrenChanges;
         showHeader?: boolean;
         showFooter?: boolean;
         showImport?: boolean;
         showDelete?: boolean;
+        showEdit?: boolean;
+        onDataLoad?: (total: number) => void;
         tableProps?: Partial<TableProps>;
         tabs?: CollectionTab[];
         headerLeft?: Snippet<[]>;
@@ -52,16 +55,24 @@
         filter,
         searchParams,
         parentContext,
-        changes = $bindable<ChildrenChanges | undefined>(undefined),
+        onChanges,
+        changes,
         showHeader = true,
         showFooter = true,
         showImport = true,
         showDelete = false,
+        showEdit = true,
+        onDataLoad,
         tableProps,
         tabs,
         headerLeft,
     }: Props = $props();
 
+    const isRecordingMode = onChanges !== undefined;
+    let localChanges = $state<ChildrenChanges>(
+        untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
+    );
+
     // Gate row/header buttons by the current user's permissions:
     // - showUpdate → per-row edit button
     // - showCreate → header's Create + Import buttons (passed to Header)
@@ -76,40 +87,29 @@
         showCreate = create === true;
     });
 
-    function getOrCreateUpdatedSlot(recordId: string): Changes | undefined {
-        if (!changes) return undefined;
-        let slot = changes.updated.find((u) => String(u.id) === String(recordId));
-        if (!slot) {
-            slot = { id: recordId, data: {}, children: {} };
-            changes.updated.push(slot);
-        }
-        return slot;
-    }
-
-    // Derives the displayed rows by applying changes on top of server data.
-    // This is the single place responsible for optimistic UI — no handler touches data directly.
+    // Derives the displayed rows by applying localChanges on top of server data.
     const data = $derived.by(() => {
-        if (!changes) return serverData;
+        if (!isRecordingMode) return serverData;
 
         const removedIds = new Set([
-            ...changes.deleted.map((r) => String(r.id)),
-            ...changes.unlinked.map((r) => String(r.id)),
+            ...localChanges.deleted.map((r: any) => String(r.id)),
+            ...localChanges.unlinked.map((r: any) => String(r.id)),
         ]);
 
         let result = serverData.filter((r: any) => !removedIds.has(String(r.id)));
 
         result = result.map((r: any) => {
-            const update = changes.updated.find((u) => String(u.id) === String(r.id));
-            return update && Object.keys(update.data).length ? { ...r, ...update.data } : r;
+            const update = localChanges.updated.find((u) => String(u.id) === String(r.id));
+            return update && Object.keys(update.changes.data).length ? { ...r, ...update.changes.data } : r;
         });
 
-        for (const record of changes.linked) {
+        for (const record of localChanges.linked) {
             if (!result.some((r: any) => String(r.id) === String(record.id))) {
                 result = [...result, record];
             }
         }
 
-        for (const item of changes.created) {
+        for (const item of localChanges.created) {
             result = [...result, { ...item.data, _pending: true }];
         }
 
@@ -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([]);
@@ -171,18 +189,26 @@
         const res = await response.json();
         serverData = res.data;
         totalCount = res.meta.totalCount;
+        onDataLoad?.(totalCount);
         loading = false;
     }
 
     async function handleDelete(entryId: string) {
         const result = await showDialog("Are you sure?", "This will permanently delete the record.");
         if (!result) return;
-        if (changes) {
-            const record = data.find((r: any) => String(r.id) === String(entryId));
-            if (record) changes.deleted.push($state.snapshot(record));
+        if (isRecordingMode) {
+            // If the record was locally linked (not yet in DB), just cancel the link instead of marking for deletion.
+            const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
+            if (linkedIdx !== -1) {
+                localChanges.linked.splice(linkedIdx, 1);
+            } else {
+                const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                if (record) localChanges.deleted.push($state.snapshot(record));
+            }
+            onChanges?.($state.snapshot(localChanges));
         } else if (parentContext) {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
-            await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { delete: [entryId] } });
+            await lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), { data: {}, children: { [collectionName]: { delete: [entryId] } } });
             params = { ...params };
         } else {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
@@ -194,16 +220,55 @@
     async function handleUnlink(entryId: string) {
         const result = await showDialog("Are you sure?", "This will unlink the record without deleting it.");
         if (!result) return;
-        if (changes) {
-            const record = data.find((r: any) => String(r.id) === String(entryId));
-            if (record) changes.unlinked.push($state.snapshot(record));
+        if (isRecordingMode) {
+            // If the record was locally linked this session, just cancel the link — net effect is no change.
+            const linkedIdx = localChanges.linked.findIndex((r: any) => String(r.id) === String(entryId));
+            if (linkedIdx !== -1) {
+                localChanges.linked.splice(linkedIdx, 1);
+            } else {
+                const record = serverData.find((r: any) => String(r.id) === String(entryId));
+                if (record) localChanges.unlinked.push($state.snapshot(record));
+            }
+            onChanges?.($state.snapshot(localChanges));
         } else {
             serverData = serverData.filter((r: any) => String(r.id) !== String(entryId));
-            await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), {}, { [collectionName]: { unlink: [entryId] } });
+            await lobb.updateOne(parentContext!.collectionName, String(parentContext!.recordId), { data: {}, children: { [collectionName]: { unlink: [entryId] } } });
             params = { ...params };
         }
     }
 
+    function handleLink(record: any) {
+        // If the record was locally unlinked this session, just cancel the unlink — net effect is no change.
+        const unlinkedIdx = localChanges.unlinked.findIndex((r: any) => String(r.id) === String(record.id));
+        if (unlinkedIdx !== -1) {
+            localChanges.unlinked.splice(unlinkedIdx, 1);
+        } else if (!localChanges.linked.some((r: any) => String(r.id) === String(record.id))) {
+            localChanges.linked.push(record);
+        }
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    $effect(() => {
+        if (isRecordingMode) {
+            console.log(`[DataTable:${collectionName}] localChanges:`, $state.snapshot(localChanges));
+        }
+    });
+
+    function handleCreate(changes: import("../detailView/utils").Changes) {
+        localChanges.created.push({ data: changes.data });
+        onChanges?.($state.snapshot(localChanges));
+    }
+
+    function handleUpdate(id: string, editChanges: import("../detailView/utils").Changes) {
+        const existing = localChanges.updated.find((u) => String(u.id) === id);
+        if (existing) {
+            existing.changes = editChanges;
+        } else {
+            localChanges.updated.push({ id, changes: editChanges });
+        }
+        onChanges?.($state.snapshot(localChanges));
+    }
+
 </script>
 
 <div
@@ -228,7 +293,8 @@
             {showImport}
             {showCreate}
             {parentContext}
-            {changes}
+            onLink={isRecordingMode ? handleLink : undefined}
+            onCreate={isRecordingMode ? handleCreate : undefined}
         >
             {#snippet left()}
                 {@render headerLeft?.()}
@@ -259,17 +325,16 @@
                         {...tableProps}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                         {#snippet tools(entry)}
-                            {#if showUpdate}
+                            {#if showUpdate && showEdit}
                                 <UpdateDetailViewButton
                                     {collectionName}
                                     recordId={entry.id}
                                     variant="ghost"
                                     class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
                                     Icon={Pencil}
-                                    changes={getOrCreateUpdatedSlot(String(entry.id))}
-                                    onSuccessfullSave={async () => {
-                                        params = { ...params };
-                                    }}
+                                    changes={isRecordingMode ? localChanges.updated.find((u) => String(u.id) === String(entry.id))?.changes : undefined}
+                                    onChanges={isRecordingMode ? (c) => handleUpdate(String(entry.id), c) : undefined}
+                                    onSuccessfullSave={!isRecordingMode ? async () => { params = { ...params }; } : undefined}
                                 ></UpdateDetailViewButton>
                             {/if}
                             {#if parentContext}
@@ -299,7 +364,7 @@
                                 fieldName={column.id}
                                 {value}
                                 {entry}
-                                tableParams={params}
+                                refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
                         {#snippet collapsible(entry)}

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

@@ -11,15 +11,18 @@ interface Props {
     filter?: any;
     searchParams?: Record<string, any>;
     parentContext?: ParentContext;
+    onChanges?: (changes: ChildrenChanges) => void;
     changes?: ChildrenChanges;
     showHeader?: boolean;
     showFooter?: boolean;
     showImport?: boolean;
     showDelete?: boolean;
+    showEdit?: boolean;
+    onDataLoad?: (total: number) => void;
     tableProps?: Partial<TableProps>;
     tabs?: CollectionTab[];
     headerLeft?: Snippet<[]>;
 }
-declare const DataTable: import("svelte").Component<Props, {}, "changes">;
+declare const DataTable: import("svelte").Component<Props, {}, "">;
 type DataTable = ReturnType<typeof DataTable>;
 export default DataTable;

package/dist/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();
 
@@ -16,7 +17,7 @@
         fieldName: string;
         value: any;
         entry: Record<string, any>;
-        tableParams?: any;
+        refresh?: () => void;
     }
 
     let {
@@ -24,7 +25,7 @@
         fieldName,
         value,
         entry,
-        tableParams = $bindable(),
+        refresh,
     }: Props = $props();
 
     const field = getField(ctx, fieldName, collectionName);
@@ -48,7 +49,7 @@
                 collectionField={polymorphicRelation.from.collection_field}
                 idField={polymorphicRelation.from.id_field}
                 {entry}
-                bind:tableParams
+                {refresh}
             />
         {:else if isRefrenceField}
             {#if value?.id && value.id !== 0}
@@ -66,7 +67,7 @@
                         class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
                         Icon={ExternalLink}
                         onSuccessfullSave={async () => {
-                            tableParams = { ...tableParams };
+                            refresh?.();
                         }}
                     />
                 </div>
@@ -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/dist/components/dataTable/fieldCell.svelte.d.ts

@@ -3,8 +3,8 @@ interface Props {
     fieldName: string;
     value: any;
     entry: Record<string, any>;
-    tableParams?: any;
+    refresh?: () => void;
 }
-declare const FieldCell: import("svelte").Component<Props, {}, "tableParams">;
+declare const FieldCell: import("svelte").Component<Props, {}, "">;
 type FieldCell = ReturnType<typeof FieldCell>;
 export default FieldCell;

package/dist/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/dist/components/dataTable/header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import type { Changes, ChildrenChanges } from "../detailView/utils";
+    import type { Changes } from "../detailView/utils";
     import type { ParentContext } from "./dataTable.svelte";
     import { Download, ListRestart, Plus, Trash, Link } from "lucide-svelte";
     import * as Tooltip from "../ui/tooltip";
@@ -23,7 +23,8 @@
         params: any;
         selectedRecords: string[];
         parentContext?: ParentContext;
-        changes?: ChildrenChanges;
+        onLink?: (record: any) => void;
+        onCreate?: (changes: Changes) => void;
         showImport?: boolean;
         showCreate?: boolean;
         left?: Snippet<[]>;
@@ -34,27 +35,25 @@
         params = $bindable(),
         selectedRecords = $bindable(),
         parentContext,
-        changes,
+        onLink,
+        onCreate,
         showImport = true,
         showCreate = false,
         left
     }: Props = $props();
 
-    // Local changes object for the create form (recording mode only)
-    let createChanges = $state<Changes>({ data: {}, children: {} });
-
     function handleLink(record: any) {
-        if (changes) {
-            changes.linked.push(record);
+        if (onLink) {
+            onLink(record);
         } else if (parentContext) {
-            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), {}, { [collectionName]: { link: [record.id] } });
+            lobb.updateOne(parentContext.collectionName, String(parentContext.recordId), { data: {}, children: { [collectionName]: { link: [record.id] } } });
             resetTable();
         }
     }
 
-    async function handleCreateSuccess(snap: any) {
-        if (changes) {
-            changes.created.push({ data: snap.data });
+    async function handleCreate(snap: any) {
+        if (onCreate) {
+            onCreate(snap);
         } else {
             resetTable();
         }
@@ -208,8 +207,8 @@
                 variant="default"
                 class="h-7 px-3 text-xs font-normal"
                 Icon={Plus}
-                changes={changes ? createChanges : undefined}
-                onSuccessfullSave={handleCreateSuccess}
+                onChanges={onCreate ? handleCreate : undefined}
+                onSuccessfullSave={onCreate ? undefined : handleCreate}
             >
                 {headerIsSmall ? "" : "Create"}
             </CreateDetailViewButton>

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

@@ -1,4 +1,4 @@
-import type { ChildrenChanges } from "../detailView/utils";
+import type { Changes } from "../detailView/utils";
 import type { ParentContext } from "./dataTable.svelte";
 import type { Snippet } from "svelte";
 interface Props {
@@ -6,7 +6,8 @@ interface Props {
     params: any;
     selectedRecords: string[];
     parentContext?: ParentContext;
-    changes?: ChildrenChanges;
+    onLink?: (record: any) => void;
+    onCreate?: (changes: Changes) => void;
     showImport?: boolean;
     showCreate?: boolean;
     left?: Snippet<[]>;

package/dist/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/dist/components/dataTable/numberCell.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: any;
+    groupDigits?: boolean;
+}
+declare const NumberCell: import("svelte").Component<Props, {}, "">;
+type NumberCell = ReturnType<typeof NumberCell>;
+export default NumberCell;

package/dist/components/dataTable/polymorphicFieldCell.svelte

@@ -6,14 +6,14 @@
         collectionField: string;
         idField: string;
         entry: Record<string, any>;
-        tableParams?: any;
+        refresh?: () => void;
     }
 
     let {
         collectionField,
         idField,
         entry,
-        tableParams = $bindable(),
+        refresh,
     }: Props = $props();
 
     const targetCollection = $derived(entry[collectionField] ?? null);
@@ -34,7 +34,7 @@
             class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
             Icon={ExternalLink}
             onSuccessfullSave={async () => {
-                tableParams = { ...tableParams };
+                refresh?.();
             }}
         />
     </div>

package/dist/components/dataTable/polymorphicFieldCell.svelte.d.ts

@@ -2,8 +2,8 @@ interface Props {
     collectionField: string;
     idField: string;
     entry: Record<string, any>;
-    tableParams?: any;
+    refresh?: () => void;
 }
-declare const PolymorphicFieldCell: import("svelte").Component<Props, {}, "tableParams">;
+declare const PolymorphicFieldCell: import("svelte").Component<Props, {}, "">;
 type PolymorphicFieldCell = ReturnType<typeof PolymorphicFieldCell>;
 export default PolymorphicFieldCell;

package/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -1,5 +1,6 @@
 <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";
@@ -11,6 +12,8 @@
 	interface Props {
 		collectionName: string;
 		filter?: Record<string, any>;
+		sort?: Record<string, "asc" | "desc">;
+		limit?: number;
 		title?: string;
 		showHeader?: boolean;
 		showFooter?: boolean;
@@ -22,6 +25,8 @@
 	let {
 		collectionName,
 		filter,
+		sort,
+		limit,
 		title,
 		showHeader = true,
 		showFooter = true,
@@ -29,6 +34,17 @@
 		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">
@@ -57,6 +73,7 @@
 			<DataTable
 				{collectionName}
 				{filter}
+				{searchParams}
 				{showHeader}
 				{showFooter}
 				{tableProps}

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

@@ -3,6 +3,8 @@ 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;