@poveste/app 0.2.1 → 0.3.0

package/dist/bundled/components/tree/StoryListFolder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { useFolderStore } from "../../stores/folder.js";
+import StoryListItem_default from "./StoryListItem.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, resolveComponent, toDisplayString, unref, useCssVars, withKeys } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+//#region src/app/components/tree/StoryListFolder.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-test-id": "story-list-folder",
+	class: "poveste-story-list-folder"
+};
+var _hoisted_2 = { class: "bind-tree-padding flex items-center gap-2 min-w-0" };
+var _hoisted_3 = { class: "flex flex-none items-center opacity-30 [.poveste-story-list-folder-button:hover_&]:opacity-100 ml-4 w-4 h-4 rounded-sm border border-gray-500/40" };
+var _hoisted_4 = { class: "truncate" };
+var _hoisted_5 = { key: 0 };
+var StoryListFolder_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryListFolder",
+	props: {
+		path: { default: () => [] },
+		folder: {},
+		stories: {},
+		depth: { default: 0 }
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({ "v52a68e33": folderPadding.value }));
+		const props = __props;
+		const folderStore = useFolderStore();
+		const folderPath = computed(() => [...props.path, props.folder.title]);
+		const isFolderOpen = computed(() => folderStore.isFolderOpened(folderPath.value));
+		function toggleOpen() {
+			folderStore.toggleFolder(folderPath.value);
+		}
+		const folderPadding = computed(() => {
+			return `${props.depth * 12}px`;
+		});
+		return (_ctx, _cache) => {
+			const _component_StoryListFolder = resolveComponent("StoryListFolder", true);
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+				role: "button",
+				tabindex: "0",
+				class: "poveste-story-list-folder-button px-0.5 py-2 md:py-1.5 mx-1 rounded-sm hover:bg-primary-100 dark:hover:bg-primary-900 cursor-pointer select-none flex",
+				onClick: toggleOpen,
+				onKeyup: [withKeys(toggleOpen, ["enter"]), withKeys(toggleOpen, ["space"])]
+			}, [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createVNode(unref(Icon), {
+				icon: "carbon:caret-right",
+				class: normalizeClass(["w-full h-full transition-transform duration-150", { "rotate-90": isFolderOpen.value }])
+			}, null, 8, ["class"])]), createElementVNode("span", _hoisted_4, toDisplayString(__props.folder.title), 1)])], 32), isFolderOpen.value ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.folder.children, (element) => {
+				return openBlock(), createElementBlock(Fragment, { key: element.title }, [element.children ? (openBlock(), createBlock(_component_StoryListFolder, {
+					key: 0,
+					path: folderPath.value,
+					folder: element,
+					stories: __props.stories,
+					depth: __props.depth + 1
+				}, null, 8, [
+					"path",
+					"folder",
+					"stories",
+					"depth"
+				])) : (openBlock(), createBlock(StoryListItem_default, {
+					key: 1,
+					story: __props.stories[element.index],
+					depth: __props.depth + 1
+				}, null, 8, ["story", "depth"]))], 64);
+			}), 128))])) : createCommentVNode("", true)]);
+		};
+	}
+});
+//#endregion
+export { StoryListFolder_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/components/tree/StoryListItem.js

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

package/dist/bundled/components/tree/StoryListItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { useScrollOnActive } from "../../util/scroll.js";
+import BaseListItemLink_default from "../base/BaseListItemLink.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { useRoute } from "@poveste/vendors/vue-router";
+//#region src/app/components/tree/StoryListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "bind-tree-margin flex items-center gap-2 pl-4 min-w-0" };
+var _hoisted_2 = { class: "truncate" };
+var _hoisted_3 = {
+	key: 0,
+	class: "opacity-40 text-sm"
+};
+var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "StoryListItem",
+	props: {
+		story: {},
+		depth: { default: 0 }
+	},
+	setup(__props) {
+		useCssVars((_ctx) => ({
+			"v8be95bec": filePadding.value,
+			"c827ed74": _ctx.story.iconColor
+		}));
+		const props = __props;
+		const filePadding = computed(() => {
+			return `${props.depth * 12}px`;
+		});
+		const route = useRoute();
+		const isActive = computed(() => route.params.storyId === props.story.id);
+		const el = ref();
+		useScrollOnActive(isActive, el);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "el",
+				ref: el,
+				"data-test-id": "story-list-item",
+				class: "poveste-story-list-item"
+			}, [createVNode(BaseListItemLink_default, {
+				to: {
+					name: "story",
+					params: { storyId: __props.story.id }
+				},
+				class: "pl-0.5 pr-2 py-2 md:py-1.5 mx-1 rounded-sm"
+			}, {
+				default: withCtx(({ active }) => [createElementVNode("span", _hoisted_1, [createVNode(unref(Icon), {
+					icon: __props.story.icon ?? "carbon:cube",
+					class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
+						"text-primary-500": !active && !__props.story.iconColor,
+						"bind-icon-color": !active && __props.story.iconColor
+					}])
+				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(__props.story.title), 1)]), !__props.story.docsOnly ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.story.variants.length), 1)) : createCommentVNode("", true)]),
+				_: 1
+			}, 8, ["to"])], 512);
+		};
+	}
+});
+//#endregion
+export { StoryListItem_vue_vue_type_script_setup_true_lang_default as default };

