@poveste/app 0.2.0 → 0.3.0

package/dist/bundled/components/panel/StoryControls.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import GenericRenderStory_default from "../story/GenericRenderStory.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import ControlsComponentProps_default from "./ControlsComponentProps.js";
+import ControlsComponentState_default from "./ControlsComponentState.js";
+import StatePresets_default from "./StatePresets.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, ref, renderList, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/panel/StoryControls.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-test-id": "story-controls",
+	class: "poveste-story-controls flex flex-col divide-y divide-gray-100 dark:divide-gray-750"
+};
+var _hoisted_2 = { class: "h-9 flex-none px-2 flex items-center" };
+var _hoisted_3 = { key: 1 };
+var _hoisted_4 = { key: 3 };
+var StoryControls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryControls",
+	props: {
+		variant: {
+			type: Object,
+			required: true
+		},
+		story: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const ready = ref(false);
+		watch(() => props.variant, () => {
+			ready.value = false;
+		});
+		const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls);
+		const hasInitState = computed(() => Object.entries(props.variant.state || {}).some(([key]) => !key.startsWith("_h")));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [ready.value || !hasCustomControls.value ? (openBlock(), createBlock(StatePresets_default, {
+					key: 0,
+					story: __props.story,
+					variant: __props.variant
+				}, null, 8, ["story", "variant"])) : createCommentVNode("", true)]),
+				hasCustomControls.value ? (openBlock(), createBlock(GenericRenderStory_default, {
+					key: `${__props.story.id}-${__props.variant.id}`,
+					"slot-name": "controls",
+					variant: __props.variant,
+					story: __props.story,
+					class: "__poveste-render-custom-controls __histoire-render-custom-controls flex-none",
+					onReady: _cache[0] || (_cache[0] = ($event) => ready.value = true)
+				}, null, 8, ["variant", "story"])) : hasInitState.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(ControlsComponentState_default, {
+					class: "flex-none my-2",
+					variant: __props.variant
+				}, null, 8, ["variant"])])) : !__props.variant.state?._hPropDefs?.length ? (openBlock(), createBlock(BaseEmpty_default, { key: 2 }, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:audio-console",
+						class: "w-8 h-8 opacity-50 mb-6"
+					}), _cache[1] || (_cache[1] = createElementVNode("span", null, "No controls available for this story", -1))]),
+					_: 1
+				})) : createCommentVNode("", true),
+				__props.variant.state?._hPropDefs?.length ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.variant.state._hPropDefs, (def, index) => {
+					return openBlock(), createBlock(ControlsComponentProps_default, {
+						key: index,
+						variant: __props.variant,
+						definition: def,
+						class: "flex-none my-2"
+					}, null, 8, ["variant", "definition"]);
+				}), 128))])) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+//#endregion
+export { StoryControls_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/panel/StoryDocs.js

@@ -0,0 +1,5 @@
+import StoryDocs_vue_vue_type_script_setup_true_lang_default, { useStoryDoc } from "./StoryDocs.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/panel/StoryDocs.vue
+var StoryDocs_default = StoryDocs_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryDocs_default as default, useStoryDoc };

