@lobb-js/studio 0.1.31

package/.env.example

@@ -0,0 +1 @@
+LOBB_URL=http://localhost:3000

package/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+import { dirname } from "path"
+
+import { fileURLToPath } from "url"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|ts|svelte)"
+  ],
+  "addons": [
+    getAbsolutePath('@storybook/addon-svelte-csf'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/svelte-vite'),
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,21 @@
+import type { Preview } from '@storybook/svelte-vite'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/svelte-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

package/components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}

package/docker-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+# insert ENV to the html
+find /app/dist -name "*.html" -exec sed -i "s|%LOBB_URL%|${LOBB_URL}|g" {} +
+
+# Start the server
+exec sirv dist --single --port 3000 --host

package/dockerfile

@@ -0,0 +1,27 @@
+# Stage 1: Build
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Stage 2: Runtime
+FROM node:22-alpine
+
+WORKDIR /app
+
+RUN npm install -g sirv-cli
+
+# Copy only built output
+COPY --from=builder /app/dist ./dist
+
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+EXPOSE 3000
+
+ENTRYPOINT ["sh", "/usr/local/bin/docker-entrypoint.sh"]

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/lobb.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lobb Studio</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@lobb-js/studio",
+  "version": "0.1.31",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/Studio.svelte",
+    "./vite-plugin": "./vite-plugin-contextual-lib.js",
+    "./components": "./src/components-export.ts"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && vite build --config vite.build.svelte.config.ts && vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
+    "build_extension": "vite build --config vite.extension.config.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test-storybook": "vitest --project=storybook"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.2",
+    "@lucide/svelte": "^0.563.1",
+    "@storybook/addon-a11y": "^10.0.1",
+    "@storybook/addon-docs": "^10.0.1",
+    "@storybook/addon-svelte-csf": "^5.0.10",
+    "@storybook/addon-vitest": "^10.0.1",
+    "@storybook/svelte-vite": "^10.0.1",
+    "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/lodash": "^4.17.17",
+    "@types/mustache": "^4.2.6",
+    "@types/node": "^22.14.1",
+    "@types/qs": "^6.9.18",
+    "@types/sortablejs": "^1.15.8",
+    "@vitest/browser-playwright": "^4.0.5",
+    "@vitest/coverage-v8": "^4.0.5",
+    "autoprefixer": "^10.4.20",
+    "bits-ui": "^1.6.0",
+    "browser-fs-access": "^0.35.0",
+    "clsx": "^2.1.1",
+    "dts-bundle-generator": "^9.5.1",
+    "lucide-svelte": "^0.488.0",
+    "mode-watcher": "^0.5.1",
+    "monaco-editor": "^0.52.2",
+    "playwright": "^1.56.1",
+    "qs": "^6.14.0",
+    "sortablejs": "^1.15.6",
+    "storybook": "^10.0.1",
+    "svelte": "5.39.8",
+    "svelte-check": "^4.1.4",
+    "svelte-sonner": "^0.3.28",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.7.2",
+    "vite": "6.3.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vitest": "^4.0.5"
+  },
+  "dependencies": {
+    "@andrewbranch/untar.js": "^1.0.3",
+    "@dagrejs/dagre": "^1.1.5",
+    "@tailwindcss/vite": "^4.1.18",
+    "@wjfe/n-savant": "^0.3.0",
+    "@xyflow/svelte": "^1.2.0",
+    "fflate": "^0.8.2",
+    "json-stable-stringify": "^1.3.0",
+    "lodash": "^4.17.21",
+    "mustache": "^4.2.0"
+  }
+}