package/dist/bundled/index.js

@@ -1,38 +1,29 @@
+import { router } from "./router.js";
+import App_default from "./App.js";
+import "./plugin.js";
+import { createApp } from "@poveste/vendors/vue";
 import FloatingVue from "@poveste/vendors/floating-vue";
 import { createPinia } from "@poveste/vendors/pinia";
-import { createApp } from "@poveste/vendors/vue";
-import "./App.vue.js";
-import { setupPluginApi } from "./plugin.js";
-import { router } from "./router.js";
 import "virtual:$poveste-theme";
-import _sfc_main from "./App.vue2.js";
-"use strict";
+//#region src/app/index.ts
 async function mountMainApp() {
-  const app = createApp(_sfc_main);
-  app.use(createPinia());
-  app.use(FloatingVue, {
-    // Anchor poppers inside the chrome scope so the @scope-wrapped chrome CSS
-    // reaches them. The default <body> teleport target is outside the scope.
-    container: ".poveste-app-root",
-    overflowPadding: 4,
-    arrowPadding: 8,
-    themes: {
-      tooltip: {
-        distance: 8
-      },
-      dropdown: {
-        computeTransformOrigin: true,
-        distance: 8
-      }
-    }
-  });
-  app.use(router);
-  app.mount("#app");
-  if (import.meta.hot) {
-    import.meta.hot.send("poveste:mount", {});
-    /* @__PURE__ */ setupPluginApi();
-  }
+	const app = createApp(App_default);
+	app.use(createPinia());
+	app.use(FloatingVue, {
+		container: ".poveste-app-root",
+		overflowPadding: 4,
+		arrowPadding: 8,
+		themes: {
+			tooltip: { distance: 8 },
+			dropdown: {
+				computeTransformOrigin: true,
+				distance: 8
+			}
+		}
+	});
+	app.use(router);
+	app.mount("#app");
+	if (import.meta.hot) import.meta.hot.send("poveste:mount", {});
 }
-export {
-  mountMainApp
-};
+//#endregion
+export { mountMainApp };

package/dist/bundled/plugin.js

@@ -1,49 +1,46 @@
 import { router } from "./router.js";
-"use strict";
+//#region src/app/plugin.ts
 function setupPluginApi() {
-  if (!import.meta.hot) return;
-  const listeners = {};
-  import.meta.hot.on("poveste:dev-event-result", ({ event, result }) => {
-    const set = listeners[event];
-    if (set) {
-      for (const listener of set) {
-        listener(result);
-      }
-    }
-  });
-  function addDevEventListener(event, listener) {
-    let set = listeners[event];
-    if (!set) {
-      set = /* @__PURE__ */ new Set();
-      listeners[event] = set;
-    }
-    set.add(listener);
-    return () => {
-      set.delete(listener);
-    };
-  }
-  window.__HST_PLUGIN_API__ = {
-    sendEvent: (event, payload) => {
-      return new Promise((resolve) => {
-        import.meta.hot.send(`poveste:dev-event`, {
-          event,
-          payload
-        });
-        if (event.startsWith("on")) {
-          resolve(void 0);
-        } else {
-          const off = addDevEventListener(event, (result) => {
-            off();
-            resolve(result);
-          });
-        }
-      });
-    },
-    openStory: (storyId) => {
-      router.push({ name: "story", params: { storyId } });
-    }
-  };
+	if (!import.meta.hot) return;
+	const listeners = {};
+	import.meta.hot.on("poveste:dev-event-result", ({ event, result }) => {
+		const set = listeners[event];
+		if (set) for (const listener of set) listener(result);
+	});
+	function addDevEventListener(event, listener) {
+		let set = listeners[event];
+		if (!set) {
+			set = /* @__PURE__ */ new Set();
+			listeners[event] = set;
+		}
+		set.add(listener);
+		return () => {
+			set.delete(listener);
+		};
+	}
+	window.__HST_PLUGIN_API__ = {
+		sendEvent: (event, payload) => {
+			return new Promise((resolve) => {
+				import.meta.hot.send(`poveste:dev-event`, {
+					event,
+					payload
+				});
+				if (event.startsWith("on")) resolve(void 0);
+				else {
+					const off = addDevEventListener(event, (result) => {
+						off();
+						resolve(result);
+					});
+				}
+			});
+		},
+		openStory: (storyId) => {
+			router.push({
+				name: "story",
+				params: { storyId }
+			});
+		}
+	};
 }
