@lobb-js/studio 0.42.0 → 0.43.0

package/dist/components/detailView/fieldInput.svelte

@@ -24,6 +24,7 @@
 		value: any;
 		errorMessages?: string[];
 		entry?: Record<string, any>;
+		changed?: boolean;
 	}
 
 	let {
@@ -32,6 +33,7 @@
 		value = $bindable(),
 		errorMessages = [],
 		entry = $bindable(),
+		changed = false,
 	}: Props = $props();
 
 	const ui_input =
@@ -44,6 +46,7 @@
 	const isDisabled = field.key === 'id' || Boolean(ui?.disabled)
 	const disabledClasses = "pointer-events-none opacity-50";
 	const destructive: boolean = $derived(!isDisabled && Boolean(errorMessages.length));
+	const changedClass = $derived(changed && !destructive ? '!bg-orange-500/5' : '');
 
 </script>
 
@@ -72,6 +75,7 @@
 			<PolymorphicInput
 				collectionField={polymorphicRelation.from.collection_field}
 				idField={polymorphicRelation.from.id_field}
+				virtualField={polymorphicRelation.from.virtual_field ?? ''}
 				targetCollections={polymorphicRelation.to}
 				bind:entry
 				{destructive}
@@ -87,7 +91,7 @@
 		{:else if field.label === "id"}
 			<Input
 				placeholder="AUTO GENERATED"
-				class="bg-muted text-xs"
+				class="bg-muted text-xs {changedClass}"
 				bind:value
 			/>
 		{:else if fieldRelationTarget && entry}
@@ -126,10 +130,7 @@
 				}
 			>
 				<Select.Trigger
-					class="
-						h-9 w-full bg-muted pr-8
-						{destructive ? 'border-destructive bg-destructive/10' : ''}
-					"
+					class="h-9 w-full bg-muted pr-8 {changedClass} {destructive ? 'border-destructive !bg-destructive/10' : ''}"
 				>
 					{#if value != null && enumOptions}
 						<EnumBadge value={String(value)} enum={enumOptions} />
@@ -159,7 +160,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted text-xs
+					bg-muted text-xs {changedClass}
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -169,7 +170,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : value === "" ? "EMPTY STRING" : "NULL"}
 				rows={5}
 				class="
-					bg-muted text-xs
+					bg-muted text-xs {changedClass}
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -265,7 +266,7 @@
 				scale={isFloat ? 20 : 0}
 				groupDigits={ui?.groupDigits ?? false}
 				class="
-					bg-muted text-xs
+					bg-muted text-xs {changedClass}
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value
@@ -275,7 +276,7 @@
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
 				type="text"
 				class="
-					bg-muted text-xs
+					bg-muted text-xs {changedClass}
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
 				"
 				bind:value

package/dist/components/detailView/fieldInput.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props {
     value: any;
     errorMessages?: string[];
     entry?: Record<string, any>;
+    changed?: boolean;
 }
 declare const FieldInput: import("svelte").Component<Props, {}, "value" | "entry">;
 type FieldInput = ReturnType<typeof FieldInput>;

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

@@ -29,6 +29,7 @@
     import { untrack } from "svelte";
     import { showDialog } from "../../../actions";
 
+
     const { lobb, ctx } = getStudioContext();
     import { getChangedProperties } from "../../../utils";
     import UpdateDetailViewChildren from "./updateDetailViewChildren.svelte";
@@ -81,22 +82,15 @@
     const hasChildChanges = $derived(
         Object.values(localChanges.children).some((ch: ChildrenChanges) =>
             ch.created.length || ch.updated.length || ch.deleted.length || ch.linked.length || ch.unlinked.length
+        ) ||
+        Object.values(localChanges.data).some((val: any) =>
+            val && typeof val === 'object' && !Array.isArray(val) && (val.create || val.update || val.delete)
         )
     );
 
-    const changeSummaryLines = $derived.by(() => {
-        const lines: string[] = [];
-        const fieldCount = Object.keys(localChanges.data).length;
-        if (fieldCount > 0) lines.push(`${fieldCount} field${fieldCount > 1 ? 's' : ''} changed`);
-        for (const [col, ch] of Object.entries(localChanges.children) as [string, ChildrenChanges][]) {
-            if (ch.created.length) lines.push(`${ch.created.length} created in ${col}`);
-            if (ch.linked.length) lines.push(`${ch.linked.length} linked in ${col}`);
-            if (ch.updated.length) lines.push(`${ch.updated.length} edited in ${col}`);
-            if (ch.deleted.length) lines.push(`${ch.deleted.length} deleted from ${col}`);
-            if (ch.unlinked.length) lines.push(`${ch.unlinked.length} unlinked from ${col}`);
-        }
-        return lines;
-    });
+    import { buildChangeTree, renderTree } from "../changeTreeUtils";
+
+    const changeSummaryLines = $derived(renderTree(buildChangeTree(localChanges)));
 
     $effect(() => {
         const currentEntrySnap = $state.snapshot(values);
@@ -106,8 +100,18 @@
         });
     });
 
