@phtngyn/cms 0.1.0-beta.0

package/src/runtime/preview/controller.js

@@ -0,0 +1,247 @@
+import { V as EditorNodeId, W as RevisionNumber, z as DocumentId } from "../../models-Citx8jBi.js";
+import { a as PreviewIntentId, m as RequestId } from "../../models-DS5ClMsH.js";
+import { clearPreviewTargets, decoratePreviewTargets, findPreviewNodeId, nearestPreviewElement, resolvePreviewTarget } from "./targets.js";
+import { Crypto, Effect, PlatformError, Schema } from "effect";
+
+//#region src/runtime/preview/controller.ts
+const browserCrypto = Crypto.make({
+	digest: (algorithm, data) => Effect.tryPromise({
+		catch: (cause) => PlatformError.systemError({
+			_tag: "Unknown",
+			cause,
+			description: "Could not compute digest",
+			method: "digest",
+			module: "Crypto"
+		}),
+		try: () => globalThis.crypto.subtle.digest(algorithm, Uint8Array.from(data)).then((digest) => new Uint8Array(digest))
+	}),
+	randomBytes: (size) => globalThis.crypto.getRandomValues(new Uint8Array(size))
+});
+const randomUuid = () => Effect.runSync(browserCrypto.randomUUIDv4.pipe(Effect.orDie));
+function mountPreviewController(options) {
+	const { bridge, root, store, view } = options;
+	let active = false;
+	let desiredFocus;
+	let fallbacks = {};
+	let hoveredElements = [];
+	let mode = "edit";
+	let renderSequence = 0;
+	let revision = RevisionNumber.make(0);
+	let selectedElements = [];
+	let lastApplied = "";
+	let revealedIntentId = "";
+	const sendManifest = () => {
+		bridge.send({
+			manifest: store.manifest(),
+			revision,
+			type: "preview:manifest"
+		});
+	};
+	const stopManifest = store.subscribe(sendManifest);
+	const clearElements = (elements, attribute) => {
+		for (const element of elements) element.removeAttribute(attribute);
+	};
+	const sendApplied = (result) => {
+		if (!desiredFocus) return;
+		const signature = `${desiredFocus.id}:${result}`;
+		if (signature === lastApplied) return;
+		lastApplied = signature;
+		const applied = {
+			intentId: desiredFocus.id,
+			result,
+			revision,
+			type: "preview:applied"
+		};
+		bridge.send(desiredFocus.nodeId ? {
+			...applied,
+			nodeId: desiredFocus.nodeId
+		} : applied);
+	};
+	const documentRoot = (documentId) => [...root.querySelectorAll("[data-cms-document]")].find((element) => element.getAttribute("data-cms-document") === documentId) ?? root;
+	const applyFocus = (reveal = false) => {
+		clearElements(selectedElements, "data-cms-selected");
+		selectedElements = [];
+		if (!active || mode !== "edit") return;
+		const intent = desiredFocus;
+		const nodeId = intent?.nodeId;
+		if (!intent || !nodeId) {
+			sendApplied("exact");
+			return;
+		}
+		const scope = documentRoot(intent.documentId);
+		decoratePreviewTargets(scope);
+		const target = resolvePreviewTarget(scope, nodeId, fallbacks);
+		selectedElements = target.elements;
+		for (const element of selectedElements) element.setAttribute("data-cms-selected", "");
+		const result = !target.resolvedNodeId ? "missing" : target.resolvedNodeId === nodeId ? "exact" : "fallback";
+		if (reveal && result !== "missing" && revealedIntentId !== intent.id) {
+			revealedIntentId = intent.id;
+			revealElement(nearestPreviewElement(selectedElements), view);
+		}
+		sendApplied(result);
+	};
+	const hoverElements = (target) => {
+		clearElements(hoveredElements, "data-cms-hovered");
+		hoveredElements = [];
+		if (!active || mode !== "edit" || !target) return;
+		const scope = target.closest("[data-cms-document]") ?? root;
+		const nodeId = findPreviewNodeId(scope, target);
+		if (!nodeId) return;
+		hoveredElements = resolvePreviewTarget(scope, nodeId, fallbacks).elements;
+		for (const element of hoveredElements) element.setAttribute("data-cms-hovered", "");
+	};
+	const settleRender = (sequence) => {
+		view.requestAnimationFrame(() => view.requestAnimationFrame(() => {
+			if (sequence !== renderSequence) return;
+			active = true;
+			decoratePreviewTargets(root);
+			bridge.send({
+				revision,
+				type: "preview:rendered"
+			});
+			applyFocus(desiredFocus?.reveal);
+		}));
+	};
+	const stopBridge = bridge.subscribe((message) => {
+		if (message.type === "studio:connect") {
+			active = true;
+			clearPreviewTargets(root);
+			decoratePreviewTargets(root);
+			sendManifest();
+			return;
+		}
+		if (message.type === "studio:mode") {
+			mode = message.mode;
+			if (mode === "browse") {
+				hoverElements();
+				clearElements(selectedElements, "data-cms-selected");
+				selectedElements = [];
+			} else {
+				decoratePreviewTargets(root);
+				applyFocus();
+			}
+			return;
+		}
+		if (message.type === "studio:navigate") {
+			options.navigate(message.path);
+			return;
+		}
+		if (message.type === "studio:focus") {
+			if (message.focus.revision !== revision) return;
+			desiredFocus = message.focus;
+			applyFocus(desiredFocus.reveal);
+			return;
+		}
+		if (message.type !== "studio:patch" || message.revision < revision) return;
+		revision = message.revision;
+		active = false;
+		desiredFocus = message.focus;
+		lastApplied = "";
+		const sequence = ++renderSequence;
+		store.patch(message.document).then((localFallbacks) => {
+			fallbacks = Object.assign({}, message.fallbacks, localFallbacks);
+			settleRender(sequence);
+		});
+	});
+	const handleClick = (event) => {
+		if (!active) return;
+		const target = event.target instanceof Element ? event.target : null;
+		if (mode === "browse") {
+			const link = target?.closest("a[href]");
+			if (!(link instanceof HTMLAnchorElement) || link.target || link.hasAttribute("download") || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			const destination = new URL(link.href, view.location.href);
+			if (destination.origin !== view.location.origin) return;
+			event.preventDefault();
+			options.navigate(destination.pathname);
+			return;
+		}
+		const scope = target?.closest("[data-cms-document]");
+		const documentIdValue = scope?.getAttribute("data-cms-document");
+		if (!target || !scope || !Schema.is(DocumentId)(documentIdValue)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const nodeIdValue = findPreviewNodeId(scope, target);
+		const nodeId = Schema.is(EditorNodeId)(nodeIdValue) ? nodeIdValue : void 0;
+		const field = target.closest("[data-cms-field]")?.getAttribute("data-cms-field") || void 0;
+		const activationFocus = {
+			documentId: documentIdValue,
+			id: PreviewIntentId.make(randomUuid()),
+			origin: "preview",
+			reveal: false,
+			revision
+		};
+		desiredFocus = nodeId ? {
+			...activationFocus,
+			nodeId
+		} : activationFocus;
+		lastApplied = "";
+		const activation = {
+			documentId: desiredFocus.documentId,
+			requestId: RequestId.make(randomUuid()),
+			revision,
+			type: "preview:activate"
+		};
+		if (field && nodeId) bridge.send({
+			...activation,
+			field,
+			nodeId
+		});
+		else if (field) bridge.send({
+			...activation,
+			field
+		});
+		else if (nodeId) bridge.send({
+			...activation,
+			nodeId
+		});
+		else bridge.send(activation);
+		applyFocus();
+	};
+	const handlePointerOver = (event) => hoverElements(event.target instanceof Element ? event.target : void 0);
+	const handlePointerOut = (event) => {
+		if (!(event.relatedTarget instanceof Element)) hoverElements();
+	};
+	let mutationQueued = false;
+	const observer = new MutationObserver(() => {
+		if (mutationQueued) return;
+		mutationQueued = true;
+		queueMicrotask(() => {
+			mutationQueued = false;
+			if (!active) return;
+			hoverElements();
+			decoratePreviewTargets(root);
+			if (desiredFocus) applyFocus(false);
+		});
+	});
+	root.addEventListener("click", handleClick, true);
+	root.addEventListener("pointerover", handlePointerOver, true);
+	root.addEventListener("pointerout", handlePointerOut, true);
+	observer.observe(root.documentElement, {
+		childList: true,
+		subtree: true
+	});
+	return () => {
+		stopBridge();
+		stopManifest();
+		observer.disconnect();
+		root.removeEventListener("click", handleClick, true);
+		root.removeEventListener("pointerover", handlePointerOver, true);
+		root.removeEventListener("pointerout", handlePointerOut, true);
+		clearPreviewTargets(root);
+	};
+}
+function revealElement(element, view) {
+	if (!element) return;
+	const rect = element.getBoundingClientRect();
+	const margin = Math.min(80, view.innerHeight / 5);
+	if (rect.top >= margin && rect.bottom <= view.innerHeight - margin) return;
+	element.scrollIntoView({
+		behavior: view.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
+		block: "center",
+		inline: "nearest"
+	});
+}
+
+//#endregion
+export { mountPreviewController };
+//# sourceMappingURL=controller.js.map

package/src/runtime/preview/controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/runtime/preview/controller.ts"],"sourcesContent":["import type { DocumentPreviewFocusIntent, PreviewSiteBridge, StudioPreviewPayload } from '@internal/protocol/Preview'\nimport type { StudioPreviewStore } from './store'\nimport { DocumentId, EditorNodeId, RevisionNumber } from '@internal/protocol/Documents'\nimport { RequestId } from '@internal/protocol/Identity'\nimport { PreviewIntentId } from '@internal/protocol/Preview'\nimport { Crypto, Effect, PlatformError, Schema } from 'effect'\nimport {\n  clearPreviewTargets,\n  decoratePreviewTargets,\n  findPreviewNodeId,\n  nearestPreviewElement,\n  resolvePreviewTarget,\n} from './targets'\n\nconst browserCrypto = Crypto.make({\n  digest: (algorithm, data) =>\n    Effect.tryPromise({\n      catch: (cause) =>\n        PlatformError.systemError({\n          _tag: 'Unknown',\n          cause,\n          description: 'Could not compute digest',\n          method: 'digest',\n          module: 'Crypto',\n        }),\n      try: () =>\n        globalThis.crypto.subtle.digest(algorithm, Uint8Array.from(data)).then((digest) => new Uint8Array(digest)),\n    }),\n  randomBytes: (size) => globalThis.crypto.getRandomValues(new Uint8Array(size)),\n})\n\nconst randomUuid = (): string => Effect.runSync(browserCrypto.randomUUIDv4.pipe(Effect.orDie))\n\nexport function mountPreviewController(options: {\n  readonly bridge: PreviewSiteBridge\n  readonly navigate: (path: string) => Promise<void> | void\n  readonly root: Document\n  readonly store: StudioPreviewStore\n  readonly view: Window\n}): () => void {\n  type PreviewFallbacks = Extract<StudioPreviewPayload, { readonly type: 'studio:patch' }>['fallbacks']\n  const { bridge, root, store, view } = options\n  let active = false\n  let desiredFocus: DocumentPreviewFocusIntent | undefined\n  let fallbacks: PreviewFallbacks = {}\n  let hoveredElements: ReadonlyArray<Element> = []\n  let mode: 'browse' | 'edit' = 'edit'\n  let renderSequence = 0\n  let revision = RevisionNumber.make(0)\n  let selectedElements: ReadonlyArray<Element> = []\n  let lastApplied = ''\n  let revealedIntentId = ''\n\n  const sendManifest = (): void => {\n    bridge.send({ manifest: store.manifest(), revision, type: 'preview:manifest' })\n  }\n  const stopManifest = store.subscribe(sendManifest)\n  const clearElements = (elements: ReadonlyArray<Element>, attribute: string): void => {\n    for (const element of elements) element.removeAttribute(attribute)\n  }\n  const sendApplied = (result: 'exact' | 'fallback' | 'missing'): void => {\n    if (!desiredFocus) return\n    const signature = `${desiredFocus.id}:${result}`\n    if (signature === lastApplied) return\n    lastApplied = signature\n    const applied = {\n      intentId: desiredFocus.id,\n      result,\n      revision,\n      type: 'preview:applied',\n    } as const\n    bridge.send(desiredFocus.nodeId ? { ...applied, nodeId: desiredFocus.nodeId } : applied)\n  }\n  const documentRoot = (documentId: string): ParentNode =>\n    [...root.querySelectorAll('[data-cms-document]')].find(\n      (element) => element.getAttribute('data-cms-document') === documentId,\n    ) ?? root\n  const applyFocus = (reveal = false): void => {\n    clearElements(selectedElements, 'data-cms-selected')\n    selectedElements = []\n    if (!active || mode !== 'edit') return\n    const intent = desiredFocus\n    const nodeId = intent?.nodeId\n    if (!intent || !nodeId) {\n      sendApplied('exact')\n      return\n    }\n    const scope = documentRoot(intent.documentId)\n    decoratePreviewTargets(scope)\n    const target = resolvePreviewTarget(scope, nodeId, fallbacks)\n    selectedElements = target.elements\n    for (const element of selectedElements) element.setAttribute('data-cms-selected', '')\n    const result = !target.resolvedNodeId ? 'missing' : target.resolvedNodeId === nodeId ? 'exact' : 'fallback'\n    if (reveal && result !== 'missing' && revealedIntentId !== intent.id) {\n      revealedIntentId = intent.id\n      revealElement(nearestPreviewElement(selectedElements), view)\n    }\n    sendApplied(result)\n  }\n  const hoverElements = (target?: Element): void => {\n    clearElements(hoveredElements, 'data-cms-hovered')\n    hoveredElements = []\n    if (!active || mode !== 'edit' || !target) return\n    const scope = target.closest('[data-cms-document]') ?? root\n    const nodeId = findPreviewNodeId(scope, target)\n    if (!nodeId) return\n    hoveredElements = resolvePreviewTarget(scope, nodeId, fallbacks).elements\n    for (const element of hoveredElements) element.setAttribute('data-cms-hovered', '')\n  }\n  const settleRender = (sequence: number): void => {\n    view.requestAnimationFrame(() =>\n      view.requestAnimationFrame(() => {\n        if (sequence !== renderSequence) return\n        active = true\n        decoratePreviewTargets(root)\n        bridge.send({ revision, type: 'preview:rendered' })\n        applyFocus(desiredFocus?.reveal)\n      }),\n    )\n  }\n\n  const stopBridge = bridge.subscribe((message) => {\n    if (message.type === 'studio:connect') {\n      active = true\n      clearPreviewTargets(root)\n      decoratePreviewTargets(root)\n      sendManifest()\n      return\n    }\n    if (message.type === 'studio:mode') {\n      mode = message.mode\n      if (mode === 'browse') {\n        hoverElements()\n        clearElements(selectedElements, 'data-cms-selected')\n        selectedElements = []\n      } else {\n        decoratePreviewTargets(root)\n        applyFocus()\n      }\n      return\n    }\n    if (message.type === 'studio:navigate') {\n      void options.navigate(message.path)\n      return\n    }\n    if (message.type === 'studio:focus') {\n      if (message.focus.revision !== revision) return\n      desiredFocus = message.focus\n      applyFocus(desiredFocus.reveal)\n      return\n    }\n    if (message.type !== 'studio:patch' || message.revision < revision) return\n    revision = message.revision\n    active = false\n    desiredFocus = message.focus\n    lastApplied = ''\n    const sequence = ++renderSequence\n    void store.patch(message.document).then((localFallbacks) => {\n      fallbacks = Object.assign({}, message.fallbacks, localFallbacks)\n      settleRender(sequence)\n    })\n  })\n\n  const handleClick = (event: MouseEvent) => {\n    if (!active) return\n    const target = event.target instanceof Element ? event.target : null\n    if (mode === 'browse') {\n      const link = target?.closest('a[href]')\n      if (\n        !(link instanceof HTMLAnchorElement) ||\n        link.target ||\n        link.hasAttribute('download') ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey\n      )\n        return\n      const destination = new URL(link.href, view.location.href)\n      if (destination.origin !== view.location.origin) return\n      event.preventDefault()\n      void options.navigate(destination.pathname)\n      return\n    }\n    const scope = target?.closest('[data-cms-document]')\n    const documentIdValue = scope?.getAttribute('data-cms-document')\n    if (!target || !scope || !Schema.is(DocumentId)(documentIdValue)) return\n    event.preventDefault()\n    event.stopPropagation()\n    const nodeIdValue = findPreviewNodeId(scope, target)\n    const nodeId = Schema.is(EditorNodeId)(nodeIdValue) ? nodeIdValue : undefined\n    const field = target.closest('[data-cms-field]')?.getAttribute('data-cms-field') || undefined\n    const activationFocus = {\n      documentId: documentIdValue,\n      id: PreviewIntentId.make(randomUuid()),\n      origin: 'preview',\n      reveal: false,\n      revision,\n    } as const\n    desiredFocus = nodeId ? { ...activationFocus, nodeId } : activationFocus\n    lastApplied = ''\n    const activation = {\n      documentId: desiredFocus.documentId,\n      requestId: RequestId.make(randomUuid()),\n      revision,\n      type: 'preview:activate',\n    } as const\n    if (field && nodeId) bridge.send({ ...activation, field, nodeId })\n    else if (field) bridge.send({ ...activation, field })\n    else if (nodeId) bridge.send({ ...activation, nodeId })\n    else bridge.send(activation)\n    applyFocus()\n  }\n  const handlePointerOver = (event: PointerEvent) =>\n    hoverElements(event.target instanceof Element ? event.target : undefined)\n  const handlePointerOut = (event: PointerEvent) => {\n    if (!(event.relatedTarget instanceof Element)) hoverElements()\n  }\n  let mutationQueued = false\n  const observer = new MutationObserver(() => {\n    if (mutationQueued) return\n    mutationQueued = true\n    queueMicrotask(() => {\n      mutationQueued = false\n      if (!active) return\n      hoverElements()\n      decoratePreviewTargets(root)\n      if (desiredFocus) applyFocus(false)\n    })\n  })\n\n  root.addEventListener('click', handleClick, true)\n  root.addEventListener('pointerover', handlePointerOver, true)\n  root.addEventListener('pointerout', handlePointerOut, true)\n  observer.observe(root.documentElement, { childList: true, subtree: true })\n\n  return () => {\n    stopBridge()\n    stopManifest()\n    observer.disconnect()\n    root.removeEventListener('click', handleClick, true)\n    root.removeEventListener('pointerover', handlePointerOver, true)\n    root.removeEventListener('pointerout', handlePointerOut, true)\n    clearPreviewTargets(root)\n  }\n}\n\nfunction revealElement(element: Element | undefined, view: Window): void {\n  if (!element) return\n  const rect = element.getBoundingClientRect()\n  const margin = Math.min(80, view.innerHeight / 5)\n  if (rect.top >= margin && rect.bottom <= view.innerHeight - margin) return\n  element.scrollIntoView({\n    behavior: view.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',\n    block: 'center',\n    inline: 'nearest',\n  })\n}\n"],"mappings":"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"}

package/src/runtime/preview/plugin.client.js

@@ -0,0 +1,70 @@
+import { H as PublicPath } from "../../models-Citx8jBi.js";
+import { s as PreviewOrigin, u as PreviewSessionId } from "../../models-DS5ClMsH.js";
+import { t as openSitePreviewConnection } from "../../connection-ZGtL54qY.js";
+import { documentPreviewStoreKey } from "../delivery/preview.js";
+import { mountPreviewController } from "./controller.js";
+import { t as createStudioPreviewStore } from "../../store-Nl4uxEXx.js";
+import { Option, Schema } from "effect";
+import { defineNuxtPlugin, navigateTo, useNuxtApp } from "nuxt/app";
+
+//#region ../protocol/src/internal/preview/location.ts
+const ENABLED_PARAMETER = "_cms_preview";
+const EDITOR_ORIGIN_PARAMETER = "_cms_preview_editor_origin";
+const SESSION_PARAMETER = "_cms_preview_session";
+const PreviewLocationParameters = Schema.Struct({
+	editorOrigin: PreviewOrigin,
+	sessionId: PreviewSessionId
+});
+function readPreviewLocation(url) {
+	if (!url.searchParams.has(ENABLED_PARAMETER)) return void 0;
+	return Schema.decodeUnknownOption(PreviewLocationParameters)({
+		editorOrigin: url.searchParams.get(EDITOR_ORIGIN_PARAMETER),
+		sessionId: url.searchParams.get(SESSION_PARAMETER)
+	}).pipe(Option.getOrUndefined);
+}
+function withPreviewLocation(url, parameters) {
+	const next = new URL(url);
+	next.searchParams.set(ENABLED_PARAMETER, "1");
+	next.searchParams.set(EDITOR_ORIGIN_PARAMETER, parameters.editorOrigin);
+	next.searchParams.set(SESSION_PARAMETER, parameters.sessionId);
+	return next;
+}
+
+//#endregion
+//#region src/runtime/preview/plugin.client.ts
+var plugin_client_default = defineNuxtPlugin(async () => {
+	const parameters = readPreviewLocation(new URL(window.location.href));
+	if (!parameters) return;
+	const route = () => Schema.decodeSync(PublicPath)(window.location.pathname);
+	const store = createStudioPreviewStore(route);
+	const nuxtApp = useNuxtApp();
+	nuxtApp.vueApp.provide(documentPreviewStoreKey, store);
+	nuxtApp.hooks.hook("page:finish", store.routeChanged);
+	const mount = async () => {
+		const connection = await openSitePreviewConnection({
+			editorOrigin: parameters.editorOrigin,
+			route: route(),
+			sessionId: parameters.sessionId
+		});
+		const unmount = mountPreviewController({
+			bridge: connection,
+			navigate: async (path) => {
+				const target = withPreviewLocation(new URL(path, window.location.origin), parameters);
+				await navigateTo(`${target.pathname}${target.search}${target.hash}`);
+			},
+			root: document,
+			store,
+			view: window
+		});
+		window.addEventListener("pagehide", () => {
+			unmount();
+			connection.close();
+		}, { once: true });
+	};
+	if (nuxtApp.isHydrating) nuxtApp.hooks.hookOnce("app:suspense:resolve", mount);
+	else await mount();
+});
+
+//#endregion
+export { plugin_client_default as default };
+//# sourceMappingURL=plugin.client.js.map

package/src/runtime/preview/plugin.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.client.js","names":["PreviewOriginSchema","PreviewSessionIdSchema"],"sources":["../../../../../../protocol/src/internal/preview/location.ts","../../../../../src/runtime/preview/plugin.client.ts"],"sourcesContent":["import { Option, Schema } from 'effect'\nimport { PreviewOrigin as PreviewOriginSchema, PreviewSessionId as PreviewSessionIdSchema } from './models'\n\nconst ENABLED_PARAMETER = '_cms_preview'\nconst EDITOR_ORIGIN_PARAMETER = '_cms_preview_editor_origin'\nconst SESSION_PARAMETER = '_cms_preview_session'\n\nconst PreviewLocationParameters = Schema.Struct({\n  editorOrigin: PreviewOriginSchema,\n  sessionId: PreviewSessionIdSchema,\n})\n\nexport interface PreviewLocationParameters extends Schema.Schema.Type<typeof PreviewLocationParameters> {}\n\nexport function readPreviewLocation(url: URL): PreviewLocationParameters | undefined {\n  if (!url.searchParams.has(ENABLED_PARAMETER)) return undefined\n  return Schema.decodeUnknownOption(PreviewLocationParameters)({\n    editorOrigin: url.searchParams.get(EDITOR_ORIGIN_PARAMETER),\n    sessionId: url.searchParams.get(SESSION_PARAMETER),\n  }).pipe(Option.getOrUndefined)\n}\n\nexport function withPreviewLocation(url: URL, parameters: PreviewLocationParameters): URL {\n  const next = new URL(url)\n  next.searchParams.set(ENABLED_PARAMETER, '1')\n  next.searchParams.set(EDITOR_ORIGIN_PARAMETER, parameters.editorOrigin)\n  next.searchParams.set(SESSION_PARAMETER, parameters.sessionId)\n  return next\n}\n\nexport function withoutPreviewLocation(url: URL): URL {\n  const next = new URL(url)\n  next.searchParams.delete(ENABLED_PARAMETER)\n  next.searchParams.delete(EDITOR_ORIGIN_PARAMETER)\n  next.searchParams.delete(SESSION_PARAMETER)\n  return next\n}\n","import { defineNuxtPlugin, navigateTo, useNuxtApp } from 'nuxt/app'\nimport { PublicPath } from '@internal/protocol/Documents'\nimport { readPreviewLocation, withPreviewLocation } from '@internal/protocol/Preview'\nimport { Schema } from 'effect'\nimport { openSitePreviewConnection } from './connection'\nimport { mountPreviewController } from './controller'\nimport { createStudioPreviewStore, documentPreviewStoreKey } from './store'\n\nexport default defineNuxtPlugin(async () => {\n  const parameters = readPreviewLocation(new URL(window.location.href))\n  if (!parameters) return\n  const route = () => Schema.decodeSync(PublicPath)(window.location.pathname)\n  const store = createStudioPreviewStore(route)\n  const nuxtApp = useNuxtApp()\n  nuxtApp.vueApp.provide(documentPreviewStoreKey, store)\n  nuxtApp.hooks.hook('page:finish', store.routeChanged)\n\n  const mount = async () => {\n    const connection = await openSitePreviewConnection({\n      editorOrigin: parameters.editorOrigin,\n      route: route(),\n      sessionId: parameters.sessionId,\n    })\n    const unmount = mountPreviewController({\n      bridge: connection,\n      navigate: async (path) => {\n        const target = withPreviewLocation(new URL(path, window.location.origin), parameters)\n        await navigateTo(`${target.pathname}${target.search}${target.hash}`)\n      },\n      root: document,\n      store,\n      view: window,\n    })\n    window.addEventListener(\n      'pagehide',\n      () => {\n        unmount()\n        void connection.close()\n      },\n      { once: true },\n    )\n  }\n\n  if (nuxtApp.isHydrating) nuxtApp.hooks.hookOnce('app:suspense:resolve', mount)\n  else await mount()\n})\n"],"mappings":";;;;;;;;;;AAGA,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,oBAAoB;AAE1B,MAAM,4BAA4B,OAAO,OAAO;CAC9C,cAAcA;CACd,WAAWC;AACb,CAAC;AAID,SAAgB,oBAAoB,KAAiD;CACnF,IAAI,CAAC,IAAI,aAAa,IAAI,iBAAiB,GAAG,OAAO;CACrD,OAAO,OAAO,oBAAoB,yBAAyB,CAAC,CAAC;EAC3D,cAAc,IAAI,aAAa,IAAI,uBAAuB;EAC1D,WAAW,IAAI,aAAa,IAAI,iBAAiB;CACnD,CAAC,CAAC,CAAC,KAAK,OAAO,cAAc;AAC/B;AAEA,SAAgB,oBAAoB,KAAU,YAA4C;CACxF,MAAM,OAAO,IAAI,IAAI,GAAG;CACxB,KAAK,aAAa,IAAI,mBAAmB,GAAG;CAC5C,KAAK,aAAa,IAAI,yBAAyB,WAAW,YAAY;CACtE,KAAK,aAAa,IAAI,mBAAmB,WAAW,SAAS;CAC7D,OAAO;AACT;;;;ACpBA,4BAAe,iBAAiB,YAAY;CAC1C,MAAM,aAAa,oBAAoB,IAAI,IAAI,OAAO,SAAS,IAAI,CAAC;CACpE,IAAI,CAAC,YAAY;CACjB,MAAM,cAAc,OAAO,WAAW,UAAU,CAAC,CAAC,OAAO,SAAS,QAAQ;CAC1E,MAAM,QAAQ,yBAAyB,KAAK;CAC5C,MAAM,UAAU,WAAW;CAC3B,QAAQ,OAAO,QAAQ,yBAAyB,KAAK;CACrD,QAAQ,MAAM,KAAK,eAAe,MAAM,YAAY;CAEpD,MAAM,QAAQ,YAAY;EACxB,MAAM,aAAa,MAAM,0BAA0B;GACjD,cAAc,WAAW;GACzB,OAAO,MAAM;GACb,WAAW,WAAW;EACxB,CAAC;EACD,MAAM,UAAU,uBAAuB;GACrC,QAAQ;GACR,UAAU,OAAO,SAAS;IACxB,MAAM,SAAS,oBAAoB,IAAI,IAAI,MAAM,OAAO,SAAS,MAAM,GAAG,UAAU;IACpF,MAAM,WAAW,GAAG,OAAO,WAAW,OAAO,SAAS,OAAO,MAAM;GACrE;GACA,MAAM;GACN;GACA,MAAM;EACR,CAAC;EACD,OAAO,iBACL,kBACM;GACJ,QAAQ;GACR,AAAK,WAAW,MAAM;EACxB,GACA,EAAE,MAAM,KAAK,CACf;CACF;CAEA,IAAI,QAAQ,aAAa,QAAQ,MAAM,SAAS,wBAAwB,KAAK;MACxE,MAAM,MAAM;AACnB,CAAC"}

package/src/runtime/preview/preview.css

@@ -0,0 +1,9 @@
+[data-cms-preview-decorated] {
+  cursor: text;
+  outline-offset: 3px;
+}
+
+[data-cms-preview-decorated][data-cms-hovered],
+[data-cms-preview-decorated][data-cms-selected] {
+  outline: 2px solid var(--cms-preview-accent, #3b82f6);
+}

package/src/runtime/preview/protocol.d.ts

@@ -0,0 +1,10 @@
+//#region src/runtime/preview/protocol.d.ts
+export declare const CMS_PREVIEW_DECORATED_ATTRIBUTE = "data-cms-preview-decorated";
+export declare const CMS_PREVIEW_INLINE_HOST_ATTRIBUTE = "data-cms-inline-host";
+export declare const CMS_PREVIEW_NODE_ATTRIBUTE = "data-cms-node";
+export declare const CMS_PREVIEW_MARKER_TAG = "cms-studio-preview-marker";
+export declare const CMS_PREVIEW_TARGET_ATTRIBUTE = "data-cms-target";
+export declare const CMS_PREVIEW_WRAPPER_ATTRIBUTE = "data-cms-marker";
+export type CmsPreviewTargetKind = 'component' | 'native' | 'slot';
+//#endregion
+//# sourceMappingURL=protocol.d.ts.map

package/src/runtime/preview/protocol.js

@@ -0,0 +1,11 @@
+//#region src/runtime/preview/protocol.ts
+const CMS_PREVIEW_DECORATED_ATTRIBUTE = "data-cms-preview-decorated";
+const CMS_PREVIEW_INLINE_HOST_ATTRIBUTE = "data-cms-inline-host";
+const CMS_PREVIEW_NODE_ATTRIBUTE = "data-cms-node";
+const CMS_PREVIEW_MARKER_TAG = "cms-studio-preview-marker";
+const CMS_PREVIEW_TARGET_ATTRIBUTE = "data-cms-target";
+const CMS_PREVIEW_WRAPPER_ATTRIBUTE = "data-cms-marker";
+
+//#endregion
+export { CMS_PREVIEW_DECORATED_ATTRIBUTE, CMS_PREVIEW_INLINE_HOST_ATTRIBUTE, CMS_PREVIEW_MARKER_TAG, CMS_PREVIEW_NODE_ATTRIBUTE, CMS_PREVIEW_TARGET_ATTRIBUTE, CMS_PREVIEW_WRAPPER_ATTRIBUTE };
+//# sourceMappingURL=protocol.js.map

package/src/runtime/preview/protocol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"protocol.js","names":[],"sources":["../../../../../src/runtime/preview/protocol.ts"],"sourcesContent":["export const CMS_PREVIEW_DECORATED_ATTRIBUTE = 'data-cms-preview-decorated'\nexport const CMS_PREVIEW_INLINE_HOST_ATTRIBUTE = 'data-cms-inline-host'\nexport const CMS_PREVIEW_NODE_ATTRIBUTE = 'data-cms-node'\nexport const CMS_PREVIEW_MARKER_TAG = 'cms-studio-preview-marker'\nexport const CMS_PREVIEW_TARGET_ATTRIBUTE = 'data-cms-target'\nexport const CMS_PREVIEW_WRAPPER_ATTRIBUTE = 'data-cms-marker'\n\nexport type CmsPreviewTargetKind = 'component' | 'native' | 'slot'\n"],"mappings":";AAAA,MAAa,kCAAkC;AAC/C,MAAa,oCAAoC;AACjD,MAAa,6BAA6B;AAC1C,MAAa,yBAAyB;AACtC,MAAa,+BAA+B;AAC5C,MAAa,gCAAgC"}

package/src/runtime/preview/store.js

@@ -0,0 +1,4 @@
+import { documentPreviewStoreKey } from "../delivery/preview.js";
+import { t as createStudioPreviewStore } from "../../store-Nl4uxEXx.js";
+
+export { createStudioPreviewStore, documentPreviewStoreKey };

package/src/runtime/preview/targets.js

@@ -0,0 +1,102 @@
+import { CMS_PREVIEW_DECORATED_ATTRIBUTE, CMS_PREVIEW_INLINE_HOST_ATTRIBUTE, CMS_PREVIEW_NODE_ATTRIBUTE, CMS_PREVIEW_TARGET_ATTRIBUTE, CMS_PREVIEW_WRAPPER_ATTRIBUTE } from "./protocol.js";
+
+//#region src/runtime/preview/targets.ts
+const TARGET_PRIORITY = {
+	component: 1,
+	native: 3,
+	slot: 2
+};
+/** Picks the deepest authorable target represented by the clicked rendered element. */
+function findPreviewNodeId(root, clicked) {
+	const candidates = collectPreviewTargets(root).filter((target) => target.elements.some((element) => element === clicked || element.contains(clicked)));
+	candidates.sort((left, right) => Number(right.kind === "native") - Number(left.kind === "native") || targetDepth(right) - targetDepth(left) || TARGET_PRIORITY[right.kind] - TARGET_PRIORITY[left.kind] || targetArea(left) - targetArea(right));
+	return candidates[0]?.id;
+}
+function resolvePreviewTarget(root, nodeId, fallbacks) {
+	const visited = /* @__PURE__ */ new Set();
+	const targets = collectPreviewTargets(root);
+	let targetId = nodeId;
+	while (targetId && !visited.has(targetId)) {
+		visited.add(targetId);
+		const elements = [...new Set(targets.filter((target) => target.id === targetId).flatMap((target) => target.elements))];
+		if (elements.length) return {
+			elements,
+			resolvedNodeId: targetId
+		};
+		targetId = fallbacks[targetId];
+	}
+	return { elements: [] };
+}
+function decoratePreviewTargets(root) {
+	for (const target of collectPreviewTargets(root)) for (const element of target.elements) element.setAttribute(CMS_PREVIEW_DECORATED_ATTRIBUTE, "");
+}
+function clearPreviewTargets(root) {
+	for (const element of root.querySelectorAll(`[${CMS_PREVIEW_DECORATED_ATTRIBUTE}], [data-cms-hovered], [data-cms-selected]`)) {
+		element.removeAttribute(CMS_PREVIEW_DECORATED_ATTRIBUTE);
+		element.removeAttribute("data-cms-hovered");
+		element.removeAttribute("data-cms-selected");
+	}
+}
+function nearestPreviewElement(elements) {
+	const viewportCenter = window.innerHeight / 2;
+	return [...elements].sort((left, right) => viewportDistance(left, viewportCenter) - viewportDistance(right, viewportCenter))[0];
+}
+function collectPreviewTargets(root) {
+	return [...root.querySelectorAll(`[${CMS_PREVIEW_NODE_ATTRIBUTE}]`)].flatMap((marker) => {
+		const id = marker.getAttribute(CMS_PREVIEW_NODE_ATTRIBUTE);
+		const kind = previewTargetKind(marker.getAttribute(CMS_PREVIEW_TARGET_ATTRIBUTE));
+		return id && kind ? [{
+			elements: resolveMarkerElements(marker, kind),
+			id,
+			kind
+		}] : [];
+	});
+}
+function resolveMarkerElements(marker, kind) {
+	const isWrapper = marker.hasAttribute(CMS_PREVIEW_WRAPPER_ATTRIBUTE);
+	if (marker.hasAttribute("data-cms-inline-host") && isConcreteElement(marker)) return [marker];
+	if (!isWrapper && isConcreteElement(marker)) return [marker];
+	const children = [...marker.children].filter(isConcreteElement);
+	if (isWrapper && children.length) return children;
+	if (isWrapper && (kind === "native" || kind === "slot")) {
+		const parent = marker.parentElement;
+		return parent && isConcreteElement(parent) ? [parent] : [];
+	}
+	return children;
+}
+function isConcreteElement(element) {
+	const view = element.ownerDocument.defaultView;
+	if (!view || view.getComputedStyle(element).display === "contents") return false;
+	return [...element.getClientRects()].some((rect) => rect.width > 0 && rect.height > 0);
+}
+function previewTargetKind(value) {
+	return value === "component" || value === "native" || value === "slot" ? value : void 0;
+}
+function targetDepth(target) {
+	return Math.max(0, ...target.elements.map(elementDepth));
+}
+function elementDepth(element) {
+	let depth = 0;
+	let current = element.parentElement;
+	while (current) {
+		depth++;
+		current = current.parentElement;
+	}
+	return depth;
+}
+function targetArea(target) {
+	return Math.min(Infinity, ...target.elements.map((element) => {
+		const rect = element.getBoundingClientRect();
+		return rect.width * rect.height;
+	}));
+}
+function viewportDistance(element, viewportCenter) {
+	const rect = element.getBoundingClientRect();
+	const visible = rect.bottom >= 0 && rect.top <= window.innerHeight;
+	const distance = Math.abs((rect.top + rect.bottom) / 2 - viewportCenter);
+	return visible ? distance : window.innerHeight + distance;
+}
+
+//#endregion
+export { clearPreviewTargets, decoratePreviewTargets, findPreviewNodeId, nearestPreviewElement, resolvePreviewTarget };
+//# sourceMappingURL=targets.js.map

package/src/runtime/preview/targets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"targets.js","names":[],"sources":["../../../../../src/runtime/preview/targets.ts"],"sourcesContent":["import type { CmsPreviewTargetKind } from './protocol'\nimport {\n  CMS_PREVIEW_DECORATED_ATTRIBUTE,\n  CMS_PREVIEW_INLINE_HOST_ATTRIBUTE,\n  CMS_PREVIEW_NODE_ATTRIBUTE,\n  CMS_PREVIEW_TARGET_ATTRIBUTE,\n  CMS_PREVIEW_WRAPPER_ATTRIBUTE,\n} from './protocol'\n\ninterface PreviewTarget {\n  readonly elements: ReadonlyArray<Element>\n  readonly id: string\n  readonly kind: CmsPreviewTargetKind\n}\n\nexport interface ResolvedPreviewTarget {\n  readonly elements: ReadonlyArray<Element>\n  readonly resolvedNodeId?: string\n}\n\nconst TARGET_PRIORITY = { component: 1, native: 3, slot: 2 } satisfies Record<CmsPreviewTargetKind, number>\n\n/** Picks the deepest authorable target represented by the clicked rendered element. */\nexport function findPreviewNodeId(root: ParentNode, clicked: Element): string | undefined {\n  const candidates = collectPreviewTargets(root).filter((target) =>\n    target.elements.some((element) => element === clicked || element.contains(clicked)),\n  )\n  candidates.sort(\n    (left, right) =>\n      Number(right.kind === 'native') - Number(left.kind === 'native') ||\n      targetDepth(right) - targetDepth(left) ||\n      TARGET_PRIORITY[right.kind] - TARGET_PRIORITY[left.kind] ||\n      targetArea(left) - targetArea(right),\n  )\n  return candidates[0]?.id\n}\n\nexport function resolvePreviewTarget(\n  root: ParentNode,\n  nodeId: string,\n  fallbacks: Readonly<Record<string, string>>,\n): ResolvedPreviewTarget {\n  const visited = new Set<string>()\n  const targets = collectPreviewTargets(root)\n  let targetId: string | undefined = nodeId\n  while (targetId && !visited.has(targetId)) {\n    visited.add(targetId)\n    const elements = [\n      ...new Set(targets.filter((target) => target.id === targetId).flatMap((target) => target.elements)),\n    ]\n    if (elements.length) return { elements, resolvedNodeId: targetId }\n    targetId = fallbacks[targetId]\n  }\n  return { elements: [] }\n}\n\nexport function decoratePreviewTargets(root: ParentNode): void {\n  for (const target of collectPreviewTargets(root)) {\n    for (const element of target.elements) element.setAttribute(CMS_PREVIEW_DECORATED_ATTRIBUTE, '')\n  }\n}\n\nexport function clearPreviewTargets(root: ParentNode): void {\n  for (const element of root.querySelectorAll(\n    `[${CMS_PREVIEW_DECORATED_ATTRIBUTE}], [data-cms-hovered], [data-cms-selected]`,\n  )) {\n    element.removeAttribute(CMS_PREVIEW_DECORATED_ATTRIBUTE)\n    element.removeAttribute('data-cms-hovered')\n    element.removeAttribute('data-cms-selected')\n  }\n}\n\nexport function nearestPreviewElement(elements: ReadonlyArray<Element>): Element | undefined {\n  const viewportCenter = window.innerHeight / 2\n  return [...elements].sort(\n    (left, right) => viewportDistance(left, viewportCenter) - viewportDistance(right, viewportCenter),\n  )[0]\n}\n\nfunction collectPreviewTargets(root: ParentNode): ReadonlyArray<PreviewTarget> {\n  return [...root.querySelectorAll(`[${CMS_PREVIEW_NODE_ATTRIBUTE}]`)].flatMap((marker) => {\n    const id = marker.getAttribute(CMS_PREVIEW_NODE_ATTRIBUTE)\n    const kind = previewTargetKind(marker.getAttribute(CMS_PREVIEW_TARGET_ATTRIBUTE))\n    return id && kind ? [{ elements: resolveMarkerElements(marker, kind), id, kind }] : []\n  })\n}\n\nfunction resolveMarkerElements(marker: Element, kind: CmsPreviewTargetKind): ReadonlyArray<Element> {\n  const isWrapper = marker.hasAttribute(CMS_PREVIEW_WRAPPER_ATTRIBUTE)\n  if (marker.hasAttribute(CMS_PREVIEW_INLINE_HOST_ATTRIBUTE) && isConcreteElement(marker)) return [marker]\n  if (!isWrapper && isConcreteElement(marker)) return [marker]\n  const children = [...marker.children].filter(isConcreteElement)\n  if (isWrapper && children.length) return children\n  if (isWrapper && (kind === 'native' || kind === 'slot')) {\n    const parent = marker.parentElement\n    return parent && isConcreteElement(parent) ? [parent] : []\n  }\n  return children\n}\n\nfunction isConcreteElement(element: Element): boolean {\n  const view = element.ownerDocument.defaultView\n  if (!view || view.getComputedStyle(element).display === 'contents') return false\n  return [...element.getClientRects()].some((rect) => rect.width > 0 && rect.height > 0)\n}\n\nfunction previewTargetKind(value: string | null): CmsPreviewTargetKind | undefined {\n  return value === 'component' || value === 'native' || value === 'slot' ? value : undefined\n}\n\nfunction targetDepth(target: PreviewTarget): number {\n  return Math.max(0, ...target.elements.map(elementDepth))\n}\n\nfunction elementDepth(element: Element): number {\n  let depth = 0\n  let current = element.parentElement\n  while (current) {\n    depth++\n    current = current.parentElement\n  }\n  return depth\n}\n\nfunction targetArea(target: PreviewTarget): number {\n  return Math.min(\n    Infinity,\n    ...target.elements.map((element) => {\n      const rect = element.getBoundingClientRect()\n      return rect.width * rect.height\n    }),\n  )\n}\n\nfunction viewportDistance(element: Element, viewportCenter: number): number {\n  const rect = element.getBoundingClientRect()\n  const visible = rect.bottom >= 0 && rect.top <= window.innerHeight\n  const distance = Math.abs((rect.top + rect.bottom) / 2 - viewportCenter)\n  return visible ? distance : window.innerHeight + distance\n}\n"],"mappings":";;;AAoBA,MAAM,kBAAkB;CAAE,WAAW;CAAG,QAAQ;CAAG,MAAM;AAAE;;AAG3D,SAAgB,kBAAkB,MAAkB,SAAsC;CACxF,MAAM,aAAa,sBAAsB,IAAI,CAAC,CAAC,QAAQ,WACrD,OAAO,SAAS,MAAM,YAAY,YAAY,WAAW,QAAQ,SAAS,OAAO,CAAC,CACpF;CACA,WAAW,MACR,MAAM,UACL,OAAO,MAAM,SAAS,QAAQ,IAAI,OAAO,KAAK,SAAS,QAAQ,KAC/D,YAAY,KAAK,IAAI,YAAY,IAAI,KACrC,gBAAgB,MAAM,QAAQ,gBAAgB,KAAK,SACnD,WAAW,IAAI,IAAI,WAAW,KAAK,CACvC;CACA,OAAO,WAAW,EAAE,EAAE;AACxB;AAEA,SAAgB,qBACd,MACA,QACA,WACuB;CACvB,MAAM,0BAAU,IAAI,IAAY;CAChC,MAAM,UAAU,sBAAsB,IAAI;CAC1C,IAAI,WAA+B;CACnC,OAAO,YAAY,CAAC,QAAQ,IAAI,QAAQ,GAAG;EACzC,QAAQ,IAAI,QAAQ;EACpB,MAAM,WAAW,CACf,GAAG,IAAI,IAAI,QAAQ,QAAQ,WAAW,OAAO,OAAO,QAAQ,CAAC,CAAC,SAAS,WAAW,OAAO,QAAQ,CAAC,CACpG;EACA,IAAI,SAAS,QAAQ,OAAO;GAAE;GAAU,gBAAgB;EAAS;EACjE,WAAW,UAAU;CACvB;CACA,OAAO,EAAE,UAAU,CAAC,EAAE;AACxB;AAEA,SAAgB,uBAAuB,MAAwB;CAC7D,KAAK,MAAM,UAAU,sBAAsB,IAAI,GAC7C,KAAK,MAAM,WAAW,OAAO,UAAU,QAAQ,aAAa,iCAAiC,EAAE;AAEnG;AAEA,SAAgB,oBAAoB,MAAwB;CAC1D,KAAK,MAAM,WAAW,KAAK,iBACzB,IAAI,gCAAgC,2CACtC,GAAG;EACD,QAAQ,gBAAgB,+BAA+B;EACvD,QAAQ,gBAAgB,kBAAkB;EAC1C,QAAQ,gBAAgB,mBAAmB;CAC7C;AACF;AAEA,SAAgB,sBAAsB,UAAuD;CAC3F,MAAM,iBAAiB,OAAO,cAAc;CAC5C,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC,MAClB,MAAM,UAAU,iBAAiB,MAAM,cAAc,IAAI,iBAAiB,OAAO,cAAc,CAClG,CAAC,CAAC;AACJ;AAEA,SAAS,sBAAsB,MAAgD;CAC7E,OAAO,CAAC,GAAG,KAAK,iBAAiB,IAAI,2BAA2B,EAAE,CAAC,CAAC,CAAC,SAAS,WAAW;EACvF,MAAM,KAAK,OAAO,aAAa,0BAA0B;EACzD,MAAM,OAAO,kBAAkB,OAAO,aAAa,4BAA4B,CAAC;EAChF,OAAO,MAAM,OAAO,CAAC;GAAE,UAAU,sBAAsB,QAAQ,IAAI;GAAG;GAAI;EAAK,CAAC,IAAI,CAAC;CACvF,CAAC;AACH;AAEA,SAAS,sBAAsB,QAAiB,MAAoD;CAClG,MAAM,YAAY,OAAO,aAAa,6BAA6B;CACnE,IAAI,OAAO,mCAA8C,KAAK,kBAAkB,MAAM,GAAG,OAAO,CAAC,MAAM;CACvG,IAAI,CAAC,aAAa,kBAAkB,MAAM,GAAG,OAAO,CAAC,MAAM;CAC3D,MAAM,WAAW,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,OAAO,iBAAiB;CAC9D,IAAI,aAAa,SAAS,QAAQ,OAAO;CACzC,IAAI,cAAc,SAAS,YAAY,SAAS,SAAS;EACvD,MAAM,SAAS,OAAO;EACtB,OAAO,UAAU,kBAAkB,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC;CAC3D;CACA,OAAO;AACT;AAEA,SAAS,kBAAkB,SAA2B;CACpD,MAAM,OAAO,QAAQ,cAAc;CACnC,IAAI,CAAC,QAAQ,KAAK,iBAAiB,OAAO,CAAC,CAAC,YAAY,YAAY,OAAO;CAC3E,OAAO,CAAC,GAAG,QAAQ,eAAe,CAAC,CAAC,CAAC,MAAM,SAAS,KAAK,QAAQ,KAAK,KAAK,SAAS,CAAC;AACvF;AAEA,SAAS,kBAAkB,OAAwD;CACjF,OAAO,UAAU,eAAe,UAAU,YAAY,UAAU,SAAS,QAAQ;AACnF;AAEA,SAAS,YAAY,QAA+B;CAClD,OAAO,KAAK,IAAI,GAAG,GAAG,OAAO,SAAS,IAAI,YAAY,CAAC;AACzD;AAEA,SAAS,aAAa,SAA0B;CAC9C,IAAI,QAAQ;CACZ,IAAI,UAAU,QAAQ;CACtB,OAAO,SAAS;EACd;EACA,UAAU,QAAQ;CACpB;CACA,OAAO;AACT;AAEA,SAAS,WAAW,QAA+B;CACjD,OAAO,KAAK,IACV,UACA,GAAG,OAAO,SAAS,KAAK,YAAY;EAClC,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,OAAO,KAAK,QAAQ,KAAK;CAC3B,CAAC,CACH;AACF;AAEA,SAAS,iBAAiB,SAAkB,gBAAgC;CAC1E,MAAM,OAAO,QAAQ,sBAAsB;CAC3C,MAAM,UAAU,KAAK,UAAU,KAAK,KAAK,OAAO,OAAO;CACvD,MAAM,WAAW,KAAK,KAAK,KAAK,MAAM,KAAK,UAAU,IAAI,cAAc;CACvE,OAAO,UAAU,WAAW,OAAO,cAAc;AACnD"}

package/src/runtime/studio-app.js

@@ -0,0 +1,13 @@
+import { defineEventHandler, setResponseHeader } from "h3";
+
+//#region src/runtime/studio-app.ts
+function createStudioAppHandler(shell) {
+	return defineEventHandler((event) => {
+		setResponseHeader(event, "content-type", "text/html; charset=utf-8");
+		return shell;
+	});
+}
+
+//#endregion
+export { createStudioAppHandler };
+//# sourceMappingURL=studio-app.js.map

package/src/runtime/studio-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"studio-app.js","names":[],"sources":["../../../../src/runtime/studio-app.ts"],"sourcesContent":["import { defineEventHandler, setResponseHeader } from 'h3'\n\nexport function createStudioAppHandler(shell: string) {\n  return defineEventHandler((event) => {\n    setResponseHeader(event, 'content-type', 'text/html; charset=utf-8')\n    return shell\n  })\n}\n"],"mappings":";;;AAEA,SAAgB,uBAAuB,OAAe;CACpD,OAAO,oBAAoB,UAAU;EACnC,kBAAkB,OAAO,gBAAgB,0BAA0B;EACnE,OAAO;CACT,CAAC;AACH"}