@lobb-js/studio 0.8.2 → 0.9.0

package/dist/components/Studio.svelte

@@ -14,6 +14,7 @@
         loadExtensions,
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
+    import studioPackageJson from "../../../package.json";
     import { mediaQueries } from "../utils";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
@@ -32,6 +33,7 @@
         extensions: {},
         meta: null,
         currentUrl: new URL(window.location.href),
+        studioVersion: studioPackageJson.version,
     });
 
     const lobb = createLobb(lobbUrl ?? "");

package/dist/components/routes/home.svelte

@@ -1,10 +1,8 @@
-<script>
+<script lang="ts">
     import Button from "../../components/ui/button/button.svelte";
-    import { getStudioContext } from "../../context";
     import { location } from "@wjfe/n-savant";
-
-    const { ctx } = getStudioContext();
     import { ArrowRight } from "lucide-svelte";
+    import HomeFooter from "./homeFooter.svelte";
 </script>
 
 <div class="flex flex-col">
@@ -29,12 +27,5 @@
             </Button>
         </div>
     </div>
-    <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
-        <div class="flex flex-col text-end">
-            {#if ctx.studioVersion}
-                <div>studio: v{ctx.studioVersion}</div>
-            {/if}
-            <div>core: v{ctx.meta.version}</div>
-        </div>
-    </div>
+    <HomeFooter />
 </div>

package/dist/components/routes/home.svelte.d.ts

@@ -1,18 +1,5 @@
-export default Home;
-type Home = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const Home: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Home: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Home = InstanceType<typeof Home>;
+export default Home;

package/dist/components/routes/homeFooter.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+    import { onMount } from "svelte";
+    import TimeAgo from "javascript-time-ago";
+    import en from "javascript-time-ago/locale/en";
+
+    TimeAgo.addDefaultLocale(en);
+    const timeAgo = new TimeAgo("en-US");
+
+    const { ctx } = getStudioContext();
+
+    let releaseDates: Record<string, string | null> = $state({});
+
+    async function fetchReleaseDate(pkg: string, version: string): Promise<string | null> {
+        try {
+            const res = await fetch(`https://registry.npmjs.org/${pkg}`);
+            if (!res.ok) return null;
+            const data = await res.json();
+            return data.time?.[version] ?? null;
+        } catch {
+            return null;
+        }
+    }
+
+    onMount(async () => {
+        const [coreDate, studioDate] = await Promise.all([
+            fetchReleaseDate("@lobb-js/core", ctx.meta.version),
+            ctx.studioVersion ? fetchReleaseDate("@lobb-js/studio", ctx.studioVersion) : Promise.resolve(null),
+        ]);
+        releaseDates = { core: coreDate, studio: studioDate };
+    });
+</script>
+
+<div class="flex justify-end p-2 text-xs text-muted-foreground/50">
+    <div class="flex flex-col text-end gap-0.5">
+        {#if ctx.studioVersion}
+            <div>
+                studio: v{ctx.studioVersion}
+                {#if releaseDates.studio}
+                    <span>({timeAgo.format(new Date(releaseDates.studio!))})</span>
+                {/if}
+            </div>
+        {/if}
+        <div>
+            core: v{ctx.meta.version}
+            {#if releaseDates.core}
+                <span>({timeAgo.format(new Date(releaseDates.core!))})</span>
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/routes/homeFooter.svelte.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -77,12 +77,6 @@
   },
   "dependencies": {
     "@andrewbranch/untar.js": "^1.0.3",
-    "@internationalized/date": "^3.12.0",
-    "@tiptap/core": "^3.0.0",
-    "@tiptap/extension-link": "^3.0.0",
-    "@tiptap/extension-underline": "^3.0.0",
-    "@tiptap/pm": "^3.0.0",
-    "@tiptap/starter-kit": "^3.0.0",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-sql": "^6.10.0",
     "@codemirror/merge": "^6.11.2",
@@ -90,15 +84,22 @@
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.39.12",
     "@dagrejs/dagre": "^1.1.5",
+    "@internationalized/date": "^3.12.0",
     "@lobb-js/sdk": "^0.1.5",
     "@lucide/svelte": "^0.563.1",
     "@tailwindcss/vite": "^4.1.18",
+    "@tiptap/core": "^3.0.0",
+    "@tiptap/extension-link": "^3.0.0",
+    "@tiptap/extension-underline": "^3.0.0",
+    "@tiptap/pm": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
     "@wjfe/n-savant": "^0.3.0",
     "@xyflow/svelte": "^1.2.0",
     "bits-ui": "^1.8.0",
     "clsx": "^2.1.1",
     "codemirror": "^6.0.2",
     "fflate": "^0.8.2",
+    "javascript-time-ago": "^2.6.4",
     "json-stable-stringify": "^1.3.0",
     "lodash": "^4.17.21",
     "lucide-svelte": "^0.488.0",

package/src/lib/components/Studio.svelte

@@ -14,6 +14,7 @@
         loadExtensions,
     } from "../extensions/extensionUtils";
     import extensionMap from 'virtual:lobb-studio-extensions';
+    import studioPackageJson from "../../../package.json";
     import { mediaQueries } from "../utils";
     import Home from "./routes/home.svelte";
     import DataModel from "./routes/data_model/dataModel.svelte";
@@ -32,6 +33,7 @@
         extensions: {},
         meta: null,
         currentUrl: new URL(window.location.href),
+        studioVersion: studioPackageJson.version,
     });
 
     const lobb = createLobb(lobbUrl ?? "");

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

@@ -1,10 +1,8 @@
-<script>
+<script lang="ts">
     import Button from "../../components/ui/button/button.svelte";
-    import { getStudioContext } from "../../context";
     import { location } from "@wjfe/n-savant";
-
-    const { ctx } = getStudioContext();
     import { ArrowRight } from "lucide-svelte";
+    import HomeFooter from "./homeFooter.svelte";
 </script>
 
 <div class="flex flex-col">
@@ -29,12 +27,5 @@
             </Button>
         </div>
     </div>
-    <div class="flex justify-end p-2 text-xs text-muted-foreground/50">
-        <div class="flex flex-col text-end">
-            {#if ctx.studioVersion}
-                <div>studio: v{ctx.studioVersion}</div>
-            {/if}
-            <div>core: v{ctx.meta.version}</div>
-        </div>
-    </div>
+    <HomeFooter />
 </div>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { getStudioContext } from "../../context";
+    import { onMount } from "svelte";
+    import TimeAgo from "javascript-time-ago";
+    import en from "javascript-time-ago/locale/en";
+
+    TimeAgo.addDefaultLocale(en);
+    const timeAgo = new TimeAgo("en-US");
+
+    const { ctx } = getStudioContext();
+
+    let releaseDates: Record<string, string | null> = $state({});
+
+    async function fetchReleaseDate(pkg: string, version: string): Promise<string | null> {
+        try {
+            const res = await fetch(`https://registry.npmjs.org/${pkg}`);
+            if (!res.ok) return null;
+            const data = await res.json();
+            return data.time?.[version] ?? null;
+        } catch {
+            return null;
+        }
+    }
+
+    onMount(async () => {
+        const [coreDate, studioDate] = await Promise.all([
+            fetchReleaseDate("@lobb-js/core", ctx.meta.version),
+            ctx.studioVersion ? fetchReleaseDate("@lobb-js/studio", ctx.studioVersion) : Promise.resolve(null),
+        ]);
+        releaseDates = { core: coreDate, studio: studioDate };
+    });
+</script>
+
+<div class="flex justify-end p-2 text-xs text-muted-foreground/50">
+    <div class="flex flex-col text-end gap-0.5">
+        {#if ctx.studioVersion}
+            <div>
+                studio: v{ctx.studioVersion}
+                {#if releaseDates.studio}
+                    <span>({timeAgo.format(new Date(releaseDates.studio!))})</span>
+                {/if}
+            </div>
+        {/if}
+        <div>
+            core: v{ctx.meta.version}
+            {#if releaseDates.core}
+                <span>({timeAgo.format(new Date(releaseDates.core!))})</span>
+            {/if}
+        </div>
+    </div>
+</div>