-export {
-  setupPluginApi
-};
+//#endregion
+export { setupPluginApi };

package/dist/bundled/router.js

@@ -1,32 +1,24 @@
-import { createWebHistory, createWebHashHistory, createRouter } from "@poveste/vendors/vue-router";
 import { povesteConfig } from "./util/config.js";
-"use strict";
-const base = import.meta.env.BASE_URL;
+import { createRouter, createWebHashHistory, createWebHistory } from "@poveste/vendors/vue-router";
+//#region src/app/router.ts
+var base = import.meta.env.BASE_URL;
 function createRouterHistory() {
-  switch (povesteConfig.routerMode) {
-    case "hash":
-      return createWebHashHistory(base);
-    case "history":
-    default:
-      return createWebHistory(base);
-  }
+	switch (povesteConfig.routerMode) {
+		case "hash": return createWebHashHistory(base);
+		default: return createWebHistory(base);
+	}
 }
-const router = createRouter({
-  history: createRouterHistory(),
-  routes: [
-    {
-      path: "/",
-      name: "home",
-      component: () => import("./components/HomeView.vue.js")
-    },
-    {
-      path: "/story/:storyId",
-      name: "story",
-      component: () => import("./components/story/StoryView.vue.js")
-    }
-  ]
+var router = createRouter({
+	history: createRouterHistory(),
+	routes: [{
+		path: "/",
+		name: "home",
+		component: () => import("./components/HomeView.js")
+	}, {
+		path: "/story/:storyId",
+		name: "story",
+		component: () => import("./components/story/StoryView.js")
+	}]
 });
-export {
-  base,
-  router
-};
+//#endregion
+export { base, router };

package/dist/bundled/sandbox.js

@@ -1,113 +1,99 @@
-import { applyState } from "@poveste/shared";
-import { usePreferredDark } from "@poveste/vendors/vue-use";
-import { createPinia } from "@poveste/vendors/pinia";
-import { files } from "virtual:$poveste-stories";
-import { ref, computed, watch, createApp, h, onMounted } from "@poveste/vendors/vue";
-import { parseQuery } from "@poveste/vendors/vue-router";
-import "./components/story/GenericMountStory.vue.js";
-import "./components/story/GenericRenderStory.vue.js";
-import { setupPluginApi } from "./plugin.js";
-import { resolvePreviewDark } from "./util/color-scheme.js";
 import { povesteConfig } from "./util/config.js";
-import { SANDBOX_READY, STATE_SYNC, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT } from "./util/const.js";
 import { isDark } from "./util/dark.js";
+import { SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from "./util/const.js";
+import { resolvePreviewDark } from "./util/color-scheme.js";
+import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from "./util/preview-settings.js";
+import GenericMountStory_default from "./components/story/GenericMountStory.js";
 import { mapFile } from "./util/mapping.js";
-import { loadStoredPreviewSettings, applyPreviewSettings, receivedSettings } from "./util/preview-settings.js";
+import "./plugin.js";
+import GenericRenderStory_default from "./components/story/GenericRenderStory.js";
 import { toRawDeep } from "./util/state.js";
-import _sfc_main from "./components/story/GenericMountStory.vue2.js";
-import _sfc_main$1 from "./components/story/GenericRenderStory.vue2.js";
-"use strict";
-const query = parseQuery(window.location.search);
-const file = ref(mapFile(files.find((f) => f.id === query.storyId)));
-const storedSettings = loadStoredPreviewSettings();
-if (storedSettings) {
-  applyPreviewSettings(storedSettings);
-}
-const prefersDark = usePreferredDark();
-const previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));
+import { usePreferredDark } from "@poveste/vendors/vue-use";
+import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/vue";
+import { createPinia } from "@poveste/vendors/pinia";
+import { files } from "virtual:$poveste-stories";
+import { parseQuery } from "@poveste/vendors/vue-router";
+import { applyState } from "@poveste/shared";
+//#region src/app/sandbox.ts
+var query = parseQuery(window.location.search);
+var file = ref(mapFile(files.find((f) => f.id === query.storyId)));
+var storedSettings = loadStoredPreviewSettings();
+if (storedSettings) applyPreviewSettings(storedSettings);
+var prefersDark = usePreferredDark();
+var previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));
+var darkClassTargets = [document.documentElement, document.querySelector("#app")];
 watch(previewDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(povesteConfig.sandboxDarkClass);
-    document.documentElement.classList.add(povesteConfig.theme.darkClass);
-  } else {
-    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass);
-    document.documentElement.classList.remove(povesteConfig.theme.darkClass);
-  }
-}, {
-  immediate: true
-});
-const app = createApp({
-  name: "SandboxApp",
-  setup() {
-    const story = computed(() => file.value.story);
-    const variant = computed(() => story.value?.variants.find((v) => v.id === query.variantId));
-    let synced = false;
-    let mounted = false;
-    window.addEventListener("message", (event) => {
-      if (event.data?.type === STATE_SYNC) {
-        if (!mounted) return;
-        synced = true;
-        applyState(variant.value.state, event.data.state);
-      } else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
-        applyPreviewSettings(event.data.settings);
-      }
-    });
-    watch(() => variant.value.state, (value) => {
-      if (synced && mounted) {
-        synced = false;
-        return;
-      }
-      window.parent?.postMessage({
-        type: STATE_SYNC,
-        state: toRawDeep(value, true)
-      });
-    }, {
-      deep: true
-    });
-    onMounted(() => {
-      mounted = true;
-    });
-    return {
-      story,
-      variant
-    };
-  },
-  render() {
-    return [
-      h("div", { class: "ptw-sandbox-hidden" }, [
-        h(_sfc_main, {
-          key: file.value.story.id,
-          story: file.value.story
-        })
-      ]),
-      this.story && this.variant ? h(_sfc_main$1, { story: this.story, variant: this.variant, onReady: () => {
-        window.parent?.postMessage({
-          type: SANDBOX_READY
-        });
-      } }) : null
-    ];
-  }
+	for (const el of darkClassTargets) {
+		if (!el) continue;
+		el.classList.toggle(povesteConfig.sandboxDarkClass, value);
+		el.classList.toggle(povesteConfig.theme.darkClass, value);
+	}
+}, { immediate: true });
+var app = createApp({
+	name: "SandboxApp",
+	setup() {
+		const story = computed(() => file.value.story);
+		const variant = computed(() => story.value?.variants.find((v) => v.id === query.variantId));
+		let synced = false;
+		let mounted = false;
+		window.addEventListener("message", (event) => {
+			if (event.data?.type === "__poveste:state-sync") {
+				if (!mounted) return;
+				synced = applyState(variant.value.state, event.data.state);
+			} else if (event.data?.type === "__poveste:preview-settings-sync") applyPreviewSettings(event.data.settings);
+		});
+		watch(() => variant.value.state, (value) => {
+			if (synced && mounted) {
+				synced = false;
+				return;
+			}
+			window.parent?.postMessage({
+				type: STATE_SYNC,
+				state: toRawDeep(value, true)
+			});
+		}, { deep: true });
+		onMounted(() => {
+			mounted = true;
+		});
+		return {
+			story,
+			variant
+		};
+	},
+	render() {
+		return [h("div", { class: "__poveste-sandbox-hidden" }, [h(GenericMountStory_default, {
+			key: file.value.story.id,
+			story: file.value.story
+		})]), this.story && this.variant ? h(GenericRenderStory_default, {
+			story: this.story,
+			variant: this.variant,
+			onReady: () => {
+				window.parent?.postMessage({ type: SANDBOX_READY });
+			}
+		}) : null];
+	}
 });
 app.use(createPinia());
 app.mount("#app");
 document.body.classList.add("__poveste-render-story", "__poveste-render-custom-controls");
