@lobb-js/studio 0.1.42 → 0.2.0

package/dist/components/ui/input/input.svelte

@@ -24,7 +24,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
 		type="file"
@@ -36,7 +36,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			className
 		)}
 		{type}

package/dist/components/ui/range-calendar/range-calendar-day.svelte.d.ts

@@ -0,0 +1,6 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarDay: import("svelte").Component<RangeCalendarPrimitive.DayProps, {
+    class: import("svelte/elements").ClassValue;
+}, "ref">;
+type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
+export default RangeCalendarDay;

package/dist/components/ui/select/select-content.svelte

@@ -20,7 +20,7 @@
 		bind:ref
 		{sideOffset}
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/select/select-trigger.svelte

@@ -14,7 +14,7 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	bind:value
 	class={cn(
-		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className
 	)}
 	{...restProps}

package/dist/components/workflowEditor.svelte

@@ -11,11 +11,10 @@
 </script>
 
 <script lang="ts">
-    import { lobb } from "..";
+    import { lobb, ctx } from "../store.svelte";
     import CodeEditor from "./codeEditor.svelte";
     import Button from "./ui/button/button.svelte";
     import Input from "./ui/input/input.svelte";
-    import { ctx } from "../store.svelte";
     import { location } from "@wjfe/n-savant";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";

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

@@ -1,4 +1,4 @@
-import type { Lobb } from "../Lobb";
+import type { LobbClient } from "@lobb/sdk";
 import type { CTX } from "../lib/store.types";
 import type { Button } from "../components/ui/button";
 import type { Input } from "../components/ui/input";
@@ -49,7 +49,7 @@ export interface Components {
 }
 export interface ExtensionUtils {
     ctx: CTX;
-    lobb: Lobb;
+    lobb: LobbClient;
     location: Location;
     toast: typeof toast;
     showDialog: typeof showDialog;

package/dist/extensions/extensionUtils.js

@@ -43,8 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { lobb } from "..";
-import { ctx } from "../store.svelte";
+import { lobb, ctx } from "../store.svelte";
 import { toast } from "svelte-sonner";
 import { showDialog } from "../components/confirmationDialog/store.svelte";
 import { Button } from "../components/ui/button";

package/dist/index.d.ts

@@ -1,9 +1,23 @@
+export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types";
 export { default as Studio } from "./components/Studio.svelte";
-export { Lobb } from "./Lobb";
-export * from "./utils";
-export * from "./eventSystem";
-export { ctx, lobb } from "./store.svelte";
-export type * from "./store.types";
-export declare function createSet(lastNumber: number): Set<number>;
-export declare function moveElement<T>(array: T[], fromIndex: number, toIndex: number): T[];
-export declare function pxToRem(px: number): number;
+export { Button } from "./components/ui/button";
+export { Input } from "./components/ui/input";
+export { Separator } from "./components/ui/separator";
+export { Skeleton } from "./components/ui/skeleton";
+export { default as LlmButton } from "./components/LlmButton.svelte";
+export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "./components/ui/tooltip";
+export * as Breadcrumb from "./components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "./components/ui/popover";
+export * as Icons from "lucide-svelte";
+export * as Dialog from "./components/ui/dialog/index";
+export { default as Table } from "./components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "./components/rangeCalendarButton.svelte";
+export { default as DataTable } from "./components/dataTable/dataTable.svelte";
+export { default as Drawer } from "./components/drawer.svelte";
+export { default as SelectRecord } from "./components/selectRecord.svelte";
+export { Switch } from "./components/ui/switch";

package/dist/index.js

@@ -1,27 +1,22 @@
-// 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;
-}
+export { Button } from "./components/ui/button";
+export { Input } from "./components/ui/input";
+export { Separator } from "./components/ui/separator";
+export { Skeleton } from "./components/ui/skeleton";
+export { default as LlmButton } from "./components/LlmButton.svelte";
+export { default as Sidebar } from "./components/sidebar/sidebar.svelte";
+export { default as SidebarTrigger } from "./components/sidebar/sidebarTrigger.svelte";
+export { default as CreateDetailViewButton } from "./components/detailView/create/createDetailViewButton.svelte";
+export { default as UpdateDetailViewButton } from "./components/detailView/update/updateDetailViewButton.svelte";
+export * as Tooltip from "./components/ui/tooltip";
+export * as Breadcrumb from "./components/ui/breadcrumb";
+export { ContextMenu } from "bits-ui";
+export * as Popover from "./components/ui/popover";
+export * as Icons from "lucide-svelte";
+export * as Dialog from "./components/ui/dialog/index";
+export { default as Table } from "./components/dataTable/table.svelte";
+export { default as RangeCalendarButton } from "./components/rangeCalendarButton.svelte";
+export { default as DataTable } from "./components/dataTable/dataTable.svelte";
+export { default as Drawer } from "./components/drawer.svelte";
+export { default as SelectRecord } from "./components/selectRecord.svelte";
+export { Switch } from "./components/ui/switch";

