nuxt-studio 0.0.0

package/dist/app/utils.d.ts

@@ -0,0 +1,22 @@
+import { CollectionItemBase } from '@nuxt/content';
+
+declare interface BaseItem {
+    id: string;
+    extension: string;
+    stem: string;
+    path?: string;
+}
+
+declare interface DatabaseItem extends CollectionItemBase, BaseItem {
+    [key: string]: unknown;
+}
+
+export declare function generateContentFromDocument(document: DatabaseItem): Promise<string | null>;
+
+export declare function generateDocumentFromContent(id: string, content: string): Promise<DatabaseItem | null>;
+
+export declare function removeReservedKeysFromDocument(document: DatabaseItem): {
+    [k: string]: unknown;
+};
+
+export { }

package/dist/app/utils.js

@@ -0,0 +1,6 @@
+import { e as t, q as n, D as r } from "./utils-DI6F-ifc.js";
+export {
+  t as generateContentFromDocument,
+  n as generateDocumentFromContent,
+  r as removeReservedKeysFromDocument
+};

package/dist/module/module.d.mts

@@ -0,0 +1,68 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * The route to access the studio login page.
+     * @default '/_studio'
+     */
+    route?: string;
+    /**
+     * The authentication settings for studio.
+     */
+    auth?: {
+        /**
+         * The GitHub OAuth credentials.
+         */
+        github?: {
+            /**
+             * The GitHub OAuth client ID.
+             * @default process.env.STUDIO_GITHUB_CLIENT_ID
+             */
+            clientId?: string;
+            /**
+             * The GitHub OAuth client secret.
+             * @default process.env.STUDIO_GITHUB_CLIENT_SECRET
+             */
+            clientSecret?: string;
+        };
+    };
+    /**
+     * The git repository information to connect to.
+     */
+    repository?: {
+        /**
+         * The provider to use for the git repository.
+         * @default 'github'
+         */
+        provider?: 'github';
+        /**
+         * The owner of the git repository.
+         */
+        owner: string;
+        /**
+         * The repository name.
+         */
+        repo: string;
+        /**
+         * The branch to use for the git repository.
+         * @default 'main'
+         */
+        branch?: string;
+        /**
+         * The root directory to use for the git repository.
+         * @default ''
+         */
+        rootDir?: string;
+    };
+    /**
+     * Enable Nuxt Studio to edit content and media files on your filesystem.
+     * Currently experimental.
+     * @experimental
+     */
+    development?: {
+        sync?: boolean;
+    };
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };

package/dist/module/module.json