-let pendingFrame = null;
-let lastReportedHeight = -1;
+var pendingFrame = null;
+var lastReportedHeight = -1;
 function reportHeight() {
-  pendingFrame = null;
-  const renderRoot = document.querySelector(".__poveste-render-story");
-  const h2 = renderRoot ? Math.ceil(renderRoot.getBoundingClientRect().height) : Math.ceil(document.body.scrollHeight);
-  if (h2 === lastReportedHeight) return;
-  lastReportedHeight = h2;
-  window.parent?.postMessage({ type: SANDBOX_HEIGHT, h: h2 }, window.location.origin);
+	pendingFrame = null;
+	const renderRoot = document.querySelector(".__poveste-render-story");
+	const h = renderRoot ? Math.ceil(renderRoot.getBoundingClientRect().height) : Math.ceil(document.body.scrollHeight);
+	if (h === lastReportedHeight) return;
+	lastReportedHeight = h;
+	window.parent?.postMessage({
+		type: SANDBOX_HEIGHT,
+		h
+	}, window.location.origin);
 }
 function scheduleReport() {
-  if (pendingFrame !== null) return;
-  pendingFrame = requestAnimationFrame(reportHeight);
+	if (pendingFrame !== null) return;
+	pendingFrame = requestAnimationFrame(reportHeight);
 }
