@lobb-js/studio 0.1.38 → 0.1.40

package/dist/extensions/extensionUtils.js

@@ -0,0 +1,239 @@
+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 };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { lobb } from "..";
+import { ctx } from "../store.svelte";
+import { toast } from "svelte-sonner";
+import { showDialog } from "../components/confirmationDialog/store.svelte";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Separator } from "../components/ui/separator";
+import { Skeleton } from "../components/ui/skeleton";
+import Table from "../components/dataTable/table.svelte";
+import { mediaQueries } from "../utils";
+import LlmButton from "../components/LlmButton.svelte";
+import Sidebar from "../components/sidebar/sidebar.svelte";
+import SidebarTrigger from "../components/sidebar/sidebarTrigger.svelte";
+import CreateDetailViewButton from "../components/detailView/create/createDetailViewButton.svelte";
+import UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
+import * as intlDate from "@internationalized/date";
+import * as Tooltip from "../components/ui/tooltip";
+import * as Breadcrumb from "../components/ui/breadcrumb";
+import { ContextMenu } from "bits-ui";
+import * as Popover from "../components/ui/popover";
+import * as Icons from "lucide-svelte";
+import { location } from "@wjfe/n-savant";
+import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
+import DataTable from "../components/dataTable/dataTable.svelte";
+import Drawer from "../components/drawer.svelte";
+import SelectRecord from "../components/selectRecord.svelte";
+import { Switch } from "../components/ui/switch";
+export function getComponents() {
+    return {
+        Button: Button,
+        Input: Input,
+        Separator: Separator,
+        Skeleton: Skeleton,
+        LlmButton: LlmButton,
+        Sidebar: Sidebar,
+        SidebarTrigger: SidebarTrigger,
+        CreateDetailViewButton: CreateDetailViewButton,
+        UpdateDetailViewButton: UpdateDetailViewButton,
+        Tooltip: Tooltip,
+        Breadcrumb: Breadcrumb,
+        ContextMenu: ContextMenu,
+        Popover: Popover,
+        Icons: Icons,
+        Table: Table,
+        RangeCalendarButton: RangeCalendarButton,
+        DataTable: DataTable,
+        Drawer: Drawer,
+        SelectRecord: SelectRecord,
+        Switch: Switch,
+    };
+}
+export function getExtensionUtils() {
+    return {
+        ctx: ctx,
+        lobb: lobb,
+        location: location,
+        toast: toast,
+        showDialog: showDialog,
+        components: getComponents(),
+        mediaQueries: mediaQueries,
+        intlDate: intlDate,
+    };
+}
+export function getExtensionsThatHasDash() {
+    var extensionNames = Object.keys(ctx.meta.extensions);
+    var extensionsWithDashExt = [];
+    for (var index = 0; index < extensionNames.length; index++) {
+        var extensionName = extensionNames[index];
+        var extensionMeta = ctx.meta.extensions[extensionName];
+        if (extensionMeta.hasDashboardExtension) {
+            extensionsWithDashExt.push(extensionName);
+        }
+    }
+    return extensionsWithDashExt;
+}
+export function loadExtensions(studioExtensions) {
+    return __awaiter(this, void 0, Promise, function () {
+        var extensions, index, studioExtension, extensionsThatHasDash, index, extensionName, _a, _b, error_1;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    extensions = {};
+                    if (studioExtensions) {
+                        for (index = 0; index < studioExtensions.length; index++) {
+                            studioExtension = studioExtensions[index](getExtensionUtils());
+                            extensions[studioExtension.name] = studioExtension;
+                        }
+                    }
+                    extensionsThatHasDash = getExtensionsThatHasDash();
+                    index = 0;
+                    _d.label = 1;
+                case 1:
+                    if (!(index < extensionsThatHasDash.length)) return [3 /*break*/, 6];
+                    extensionName = extensionsThatHasDash[index];
+                    // Try to import locally-installed extension by name first
+                    if (extensionName && extensions[extensionName]) {
+                        return [3 /*break*/, 5];
+                    }
+                    _d.label = 2;
+                case 2:
+                    _d.trys.push([2, 4, , 5]);
+                    _a = extensions;
+                    _b = extensionName;
+                    return [4 /*yield*/, import(
+                        /* @vite-ignore */ "".concat(ctx.lobbUrl, "/api/extensions/").concat(extensionName, "/dashboard?v=").concat((_c = ctx.meta.extensions[extensionName]) === null || _c === void 0 ? void 0 : _c.version))];
+                case 3:
+                    _a[_b] = (_d.sent()).extension(getExtensionUtils());
+                    return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _d.sent();
+                    console.warn("Failed to load remote extension ".concat(extensionName), error_1);
+                    return [3 /*break*/, 5];
+                case 5:
+                    index++;
+                    return [3 /*break*/, 1];
+                case 6: return [2 /*return*/, extensions];
+            }
+        });
+    });
+}
+export function loadExtensionComponents(name, filterByExtensions) {
+    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];
+        if (filterByExtensions && !filterByExtensions.includes(extensionName)) {
+            continue;
+        }
+        if (extensionValue.components) {
+            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);
+                }
+            }
+        }
+    }
+    return components;
+}
+export function executeExtensionsOnStartup() {
+    return __awaiter(this, void 0, void 0, function () {
+        var extensionNames, index, extensionName, extension;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    extensionNames = Object.keys(ctx.extensions);
+                    index = 0;
+                    _a.label = 1;
+                case 1:
+                    if (!(index < extensionNames.length)) return [3 /*break*/, 4];
+                    extensionName = extensionNames[index];
+                    extension = ctx.extensions[extensionName];
+                    if (!extension) return [3 /*break*/, 3];
+                    if (!extension.onStartup) return [3 /*break*/, 3];
+                    return [4 /*yield*/, extension.onStartup(getExtensionUtils())];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    index++;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+export function getDashboardNavs() {
+    var navs = {
+        top: [],
+        middle: [],
+        bottom: [],
+    };
+    var extensionNames = Object.keys(ctx.extensions);
+    for (var index = 0; index < extensionNames.length; index++) {
+        var extensionName = extensionNames[index];
+        var extension = ctx.extensions[extensionName];
+        if (extension) {
+            if (extension.dashboardNavs && extension.dashboardNavs.top && navs.top) {
+                navs.top = __spreadArray(__spreadArray([], navs.top, true), extension.dashboardNavs.top, true);
+            }
+            if (extension.dashboardNavs &&
+                extension.dashboardNavs.middle &&
+                navs.middle) {
+                navs.middle = __spreadArray(__spreadArray([], navs.middle, true), extension.dashboardNavs.middle, true);
+            }
+            if (extension.dashboardNavs &&
+                extension.dashboardNavs.bottom &&
+                navs.bottom) {
+                navs.bottom = __spreadArray(__spreadArray([], navs.bottom, true), extension.dashboardNavs.bottom, true);
+            }
+        }
+    }
+    return navs;
+}

package/dist/index.js

@@ -0,0 +1,27 @@
+// Main Studio component
+export { default as Studio } from "./components/Studio.svelte";
+// Lobb client and utilities
+export { Lobb } from "./Lobb";
+export * from "./utils";
+export * from "./eventSystem";
+export { ctx, lobb } from "./store.svelte";
+export function createSet(lastNumber) {
+    var set = new Set();
+    for (var i = 0; i <= lastNumber; i++) {
+        set.add(i);
+    }
+    return set;
+}
+export function moveElement(array, fromIndex, toIndex) {
+    if (fromIndex < 0 || fromIndex >= array.length || toIndex < 0 ||
+        toIndex >= array.length) {
+        throw new Error("Index out of bounds");
+    }
+    var element = array.splice(fromIndex, 1)[0];
+    array.splice(toIndex, 0, element);
+    return array;
+}
+export function pxToRem(px) {
+    var rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return px / rootFontSize;
+}

package/dist/store.svelte.js

@@ -0,0 +1,72 @@
+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 { Lobb } from './Lobb';
+import { toast } from 'svelte-sonner';
+import pkg from '../../package.json';
+if (!window.APP_ENV) {
+    window.APP_ENV = {};
+}
+if (window.APP_ENV.LOBB_URL === '%LOBB_URL%') {
+    window.APP_ENV.LOBB_URL = null;
+}
+export var ctx = $state.raw({
+    studioVersion: pkg.version,
+    lobbUrl: window.APP_ENV.LOBB_URL || localStorage.getItem("lobb_url"),
+    extensions: {},
+    meta: {
+        collections: null,
+        extensions: null,
+        filter: null
+    },
+});
+export var lobb = new Lobb(ctx.lobbUrl);
+// logging the message if got any bad responses
+lobb.onResponse(function (response) { return __awaiter(void 0, void 0, void 0, function () {
+    var body;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!(response.status >= 400)) return [3 /*break*/, 2];
+                return [4 /*yield*/, response.json()];
+            case 1:
+                body = _a.sent();
+                toast.error(body.message);
+                _a.label = 2;
+            case 2: return [2 /*return*/];
+        }
+    });
+}); });