@@ -0,0 +1,10 @@
+{
+  "name": "nuxt-studio",
+  "configKey": "studio",
+  "version": "0.0.0",
+  "docs": "https://content.nuxt.com/studio",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module/module.mjs

@@ -0,0 +1,185 @@
+import { useLogger, defineNuxtModule, createResolver, addPlugin, extendViteConfig, addServerHandler, addVitePlugin, addTemplate } from '@nuxt/kit';
+import { createHash } from 'node:crypto';
+import { defu } from 'defu';
+import { resolve } from 'node:path';
+import fsDriver from 'unstorage/drivers/fs';
+import { createStorage } from 'unstorage';
+
+async function getAssetsStorageDevTemplate(_assetsStorage, _nuxt) {
+  return [
+    "import { createStorage } from 'unstorage'",
+    "import httpDriver from 'unstorage/drivers/http'",
+    "",
+    `const storage = createStorage({ driver: httpDriver({ base: '/__nuxt_studio/dev/public' }) })`,
+    "export const publicAssetsStorage = storage"
+  ].join("\n");
+}
+async function getAssetsStorageTemplate(assetsStorage, _nuxt) {
+  const keys = await assetsStorage.getKeys();
+  return [
+    "import { createStorage } from 'unstorage'",
+    "const storage = createStorage({})",
+    "",
+    ...keys.map((key) => {
+      const value = {
+        id: `public-assets/${key.replace(/:/g, "/")}`,
+        extension: key.split(".").pop(),
+        stem: key.split(".").join("."),
+        path: "/" + key.replace(/:/g, "/")
+      };
+      return `storage.setItem('${value.id}', ${JSON.stringify(value)})`;
+    }),
+    "",
+    "export const publicAssetsStorage = storage"
+  ].join("\n");
+}
+
+const version = "0.0.0";
+
+const logger = useLogger("nuxt-studio");
+const module = defineNuxtModule({
+  meta: {
+    name: "nuxt-studio",
+    configKey: "studio",
+    version,
+    docs: "https://content.nuxt.com/studio"
+  },
+  defaults: {
+    route: "/_studio",
+    repository: {
+      provider: "github",
+      owner: "",
+      repo: "",
+      branch: "main",
+      rootDir: ""
+    },
+    auth: {
+      github: {
+        clientId: process.env.STUDIO_GITHUB_CLIENT_ID,
+        clientSecret: process.env.STUDIO_GITHUB_CLIENT_SECRET
+      }
+    },
+    development: {
+      sync: false
+    }
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    const runtime = (...args) => resolver.resolve("./runtime", ...args);
+    if (!nuxt.options.dev) {
+      options.development.sync = false;
+    }
+    if (!nuxt.options.dev && !nuxt.options._prepare) {
+      if (!options.auth?.github?.clientId && !options.auth?.github?.clientSecret) {
+        logger.warn([
+          "Nuxt Content Studio relies on GitHub OAuth to authenticate users.",
+          "Please set the `STUDIO_GITHUB_CLIENT_ID` and `STUDIO_GITHUB_CLIENT_SECRET` environment variables."
+        ].join(" "));
+      }
+    }
+    nuxt.options.experimental = nuxt.options.experimental || {};
+    nuxt.options.experimental.checkOutdatedBuildInterval = 1e3 * 30;
+    nuxt.options.runtimeConfig.public.studio = {
+      route: options.route,
+      development: {
+        sync: Boolean(options.development.sync),
+        server: process.env.STUDIO_DEV_SERVER
+      },
+      // @ts-expect-error Autogenerated type does not match with options
+      repository: options.repository
+    };
+    nuxt.options.runtimeConfig.studio = {
+      auth: {
+        sessionSecret: createHash("md5").update([
+          options.auth?.github?.clientId,
+          options.auth?.github?.clientSecret
+        ].join("")).digest("hex"),
+        // @ts-expect-error todo fix github type issue
+        github: options.auth?.github
+      }
+    };
+    addPlugin(process.env.STUDIO_DEV_SERVER ? runtime("./plugins/studio.client.dev") : runtime("./plugins/studio.client"));
+    nuxt.options.vite = defu(nuxt.options.vite, {
+      vue: {
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => tag === "nuxt-studio"
+          }
+        }
+      }
+    });
+    extendViteConfig((config) => {
+      config.define ||= {};
+      config.define["import.meta.preview"] = true;
+      config.optimizeDeps ||= {};
+      config.optimizeDeps.include = [
+        ...config.optimizeDeps.include || [],
+        "debug",
+        "extend"
+      ];
+    });
+    if (options.development.sync) {
+      nuxt.options.nitro.storage = {
+        ...nuxt.options.nitro.storage,
+        nuxt_studio_content: {
+          driver: "fs",
+          base: resolve(nuxt.options.rootDir, "content")
+        },
+        nuxt_studio_public_assets: {
+          driver: "fs",
+          base: resolve(nuxt.options.srcDir, "public")
+        }
+      };
+      addServerHandler({
+        route: "/__nuxt_studio/dev/content/**",
+        handler: runtime("./server/routes/dev/content/[...path]")
+      });
+      addServerHandler({
+        route: "/__nuxt_studio/dev/public/**",
+        handler: runtime("./server/routes/dev/public/[...path]")
+      });
+      addVitePlugin({
+        name: "nuxt-studio",
+        configureServer: (server) => {
+          assetsStorage.watch((type, file) => {
+            server.ws.send({
+              type: "custom",
+              event: "nuxt-studio:media:update",
+              data: { type, id: `public-assets/${file}` }
+            });
+          });
+        },
+        closeWatcher: () => {
+          assetsStorage.unwatch();
+        }
+      });
+    }
+    const assetsStorage = createStorage({
+      driver: fsDriver({
+        base: resolve(nuxt.options.rootDir, "public")
+      })
+    });
+    addTemplate({
+      filename: "studio-public-assets.mjs",
+      getContents: () => options.development.sync ? getAssetsStorageDevTemplate() : getAssetsStorageTemplate(assetsStorage)
+    });
+    addServerHandler({
+      route: "/__nuxt_studio/auth/github",
+      handler: runtime("./server/routes/auth/github.get")
+    });
+    addServerHandler({
+      route: "/__nuxt_studio/auth/session",
+      handler: runtime("./server/routes/auth/session.get")
+    });
+    addServerHandler({
+      method: "delete",
+      route: "/__nuxt_studio/auth/session",
+      handler: runtime("./server/routes/auth/session.delete")
+    });
+    addServerHandler({ route: options.route, handler: runtime("./server/routes/admin") });
+    addServerHandler({ route: "/__nuxt_studio/meta", handler: runtime("./server/routes/meta") });
+    addServerHandler({ route: "/sw.js", handler: runtime("./server/routes/sw") });
+  }
+});
+
+export { module as default };

