@poveste/app 0.19.1 → 0.21.0

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

@@ -1,7 +1,9 @@
 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 { onlySections, useComponentDocs } from "../../util/component-docs.js";
+import ComponentDocs_default from "./ComponentDocs.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, toDisplayString, 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";
@@ -49,6 +51,8 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const emit = __emit;
 		const { story } = toRefs(props);
 		const { renderedDoc } = useStoryDoc(story);
+		const { components: allComponents, pending, off } = useComponentDocs(computed(() => story.value?.id));
+		const components = computed(() => allComponents.value && onlySections(allComponents.value, story.value?.autoDocs));
 		const router = useRouter();
 		const fakeHost = `http://a.com`;
 		function onClick(e) {
@@ -104,27 +108,58 @@ var StoryDocs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			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-testid": "story-docs",
-				innerHTML: unref(renderedDoc)
-			}, null, 8, _hoisted_1))], 32);
+			}, [
+				_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),
+				_ctx.__POVESTE_DEV__ && !unref(renderedDoc) && !components.value?.length && unref(pending) ? (openBlock(), createBlock(BaseEmpty_default, {
+					key: 1,
+					"data-testid": "docs-pending"
+				}, {
+					default: withCtx(() => [
+						createVNode(unref(Icon), {
+							icon: "carbon:circle-dash",
+							class: "w-8 h-8 opacity-50 mb-6 animate-spin"
+						}),
+						_cache[0] || (_cache[0] = createTextVNode(" Reading component types… ", -1)),
+						_cache[1] || (_cache[1] = createElementVNode("span", { class: "text-sm opacity-70 mt-2" }, "The first time can take a while.", -1))
+					]),
+					_: 1
+				})) : !unref(pending) && !unref(renderedDoc) && !components.value?.length && unref(off) ? (openBlock(), createBlock(BaseEmpty_default, {
+					key: 2,
+					"data-testid": "docs-off"
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:document-unknown",
+						class: "w-8 h-8 opacity-50 mb-6"
+					}), createTextVNode(" " + toDisplayString(unref(off)), 1)]),
+					_: 1
+				})) : !unref(pending) && !unref(renderedDoc) && !components.value?.length ? (openBlock(), createBlock(BaseEmpty_default, { key: 3 }, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: "carbon:document-unknown",
+						class: "w-8 h-8 opacity-50 mb-6"
+					}), _cache[2] || (_cache[2] = createTextVNode(" No documentation available ", -1))]),
+					_: 1
+				})) : createCommentVNode("", true),
+				unref(renderedDoc) ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					ref_key: "renderedEl",
+					ref: renderedEl,
+					class: "prose dark:prose-invert p-4 max-w-none",
+					"data-testid": "story-docs",
+					innerHTML: unref(renderedDoc)
+				}, null, 8, _hoisted_1)) : createCommentVNode("", true),
+				components.value?.length ? (openBlock(), createBlock(ComponentDocs_default, {
+					key: 5,
+					components: components.value,
+					"story-file": unref(story).file?.filePath
+				}, null, 8, ["components", "story-file"])) : createCommentVNode("", true)
+			], 32);
 		};
 	}
 });

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

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 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-ed711d57"]]);
+var StorySourceCode_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StorySourceCode_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-cecbc93b"]]);
 //#endregion
 export { StorySourceCode_default as default };

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

@@ -1,6 +1,6 @@
 import { isDark } from "../../util/dark.js";
 import BaseEmpty_default from "../base/BaseEmpty.js";
-import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode } from "../../util/docs.js";
+import { getDynamicSourceCode, getStaticSourceCode, loadGenerateSourceCode, sourceLang } from "../../util/docs.js";
 import { getHighlighter } from "../../util/highlighter.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeClass, onMounted, openBlock, ref, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
@@ -27,8 +27,15 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const props = __props;
 		const generateSourceCodeFn = shallowRef(null);
+		const dynamicSettled = ref(false);
+		const staticSettled = ref(false);
 		watchEffect(async () => {
-			const generate = await loadGenerateSourceCode(props.story);
+			let generate;
+			try {
+				generate = await loadGenerateSourceCode(props.story);
+			} finally {
+				if (!generate) dynamicSettled.value = true;
+			}
 			if (generate) generateSourceCodeFn.value = markRaw(generate);
 		});
 		const highlighter = shallowRef();