-const ro = new ResizeObserver(scheduleReport);
-ro.observe(document.body);
+new ResizeObserver(scheduleReport).observe(document.body);
 requestAnimationFrame(scheduleReport);
-if (import.meta.hot) {
-  /* @__PURE__ */ setupPluginApi();
-}
+if (import.meta.hot) {}
+//#endregion

package/dist/bundled/stores/command.js

@@ -1,25 +1,23 @@
-import { defineStore } from "@poveste/vendors/pinia";
+import { executeCommand, getCommandContext } from "../util/commands.js";
 import { ref } from "@poveste/vendors/vue";
-import { getCommandContext, executeCommand } from "../util/commands.js";
-"use strict";
-const useCommandStore = defineStore("command", () => {
-  const selectedCommand = ref(null);
-  const showPromptsModal = ref(false);
-  function activateCommand(command) {
-    selectedCommand.value = command;
-    if (command.prompts?.length) {
-      showPromptsModal.value = true;
-    } else {
-      const params = command.getParams?.(getCommandContext()) ?? {};
-      executeCommand(command, params);
-    }
-  }
-  return {
-    selectedCommand,
-    showPromptsModal,
-    activateCommand
-  };
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/command.ts
+var useCommandStore = defineStore("command", () => {
+	const selectedCommand = ref(null);
+	const showPromptsModal = ref(false);
+	function activateCommand(command) {
+		selectedCommand.value = command;
+		if (command.prompts?.length) showPromptsModal.value = true;
+		else {
+			const params = command.getParams?.(getCommandContext()) ?? {};
+			executeCommand(command, params);
+		}
+	}
+	return {
+		selectedCommand,
+		showPromptsModal,
+		activateCommand
+	};
 });
-export {
-  useCommandStore
-};
+//#endregion
+export { useCommandStore };

package/dist/bundled/stores/events.js

@@ -1,29 +1,28 @@
-import { defineStore } from "@poveste/vendors/pinia";
-import { reactive, ref, watch } from "@poveste/vendors/vue";
 import { useStoryStore } from "./story.js";
-"use strict";
-const useEventsStore = defineStore("events", () => {
-  const storyStore = useStoryStore();
-  const events = reactive([]);
-  const unseen = ref(0);
-  function addEvent(event) {
-    events.push(event);
-    unseen.value++;
-  }
-  function reset() {
-    events.length = 0;
-    unseen.value = 0;
-  }
-  watch(() => storyStore.currentVariant?.id, () => {
-    reset();
-  });
-  return {
-    addEvent,
-    reset,
-    events,
-    unseen
-  };
+import { reactive, ref, watch } from "@poveste/vendors/vue";
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/events.ts
+var useEventsStore = defineStore("events", () => {
+	const storyStore = useStoryStore();
+	const events = reactive([]);
+	const unseen = ref(0);
+	function addEvent(event) {
+		events.push(event);
+		unseen.value++;
+	}
+	function reset() {
+		events.length = 0;
+		unseen.value = 0;
+	}
+	watch(() => storyStore.currentVariant?.id, () => {
+		reset();
+	});
+	return {
+		addEvent,
+		reset,
+		events,
+		unseen
+	};
 });
-export {
-  useEventsStore
-};
+//#endregion
+export { useEventsStore };