package/dist/module/runtime/composables/useMeta.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentMeta } from 'nuxt-studio/app';
+export declare const useHostMeta: () => {
+    meta: import("vue").Ref<ComponentMeta | undefined, ComponentMeta | undefined>;
+    fetch: () => Promise<void>;
+    componentsMeta: import("vue").ShallowRef<ComponentMeta[], ComponentMeta[]>;
+};

package/dist/module/runtime/composables/useMeta.js

@@ -0,0 +1,17 @@
+import { createSharedComposable } from "@vueuse/core";
+import { ref, shallowRef } from "vue";
+export const useHostMeta = createSharedComposable(() => {
+  const componentsMeta = shallowRef([]);
+  const meta = ref();
+  async function fetch() {
+    const data = await $fetch("/__nuxt_studio/meta", {
+      headers: { "content-type": "application/json" }
+    }).catch(() => ({ components: [] }));
+    componentsMeta.value = data.components || [];
+  }
+  return {
+    meta,
+    fetch,
+    componentsMeta
+  };
+});

package/dist/module/runtime/host.d.ts

@@ -0,0 +1,2 @@
+import type { StudioHost, StudioUser, Repository } from 'nuxt-studio/app';
+export declare function useStudioHost(user: StudioUser, repository: Repository): StudioHost;

package/dist/module/runtime/host.dev.d.ts

@@ -0,0 +1,2 @@
+import type { StudioUser, Repository } from 'nuxt-studio/app';
+export declare function useStudioHost(user: StudioUser, repository: Repository): import("nuxt-studio/app").StudioHost;

package/dist/module/runtime/host.dev.js

@@ -0,0 +1,46 @@
+import { useStudioHost as useStudioHostBase } from "./host.js";
+import { generateContentFromDocument } from "nuxt-studio/app/utils";
+import { createCollectionDocument, getCollectionInfo } from "./utils/collection.js";
+import { createStorage } from "unstorage";
+import httpDriver from "unstorage/drivers/http";
+import { useRuntimeConfig } from "#imports";
+import { collections } from "#content/preview";
+import { debounce } from "perfect-debounce";
+export function useStudioHost(user, repository) {
+  const host = useStudioHostBase(user, repository);
+  if (!useRuntimeConfig().public.studio.development.sync) {
+    return host;
+  }
+  host.meta.dev = true;
+  const devStorage = createStorage({
+    driver: httpDriver({ base: "/__nuxt_studio/dev/content" })
+  });
+  host.app.requestRerender = () => {
+  };
+  host.document.upsert = debounce(async (id, upsertedDocument) => {
+    id = id.replace(/:/g, "/");
+    const collection = getCollectionInfo(id, collections).collection;
+    const doc = createCollectionDocument(collection, id, upsertedDocument);
+    const content = await generateContentFromDocument(doc);
+    await devStorage.setItem(host.document.getFileSystemPath(id), content, {
+      headers: {
+        "content-type": "text/plain"
+      }
+    });
+  }, 100);
+  host.document.delete = async (id) => {
+    await devStorage.removeItem(host.document.getFileSystemPath(id.replace(/:/g, "/")));
+  };
+  host.on.documentUpdate = (fn) => {
+    import.meta.hot.on("nuxt-content:update", (data) => {
+      const isRemoved = data.queries.length === 0;
+      fn(data.key, isRemoved ? "remove" : "update");
+    });
+  };
+  host.on.mediaUpdate = (fn) => {
+    import.meta.hot.on("nuxt-studio:media:update", (data) => {
+      fn(data.id, data.type);
+    });
+  };
+  return host;
+}

