@lobb-js/studio 0.37.0 → 0.38.0

package/dist/components/dataTable/fieldPicker.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // Typeahead field picker. Renders inside a parent-owned <Popover.Content>
+    // so the parent controls open/close. Used by SortButton's fast-path
+    // picker and by Sort's "add a rule" popover.
+    import { getStudioContext } from "../../context";
+    import { getFieldIcon } from "./utils";
+
+    interface Props {
+        collectionName: string;
+        excludeFields?: string[];
+        placeholder?: string;
+        onPick: (fieldName: string) => void;
+    }
+
+    let {
+        collectionName,
+        excludeFields = [],
+        placeholder = "Pick a field…",
+        onPick,
+    }: Props = $props();
+
+    const { ctx } = getStudioContext();
+
+    let search = $state("");
+
+    const allFields = $derived(
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (f) => !excludeFields.includes(f),
+        ),
+    );
+    const filteredFields = $derived(
+        search
+            ? allFields.filter((f) =>
+                  f.toLowerCase().includes(search.toLowerCase()),
+              )
+            : allFields,
+    );
+</script>
+
+<input
+    {placeholder}
+    bind:value={search}
+    class="w-full rounded-md border bg-muted px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+/>
+<div class="mt-2 max-h-60 overflow-auto">
+    {#each filteredFields as fieldName}
+        {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
+        <button
+            type="button"
+            onclick={() => onPick(fieldName)}
+            class="flex w-full items-center gap-2 rounded-md p-2 text-left text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+            <FieldIcon size="14" />
+            <span>{fieldName}</span>
+        </button>
+    {:else}
+        <div class="p-2 text-center text-xs text-muted-foreground">
+            No matching fields
+        </div>
+    {/each}
+</div>

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

@@ -0,0 +1,9 @@
+interface Props {
+    collectionName: string;
+    excludeFields?: string[];
+    placeholder?: string;
+    onPick: (fieldName: string) => void;
+}
+declare const FieldPicker: import("svelte").Component<Props, {}, "">;
+type FieldPicker = ReturnType<typeof FieldPicker>;
+export default FieldPicker;

package/dist/components/dataTable/filterButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as Popover from "../ui/popover/index.js";
-	import { ListFilter } from "lucide-svelte";
+	import { Settings2 } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Filter from "./filter.svelte";
 
@@ -22,9 +22,10 @@
 		class={buttonVariants({
 			variant: "ghost",
 			size: "sm",
+			class: "text-muted-foreground",
 		})}
 	>
-		<ListFilter />
+		<Settings2 />
 		{#if showText}
 			{#if Object.keys(filter).length}
 				Filtered by {Object.keys(filter).length} rules

package/dist/components/dataTable/sort.svelte

@@ -2,12 +2,14 @@
     import * as _ from "lodash-es";
 
     import * as Popover from "../ui/popover/index.js";
-    import { ArrowDown, ArrowUp, GripVertical, Plus, X } from "lucide-svelte";
+    import * as Select from "../ui/select/index.js";
+    import { GripVertical, Plus, X } from "lucide-svelte";
     import Button, { buttonVariants } from "../ui/button/button.svelte";
-    import Label from "../ui/label/label.svelte";
-    import Switch from "../ui/switch/switch.svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
+    import { dndzone } from "svelte-dnd-action";
+    import { flip } from "svelte/animate";
+    import FieldPicker from "./fieldPicker.svelte";
 
     const { ctx } = getStudioContext();
 
@@ -21,108 +23,174 @@
 
     let popoverOpen = $state(false);
 
+    // Fields not currently used by any rule. Used to decide whether the
+    // "Add a sort rule" trigger is shown at all.
     function getFieldNames() {
         const options = Object.keys(
             ctx.meta.collections[collectionName].fields,
         );
-        const existingPropertiesNames = Object.keys(sort);
-        const filteredOptions = _.difference(options, existingPropertiesNames);
-        return filteredOptions;
+        const used = items.map((r) => r.id);
+        return _.difference(options, used);
     }
 
-    function moveProperty<T extends Record<string, any>>(
-        obj: T,
-        propertyToMove: keyof T,
-        direction: "up" | "down",
-        steps: number = 1,
-    ): T {
-        const keys = Object.keys(obj) as Array<keyof T>;
-        const currentIndex = keys.indexOf(propertyToMove);
-
-        if (currentIndex === -1) {
-            console.warn(
-                `Property '${String(propertyToMove)}' not found in the object.`,
-            );
-            return { ...obj };
-        }
+    // The field-name <Select> for an existing rule needs to list every
+    // field that isn't already used by *another* rule (plus its own
+    // current field). That way the user can swap a rule's field to any
+    // unused one without colliding with the others.
+    function getFieldOptionsForRule(currentField: string): string[] {
+        const all = Object.keys(ctx.meta.collections[collectionName].fields);
+        const usedByOthers = new Set(
+            items.map((r) => r.id).filter((id) => id !== currentField),
+        );
+        return all.filter((f) => !usedByOthers.has(f));
+    }
 
-        const [removedKey] = keys.splice(currentIndex, 1) as [keyof T];
-
-        let newIndex: number;
-        if (direction === "up") {
-            newIndex = Math.max(0, currentIndex - steps);
-        } else if (direction === "down") {
-            newIndex = Math.min(keys.length, currentIndex + steps);
-        } else {
-            console.warn(
-                `Invalid direction specified: '${direction}'. Use 'up' or 'down'.`,
-            );
-            return { ...obj };
+    // Push items → sort. Strips any in-flight shadow rows whose ids
+    // don't correspond to a real schema field. Called explicitly from
+    // each mutator (and from finalize) instead of via $effect — that
+    // way a drag's `consider` events don't spam the parent's sort prop
+    // and trigger a refetch on every frame. We reassign the whole
+    // binding (instead of mutating in place) because the parent's
+    // refetch watcher only fires on identity changes.
+    function commit() {
+        const validIds = ctx.meta.collections[collectionName].fields;
+        const next: Record<string, "asc" | "desc"> = {};
+        for (const r of items) {
+            if (r.id in validIds) next[r.id] = r.direction;
         }
+        sort = next;
+    }
+
+    function renameField(oldName: string, newName: string) {
+        if (oldName === newName) return;
+        items = items.map((r) => (r.id === oldName ? { ...r, id: newName } : r));
+        commit();
+    }
 
-        keys.splice(newIndex, 0, removedKey);
+    function setDirection(fieldId: string, dir: "asc" | "desc") {
+        items = items.map((r) => (r.id === fieldId ? { ...r, direction: dir } : r));
+        commit();
+    }
+
+    function removeRule(fieldId: string) {
+        items = items.filter((r) => r.id !== fieldId);
+        commit();
+    }
+
+    function addRule(fieldId: string) {
+        items = [...items, { id: fieldId, direction: "asc" }];
+        commit();
+    }
 
-        const newObject: T = {} as T;
-        keys.forEach((key) => {
-            newObject[key] = obj[key];
-        });
+    // svelte-dnd-action needs to own an array of {id} objects so it can
+    // stamp placeholder shadows during drag. We keep that array as local
+    // state and push into `sort` on every change — never the other way
+    // around, so the shadow item never leaks into the parent's filter.
+    type Rule = { id: string; direction: "asc" | "desc" };
+    let items = $state<Rule[]>(
+        Object.entries(sort).map(([id, direction]) => ({
+            id,
+            direction: direction as "asc" | "desc",
+        })),
+    );
 
-        return newObject;
+    function handleDndConsider(e: CustomEvent<{ items: Rule[] }>) {
+        // Mid-drag: update local items so the row tracks the cursor, but
+        // do NOT touch `sort` — that would refetch the table every frame.
+        items = e.detail.items;
     }
+    function handleDndFinalize(e: CustomEvent<{ items: Rule[] }>) {
+        items = e.detail.items;
+        commit();
+    }
+
 </script>
 
 <div class="flex flex-col gap-2 p-2 text-muted-foreground">
-    {#if Object.keys(sort).length}
-        <div class="flex flex-col gap-2 text-muted-foreground">
-            {#each Object.entries(sort) as [fieldName, order]}
-                <div class="flex items-center justify-between text-xs">
-                    <dir class="m-0 flex items-center gap-3 p-0">
-                        <div class="flex gap-1">
-                            <ArrowUp
-                                onclick={() =>
-                                    (sort = moveProperty(
-                                        sort,
-                                        fieldName,
-                                        "up",
-                                    ))}
-                                class="cursor-pointer hover:text-foreground"
-                                size="15"
-                            />
-                            <ArrowDown
-                                onclick={() =>
-                                    (sort = moveProperty(
-                                        sort,
-                                        fieldName,
-                                        "down",
-                                    ))}
-                                class="cursor-pointer hover:text-foreground"
-                                size="15"
-                            />
-                        </div>
-                        <div class="text-foreground font-medium">
-                            {fieldName}
-                        </div>
-                    </dir>
-                    <dir class="m-0 flex items-center gap-2 p-0">
-                        <div class="flex items-center space-x-2">
-                            <Label class="text-xs">Ascending</Label>
-                            <!-- <Switch checked={true} /> -->
-                            <Switch
-                                bind:checked={
-                                    () => sort[fieldName] === "asc",
-                                    (v) =>
-                                        (sort[fieldName] = v ? "asc" : "desc")
-                                }
-                            />
-                        </div>
-                        <Button
-                            onclick={() => delete sort[fieldName]}
-                            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-                            variant="ghost"
-                            size="icon"
-                            Icon={X}
-                        ></Button>
-                    </dir>
+    {#if items.length}
+        <div
+            class="flex flex-col gap-2"
+            use:dndzone={{
+                items,
+                dragDisabled: false,
+                dropTargetStyle: {},
+                flipDurationMs: 150,
+            }}
+            onconsider={handleDndConsider}
+            onfinalize={handleDndFinalize}
+        >
+            {#each items as rule (rule.id)}
+                {@const field = ctx.meta.collections[collectionName].fields[rule.id]}
+                <!-- Single wrapper so the `animate:flip` directive sits
+                     directly under the keyed each. The conditional inside
+                     swaps between the dnd shadow placeholder and the real
+                     row. -->
+                <div animate:flip={{ duration: 150 }}>
+                {#if !field}
+                    <div class="h-7"></div>
+                {:else}
+                    {@const FieldIcon = getFieldIcon(ctx, rule.id, collectionName)}
+                <div class="flex items-center gap-2 text-xs">
+                    <!-- Drag handle. The whole rule row is draggable via
+                         dndzone, but cursor-grab on the handle telegraphs
+                         the intent. -->
+                    <GripVertical
+                        size="15"
+                        class="cursor-grab text-muted-foreground hover:text-foreground"
+                    />
+
+                    <!-- Field-name picker — only fields not used by other
+                         rules are selectable; the current one always is. -->
+                    <Select.Root
+                        type="single"
+                        value={rule.id}
+                        onValueChange={(v) => v && renameField(rule.id, v)}
+                    >
+                        <Select.Trigger class="bg-muted h-7 flex-1 text-xs">
+                            <div class="inline-flex items-center gap-1.5">
+                                <FieldIcon size="13" />
+                                {rule.id}
+                            </div>
+                        </Select.Trigger>
+                        <Select.Content>
+                            {#each getFieldOptionsForRule(rule.id) as optionName}
+                                {@const OptionIcon = getFieldIcon(ctx, optionName, collectionName)}
+                                <Select.Item value={optionName}>
+                                    <div class="inline-flex items-center gap-1.5">
+                                        <OptionIcon size="13" />
+                                        {optionName}
+                                    </div>
+                                </Select.Item>
+                            {/each}
+                        </Select.Content>
+                    </Select.Root>
+
+                    <!-- Direction picker -->
+                    <Select.Root
+                        type="single"
+                        value={rule.direction}
+                        onValueChange={(v) => {
+                            if (v === "asc" || v === "desc") setDirection(rule.id, v);
+                        }}
+                    >
+                        <Select.Trigger class="bg-muted h-7 w-32 text-xs">
+                            {rule.direction === "asc" ? "Ascending" : "Descending"}
+                        </Select.Trigger>
+                        <Select.Content>
+                            <Select.Item value="asc">Ascending</Select.Item>
+                            <Select.Item value="desc">Descending</Select.Item>
+                        </Select.Content>
+                    </Select.Root>
+
+                    <Button
+                        onclick={() => removeRule(rule.id)}
+                        class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+                        variant="ghost"
+                        size="icon"
+                        Icon={X}
+                    ></Button>
+                </div>
+                {/if}
                 </div>
             {/each}
         </div>
@@ -144,25 +212,22 @@
                 class={buttonVariants({
                     variant: "ghost",
                     size: "sm",
+                    class: "text-muted-foreground",
                 })}
             >
                 <Plus />
                 Add a sort rule
             </Popover.Trigger>
-            <Popover.Content class="flex w-48 flex-col p-2">
-                {#each getFieldNames() as fieldName}
-                    {@const FieldIcon = getFieldIcon(ctx, fieldName, collectionName)}
-                    <button
-                        onclick={() => {
-                            sort[fieldName] = "asc";
-                            popoverOpen = false;
-                        }}
-                        class="flex cursor-pointer items-center gap-2 rounded-md p-2 px-3 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
-                    >
-                        <FieldIcon size="15" />
-                        <div>{fieldName}</div>
-                    </button>
-                {/each}
+            <Popover.Content class="w-64 p-2">
+                <FieldPicker
+                    {collectionName}
+                    excludeFields={items.map((r) => r.id)}
+                    placeholder="Pick a field to sort by…"
+                    onPick={(fieldName: string) => {
+                        addRule(fieldName);
+                        popoverOpen = false;
+                    }}
+                />
             </Popover.Content>
         </Popover.Root>
     {:else}

package/dist/components/dataTable/sortButton.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+	// Sort button. Two-stage flow:
+	//   • No sorts yet → typeahead field picker (fast path: just pick a
+	//     field, it lands as asc, popover closes)
+	//   • At least one sort → full multi-rule editor (Sort.svelte) so the
+	//     user can reorder, toggle direction, add more, etc.
 	import * as Popover from "../ui/popover/index.js";
-	import { ArrowDownWideNarrow } from "lucide-svelte";
+	import { ArrowUpDown } from "lucide-svelte";
 	import { buttonVariants } from "../ui/button";
 	import Sort from "./sort.svelte";
+	import FieldPicker from "./fieldPicker.svelte";
 
 	interface Props {
 		collectionName: string;
@@ -11,26 +17,46 @@
 	}
 
 	let { collectionName, sort = $bindable({}), showText }: Props = $props();
+
+	let popoverOpen = $state(false);
+
+	function pick(fieldName: string) {
+		sort = { ...sort, [fieldName]: "asc" };
+		popoverOpen = false;
+	}
 </script>
 
-<Popover.Root>
+<Popover.Root bind:open={popoverOpen}>
 	<Popover.Trigger
 		class={buttonVariants({
 			variant: "ghost",
 			size: "sm",
+			class: "text-muted-foreground",
 		})}
 	>
-		<ArrowDownWideNarrow />
+		<ArrowUpDown />
 		{#if showText}
 			{@const sortRules = Object.keys(sort).length}
 			{#if sortRules}
-				Sorted by {sortRules} rules
+				Sorted by {sortRules} {sortRules === 1 ? "field" : "fields"}
 			{:else}
 				Sort
 			{/if}
 		{/if}
 	</Popover.Trigger>
-	<Popover.Content class="w-screen max-w-[20rem] p-0">
-		<Sort {collectionName} {showText} bind:sort />
-	</Popover.Content>
+	{#if Object.keys(sort).length === 0}
+		<!-- Fast path: typeahead picker. The first selected field starts
+		     the sort; subsequent edits go through the full editor below. -->
+		<Popover.Content class="w-64 p-2">
+			<FieldPicker
+				{collectionName}
+				placeholder="Pick a field to sort by…"
+				onPick={pick}
+			/>
+		</Popover.Content>
+	{:else}
+		<Popover.Content class="w-screen max-w-[24rem] p-0">
+			<Sort {collectionName} {showText} bind:sort />
+		</Popover.Content>
+	{/if}
 </Popover.Root>

package/dist/components/dataTable/table.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" module>
 	interface Column {
 		id: string;
+		label?: string;
 		icon?: any;
 		subtext?: any;
 	}
@@ -223,8 +224,8 @@
 			{:else}
 				<ColumnIcon size="12.5" class="text-muted-foreground" />
 			{/if}
-			<div class="font-bold">{column.id}</div>
-			<div class="text-muted-foreground text-[0.7rem]">
+			<div class="font-bold whitespace-nowrap">{column.label ?? column.id}</div>
+			<div class="text-muted-foreground text-[0.7rem] whitespace-nowrap">
 				{column.subtext}
 			</div>
 		</button>

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

@@ -1,5 +1,6 @@
 interface Column {
     id: string;
+    label?: string;
     icon?: any;
     subtext?: any;
 }

package/dist/components/detailView/create/createManyView.svelte

@@ -60,9 +60,7 @@
             relation.to.collection === parentRecord?.collectionName,
     )?.from.field;
     const createValues = {
-        [refrenceFieldName]: {
-            id: 0,
-        },
+        [refrenceFieldName]: 0,
     };
     let selectedRecordsIds: string[] = $derived(
         entries.filter((entry) => entry.id).map((entry) => entry.id),