@poveste/app 0.2.0 → 0.3.0

package/dist/bundled/stores/folder.js

@@ -1,54 +1,40 @@
+import { useStoryStore } from "./story.js";
 import { useStorage } from "@poveste/vendors/vue-use";
-import { defineStore } from "@poveste/vendors/pinia";
 import { watch } from "@poveste/vendors/vue";
-import { useStoryStore } from "./story.js";
-"use strict";
-const useFolderStore = defineStore("folder", () => {
-  const openedFolders = useStorage(
-    "_poveste-tree-state",
-    /* @__PURE__ */ new Map()
-  );
-  function getStringPath(path) {
-    return path.join("␜");
-  }
-  function toggleFolder(path, defaultToggleValue = true) {
-    const stringPath = getStringPath(path);
-    const currentValue = openedFolders.value.get(stringPath);
-    if (currentValue == null) {
-      setFolderOpen(stringPath, defaultToggleValue);
-    } else if (currentValue) {
-      setFolderOpen(stringPath, false);
-    } else {
-      setFolderOpen(stringPath, true);
-    }
-  }
-  function setFolderOpen(path, value) {
-    const stringPath = typeof path === "string" ? path : getStringPath(path);
-    openedFolders.value.set(stringPath, value);
-  }
-  function isFolderOpened(path, defaultValue = false) {
-    const value = openedFolders.value.get(getStringPath(path));
-    if (value == null) {
-      return defaultValue;
-    }
-    return value;
-  }
-  function openFileFolders(path) {
-    for (let pathLength = 1; pathLength < path.length; pathLength++) {
-      setFolderOpen(path.slice(0, pathLength), true);
-    }
-  }
-  const storyStore = useStoryStore();
-  watch(() => storyStore.currentStory, (story) => {
-    if (story) {
-      openFileFolders(story.file.path);
-    }
-  });
-  return {
-    isFolderOpened,
-    toggleFolder
-  };
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/folder.ts
+var useFolderStore = defineStore("folder", () => {
+	const openedFolders = useStorage("_poveste-tree-state", /* @__PURE__ */ new Map());
+	function getStringPath(path) {
+		return path.join("␜");
+	}
+	function toggleFolder(path, defaultToggleValue = true) {
+		const stringPath = getStringPath(path);
+		const currentValue = openedFolders.value.get(stringPath);
+		if (currentValue == null) setFolderOpen(stringPath, defaultToggleValue);
+		else if (currentValue) setFolderOpen(stringPath, false);
+		else setFolderOpen(stringPath, true);
+	}
+	function setFolderOpen(path, value) {
+		const stringPath = typeof path === "string" ? path : getStringPath(path);
+		openedFolders.value.set(stringPath, value);
+	}
+	function isFolderOpened(path, defaultValue = false) {
+		const value = openedFolders.value.get(getStringPath(path));
+		if (value == null) return defaultValue;
+		return value;
+	}
+	function openFileFolders(path) {
+		for (let pathLength = 1; pathLength < path.length; pathLength++) setFolderOpen(path.slice(0, pathLength), true);
+	}
+	const storyStore = useStoryStore();
+	watch(() => storyStore.currentStory, (story) => {
+		if (story) openFileFolders(story.file.path);
+	});
+	return {
+		isFolderOpened,
+		toggleFolder
+	};
 });
-export {
-  useFolderStore
-};
+//#endregion
+export { useFolderStore };

package/dist/bundled/stores/layout.js

@@ -1,16 +1,12 @@
 import { useStorage } from "@poveste/vendors/vue-use";
 import { defineStore } from "@poveste/vendors/pinia";
-"use strict";
-const useLayoutStore = defineStore("layout", () => {
-  const settings = useStorage("_poveste-layout-v1", {
-    storyListVisible: true,
-    storyOptionsVisible: true,
-    storyOptionsPlacement: "right"
-  });
-  return {
-    settings
-  };
+//#region src/app/stores/layout.ts
+var useLayoutStore = defineStore("layout", () => {
+	return { settings: useStorage("_poveste-layout-v1", {
+		storyListVisible: true,
+		storyOptionsVisible: true,
+		storyOptionsPlacement: "right"
+	}) };
 });
-export {
-  useLayoutStore
-};
+//#endregion
+export { useLayoutStore };

package/dist/bundled/stores/preview-settings.js

@@ -1,34 +1,31 @@
-import { useStorage } from "@poveste/vendors/vue-use";
-import { defineStore } from "@poveste/vendors/pinia";
-import { defaultPreviewColorScheme } from "../util/color-scheme.js";
 import { povesteConfig } from "../util/config.js";
+import { defaultPreviewColorScheme } from "../util/color-scheme.js";
 import { PREVIEW_SETTINGS_STORAGE_KEY } from "../util/preview-settings.js";
-"use strict";
-const usePreviewSettingsStore = defineStore("preview-settings", () => {
-  const currentSettings = useStorage(PREVIEW_SETTINGS_STORAGE_KEY, {
-    responsiveWidth: 720,
-    responsiveHeight: null,
-    rotate: false,
-    backgroundColor: povesteConfig.defaultBackgroundColor ?? "transparent",
-    backgroundColorPicked: false,
-    checkerboard: false,
-    textDirection: "ltr",
-    colorScheme: defaultPreviewColorScheme
-  });
-  const configBg = povesteConfig.defaultBackgroundColor;
-  if (configBg && !currentSettings.value.backgroundColorPicked) {
-    currentSettings.value.backgroundColor = configBg;
-  }
-  currentSettings.value.colorScheme ??= defaultPreviewColorScheme;
-  function setBackgroundColor(color) {
-    currentSettings.value.backgroundColor = color;
-    currentSettings.value.backgroundColorPicked = true;
-  }
-  return {
-    currentSettings,
-    setBackgroundColor
-  };
+import { useStorage } from "@poveste/vendors/vue-use";
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/preview-settings.ts
+var usePreviewSettingsStore = defineStore("preview-settings", () => {
+	const currentSettings = useStorage(PREVIEW_SETTINGS_STORAGE_KEY, {
+		responsiveWidth: 720,
+		responsiveHeight: null,
+		rotate: false,
+		backgroundColor: povesteConfig.defaultBackgroundColor ?? "transparent",
+		backgroundColorPicked: false,
+		checkerboard: false,
+		textDirection: "ltr",
+		colorScheme: defaultPreviewColorScheme
+	});
+	const configBg = povesteConfig.defaultBackgroundColor;
+	if (configBg && !currentSettings.value.backgroundColorPicked) currentSettings.value.backgroundColor = configBg;
+	currentSettings.value.colorScheme ??= defaultPreviewColorScheme;
+	function setBackgroundColor(color) {
+		currentSettings.value.backgroundColor = color;
+		currentSettings.value.backgroundColorPicked = true;
+	}
+	return {
+		currentSettings,
+		setBackgroundColor
+	};
 });
-export {
-  usePreviewSettingsStore
-};
+//#endregion
+export { usePreviewSettingsStore };

package/dist/bundled/stores/story.js

@@ -1,43 +1,56 @@
-import { defineStore } from "@poveste/vendors/pinia";
-import { ref, computed } from "@poveste/vendors/vue";
 import { router } from "../router.js";
-"use strict";
-const useStoryStore = defineStore("story", () => {
-  const stories = ref([]);
-  function setStories(value) {
-    stories.value = value;
-  }
-  const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
-  const currentVariant = computed(() => currentStory.value?.variants.find((v) => v.id === router.currentRoute.value.query.variantId));
-  const maps = computed(() => {
-    const storyMap = /* @__PURE__ */ new Map();
-    const variantMap = /* @__PURE__ */ new Map();
-    for (const story of stories.value) {
-      storyMap.set(story.id, story);
-      for (const variant of story.variants) {
-        variantMap.set(`${story.id}:${variant.id}`, variant);
-      }
-    }
-    return {
-      stories: storyMap,
-      variants: variantMap
-    };
-  });
-  function getStoryById(id) {
-    return maps.value.stories.get(id);
-  }
-  function getVariantById(idWithStoryId) {
-    return maps.value.variants.get(idWithStoryId);
-  }
-  return {
-    stories,
-    setStories,
-    currentStory,
-    currentVariant,
-    getStoryById,
-    getVariantById
-  };
+import { computed, ref } from "@poveste/vendors/vue";
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/story.ts
+var useStoryStore = defineStore("story", () => {
+	const stories = ref([]);
+	function setStories(value) {
+		stories.value = value;
+	}
+	const currentStory = computed(() => stories.value.find((s) => s.id === router.currentRoute.value.params.storyId));
+	const currentVariant = computed(() => currentStory.value?.variants.find((v) => v.id === router.currentRoute.value.query.variantId));
+	const maps = computed(() => {
+		const storyMap = /* @__PURE__ */ new Map();
+		const variantMap = /* @__PURE__ */ new Map();
+		for (const story of stories.value) {
+			storyMap.set(story.id, story);
+			for (const variant of story.variants) variantMap.set(`${story.id}:${variant.id}`, variant);
+		}
+		return {
+			stories: storyMap,
+			variants: variantMap
+		};
+	});
+	function getStoryById(id) {
+		return maps.value.stories.get(id);
+	}
+	function getVariantById(idWithStoryId) {
+		return maps.value.variants.get(idWithStoryId);
+	}
+	/**
+	* Whether a variant's preview has finished mounting. The preview components
+	* report it and `StorySidePanel` waits on it, so it has to be reachable from
+	* both — and it stays a field on the variant rather than a map in here
+	* because it pairs with `configReady`, which the framework plugins write from
+	* inside the sandbox. The side panel reads the two together; splitting them
+	* across two owners would make that condition harder to follow, not easier.
+	*
+	* What does belong here is the write. This store owns the variant objects,
+	* so a component reaching into one of its own props to flip the flag was the
+	* part that needed to go.
+	*/
+	function setPreviewReady(variant, value) {
+		variant.previewReady = value;
+	}
+	return {
+		stories,
+		setStories,
+		currentStory,
+		currentVariant,
+		getStoryById,
+		getVariantById,
+		setPreviewReady
+	};
 });
-export {
-  useStoryStore
-};
+//#endregion
+export { useStoryStore };

package/dist/bundled/util/color-scheme.js

@@ -1,27 +1,35 @@
-import { usePreferredDark } from "@poveste/vendors/vue-use";
-import { computed } from "@poveste/vendors/vue";
 import { povesteConfig } from "./config.js";
 import { isDark } from "./dark.js";
-"use strict";
-const defaultPreviewColorScheme = povesteConfig.theme.defaultColorScheme ?? "auto";
+import { usePreferredDark } from "@poveste/vendors/vue-use";
+import { computed } from "@poveste/vendors/vue";
+//#region src/app/util/color-scheme.ts
+/**
+* Color scheme the story preview starts on, before the user picks one in the
+* toolbar. Shared with the app chrome so a book configured as dark starts dark
+* on both sides.
+*/
+var defaultPreviewColorScheme = povesteConfig.theme.defaultColorScheme ?? "auto";
+/**
+* The story preview has its own color scheme, independent from the app chrome.
+* `chromeDark` only covers settings that predate the option (and the sandbox
+* boot window), where we keep the old behavior of following the chrome.
+*/
 function resolvePreviewDark(colorScheme, prefersDark, chromeDark) {
-  switch (colorScheme) {
-    case "light":
-      return false;
-    case "dark":
-      return true;
-    case "auto":
-      return prefersDark;
-    default:
-      return chromeDark;
-  }
+	switch (colorScheme) {
+		case "light": return false;
+		case "dark": return true;
+		case "auto": return prefersDark;
+		default: return chromeDark;
+	}
 }
+/**
+* Whether the story preview should be rendered dark, for previews rendered by
+* the app itself. The sandbox resolves the same thing from the settings it
+* receives over `PREVIEW_SETTINGS_SYNC`.
+*/
 function usePreviewDark(settings) {
-  const prefersDark = usePreferredDark();
-  return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value));
+	const prefersDark = usePreferredDark();
+	return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value));
 }
-export {
-  defaultPreviewColorScheme,
-  resolvePreviewDark,
-  usePreviewDark
-};
+//#endregion
+export { defaultPreviewColorScheme, resolvePreviewDark, usePreviewDark };

package/dist/bundled/util/commands.js

@@ -1,57 +1,46 @@
 import { router } from "../router.js";
 import { useStoryStore } from "../stores/story.js";
 import { openInEditor } from "./open-in-editor.js";
-"use strict";
-const builtinCommands = [
-  {
-    id: "builtin:open-in-editor",
-    label: "Open file in editor",
-    icon: "carbon:script-reference",
-    showIf: ({ route }) => route.name === "story" && !!useStoryStore().currentStory,
-    getParams: () => {
-      const story = useStoryStore().currentStory;
-      let file;
-      if (story.docsOnly) {
-        file = story.file?.docsFilePath ?? story.file?.filePath;
-      } else {
-        file = story.file?.filePath;
-      }
-      return {
-        file
-      };
-    },
-    clientAction: ({ file }) => {
-      openInEditor(file);
-    }
-  },
-  {
-    id: "builtin:poveste-docs",
-    label: "Open Poveste Documentation",
-    icon: "carbon:help",
-    clientAction: () => {
-      window.open("https://poveste.dev/guide/getting-started.html", "_blank");
-    }
-  }
-];
+//#region src/app/util/commands.ts
+var builtinCommands = [{
+	id: "builtin:open-in-editor",
+	label: "Open file in editor",
+	icon: "carbon:script-reference",
+	showIf: ({ route }) => route.name === "story" && !!useStoryStore().currentStory,
+	getParams: () => {
+		const story = useStoryStore().currentStory;
+		let file;
+		if (story.docsOnly) file = story.file?.docsFilePath ?? story.file?.filePath;
+		else file = story.file?.filePath;
+		return { file };
+	},
+	clientAction: ({ file }) => {
+		openInEditor(file);
+	}
+}, {
+	id: "builtin:poveste-docs",
+	label: "Open Poveste Documentation",
+	icon: "carbon:help",
+	clientAction: () => {
+		window.open("https://poveste.dev/guide/getting-started.html", "_blank");
+	}
+}];
 function executeCommand(command, params) {
-  if (import.meta.hot) {
-    import.meta.hot.send("poveste:dev-command", {
-      id: command.id,
-      params
-    });
-    command.clientAction?.(params, getCommandContext());
-  }
+	if (import.meta.hot) {
+		import.meta.hot.send("poveste:dev-command", {
+			id: command.id,
+			params
+		});
+		command.clientAction?.(params, getCommandContext());
+	}
 }
 function getCommandContext() {
-  const storyStore = useStoryStore();
-  return {
-    route: router.currentRoute.value,
-    currentStory: storyStore.currentStory,
-    currentVariant: storyStore.currentVariant
-  };
+	const storyStore = useStoryStore();
+	return {
+		route: router.currentRoute.value,
+		currentStory: storyStore.currentStory,
+		currentVariant: storyStore.currentVariant
+	};
 }
-export {
-  builtinCommands,
-  executeCommand,
-  getCommandContext
-};
+//#endregion
+export { builtinCommands, executeCommand, getCommandContext };

package/dist/bundled/util/config.js

@@ -1,8 +1,6 @@
 import { config, logos } from "virtual:$poveste-config";
-"use strict";
-const povesteConfig = config;
-const customLogos = logos;
-export {
-  customLogos,
-  povesteConfig
-};
+//#region src/app/util/config.ts
+var povesteConfig = config;
+var customLogos = logos;
+//#endregion
+export { customLogos, povesteConfig };

package/dist/bundled/util/const.js

@@ -1,12 +1,8 @@
-const STATE_SYNC = "__poveste:state-sync";
-const SANDBOX_READY = "__poveste:sandbox-ready";
-const EVENT_SEND = "__poveste:event";
-const PREVIEW_SETTINGS_SYNC = "__poveste:preview-settings-sync";
-const SANDBOX_HEIGHT = "__poveste:sandbox-height";
-export {
-  EVENT_SEND,
-  PREVIEW_SETTINGS_SYNC,
-  SANDBOX_HEIGHT,
-  SANDBOX_READY,
-  STATE_SYNC
-};
+//#region src/app/util/const.ts
+var STATE_SYNC = "__poveste:state-sync";
+var SANDBOX_READY = "__poveste:sandbox-ready";
+var EVENT_SEND = "__poveste:event";
+var PREVIEW_SETTINGS_SYNC = "__poveste:preview-settings-sync";
+var SANDBOX_HEIGHT = "__poveste:sandbox-height";
+//#endregion
+export { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC };

package/dist/bundled/util/dark.js

@@ -1,28 +1,24 @@
+import { povesteConfig } from "./config.js";
 import { useDark, useToggle } from "@poveste/vendors/vue-use";
 import { watch } from "@poveste/vendors/vue";
-import { povesteConfig } from "./config.js";
-"use strict";
-const isDark = useDark({
-  valueDark: "ptw-dark",
-  initialValue: povesteConfig.theme.defaultColorScheme,
-  storageKey: "poveste-color-scheme",
-  storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
+//#region src/app/util/dark.ts
+var isDark = useDark({
+	valueDark: "ptw-dark",
+	initialValue: povesteConfig.theme.defaultColorScheme,
+	storageKey: "poveste-color-scheme",
+	storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
 });
-const toggleDark = useToggle(isDark);
+var toggleDark = useToggle(isDark);
 function applyDarkToControls() {
-  window.__pvt_controls_dark?.forEach((ref) => {
-    ref.value = isDark.value;
-  });
+	window.__pvt_controls_dark?.forEach((ref) => {
+		ref.value = isDark.value;
+	});
 }
 watch(isDark, () => {
-  applyDarkToControls();
-}, {
-  immediate: true
-});
+	applyDarkToControls();
+}, { immediate: true });
 window.__pvt_controls_dark_ready = () => {
-  applyDarkToControls();
-};
-export {
-  isDark,
-  toggleDark
+	applyDarkToControls();
 };
+//#endregion
+export { isDark, toggleDark };

package/dist/bundled/util/docs.js

@@ -1,26 +1,17 @@
-import { unindent } from "@poveste/shared";
 import { clientSupportPlugins } from "virtual:$poveste-support-plugins-client";
-"use strict";
+import { unindent } from "@poveste/shared";
+//#region src/app/util/docs.ts
 async function getSourceCode(story, variant) {
-  if (variant.source) {
-    return variant.source;
-  } else if (variant.slots?.().source) {
-    const source = variant.slots?.().source()[0].children;
-    if (source) {
-      return unindent(source);
-    }
-  } else {
-    const clientPlugin = clientSupportPlugins[story.file?.supportPluginId];
-    if (clientPlugin) {
-      const pluginModule = await clientPlugin();
-      return pluginModule.generateSourceCode(variant);
-    }
-  }
-  const sourceLoader = story.file?.source;
-  if (sourceLoader) {
-    return (await sourceLoader()).default;
-  }
+	if (variant.source) return variant.source;
+	else if (variant.slots?.().source) {
+		const source = variant.slots?.().source()[0].children;
+		if (source) return unindent(source);
+	} else {
+		const clientPlugin = clientSupportPlugins[story.file?.supportPluginId];
+		if (clientPlugin) return (await clientPlugin()).generateSourceCode(variant);
+	}
+	const sourceLoader = story.file?.source;
+	if (sourceLoader) return (await sourceLoader()).default;
 }
-export {
-  getSourceCode
-};
+//#endregion
+export { getSourceCode };

package/dist/bundled/util/env.js

@@ -1,4 +1,4 @@
-const isMac = navigator.platform.toLowerCase().includes("mac");
-export {
-  isMac
-};
+//#region src/app/util/env.ts
+var isMac = navigator.platform.toLowerCase().includes("mac");
+//#endregion
+export { isMac };

package/dist/bundled/util/events.js

@@ -1,33 +1,27 @@
 import { EVENT_SEND } from "./const.js";
-"use strict";
+//#region src/app/util/events.ts
 async function logEvent(name, argument) {
-  console.log("[poveste] Event fired", { name, argument });
-  const event = {
-    name,
-    argument: JSON.parse(stringifyEvent(argument))
-    // Needed for HTMLEvent that can't be cloned
-  };
-  if (location.href.includes("__sandbox")) {
-    window.parent?.postMessage({
-      type: EVENT_SEND,
-      event
-    });
-  } else {
-    const { useEventsStore } = await import("../stores/events.js");
-    useEventsStore().addEvent(event);
-  }
+	const event = {
+		name,
+		argument: JSON.parse(stringifyEvent(argument))
+	};
+	if (location.href.includes("__sandbox")) window.parent?.postMessage({
+		type: EVENT_SEND,
+		event
+	});
+	else {
+		const { useEventsStore } = await import("../stores/events.js");
+		useEventsStore().addEvent(event);
+	}
 }
 function stringifyEvent(e) {
-  const obj = {};
-  for (const k in e) {
-    obj[k] = e[k];
-  }
-  return JSON.stringify(obj, (k, v) => {
-    if (v instanceof Node) return "Node";
-    if (v instanceof Window) return "Window";
-    return v;
-  }, " ");
+	const obj = {};
+	for (const k in e) obj[k] = e[k];
+	return JSON.stringify(obj, (k, v) => {
+		if (v instanceof Node) return "Node";
+		if (v instanceof Window) return "Window";
+		return v;
+	}, " ");
 }
-export {
-  logEvent
-};
+//#endregion
+export { logEvent };

package/dist/bundled/util/highlighter.js

@@ -0,0 +1,23 @@
+import { createHighlighter } from "shiki";
+//#region src/app/util/highlighter.ts
+/**
+* Shiki is meant to be used as a singleton: each instance carries its own WASM
+* engine and grammar set. The source pane unmounts and remounts on every story
+* navigation, so creating one per mount grows memory for the lifetime of the
+* tab — and trips Shiki's own warning once ten are live.
+*
+* The langs and themes are fixed, so one shared instance is always correct.
+*/
+var highlighterPromise;
+function getHighlighter() {
+	highlighterPromise ??= createHighlighter({
+		langs: ["html", "jsx"],
+		themes: ["github-light", "github-dark"]
+	}).catch((e) => {
+		highlighterPromise = void 0;
+		throw e;
+	});
+	return highlighterPromise;
+}
+//#endregion
+export { getHighlighter };