package/dist/module/runtime/host.js

@@ -0,0 +1,257 @@
+import { ref } from "vue";
+import { ensure } from "./utils/ensure.js";
+import { getCollectionByFilePath, generateIdFromFsPath, createCollectionDocument, generateRecordDeletion, generateRecordInsert, getCollectionInfo, normalizeDocument } from "./utils/collection.js";
+import { kebabCase } from "scule";
+import { generateDocumentFromContent } from "nuxt-studio/app/utils";
+import { clearError, getAppManifest, queryCollection, queryCollectionItemSurroundings, queryCollectionNavigation, queryCollectionSearchSections } from "#imports";
+import { collections } from "#content/preview";
+import { publicAssetsStorage } from "#build/studio-public-assets";
+import { useHostMeta } from "./composables/useMeta.js";
+function getSidebarWidth() {
+  let sidebarWidth = 440;
+  if (typeof window !== "undefined" && window.localStorage) {
+    const savedWidth = localStorage.getItem("studio-sidebar-width");
+    if (savedWidth) {
+      const width = Number.parseInt(savedWidth, 10);
+      if (!Number.isNaN(width)) {
+        sidebarWidth = width;
+        return width;
+      }
+    }
+  }
+  return sidebarWidth;
+}
+function getHostStyles() {
+  const currentWidth = getSidebarWidth();
+  return {
+    "body[data-studio-active]": {
+      transition: "margin 0.2s ease"
+    },
+    "body[data-studio-active][data-expand-sidebar]": {
+      marginLeft: `${currentWidth}px`
+    }
+    // 'body[data-studio-active][data-expand-toolbar]': {
+    //   marginTop: '60px',
+    // },
+    // 'body[data-studio-active][data-expand-sidebar][data-expand-toolbar]': {
+    //   marginLeft: `${currentWidth}px`,
+    //   marginTop: '60px',
+    // },
+  };
+}
+function getLocalColorMode() {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+export function useStudioHost(user, repository) {
+  let localDatabaseAdapter = null;
+  let colorMode = getLocalColorMode();
+  const isMounted = ref(false);
+  const meta = useHostMeta();
+  function useNuxtApp() {
+    return window.useNuxtApp();
+  }
+  function useRouter() {
+    return useNuxtApp().$router;
+  }
+  function useContent() {
+    const $content = useNuxtApp().$content || {};
+    return {
+      ...$content,
+      queryCollection,
+      queryCollectionItemSurroundings,
+      queryCollectionNavigation,
+      queryCollectionSearchSections,
+      collections
+    };
+  }
+  function useContentDatabaseAdapter(collection) {
+    return localDatabaseAdapter(collection);
+  }
+  function useContentCollections() {
+    return Object.fromEntries(
+      Object.entries(useContent().collections).filter(([, collection]) => {
+        if (!collection.source.length || collection.source.some((source) => source.repository || source._custom)) {
+          return false;
+        }
+        return true;
+      })
+    );
+  }
+  function useContentCollectionQuery(collection) {
+    return useContent().queryCollection(collection);
+  }
+  const host = {
+    meta: {
+      dev: false,
+      components: () => meta.componentsMeta.value
+    },
+    on: {
+      routeChange: (fn) => {
+        const router = useRouter();
+        router?.afterEach?.((to, from) => {
+          fn(to, from);
+        });
+      },
+      mounted: (fn) => ensure(() => isMounted.value, 400).then(fn),
+      beforeUnload: (fn) => {
+        host.ui.deactivateStudio();
+        ensure(() => isMounted.value).then(() => {
+          window.addEventListener("beforeunload", fn);
+        });
+      },
+      colorModeChange: (fn) => {
+        const localColorModeObserver = new MutationObserver(() => {
+          colorMode = getLocalColorMode();
+          fn(colorMode);
+        });
+        localColorModeObserver.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ["class"]
+        });
+      },
+      manifestUpdate: (fn) => {
+        useNuxtApp().hooks.hookOnce("app:manifest:update", (meta2) => fn(meta2.id));
+      },
+      documentUpdate: (_fn) => {
+      },
+      mediaUpdate: (_fn) => {
+      }
+    },
+    ui: {
+      colorMode,
+      activateStudio: () => {
+        document.body.setAttribute("data-studio-active", "true");
+      },
+      deactivateStudio: () => {
+        document.body.removeAttribute("data-studio-active");
+        host.ui.collapseSidebar();
+        host.ui.updateStyles();
+      },
+      expandSidebar: () => {
+        document.body.setAttribute("data-expand-sidebar", "true");
+        host.ui.updateStyles();
+      },
+      collapseSidebar: () => {
+        document.body.removeAttribute("data-expand-sidebar");
+        host.ui.updateStyles();
+      },
+      updateStyles: () => {
+        const hostStyles = getHostStyles();
+        const styles = Object.keys(hostStyles).map((selector) => {
+          if (selector === "css") return hostStyles.css || "";
+          const styleText = Object.entries(hostStyles[selector]).map(([key, value]) => `${kebabCase(key)}: ${value}`).join(";");
+          return `${selector} { ${styleText} }`;
+        }).join("");
+        let styleElement = document.querySelector("[data-studio-style]");
+        if (!styleElement) {
+          styleElement = document.createElement("style");
+          styleElement.setAttribute("data-studio-style", "");
+          document.head.appendChild(styleElement);
+        }
+        styleElement.textContent = styles;
+      }
+    },
+    repository,
+    // New API
+    user: {
+      get: () => user
+    },
+    document: {
+      get: async (id) => {
+        const item = await useContentCollectionQuery(id.split("/")[0]).where("id", "=", id).first();
+        return normalizeDocument(item);
+      },
+      getFileSystemPath: (id) => {
+        return getCollectionInfo(id, useContentCollections()).fsPath;
+      },
+      list: async () => {
+        const collections2 = Object.keys(useContentCollections()).filter((c) => c !== "info");
+        const contents = await Promise.all(collections2.map(async (collection) => {
+          return await useContentCollectionQuery(collection).all();
+        }));
+        return contents.flat();
+      },
+      create: async (fsPath, content) => {
+        const collections2 = useContentCollections();
+        const collectionInfo = getCollectionByFilePath(fsPath, collections2);
+        const id = generateIdFromFsPath(fsPath, collectionInfo);
+        const existingDocument = await host.document.get(id);
+        if (existingDocument) {
+          throw new Error(`Cannot create document with id "${id}": document already exists.`);
+        }
+        const document2 = await generateDocumentFromContent(id, content);
+        const collectionDocument = createCollectionDocument(collectionInfo, id, document2);
+        await host.document.upsert(id, collectionDocument);
+        return collectionDocument;
+      },
+      upsert: async (id, document2) => {
+        id = id.replace(/:/g, "/");
+        const collection = getCollectionInfo(id, useContentCollections()).collection;
+        const doc = createCollectionDocument(collection, id, document2);
+        await useContentDatabaseAdapter(collection.name).exec(generateRecordDeletion(collection, id));
+        await useContentDatabaseAdapter(collection.name).exec(generateRecordInsert(collection, doc));
+      },
+      delete: async (id) => {
+        id = id.replace(/:/g, "/");
+        const collection = getCollectionInfo(id, useContentCollections()).collection;
+        await useContentDatabaseAdapter(collection.name).exec(generateRecordDeletion(collection, id));
+      },
+      detectActives: () => {
+        const wrappers = document.querySelectorAll("[data-content-id]");
+        return Array.from(wrappers).map((wrapper) => {
+          const id = wrapper.getAttribute("data-content-id");
+          const title = id.split(/[/:]/).pop() || id;
+          return {
+            id,
+            title
+          };
+        });
+      }
+    },
+    media: {
+      get: async (id) => {
+        return await publicAssetsStorage.getItem(id);
+      },
+      getFileSystemPath: (id) => {
+        return id.split("/").slice(1).join("/");
+      },
+      list: async () => {
+        return await Promise.all(await publicAssetsStorage.getKeys().then((keys) => keys.map((key) => publicAssetsStorage.getItem(key))));
+      },
+      upsert: async (id, media) => {
+        await publicAssetsStorage.setItem(id, media);
+      },
+      delete: async (id) => {
+        await publicAssetsStorage.removeItem(id);
+      }
+    },
+    app: {
+      getManifestId: async () => {
+        const manifest = await getAppManifest();
+        return manifest.id;
+      },
+      requestRerender: async () => {
+        if (useNuxtApp().payload.error) {
+          await clearError({ redirect: `?t=${Date.now()}` });
+        }
+        useNuxtApp().hooks.callHookParallel("app:data:refresh");
+      },
+      navigateTo: (path) => {
+        useRouter().push(path);
+      }
+    }
+  };
+  (async () => {
+    host.ui.activateStudio();
+    ensure(() => useContent().queryCollection !== void 0, 500).then(() => ensure(() => useContent().loadLocalDatabase !== void 0)).then(() => useContent().loadLocalDatabase()).then((_localDatabaseAdapter) => {
+      localDatabaseAdapter = _localDatabaseAdapter;
+      isMounted.value = true;
+    }).then(() => {
+      if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("/sw.js");
+      }
+      return meta.fetch();
+    });
+  })();
+  return host;
+}

