@lobb-js/studio 0.42.0 → 0.43.0

package/dist/components/polymorphicInput.svelte

@@ -4,16 +4,17 @@
     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 { ArrowLeft, Link, ChevronDown, Plus, Pencil, Unlink, Trash, RotateCcw, RefreshCw } 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;
         idField: string;
+        virtualField: string;
         targetCollections: string[];
         entry: Record<string, any>;
         destructive?: boolean;
@@ -22,39 +23,52 @@
     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 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)));
+
+    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'       :
+        ''
+    );
 
-    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;
-    });
+    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;
         if (entry[collectionField] !== col) {
-            entry = { ...entry, [collectionField]: col, [idField]: null };
+            entry = { ...entry, [collectionField]: col, [idField]: null, [virtualField]: undefined };
         }
     }
 
@@ -65,20 +79,60 @@
     }
 
     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 };
+        }
+    }
+
+    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 {destructive ? 'border-destructive bg-destructive/10' : ''}">
+<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>
@@ -107,39 +161,32 @@
         </Popover.Content>
     </Popover.Root>
 
-    <!-- Transparent id input -->
+    <!-- ID input (only editable when real value or empty) -->
     <input
         placeholder="NULL"
         type="number"
         class="min-w-0 flex-1 bg-transparent outline-none text-xs placeholder:text-muted-foreground"
-        value={selectedId ?? ""}
+        value={isStagedUnlink || isStagedDelete ? (virtualVal?.id ?? '') : (selectedId ?? "")}
+        disabled={isPendingCreate || isPendingEdit}
         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)}
-        >
+    <!-- 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}
+        <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 +194,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 +214,17 @@
     <CreateDetailView
         collectionName={selectedCollection}
         onCreated={onPolyCreated}
+        onChanges={() => {}}
         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/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.43.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/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";
@@ -135,17 +137,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 +222,7 @@
         (ctx.meta.collections[collectionName]?.children ?? [])
             .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
