@lobb-js/studio 0.43.0 → 0.44.1

package/dist/components/polymorphicInput.svelte

@@ -4,12 +4,8 @@
     import DataTable from "./dataTable/dataTable.svelte";
     import Drawer from "./drawer.svelte";
     import * as Popover from "./ui/popover/index";
-    import { getStudioContext } from "../context";
-    import { ArrowLeft, Link, ChevronDown, Plus, Pencil, Unlink, Trash, RotateCcw, RefreshCw } from "lucide-svelte";
+    import { ArrowLeft, Link, ChevronDown, Plus } from "lucide-svelte";
     import CreateDetailView from "./detailView/create/createDetailView.svelte";
-    import UpdateDetailView from "./detailView/update/updateDetailView.svelte";
-
-    const { ctx, lobb } = getStudioContext();
 
     interface Props {
         collectionField: string;
@@ -29,41 +25,33 @@
         destructive,
     }: Props = $props();
 
-
     const selectedCollection = $derived(entry[collectionField] ?? null);
     const selectedId         = $derived(entry[idField] ?? null);
     const virtualVal         = $derived(entry[virtualField] ?? null);
 
     let initialId = $state<number | null | undefined>(undefined);
-    let unlinked = $state(false);
-    onMount(() => { initialId = entry[idField] ?? null; });
-
-    // State derived from virtual field and real fields
-    const isPendingCreate  = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.create);
-    const isPendingEdit    = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.update);
-    const isStagedUnlink   = $derived(unlinked);
-    const isStagedDelete   = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.delete === true);
-    const hasRealValue     = $derived(selectedId != null && !isPendingCreate && !isPendingEdit && !isStagedUnlink && !isStagedDelete);
-    const isNewLink        = $derived(hasRealValue && initialId !== undefined && initialId == null && selectedId !== initialId);
-    const isReplaced       = $derived(hasRealValue && initialId !== undefined && initialId != null && selectedId !== initialId);
-    const isEmpty          = $derived(!unlinked && (!selectedCollection || (selectedId == null && !isPendingCreate && !isPendingEdit && !isStagedDelete)));
+    let initialCollection = $state<string | null | undefined>(undefined);
+    onMount(() => {
+        initialId = entry[idField] ?? null;
+        initialCollection = entry[collectionField] ?? null;
+    });
+
+    const isPendingCreate = $derived(virtualVal && typeof virtualVal === 'object' && virtualVal.create);
+    const isChanged       = $derived(
+        initialId !== undefined &&
+        !isPendingCreate &&
+        (selectedId !== initialId || selectedCollection !== initialCollection)
+    );
 
     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'       :
+        isPendingCreate ? '!bg-green-500/5 border-green-500/40' :
+        isChanged       ? '!bg-orange-500/5'                    :
         ''
     );
 
     let collectionPopoverOpen = $state(false);
     let recordDrawerOpen = $state(false);
     let createDrawerOpen = $state(false);
-    let editDrawerOpen = $state(false);
-    let editValues: Record<string, any> | undefined = $state(undefined);
-    let originalSnapshot: { collection: string; id: number } | null = $state(null);
 
     function onCollectionChange(col: string) {
         collectionPopoverOpen = false;
@@ -75,7 +63,7 @@
     function onIdChange(e: Event) {
         const raw = (e.target as HTMLInputElement).value;
         const id = raw === "" ? null : Number(raw);
-        entry = { ...entry, [idField]: id };
+        entry = { ...entry, [idField]: id, [virtualField]: undefined };
     }
 
     function onRecordSelect(record: any) {
@@ -90,50 +78,9 @@
             entry = { ...entry, [idField]: record.id, [virtualField]: undefined };
         }
     }
