@lobb-js/studio 0.41.0 → 0.43.0

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

@@ -15,8 +15,6 @@
 	export interface TableProps {
 		data: Entry[];
 		columns?: Column[];
-		showCollapsible?: boolean;
-
 		// sorting
 		sort?: Record<string, "asc" | "desc">;
 		localSorting?: boolean;
@@ -33,14 +31,16 @@
 
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
+		preTools?: Snippet<[Entry, number]>;
 		tools?: Snippet<[Entry, number]>;
 		rowActions?: Snippet<[Entry, number]>;
-		collapsible?: Snippet<[Entry, number]>;
-
 		// other
 		parentWidth?: number;
 		select?: Select;
 		tableWidth?: number;
+
+		// recording mode row visuals — cellIndex 0 = tools cell, 1+ = data/action cells
+		onCellClass?: (entry: Entry, cellIndex: number) => string;
 	}
 </script>
 
@@ -48,7 +48,6 @@
 	import {
 		ArrowDownNarrowWide,
 		ArrowUpWideNarrow,
-		ChevronRight,
 		CircleOff,
 	} from "lucide-svelte";
 	import Checkbox from "../ui/checkbox/checkbox.svelte";
@@ -63,7 +62,6 @@
 				id: key,
 			};
 		}),
-		showCollapsible = false,
 		sort = $bindable({}),
 		localSorting = false,
 		selectedRecords = $bindable(),
@@ -74,17 +72,16 @@
 		headerBorderTop = false,
 		parentWidth,
 		overrideCell,
+		preTools,
 		tools,
 		rowActions,
-		collapsible,
 		select,
 		tableWidth = $bindable(),
+		onCellClass,
 	}: TableProps = $props();
 
-	let expandedRows: boolean[] = $state(new Array(data.length).fill(false));
-
 	// calculate columns count
-	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const toolsExists = selectedRecords || tools || preTools ? 1 : 0;
 	const rowActionsExists = $derived(rowActions ? 1 : 0);
 	const columnsLength = columns.length + toolsExists;
 
@@ -175,7 +172,7 @@
 		grid-template-rows: 2.5rem;
 	"
 >