+    function cleanFkField(val: any): any {
+        if (!val || typeof val !== 'object' || Array.isArray(val)) return val;
+        // strip internal id from pending edit (server reads from DB)
+        if (val.id && val.update) return { ...(val.collection ? { collection: val.collection } : {}), update: val.update };
+        // { delete: true } — pass through as-is (no id needed)
+        return val;
+    }
+
     function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
-        const { id: _id, ...data } = changes.data;
+        const { id: _id, ...rawData } = changes.data;
+        const data: Record<string, any> = {};
+        for (const [key, val] of Object.entries(rawData)) data[key] = cleanFkField(val);
         const children = buildChildren(changes.children);
         return { data, ...(children ? { children } : {}) };
     }
@@ -140,7 +144,7 @@
         if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
             const confirmed = await showDialog(
                 "Confirm changes",
-                changeSummaryLines.map(l => `• ${l}`).join('\n')
+                changeSummaryLines.join('\n')
             );
             if (!confirmed) return;
         }
@@ -151,7 +155,7 @@
         if (response.status === 204) {
             onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
-            toast.success(`The record was successfully updated`);
+            if (!isRecordingMode) toast.success(`The record was successfully updated`);
             onCancel?.();
             return;
         }
@@ -171,7 +175,7 @@
 
         onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
-        toast.success(`The record was successfully updated`);
+        if (!isRecordingMode) toast.success(`The record was successfully updated`);
         onCancel?.();
     }
 </script>
@@ -196,7 +200,7 @@
         </div>
     </div>
     <div class="flex-1 overflow-y-auto">
