@lobb-js/studio 0.42.0 → 0.44.0

package/dist/components/polymorphicInput.svelte

@@ -4,16 +4,13 @@
     import DataTable from "./dataTable/dataTable.svelte";
     import Drawer from "./drawer.svelte";
     import * as Popover from "./ui/popover/index";
-    import { getCollectionPrimaryField } from "./dataTable/utils";
-    import { getStudioContext } from "../context";
     import { ArrowLeft, Link, ChevronDown, Plus } from "lucide-svelte";
     import CreateDetailView from "./detailView/create/createDetailView.svelte";
 
-    const { ctx, lobb } = getStudioContext();
-
     interface Props {
         collectionField: string;
         idField: string;
+        virtualField: string;
         targetCollections: string[];
         entry: Record<string, any>;
         destructive?: boolean;
@@ -22,64 +19,68 @@
     let {
         collectionField,
         idField,
+        virtualField,
         targetCollections,
         entry = $bindable(),
         destructive,
     }: Props = $props();
 
     const selectedCollection = $derived(entry[collectionField] ?? null);
-    const selectedId = $derived(entry[idField] ?? null);
+    const selectedId         = $derived(entry[idField] ?? null);
+    const virtualVal         = $derived(entry[virtualField] ?? null);
+
+    let initialId = $state<number | null | undefined>(undefined);
+    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' :
+        isChanged       ? '!bg-orange-500/5'                    :
+        ''
+    );
 
-    let displayName = $state<string | null>(null);
     let collectionPopoverOpen = $state(false);
     let recordDrawerOpen = $state(false);
     let createDrawerOpen = $state(false);
 
-    onMount(async () => {
-        if (selectedCollection == null || selectedId == null) return;
-        try {
-            const res = await lobb.findOne(selectedCollection, selectedId);
-            const record = await res.json();
-            const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection);
-            displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
-        } catch {
-            displayName = null;
-        }
-    });
-
-    $effect(() => {
-        if (entry[idField] == null) displayName = null;
-    });
-
     function onCollectionChange(col: string) {
         collectionPopoverOpen = false;
         if (entry[collectionField] !== col) {
-            entry = { ...entry, [collectionField]: col, [idField]: null };
+            entry = { ...entry, [collectionField]: col, [idField]: null, [virtualField]: undefined };
         }
     }
 
     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) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
-        entry = { ...entry, [idField]: record.id };
-        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+        entry = { ...entry, [idField]: record.id, [virtualField]: undefined };
         recordDrawerOpen = false;
     }
 
     async function onPolyCreated(record: any) {
-        const primaryFieldName = getCollectionPrimaryField(ctx, selectedCollection!);
-        entry = { ...entry, [idField]: record.id };
-        displayName = primaryFieldName ? String(record[primaryFieldName]) : null;
+        if (!record.id) {
+            entry = { ...entry, [virtualField]: { collection: selectedCollection, create: record }, [collectionField]: selectedCollection, [idField]: null };
+        } else {
+            entry = { ...entry, [idField]: record.id, [virtualField]: undefined };
+        }
     }
 </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 {destructive ? 'border-destructive bg-destructive/10' : ''}">