-	{#if selectedRecords || tools}
+	{#if selectedRecords || tools || preTools}
 		<div
 			bind:clientWidth={columnsWidths[0]}
 			class="
@@ -183,13 +180,9 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted
+				bg-muted/50
 			"
 		>
-			<!-- collapsable toggle -->
-			{#if showCollapsible}
-				<div class="w-[20px]"></div>
-			{/if}
 			{#if selectedRecords && showCheckboxes}
 				<Checkbox
 					class="border-muted-foreground hover:border-foreground"
@@ -208,7 +201,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted
+				bg-muted/50
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -235,7 +228,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted
+				bg-muted/50
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -245,30 +238,12 @@
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
 			{@const lastRow = data.length - 1 === index}
-			{#if selectedRecords || tools}
+			{#if selectedRecords || tools || preTools}
 				<div
-					class="
-						sticky left-0
-						flex items-center p-2.5 text-xs h-10
-						bg-card
-						border-r gap-2
-					"
+					class="sticky left-0 flex items-center p-2.5 text-xs h-10 bg-card border-r gap-2 {onCellClass?.(entry, 0) ?? ''}"
 				>
-					<!-- collapsable toggle -->
-					{#if showCollapsible}
-						<Button
-							variant="ghost"
-							class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent transition-transform"
-							style={expandedRows[index]
-								? "transform: rotate(90deg);"
-								: "transform: rotate(0deg);"}
-							Icon={ChevronRight}
-							onclick={() => {
-								expandedRows[index] = !expandedRows[index];
-								expandedRows = [...expandedRows];
-							}}
-							disabled={isDisabled}
-						></Button>
+					{#if preTools && !isDisabled}
+						{@render preTools(entry, index)}
 					{/if}
 					{#if selectedRecords && showCheckboxes}
 						<Checkbox
@@ -294,12 +269,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					class="
-						flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip
-						{select ? 'cursor-pointer hover:bg-accent' : ''}
-						bg-card
-						{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
-					"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}
@@ -310,41 +280,12 @@
 			{/each}
 			{#if rowActions}
 				<div
-					class="
-						sticky right-0 z-10
-						flex items-center p-2.5 text-xs h-10
-						border-l gap-2
-						bg-card
-					"
+					class="sticky right-0 z-10 flex items-center p-2.5 text-xs h-10 border-l gap-2 bg-card {onCellClass?.(entry, columns.length + 1) ?? ''}"
 				>
 					{@render rowActions?.(entry, index)}
 				</div>
 			{/if}
-			<!-- nested data -->
-			<div
-				style="grid-column: span {columnsLength + rowActionsExists};"
-				class="
-					{!showLastColumnBorder ? '' : 'border-r'}
-					{lastRow && !showLastRowBorder ? '' : 'border-b'}
-				"
-			>
-				<div
-					style="
-						{parentWidth ? `width: ${parentWidth}px` : ''};
-						max-width: 100vw;
-						{expandedRows[index] ? '' : 'height: 0px;'}
-					"
-					class="
-						sticky left-0 top-0 overflow-auto bg-muted
-						
-						{expandedRows[index] ? 'border-t' : ''}
-					"
-				>
-					{#if collapsible && expandedRows[index]}
-						{@render collapsible(entry, index)}
-					{/if}
-				</div>
-			</div>
+			<div style="grid-column: span {columnsLength + rowActionsExists};" class="{!showLastColumnBorder ? '' : 'border-r'} {lastRow && !showLastRowBorder ? '' : 'border-b'}"></div>
 		{/each}
 	{/if}
 </div>

package/src/lib/components/detailView/changeTreeUtils.ts

@@ -0,0 +1,39 @@
+import type { Changes, ChildrenChanges } from "./utils";
+
+export interface TreeNode { label: string; children: TreeNode[]; }
+
+export function buildChangeTree(c: Changes, fieldLabel = 'changed'): TreeNode[] {
+    const nodes: TreeNode[] = [];
+    let fieldCount = 0;
+    for (const [fieldName, val] of Object.entries(c.data ?? {})) {
+        if (val && typeof val === 'object' && !Array.isArray(val)) {
+            const v = val as any;
+            const t = v.collection ?? fieldName;
+            if (v.delete === true) nodes.push({ label: `${t}: inline delete`, children: [] });
+            else if (v.update)     nodes.push({ label: `${t}: inline edit`, children: [] });
+            else if (v.create)     nodes.push({ label: `${t}: inline create`, children: [] });
+        } else { fieldCount++; }
+    }
+    if (fieldCount > 0) nodes.unshift({ label: `${fieldCount} field${fieldCount > 1 ? 's' : ''} ${fieldLabel}`, children: [] });
+    for (const [col, ch] of Object.entries(c.children ?? {}) as [string, ChildrenChanges][]) {
+        const kids: TreeNode[] = [];
+        for (let i = 0; i < ch.created.length; i++) kids.push({ label: 'new record', children: [] });
+        for (const r of ch.linked)   kids.push({ label: `#${(r as any).id} linked`, children: [] });
+        for (const u of ch.updated)  kids.push({ label: `#${u.id}`, children: buildChangeTree(u.changes) });
+        for (const r of ch.deleted)  kids.push({ label: `#${(r as any).id} deleted`, children: [] });
+        for (const r of ch.unlinked) kids.push({ label: `#${(r as any).id} unlinked`, children: [] });
+        if (kids.length) nodes.push({ label: col, children: kids });
+    }
+    return nodes;
+}
+
+export function renderTree(nodes: TreeNode[], prefix = ''): string[] {
+    const lines: string[] = [];
+    nodes.forEach((node, i) => {
+        const last = i === nodes.length - 1;
+        lines.push(`${prefix}${last ? '└── ' : '├── '}${node.label}`);
+        if (node.children.length)
+            lines.push(...renderTree(node.children, prefix + (last ? '    ' : '│   ')));
+    });
+    return lines;
+}

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

@@ -14,6 +14,7 @@
         submitButton?: SubmitButton;
         title?: Snippet<[string]>;
         onSuccessfullSave?: (entry: any) => Promise<void>;
+        onCreated?: (record: any) => Promise<void>;
         onCancel?: () => Promise<void>;
         onChanges?: (changes: Changes) => void;
     }
@@ -25,6 +26,8 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import type { ChildrenChanges } from "../utils";
+    import { showDialog } from "../../../actions";
 
     const { lobb, ctx } = getStudioContext();
     import CreateDetailViewChildren from "./createDetailViewChildren.svelte";
@@ -38,6 +41,7 @@
         showRelatedRecords = true,
         onCancel,
         onSuccessfullSave,
+        onCreated,
         title,
         submitButton,
         onChanges,
@@ -46,6 +50,27 @@
     const isRecordingMode = onChanges !== undefined;
     let changes = $state<Changes>({ data: {}, children: {} });
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(changes.data).length;
+        for (const ch of Object.values(changes.children) as ChildrenChanges[]) {
+            count += ch.created.length + ch.updated.length + ch.deleted.length + ch.linked.length + ch.unlinked.length;
+        }
+        return count;
+    });
+
+    const hasChildChanges = $derived(
+        Object.values(changes.children).some((ch: ChildrenChanges) =>
+            ch.created.length || ch.linked.length
+        ) ||
+        Object.values(changes.data).some((val: any) =>
+            val && typeof val === 'object' && !Array.isArray(val) && (val.create || val.update || val.delete)
+        )
+    );
+
+    import { buildChangeTree, renderTree } from "../changeTreeUtils";
+
+    const changeSummaryLines = $derived(renderTree(buildChangeTree(changes, 'filled')));
+
     const fieldNames = Object.keys(ctx.meta.collections[collectionName].fields);
     let values = $state(getDefaultEntry(ctx, fieldNames, collectionName, passedValues));
     let fieldsErrors: Record<string, any> = $state({});
@@ -63,7 +88,15 @@
         });
     });
 
+    function cleanFkField(val: any): any {
+        if (!val || typeof val !== 'object' || Array.isArray(val)) return val;
+        if (val.id && val.update) return { ...(val.collection ? { collection: val.collection } : {}), update: val.update };
+        return val;
+    }
+
     function buildPayload(changes: Changes): { data: Record<string, any>; children?: Record<string, any> } {
+        const data: Record<string, any> = {};
+        for (const [key, val] of Object.entries(changes.data)) data[key] = cleanFkField(val);
         const result: Record<string, any> = {};
         for (const [collection, ops] of Object.entries(changes.children)) {
             const hasOps = ops.created.length || ops.linked.length;
@@ -74,7 +107,7 @@
             };
         }
         const children = Object.keys(result).length ? result : undefined;
-        return { data: changes.data, ...(children ? { children } : {}) };
+        return { data, ...(children ? { children } : {}) };
     }
 
     function handleCancel() {
@@ -82,17 +115,27 @@
     }
 
     async function handleSave() {
+        if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
+            const confirmed = await showDialog(
+                "Confirm changes",
+                changeSummaryLines.join('\n')
+            );
+            if (!confirmed) return;
+        }
+
         const snap = $state.snapshot(changes);
         const response = await lobb.createOne(collectionName, buildPayload(snap), undefined, isRecordingMode);
 
         if (response.status === 204) {
             onChanges?.(snap);
             if (onSuccessfullSave) await onSuccessfullSave(snap);
-            toast.success(`The record was successfully created`);
+            await onCreated?.(snap.data);
+            if (!isRecordingMode) toast.success(`The record was successfully created`);
             handleCancel();
             return;
         }
 
+        let createdRecord: any = null;
         if (!response.bodyUsed) {
             const result = await response.json();
             if (response.status >= 400) {
@@ -104,10 +147,12 @@
                     return;
                 }
             }
+            createdRecord = result.data ?? result;
         }
 
         onChanges?.(snap);
         if (onSuccessfullSave) await onSuccessfullSave(snap);
+        await onCreated?.(createdRecord ?? snap.data);
         toast.success(`The record was successfully created`);
         onCancel?.();
     }
@@ -152,9 +197,10 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Plus}
+                aria-label={submitButton?.text ?? "Create record"}
                 onclick={handleSave}
             >
-                {submitButton?.text ? submitButton.text : "Create"}
+                {submitButton?.text ?? "Create"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

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

@@ -12,12 +12,14 @@
         collectionName: string;
         entry: Record<string, any>;
         fieldsErrors?: Record<string, string[]>;
+        changedFields?: string[];
     }
 
     let {
         collectionName,
         entry = $bindable(),
         fieldsErrors = {},
+        changedFields = [],
     }: Props = $props();
 
     const { lobb, ctx } = getStudioContext();
@@ -31,13 +33,15 @@
     );
 </script>
 
