@lobb-js/studio 0.11.1 → 0.13.0

package/dist/components/dataTable/dataTable.svelte

@@ -15,6 +15,9 @@
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -40,15 +43,26 @@
         headerLeft,
     }: Props = $props();
 
+    const hasRowActions = $derived(
+        loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
+    );
+
+    let activeTabFilter = $state<any>(undefined);
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: filter ?? {},
+        filter: { ...filter, ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
     });
 
+    $effect(() => {
+        const tabFilter = activeTabFilter;
+        params.filter = { ...filter, ...tabFilter };
+    });
+
     let selectedRecords = $state([]);
     let totalCount = $state(0);
     let data: TableProps["data"] = $state([]);
@@ -130,6 +144,17 @@
         {unifiedBgColor ? unifiedBgColor : ''}
     "
 >
+    {#snippet rowActionsSnippet(entry: Record<string, any>)}
+        <ExtensionsComponents
+            name="listView.entry.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {entry}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
+    {/snippet}
+
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -157,7 +182,7 @@
                 {unifiedBgColor}
                 bind:tableWidth={dataTableWidth}
                 {...tableProps}
-            >
+                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                 {#snippet tools(entry)}
                     <UpdateDetailViewButton
                         {collectionName}

package/dist/components/dataTable/dataTableTabs.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        filter?: any;
+        activeTabFilter?: any;
+    }
+
+    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+
+    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    let activeTab = $state<string | null>(null);
+    let tabCounts = $state<Record<string, number>>({});
+
+    async function loadTabCounts() {
+        if (!tabs) return;
+        const results = await Promise.all(
+            tabs.map(async (tab) => {
+                const res = await lobb.findAll(collectionName, { filter: { ...filter, ...tab.filter }, limit: 1 });
+                const json = await res.json();
+                return { key: tab.id ?? tab.label, count: json.meta.totalCount };
+            })
+        );
+        tabCounts = Object.fromEntries(results.map(({ key, count }) => [key, count]));
+    }
+
+    $effect(() => {
+        loadTabCounts();
+    });
+
+    $effect(() => {
+        if (!tabs) return;
+        const key = (t: typeof tabs[0]) => t.id ?? t.label;
+        const tab = activeTab
+            ? tabs.find((t) => key(t) === activeTab)
+            : tabs.find((t) => t.default) ?? tabs[0];
+        activeTabFilter = tab?.filter;
+    });
+</script>
+
+{#if tabs}
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+        {#each tabs as tab}
+            {@const key = tab.id ?? tab.label}
+            {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}
+            <button
+                onclick={() => activeTab = key}
+                class="inline-flex items-center px-2.5 py-1 text-[11px] rounded-md transition-colors
+                    {isActive
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}"
+            >
+                {tab.label}
+                {#if tabCounts[key] !== undefined}
+                    <span class="ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] {isActive ? 'bg-muted-foreground/20 text-foreground' : 'bg-muted text-muted-foreground'}">
+                        {tabCounts[key]}
+                    </span>
+                {/if}
+            </button>
+        {/each}
+    </div>
+{/if}

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

@@ -0,0 +1,8 @@
+interface Props {
+    collectionName: string;
+    filter?: any;
+    activeTabFilter?: any;
+}
+declare const DataTableTabs: import("svelte").Component<Props, {}, "activeTabFilter">;
+type DataTableTabs = ReturnType<typeof DataTableTabs>;
+export default DataTableTabs;

package/dist/components/dataTable/table.svelte

@@ -32,6 +32,7 @@
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
 		tools?: Snippet<[Entry, number]>;
+		rowActions?: Snippet<[Entry, number]>;
 		collapsible?: Snippet<[Entry, number]>;
 
 		// other
@@ -72,6 +73,7 @@
 		parentWidth,
 		overrideCell,
 		tools,
+		rowActions,
 		collapsible,
 		unifiedBgColor,
 		select,
@@ -82,6 +84,7 @@
 
 	// calculate columns count
 	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const rowActionsExists = $derived(rowActions ? 1 : 0);
 	const columnsLength = columns.length + toolsExists;
 
 	// set table width
@@ -167,8 +170,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength -
-		1}, minmax(auto, 15rem));
+		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
@@ -179,7 +181,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
 			<!-- collapsable toggle -->
@@ -225,6 +227,16 @@
 			</div>
 		</button>
 	{/each}
+	{#if rowActions}
+		<div
+			class="
+				sticky top-0 right-0 z-20
+				flex items-center p-2.5 h-10
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				border-l border-b
+			"
+		></div>
+	{/if}
 	{#if Object.keys(data).length}
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
@@ -292,9 +304,21 @@
 					{/if}
 				</div>
 			{/each}
+			{#if rowActions}
+				<div
+					class="
+						sticky right-0 z-10
+						flex items-center p-2.5 text-xs h-10
+						border-l gap-2
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+					"
+				>
+					{@render rowActions?.(entry, index)}
+				</div>
+			{/if}
 			<!-- nested data -->
 			<div
-				style="grid-column: span {columnsLength};"
+				style="grid-column: span {columnsLength + rowActionsExists};"
 				class="
 					{!showLastColumnBorder ? '' : 'border-r'}
 					{lastRow && !showLastRowBorder ? '' : 'border-b'}

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

@@ -20,6 +20,7 @@ export interface TableProps {
     showLastColumnBorder?: boolean;
     overrideCell?: Snippet<[any, Column, Entry]>;
     tools?: Snippet<[Entry, number]>;
+    rowActions?: Snippet<[Entry, number]>;
     collapsible?: Snippet<[Entry, number]>;
     parentWidth?: number;
     unifiedBgColor?: "bg-muted/30" | "bg-background";

package/dist/components/extensionsComponents.svelte

@@ -21,7 +21,7 @@
 		...props
 	}: Props = $props();
 
-	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
+	const Components = $derived(loadExtensionComponents(ctx, name, filterByExtensions, props));
 </script>
 
 {#if Components.length}

package/dist/components/routes/collections/collection.svelte

@@ -1,30 +1,33 @@
-<script>
-    import { CircleSlash2 } from "lucide-svelte";
+<script lang="ts">
+    import { CircleSlash2, Zap } from "lucide-svelte";
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
     import { getStudioContext } from "../../../context";
     import Singletone from "../../../components/singletone.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
 
-    const { ctx, lobb } = getStudioContext();
+    const { ctx } = getStudioContext();
 
     let { collectionName } = $props();
     let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+    let isVirtualCollection = $derived(ctx.meta.collections[collectionName].virtual);
 
     let containerWidth = $state();
 </script>
 
 <div bind:clientWidth={containerWidth} class="h-full">
     {#if collectionName}
-        <!-- TODO: add support in here for the views for each collection view -->
-        <!-- {#if true}
-            <ExtensionsComponents
-                name="studio.listView"
-                utils={getExtensionUtils(lobb, ctx)}
-            ></ExtensionsComponents>
-        {:else if isSingletonCollection} -->
-        {#if isSingletonCollection}
+        {#if isVirtualCollection}
+            <div class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+                <Zap class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>Virtual collection</div>
+                    <div class="text-xs">This collection has no database table. It exists only as an API endpoint for workflows to intercept.</div>
+                </div>
+                <div class="absolute top-0 left-0 p-2.5">
+                    <SidebarTrigger />
+                </div>
+            </div>
+        {:else if isSingletonCollection}
             <Singletone collectionName={collectionName} />
         {:else}
             <DataTable

package/dist/components/routes/collections/collection.svelte.d.ts

@@ -1,11 +1,5 @@
-export default Collection;
-type Collection = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Collection: import("svelte").Component<{
     collectionName: any;
 }, {}, "">;
-type $$ComponentProps = {
-    collectionName: any;
-};
+type Collection = ReturnType<typeof Collection>;
+export default Collection;

package/dist/components/ui/button/button.svelte

@@ -103,6 +103,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		onclick={handleClick}
+		disabled={showLoading}
 		{...restProps}
 	>
 		{@render innerPart()}

package/dist/extensions/extension.types.d.ts

@@ -73,10 +73,15 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
+export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions`;
+export type ExtensionComponent = any | {
+    component: any;
+    when: (props: Record<string, any>) => boolean;
+};
 export interface Extension {
     name: string;
     onStartup?: (utils: ExtensionUtils) => Promise<void>;
-    components?: Record<string, any>;
+    components?: Partial<Record<ExtensionComponentKey, ExtensionComponent>>;
     dashboardNavs?: DashboardNavs;
 }
 export {};

package/dist/extensions/extensionUtils.d.ts

@@ -4,6 +4,6 @@ import type { CTX } from "../store.types";
 export declare function getComponents(): Components;
 export declare function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils;
 export declare function loadExtensions(lobb: LobbClient, ctx: CTX, extensionMap?: Record<string, any>): Promise<Record<string, Extension>>;
-export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[]): any[];
+export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[], props?: Record<string, any>): any[];
 export declare function executeExtensionsOnStartup(lobb: LobbClient, ctx: CTX): Promise<void>;
 export declare function getDashboardNavs(ctx: CTX): DashboardNavs;

package/dist/extensions/extensionUtils.js

@@ -120,7 +120,7 @@ export function loadExtensions(lobb_1, ctx_1) {
         });
     });
 }
-export function loadExtensionComponents(ctx, name, filterByExtensions) {
+export function loadExtensionComponents(ctx, name, filterByExtensions, props) {
     var components = [];
     for (var _i = 0, _a = Object.entries(ctx.extensions); _i < _a.length; _i++) {
         var _b = _a[_i], extensionName = _b[0], extensionValue = _b[1];
@@ -131,7 +131,14 @@ export function loadExtensionComponents(ctx, name, filterByExtensions) {
             for (var _c = 0, _d = Object.entries(extensionValue.components); _c < _d.length; _c++) {
                 var _e = _d[_c], componentName = _e[0], componentValue = _e[1];
                 if (name.startsWith(componentName)) {
-                    components.push(componentValue);
+                    if (componentValue && typeof componentValue === "object" && "component" in componentValue && "when" in componentValue) {
+                        if (!props || componentValue.when(props)) {
+                            components.push(componentValue.component);
+                        }
+                    }
+                    else {
+                        components.push(componentValue);
+                    }
                 }
             }
         }

package/dist/store.types.d.ts

@@ -1,9 +1,19 @@
 import type { Extension } from "../extensions/extension.types";
+interface CollectionTab {
+    id?: string;
+    label: string;
+    filter?: Record<string, any>;
+    default?: boolean;
+}
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
+    virtual?: boolean;
+    ui?: {
+        tabs?: CollectionTab[];
+    };
 }
 type Collections = Record<string, Collection>;
 interface Meta {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.18.0",
+    "@lobb-js/core": "^0.19.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",

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

@@ -15,6 +15,9 @@
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
+    import Tabs from "./dataTableTabs.svelte";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -40,15 +43,26 @@
         headerLeft,
     }: Props = $props();
 
+    const hasRowActions = $derived(
+        loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
+    );
+
+    let activeTabFilter = $state<any>(undefined);
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: filter ?? {},
+        filter: { ...filter, ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
     });
 
+    $effect(() => {
+        const tabFilter = activeTabFilter;
+        params.filter = { ...filter, ...tabFilter };
+    });
+
     let selectedRecords = $state([]);
     let totalCount = $state(0);
     let data: TableProps["data"] = $state([]);
@@ -130,6 +144,17 @@
         {unifiedBgColor ? unifiedBgColor : ''}
     "
 >
+    {#snippet rowActionsSnippet(entry: Record<string, any>)}
+        <ExtensionsComponents
+            name="listView.entry.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {entry}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
+    {/snippet}
+
+    <Tabs {collectionName} {filter} bind:activeTabFilter />
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -157,7 +182,7 @@
                 {unifiedBgColor}
                 bind:tableWidth={dataTableWidth}
                 {...tableProps}
-            >
+                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                 {#snippet tools(entry)}
                     <UpdateDetailViewButton
                         {collectionName}

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
+
+    interface Props {
+        collectionName: string;
+        filter?: any;
+        activeTabFilter?: any;
+    }
+
+    let { collectionName, filter, activeTabFilter = $bindable() }: Props = $props();
+
+    const tabs = ctx.meta.collections[collectionName].ui?.tabs;
+    let activeTab = $state<string | null>(null);
+    let tabCounts = $state<Record<string, number>>({});
+
+    async function loadTabCounts() {
+        if (!tabs) return;
+        const results = await Promise.all(
+            tabs.map(async (tab) => {
+                const res = await lobb.findAll(collectionName, { filter: { ...filter, ...tab.filter }, limit: 1 });
+                const json = await res.json();
+                return { key: tab.id ?? tab.label, count: json.meta.totalCount };
+            })
+        );
+        tabCounts = Object.fromEntries(results.map(({ key, count }) => [key, count]));
+    }
+
+    $effect(() => {
+        loadTabCounts();
+    });
+
+    $effect(() => {
+        if (!tabs) return;
+        const key = (t: typeof tabs[0]) => t.id ?? t.label;
+        const tab = activeTab
+            ? tabs.find((t) => key(t) === activeTab)
+            : tabs.find((t) => t.default) ?? tabs[0];
+        activeTabFilter = tab?.filter;
+    });
+</script>
+
+{#if tabs}
+    <div class="flex items-center gap-1 px-3 py-1.5 border-b shrink-0 bg-background">
+        {#each tabs as tab}
+            {@const key = tab.id ?? tab.label}
+            {@const isActive = activeTab ? activeTab === key : (tab.default ?? tabs[0] === tab)}
+            <button
+                onclick={() => activeTab = key}
+                class="inline-flex items-center px-2.5 py-1 text-[11px] rounded-md transition-colors
+                    {isActive
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'}"
+            >
+                {tab.label}
+                {#if tabCounts[key] !== undefined}
+                    <span class="ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] {isActive ? 'bg-muted-foreground/20 text-foreground' : 'bg-muted text-muted-foreground'}">
+                        {tabCounts[key]}
+                    </span>
+                {/if}
+            </button>
+        {/each}
+    </div>
+{/if}

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

@@ -32,6 +32,7 @@
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
 		tools?: Snippet<[Entry, number]>;
+		rowActions?: Snippet<[Entry, number]>;
 		collapsible?: Snippet<[Entry, number]>;
 
 		// other
@@ -72,6 +73,7 @@
 		parentWidth,
 		overrideCell,
 		tools,
+		rowActions,
 		collapsible,
 		unifiedBgColor,
 		select,
@@ -82,6 +84,7 @@
 
 	// calculate columns count
 	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const rowActionsExists = $derived(rowActions ? 1 : 0);
 	const columnsLength = columns.length + toolsExists;
 
 	// set table width
@@ -167,8 +170,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength -
-		1}, minmax(auto, 15rem));
+		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
@@ -179,7 +181,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
 			<!-- collapsable toggle -->
@@ -225,6 +227,16 @@
 			</div>
 		</button>
 	{/each}
+	{#if rowActions}
+		<div
+			class="
+				sticky top-0 right-0 z-20
+				flex items-center p-2.5 h-10
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				border-l border-b
+			"
+		></div>
+	{/if}
 	{#if Object.keys(data).length}
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
@@ -292,9 +304,21 @@
 					{/if}
 				</div>
 			{/each}
+			{#if rowActions}
+				<div
+					class="
+						sticky right-0 z-10
+						flex items-center p-2.5 text-xs h-10
+						border-l gap-2
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+					"
+				>
+					{@render rowActions?.(entry, index)}
+				</div>
+			{/if}
 			<!-- nested data -->
 			<div
-				style="grid-column: span {columnsLength};"
+				style="grid-column: span {columnsLength + rowActionsExists};"
 				class="
 					{!showLastColumnBorder ? '' : 'border-r'}
 					{lastRow && !showLastRowBorder ? '' : 'border-b'}

package/src/lib/components/extensionsComponents.svelte

@@ -21,7 +21,7 @@
 		...props
 	}: Props = $props();
 
-	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
+	const Components = $derived(loadExtensionComponents(ctx, name, filterByExtensions, props));
 </script>
 
 {#if Components.length}

package/src/lib/components/routes/collections/collection.svelte

@@ -1,30 +1,33 @@
-<script>
-    import { CircleSlash2 } from "lucide-svelte";
+<script lang="ts">
+    import { CircleSlash2, Zap } from "lucide-svelte";
     import DataTable from "../../../components/dataTable/dataTable.svelte";
     import SidebarTrigger from "../../../components/sidebar/sidebarTrigger.svelte";
     import { getStudioContext } from "../../../context";
     import Singletone from "../../../components/singletone.svelte";
-    import { getExtensionUtils } from "../../../extensions/extensionUtils";
-    import ExtensionsComponents from "../../../components/extensionsComponents.svelte";
 
-    const { ctx, lobb } = getStudioContext();
+    const { ctx } = getStudioContext();
 
     let { collectionName } = $props();
     let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+    let isVirtualCollection = $derived(ctx.meta.collections[collectionName].virtual);
 
     let containerWidth = $state();
 </script>
 
 <div bind:clientWidth={containerWidth} class="h-full">
     {#if collectionName}
-        <!-- TODO: add support in here for the views for each collection view -->
-        <!-- {#if true}
-            <ExtensionsComponents
-                name="studio.listView"
-                utils={getExtensionUtils(lobb, ctx)}
-            ></ExtensionsComponents>
-        {:else if isSingletonCollection} -->
-        {#if isSingletonCollection}
+        {#if isVirtualCollection}
+            <div class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground">
+                <Zap class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>Virtual collection</div>
+                    <div class="text-xs">This collection has no database table. It exists only as an API endpoint for workflows to intercept.</div>
+                </div>
+                <div class="absolute top-0 left-0 p-2.5">
+                    <SidebarTrigger />
+                </div>
+            </div>
+        {:else if isSingletonCollection}
             <Singletone collectionName={collectionName} />
         {:else}
             <DataTable

package/src/lib/components/ui/button/button.svelte

@@ -103,6 +103,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		onclick={handleClick}
+		disabled={showLoading}
 		{...restProps}
 	>
 		{@render innerPart()}

package/src/lib/extensions/extension.types.ts

@@ -83,10 +83,26 @@ export interface ExtensionProps {
     [key: string]: any;
 }
 
+// TODO: instead of doing them this way. you can make the components generic and have static keys and we can pass some dynamic data so that we for example extend the list view
+export type ExtensionComponentKey =
+    | `pages.${string}`
+    | "studio.listView"
+    | `dvFields.topRight.${string}.${string}`
+    | `detailView.update.subRecords.${string}`
+    | `detailView.create.subRecords.${string}`
+    | `detailView.fields.topRight.${string}.${string}`
+    | `detailView.fields.foreignKey.${string}`
+    | `listView.entry.children.${string}`
+    | `listView.entry.actions`;
+
+export type ExtensionComponent =
+    | any
+    | { component: any; when: (props: Record<string, any>) => boolean };
+
 // extension exported object
 export interface Extension {
     name: string;
     onStartup?: (utils: ExtensionUtils) => Promise<void>;
-    components?: Record<string, any>;
+    components?: Partial<Record<ExtensionComponentKey, ExtensionComponent>>;
     dashboardNavs?: DashboardNavs;
 }

package/src/lib/extensions/extensionUtils.ts

@@ -88,6 +88,7 @@ export function loadExtensionComponents(
   ctx: CTX,
   name: string,
   filterByExtensions?: string[],
+  props?: Record<string, any>,
 ): any[] {
   const components = [];
   for (const [extensionName, extensionValue] of Object.entries(
@@ -101,7 +102,13 @@ export function loadExtensionComponents(
         extensionValue.components,
       )) {
         if (name.startsWith(componentName)) {
-          components.push(componentValue);
+          if (componentValue && typeof componentValue === "object" && "component" in componentValue && "when" in componentValue) {
+            if (!props || componentValue.when(props)) {
+              components.push(componentValue.component);
+            }
+          } else {
+            components.push(componentValue);
+          }
         }
       }
     }

package/src/lib/store.types.ts

@@ -1,10 +1,21 @@
 import type { Extension } from "../extensions/extension.types";
 
+interface CollectionTab {
+    id?: string;
+    label: string;
+    filter?: Record<string, any>;
+    default?: boolean;
+}
+
 interface Collection {
     category: string;
     owner: string;
     fields: Record<string, any>;
     singleton: boolean;
+    virtual?: boolean;
+    ui?: {
+        tabs?: CollectionTab[];
+    };
 }
 type Collections = Record<string, Collection>;
 

package/dist/components/loadingTypesForMonacoEditor.d.ts

@@ -1,7 +0,0 @@
-/**
- * TODO
- *
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-export {};

package/dist/components/loadingTypesForMonacoEditor.js

@@ -1,72 +0,0 @@
-/**
- * TODO
- *
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { gunzipSync } from "fflate";
-import { untar } from "@andrewbranch/untar.js";
-function extractTgz(buffer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var tarBuffer, cleanBuffer, files, dtsFiles, _i, files_1, file, content;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    tarBuffer = gunzipSync(new Uint8Array(buffer));
-                    cleanBuffer = tarBuffer.buffer.slice(tarBuffer.byteOffset, tarBuffer.byteOffset + tarBuffer.byteLength);
-                    return [4 /*yield*/, untar(cleanBuffer)];
-                case 1:
-                    files = _a.sent();
-                    dtsFiles = [];
-                    for (_i = 0, files_1 = files; _i < files_1.length; _i++) {
-                        file = files_1[_i];
-                        if (file.filename.endsWith(".d.ts")) {
-                            content = new TextDecoder().decode(file.fileData);
-                            dtsFiles.push({ name: file.filename, content: content });
-                        }
-                    }
-                    return [2 /*return*/, dtsFiles];
-            }
-        });
-    });
-}
-var tgzURL = "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz";
-var response = await fetch(tgzURL);
-var arrayBuffer = await response.arrayBuffer();
-var files = await extractTgz(arrayBuffer);

package/src/lib/components/loadingTypesForMonacoEditor.ts

@@ -1,36 +0,0 @@
-/**
- * TODO
- * 
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-
-import { gunzipSync } from "fflate";
-import { untar } from "@andrewbranch/untar.js";
-
-async function extractTgz(buffer: ArrayBuffer) {
-    const tarBuffer = gunzipSync(new Uint8Array(buffer));
-
-    const cleanBuffer = tarBuffer.buffer.slice(
-        tarBuffer.byteOffset,
-        tarBuffer.byteOffset + tarBuffer.byteLength,
-    );
-    const files = await untar(cleanBuffer as ArrayBuffer);
-
-    const dtsFiles = [];
-
-    for (const file of files) {
-        if (file.filename.endsWith(".d.ts")) {
-            const content = new TextDecoder().decode(file.fileData);
-            dtsFiles.push({ name: file.filename, content });
-        }
-    }
-
-    return dtsFiles;
-}
-
-const tgzURL = "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz";
-const response = await fetch(tgzURL);
-const arrayBuffer = await response.arrayBuffer();
-
-const files = await extractTgz(arrayBuffer);