-    <!-- Collection picker -->
+<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' : ''}">
     <Popover.Root bind:open={collectionPopoverOpen}>
         <Popover.Trigger>
             {#snippet child({ props })}
@@ -107,39 +108,22 @@
         </Popover.Content>
     </Popover.Root>
 
-    <!-- Transparent id input -->
     <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={selectedId ?? ""}
         oninput={onIdChange}
     />
 
-    <!-- Primary field badge -->
-    {#if displayName}
-        <div class="flex shrink-0 items-center bg-background rounded-full border h-6 px-3 shadow-sm">
-            {displayName}
-        </div>
-    {/if}
-
-    <!-- Create / Select record buttons -->
     {#if selectedCollection}
-        <Button
-            class="h-6 shrink-0 px-2 font-normal text-xs"
-            variant="outline"
-            onclick={() => (createDrawerOpen = true)}
-        >
+        <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (createDrawerOpen = true)}>
             <Plus size="13" />
             Create
         </Button>
-        <Button
-            class="h-6 shrink-0 px-2 font-normal text-xs"
-            variant="outline"
-            onclick={() => (recordDrawerOpen = true)}
-        >
+        <Button class="h-6 shrink-0 px-2 font-normal text-xs" variant="outline" onclick={() => (recordDrawerOpen = true)}>
             <Link size="13" />
-            Select
+            Link
         </Button>
     {/if}
 </div>
@@ -147,26 +131,17 @@
 {#if recordDrawerOpen}
     <Drawer onHide={async () => { recordDrawerOpen = false }}>
         <div class="flex h-12 items-center gap-4 border-b px-4">
-            <Button
-                variant="outline"
-                onclick={() => (recordDrawerOpen = false)}
-                class="h-8 w-8 rounded-full text-xs font-normal"
-                Icon={ArrowLeft}
-            />
+            <Button variant="outline" onclick={() => (recordDrawerOpen = false)} class="h-8 w-8 rounded-full text-xs font-normal" Icon={ArrowLeft} />
             <div class="flex items-center gap-2">
                 <div class="text-sm">Select record from</div>
-                <span class="rounded-md border bg-muted px-2 py-0.5 text-sm">
-                    {selectedCollection}
-                </span>
+                <span class="rounded-md border bg-muted px-2 py-0.5 text-sm">{selectedCollection}</span>
             </div>
         </div>
         <div class="flex-1 overflow-y-auto bg-muted">
             <DataTable
                 collectionName={selectedCollection!}
-                tableProps={{
-                    showCheckboxes: false,
-                    select: { onSelect: onRecordSelect },
-                }}
+                filter={selectedId != null ? { id: { $ne: selectedId } } : undefined}
+                tableProps={{ showCheckboxes: false, select: { onSelect: onRecordSelect } }}
             />
         </div>
     </Drawer>
@@ -176,6 +151,7 @@
     <CreateDetailView
         collectionName={selectedCollection}
         onCreated={onPolyCreated}
+        onChanges={() => {}}
         onCancel={async () => { createDrawerOpen = false; }}
     />
 {/if}

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

@@ -1,6 +1,7 @@
 interface Props {
     collectionField: string;
     idField: string;
+    virtualField: string;
     targetCollections: string[];
     entry: Record<string, any>;
     destructive?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.37.1",
+    "@lobb-js/core": "^0.38.0",
     "@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/confirmationDialog/confirmationDialog.svelte

@@ -17,7 +17,7 @@
 	<AlertDialog.Content>
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
-			<AlertDialog.Description class="whitespace-pre-line">
+			<AlertDialog.Description class="whitespace-pre-wrap font-mono text-xs">
 				{description}
 			</AlertDialog.Description>
 		</AlertDialog.Header>

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

@@ -14,8 +14,10 @@
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import CanAccess from "../canAccess.svelte";
-    import { Pencil, Trash, Unlink, RotateCcw } from "lucide-svelte";
+    import { Pencil, Trash, Unlink, RotateCcw, Network } from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
+    import Drawer from "../drawer.svelte";
+    import { ArrowLeft } from "lucide-svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -73,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: [] }
     );
@@ -135,17 +138,17 @@
         const state = entry._recordingState;
         const border = cellIndex === 0 ? {
             deleted:  'border-l-2 border-l-red-500',
-            unlinked: 'border-l-2 border-l-orange-500',
+            unlinked: 'border-l-2 border-l-slate-500',
             created:  'border-l-2 border-l-green-500',
             linked:   'border-l-2 border-l-blue-500',
-            updated:  'border-l-2 border-l-amber-500',
+            updated:  'border-l-2 border-l-orange-500',
         }[state as string] ?? '' : '';
         const bg: Record<string, string> = {
-            deleted:  '!bg-red-500/5 opacity-50',
-            unlinked: '!bg-orange-500/5 opacity-50',
+            deleted:  '!bg-red-500/5',
+            unlinked: '!bg-slate-500/5',
             created:  '!bg-green-500/5',
             linked:   '!bg-blue-500/5',
-            updated:  '!bg-amber-500/5',
+            updated:  '!bg-orange-500/5',
         };
         return `${bg[state as string] ?? ''} ${border}`.trim();
     }
@@ -220,6 +223,10 @@
         (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
     $effect(() => {
@@ -404,6 +411,7 @@
             bind:selectedRecords
             {showImport}
             {showFilter}
+            showCreate={!isSelectMode}
             {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
@@ -453,7 +461,6 @@
                     <Table
                         {data}
                         {columns}
-                        showCollapsible={doesCollectionHasChildren}
                         selectByColumn="id"
                         showLastRowBorder={true}
                         showLastColumnBorder={true}
@@ -461,11 +468,25 @@
                         bind:selectedRecords
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
+                        {showLeftTools}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}
                         onCellClass={isRecordingMode ? onCellClass : undefined}>
+                        {#snippet preTools(entry)}
+                            {#if doesCollectionHasChildren}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => { childrenDrawerEntry = entry; }}
+                                    Icon={Network}
+                                    title="Show children"
+                                    aria-label={`Show children of record ${entry.id}`}
+                                ></Button>
+                            {/if}
+                        {/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
@@ -524,15 +545,6 @@
                                 refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
-                        {#snippet collapsible(entry)}
-                            <ListViewChildren
-                                {collectionName}
-                                recordId={entry.id}
-                                width={dataTableWidth > dataTableContainerWidth
-                                    ? dataTableContainerWidth
-                                    : dataTableWidth}
-                            />
-                        {/snippet}
                     </Table>
                 {/if}
             </div>
@@ -546,3 +558,23 @@
         />
     {/if}
 </div>
+
+{#if childrenDrawerEntry}
+    <Drawer position="bottom" onHide={async () => { childrenDrawerEntry = null; }}>
+        <div class="flex h-12 items-center gap-4 border-b px-4 shrink-0">
+            <Button
+                variant="outline"
+                onclick={() => { childrenDrawerEntry = null; }}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            ></Button>
+            <div class="flex items-center gap-2 text-sm">
+                <span>Children of</span>
+                <span class="rounded-md border bg-muted px-2 py-0.5">{collectionName} #{childrenDrawerEntry.id}</span>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto">
+            <ListViewChildren {collectionName} recordId={String(childrenDrawerEntry.id)} />
+        </div>
+    </Drawer>
+{/if}

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,28 @@
     {@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 })}
-    >
-        <Select.Trigger class="bg-muted h-7 w-36 text-xs">
-            <div class="inline-flex items-center gap-1.5">
+    <!-- Field picker — typeahead popover, same widget Sort uses -->
+    <Popover.Root bind:open={fieldPickerOpen[rule.id]}>
+        <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/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>