package/dist/store.svelte.d.ts

@@ -1,4 +1,3 @@
 import type { CTX } from './store.types';
-import { Lobb } from './Lobb';
 export declare const ctx: CTX;
-export declare const lobb: Lobb;
+export declare const lobb: any;

package/dist/store.svelte.js

@@ -34,7 +34,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { Lobb } from './Lobb';
+import { LobbClient } from '@lobb/sdk';
 import { toast } from 'svelte-sonner';
 if (!window.APP_ENV) {
     window.APP_ENV = {};
@@ -56,7 +56,7 @@ export var ctx = $state.raw({
         filter: null
     },
 });
-export var lobb = new Lobb(ctx.lobbUrl);
+export var lobb = new LobbClient(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;

package/dist/utils.d.ts

@@ -19,7 +19,6 @@ export declare const mediaQueries: {
     '2xl': MediaQuery;
 };
 export declare function getFieldRelation(collectionName: string, fieldName: string): any;
-export declare function getDiscriminatorFieldRelation(collectionName: string, fieldName: string): any;
 export declare function recordHasChildrean(collectionName: string): boolean;
 export declare function calculateDrawerWidth(): number;
 export declare function getChangedProperties(oldObj: Record<string, any>, newObj: Record<string, any>): Record<string, any>;

package/dist/utils.js

@@ -27,17 +27,6 @@ export function getFieldRelation(collectionName, fieldName) {
     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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.1.42",
+  "version": "0.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -11,19 +11,10 @@
   ],
   "exports": {
     ".": {
-      "svelte": "./dist/components/Studio.svelte"
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "./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"
+    "./vite-plugins": "./vite-plugins/index.js"
   },
   "scripts": {
     "dev": "vite",
@@ -35,7 +26,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",
-    "test-storybook": "vitest --project=storybook"
+    "test-storybook": "vitest --project=storybook",
+    "prepublishOnly": "npm run package && jq '.exports[\".\"] = {\"svelte\": \"./dist/index.js\", \"types\": \"./dist/index.d.ts\"}' package.json > package.json.tmp && mv package.json.tmp package.json",
+    "postpublish": "jq '.exports[\".\"] = {\"__svelte\": \"./dist/index.js\", \"__types\": \"./dist/index.d.ts\", \"default\": \"./src/lib/index.ts\"}' package.json > package.json.tmp && mv package.json.tmp package.json"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
@@ -68,7 +61,9 @@
     "vitest": "^4.0.5"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
   },
   "dependencies": {
     "@andrewbranch/untar.js": "^1.0.3",
@@ -79,6 +74,7 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
+    "@lobb/sdk": "0.1.0",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.1.18",
     "@wjfe/n-savant": "^0.3.0",

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

@@ -1,63 +1,64 @@
 import path from "path";
 import fs from "fs";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 
 /**
- * Vite plugin that resolves $lib imports contextually based on the importing file location.
+ * Vite plugin that resolves $lib imports contextually based on the importing file's package.
  *
- * - Files inside the consuming project -> resolve to local ./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
+ * Walks up the directory tree from the importer to find the nearest package.json,
+ * then checks if that package has a src/lib directory. If so, resolves $lib to that path.
  *
- * This allows shadcn components to work in both the Studio package and consuming projects
- * without conflicts.
+ * This allows any package using the src/lib convention to use $lib imports without conflicts.
  *
  * @returns {import('vite').Plugin}
  */
 export function contextualLibAlias() {
-  let projectRoot;
-  let localLibPath;
-  const studioLibPath = path.resolve(__dirname, "../src/lib");
+  const packageRootCache = new Map();
+
+  function findPackageRoot(filePath) {
+    const dir = path.dirname(filePath);
+
+    // Check cache
+    if (packageRootCache.has(dir)) {
+      return packageRootCache.get(dir);
+    }
+
+    // Walk up directories to find package.json
+    let currentDir = dir;
+    const rootDir = path.parse(currentDir).root;
+
+    while (currentDir !== rootDir) {
+      const pkgPath = path.join(currentDir, "package.json");
+      if (fs.existsSync(pkgPath)) {
+        packageRootCache.set(dir, currentDir);
+        return currentDir;
+      }
+      currentDir = path.dirname(currentDir);
+    }
+
+    // Not found
+    packageRootCache.set(dir, null);
+    return null;
+  }
 
   return {
     name: "contextual-lib-alias",
     enforce: "pre",
 
-    configResolved(config) {
-      projectRoot = config.root;
-      localLibPath = path.resolve(projectRoot, "./src/lib");
-    },
-
     async resolveId(source, importer, options) {
       if (!source.startsWith("$lib")) return null;
       if (!importer) return null;
 
-      // Determine if the importing file is inside this project or external (e.g., Studio package)
-      const isLocalImport = importer.startsWith(projectRoot);
-
-      let targetPath;
+      // Find the package root for the importing file
+      const packageRoot = findPackageRoot(importer);
+      if (!packageRoot) return null;
 
-      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 in monorepo) importing $lib -> resolve to Studio's src/lib
-        targetPath = studioLibPath;
-      } else {
-        // Neither path exists, let default resolution handle it
-        return null;
-      }
+      // Check if this package has src/lib
+      const libPath = path.join(packageRoot, "src/lib");
+      if (!fs.existsSync(libPath)) return null;
 
-      // Extract the import path after $lib (e.g., "$lib/store.svelte" -> "/store.svelte")
+      // Resolve $lib to this package's src/lib
       const importPath = source.slice(4); // Remove "$lib"
-      const resolvedPath = path.join(targetPath, importPath);
+      const resolvedPath = path.join(libPath, importPath);
 
       // Let Vite resolve the actual file (handles .js, .ts, .svelte extensions)
       return this.resolve(resolvedPath, importer, { skipSelf: true, ...options });

package/vite-plugins/index.js

@@ -1,5 +1,4 @@
 import { contextualLibAlias } from "./contextual-lib-alias.js";
-import { monorepoImportResolver } from "./monorepo-import-resolver.js";
 
 /**
  * Returns an array of Vite plugins needed for Lobb Studio integration.
@@ -12,7 +11,6 @@ import { monorepoImportResolver } from "./monorepo-import-resolver.js";
  */
 export function lobbStudioPlugins() {
   return [
-    monorepoImportResolver(),
     contextualLibAlias(),
   ];
 }

package/dist/Lobb.d.ts

@@ -1,30 +0,0 @@
-interface RouteParams {
-    method: string;
-    route: string;
-    payload?: any;
-}
-type OnResponseHandlers = (reponse: Response) => void;
-export declare class Lobb {
-    lobbUrl: string;
-    private headers;
-    private onResponseHandlers;
-    constructor(lobbUrl: string);
-    onResponse(callback: OnResponseHandlers): Promise<void>;
-    setHeaders(headers: HeadersInit): void;
-    getHeaders(): HeadersInit;
-    getMeta(): Promise<any>;
-    findAll(collectionName: string, params: any): Promise<Response>;
-    findOne(collectionName: string, id: string, queryParams?: any): Promise<Response>;
-    createOne(collectionName: string, body: any, file?: File): Promise<Response>;
-    updateOne(collectionName: string, id: string, body: any): Promise<Response>;
-    readSingleton(collectionName: string): Promise<Response>;
-    updateSingleton(collectionName: string, body: Record<string, any>): Promise<Response>;
-    deleteOne(collectionName: string, id: string, force?: boolean): Promise<Response>;
-    deleteMany(collectionName: string, filter: any, force?: boolean): Promise<Response>;
-    createMany(collectionName: string, body: any): Promise<Response>;
-    updateMany(collectionName: string, body: any, filter: any): Promise<Response>;
-    transactions(body: any[], rollback?: boolean): Promise<Response>;
-    request(params: RouteParams): Promise<Response>;
-    private handleResponse;
-}
-export {};