@@ -39,12 +46,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			if (!generateSourceCodeFn.value) return;
 			error.value = null;
 			dynamicSourceCode.value = "";
+			dynamicSettled.value = false;
 			try {
 				dynamicSourceCode.value = await getDynamicSourceCode(props.variant, generateSourceCodeFn.value) ?? "";
 			} catch (e) {
 				console.error(e);
 				error.value = e instanceof Error ? e.message : String(e);
 			}
+			dynamicSettled.value = true;
 			if (!dynamicSourceCode.value) displayedSource.value = "static";
 		}, {
 			deep: true,
@@ -53,8 +62,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const staticSourceCode = ref("");
 		watch(() => [props.story, props.story?.file?.source], async () => {
 			staticSourceCode.value = "";
-			staticSourceCode.value = await getStaticSourceCode(props.story) ?? "";
+			staticSettled.value = false;
+			try {
+				staticSourceCode.value = await getStaticSourceCode(props.story) ?? "";
+			} finally {
+				staticSettled.value = true;
+			}
 		}, { immediate: true });
+		const loading = computed(() => displayedSource.value === "dynamic" ? !dynamicSettled.value : !staticSettled.value);
 		const displayedSourceCode = computed(() => {
 			if (displayedSource.value === "dynamic") return dynamicSourceCode.value;
 			return staticSourceCode.value;
@@ -67,7 +82,7 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}
 		});
 		const sourceHtml = computed(() => displayedSourceCode.value ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
-			lang: "html",
+			lang: sourceLang(props.story),
 			theme: isDark.value ? "github-dark" : "github-light-high-contrast"
 		}) : "");
 		let lastScroll = 0;
@@ -107,13 +122,14 @@ var StorySourceCode_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				}, 8, ["content"])]),
 				createVNode(unref(HstCopyIcon), {
 					content: displayedSourceCode.value,
+					loading: loading.value,
 					class: "flex-none"
-				}, null, 8, ["content"])
+				}, null, 8, ["content", "loading"])
 			])) : 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))]),