-        <DetailView {collectionName} bind:entry={values} {fieldsErrors} />
+        <DetailView {collectionName} bind:entry={values} {fieldsErrors} changedFields={Object.keys(localChanges.data)} />
         {#if showRelatedRecords}
             <UpdateDetailViewChildren {collectionName} entry={values} changes={localChanges} onChanges={(children) => { localChanges.children = children; }} />
         {/if}

package/dist/components/drawer.svelte

@@ -4,6 +4,7 @@
     import { fade } from "svelte/transition";
     import { cubicOut } from "svelte/easing";
     import Portal from "svelte-portal";
+    import { getContext, setContext, onDestroy } from "svelte";
 
     interface Props {
         children?: Snippet<[]>;
@@ -13,6 +14,16 @@
 
     let { onHide, children, position = "side" }: Props = $props();
 
+    // Track nesting depth for stacking effect
+    const DEPTH_KEY = 'drawer-depth';
+    const parentDepth: number = getContext(DEPTH_KEY) ?? 0;
+    const depth = parentDepth + 1;
+    setContext(DEPTH_KEY, depth);
+
+    // Side drawers get narrower, bottom drawers get shorter — both offset by 48px per level
+    const sideWidth = $derived(calculateDrawerWidth() - (depth - 1) * 48);
+    const bottomOffset = $derived((depth - 1) * 48);
+
     function slide(_node: Element, { duration = 250, axis }: { duration?: number; axis: "x" | "y" }) {
         return {
             duration,
@@ -39,9 +50,11 @@
         role="dialog"
         transition:slide={{ axis: position === "bottom" ? "y" : "x" }}
         class={position === "bottom"
-            ? "fixed bottom-0 left-0 z-40 flex h-[60vh] w-full flex-col border-t bg-card"
+            ? "fixed bottom-0 left-0 z-40 flex w-full flex-col border-t bg-card"
             : "fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-card"}
-        style={position === "side" ? `max-width: ${calculateDrawerWidth()}px;` : ""}
+        style={position === "side"
+            ? `max-width: ${sideWidth}px;`
+            : `height: calc(60vh - ${bottomOffset}px);`}
     >
         {@render children?.()}
     </div>

package/dist/components/foreingKeyInput.svelte

@@ -2,11 +2,11 @@
     import { onMount } from "svelte";
     import Input from "./ui/input/input.svelte";
     import SelectRecord from "./selectRecord.svelte";
-    import UpdateDetailViewButton from "./detailView/update/updateDetailViewButton.svelte";
     import CreateDetailView from "./detailView/create/createDetailView.svelte";
+    import UpdateDetailView from "./detailView/update/updateDetailView.svelte";
     import { getCollectionPrimaryField } from "./dataTable/utils";
     import { getStudioContext } from "../context";
-    import { ExternalLink, Plus } from "lucide-svelte";
+    import { Plus, Link, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
     import Button from "./ui/button/button.svelte";
 
     const { lobb, ctx } = getStudioContext();
@@ -15,7 +15,7 @@
         parentCollectionName: string;
         collectionName: string;
         fieldName: string;
-        value?: number | null;
+        value?: any;
         destructive?: boolean;
         entry: Record<string, any>;
     }
@@ -29,96 +29,180 @@
         entry,
     }: LocalProps = $props();
 
-    let displayName = $state<string | null>(null);
     let createDrawerOpen = $state(false);
+    let editDrawerOpen = $state(false);
+    let editValues: Record<string, any> | undefined = $state(undefined);
+    let originalId = $state<number | null>(null);
+    let initialValue = $state<any>(undefined);
+    let unlinked = $state(false);
 
-    onMount(async () => {
-        if (value == null) return;
-        try {
-            const res = await lobb.findOne(collectionName, value);
-            const record = (await res.json()).data;
-            const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
-            displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
-        } catch {
-            displayName = null;
+    onMount(() => { initialValue = value; });
+
+    // Derived state from value
+    const isPendingCreate = $derived(value && typeof value === 'object' && value.create);
+    const isPendingEdit   = $derived(value && typeof value === 'object' && value.id && value.update);
+    const isStagedDelete  = $derived(value && typeof value === 'object' && value.delete === true);
+    const isStagedUnlink  = $derived(unlinked);
+    const hasRealId       = $derived(value != null && typeof value === 'number');
+    const isNewLink       = $derived(hasRealId && initialValue !== undefined && initialValue == null && value !== initialValue);
+    const isReplaced      = $derived(hasRealId && initialValue !== undefined && initialValue != null && value !== initialValue);
+    const isEmpty         = $derived((value == null || value === 0) && !unlinked);
+    const isZeroPlaceholder = $derived(value === 0);
+
+    const bgClass = $derived(
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40'   :
+        isNewLink       ? '!bg-blue-500/5 border-blue-500/40'     :
+        isReplaced      ? '!bg-orange-500/5 border-orange-500/40' :
+        isPendingEdit   ? '!bg-orange-500/5 border-orange-500/40' :
+        isStagedUnlink  ? '!bg-slate-500/5 border-slate-500/40'   :
+        isStagedDelete  ? '!bg-red-500/5 border-red-500/40'       :
+        ''
+    );
+
+    const displayId = $derived(
+        isPendingEdit  ? (value as any).id :
+        isStagedUnlink ? originalId        :
+        isStagedDelete ? originalId        :
+        hasRealId      ? value             :
+        null
+    );
+
+    async function handleCreated(record: any) {
+        // dry-run result has no id — store as pending create
+        if (!record.id) {
+            value = { create: record };
+        } else {
+            value = record.id;
         }
-    });
+    }
 
-    $effect(() => {
-        if (value == null) displayName = null;
-    });
+    async function openEdit() {
+        const res = await lobb.findAll(collectionName, { filter: { id: value }, limit: 1 });
+        const result = await res.json();
+        editValues = result.data[0];
+        editDrawerOpen = true;
+    }
+
+    function handleEditChanges(changes: import('./detailView/utils').Changes) {
+        if (Object.keys(changes.data).length === 0) {
+            value = (editValues as any)?.id ?? value;
+        } else {
+            value = { id: (editValues as any)?.id ?? value, update: changes.data };
+        }
+    }
 
     function handleSelect(selectedEntry: any) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
         value = selectedEntry.id;
-        displayName = primaryFieldName ? String(selectedEntry[primaryFieldName]) : null;
     }
 
-    async function handleCreated(record: any) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, collectionName);
-        value = record.id;
-        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+    function handleUnlink() {
+        if (hasRealId) {
+            originalId = value as number;
+            unlinked = true;
+            value = null;
+        }
+    }
+
+    async function handleDelete() {
+        if (hasRealId) {
+            originalId = value as number;
+            value = { delete: true };
+        }
     }
 
-    const idIsZero = $derived(value === 0);
+    function handleRevert() {
+        if (originalId != null) {
+            value = originalId;
+            originalId = null;
+        } else {
+            value = null;
+        }
+        unlinked = false;
+    }
 </script>
 
-{#if !idIsZero}
+{#if !isZeroPlaceholder}
     <div class="relative">
-        <div class="flex gap-2 absolute right-0 top-0 mr-9 h-full items-center text-xs">
-            {#if value != null}
-                <UpdateDetailViewButton
-                    collectionName={collectionName}
-                    recordId={value}
+        <!-- Action buttons overlay on the right -->
+        <div class="flex gap-1 absolute right-0 top-0 mr-9 h-full items-center text-xs">
+            {#if isStagedUnlink || isStagedDelete || isPendingCreate || isPendingEdit}
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
                     variant="ghost"
-                    class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent"
-                    Icon={ExternalLink}
-                ></UpdateDetailViewButton>
-            {/if}
-            {#if displayName}
-                <div class="flex items-center bg-background rounded-full border h-6 px-3 shadow-sm">
-                    {displayName}
-                </div>
+                    Icon={RotateCcw}
+                    onclick={handleRevert}
+                    title="Revert"
+                ></Button>
+            {:else if hasRealId}
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Trash}
+                    onclick={handleDelete}
+                    title="Delete record"
+                ></Button>
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Unlink}
+                    onclick={handleUnlink}
+                    title="Unlink"
+                ></Button>
+                <Button
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    Icon={Pencil}
+                    onclick={openEdit}
+                    title="Edit record"
+                ></Button>
+                <SelectRecord
+                    class="h-5 w-5 px-0 py-0 hover:bg-transparent text-muted-foreground"
+                    variant="ghost"
+                    {collectionName}
+                    onSelect={handleSelect}
+                    additionalFilter={{ id: { $ne: value } }}
+                    title="Replace"
+                    {entry}
+                >
+                    {#snippet children()}<RefreshCw size="13" />{/snippet}
+                </SelectRecord>
+            {:else if isEmpty}
+                <Button
+                    class="h-6 px-2 font-normal text-xs"
+                    variant="outline"
+                    Icon={Plus}
+                    onclick={() => (createDrawerOpen = true)}
+                >
+                    Create
+                </Button>
+                <SelectRecord
+                    class="h-6 px-2 font-normal text-xs"
+                    variant="outline"
+                    {parentCollectionName}
+                    {collectionName}
+                    {fieldName}
+                    onSelect={handleSelect}
+                    text="Link"
+                    {entry}
+                />
             {/if}
-            <Button
-                class="h-6 px-2 font-normal text-xs"
-                variant="outline"
-                Icon={Plus}
-                onclick={() => (createDrawerOpen = true)}
-            >
-                Create
-            </Button>
-            <SelectRecord
-                class="h-6 px-2 font-normal text-xs"
-                variant="outline"
-                {parentCollectionName}
-                {collectionName}
-                {fieldName}
-                onSelect={handleSelect}
-                text="Select"
-                {entry}
-            />
         </div>
+
+        <!-- Input field colored by state -->
         <Input
-            placeholder={"NULL"}
+            placeholder={isEmpty ? "NULL" : ""}
             type="number"
-            class="
-                bg-muted text-xs
-                {destructive ? 'border-destructive bg-destructive/10' : ''}
-            "
+            class="bg-muted text-xs {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}"
+            disabled={isPendingCreate || isPendingEdit}
             bind:value={
-                () => value ?? "",
-                (v) => (value = (v === "" || v == null) ? null : Number(v))
+                () => displayId ?? "",
+                (v) => { if (hasRealId || isEmpty) value = (v === "" || v == null) ? null : Number(v); }
             }
         />
     </div>
 {:else}
     <div class="relative z-10">
-        <Input
-            placeholder={"PARENT ID"}
-            class="bg-muted text-xs"
-            disabled={true}
-        />
+        <Input placeholder="PARENT ID" class="bg-muted text-xs" disabled={true} />
     </div>
 {/if}
 
@@ -126,6 +210,17 @@
     <CreateDetailView
         collectionName={collectionName}
         onCreated={handleCreated}
+        onChanges={() => {}}
         onCancel={async () => { createDrawerOpen = false; }}
     />
 {/if}
+
+{#if editDrawerOpen && editValues}
+    <UpdateDetailView
+        collectionName={collectionName}
+        recordId={String(editValues.id)}
+        values={editValues}
+        onChanges={handleEditChanges}
+        onCancel={async () => { editDrawerOpen = false; editValues = undefined; }}
+    />
+{/if}

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

@@ -2,7 +2,7 @@ interface LocalProps {
     parentCollectionName: string;
     collectionName: string;
     fieldName: string;
-    value?: number | null;
+    value?: any;
     destructive?: boolean;
     entry: Record<string, any>;
 }