-<div class="flex flex-col gap-4 p-4">
+<div class="grid grid-cols-2 gap-4 p-4">
     {#each fieldNames as fieldName}
         {#if !ctx.meta.collections[collectionName].fields[fieldName]?.ui?.hidden}
             {@const field = getField(ctx, fieldName, collectionName)}
             {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
             {@const description = ctx.meta.collections[collectionName].fields[fieldName]?.description}
-            <div class="flex flex-col gap-2">
+            {@const fieldDef = ctx.meta.collections[collectionName].fields[fieldName]}
+            {@const isFullWidth = field.type === "text" || field.type === "polymorphic" || fieldDef?.ui?.input?.type === "richtext" || fieldDef?.ui?.span === 2}
+            <div class="flex flex-col gap-2 {isFullWidth ? 'col-span-2' : 'col-span-1'}">
                 <div class="flex flex-1 items-end justify-between gap-2 text-xs">
                     <div class="flex items-center gap-1.5">
                         <ExtensionsComponents
@@ -80,6 +84,7 @@
                     bind:value={entry[fieldName]}
                     bind:entry
                     errorMessages={fieldsErrors[fieldName]}
+                    changed={changedFields.includes(fieldName)}
                 />
             </div>
         {/if}

package/src/lib/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/src/lib/components/detailView/update/updateDetailView.svelte

@@ -27,6 +27,8 @@
     import { getStudioContext } from "../../../context";
     import { toast } from "svelte-sonner";
     import { untrack } from "svelte";
+    import { showDialog } from "../../../actions";
+
 
     const { lobb, ctx } = getStudioContext();
     import { getChangedProperties } from "../../../utils";
@@ -69,6 +71,27 @@
         ),
     );
 
+    const totalChangeCount = $derived.by(() => {
+        let count = Object.keys(localChanges.data).length;
+        for (const ch of Object.values(localChanges.children) as ChildrenChanges[]) {
+            count += ch.created.length + ch.updated.length + ch.deleted.length + ch.linked.length + ch.unlinked.length;
+        }
+        return count;
+    });
+
+    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)
+        )
+    );
+
+    import { buildChangeTree, renderTree } from "../changeTreeUtils";
+
+    const changeSummaryLines = $derived(renderTree(buildChangeTree(localChanges)));
+
     $effect(() => {
         const currentEntrySnap = $state.snapshot(values);
 
@@ -77,19 +100,18 @@
         });
     });
 