+				}), createElementVNode("span", null, toDisplayString(loading.value ? "Loading" : "Not available"), 1)]),
 				_: 1
 			})) : !sourceHtml.value ? (openBlock(), createElementBlock("textarea", {
 				key: 3,

package/dist/bundled/components/story/GenericMountStory.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
+import { loadClientPlugin } from "../../util/client-plugin.js";
 import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "GenericMountStory",
@@ -8,12 +8,8 @@ var GenericMountStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const supportPluginId = props.story.file?.supportPluginId;
-			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-			if (clientPlugin) {
-				const pluginModule = await clientPlugin();
-				mountComponent.value = markRaw(pluginModule.MountStory);
-			}
+			const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId);
+			if (pluginModule) mountComponent.value = markRaw(pluginModule.MountStory);
 		});
 		return (_ctx, _cache) => {
 			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({

package/dist/bundled/components/story/GenericRenderStory.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
+import { loadClientPlugin } from "../../util/client-plugin.js";
 import { createBlock, createCommentVNode, defineComponent, markRaw, mergeProps, openBlock, ref, resolveDynamicComponent, watchEffect } from "@poveste/vendors/vue";
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "GenericRenderStory",
@@ -8,15 +8,8 @@ var GenericRenderStory_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const props = __props;
 		const mountComponent = ref(null);
 		watchEffect(async () => {
-			const supportPluginId = props.story.file?.supportPluginId;
-			const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
-			if (clientPlugin) try {
-				const pluginModule = await clientPlugin();
-				mountComponent.value = markRaw(pluginModule.RenderStory);
-			} catch (e) {
-				console.error(e);
-				throw e;
-			}
+			const pluginModule = await loadClientPlugin(props.story.file?.supportPluginId);
+			if (pluginModule) mountComponent.value = markRaw(pluginModule.RenderStory);
 		});
 		return (_ctx, _cache) => {
 			return mountComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(mountComponent.value), mergeProps({

package/dist/bundled/components/story/StoryResponsivePreview.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default from "./StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                       */
 //#region src/app/components/story/StoryResponsivePreview.vue
-var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a99edb14"]]);
+var StoryResponsivePreview_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-bbd56e9f"]]);
 //#endregion
 export { StoryResponsivePreview_default as default };

package/dist/bundled/components/story/StoryResponsivePreview.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { usePreviewDark } from "../../util/color-scheme.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import CheckerboardPattern_default from "../misc/CheckerboardPattern.js";
 import HatchedPattern_default from "../misc/HatchedPattern.js";
@@ -23,9 +24,10 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		}
 	},
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v4ce71e65": unref(settings).backgroundColor }));
+		useCssVars((_ctx) => ({ "v59fa22e6": unref(settings).backgroundColor }));
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
+		const previewDark = usePreviewDark(settings);
 		const resizing = ref(false);
 		const onUnmountedCleanupFns = [];
 		onUnmounted(() => {
@@ -127,7 +129,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				ref: previewWrapper,
 				class: "h-full overflow-auto relative"
 			}, [createElementVNode("div", { class: normalizeClass(["rounded-lg relative", [
-				__props.responsive ? "bg-white dark:bg-gray-700" : "",
+				__props.responsive ? unref(previewDark) ? "bg-gray-700" : "bg-white" : "",
 				isResponsiveEnabled.value ? {
 					"w-fit": !!finalWidth.value,
 					"h-fit": !!finalHeight.value,
@@ -145,7 +147,7 @@ var StoryResponsivePreview_vue_vue_type_script_setup_true_lang_default = /*@__PU
 				finalWidth: finalWidth.value,
 				finalHeight: finalHeight.value,
 				resizing: resizing.value
-			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-a99edb14></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+			}, void 0, true)]), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [_cache[1] || (_cache[1] = createStaticVNode("<div class=\"absolute top-5 left-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute top-5 right-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute bottom-5 left-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute bottom-5 right-8 h-2 w-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute left-5 top-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute left-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute right-5 top-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div><div class=\"absolute right-5 bottom-8 w-2 h-px bg-gray-400/25\" data-v-bbd56e9f></div>", 8))], 64)) : createCommentVNode("", true)], 2)], 10, _hoisted_3), isResponsiveEnabled.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
 				createVNode(unref(HstTooltip), {
 					content: sizeTooltip.value,
 					side: "right"

package/dist/bundled/components/story/StoryVariantGridItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default from "./StoryVariantGridItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/app/components/story/StoryVariantGridItem.vue
-var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e0e9a8e1"]]);
+var StoryVariantGridItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-9a717688"]]);
 //#endregion
 export { StoryVariantGridItem_default as default };

package/dist/bundled/components/story/StoryVariantGridItem.vue_vue_type_script_setup_true_lang.js

@@ -35,8 +35,8 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 	emits: { resize: (_width, _height) => true },
 	setup(__props, { emit: __emit }) {
 		useCssVars((_ctx) => ({
-			"v2ce2d009": unref(variant).iconColor,
-			"v4f3f7242": unref(settings).backgroundColor
+			"ff0ecc2c": unref(variant).iconColor,
+			"v59a40d7e": unref(settings).backgroundColor
 		}));
 		const props = __props;
 		const emit = __emit;
@@ -104,7 +104,9 @@ var StoryVariantGridItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				variant: unref(variant),
 				story: __props.story
 			}, null, 8, ["variant", "story"])])]), createElementVNode("div", {
-				class: normalizeClass(["border bg-white dark:bg-gray-700 rounded flex-1 p-4 relative", {
+				class: normalizeClass(["border rounded flex-1 p-4 relative", {
+					"bg-gray-700": unref(previewDark),
+					"bg-white": !unref(previewDark),
 					"border-gray-100 dark:border-gray-800": !unref(isActive),
 					"border-primary-200 dark:border-primary-900": unref(isActive)
 				}]),

package/dist/bundled/components/story/StoryVariantSinglePreviewRemote.vue_vue_type_script_setup_true_lang.js

@@ -59,7 +59,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 			iframe.value?.contentWindow?.postMessage({
 				type: STATE_SYNC,
 				state: changes
-			});
+			}, window.location.origin);
 		}
 		let bridge = createStateBridge(postState);
 		function syncState() {
@@ -79,6 +79,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 		}
 		useEventListener(window, "message", (event) => {
 			if (event.source !== iframe.value?.contentWindow) return;
+			if (event.origin !== window.location.origin) return;
 			switch (event.data?.type) {
 				case STATE_SYNC:
 					if (!fromCurrentOccupant(event.data)) break;
@@ -193,7 +194,7 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 			if (iframe.value?.contentWindow) iframe.value.contentWindow.postMessage({
 				type: PREVIEW_SETTINGS_SYNC,
 				settings: toRaw(settings)
-			});
+			}, window.location.origin);
 		}
 		watch(() => settings, () => {
 			syncSettings();

package/dist/bundled/components/toolbar/DevOnlyToolbarOpenInEditor.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,6 @@ var DevOnlyToolbarOpenInEditor_vue_vue_type_script_setup_true_lang_default = /*@
 			return openBlock(), createBlock(unref(HstTooltip), { content: __props.tooltip }, {
 				default: withCtx(() => [createVNode(TopBarChipItem_default, {
 					"aria-label": "Open story in editor",
-					target: "_blank",
 					class: "poveste-toolbar-open-in-editor",
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(openInEditor)(__props.file))
 				}, {

package/dist/bundled/index.js

@@ -7,11 +7,15 @@ import { iconCollections } from "./util/icons.generated.js";
 import { createApp, watch } from "@poveste/vendors/vue";
 import { addCollection } from "@poveste/vendors/iconify";
 import { createPinia } from "@poveste/vendors/pinia";
-import { generation } from "virtual:$poveste-stories";
+import { generation, icons, onUpdate } from "virtual:$poveste-stories";
 import "virtual:$poveste-theme";
 //#region src/app/index.ts
 async function mountMainApp() {
 	for (const collection of iconCollections) addCollection(collection);
+	for (const collection of icons) addCollection(collection);
+	onUpdate((_files, _tree, icons = []) => {
+		for (const collection of icons) addCollection(collection);
+	});
 	watch(isDark, (dark) => {
 		document.documentElement.style.colorScheme = dark ? "dark" : "light";
 	}, { immediate: true });

package/dist/bundled/sandbox.js

@@ -17,6 +17,7 @@ import { createPinia } from "@poveste/vendors/pinia";
 import { files, onUpdate } from "virtual:$poveste-stories";
 import { parseQuery } from "@poveste/vendors/vue-router";
 import { reportStoryError } from "@poveste/shared";
+import "virtual:$poveste-theme";
 //#region src/app/sandbox.ts
 var query = parseQuery(window.location.search);
 var storyId = ref(typeof query["storyId"] === "string" ? query["storyId"] : null);
@@ -56,6 +57,7 @@ watch(previewDark, (value) => {
 		if (!el) continue;
 		for (const className of previewDarkClasses()) el.classList.toggle(className, value);
 	}
+	document.documentElement.classList.toggle("ptw-dark", value);
 }, { immediate: true });
 var reportedColorScheme = "";
 function reportColorScheme() {

package/dist/bundled/util/client-plugin.js

@@ -0,0 +1,22 @@
+import { occupant } from "./occupant.js";
+import { reportStoryError, toStoryError } from "@poveste/shared";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
+//#region src/app/util/client-plugin.ts
+async function loadClientPlugin(supportPluginId) {
+	const load = supportPluginId ? clientSupportPlugins[supportPluginId] : void 0;
+	if (!load) return;
+	try {
+		return await load();
+	} catch (error) {
+		const { message, stack } = toStoryError(error);
+		const reported = Object.assign(/* @__PURE__ */ new Error(`The story renderer failed to load, and it imports the setup file: ${message}`), { stack });
+		reportStoryError(reported, {
+			storyId: occupant.storyId ?? void 0,
+			variantId: occupant.variantId ?? void 0
+		});
+		console.error(error);
+		return;
+	}
+}
+//#endregion
+export { loadClientPlugin };

package/dist/bundled/util/component-docs-data.js

@@ -0,0 +1,5 @@
+import { componentDocs as componentDocs$1 } from "virtual:$poveste-component-docs";
+//#region src/app/util/component-docs-data.ts
+var componentDocs = componentDocs$1;
+//#endregion
+export { componentDocs };

package/dist/bundled/util/component-docs.js

@@ -0,0 +1,133 @@
+import { onBeforeUnmount, ref, watch } from "@poveste/vendors/vue";
+//#region src/app/util/component-docs.ts
+function toEntries(result) {
+	return Object.entries(result.components).map(([file, { doc, error, name }]) => ({
+		file,
+		name: doc?.name ?? name ?? file.split("/").pop().replace(/(?:\.story)?\.[^.]+$/, ""),
+		...doc ? { doc } : {},
+		...error ? { error } : {}
+	}));
+}
+/**
+* Only the sections a story's `autoDocs` names, in the table's own order. A component
+* left with nothing to show is dropped; one that failed keeps its error (#1398).
+*/
+function onlySections(entries, autoDocs) {
+	if (!Array.isArray(autoDocs)) return entries;
+	return entries.flatMap((entry) => {
+		if (!entry.doc) return [entry];
+		const doc = {
+			...entry.doc,
+			props: autoDocs.includes("props") ? entry.doc.props : [],
+			slots: autoDocs.includes("slots") ? entry.doc.slots : [],
+			events: autoDocs.includes("events") ? entry.doc.events : []
+		};
+		return doc.props.length || doc.slots.length || doc.events.length ? [{
+			...entry,
+			doc
+		}] : [];
+	});
+}
+/**
+* A compound component's root first, `SelectRoot` before `SelectTrigger`, else the order
+* they came in. A story rendering two families, such as a Select inside a Calendar, opens
+* the root its own folder or file is named for: `Calendar/story/CalendarSelect.story.vue`
+* opens `CalendarRoot`, not the `SelectRoot` it imported first.
+*/
+function rootFirst(entries, storyFile) {
+	const roots = entries.filter((entry) => entry.name.endsWith("Root"));
+	const family = (entry) => entry.name.slice(0, -4);
+	const segments = storyFile?.split(/[\\/]/) ?? [];
+	const fileName = segments.at(-1) ?? "";
+	const root = roots.find((entry) => segments.slice(0, -1).includes(family(entry))) ?? roots.find((entry) => fileName.startsWith(family(entry))) ?? roots[0];
+	return root ? [root, ...entries.filter((entry) => entry !== root)] : entries;
+}
+/**
+* The `v-model` a prop and its `update:` event make together, as a template writes it:
+* `v-model` for `modelValue`, `v-model:open` for `open` (#1436). Asked with either name,
+* so the two rows of a pair, one under Props and one under Events, carry the same mark.
+*/
+function modelLabel(doc, name) {
+	const prop = name.startsWith("update:") ? name.slice(7) : name;
+	if (!(doc.props.some((candidate) => candidate.name === prop) && doc.events.some((event) => event.name === `update:${prop}`))) return;
+	return prop === "modelValue" ? "v-model" : `v-model:${prop}`;
+}
+function tagText(tags, name) {
+	const tag = tags.find((tag) => tag.name === name);
+	return tag ? tag.text ?? "" : void 0;
+}
+/** A `@see` or `@link` points somewhere only when it carries a URL. */
+function tagHref(text) {
+	return /https?:\/\/\S+/.exec(text)?.[0];
+}
+/**
+* The components a story imports, documented. In dev they are asked of the server
+* when this is first used, which is what starts extraction at all (#1159); in a
+* built book they come from what `poveste build` extracted.
+*/
+function useComponentDocs(storyId) {
+	const components = ref();
+	const pending = ref(false);
+	const off = ref();
+	const hot = import.meta.hot;
+	if (!hot) {
+		watch(storyId, async (id, _, onCleanup) => {
+			let stale = false;
+			onCleanup(() => stale = true);
+			pending.value = true;
+			try {
+				const { componentDocs } = await import("./component-docs-data.js");
+				const loaders = id ? componentDocs[id] : void 0;
+				const docs = loaders && Object.fromEntries(await Promise.all(Object.entries(loaders).map(async ([file, load]) => [file, (await load()).default])));
+				if (!stale) components.value = id && docs ? toEntries({
+					storyId: id,
+					components: docs
+				}) : void 0;
+			} catch (error) {
+				if (!stale) {
+					components.value = void 0;
+					console.error("[poveste] could not load this story's component docs:", error);
+				}
+			} finally {
+				if (!stale) pending.value = false;
+			}
+		}, { immediate: true });
+		return {
+			components,
+			pending,
+			off
+		};
+	}
+	function ask() {
+		if (storyId.value) {
+			pending.value = true;
+			hot.send("poveste:docgen-request", { storyId: storyId.value });
+		}
+	}
+	function onResult(result) {
+		if (result.storyId === storyId.value) {
+			components.value = toEntries(result);
+			off.value = result.off;
+			pending.value = false;
+		}
+	}
+	hot.on("poveste:docgen-result", onResult);
+	hot.on("poveste:docgen-stale", ask);
+	onBeforeUnmount(() => {
+		hot.off("poveste:docgen-result", onResult);
+		hot.off("poveste:docgen-stale", ask);
+	});
+	watch(storyId, () => {
+		components.value = void 0;
+		off.value = void 0;
+		pending.value = false;
+		ask();
+	}, { immediate: true });
+	return {
+		components,
+		pending,
+		off
+	};
+}
+//#endregion
+export { modelLabel, onlySections, rootFirst, tagHref, tagText, toEntries, useComponentDocs };

package/dist/bundled/util/dark.js

@@ -2,11 +2,13 @@ import { povesteConfig } from "./config.js";
 import { useDark, useToggle } from "@poveste/vendors/vue-use";
 import { watch } from "@poveste/vendors/vue";
 //#region src/app/util/dark.ts
+var inSandbox = location.href.includes("__sandbox");
 var isDark = useDark({
 	valueDark: "ptw-dark",
 	...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
 	storageKey: "poveste-color-scheme",
-	storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
+	storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage,
+	...inSandbox ? { onChanged: () => {} } : {}
 });
 var toggleDark = useToggle(isDark);
 function applyDarkToControls() {

package/dist/bundled/util/docs.js

@@ -1,9 +1,11 @@
-import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 import { unindent } from "@poveste/shared";
+import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
 //#region src/app/util/docs.ts
 /** What the variant declares, or what its framework generates from it; `undefined` when neither has anything. */
 async function getDynamicSourceCode(variant, generate) {
-	if (variant.source) return variant.source;
+	const source = variant.source;
+	if (typeof source === "function") return source(variant.state) || void 0;
+	if (source) return source;
 	const sourceSlot = variant.slots?.().source;
 	if (sourceSlot) {
 		const source = sourceSlot()[0].children;
@@ -11,6 +13,14 @@ async function getDynamicSourceCode(variant, generate) {
 	}
 	return await generate?.(variant) || void 0;
 }
+/**
+* The grammar a story's source reads in: a Vue or Svelte story is HTML with script
+* inside, and a Solid or React story file is TypeScript with JSX, which the HTML
+* grammar left plain (#1521). A variant's own source follows its story's.
+*/
+function sourceLang(story) {
+	return /\.[cm]?[jt]sx$/.test(story?.file?.filePath ?? "") ? "tsx" : "html";
+}
 async function getStaticSourceCode(story) {
 	const sourceLoader = story.file?.source;
 	return sourceLoader ? (await sourceLoader()).default : void 0;
@@ -25,4 +35,4 @@ async function getSourceCode(story, variant) {
 	return await getDynamicSourceCode(variant, generate) || getStaticSourceCode(story);
 }
 //#endregion
-export { getDynamicSourceCode, getSourceCode, getStaticSourceCode, loadGenerateSourceCode };
+export { getDynamicSourceCode, getSourceCode, getStaticSourceCode, loadGenerateSourceCode, sourceLang };

package/dist/bundled/util/highlighter.js

@@ -17,7 +17,7 @@ var highlighterPromise;
 */
 function getHighlighter() {
 	highlighterPromise ??= createHighlighterCore({
-		langs: [import("shiki/langs/html.mjs"), import("shiki/langs/jsx.mjs")],
+		langs: [import("shiki/langs/html.mjs"), import("shiki/langs/tsx.mjs")],
 		themes: [import("shiki/themes/github-light-high-contrast.mjs"), import("shiki/themes/github-dark.mjs")],
 		engine: createOnigurumaEngine(import("shiki/wasm"))
 	}).catch((e) => {