package/dist/bundled/components/panel/StoryDocs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,130 @@
+import { povesteConfig } from "../../util/config.js";
+import DevOnlyToolbarOpenInEditor_default from "../toolbar/DevOnlyToolbarOpenInEditor.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toRefs, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useRoute, useRouter } from "@poveste/vendors/vue-router";
+import { markdownFiles } from "virtual:$poveste-markdown-files";
+//#region src/app/components/panel/StoryDocs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+function useStoryDoc(story) {
+	const renderedDoc = ref("");
+	watchEffect(async () => {
+		const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, ".md");
+		if (markdownFiles[mdKey]) {
+			const md = await markdownFiles[mdKey]();
+			renderedDoc.value = md.html;
+			return;
+		}
+		let comp = story.value.file?.component;
+		if (comp) {
+			if (comp.__asyncResolved) comp = comp.__asyncResolved;
+			else if (comp.__asyncLoader) comp = await comp.__asyncLoader();
+			else if (typeof comp === "function") try {
+				comp = await comp();
+			} catch {}
+			if (comp?.default) comp = comp.default;
+			renderedDoc.value = comp.doc;
+		}
+	});
+	return { renderedDoc };
+}
+var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryDocs",
+	props: {
+		story: {
+			type: Object,
+			required: true
+		},
+		standalone: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["scrollTop"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { story } = toRefs(props);
+		const { renderedDoc } = useStoryDoc(story);
+		const router = useRouter();
+		const fakeHost = `http://a.com`;
+		function onClick(e) {
+			const link = e.target.closest("a");
+			if (link && link.getAttribute("data-route") && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && link.target !== `_blank`) {
+				e.preventDefault();
+				const url = new URL(link.href, fakeHost);
+				const targetHref = url.pathname + url.search + url.hash;
+				router.push(targetHref);
+			}
+		}
+		function getHash() {
+			const hash = location.hash;
+			if (povesteConfig.routerMode === "hash") {
+				const index = hash.indexOf("#", 1);
+				if (index !== -1) return hash.slice(index);
+				else return;
+			}
+			return hash;
+		}
+		async function scrollToAnchor() {
+			await nextTick();
+			const hash = getHash();
+			if (hash) {
+				const anchor = document.querySelector(decodeURIComponent(hash));
+				if (anchor) {
+					anchor.scrollIntoView();
+					return;
+				}
+			}
+			emit("scrollTop");
+		}
+		watch(renderedDoc, () => {
+			scrollToAnchor();
+		}, { immediate: true });
+		const renderedEl = ref();
+		const route = useRoute();
+		async function patchAnchorLinks() {
+			await nextTick();
+			if (povesteConfig.routerMode === "hash" && renderedEl.value) {
+				const links = renderedEl.value.querySelectorAll("a.header-anchor");
+				for (const link of links) {
+					const href = link.getAttribute("href");
+					if (href) link.setAttribute("href", `#${route.path + href}`);
+				}
+			}
+		}
+		watch(renderedDoc, () => {
+			patchAnchorLinks();
+		}, { immediate: true });
+		const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standalone && story.value.file?.filePath));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "poveste-story-docs",
+				onClickCapture: onClick
+			}, [_ctx.__POVESTE_DEV__ && unref(renderedDoc) && filePath.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["flex items-center gap-2 p-2", { "pt-4": !__props.standalone }])
+			}, [filePath.value ? (openBlock(), createBlock(DevOnlyToolbarOpenInEditor_default, {
+				key: 0,
+				file: filePath.value,
+				tooltip: "Edit docs in editor"
+			}, null, 8, ["file"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), !unref(renderedDoc) ? (openBlock(), createBlock(BaseEmpty_default, { key: 1 }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:document-unknown",
+					class: "w-8 h-8 opacity-50 mb-6"
+				}), _cache[0] || (_cache[0] = createTextVNode(" No documentation available ", -1))]),
+				_: 1
+			})) : (openBlock(), createElementBlock("div", {
+				key: 2,
+				ref_key: "renderedEl",
+				ref: renderedEl,
+				class: "prose dark:prose-invert p-4 max-w-none",
+				"data-test-id": "story-docs",
+				innerHTML: unref(renderedDoc)
+			}, null, 8, _hoisted_1))], 32);
+		};
+	}
+});
+//#endregion
+export { StoryDocs_vue_vue_type_script_setup_true_lang_default as default, useStoryDoc };

package/dist/bundled/components/panel/StoryEvent.js

@@ -0,0 +1,5 @@
+import StoryEvent_vue_vue_type_script_setup_true_lang_default from "./StoryEvent.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/panel/StoryEvent.vue
+var StoryEvent_default = StoryEvent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryEvent_default as default };