-    $effect(() => {
-        const snap = $state.snapshot(localChanges);
-        if (isRecordingMode) {
-            const hasAny = Object.keys(snap.data).length > 0 ||
-                Object.values(snap.children).some((c: ChildrenChanges) =>
-                    c.created.length || c.updated.length || c.deleted.length || c.linked.length || c.unlinked.length
-                );
-            if (hasAny) untrack(() => onChanges?.(snap));
-        }
-    });
+    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 } : {}) };
     }
@@ -119,13 +141,21 @@
     }
 
     async function handleSave() {
+        if (!isRecordingMode && hasChildChanges && changeSummaryLines.length > 0) {
+            const confirmed = await showDialog(
+                "Confirm changes",
+                changeSummaryLines.join('\n')
+            );
+            if (!confirmed) return;
+        }
+
         const snap = $state.snapshot(localChanges);
         const response = await lobb.updateOne(collectionName, recordId, buildPayload(snap), isRecordingMode);
 
         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;
         }
@@ -145,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>
@@ -170,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}
@@ -189,10 +219,11 @@
                 variant="default"
                 size="sm"
                 Icon={submitButton?.icon ? submitButton.icon : Pencil}
+                aria-label={submitButton?.text ?? "Update"}
                 onclick={handleSave}
                 disabled={!hasChanges}
             >
-                {submitButton?.text ? submitButton.text : "Update"}
+                {submitButton?.text ?? "Update"}{totalChangeCount > 0 ? ` (${totalChangeCount})` : ''}
             </Button>
         </div>
     </div>

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

@@ -11,6 +11,7 @@
 		class?: ButtonProps["class"];
 		Icon?: ButtonProps["Icon"];
 		children?: ButtonProps["children"];
+		"aria-label"?: string;
 	}
 
 	let props: LocalProp = $props();
@@ -20,6 +21,11 @@
 	const { lobb } = getStudioContext();
 
 	async function openView() {
+		if (props.values) {
+			values = props.values;
+			open = true;
+			return;
+		}
 		const params = {
 			fields: "*",
 			filter: { id: props.recordId },
@@ -37,6 +43,7 @@
 	size={props.size}
 	class={props.class}
 	Icon={props.Icon}
+	aria-label={props["aria-label"]}
 	onclick={openView}
 >
 	{#if props.children}

package/src/lib/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,
@@ -36,11 +47,14 @@
     ></button>
 
     <div
+        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>