@lobb-js/studio 0.29.0 → 0.29.1

package/src/lib/components/rangeCalendarButton.svelte

@@ -59,7 +59,7 @@
                     class="flex flex-col overflow-hidden text-muted-foreground"
                 >
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -71,7 +71,7 @@
                         Today
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -83,7 +83,7 @@
                         Yesterday
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const weekStart = startOfWeek(currentDate, "en-US");
@@ -96,7 +96,7 @@
                         This week (Sun - Today)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const thisWeekStart = startOfWeek(
@@ -119,7 +119,7 @@
                         Last week (Sun - Sat)
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -131,7 +131,7 @@
                         Last 7 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -143,7 +143,7 @@
                         Last 30 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -155,7 +155,7 @@
                         Last 90 days
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             value = {
@@ -167,7 +167,7 @@
                         Last 12 months
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const lastYearStart = currentDate
@@ -185,7 +185,7 @@
                         Last Calendar year
                     </button>
                     <button
-                        class="text-start text-sm py-2 px-2 hover:bg-muted/30 hover:text-primary"
+                        class="text-start text-sm py-2 px-2 hover:bg-muted-soft hover:text-primary"
                         onclick={() => {
                             const currentDate = today(getLocalTimeZone());
                             const yearStart = currentDate.set({

package/src/lib/components/richTextEditor.svelte

@@ -120,7 +120,7 @@
 	}
 </script>
 
-<div class="flex flex-col rounded-md border bg-muted/30">
+<div class="flex flex-col rounded-md border bg-muted-soft">
 	<div class="flex flex-wrap items-center gap-0.5 border-b p-1.5">
 		{#if editor}
 			<button

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

@@ -2,9 +2,11 @@
     import type { SideBarData, SideBarNode } from "../../sidebar/sidebarElements.svelte";
     import Sidebar from "../../sidebar/sidebar.svelte";
     import { getStudioContext } from "../../../context";
+    import { emitEvent } from "../../../eventSystem";
     import Collection from "./collection.svelte";
+    import { onMount } from "svelte";
 
-    const { ctx } = getStudioContext();
+    const { lobb, ctx } = getStudioContext();
     import { Table, Cpu, LibraryBig } from "lucide-svelte";
     import * as Icons from "lucide-svelte";
 
@@ -15,21 +17,40 @@
 
     let { collectionName } = $props();
 
-    const collectionsList = $state(getCollectionsList());
+    // Start empty so unreadable collections never flash. Populated after the
+    // auth.canAccess checks resolve below.
+    let collectionsList = $state<SideBarData>([]);
 
-    function getCollectionsList(): SideBarData {
+    onMount(async () => {
         const collections = ctx.meta.collections;
 
-        const groups = new Map<string, SideBarNode[]>();
+        // 1. Determine which collections the current user can read.
+        //    Virtual collections (identifiers only — no rows) are excluded.
+        const allNames = Object.keys(collections).filter(
+            (name) => !collections[name].virtual,
+        );
+        const visibleNames = (
+            await Promise.all(
+                allNames.map(async (name) => {
+                    const res = await emitEvent(
+                        { lobb, ctx },
+                        "auth.canAccess",
+                        { collection: name, action: "read" },
+                    );
+                    return res === true ? name : null;
+                }),
+            )
+        ).filter((n): n is string => n !== null);
 
-        for (const [name, value] of Object.entries(collections)) {
+        // 2. Group the visible collections by their category/owner.
+        const groups = new Map<string, SideBarNode[]>();
+        for (const name of visibleNames) {
+            const value = collections[name];
             let groupKey: string = (value as any).category ?? (value as any).owner;
             if (groupKey === "__project") groupKey = "project";
             else if (groupKey === "__core") groupKey = "core";
 
-            if (!groups.has(groupKey)) {
-                groups.set(groupKey, []);
-            }
+            if (!groups.has(groupKey)) groups.set(groupKey, []);
             groups.get(groupKey)!.push({
                 type: "element",
                 name,
@@ -38,6 +59,7 @@
             });
         }
 
+        // 3. Build the sidebar tree and put `core` last.
         const result: SideBarData = [];
         for (const [groupKey, children] of groups) {
             const extensionIconName = ctx.meta.extensions?.[groupKey]?.icon;
@@ -51,12 +73,12 @@
             });
         }
 
-        return result.sort((a, b) => {
+        collectionsList = result.sort((a, b) => {
             if ((a as any).name === "core") return 1;
             if ((b as any).name === "core") return -1;
             return 0;
         });
-    }
+    });
 </script>
 
 <Sidebar title="Collections" data={collectionsList}>

package/src/lib/components/routes/data_model/dataModel.svelte

@@ -1,34 +1,12 @@
 <script lang="ts">
     import { SvelteFlowProvider } from "@xyflow/svelte";
     import Flow from "./flow.svelte";
-    import Sidebar from "../../sidebar/sidebar.svelte";
-    import { location } from "@wjfe/n-savant";
-    import SyncManager from "./syncManager.svelte";
-    import SidebarTrigger from "../../sidebar/sidebarTrigger.svelte";
-
-    const currentPage = $derived(location.url.pathname.replace("/studio", "").split("/")[2]);
 </script>
 
-<Sidebar
-    title="Data Model"
-    showSearch={false}
-    data={[
-        { type: "element", name: "graph", href: "/studio/datamodel/graph" },
-        { type: "element", name: "query_editor", href: "/studio/datamodel/query_editor" },
-    ]}
->
-    <div class="relative h-full w-full">
-        {#if currentPage === "graph"}
-            <SvelteFlowProvider>
-                <div style:width="100%" style:height="100%">
-                    <Flow />
-                </div>
-            </SvelteFlowProvider>
-        {:else if currentPage === "query_editor"}
-            <SyncManager />
-        {/if}
-        <div class="absolute top-0 left-0 p-2.5">
-            <SidebarTrigger />
+<div class="relative h-full w-full">
+    <SvelteFlowProvider>
+        <div style:width="100%" style:height="100%">
+            <Flow />
         </div>
-    </div>
-</Sidebar>
+    </SvelteFlowProvider>
+</div>

package/src/lib/components/routes/extensions/publicExtension.svelte

@@ -0,0 +1,19 @@
+<script>
+    import ExtensionsComponents from "../../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../../extensions/extensionUtils";
+    import { getStudioContext } from "../../../context";
+
+    let { extension, page } = $props();
+
+    const { lobb, ctx } = getStudioContext();
+</script>
+
+<div class="grid h-full w-full overflow-auto bg-background">
+    {#key extension && page}
+        <ExtensionsComponents
+            name="publicPages.{page}"
+            utils={getExtensionUtils(lobb, ctx)}
+            filterByExtensions={[extension]}
+        />
+    {/key}
+</div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Button from "../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
 </script>
@@ -21,7 +21,7 @@
                 Icon={ArrowRight}
                 variant="outline"
                 class="h-7 px-3 text-xs font-normal"
-                onclick={() => location.navigate("/studio/collections")}
+                onclick={() => goto("/studio/collections")}
             >
                 Go to collections
             </Button>

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

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
     import Sidebar from "../../sidebar/sidebar.svelte";
     import Button from "../../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { CircleSlash2, Plus, Trash2 } from "lucide-svelte";
     import { onMount } from "svelte";
     import { showDialog } from "../../../actions";
@@ -39,7 +39,7 @@
             const item: SideBarNode = {
                 type: "element",
                 name: workflow.name,
-                onclick: () => location.navigate(`/studio/workflows/${workflow.name}`),
+                onclick: () => goto(`/studio/workflows/${workflow.name}`),
                 meta: { id: workflow.id },
             };
 
@@ -93,7 +93,7 @@
             await lobb.deleteOne("core_workflows", workflowId);
             getSidebarData();
             if (workflowEntry && workflowName === workflowEntry.name) {
-                location.navigate("/studio/workflows");
+                goto("/studio/workflows");
             }
         }
     }
@@ -105,7 +105,7 @@
             <Button
                 class="h-7 px-3 text-xs font-normal w-full"
                 variant="outline"
-                onclick={() => location.navigate("/studio/workflows/new")}
+                onclick={() => goto("/studio/workflows/new")}
                 Icon={Plus}
             >
                 Create a Workflow

package/src/lib/components/sidebar/sidebar.svelte

@@ -107,7 +107,7 @@
                 {#if showSearch}
                     <div class="p-2">
                         <div
-                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted/30 border rounded-md"
+                            class="flex items-center px-4 py-1 text-muted-foreground bg-muted-soft border rounded-md"
                         >
                             <input
                                 type="text"

package/src/lib/components/sidebar/sidebarElements.svelte

@@ -30,7 +30,7 @@
     import type { Snippet } from "svelte";
     import SidebarElements from "./sidebarElements.svelte";
     import Button from "../ui/button/button.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { page } from "$app/state";
 
     let {
         data = $bindable(),
@@ -58,7 +58,7 @@
         {#each data as node, index}
             {#if node.type === "directory"}
                 <button
-                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted/30 cursor-pointer"
+                    class="flex items-center justify-between p-2 gap-2 text-muted-foreground rounded-md hover:bg-muted-soft cursor-pointer"
                     onclick={() => toggleDir(index)}
                 >
                     <div class="flex items-center gap-2">
@@ -83,13 +83,13 @@
                     </div>
                 </div>
             {:else}
-                {@const isselected = location.url.pathname === node.href}
+                {@const isselected = page.url.pathname === node.href}
                 <Button
                     onclick={() => handleElementClick(node)}
                     href={node.href}
                     variant="ghost"
                     class="
-						flex items-center justify-between p-2 gap-2 hover:bg-muted/30 text-muted-foreground
+						flex items-center justify-between p-2 gap-2 hover:bg-muted-soft text-muted-foreground
 						rounded-md {isselected ? 'bg-muted' : ''}
 					"
                     title={node.name}

package/src/lib/components/singletone.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Save } from "lucide-svelte";
-    import DetailViewForm from "./detailView/detailViewForm.svelte";
-    import { getCollectionFields } from "./detailView/utils";
+    import DetailView from "./detailView/detailView.svelte";
     import SidebarTrigger from "./sidebar/sidebarTrigger.svelte";
     import Button from "./ui/button/button.svelte";
     import { onMount } from "svelte";
@@ -9,7 +8,7 @@
     import { toast } from "svelte-sonner";
     import Skeleton from "./ui/skeleton/skeleton.svelte";
 
-    const { lobb, ctx } = getStudioContext();
+    const { lobb } = getStudioContext();
 
     interface Props {
         collectionName: string;
@@ -17,9 +16,8 @@
 
     let { collectionName }: Props = $props();
 
-    let entry = $state({});
+    let entry = $state<Record<string, any>>({});
     let loading = $state(true);
-    const formFields = getCollectionFields(ctx, collectionName);
 
     onMount(async () => {
         const result = await fetch(`${lobb.lobbUrl}/api/collections/${collectionName}/singleton`, {
@@ -60,7 +58,7 @@
         </div>
     {:else}
         <div class="flex-1 overflow-y-auto max-w-xl">
-            <DetailViewForm bind:value={entry} fields={formFields} />
+            <DetailView {collectionName} bind:entry />
         </div>
     {/if}
 </div>

package/src/lib/components/ui/button/button.svelte

@@ -49,7 +49,6 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import { LoaderCircle } from "lucide-svelte";
-	import { Link, location } from "@wjfe/n-savant";
 
 	let {
 		class: className,
@@ -94,9 +93,9 @@
 {/snippet}
 
 {#if href}
-	<Link {href} class={cn(buttonVariants({ variant, size }), className)}>
+	<a {href} class={cn(buttonVariants({ variant, size }), className)}>
 		{@render innerPart()}
-	</Link>
+	</a>
 {:else}
 	<button
 		bind:this={ref}

package/src/lib/components/workflowEditor.svelte

@@ -17,7 +17,7 @@
     const { lobb, ctx } = getStudioContext();
     import Button from "./ui/button/button.svelte";
     import Input from "./ui/input/input.svelte";
-    import { location } from "@wjfe/n-savant";
+    import { goto } from "$app/navigation";
     import { Edit, Plus } from "lucide-svelte";
     import { toast } from "svelte-sonner";
     import { isEqual } from "lodash-es";
@@ -96,7 +96,7 @@
         const reponse = await lobb.createOne("core_workflows", workflow);
         const result = await reponse.json();
         const workflowEntry = result.data;
-        location.navigate(`/studio/workflows/${workflowEntry.name}`);
+        goto(`/studio/workflows/${workflowEntry.name}`);
         await refreshSidebar();
     }
 

package/src/lib/eventSystem.ts

@@ -3,25 +3,26 @@ import type { StudioContext } from "./context";
 import { openCreateDetailView, openUpdateDetailView } from "./actions";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 
-export async function emitEvent(studioContext: StudioContext, eventName: string, input: Record<string, any>) {
+export async function emitEvent(studioContext: StudioContext, eventName: string, input: any): Promise<any> {
     const { ctx } = studioContext;
     const workflows = ctx.meta.studio_workflows.filter(
         (workflow) => {
-            return eventName.startsWith(workflow.eventName);
+            return eventName === workflow.eventName;
         },
     );
 
     for (let index = 0; index < workflows.length; index++) {
       const workflow = workflows[index];
       try {
-        const localOutput = await workflow.handler(
+        // Whatever the handler returns becomes the input for the next
+        // subscriber and the final emit() return. No special handling of
+        // undefined — chain handlers should return their input, override
+        // handlers return undefined to opt out, observer handlers can
+        // return nothing if no one downstream reads input.
+        input = await workflow.handler(
             input,
             await getEventContext(studioContext),
         );
-
-        if (localOutput) {
-            input = localOutput;
-        }
       } catch (error) {
         toast.error((error as any).message);
         throw error;

package/src/lib/extensions/extension.types.ts

@@ -11,7 +11,8 @@ import type CreateDetailViewButton from "../components/detailView/create/createD
 import type UpdateDetailViewButton from "../components/detailView/update/updateDetailViewButton.svelte";
 import type { mediaQueries } from "../utils";
 import type Table from "../components/dataTable/table.svelte";
-import type { Location } from "@wjfe/n-savant";
+import type { page } from "$app/state";
+import type { goto } from "$app/navigation";
 import type RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import type DataTable from "../components/dataTable/dataTable.svelte";
 import type Drawer from "../components/drawer.svelte";
@@ -22,7 +23,7 @@ import * as Icons from "lucide-svelte"
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps } from "../actions";
 import { toast } from "svelte-sonner";
 import type Drawer from "../components/drawer.svelte";
 import { Switch } from "../components/ui/switch";
@@ -54,11 +55,23 @@ export interface Components {
 export interface ExtensionUtils {
     ctx: CTX;
     lobb: LobbClient;
-    location: Location;
+    /**
+     * SvelteKit's reactive page proxy — exposes `url`, `params`, `route`,
+     * `data`, `state`, `error`. Access fields through the proxy
+     * (`utils.page.url.pathname`); don't destructure if you need
+     * reactivity (`const { url } = utils.page` is a one-time snapshot).
+     */
+    page: typeof page;
+    /**
+     * SvelteKit's client-side navigation. Same signature as
+     * `goto(href, options?)` — supports `replaceState`, `invalidateAll`,
+     * `noScroll`, `keepFocus`, etc.
+     */
+    goto: typeof goto;
     toast: typeof toast;
     showDialog: typeof showDialog;
-    openDataTableDrawer: (props: { collectionName: string; filter?: Record<string, any>; title?: string; showHeader?: boolean; showFooter?: boolean; position?: "side" | "bottom" }) => void;
-    emitEvent: (eventName: string, input: Record<string, any>) => Promise<Record<string, any>>;
+    openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;
     intlDate: typeof intlDate;
@@ -71,6 +84,24 @@ interface DashboardNav {
     href?: string;
     onclick?: () => void;
     navs?: DashboardNav[];
+    /**
+     * The collection(s) this nav item represents — i.e. the UI surface it
+     * exposes for that data.
+     *
+     * Visibility is derived from this: the auth extension's `auth.canAccess`
+     * workflow checks the current user's read permission on the represented
+     * collection(s), and the item is hidden if denied. Items without a
+     * `represents` value are always visible.
+     *
+     * @example
+     * // single collection
+     * { label: "Reports", href: "/reports", icon: BarChart, represents: "reports_dashboards" }
+     *
+     * @example
+     * // multiple collections — user must be able to read all of them
+     * { label: "Audit", href: "/audit", icon: ShieldCheck, represents: ["audit_log", "auth_users"] }
+     */
+    represents?: string | string[];
 }
 
 export interface DashboardNavs {
@@ -88,11 +119,13 @@ export interface ExtensionProps {
 // TODO: instead of doing them this way. you can make the components generic and have static keys and we can pass some dynamic data so that we for example extend the list view
 export type ExtensionComponentKey =
     | `pages.${string}`
+    | `publicPages.${string}`
     | "studio.listView"
     | `dvFields.topRight.${string}.${string}`
     | `detailView.update.subRecords.${string}`
     | `detailView.create.subRecords.${string}`
     | `detailView.fields.topRight.${string}.${string}`
+    | "detailView.field.label"
     | `detailView.fields.foreignKey.${string}`
     | `listView.entry.children.${string}`
     | `listView.entry.actions`
@@ -112,7 +145,7 @@ export interface StudioWorkflowContext {
 
 export interface StudioWorkflow {
     eventName: string;
-    handler: (input: Record<string, any>, context: StudioWorkflowContext) => Promise<any>;
+    handler: (input: any, context: StudioWorkflowContext) => Promise<any>;
 }
 
 // extension exported object

package/src/lib/extensions/extensionUtils.ts

@@ -26,7 +26,8 @@ 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 { page } from "$app/state";
+import { goto } from "$app/navigation";
 import RangeCalendarButton from "../components/rangeCalendarButton.svelte";
 import DataTable from "../components/dataTable/dataTable.svelte";
 import Drawer from "../components/drawer.svelte";
@@ -62,7 +63,8 @@ export function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils {
   return {
     ctx: ctx,
     lobb: lobb,
-    location: location,
+    page: page,
+    goto: goto,
     toast: toast,
     showDialog: showDialog,
     openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),

package/src/lib/index.ts

@@ -1,7 +1,8 @@
 export type { ExtensionProps, Extension, ExtensionUtils } from "./extensions/extension.types"
 
-export { default as Studio } from "./components/Studio.svelte";
+export { default as StudioRoot } from "./components/StudioRoot.svelte";
 export { default as Landing } from "./components/landing.svelte";
+export { remountStudio } from "./studioLifecycle.svelte";
 export { Button } from "./components/ui/button";
 export { Input } from "./components/ui/input";
 export { Separator } from "./components/ui/separator";
@@ -11,6 +12,7 @@ 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 { default as DetailView } from "./components/detailView/detailView.svelte";
 export * as Tooltip from "./components/ui/tooltip";
 export * as Breadcrumb from "./components/ui/breadcrumb";
 export { ContextMenu } from "bits-ui";

package/src/lib/store.types.ts

@@ -1,6 +1,6 @@
 import type { Extension } from "./extensions/extension.types";
 
-interface CollectionTab {
+export interface CollectionTab {
     id?: string;
     label: string;
     filter?: Record<string, any>;

package/src/lib/studioLifecycle.svelte.ts

@@ -0,0 +1,17 @@
+// Module-level reactive signal that the Studio root listens to via {#key ...}.
+// Bumping this value tears down the entire Studio component tree and mounts
+// a fresh one, so onStartup re-runs and everything downstream (ctx,
+// extensions, sidebar) initialises with the new session state.
+//
+// Use cases: after login, after logout, after a role/permissions change.
+// Consumers (e.g. the auth extension) call `remountStudio()` instead of
+// having every UI surface listen for auth changes reactively.
+let mountKey = $state(0);
+
+export function getStudioMountKey(): number {
+  return mountKey;
+}
+
+export function remountStudio(): void {
+  mountKey += 1;
+}