package/dist/store.types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.js

@@ -0,0 +1,72 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { MediaQuery } from 'svelte/reactivity';
+import { ctx } from "./store.svelte";
+export function cn() {
+    var inputs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        inputs[_i] = arguments[_i];
+    }
+    return twMerge(clsx(inputs));
+}
+export var mediaQueries = {
+    sm: new MediaQuery('min-width: 640px'),
+    md: new MediaQuery('min-width: 768px'),
+    lg: new MediaQuery('min-width: 1024px'),
+    xl: new MediaQuery('min-width: 1280px'),
+    '2xl': new MediaQuery('min-width: 1536px'),
+};
+export function getFieldRelation(collectionName, fieldName) {
+    var relations = ctx.meta.relations;
+    for (var index = 0; index < relations.length; index++) {
+        var relation = relations[index];
+        if (relation.from.collection === collectionName && relation.from.field === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+}
+;
+export function getDiscriminatorFieldRelation(collectionName, fieldName) {
+    var relations = ctx.meta.relations;
+    for (var index = 0; index < relations.length; index++) {
+        var relation = relations[index];
+        if (relation.from.collection === collectionName && relation.from.discriminator === fieldName) {
+            return relation;
+        }
+    }
+    return null;
+}
+;
+export function recordHasChildrean(collectionName) {
+    for (var index = 0; index < ctx.meta.relations.length; index++) {
+        var relation = ctx.meta.relations[index];
+        if (relation.to.collection === collectionName) {
+            return true;
+        }
+    }
+    return false;
+}
+;
+export function calculateDrawerWidth() {
+    var backgroundDrawerButtons = document.querySelectorAll(".backgroundDrawerButton");
+    var drawersCount = Array.from(backgroundDrawerButtons).length;
+    var width = 672 - (30 * drawersCount);
+    return width;
+}
+;
+export function getChangedProperties(oldObj, newObj) {
+    var changes = {};
+    for (var _i = 0, _a = Object.keys(newObj); _i < _a.length; _i++) {
+        var key = _a[_i];
+        if (oldObj[key] !== newObj[key]) {
+            changes[key] = newObj[key];
+        }
+    }
+    return changes;
+}
+export function parseFunction(functionString) {
+    var functionObj = new Function("return " + functionString)();
+    return functionObj;
+}
+;

package/package.json

@@ -1,24 +1,34 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "src/lib",
+    "dist",
     "vite-plugins"
   ],
   "exports": {
-    ".": "./src/lib/components/Studio.svelte",
-    "./*": "./src/lib/components/*",
+    ".": {
+      "svelte": "./dist/components/Studio.svelte"
+    },
+    "./internal": {
+      "svelte": "./src/lib/components/Studio.svelte"
+    },
+    "./*": {
+      "svelte": "./dist/components/*"
+    },
+    "./internal/*": {
+      "svelte": "./src/lib/components/*"
+    },
     "./vite-plugins": "./vite-plugins/index.js",
     "./components": "./src/components-export.ts"
   },
   "scripts": {
     "dev": "vite",
     "build": "rm -rf dist && vite build --config vite.build.svelte.config.ts && vite build",
-    "package": "svelte-package --input src/lib/components",
+    "package": "svelte-package --input src/lib",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
     "build_extension": "vite build --config vite.extension.config.ts",
@@ -54,9 +64,11 @@
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vitest": "^4.0.5",
     "tailwindcss": "4.1.18",
-    "svelte": "5.39.8",
     "vite": "6.3.3"
   },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
   "dependencies": {
     "@andrewbranch/untar.js": "^1.0.3",
     "@dagrejs/dagre": "^1.1.5",

package/vite-plugins/index.js

@@ -1,21 +1,18 @@
 import { contextualLibAlias } from "./contextual-lib-alias.js";
-import { studioSourceResolver } from "./studio-source-resolver.js";
+import { monorepoImportResolver } from "./monorepo-import-resolver.js";
 
 /**
  * Returns an array of Vite plugins needed for Lobb Studio integration.
  *
  * Includes:
+ * - monorepoImportResolver: Resolves @lobb-js/studio to /internal (monorepo) or default (standalone)
  * - contextualLibAlias: Resolves $lib imports contextually
- * - studioSourceResolver: Resolves @lobb-js/studio to source (monorepo) or dist (standalone)
  *
  * @returns {import('vite').Plugin[]}
  */
 export function lobbStudioPlugins() {
   return [
-    studioSourceResolver(),
+    monorepoImportResolver(),
     contextualLibAlias(),
   ];
 }
-
-// Also export individual plugins for advanced usage
-export { contextualLibAlias, studioSourceResolver };

package/vite-plugins/monorepo-import-resolver.js

@@ -0,0 +1,92 @@
+import path from "path";
+import fs from "fs";
+
+/**
+ * Detects if the current project is inside a monorepo workspace.
+ *
+ * Checks for workspace configuration files in parent directories:
+ * - pnpm-workspace.yaml (pnpm)
+ * - package.json with "workspaces" field (npm/yarn)
+ *
+ * @param {string} startDir - Directory to start searching from
+ * @returns {boolean} True if inside a monorepo workspace
+ */
+function isInMonorepo(startDir) {
+  let currentDir = startDir;
+  const root = path.parse(currentDir).root;
+
+  while (currentDir !== root) {
+    // Check for pnpm-workspace.yaml
+    if (fs.existsSync(path.join(currentDir, 'pnpm-workspace.yaml'))) {
+      return true;
+    }
+
+    // Check for package.json with workspaces field
+    const pkgPath = path.join(currentDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+        if (pkg.workspaces) {
+          return true;
+        }
+      } catch (e) {
+        // Ignore parse errors
+      }
+    }
+
+    // Move up one directory
+    currentDir = path.dirname(currentDir);
+  }
+
+  return false;
+}
+
+/**
+ * Vite plugin that resolves @lobb-js/studio imports contextually.
+ *
+ * - Inside monorepo: Rewrites to @lobb-js/studio/internal (uses source files from /src for fast HMR)
+ * - Outside monorepo: Uses default export (uses built files from /dist)
+ *
+ * This allows consuming projects to use identical import syntax everywhere:
+ * `import Studio from '@lobb-js/studio'`
+ *
+ * The plugin automatically optimizes the resolution based on the environment.
+ *
+ * @returns {import('vite').Plugin}
+ */
+export function monorepoImportResolver() {
+  let isMonorepo = false;
+
+  return {
+    name: "monorepo-import-resolver",
+    enforce: "pre",
+
+    configResolved(config) {
+      // Detect monorepo once during config resolution
+      isMonorepo = isInMonorepo(config.root);
+
+      if (isMonorepo) {
+        console.log('🎯 Lobb Studio: Running in monorepo mode - using source files for fast HMR');
+      } else {
+        console.log('📦 Lobb Studio: Running in standalone mode - using built distribution files');
+      }
+    },
+
+    async resolveId(source, importer, options) {
+      // Handle @lobb-js/studio imports (and subpaths like @lobb-js/studio/*)
+      if (!source.startsWith("@lobb-js/studio")) return null;
+
+      // Don't rewrite if already using /internal path
+      if (source.startsWith("@lobb-js/studio/internal")) return null;
+
+      // In monorepo, rewrite to /internal path which points to source files
+      if (isMonorepo) {
+        const rewrittenSource = source.replace("@lobb-js/studio", "@lobb-js/studio/internal");
+        return this.resolve(rewrittenSource, importer, { skipSelf: true, ...options });
+      }
+
+      // Not in monorepo - let default resolution handle it (uses dist/ from node_modules)
+      return null;
+    }
+  };
+}