@poveste/app 0.20.0 → 0.21.0

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/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/component-docs-data.js

@@ -1 +1,5 @@
-export { componentDocs } from "virtual:$poveste-component-docs";
+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

@@ -1,13 +1,57 @@
 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 }]) => ({
+	return Object.entries(result.components).map(([file, { doc, error, name }]) => ({
 		file,
-		name: file.split("/").pop().replace(/\.[^.]+$/, ""),
+		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;
@@ -23,23 +67,49 @@ function tagHref(text) {
 */
 function useComponentDocs(storyId) {
 	const components = ref();
+	const pending = ref(false);
+	const off = ref();
 	const hot = import.meta.hot;
 	if (!hot) {
-		watch(storyId, async (id) => {
-			const { componentDocs } = await import("./component-docs-data.js");
-			const docs = id ? componentDocs[id] : void 0;
-			components.value = id && docs ? toEntries({
-				storyId: id,
-				components: docs
-			}) : void 0;
+		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 };
+		return {
+			components,
+			pending,
+			off
+		};
 	}
 	function ask() {
-		if (storyId.value) hot.send("poveste:docgen-request", { storyId: storyId.value });
+		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);
+		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);
@@ -49,9 +119,15 @@ function useComponentDocs(storyId) {
 	});
 	watch(storyId, () => {
 		components.value = void 0;
+		off.value = void 0;
+		pending.value = false;
 		ask();
 	}, { immediate: true });
-	return { components };
+	return {
+		components,
+		pending,
+		off
+	};
 }
 //#endregion
-export { tagHref, tagText, toEntries, useComponentDocs };
+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

@@ -3,7 +3,9 @@ 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) => {

package/dist/bundled/util/icons.generated.js

@@ -15,6 +15,7 @@ var iconCollections = [
 			"chevron-left": { "body": "<path fill=\"currentColor\" d=\"M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z\"/>" },
 			"chevron-right": { "body": "<path fill=\"currentColor\" d=\"M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z\"/>" },
 			"chevron-sort": { "body": "<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>" },
+			"circle-dash": { "body": "<path fill=\"currentColor\" d=\"M7.7 4.7a14.7 14.7 0 0 0-3 3.1L6.3 9a13.3 13.3 0 0 1 2.6-2.7Zm-3.1 7.6l-1.9-.6A12.5 12.5 0 0 0 2 16h2a11.5 11.5 0 0 1 .6-3.7m-1.9 8.1a14.4 14.4 0 0 0 2 3.9l1.6-1.2a12.9 12.9 0 0 1-1.7-3.3Zm5.1 6.9a14.4 14.4 0 0 0 3.9 2l.6-1.9A12.9 12.9 0 0 1 9 25.7Zm3.9-24.6l.6 1.9A11.5 11.5 0 0 1 16 4V2a12.5 12.5 0 0 0-4.3.7m12.5 24.6a15.2 15.2 0 0 0 3.1-3.1L25.7 23a11.5 11.5 0 0 1-2.7 2.7Zm3.2-7.6l1.9.6A15.5 15.5 0 0 0 30 16h-2a11.5 11.5 0 0 1-.6 3.7m1.8-8.1a14.4 14.4 0 0 0-2-3.9l-1.6 1.2a12.9 12.9 0 0 1 1.7 3.3Zm-5.1-7a14.4 14.4 0 0 0-3.9-2l-.6 1.9a12.9 12.9 0 0 1 3.3 1.7Zm-3.8 24.7l-.6-1.9a11.5 11.5 0 0 1-3.7.6v2a21.4 21.4 0 0 0 4.3-.7\"/>" },
 			"close": { "body": "<path fill=\"currentColor\" d=\"M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z\"/>" },
 			"code": { "body": "<path fill=\"currentColor\" d=\"m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23zm11.42 9.484L17.64 6l1.932.517L14.352 26z\"/>" },
 			"code-hide": { "body": "<path fill=\"currentColor\" d=\"m17.713 13.471l1.863-6.953L17.645 6l-1.565 5.838zm6.494 6.494l1.414 1.414L31 16l-7-7l-1.414 1.414L28.172 16zM30 28.586L3.414 2L2 3.414l5.793 5.793L1 16l7 7l1.414-1.414L3.828 16l5.379-5.379l5.677 5.677l-2.461 9.184l1.932.518l2.162-8.069L28.586 30z\"/>" },

package/dist/bundled/util/keyboard.js

@@ -72,17 +72,18 @@ function onKeyboardShortcut(shortcut, handler, options = {}) {
 		modifiers.alt.pressed = event.altKey;
 		modifiers.shift.pressed = event.shiftKey;
 		modifiers.meta.pressed = event.metaKey;
-		if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) handler(event);
+		if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut, event.key.toLocaleLowerCase())) handler(event);
 	});
 }
-function isMatchingShortcut(shortcut) {
-	for (const combination of shortcut) if (isMatchingCombination(combination.toLowerCase())) return true;
+function isMatchingShortcut(shortcut, eventKey) {
+	for (const combination of shortcut) if (isMatchingCombination(combination.toLowerCase(), eventKey)) return true;
 	return false;
 }
-function isMatchingCombination(combination) {
+function isMatchingCombination(combination, eventKey) {
 	const splitted = combination.split("+").map((key) => key.trim());
 	const targetKey = splitted.pop();
 	if (!targetKey) return false;
+	if (eventKey !== targetKey) return false;
 	for (const [name, mod] of Object.entries(modifiers)) if (splitted.includes(name) !== mod.pressed) return false;
 	return pressedKeys.has(targetKey);
 }