@lobb-js/lobb-ext-storage 0.1.28 → 0.5.4

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+All notable changes to this project will be documented in this file. See [conventional commits](https://www.conventionalcommits.org/) for commit guidelines.
+
+- - -
+## storage-ext-studio@0.5.4 - 2026-02-17
+#### Bug Fixes
+- fixing the standalone issue - (1a70a51) - Malik Najjar
+#### Miscellaneous Chores
+- (**version**) 0.10.9 - (19ac765) - Cocogitto Bot
+
+- - -
+
+## storage-ext-studio@0.1.29 - 2026-02-17
+#### Bug Fixes
+- fixing the publishing issue - (f4d1641) - Malik Najjar
+
+- - -
+
+## storage-ext-studio@0.0.1 - 2026-02-17
+#### Miscellaneous Chores
+- (**version**) 0.10.4 - (d0d0474) - Cocogitto Bot
+
+- - -
+
+## storage-ext-studio@0.0.1 - 2026-02-17
+#### Bug Fixes
+- publishing the storage studio - (d7dd43e) - Malik Najjar
+#### Refactoring
+- restructure storage-ext studio components and remove unused files - (a3e375a) - Malik Najjar
+#### Miscellaneous Chores
+- (**version**) 0.10.2 - (2c92a7d) - Cocogitto Bot
+- (**version**) 0.5.5 - (d4dedeb) - Cocogitto Bot
+- (**version**) 0.5.4 - (1ca3970) - Cocogitto Bot
+- (**version**) 0.5.3 - (dcdb9cb) - Cocogitto Bot
+- (**version**) 0.5.2 - (aa66e29) - Cocogitto Bot
+- (**version**) 0.5.1 - (41b7c35) - Cocogitto Bot
+- (**version**) 0.4.2 - (4395d99) - Cocogitto Bot
+- (**version**) 0.4.1 - (5e9f152) - Cocogitto Bot
+- (**version**) 0.4.0 - (aafd2d6) - Cocogitto Bot
+#### Style
+- Update background color from bg-soft to bg-muted/30 across various components - (ad2240a) - Malik Najjar
+
+- - -
+
+Changelog generated by [cocogitto](https://github.com/cocogitto/cocogitto).

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/package.json

@@ -1,36 +1,38 @@
 {
   "name": "@lobb-js/lobb-ext-storage",
-  "version": "0.1.28",
+  "version": "0.5.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "studio"
-  ],
   "exports": {
-    ".": "./studio/src/index.ts"
+    ".": "./src/index.ts"
   },
   "scripts": {
-    "dev": "cd studio && vite",
-    "build": "cd studio && vite build",
-    "preview": "cd studio && vite preview",
-    "check": "cd studio && svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
   },
   "dependencies": {
-    "@lobb-js/studio": "0.1.31",
-    "path-browserify": "^1.0.1"
+    "@lobb-js/studio": "0.2.11",
+    "path-browserify": "^1.0.1",
+    "browser-fs-access": "^0.35.0"
   },
   "devDependencies": {
+    "@lucide/svelte": "^0.563.1",
     "@sveltejs/vite-plugin-svelte": "6.2.1",
+    "@tailwindcss/vite": "^4.1.18",
     "@tsconfig/svelte": "^5.0.6",
     "@types/path-browserify": "^1.0.3",
     "@types/node": "^24.10.1",
-    "autoprefixer": "^10.4.23",
-    "svelte": "^5.43.8",
+    "clsx": "^2.1.1",
+    "svelte": "^5.49.1",
     "svelte-check": "^4.3.4",
-    "tailwindcss": "^3.4.19",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "4.1.18",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "6.3.3"
   }

package/src/app.css

@@ -0,0 +1,124 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@source "../../../../packages";
+@source "../node_modules/@lobb-js";
+
+@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/{studio/src → src}/index.ts

@@ -1,9 +1,9 @@
-import type { Extension, ExtensionUtils } from "src/extensions/extension.types";
+import type { Extension, ExtensionUtils } from "@lobb-js/studio";
 
-import FileExplorerPage from "./pages/fileExplorerPage.svelte";
-import ForeignKeyComponent from "./foreignKeyComponent.svelte";
-import ChildrenFileExplorer from "./components/childrenFileExplorer.svelte";
-import ExplorerNotSupported from "./components/explorerNotSupported.svelte";
+import FileExplorerPage from "./lib/components/pages/fileExplorerPage.svelte";
+import ForeignKeyComponent from "./lib/components/foreignKeyComponent.svelte";
+import ChildrenFileExplorer from "./lib/components/childrenFileExplorer.svelte";
+import ExplorerNotSupported from "./lib/components/explorerNotSupported.svelte";
 
 export function extension(utils: ExtensionUtils): Extension {
   return {

package/{studio/src → src/lib}/components/childrenFileExplorer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { FolderX } from "lucide-svelte";
-  import type { ExtensionProps } from "../../extension.types";
+  import type { ExtensionProps } from "@lobb-js/studio";
   import FileExplorer from "./fileExplorer.svelte";
 
   interface Props extends ExtensionProps {

package/{studio/src → src/lib}/components/explorerNotSupported.svelte

@@ -2,7 +2,7 @@
   import { FolderX } from "lucide-svelte";
 </script>
 
-<div class="border rounded-md p-4 bg-soft flex items-center flex-col text-muted-foreground gap-2">
+<div class="border rounded-md p-4 bg-muted/30 flex items-center flex-col text-muted-foreground gap-2">
     <FolderX size={35} />
     <div class="flex flex-col justify-center items-center">
         <div class="text-sm font-bold">Storage file system is not supported here</div>

package/{studio/src → src/lib}/components/fileExplorer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import type { ExtensionProps } from "src/extensions/extension.types";
+	import type { ExtensionProps } from "@lobb-js/studio";
 	import type { Snippet } from "svelte";
 
+	import { fileOpen } from 'browser-fs-access';
     import path from "path-browserify"
 	import FileManagerBreadCrumbs from "./fileManagerBreadCrumbs.svelte";
     import FileIcon from "./fileIcon.svelte";
@@ -20,7 +21,7 @@
         onFileSelect?: (entry: Entry) => void;
         foreignKeyObject?: Record<string, any>;
         topLeftHeader?: Snippet<[]>;
-        class: string;
+        class?: string;
     }
 
 	let { location = $bindable('/'), onFileSelect, topLeftHeader, foreignKeyObject = {}, class: className, ...props }: Props = $props();
@@ -115,7 +116,7 @@
 			await refreshFileExplorer();
 		}
 
-		const file = await utils.getFileFromUser();
+		const file = await fileOpen();
 
 		utils.toast.promise(
 			uploadFile(file),
@@ -198,7 +199,7 @@
     >
         <div class="flex items-center justify-between gap-2">
             {@render topLeftHeader?.()}
-            <FileManagerBreadCrumbs bind:location={location} { utils } />
+            <FileManagerBreadCrumbs bind:location={location} {utils} />
         </div>
         <div class="flex gap-2">
             <!-- entries view toggle -->
@@ -396,9 +397,3 @@
         {/if}
     </div>
 </div>
-
-<style>
-	.selected {
-		background-color: theme("colors.muted.DEFAULT");
-	}
-</style>

package/{studio/src → src/lib}/components/fileIcon.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import type { ExtensionProps } from "src/extensions/extension.types";
+    import type { ExtensionProps } from "@lobb-js/studio";
     import type { Entry } from "./fileExplorer.svelte";
-  import { ctx } from "$lib/store.svelte";
 
     interface Props extends ExtensionProps {
         entry: Entry;
@@ -17,7 +16,7 @@
     class="pointer-events-none flex flex-col items-center gap-2 min-w-28"
 >
     {#if entry.file_mime_type.startsWith("image/")}
-        <div class="rounded-md w-24 h-24 bg-center bg-contain bg-no-repeat" style="background-image: url('{ctx.lobbUrl}/api/collections/storage_fs/{entry.id}?action=view');"></div>
+        <div class="rounded-md w-24 h-24 bg-center bg-contain bg-no-repeat" style="background-image: url('{utils.lobb.lobbUrl}/api/collections/storage_fs/{entry.id}?action=view');"></div>
     {:else}
         <div
             class="pointer-events-none relative"

package/{studio/src → src/lib}/components/fileManagerBreadCrumbs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ExtensionProps } from "src/extensions/extension.types";
+	import type { ExtensionProps } from "@lobb-js/studio";
 	import path from "path-browserify"
 
 	interface Props extends ExtensionProps {

package/{studio/src → src/lib/components}/foreignKeyComponent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import type { ExtensionProps } from "../extension.types";
-    import FileExplorer, { type Entry } from "./components/fileExplorer.svelte";
-  import FileIcon from "./components/fileIcon.svelte";
+    import type { ExtensionProps } from "@lobb-js/studio";
+    import FileExplorer, { type Entry } from "./fileExplorer.svelte";
+    import FileIcon from "./fileIcon.svelte";
 
     interface Props extends ExtensionProps {
         value: Entry;
@@ -28,7 +28,7 @@
     }
 </script>
 
-<button onclick={handleClick} class="flex flex-col items-center gap-2 w-full border p-4 rounded-md bg-soft">
+<button onclick={handleClick} class="flex flex-col items-center gap-2 w-full border p-4 rounded-md bg-muted/30">
     {#if value}
         <FileIcon entry={value} {utils} />
     {:else}

package/{studio/src → src/lib/components}/pages/fileExplorerPage.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
-	import type { ExtensionProps } from "src/extensions/extension.types";
-    import type { SideBarData, SideBarElement } from "$lib/components/sidebar/sidebarElements.svelte";
-
-  	import FileExplorer, { type Entry } from "../components/fileExplorer.svelte";
+	import type { ExtensionProps } from "@lobb-js/studio";
+	
+	import { Sidebar, SidebarTrigger, Icons } from "@lobb-js/studio";
+  	import FileExplorer, { type Entry } from "../fileExplorer.svelte";
 	import path from "path-browserify"
   	import { onMount } from "svelte";
 
 	const props: ExtensionProps = $props();
 	let { utils } = props;
-	let sidebarData: SideBarData | null = $state(null);
 	const { location: routerLocation } = utils;
-	const icons = utils.components.Icons;
-	const { Sidebar, SidebarTrigger } = utils.components;
+	let sidebarData: any | null = $state(null);
 	let location: string = $state("/");
-	
+
 	onMount(() => {
 		getSidebarData();
 		updateExplorerLocationFromRouter(routerLocation);
@@ -47,10 +45,10 @@
 		const result = await response.json();
 		const entries = result.data;
 
-		sidebarData = entries.map((el: Entry): SideBarElement => {
+		sidebarData = entries.map((el: Entry): any => {
 			return {
 				name: el.name,
-				icon: icons.Folder,
+				icon: Icons.Folder,
 				onclick: () => {
 					location = path.join(el.path, el.name);
 				}

package/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/src/lib/utils.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

package/{studio/src → src}/main.ts

@@ -1,6 +1,8 @@
+import "./app.css";
+
 import { mount } from "svelte";
-import Studio from "@lobb-js/studio";
-import { extension } from "./index.ts";
+import { Studio } from "@lobb-js/studio";
+import { extension } from "./index";
 
 const app = mount(Studio, {
   target: document.getElementById("app")!,

package/{studio/tsconfig.app.json → tsconfig.app.json}

@@ -16,7 +16,12 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "moduleDetection": "force"
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { lobbStudioPlugins } from "@lobb-js/studio/vite-plugins";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    ...lobbStudioPlugins(),
+    tailwindcss(),
+    svelte(),
+  ],
+});

package/studio/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-};

package/studio/tailwind.config.ts

@@ -1,92 +0,0 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
-import type { Config } from "tailwindcss";
-import tailwindcssAnimate from "tailwindcss-animate";
-
-const config: Config = {
-  darkMode: ["class"],
-  content: [
-    "./src/**/*.{html,js,svelte,ts}",
-    "../../../packages/studio/src/**/*.{html,js,svelte,ts}",
-  ],
-  safelist: ["dark"],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border) / <alpha-value>)",
-        input: "hsl(var(--input) / <alpha-value>)",
-        ring: "hsl(var(--ring) / <alpha-value>)",
-        background: "hsl(var(--background) / <alpha-value>)",
-        foreground: "hsl(var(--foreground) / <alpha-value>)",
-        primary: {
-          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
-        },
-        soft: {
-          DEFAULT: "hsl(var(--soft) / <alpha-value>)",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card) / <alpha-value>)",
-          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
-        },
-      },
-      borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: [...fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--bits-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--bits-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        "caret-blink": {
-          "0%,70%,100%": { opacity: "1" },
-          "20%,50%": { opacity: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "caret-blink": "caret-blink 1.25s ease-out infinite",
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate],
-};
-
-export default config;

package/studio/vite.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
-import path from "path";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [svelte()],
-  resolve: {
-    alias: {
-      $lib: path.resolve("../../../packages/studio/src/lib"),
-    },
-  },
-});