-
-    async function openEdit() {
-        const res = await lobb.findAll(selectedCollection!, { filter: { id: selectedId }, 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) {
-            entry = { ...entry, [virtualField]: undefined };
-        } else {
-            entry = { ...entry, [virtualField]: { collection: selectedCollection, id: selectedId, update: changes.data } };
-        }
-    }
-
-    function handleUnlink() {
-        if (hasRealValue) {
-            originalSnapshot = { collection: selectedCollection!, id: selectedId! };
-            unlinked = true;
-            entry = { ...entry, [collectionField]: null, [idField]: null, [virtualField]: undefined };
-        }
-    }
-
-    async function handleDelete() {
-        if (hasRealValue) {
-            originalSnapshot = { collection: selectedCollection!, id: selectedId! };
-            entry = { ...entry, [virtualField]: { delete: true } };
-        }
-    }
-
-    function handleRevert() {
-        if (originalSnapshot) {
-            entry = { ...entry, [collectionField]: originalSnapshot.collection, [idField]: originalSnapshot.id, [virtualField]: undefined };
-            originalSnapshot = null;
-        } else {
-            entry = { ...entry, [collectionField]: null, [idField]: null, [virtualField]: undefined };
-        }
-        unlinked = false;
-    }
 </script>
 
 <div class="flex h-9 w-full items-center gap-1.5 rounded-md border pl-1.5 pr-9 text-xs bg-muted {bgClass} {destructive ? '!bg-destructive/10 border-destructive' : ''}">
-    <!-- Collection picker -->
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>
             {#snippet child({ props })}
@@ -161,25 +108,15 @@
         </Popover.Content>
     </Popover.Root>
 
-    <!-- ID input (only editable when real value or empty) -->
     <input
-        placeholder="NULL"
+        placeholder={isPendingCreate ? "AUTO GENERATED" : "NULL"}
         type="number"
         class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
-        value={isStagedUnlink || isStagedDelete ? (virtualVal?.id ?? '') : (selectedId ?? "")}
-        disabled={isPendingCreate || isPendingEdit}
+        value={selectedId ?? ""}
         oninput={onIdChange}
     />
 
-    <!-- Action buttons -->
-    {#if isStagedUnlink || isStagedDelete || isPendingCreate || isPendingEdit}
-        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={RotateCcw} onclick={handleRevert} title="Revert"></Button>
-    {:else if hasRealValue}
-        <Button class="h-5 w-5 px-0 shrink-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 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={Unlink} onclick={handleUnlink} title="Unlink"></Button>
-        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={Pencil} onclick={openEdit} title="Edit record"></Button>
-        <Button class="h-5 w-5 px-0 shrink-0 hover:bg-transparent text-muted-foreground" variant="ghost" Icon={RefreshCw} onclick={() => (recordDrawerOpen = true)} title="Replace"></Button>
-    {:else if selectedCollection && !isPendingCreate}
+    {#if selectedCollection}
         <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (createDrawerOpen = true)}>
             <Plus size="13" />
             Create
@@ -218,13 +155,3 @@
         onCancel={async () => { createDrawerOpen = false; }}
     />
 {/if}
-
-{#if editDrawerOpen && editValues && selectedCollection}
-    <UpdateDetailView
-        collectionName={selectedCollection}
-        recordId={String(editValues.id)}
-        values={editValues}
-        onChanges={handleEditChanges}
-        onCancel={async () => { editDrawerOpen = false; editValues = undefined; }}
-    />
-{/if}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.38.0",
+    "@lobb-js/core": "^0.38.1",
     "@chromatic-com/storybook": "^4.1.2",
     "@playwright/test": "^1.60.0",
     "@storybook/addon-a11y": "^10.0.1",

package/src/app.css

@@ -24,7 +24,7 @@
   --secondary: oklch(0.97 0.001 138);
   --secondary-foreground: oklch(0.20 0.012 138);
 
-  --muted: oklch(0.97 0.001 138);
+  --muted: oklch(0.98 0.001 138);
   --muted-foreground: oklch(0.55 0.012 138);
 
   --accent: oklch(0.95 0.001 138);
@@ -52,7 +52,7 @@
   --secondary: oklch(0.24 0.012 138);
   --secondary-foreground: oklch(0.94 0.012 138);
 
-  --muted: oklch(0.24 0.012 138);
+  --muted: oklch(0.28 0.012 138);
   --muted-foreground: oklch(0.65 0.012 138);
 
   --accent: oklch(0.27 0.012 138);

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

@@ -75,6 +75,7 @@
     }: Props = $props();
 
     const isRecordingMode = onChanges !== undefined;
+    const isSelectMode = $derived(tableProps?.select != null);
     let localChanges = $state<ChildrenChanges>(
         untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
     );
@@ -222,6 +223,9 @@
         (ctx.meta.collections[collectionName]?.children ?? [])
             .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
+    // Select-mode drawer has no checkbox, edit, delete, or unlink — the
+    // left-sticky tools column would render empty, so drop it entirely.
+    const showLeftTools = $derived(!isSelectMode);
     let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
     // requests the data from the server when the params is changed
@@ -407,6 +411,7 @@
             bind:selectedRecords
             {showImport}
             {showFilter}
+            showCreate={!isSelectMode}
             {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
@@ -463,6 +468,7 @@
                         bind:selectedRecords
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
+                        {showLeftTools}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}
                         onCellClass={isRecordingMode ? onCellClass : undefined}>
                         {#snippet preTools(entry)}
@@ -480,7 +486,7 @@
                         {/snippet}
                         {#snippet tools(entry)}
                             {#if entry._recordingState !== 'deleted' && entry._recordingState !== 'unlinked'}
-                                {#if showEdit}
+                                {#if showEdit && !isSelectMode}
                                     {@const isPending = entry._recordingState === 'created'}
                                     <CanAccess collection={collectionName} action="update">
                                         <UpdateDetailViewButton

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

@@ -20,11 +20,13 @@
     //   • anything else → explicit $and/$or arrays.
 
     import * as Select from "../ui/select/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import Button from "../ui/button/button.svelte";
-    import { Plus, X, Boxes, Settings2 } from "lucide-svelte";
+    import { ChevronDown, Plus, X, Boxes, Settings2 } from "lucide-svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
     import { getFieldRelationTarget } from "../../relations";
+    import FieldPicker from "./fieldPicker.svelte";
 
     const { ctx } = getStudioContext();
 
@@ -43,6 +45,9 @@
         isEmpty = $bindable(true),
     }: Props = $props();
 
+    // Per-rule open state for the field-picker popovers.
+    let fieldPickerOpen = $state<Record<string, boolean>>({});
+
     type OperatorDef = {
         value: string;
         label: string;
@@ -471,30 +476,33 @@
     {@const currentOp = ops.find((o) => o.value === rule.operator) ?? ops[0]}
     {@const kind = getFieldKind(rule.field)}
     {@const FieldIcon = getFieldIcon(ctx, rule.field, collectionName)}
-    <!-- Field picker -->
-    <Select.Root
-        type="single"
-        value={rule.field}
-        onValueChange={(v) => v && patchRuleInPlace(rule.id, { field: v })}
+    <!-- Field picker — typeahead popover, same widget Sort uses -->
+    <Popover.Root
+        bind:open={
+            () => fieldPickerOpen[rule.id] ?? false,
+            (v) => (fieldPickerOpen[rule.id] = v)
+        }
     >
-        <Select.Trigger class="bg-muted h-7 w-36 text-xs">
-            <div class="inline-flex items-center gap-1.5">
+        <Popover.Trigger
+            class="inline-flex h-7 w-36 items-center justify-between gap-1.5 rounded-md border bg-muted px-2 text-xs"
+        >
+            <div class="inline-flex items-center gap-1.5 truncate">
                 <FieldIcon size="13" />
-                {rule.field}
+                <span class="truncate">{rule.field}</span>
             </div>
-        </Select.Trigger>
-        <Select.Content>
-            {#each allFieldNames as fname}
-                {@const OptionIcon = getFieldIcon(ctx, fname, collectionName)}
-                <Select.Item value={fname}>
-                    <div class="inline-flex items-center gap-1.5">
-                        <OptionIcon size="13" />
-                        {fname}
-                    </div>
-                </Select.Item>
-            {/each}
-        </Select.Content>
-    </Select.Root>
+            <ChevronDown size="13" class="text-muted-foreground shrink-0" />
+        </Popover.Trigger>
+        <Popover.Content class="w-64 p-2">
+            <FieldPicker
+                {collectionName}
+                placeholder="Pick a field…"
+                onPick={(fname: string) => {
+                    patchRuleInPlace(rule.id, { field: fname });
+                    fieldPickerOpen[rule.id] = false;
+                }}
+            />
+        </Popover.Content>
+    </Popover.Root>
 
     <!-- Operator picker -->
     <Select.Root

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

@@ -64,6 +64,7 @@
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content
+		trapFocus={false}
 		class="
 			w-screen p-0
 			transition-[max-width] duration-150

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

@@ -26,6 +26,7 @@
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
         showFilter?: boolean;
+        showCreate?: boolean;
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
@@ -40,6 +41,7 @@
         onCreate,
         showImport = true,
         showFilter = true,
+        showCreate = true,
         loading = false,
         left,
         excludeIds = [],
@@ -154,7 +156,7 @@
                 {headerIsSmall ? "" : "Refresh"}
             {/if}
         </Button>
-        {#if showImport}
+        {#if showImport && showCreate}
             <CanAccess collection={collectionName} action="create">
                 <ImportButton
                     {collectionName}
@@ -183,17 +185,19 @@
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>
         {/if}
-        <CanAccess collection={collectionName} action="create">
-            <CreateDetailViewButton
-                {collectionName}
-                variant="default"
-                size="sm"
-                Icon={Plus}
-                onChanges={onCreate ? handleCreate : undefined}
-                onSuccessfullSave={onCreate ? undefined : handleCreate}
-            >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
-        </CanAccess>
+        {#if showCreate}
+            <CanAccess collection={collectionName} action="create">
+                <CreateDetailViewButton
+                    {collectionName}
+                    variant="default"
+                    size="sm"
+                    Icon={Plus}
+                    onChanges={onCreate ? handleCreate : undefined}
+                    onSuccessfullSave={onCreate ? undefined : handleCreate}
+                >
+                    {headerIsSmall ? "" : "Create"}
+                </CreateDetailViewButton>
+            </CanAccess>
+        {/if}
     </div>
 </div>

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

@@ -39,6 +39,11 @@
 		select?: Select;
 		tableWidth?: number;
 
+		// Hide the left sticky tools column entirely when the caller knows
+		// nothing inside it would render (e.g. select-mode drawer with no
+		// checkboxes, no edit/delete buttons, and no children-network icon).
+		showLeftTools?: boolean;
+
 		// recording mode row visuals — cellIndex 0 = tools cell, 1+ = data/action cells
 		onCellClass?: (entry: Entry, cellIndex: number) => string;
 	}
@@ -77,13 +82,14 @@
 		rowActions,
 		select,
 		tableWidth = $bindable(),
+		showLeftTools = true,
 		onCellClass,
 	}: TableProps = $props();
 
 	// calculate columns count
-	const toolsExists = selectedRecords || tools || preTools ? 1 : 0;
+	const toolsExists = $derived(showLeftTools && (selectedRecords || tools || preTools) ? 1 : 0);
 	const rowActionsExists = $derived(rowActions ? 1 : 0);
-	const columnsLength = columns.length + toolsExists;
+	const columnsLength = $derived(columns.length + toolsExists);
 
 	// set table width
 	let columnsWidths: number[] = $state([]);
@@ -166,13 +172,14 @@
 </script>
 
 <div
+	class="min-w-max"
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 10rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
+		grid-template-columns: fit-content(10rem) repeat({columnsLength - 1}, fit-content(15rem)){rowActionsExists ? ' fit-content(7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
-	{#if selectedRecords || tools || preTools}
+	{#if showLeftTools && (selectedRecords || tools || preTools)}
 		<div
 			bind:clientWidth={columnsWidths[0]}
 			class="
@@ -180,7 +187,7 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted/50
+				bg-muted
 			"
 		>
 			{#if selectedRecords && showCheckboxes}
@@ -201,7 +208,8 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted/50
+				min-w-0
+				bg-muted
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -228,7 +236,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted/50
+				bg-muted
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -238,7 +246,7 @@
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
 			{@const lastRow = data.length - 1 === index}
-			{#if selectedRecords || tools || preTools}
+			{#if showLeftTools && (selectedRecords || tools || preTools)}
 				<div
 					class="sticky left-0 flex items-center p-2.5 text-xs h-10 bg-card border-r gap-2 {onCellClass?.(entry, 0) ?? ''}"
 				>
@@ -269,7 +277,7 @@
 					onclick={() => {
 						select?.onSelect(entry);
 					}}
-					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) ?? ''}"
+					class="flex items-center p-2.5 text-xs h-10 text-nowrap overflow-clip min-w-0 bg-card {select ? 'cursor-pointer hover:bg-accent' : ''} {lastColumn && !showLastColumnBorder ? '' : 'border-r'} {onCellClass?.(entry, index + 1) ?? ''}"
 				>
 					{#if overrideCell}
 						{@render overrideCell(fieldValue, column, entry)}