package/dist/module/runtime/plugins/studio.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/module/runtime/plugins/studio.client.dev.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/module/runtime/plugins/studio.client.dev.js

@@ -0,0 +1,23 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#imports";
+import { defineStudioActivationPlugin } from "../utils/activation.js";
+export default defineNuxtPlugin(() => {
+  defineStudioActivationPlugin(async (user) => {
+    const config = useRuntimeConfig();
+    console.log(`
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557     \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557
+  \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557    \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551   \u2588\u2588\u2551
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551    \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551   \u2588\u2588\u2551
+  \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551    \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D  \u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D
+  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551   \u2588\u2588\u2551   \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D    \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u255A\u2588\u2588\u2588\u2588\u2554\u255D
+  \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D   \u255A\u2550\u255D    \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D     \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D  \u255A\u2550\u2550\u2550\u255D
+    `);
+    const host = await import("../host.dev.js").then((m) => m.useStudioHost);
+    window.useStudioHost = () => host(user, config.public.studio.repository);
+    const el = document.createElement("script");
+    el.src = `${config.public.studio?.development?.server}/src/main.ts`;
+    el.type = "module";
+    document.body.appendChild(el);
+    const wp = document.createElement("nuxt-studio");
+    document.body.appendChild(wp);
+  });
+});

package/dist/module/runtime/plugins/studio.client.js

@@ -0,0 +1,11 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#imports";
+import { defineStudioActivationPlugin } from "../utils/activation.js";
+export default defineNuxtPlugin(() => {
+  defineStudioActivationPlugin(async (user) => {
+    const config = useRuntimeConfig();
+    const host = await import("../host.js").then((m) => m.useStudioHost);
+    window.useStudioHost = () => host(user, config.public.studio.repository);
+    await import("nuxt-studio/app");
+    document.body.appendChild(document.createElement("nuxt-studio"));
+  });
+});