@lobb-js/studio 0.1.33 → 0.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/lib/components/Studio.svelte

@@ -16,11 +16,11 @@
         loadExtensions,
     } from "$lib/extensions/extensionUtils";
     import { mediaQueries } from "$lib/utils";
-    import Home from "../../routes/home.svelte";
-    import DataModel from "../../routes/data_model/dataModel.svelte";
-    import Collections from "../../routes/collections/collections.svelte";
-    import Workflows from "../../routes/workflows/workflows.svelte";
-    import Extension from "../../routes/extensions/extension.svelte";
+    import Home from "./routes/home.svelte";
+    import DataModel from "./routes/data_model/dataModel.svelte";
+    import Collections from "./routes/collections/collections.svelte";
+    import Workflows from "./routes/workflows/workflows.svelte";
+    import Extension from "./routes/extensions/extension.svelte";
 
     interface StudioProps {
       extensions?: any[];

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

@@ -0,0 +1,46 @@
+<script>
+    import { CircleSlash2 } from "lucide-svelte";
+    import DataTable from "$lib/components/dataTable/dataTable.svelte";
+    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+    import { ctx } from "$lib/store.svelte";
+  import Singletone from "$lib/components/singletone.svelte";
+
+    let { collectionName } = $props();
+    let isSingletonCollection = $derived(ctx.meta.collections[collectionName].singleton);
+
+    let containerWidth = $state();
+</script>
+
+<div bind:clientWidth={containerWidth} class="h-full">
+    {#if collectionName}
+        {#if isSingletonCollection}
+            <Singletone collectionName={collectionName} />
+        {:else}
+            <DataTable
+                {collectionName}
+                tableProps={{
+                    parentWidth: containerWidth,
+                }}
+            >
+                {#snippet headerLeft()}
+                    <SidebarTrigger />
+                {/snippet}
+            </DataTable>
+        {/if}
+    {:else}
+        <div
+            class="relative flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+        >
+            <CircleSlash2 class="opacity-50" size="50" />
+            <div class="flex flex-col items-center justify-center">
+                <div>No collection selected</div>
+                <div class="text-xs">
+                    Select a collection to view its entries or create new ones
+                </div>
+            </div>
+            <div class="absolute top-0 left-0 p-2.5">
+                <SidebarTrigger />
+            </div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { SideBarData } from "$lib/components/sidebar/sidebarElements.svelte";
+    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import Collection from "./collection.svelte";
+    import { Table } from "lucide-svelte";
+
+    let { collectionName } = $props();
+
+    const collectionsList = $state(getCollectionsList());
+
+    function getCollectionsList() {
+        const collections = ctx.meta.collections;
+        let collectionsOwners: SideBarData = Object.entries(collections).map(
+            ([collectionName, collectionValue]) => {
+                return {
+                    name: collectionName,
+                    path: collectionValue.category ?? collectionValue.owner,
+                    icon: Table,
+                    href: `/collections/${collectionName}`,
+                };
+            },
+        );
+
+        // updating the path from '__project' and '__core' to a more readable names
+        collectionsOwners = collectionsOwners.map((item) => {
+            if (item.path === "__project") {
+                item.path = "project";
+            } else if (item.path === "__core") {
+                item.path = "core";
+            }
+            return item;
+        });
+
+        return collectionsOwners;
+    }
+</script>
+
+<Sidebar title="Collections" data={collectionsList}>
+    {#key collectionName}
+        <Collection {collectionName} />
+    {/key}
+</Sidebar>

package/src/lib/components/routes/collections/collections.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Collections: import("svelte").Component<{
+    collectionName: any;
+}, {}, "">;
+type Collections = ReturnType<typeof Collections>;
+export default Collections;

package/src/lib/components/routes/data_model/dataModel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { SvelteFlowProvider } from "@xyflow/svelte";
+    import Flow from "./flow.svelte";
+    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+    import { location } from "@wjfe/n-savant";
+    import SyncManager from "./syncManager.svelte";
+    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+
+    const currentPage = $derived(location.url.pathname.split("/")[2]);
+</script>
+
+<Sidebar
+    title="Data Model"
+    showSearch={false}
+    data={[
+        {
+            name: "graph",
+            href: "/datamodel/graph",
+        },
+        {
+            name: "query_editor",
+            href: "/datamodel/query_editor",
+        },
+    ]}
+>
+    <div class="relative h-full w-full">
+        {#if currentPage === "graph"}
+            <SvelteFlowProvider>
+                <div style:width="100%" style:height="100%">
+                    <Flow />
+                </div>
+            </SvelteFlowProvider>
+        {:else if currentPage === "query_editor"}
+            <SyncManager />
+        {/if}
+        <div class="absolute top-0 left-0 p-2.5">
+            <SidebarTrigger />
+        </div>
+    </div>
+</Sidebar>

package/src/lib/components/routes/data_model/dataModel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const DataModel: import("svelte").Component<Record<string, never>, {}, "">;
+type DataModel = ReturnType<typeof DataModel>;
+export default DataModel;

package/src/lib/components/routes/data_model/flow.css

@@ -0,0 +1,22 @@
+.svelte-flow {
+  --xy-edge-stroke-default: hsl(var(--muted-foreground));
+  --xy-edge-stroke-selected-default: hsl(var(--primary));
+  --xy-connectionline-stroke-default: hsl(var(--primary));
+  --xy-attribution-background-color-default: transparent;
+  --xy-minimap-background-color-default: hsl(var(--background));
+  --xy-minimap-mask-background-color-default: hsl(var(--primary) / 0.1);
+  --xy-minimap-node-background-color-default: hsl(var(--primary) / 0.2);
+  --xy-background-color-default: hsl(var(--soft));
+  --xy-background-pattern-dots-color-default: hsl(var(--muted-foreground));
+  --xy-background-pattern-lines-color-default: hsl(var(--background));
+  --xy-background-pattern-cross-color-default: hsl(var(--soft));
+  --xy-node-border-default: 1px solid hsl(var(--primary) / 0.25);
+  --xy-node-background-color-default: hsl(var(--background));
+  --xy-node-boxshadow-selected-default: 0 0 0 0.5px hsl(var(--primary) / 0.5);
+  --xy-handle-background-color-default: hsl(var(--primary));
+  --xy-handle-border-color-default: hsl(var(--background));
+  --xy-controls-button-background-color-default: hsl(var(--background));
+  --xy-controls-button-background-color-hover-default: hsl(var(--muted));
+  --xy-controls-button-border-color-default: hsl(var(--muted));
+  --xy-edge-label-background-color-default: hsl(var(--background));
+}

package/src/lib/components/routes/data_model/flow.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import "@xyflow/svelte/dist/style.css";
+    import "./flow.css";
+
+    import type { Node, Edge } from "@xyflow/svelte";
+
+    import {
+        SvelteFlow,
+        Background,
+        MiniMap,
+        Controls,
+        useSvelteFlow,
+    } from "@xyflow/svelte";
+    import { getLayoutedElements } from "./utils";
+    import { onMount } from "svelte";
+    import { ctx } from "$lib/store.svelte";
+
+    const { fitView } = useSvelteFlow();
+
+    let nodes = $state.raw<Node[]>(generateNodes());
+    let edges = $state.raw<Edge[]>(generateEdges());
+
+    onMount(() => {
+        setTimeout(() => {
+            onLayout();
+        }, 0);
+    });
+
+    function generateNodes() {
+        const localNodes: Node[] = [];
+
+        for (const [collectionName, collectionValue] of Object.entries(
+            ctx.meta.collections,
+        )) {
+            if (collectionValue.owner !== "__project") {
+                continue;
+            }
+
+            localNodes.push({
+                id: collectionName,
+                data: { label: collectionName },
+                position: { x: 0, y: 0 },
+            });
+        }
+
+        return localNodes;
+    }
+
+    function generateEdges() {
+        const localEdges: Edge[] = [];
+
+        const relations = ctx.meta.relations;
+        for (let index = 0; index < relations.length; index++) {
+            const relation = relations[index];
+            localEdges.push({
+                id: `${relation.from.collection}_${relation.to.collection}`,
+                source: relation.from.collection,
+                target: relation.to.collection,
+                animated: true,
+            });
+        }
+
+        return localEdges;
+    }
+
+    function onLayout() {
+        const layouted = getLayoutedElements(nodes, edges);
+
+        nodes = [...layouted.nodes];
+        edges = [...layouted.edges];
+
+        fitView({
+            padding: 0.5,
+        });
+    }
+</script>
+
+<SvelteFlow bind:nodes bind:edges>
+    <Background />
+    <MiniMap />
+    <Controls />
+</SvelteFlow>

package/src/lib/components/routes/data_model/flow.svelte.d.ts

@@ -0,0 +1,5 @@
+import "@xyflow/svelte/dist/style.css";
+import "./flow.css";
+declare const Flow: import("svelte").Component<Record<string, never>, {}, "">;
+type Flow = ReturnType<typeof Flow>;
+export default Flow;

package/src/lib/components/routes/data_model/syncManager.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import DiffViewer from "$lib/components/diffViewer.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { onMount } from "svelte";
+    import stringify from "json-stable-stringify";
+    import MonacoEditor from "$lib/components/monacoEditor.svelte";
+    import Table from "$lib/components/dataTable/table.svelte";
+    import Button from "$lib/components/ui/button/button.svelte";
+    import { LoaderCircle, SendHorizontal } from "lucide-svelte";
+    import { lobb } from "$lib";
+
+    let configSchema: string = $state("");
+    let dbSchema: string = $state("");
+    let sqlPrompt = $state("");
+    let sqlResult = $state([]);
+
+    onMount(() => {
+        loadSchemas();
+    });
+
+    async function loadSchemas() {
+        configSchema = "";
+        dbSchema = "";
+        const response = await fetch(`${ctx.lobbUrl}/api/schema/diff`);
+        const result = await response.json();
+        configSchema = stringify(result.dbSchema, {
+            space: 2,
+        }) as string;
+        dbSchema = stringify(result.configSchema, {
+            space: 2,
+        }) as string;
+    }
+
+    async function handleExecute() {
+        const response = await lobb.createOne("core_query", {
+            query: sqlPrompt,
+        });
+        const result = await response.json();
+        sqlResult = result.data;
+        loadSchemas();
+    }
+</script>
+
+<div class="h-[50%] border-b">
+    {#if configSchema && dbSchema}
+        <DiffViewer
+            type="json"
+            original={configSchema}
+            modified={dbSchema}
+            class="h-full rounded-none border-0"
+        />
+    {:else}
+        <div class="flex justify-center items-center h-full gap-2">
+            <LoaderCircle class="animate-spin" />
+            <div>loading...</div>
+        </div>
+    {/if}
+</div>
+<div class="flex h-[50%] w-full">
+    <div class="h-full flex-1 flex flex-col border-r">
+        <div
+            class="h-10 flex items-center px-2 bg-background border-b justify-between"
+        >
+            <div>Query Editor</div>
+            <Button
+                class="h-7 px-3 text-xs font-normal"
+                Icon={SendHorizontal}
+                onclick={handleExecute}
+            >
+                Execute
+            </Button>
+        </div>
+        <MonacoEditor
+            type="sql"
+            name="prompt"
+            bind:value={sqlPrompt}
+            class="flex-1 rounded-none border-0"
+        />
+    </div>
+    <div class="flex-1">
+        {#if Array.isArray(sqlResult) && sqlResult.length}
+            <Table
+                data={sqlResult}
+                showLastRowBorder={true}
+                showLastColumnBorder={true}
+            />
+        {:else}
+            <div class="flex flex-1 h-full items-center justify-center">
+                No results
+            </div>
+        {/if}
+    </div>
+</div>

package/src/lib/components/routes/data_model/syncManager.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SyncManager: import("svelte").Component<Record<string, never>, {}, "">;
+type SyncManager = ReturnType<typeof SyncManager>;
+export default SyncManager;

package/src/lib/components/routes/data_model/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getLayoutedElements(nodes: any[], edges: any[]): {
+    nodes: any[];
+    edges: any[];
+};

package/src/lib/components/routes/data_model/utils.ts

@@ -0,0 +1,35 @@
+import Dagre from '@dagrejs/dagre';
+
+export function getLayoutedElements(nodes: any[], edges: any[]) {
+    const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+    g.setGraph({ rankdir: "LR" });
+
+    edges.forEach((edge) => g.setEdge(edge.source, edge.target));
+    nodes.forEach((node) => {
+        return g.setNode(node.id, {
+            ...node,
+            width: node.measured?.width ?? 0,
+            height: node.measured?.height ?? 0,
+        });
+    });
+
+    Dagre.layout(g);
+
+    return {
+        nodes: nodes.map((node) => {
+            const position = g.node(node.id);
+            // We are shifting the dagre node position (anchor=center center) to the top left
+            // so it matches the Svelte Flow node anchor point (top left).
+            const x = position.x - (node.measured?.width ?? 0) / 2;
+            const y = position.y - (node.measured?.height ?? 0) / 2;
+
+            return {
+                ...node,
+                position: { x, y },
+                targetPosition: "left",
+                sourcePosition: "right",
+            };
+        }),
+        edges,
+    };
+}

package/src/lib/components/routes/extensions/extension.svelte

@@ -0,0 +1,16 @@
+<script>
+    import ExtensionsComponents from "$lib/components/extensionsComponents.svelte";
+    import { getExtensionUtils } from "$lib/extensions/extensionUtils";
+
+    let { extension, page } = $props();
+</script>
+
+<div class="grid overflow-auto bg-background">
+    {#key extension && page}
+        <ExtensionsComponents
+            name="pages.{page}"
+            utils={getExtensionUtils()}
+            filterByExtensions={[extension]}
+        />
+    {/key}
+</div>

package/src/lib/components/routes/home.svelte

@@ -0,0 +1,36 @@
+<script>
+    import Button from "$lib/components/ui/button/button.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { location } from "@wjfe/n-savant";
+    import { ArrowRight } from "lucide-svelte";
+</script>
+
+<div class="flex flex-col">
+    <div
+        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+    >
+        <div class="flex flex-col items-center justify-center p-4">
+            <div class="text-3xl">Welcome to Lobb!</div>
+            <div class="text-xs text-center">
+                Your journey starts here. Explore and make the most of your
+                experience.
+            </div>
+        </div>
+        <div class="flex flex-col items-center justify-center">
+            <Button
+                Icon={ArrowRight}
+                variant="outline"
+                class="h-7 px-3 text-xs font-normal"
+                onclick={() => location.navigate("/collections")}
+            >
+                Go to collections
+            </Button>
+        </div>
+    </div>
+    <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
+        <div class="flex flex-col text-end">
+            <div>studio: v{ctx.studioVersion}</div>
+            <div>core: v{ctx.meta.version}</div>
+        </div>
+    </div>
+</div>

package/src/lib/components/routes/workflows/workflows.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+    import type { SideBarData } from "$lib/components/sidebar/sidebarElements.svelte";
+    import WorkflowEditor, {
+        type WorkflowEntry,
+    } from "$lib/components/workflowEditor.svelte";
+    import { lobb } from "$lib";
+    import Sidebar from "$lib/components/sidebar/sidebar.svelte";
+    import Button from "$lib/components/ui/button/button.svelte";
+    import { ctx } from "$lib/store.svelte";
+    import { location } from "@wjfe/n-savant";
+    import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
+    import { onMount } from "svelte";
+    import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
+    import SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+
+    let { workflowName } = $props();
+
+    let sidebarData: SideBarData | null = $state(null);
+    let workflowEntry: WorkflowEntry | null = $state(null);
+
+    onMount(async () => {
+        getSidebarData();
+    });
+
+    $effect(() => {
+        fetchWorkflowData(workflowName);
+    });
+
+    async function getSidebarData() {
+        const response = await lobb.findAll("core_workflows", {});
+        const result = await response.json();
+        const workflows: any[] = result.data;
+        sidebarData = workflows.map((workflow) => {
+            return {
+                name: workflow.name,
+                path: workflow.directory,
+                onclick: () => {
+                    location.navigate(`/workflows/${workflow.name}`);
+                },
+                meta: {
+                    id: workflow.id,
+                },
+            };
+        });
+    }
+
+    async function fetchWorkflowData(workflowName: string) {
+        if (workflowName && workflowName !== "new") {
+            const response = await lobb.findAll("core_workflows", {
+                filter: {
+                    name: workflowName,
+                },
+            });
+            const result = await response.json();
+            const workflow = result.data[0];
+            workflowEntry = workflow;
+        } else {
+            const workflowHandlerDefaultValue =
+                ctx.meta.collections.core_workflows.fields.handler
+                    .pre_processors.default;
+            workflowEntry = {
+                name: "",
+                event_name: "",
+                handler: workflowHandlerDefaultValue,
+                directory: "",
+            };
+        }
+    }
+
+    async function handleWorkflowDelete(
+        workflowName: string,
+        workflowId: string,
+    ) {
+        const result = await showDialog(
+            "Are you sure?",
+            "This will delete the Workflow you selected.",
+        );
+        if (result) {
+            await lobb.deleteOne("core_workflows", workflowId);
+            getSidebarData();
+            if (workflowEntry && workflowName === workflowEntry.name) {
+                location.navigate("/workflows");
+            }
+        }
+    }
+</script>
+
+<Sidebar title="Workflows" data={sidebarData}>
+    {#snippet belowSearch()}
+        <div class="pb-4 px-2">
+            <Button
+                class="h-7 px-3 text-xs font-normal w-full"
+                variant="outline"
+                onclick={() => location.navigate("/workflows/new")}
+                Icon={Plus}
+            >
+                Create a Workflow
+            </Button>
+        </div>
+    {/snippet}
+    {#snippet elementRightSide(element)}
+        <Button
+            class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+            variant="ghost"
+            size="icon"
+            onclick={() => handleWorkflowDelete(element.name, element.meta?.id)}
+            Icon={Trash2}
+        ></Button>
+    {/snippet}
+    <div class="relative h-full w-full">
+        {#if workflowName === undefined}
+            <div
+                class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+            >
+                <CircleSlash2 class="opacity-50" size="50" />
+                <div class="flex flex-col items-center justify-center">
+                    <div>No workflow selected</div>
+                    <div class="text-xs">
+                        Select a workflow to edit it or create new ones
+                    </div>
+                </div>
+            </div>
+        {:else if workflowEntry}
+            {#key workflowEntry}
+                <WorkflowEditor
+                    bind:workflow={workflowEntry}
+                    refreshSidebar={getSidebarData}
+                />
+            {/key}
+        {/if}
+        <div class="absolute top-0 left-0 p-2.5">
+            <SidebarTrigger />
+        </div>
+    </div>
+</Sidebar>

package/src/lib/components/routes/workflows/workflows.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Workflows: import("svelte").Component<{
+    workflowName: any;
+}, {}, "">;
+type Workflows = ReturnType<typeof Workflows>;
+export default Workflows;

package/vite-plugins/contextual-lib-alias.js

@@ -9,7 +9,8 @@ const __dirname = path.dirname(__filename);
  * Vite plugin that resolves $lib imports contextually based on the importing file location.
  *
  * - Files inside the consuming project -> resolve to local ./src/lib
- * - Files outside the project (e.g., Studio package) -> resolve to Studio's src/lib
+ * - Files from Studio package in monorepo -> resolve to Studio's src/lib
+ * - Files from Studio package in node_modules -> resolve to node_modules/@lobb-js/studio/src/lib
  *
  * This allows shadcn components to work in both the Studio package and consuming projects
  * without conflicts.
@@ -42,8 +43,12 @@ export function contextualLibAlias() {
       if (isLocalImport && fs.existsSync(localLibPath)) {
         // Local file importing $lib -> resolve to local src/lib
         targetPath = localLibPath;
+      } else if (importer.includes("node_modules/@lobb-js/studio")) {
+        // Import from Studio package in node_modules -> resolve to node_modules/@lobb-js/studio/src/lib
+        const nodeModulesStudioPath = importer.substring(0, importer.indexOf("node_modules/@lobb-js/studio") + "node_modules/@lobb-js/studio".length);
+        targetPath = path.join(nodeModulesStudioPath, "src/lib");
       } else if (fs.existsSync(studioLibPath)) {
-        // External file (e.g., Studio) importing $lib -> resolve to Studio's src/lib
+        // External file (e.g., Studio in monorepo) importing $lib -> resolve to Studio's src/lib
         targetPath = studioLibPath;
       } else {
         // Neither path exists, let default resolution handle it