+    let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
     // requests the data from the server when the params is changed
     $effect(() => {
@@ -453,7 +456,6 @@
                     <Table
                         {data}
                         {columns}
-                        showCollapsible={doesCollectionHasChildren}
                         selectByColumn="id"
                         showLastRowBorder={true}
                         showLastColumnBorder={true}
@@ -463,6 +465,19 @@
                         {...tableProps}
                         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}
@@ -524,15 +539,6 @@
                                 refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
-                        {#snippet collapsible(entry)}
-                            <ListViewChildren
-                                {collectionName}
-                                recordId={entry.id}
-                                width={dataTableWidth > dataTableContainerWidth
-                                    ? dataTableContainerWidth
-                                    : dataTableWidth}
-                            />
-                        {/snippet}
                     </Table>
                 {/if}
             </div>
@@ -546,3 +552,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/listViewChildren.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import { ChevronRight, Table, Plus, Link, ArrowLeftRight, GitFork } from "lucide-svelte";
+    import { Table, Plus } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -11,93 +11,76 @@
     interface Props {
         collectionName: string;
         recordId: string;
-        width: number;
+        width?: number;
     }
 
-    let { collectionName, recordId, width }: Props = $props();
+    let { collectionName, recordId, width = 0 }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
 
-    let expandedRows: boolean[] = $state(new Array(children.length).fill(false));
-    let refreshDataTable = $state(true);
-    let tableHeaderWidth = $state(0);
+    let activeTab = $state(children[0]?.collection ?? '');
+    let refreshKey = $state(0);
+    let counts = $state<Record<string, number>>({});
+
+    const activeChild = $derived(children.find((c: any) => c.collection === activeTab));
 </script>
 
-<div class="flex" style="width: {width}px;">
-    <div
-        class="flex justify-center border-r bg-background"
-        style="width: 40px"
-    ></div>
-    <div class="flex-1 flex flex-col">
-        {#each children as child, index}
-            {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden bg-background">
-                <div
-                    bind:clientWidth={tableHeaderWidth}
-                    class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
+<div class="flex flex-col h-full overflow-hidden">
+    <!-- Tab bar -->
+    <div class="flex border-b shrink-0 overflow-x-auto">
+        {#each children as child}
+            <button
+                class="flex items-center gap-1.5 px-4 h-10 text-xs font-medium whitespace-nowrap border-b-2 transition-colors
+                    {activeTab === child.collection
+                        ? 'border-foreground text-foreground'
+                        : 'border-transparent text-muted-foreground hover:text-foreground'}"
+                onclick={() => { activeTab = child.collection; }}
+            >
+                <Table size="11" class="opacity-50" />
+                {child.collection}
+                {#if counts[child.collection] !== undefined}
+                    <span class="rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">{counts[child.collection]}</span>
+                {/if}
+            </button>
+        {/each}
+        <!-- Create button for FK children -->
+        {#if activeChild?.type === "fk"}
+            <div class="ml-auto flex items-center px-2">
+                <CreateDetailViewButton
+                    collectionName={activeChild.collection}
+                    variant="ghost"
+                    size="sm"
+                    Icon={Plus}
+                    values={{ [activeChild.field]: recordId }}
+                    onSuccessfullSave={async () => { refreshKey++; }}
                 >
-                    <button
-                        class="flex gap-2 px-2 flex-1 h-full items-center"
-                        onclick={() => { expandedRows[index] = !expandedRows[index]; }}
+                    Create
+                </CreateDetailViewButton>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Tab content — render all but hide inactive so counts load for all tabs -->
+    <div class="flex-1 overflow-hidden relative">
+        {#each children as child}
+            <div class="absolute inset-0 {activeTab === child.collection ? '' : 'invisible pointer-events-none'}">
+                {#key refreshKey}
+                    <ExtensionsComponents
+                        name="listView.entry.children.{child.collection}"
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: recordId }}
+                        utils={getExtensionUtils(lobb, ctx)}
                     >
-                        <ChevronRight
-                            size="17.5"
-                            class="text-muted-foreground transition-transform"
-                            style={expandedRows[index] ? "transform: rotate(90deg);" : "transform: rotate(0deg);"}
+                        <DataTable
+                            collectionName={child.collection}
+                            searchParams={{ children_of: collectionName, parent_id: recordId }}
+                            showDelete={child.type === "fk" || child.type === "m2m"}
+                            tableProps={{ showLastRowBorder: true, showLastColumnBorder: true }}
+                            onDataLoad={(total) => { counts[child.collection] = total; }}
                         />
-                        <Table size="17.5" class="text-muted-foreground" />
-                        <div class="text-muted-foreground">{child.collection}</div>
-                        {#if child.type === "fk"}
-                            <span title="Direct (FK)"><Link size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "m2m"}
-                            <span title="Many to Many"><ArrowLeftRight size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "polymorphic"}
-                            <span title="Polymorphic"><GitFork size="13" class="text-muted-foreground/50" /></span>
-                        {/if}
-                    </button>
-                    {#if child.type === "fk"}
-                        <div class="flex items-center px-2">
-                            <CreateDetailViewButton
-                                collectionName={child.collection}
-                                variant="ghost"
-                                size="sm"
-                                Icon={Plus}
-                                values={{ [child.field]: recordId }}
-                                onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}
-                            >
-                                Create
-                            </CreateDetailViewButton>
-                        </div>
-                    {/if}
-                </div>
-                {#if expandedRows[index]}
-                    <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
-                        <div
-                            class="border-r"
-                            style="width: 100vw; max-width: 40px"
-                        ></div>
-                        <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
-                            {#key refreshDataTable}
-                                <ExtensionsComponents
-                                    name="listView.entry.children.{child.collection}"
-                                    collectionName={child.collection}
-                                    searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                >
-                                    <DataTable
-                                        collectionName={child.collection}
-                                        searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                        showHeader={false}
-                                        showFooter={false}
-                                        showDelete={child.type === "fk"}
-                                        tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
-                                    />
-                                </ExtensionsComponents>
-                            {/key}
-                        </div>
-                    </div>
-                {/if}
+                    </ExtensionsComponents>
+                {/key}
             </div>
         {/each}
     </div>