package/dist/bundled/components/panel/StoryEvent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, resolveComponent, toDisplayString, withCtx } from "@poveste/vendors/vue";
+//#region src/app/components/panel/StoryEvent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "text-xs opacity-50 truncate"
+};
+var _hoisted_2 = { class: "overflow-auto max-w-[400px] max-h-[400px]" };
+var _hoisted_3 = { class: "p-4" };
+var StoryEvent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryEvent",
+	props: { event: {} },
+	setup(__props) {
+		const props = __props;
+		const formattedArgument = computed(() => {
+			switch (typeof props.event.argument) {
+				case "string": return `"${props.event.argument}"`;
+				case "object": return `{ ${Object.keys(props.event.argument).map((key) => `${key}: ${props.event.argument[key]}`).join(", ")} }`;
+				default: return props.event.argument;
+			}
+		});
+		return (_ctx, _cache) => {
+			const _component_VDropdown = resolveComponent("VDropdown");
+			return openBlock(), createBlock(_component_VDropdown, {
+				class: "poveste-story-event group",
+				placement: "right",
+				"data-test-id": "event-item"
+			}, {
+				default: withCtx(({ shown }) => [createElementVNode("div", { class: normalizeClass(["group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal", [shown ? "bg-primary-50 dark:bg-primary-600" : "group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40"]]) }, [createElementVNode("span", { class: normalizeClass({ "text-primary-500": shown }) }, toDisplayString(__props.event.name), 3), __props.event.argument ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(formattedArgument.value), 1)) : createCommentVNode("", true)], 2)]),
+				popper: withCtx(() => [createElementVNode("div", _hoisted_2, [createElementVNode("pre", _hoisted_3, toDisplayString(__props.event.argument), 1)])]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
+export { StoryEvent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/panel/StoryEvents.js

@@ -0,0 +1,5 @@
+import StoryEvents_vue_vue_type_script_setup_true_lang_default from "./StoryEvents.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/panel/StoryEvents.vue
+var StoryEvents_default = StoryEvents_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StoryEvents_default as default };

package/dist/bundled/components/panel/StoryEvents.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,42 @@
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import { useEventsStore } from "../../stores/events.js";
+import StoryEvent_default from "./StoryEvent.js";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, createVNode, defineComponent, nextTick, onMounted, openBlock, ref, renderList, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/panel/StoryEvents.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { key: 1 };
+var StoryEvents_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryEvents",
+	setup(__props) {
+		const eventsStore = useEventsStore();
+		const hasEvents = computed(() => eventsStore.events.length);
+		onMounted(resetUnseen);
+		watch(() => eventsStore.unseen, resetUnseen);
+		async function resetUnseen() {
+			if (eventsStore.unseen > 0) eventsStore.unseen = 0;
+			await nextTick();
+			eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight });
+		}
+		const eventsElement = ref();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "eventsElement",
+				ref: eventsElement,
+				class: "poveste-story-events"
+			}, [!hasEvents.value ? (openBlock(), createBlock(BaseEmpty_default, { key: 0 }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:event-schedule",
+					class: "w-8 h-8 opacity-50 mb-6"
+				}), _cache[0] || (_cache[0] = createTextVNode(" No event fired ", -1))]),
+				_: 1
+			})) : (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(eventsStore).events, (event, key) => {
+				return openBlock(), createBlock(StoryEvent_default, {
+					key,
+					event
+				}, null, 8, ["event"]);
+			}), 128))]))], 512);
+		};
+	}
+});
+//#endregion
+export { StoryEvents_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/panel/StorySidePanel.js

@@ -0,0 +1,5 @@
+import StorySidePanel_vue_vue_type_script_setup_true_lang_default from "./StorySidePanel.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/panel/StorySidePanel.vue
+var StorySidePanel_default = StorySidePanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { StorySidePanel_default as default };

package/dist/bundled/components/panel/StorySidePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,69 @@
+import { useStoryStore } from "../../stores/story.js";
+import BaseSplitPane_default from "../base/BaseSplitPane.js";
+import { useLayoutStore } from "../../stores/layout.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import StoryDocs_default from "./StoryDocs.js";
+import PaneTabs_default from "./PaneTabs.js";
+import StoryControls_default from "./StoryControls.js";
+import StoryEvents_default from "./StoryEvents.js";
+import StorySourceCode_default from "./StorySourceCode.js";
+import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
+import { useRoute } from "@poveste/vendors/vue-router";
+//#region src/app/components/panel/StorySidePanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "h-full w-full p-2" };
+var _hoisted_2 = { class: "h-full w-full rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-700" };
+var _hoisted_3 = { class: "flex flex-col h-full" };
+var StorySidePanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StorySidePanel",
+	setup(__props) {
+		const storyStore = useStoryStore();
+		const layoutStore = useLayoutStore();
+		const innerOrientation = computed(() => layoutStore.settings.storyOptionsPlacement === "bottom" ? "landscape" : "portrait");
+		const route = useRoute();
+		const panelContentComponent = computed(() => {
+			switch (route.query.tab) {
+				case "docs": return StoryDocs_default;
+				case "events": return StoryEvents_default;
+				default: return StoryControls_default;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [!unref(storyStore).currentVariant ? (openBlock(), createBlock(BaseEmpty_default, {
+				key: 0,
+				class: "poveste-story-side-panel poveste-selection"
+			}, {
+				default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("span", null, "Select a variant", -1)])]),
+				_: 1
+			})) : !unref(storyStore).currentVariant.configReady || !unref(storyStore).currentVariant.previewReady ? (openBlock(), createBlock(BaseEmpty_default, {
+				key: 1,
+				class: "poveste-story-side-panel poveste-loading"
+			}, {
+				default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("span", null, "Loading...", -1)])]),
+				_: 1
+			})) : (openBlock(), createBlock(BaseSplitPane_default, {
+				key: 2,
+				"save-id": `story-sidepane-${innerOrientation.value}`,
+				orientation: innerOrientation.value,
+				class: "poveste-story-side-panel poveste-loaded h-full",
+				"data-test-id": "story-side-panel"
+			}, {
+				first: withCtx(() => [createElementVNode("div", _hoisted_3, [createVNode(PaneTabs_default, {
+					story: unref(storyStore).currentStory,
+					variant: unref(storyStore).currentVariant
+				}, null, 8, ["story", "variant"]), (openBlock(), createBlock(resolveDynamicComponent(panelContentComponent.value), {
+					story: unref(storyStore).currentStory,
+					variant: unref(storyStore).currentVariant,
+					class: "h-full overflow-auto"
+				}, null, 8, ["story", "variant"]))])]),
+				last: withCtx(() => [createVNode(StorySourceCode_default, {
+					story: unref(storyStore).currentStory,
+					variant: unref(storyStore).currentVariant,
+					class: "h-full"
+				}, null, 8, ["story", "variant"])]),
+				_: 1
+			}, 8, ["save-id", "orientation"]))])]);
+		};
+	}
+});
+//#endregion
+export { StorySidePanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/panel/StorySourceCode.js

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import StorySourceCode_vue_vue_type_script_setup_true_lang_default from "./StorySourceCode.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                */
+//#region src/app/components/panel/StorySourceCode.vue
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-d93a75df"]]);
+//#endregion
+export { StorySourceCode_default as default };

package/dist/bundled/components/panel/StorySourceCode.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+import { isDark } from "../../util/dark.js";
+import BaseEmpty_default from "../base/BaseEmpty.js";
+import { getHighlighter } from "../../util/highlighter.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, resolveDirective, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
+import { unindent } from "@poveste/shared";
+import { HstCopyIcon } from "@poveste/controls";
+//#region src/app/components/panel/StorySourceCode.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col" };
+var _hoisted_2 = {
+	key: 0,
+	class: "h-10 flex-none border-b border-solid border-gray-500/5 px-4 flex items-center gap-2"
+};
+var _hoisted_3 = { class: "flex flex-none gap-px h-full py-2" };
+var _hoisted_4 = {
+	key: 1,
+	class: "text-red-500 h-full p-2 overflow-auto font-mono text-sm"
+};
+var _hoisted_5 = ["value"];
+var _hoisted_6 = ["innerHTML"];
+var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StorySourceCode",
+	props: {
+		story: {},
+		variant: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const generateSourceCodeFn = ref(null);
+		watchEffect(async () => {
+			const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId];
+			if (clientPlugin) {
+				const pluginModule = await clientPlugin();
+				generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode);
+			}
+		});
+		const highlighter = shallowRef();
+		const dynamicSourceCode = ref("");
+		const error = ref(null);
+		watch(() => [props.variant, generateSourceCodeFn.value], async () => {
+			if (!generateSourceCodeFn.value) return;
+			error.value = null;
+			dynamicSourceCode.value = "";
+			try {
+				if (props.variant.source) dynamicSourceCode.value = props.variant.source;
+				else if (props.variant.slots?.().source) {
+					const source = props.variant.slots?.().source()[0].children;
+					if (source) dynamicSourceCode.value = await unindent(source);
+				} else dynamicSourceCode.value = await generateSourceCodeFn.value(props.variant);
+			} catch (e) {
+				console.error(e);
+				error.value = e.message;
+			}
+			if (!dynamicSourceCode.value) displayedSource.value = "static";
+		}, {
+			deep: true,
+			immediate: true
+		});
+		const staticSourceCode = ref("");
+		watch(() => [props.story, props.story?.file?.source], async () => {
+			staticSourceCode.value = "";
+			const sourceLoader = props.story.file?.source;
+			if (sourceLoader) staticSourceCode.value = (await sourceLoader()).default;
+		}, { immediate: true });
+		const displayedSource = ref("dynamic");
+		const displayedSourceCode = computed(() => {
+			if (displayedSource.value === "dynamic") return dynamicSourceCode.value;
+			return staticSourceCode.value;
+		});
+		onMounted(async () => {
+			try {
+				highlighter.value = await getHighlighter();
+			} catch (e) {
+				console.error(e);
+			}
+		});
+		const sourceHtml = computed(() => displayedSourceCode.value ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
+			lang: "html",
+			theme: isDark.value ? "github-dark" : "github-light"
+		}) : "");
+		let lastScroll = 0;
+		watch(() => props.variant, () => {
+			lastScroll = 0;
+		});
+		const scroller = ref();
+		function onScroll(event) {
+			if (sourceHtml.value) lastScroll = event.target.scrollTop;
+		}
+		watch(sourceHtml, async () => {
+			await nextTick();
+			if (scroller.value) scroller.value.scrollTop = lastScroll;
+		});
+		return (_ctx, _cache) => {
+			const _directive_tooltip = resolveDirective("tooltip");
+			return openBlock(), createElementBlock("div", _hoisted_1, [!error.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+				_cache[2] || (_cache[2] = createElementVNode("div", { class: "text-gray-900 dark:text-gray-100" }, " Source ", -1)),
+				_cache[3] || (_cache[3] = createElementVNode("div", { class: "flex-1" }, null, -1)),
+				createElementVNode("div", _hoisted_3, [withDirectives((openBlock(), createElementBlock("button", {
+					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "dynamic" ? "max-w-6 opacity-70" : "max-w-[82px] text-primary-600 dark:text-primary-400", dynamicSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
+					onClick: _cache[0] || (_cache[0] = ($event) => dynamicSourceCode.value && (displayedSource.value = "dynamic"))
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:flash",
+					class: "w-4 h-4 flex-none"
+				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "dynamic" }]) }, " Dynamic ", 2)], 2)), [[_directive_tooltip, !dynamicSourceCode.value ? "Dynamic source code is not available" : displayedSource.value !== "dynamic" ? "Switch to dynamic source" : null]]), withDirectives((openBlock(), createElementBlock("button", {
+					class: normalizeClass(["flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden", [displayedSource.value !== "static" ? "max-w-6 opacity-70" : "max-w-[63px] text-primary-600 dark:text-primary-400", staticSourceCode.value ? "cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50" : "opacity-50"]]),
+					onClick: _cache[1] || (_cache[1] = ($event) => staticSourceCode.value && (displayedSource.value = "static"))
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:document",
+					class: "w-4 h-4 flex-none"
+				}), createElementVNode("span", { class: normalizeClass(["transition-opacity duration-300", { "opacity-0": displayedSource.value !== "static" }]) }, " Static ", 2)], 2)), [[_directive_tooltip, !staticSourceCode.value ? "Static source code is not available" : displayedSource.value !== "static" ? "Switch to static source" : null]])]),
+				createVNode(unref(HstCopyIcon), {
+					content: displayedSourceCode.value,
+					class: "flex-none"
+				}, null, 8, ["content"])
+			])) : createCommentVNode("", true), error.value ? (openBlock(), createElementBlock("div", _hoisted_4, " Error: " + toDisplayString(error.value), 1)) : !displayedSourceCode.value ? (openBlock(), createBlock(BaseEmpty_default, { key: 2 }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:code-hide",
+					class: "w-8 h-8 opacity-50 mb-6"
+				}), _cache[4] || (_cache[4] = createElementVNode("span", null, "Not available", -1))]),
+				_: 1
+			})) : !sourceHtml.value ? (openBlock(), createElementBlock("textarea", {
+				key: 3,
+				ref_key: "scroller",
+				ref: scroller,
+				class: "__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0",
+				value: displayedSourceCode.value,
+				readonly: "",
+				"data-test-id": "story-source-code",
+				onScroll
+			}, null, 40, _hoisted_5)) : (openBlock(), createElementBlock("div", {
+				key: 4,
+				ref_key: "scroller",
+				ref: scroller,
+				class: "w-full h-full overflow-auto",
+				"data-test-id": "story-source-code",
+				onScroll
+			}, [createElementVNode("div", {
+				class: "__poveste-code __histoire-code p-4 w-fit",
+				innerHTML: sourceHtml.value
+			}, null, 8, _hoisted_6)], 544))]);
+		};
+	}
+});
+//#endregion
+export { StorySourceCode_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/SearchItem.js

@@ -0,0 +1,7 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.js";
+import SearchItem_vue_vue_type_script_setup_true_lang_default from "./SearchItem.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/app/components/search/SearchItem.vue
+var SearchItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(SearchItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2c253023"]]);
+//#endregion
+export { SearchItem_default as default };

package/dist/bundled/components/search/SearchItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { useScrollOnActive } from "../../util/scroll.js";
+import BaseListItemLink_default from "../base/BaseListItemLink.js";
+import BaseListItem_default from "../base/BaseListItem.js";
+import SearchItemContent_default from "./SearchItemContent.js";
+import { createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, ref, toRefs, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+//#region src/app/components/search/SearchItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-selected"];
+var SearchItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SearchItem",
+	props: {
+		result: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: { close: () => true },
+	setup(__props, { emit: __emit }) {
+		useCssVars((_ctx) => ({ "f1e8a8be": __props.result.iconColor }));
+		const props = __props;
+		const emit = __emit;
+		const el = ref();
+		const { selected } = toRefs(props);
+		useScrollOnActive(selected, el);
+		function action() {
+			if ("onActivate" in props.result) props.result.onActivate();
+			emit("close");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				class: "poveste-search-item",
+				"data-test-id": "search-item",
+				"data-selected": unref(selected) ? "" : void 0
+			}, ["route" in __props.result ? (openBlock(), createBlock(BaseListItemLink_default, {
+				key: 0,
+				to: __props.result.route,
+				"is-active": unref(selected),
+				class: "px-6 py-4 gap-4",
+				onNavigate: _cache[0] || (_cache[0] = ($event) => action())
+			}, {
+				default: withCtx(() => [createVNode(SearchItemContent_default, {
+					result: __props.result,
+					selected: unref(selected)
+				}, null, 8, ["result", "selected"])]),
+				_: 1
+			}, 8, ["to", "is-active"])) : createCommentVNode("", true), "onActivate" in __props.result ? (openBlock(), createBlock(BaseListItem_default, {
+				key: 1,
+				"is-active": unref(selected),
+				class: "px-6 py-4 gap-4",
+				onNavigate: _cache[1] || (_cache[1] = ($event) => action())
+			}, {
+				default: withCtx(() => [createVNode(SearchItemContent_default, {
+					result: __props.result,
+					selected: unref(selected)
+				}, null, 8, ["result", "selected"])]),
+				_: 1
+			}, 8, ["is-active"])) : createCommentVNode("", true)], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { SearchItem_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/search/SearchItemContent.js

@@ -0,0 +1,5 @@
+import SearchItemContent_vue_vue_type_script_setup_true_lang_default from "./SearchItemContent.vue_vue_type_script_setup_true_lang.js";
+//#region src/app/components/search/SearchItemContent.vue
+var SearchItemContent_default = SearchItemContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SearchItemContent_default as default };