package/public/lobb.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2801_3)">
+<mask id="path-1-outside-1_2801_3" maskUnits="userSpaceOnUse" x="7" y="1" width="20" height="28" fill="black">
+<rect fill="white" x="7" y="1" width="20" height="28"/>
+<path d="M25.1389 23.874L24.416 28H11.8439L12.5669 23.874H25.1389ZM17.9977 2.32685L13.5367 28H8.37029L12.8137 2.32685H17.9977Z"/>
+</mask>
+<path d="M25.1389 23.874L24.416 28H11.8439L12.5669 23.874H25.1389ZM17.9977 2.32685L13.5367 28H8.37029L12.8137 2.32685H17.9977Z" fill="black"/>
+<path d="M25.1389 23.874L26.1239 24.0465L26.3294 22.874H25.1389V23.874ZM24.416 28V29H25.256L25.401 28.1726L24.416 28ZM11.8439 28L10.8589 27.8274L10.6535 29H11.8439V28ZM12.5669 23.874V22.874H11.7268L11.5819 23.7014L12.5669 23.874ZM17.9977 2.32685L18.983 2.49805L19.1865 1.32685H17.9977V2.32685ZM13.5367 28V29H14.3779L14.5219 28.1712L13.5367 28ZM8.37029 28L7.38494 27.8295L7.18234 29H8.37029V28ZM12.8137 2.32685V1.32685H11.9719L11.8284 2.15631L12.8137 2.32685ZM24.1539 23.7014L23.431 27.8274L25.401 28.1726L26.1239 24.0465L24.1539 23.7014ZM24.416 27H11.8439V29H24.416V27ZM12.8289 28.1726L13.5519 24.0465L11.5819 23.7014L10.8589 27.8274L12.8289 28.1726ZM12.5669 24.874H25.1389V22.874H12.5669V24.874ZM17.0125 2.15565L12.5514 27.8288L14.5219 28.1712L18.983 2.49805L17.0125 2.15565ZM13.5367 27H8.37029V29H13.5367V27ZM9.35564 28.1705L13.7991 2.49739L11.8284 2.15631L7.38494 27.8295L9.35564 28.1705ZM12.8137 3.32685H17.9977V1.32685H12.8137V3.32685Z" fill="white" mask="url(#path-1-outside-1_2801_3)"/>
+</g>
+<defs>
+<clipPath id="clip0_2801_3">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/Studio.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    import { Toaster } from "./lib/components/ui/sonner";
+    import { onMount, onDestroy } from "svelte";
+    import { ModeWatcher } from "mode-watcher";
+    import { ctx } from "$lib/store.svelte";
+    import { lobb } from "$lib/index";
+    import Header from "$lib/components/header.svelte";
+    import { LoaderCircle, ServerOff } from "lucide-svelte";
+    import Dialog from "$lib/components/confirmationDialog/confirmationDialog.svelte";
+    import MiniSidebar from "$lib/components/miniSidebar.svelte";
+    import SetServerPage from "$lib/components/setServerPage.svelte";
+    import * as Tooltip from "$lib/components/ui/tooltip";
+    import { Router, Route, Fallback, init as initRouter,  } from "@wjfe/n-savant";
+    import {
+        executeExtensionsOnStartup,
+        loadExtensions,
+    } from "./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";
+
+    interface StudioProps {
+      extensions?: any[];
+    }
+
+    const props: StudioProps = $props()
+
+    let error: string | null = $state(null);
+    let loaded = $state(false);
+    let isSmallScreen = $derived(!mediaQueries.sm.current);
+    let cleanupRouter: (() => void) | undefined;
+
+    onMount(async () => {
+        cleanupRouter = initRouter();
+
+        if (ctx.lobbUrl) {
+            try {
+                ctx.meta = await lobb.getMeta();
+                ctx.extensions = await loadExtensions(props.extensions);
+                await executeExtensionsOnStartup();
+            } catch (err) {
+                console.error(err);
+                error = "CANT_CONNECT";
+            }
+        }
+        loaded = true;
+    });
+
+    onDestroy(() => {
+        if (cleanupRouter) {
+            cleanupRouter();
+        }
+    });
+</script>
+
+<ModeWatcher defaultMode="light" />
+<Toaster position="top-right" class="z-50" />
+{#if loaded}
+    {#if ctx.lobbUrl}
+        <Tooltip.Provider delayDuration={0} disableHoverableContent={true}>
+            <main
+                class="bg-muted h-screen w-screen"
+                style="display: grid; grid-template-columns: {isSmallScreen
+                    ? '1fr'
+                    : '3.5rem 1fr'};"
+            >
+                <MiniSidebar />
+                <div class="second_grid">
+                    <Header />
+                    <Router id="root-router">
+                        <Route key="home" path="/">
+                            {#snippet children(params)}
+                                <Home />
+                            {/snippet}
+                        </Route>
+                        <Route
+                            key="collections"
+                            path="/collections/:collection?"
+                        >
+                            {#snippet children(params)}
+                                <Collections
+                                    collectionName={params?.collection}
+                                />
+                            {/snippet}
+                        </Route>
+                        <Route key="datamodel" path="/datamodel/*">
+                            {#snippet children(params)}
+                                <DataModel />
+                            {/snippet}
+                        </Route>
+                        <Route key="workflows" path="/workflows/:workflow?">
+                            {#snippet children(params)}
+                                <Workflows workflowName={params?.workflow} />
+                            {/snippet}
+                        </Route>
+                        <Route
+                            key="extensions"
+                            path="/extensions/:extension?/:page?/*"
+                        >
+                            {#snippet children(params)}
+                                <Extension
+                                    extension={params?.extension}
+                                    page={params?.page}
+                                />
+                            {/snippet}
+                        </Route>
+                        <Fallback>Not Found</Fallback>
+                    </Router>
+                </div>
+            </main>
+        </Tooltip.Provider>
+    {:else}
+        <SetServerPage />
+    {/if}
+{:else if !error}
+    <div
+        class="flex h-screen w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+    >
+        <LoaderCircle class="animate-spin opacity-50" size="50" />
+        <div class="flex flex-col items-center justify-center">
+            <div>Loading the dashboard, please wait...</div>
+            <div class="text-xs">
+                Loading and importing all necessary data and components from the
+                lobb server.
+            </div>
+        </div>
+    </div>
+{:else}
+    <div
+        class="flex h-full w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+    >
+        <ServerOff class="opacity-50" size="50" />
+        <div class="flex flex-col items-center justify-center">
+            <div>Could not connect to the server</div>
+            <div class="text-xs">
+                Could not connect to the lobb server at this endpoint ({ctx.lobbUrl})
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .second_grid {
+        display: grid;
+        grid-template-rows: 2.5rem 1fr;
+    }
+</style>

package/src/app.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.129 0.042 264.695);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/components-export.ts

@@ -0,0 +1,21 @@
+// Re-export all Studio components for use in extensions and consuming apps
+export { Button } from "$lib/components/ui/button";
+export { Input } from "$lib/components/ui/input";
+export { Separator } from "$lib/components/ui/separator";
+export { Skeleton } from "$lib/components/ui/skeleton";
+export { default as LlmButton } from "$lib/components/LlmButton.svelte";
+export { default as Sidebar } from "$lib/components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "$lib/components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "$lib/components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "$lib/components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "$lib/components/ui/tooltip";
+export * as Breadcrumb from "$lib/components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "$lib/components/ui/popover";
+export * as Icons from "lucide-svelte";
+export { default as Table } from "$lib/components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "$lib/components/rangeCalendarButton.svelte";
+export { default as DataTable } from "$lib/components/dataTable/dataTable.svelte";
+export { default as Drawer } from "$lib/components/drawer.svelte";
+export { default as SelectRecord } from "$lib/components/selectRecord.svelte";
+export { Switch } from "$lib/components/ui/switch";

package/src/extensions/extension.types.ts

@@ -0,0 +1,93 @@
+import type { Lobb } from "$lib/Lobb";
+import type { CTX } from "../lib/store.types";
+import type { Button } from "$lib/components/ui/button";
+import type { Input } from "$lib/components/ui/input";
+import type { Separator } from "$lib/components/ui/separator";
+import type { Skeleton } from "$lib/components/ui/skeleton";
+import type LlmButton from "$lib/components/LlmButton.svelte";
+import type Sidebar from "$lib/components/sidebar/sidebar.svelte";
+import type SidebarTrigger from "$lib/components/sidebar/sidebarTrigger.svelte";
+import type CreateDetailViewButton from "$lib/components/detailView/create/createDetailViewButton.svelte";
+import type UpdateDetailViewButton from "$lib/components/detailView/update/updateDetailViewButton.svelte";
+import type { getFileFromUser, mediaQueries } from "$lib/utils";
+import type Table from "$lib/components/dataTable/table.svelte";
+import type { Location } from "@wjfe/n-savant";
+import type RangeCalendarButton from "$lib/components/rangeCalendarButton.svelte";
+import type DataTable from "$lib/components/dataTable/dataTable.svelte";
+import type Drawer from "$lib/components/drawer.svelte";
+import type SelectRecord from "$lib/components/selectRecord.svelte";
+import * as Popover from "$lib/components/ui/popover";
+import * as intlDate from "@internationalized/date";
+import * as Icons from "lucide-svelte"
+import { ContextMenu } from "bits-ui";
+import * as Tooltip from "$lib/components/ui/tooltip";
+import * as Breadcrumb from "$lib/components/ui/breadcrumb";
+import { showDialog } from "$lib/components/confirmationDialog/store.svelte";
+import { toast } from "svelte-sonner";
+import type Drawer from "$lib/components/drawer.svelte";
+import { Switch } from "$lib/components/ui/switch";
+
+// extensions utils
+export interface Components {
+    Button: typeof Button;
+    Input: typeof Input;
+    Separator: typeof Separator;
+    Skeleton: typeof Skeleton;
+    LlmButton: typeof LlmButton;
+    Sidebar: typeof Sidebar;
+    SidebarTrigger: typeof SidebarTrigger;
+    CreateDetailViewButton: typeof CreateDetailViewButton;
+    UpdateDetailViewButton: typeof UpdateDetailViewButton;
+    Tooltip: typeof Tooltip;
+    Breadcrumb: typeof Breadcrumb;
+    ContextMenu: typeof ContextMenu;
+    Popover: typeof Popover;
+    Icons: typeof Icons;
+    Table: typeof Table;
+    RangeCalendarButton: typeof RangeCalendarButton;
+    DataTable: typeof DataTable;
+    Drawer: typeof Drawer;
+    SelectRecord: typeof SelectRecord,
+    Switch: typeof Switch,
+}
+
+export interface ExtensionUtils {
+    ctx: CTX;
+    lobb: Lobb;
+    location: Location;
+    toast: typeof toast;
+    showDialog: typeof showDialog;
+    getFileFromUser: typeof getFileFromUser;
+    components: Components;
+    mediaQueries: typeof mediaQueries;
+    intlDate: typeof intlDate;
+}
+
+// dashboard nav
+interface DashboardNav {
+    label: string;
+    icon: any;
+    href?: string;
+    onclick?: () => void;
+    navs?: DashboardNav[];
+}
+
+export interface DashboardNavs {
+    top?: DashboardNav[];
+    middle?: DashboardNav[];
+    bottom?: DashboardNav[];
+}
+
+// extension components base Props
+export interface ExtensionProps {
+    utils: ExtensionUtils;
+    [key: string]: any;
+}
+
+// extension exported object
+export interface Extension {
+    name: string;
+    onStartup?: (utils: ExtensionUtils) => Promise<void>;
+    components?: Record<string, any>;
+    dashboardNavs?: DashboardNavs;
+}