@poveste/app 0.2.0 → 0.3.0

package/dist/bundled/util/keyboard.js

@@ -1,118 +1,104 @@
-import { useEventListener } from "@poveste/vendors/vue-use";
-import { shallowRef, isRef } from "@poveste/vendors/vue";
 import { isMac } from "./env.js";
-"use strict";
-const modifiers = {
-  ctrl: { key: "Control", pressed: false },
-  alt: { key: "Alt", pressed: false },
-  shift: { key: "Shift", pressed: false },
-  meta: { key: "Meta", pressed: false }
+import { useEventListener } from "@poveste/vendors/vue-use";
+import { isRef, shallowRef } from "@poveste/vendors/vue";
+//#region src/app/util/keyboard.ts
+var modifiers = {
+	ctrl: {
+		key: "Control",
+		pressed: false
+	},
+	alt: {
+		key: "Alt",
+		pressed: false
+	},
+	shift: {
+		key: "Shift",
+		pressed: false
+	},
+	meta: {
+		key: "Meta",
+		pressed: false
+	}
 };
-const pressedKeys = /* @__PURE__ */ new Set();
-const trackedWindows = shallowRef([]);
+var pressedKeys = /* @__PURE__ */ new Set();
+var trackedWindows = shallowRef([]);
 function bindTracking(target) {
-  const onKeydown = (event) => {
-    for (const i in modifiers) {
-      const mod = modifiers[i];
-      if (mod.key === event.key) {
-        mod.pressed = true;
-        return;
-      }
-    }
-    pressedKeys.add(event.key.toLocaleLowerCase());
-  };
-  const onKeyup = (event) => {
-    requestAnimationFrame(() => {
-      pressedKeys.clear();
-      for (const i in modifiers) {
-        const mod = modifiers[i];
-        if (mod.key === event.key) {
-          mod.pressed = false;
-          break;
-        }
-      }
-    });
-  };
-  const onBlur = () => {
-    pressedKeys.clear();
-    for (const i in modifiers) {
-      modifiers[i].pressed = false;
-    }
-  };
-  target.addEventListener("keydown", onKeydown);
-  target.addEventListener("keyup", onKeyup);
-  target.addEventListener("blur", onBlur);
-  return () => {
-    target.removeEventListener("keydown", onKeydown);
-    target.removeEventListener("keyup", onKeyup);
-    target.removeEventListener("blur", onBlur);
-  };
+	const onKeydown = (event) => {
+		for (const i in modifiers) {
+			const mod = modifiers[i];
+			if (mod.key === event.key) {
+				mod.pressed = true;
+				return;
+			}
+		}
+		pressedKeys.add(event.key.toLocaleLowerCase());
+	};
+	const onKeyup = (event) => {
+		requestAnimationFrame(() => {
+			pressedKeys.clear();
+			for (const i in modifiers) {
+				const mod = modifiers[i];
+				if (mod.key === event.key) {
+					mod.pressed = false;
+					break;
+				}
+			}
+		});
+	};
+	const onBlur = () => {
+		pressedKeys.clear();
+		for (const i in modifiers) modifiers[i].pressed = false;
+	};
+	target.addEventListener("keydown", onKeydown);
+	target.addEventListener("keyup", onKeyup);
+	target.addEventListener("blur", onBlur);
+	return () => {
+		target.removeEventListener("keydown", onKeydown);
+		target.removeEventListener("keyup", onKeyup);
+		target.removeEventListener("blur", onBlur);
+	};
 }
+/**
+* Opt an additional window (typically a sandbox iframe `contentWindow`) into
+* shortcut tracking, so keys pressed while it has focus still reach the app.
+*/
 function trackWindow(target) {
-  if (trackedWindows.value.includes(target)) {
-    return () => {
-    };
-  }
-  const cleanup = bindTracking(target);
-  trackedWindows.value = [...trackedWindows.value, target];
-  return () => {
-    cleanup();
-    trackedWindows.value = trackedWindows.value.filter((w) => w !== target);
-  };
+	if (trackedWindows.value.includes(target)) return () => {};
+	const cleanup = bindTracking(target);
+	trackedWindows.value = [...trackedWindows.value, target];
+	return () => {
+		cleanup();
+		trackedWindows.value = trackedWindows.value.filter((w) => w !== target);
+	};
 }
 trackWindow(window);
 function onKeyboardShortcut(shortcut, handler, options = {}) {
-  useEventListener(trackedWindows, options.event ?? "keydown", (event) => {
-    modifiers.ctrl.pressed = event.ctrlKey;
-    modifiers.alt.pressed = event.altKey;
-    modifiers.shift.pressed = event.shiftKey;
-    modifiers.meta.pressed = event.metaKey;
-    if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) {
-      handler(event);
-    }
-  });
+	useEventListener(trackedWindows, options.event ?? "keydown", (event) => {
+		modifiers.ctrl.pressed = event.ctrlKey;
+		modifiers.alt.pressed = event.altKey;
+		modifiers.shift.pressed = event.shiftKey;
+		modifiers.meta.pressed = event.metaKey;
+		if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) handler(event);
+	});
 }
 function isMatchingShortcut(shortcut) {
-  for (const combination of shortcut) {
-    if (isMatchingCombination(combination.toLowerCase())) {
-      return true;
-    }
-  }
-  return false;
+	for (const combination of shortcut) if (isMatchingCombination(combination.toLowerCase())) return true;
+	return false;
 }
 function isMatchingCombination(combination) {
-  const splitted = combination.split("+").map((key) => key.trim());
-  const targetKey = splitted.pop();
-  for (const mod in modifiers) {
-    const containsMod = splitted.includes(mod);
-    const isPressed = modifiers[mod].pressed;
-    if (containsMod !== isPressed) {
-      return false;
-    }
-  }
-  return pressedKeys.has(targetKey);
+	const splitted = combination.split("+").map((key) => key.trim());
+	const targetKey = splitted.pop();
+	for (const mod in modifiers) if (splitted.includes(mod) !== modifiers[mod].pressed) return false;
+	return pressedKeys.has(targetKey);
 }
 function formatKey(key) {
-  key = key.toLowerCase();
-  if (key === "ctrl") {
-    return isMac ? "^" : "Ctrl";
-  }
-  if (key === "alt") {
-    return isMac ? "⎇" : "Alt";
-  }
-  if (key === "shift") {
-    return "⇧";
-  }
-  if (key === "meta") {
-    return "⌘";
-  }
-  if (key === "enter") {
-    return "⏎";
-  }
-  return key.charAt(0).toUpperCase() + key.substring(1).toLowerCase();
+	key = key.toLowerCase();
+	if (key === "ctrl") return isMac ? "^" : "Ctrl";
+	if (key === "alt") return isMac ? "⎇" : "Alt";
+	if (key === "shift") return "⇧";
+	if (key === "meta") return "⌘";
+	if (key === "enter") return "⏎";
+	return key.charAt(0).toUpperCase() + key.substring(1).toLowerCase();
 }
-export {
-  formatKey,
-  onKeyboardShortcut,
-  trackWindow
-};
+//#endregion
+export { formatKey, onKeyboardShortcut, trackWindow };

package/dist/bundled/util/mapping.js

@@ -1,70 +1,55 @@
 import { markRaw, reactive } from "@poveste/vendors/vue";
-"use strict";
-const copiedFromExistingVariant = [
-  "state",
-  "slots",
-  "source",
-  "responsiveDisabled",
-  "autoPropsDisabled",
-  "setupApp",
-  "configReady",
-  "previewReady"
+//#region src/app/util/mapping.ts
+var copiedFromExistingVariant = [
+	"state",
+	"slots",
+	"source",
+	"responsiveDisabled",
+	"autoPropsDisabled",
+	"setupApp",
+	"configReady",
+	"previewReady"
 ];
 function mapFile(file, existingFile) {
-  let result;
-  if (existingFile) {
-    result = existingFile;
-    for (const key in file) {
-      if (key === "story") {
-        result.story = {
-          ...result.story,
-          ...file.story,
-          file: markRaw(result),
-          variants: file.story.variants.map((v) => mapVariant(v, existingFile.story.variants.find((item) => item.id === v.id)))
-        };
-      } else if (key !== "component") {
-        result[key] = file[key];
-      }
-    }
-  } else {
-    result = {
-      ...file,
-      component: markRaw(file.component),
-      story: {
-        ...file.story,
-        title: file.story.title,
-        file: markRaw(file),
-        variants: file.story.variants.map((v) => mapVariant(v)),
-        slots: () => ({})
-      }
-    };
-  }
-  return result;
+	let result;
+	if (existingFile) {
+		result = existingFile;
+		for (const key in file) if (key === "story") result.story = {
+			...result.story,
+			...file.story,
+			file: markRaw(result),
+			variants: file.story.variants.map((v) => mapVariant(v, existingFile.story.variants.find((item) => item.id === v.id)))
+		};
+		else if (key !== "component") result[key] = file[key];
+	} else result = {
+		...file,
+		component: markRaw(file.component),
+		story: {
+			...file.story,
+			title: file.story.title,
+			file: markRaw(file),
+			variants: file.story.variants.map((v) => mapVariant(v)),
+			slots: () => ({})
+		}
+	};
+	return result;
 }
 function mapVariant(variant, existingVariant) {
-  let result;
-  if (existingVariant) {
-    result = existingVariant;
-    for (const key in variant) {
-      if (!copiedFromExistingVariant.includes(key)) {
-        result[key] = variant[key];
-      }
-    }
-  } else {
-    result = {
-      ...variant,
-      state: reactive({
-        _hPropState: {},
-        _hPropDefs: {}
-      }),
-      setupApp: null,
-      slots: () => ({}),
-      previewReady: false
-    };
-  }
-  return result;
+	let result;
+	if (existingVariant) {
+		result = existingVariant;
+		for (const key in variant) if (!copiedFromExistingVariant.includes(key)) result[key] = variant[key];
+	} else result = {
+		...variant,
+		state: reactive({
+			_hPropState: {},
+			_hPropDefs: {}
+		}),
+		setupApp: null,
+		slots: () => ({}),
+		previewReady: false
+	};
+	return result;
 }
-export {
-  mapFile,
-  mapVariant
-};
+//#endregion
+export { mapFile, mapVariant };

package/dist/bundled/util/open-in-editor.js

@@ -1,6 +1,6 @@
+//#region src/app/util/open-in-editor.ts
 function openInEditor(file) {
-  return fetch(`${import.meta.env.BASE_URL}__open-in-editor?file=${encodeURIComponent(file)}`);
+	return fetch(`${import.meta.env.BASE_URL}__open-in-editor?file=${encodeURIComponent(file)}`);
 }
-export {
-  openInEditor
-};
+//#endregion
+export { openInEditor };

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

@@ -1,33 +1,30 @@
-import { reactive } from "@poveste/vendors/vue";
 import { povesteConfig } from "./config.js";
-"use strict";
-const PREVIEW_SETTINGS_STORAGE_KEY = "_poveste-sandbox-settings-v3";
-const receivedSettings = reactive({});
+import { reactive } from "@poveste/vendors/vue";
+//#region src/app/util/preview-settings.ts
+var PREVIEW_SETTINGS_STORAGE_KEY = "_poveste-sandbox-settings-v3";
+var receivedSettings = reactive({});
+/**
+* Read the settings the app persists, for sandboxes that can't wait for (or
+* will never get) a `PREVIEW_SETTINGS_SYNC` message.
+*/
 function loadStoredPreviewSettings() {
-  try {
-    const raw = localStorage.getItem(PREVIEW_SETTINGS_STORAGE_KEY);
-    return raw ? JSON.parse(raw) : null;
-  } catch {
-    return null;
-  }
+	try {
+		const raw = localStorage.getItem(PREVIEW_SETTINGS_STORAGE_KEY);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
 }
 function applyPreviewSettings(settings) {
-  Object.assign(receivedSettings, settings);
-  document.documentElement.setAttribute("dir", settings.textDirection);
-  const contrastColor = getContrastColor(settings);
-  document.documentElement.style.setProperty("--poveste-contrast-color", contrastColor);
-  document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
-  if (povesteConfig.autoApplyContrastColor) {
-    document.documentElement.style.color = contrastColor;
-  }
+	Object.assign(receivedSettings, settings);
+	document.documentElement.setAttribute("dir", settings.textDirection);
+	const contrastColor = getContrastColor(settings);
+	document.documentElement.style.setProperty("--poveste-contrast-color", contrastColor);
+	document.documentElement.style.setProperty("--histoire-contrast-color", contrastColor);
+	if (povesteConfig.autoApplyContrastColor) document.documentElement.style.color = contrastColor;
 }
 function getContrastColor(setting) {
-  return povesteConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
+	return povesteConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
 }
-export {
-  PREVIEW_SETTINGS_STORAGE_KEY,
-  applyPreviewSettings,
-  getContrastColor,
-  loadStoredPreviewSettings,
-  receivedSettings
-};
+//#endregion
+export { PREVIEW_SETTINGS_STORAGE_KEY, applyPreviewSettings, getContrastColor, loadStoredPreviewSettings, receivedSettings };

package/dist/bundled/util/responsive.js

@@ -1,6 +1,5 @@
 import { useMediaQuery } from "@poveste/vendors/vue-use";
-"use strict";
-const isMobile = useMediaQuery("(max-width: 640px)");
-export {
-  isMobile
-};
+//#region src/app/util/responsive.ts
+var isMobile = useMediaQuery("(max-width: 640px)");
+//#endregion
+export { isMobile };

package/dist/bundled/util/sandbox.js

@@ -1,11 +1,10 @@
 import { base } from "../router.js";
-"use strict";
+//#region src/app/util/sandbox.ts
 function getSandboxUrl(story, variant) {
-  const url = new URLSearchParams();
-  url.append("storyId", story.id);
-  url.append("variantId", variant.id);
-  return `${base}__sandbox.html?${url.toString()}`;
+	const url = new URLSearchParams();
+	url.append("storyId", story.id);
+	url.append("variantId", variant.id);
+	return `${base}__sandbox.html?${url.toString()}`;
 }
-export {
-  getSandboxUrl
-};
+//#endregion
+export { getSandboxUrl };

package/dist/bundled/util/scroll.js

@@ -1,31 +1,23 @@
+import { onMounted, watch } from "@poveste/vendors/vue";
 import scrollIntoView from "@poveste/vendors/scroll";
-import { watch, onMounted } from "@poveste/vendors/vue";
-"use strict";
+//#region src/app/util/scroll.ts
 function useScrollOnActive(active, el) {
-  watch(active, (value) => {
-    if (value) {
-      autoScroll();
-    }
-  });
-  function autoScroll() {
-    if (el.value) {
-      scrollIntoView(el.value, {
-        scrollMode: "if-needed",
-        block: "center",
-        inline: "nearest",
-        behavior: "smooth"
-      });
-    }
-  }
-  onMounted(() => {
-    if (active.value) {
-      autoScroll();
-    }
-  });
-  return {
-    autoScroll
-  };
+	watch(active, (value) => {
+		if (value) autoScroll();
+	}, { flush: "post" });
+	function autoScroll() {
+		if (el.value) scrollIntoView(el.value, {
+			scrollMode: "if-needed",
+			block: "center",
+			inline: "nearest",
+			behavior: "smooth",
+			boundary: document.body
+		});
+	}
+	onMounted(() => {
+		if (active.value) autoScroll();
+	});
+	return { autoScroll };
 }
-export {
-  useScrollOnActive
-};
+//#endregion
+export { useScrollOnActive };

package/dist/bundled/util/select.js

@@ -1,28 +1,23 @@
-import { ref, watch, computed } from "@poveste/vendors/vue";
-"use strict";
+import { computed, ref, watch } from "@poveste/vendors/vue";
+//#region src/app/util/select.ts
 function useSelection(list) {
-  const selectedIndex = ref(0);
-  watch(list, () => {
-    selectedIndex.value = 0;
-  });
-  function selectNext() {
-    selectedIndex.value++;
-    if (selectedIndex.value > list.value.length - 1) {
-      selectedIndex.value = 0;
-    }
-  }
-  function selectPrevious() {
-    selectedIndex.value--;
-    if (selectedIndex.value < 0) {
-      selectedIndex.value = list.value.length - 1;
-    }
-  }
-  return {
-    selectedIndex: computed(() => selectedIndex.value),
-    selectNext,
-    selectPrevious
-  };
+	const selectedIndex = ref(0);
+	watch(list, () => {
+		selectedIndex.value = 0;
+	});
+	function selectNext() {
+		selectedIndex.value++;
+		if (selectedIndex.value > list.value.length - 1) selectedIndex.value = 0;
+	}
+	function selectPrevious() {
+		selectedIndex.value--;
+		if (selectedIndex.value < 0) selectedIndex.value = list.value.length - 1;
+	}
+	return {
+		selectedIndex: computed(() => selectedIndex.value),
+		selectNext,
+		selectPrevious
+	};
 }
-export {
-  useSelection
-};
+//#endregion
+export { useSelection };

package/dist/bundled/util/state.js

@@ -1,41 +1,30 @@
 import { isRef, unref } from "@poveste/vendors/vue";
-"use strict";
-const isObject = (val) => val !== null && typeof val === "object";
+//#region src/app/util/state.ts
+var isObject = (val) => val !== null && typeof val === "object";
 function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
-  const unwrappedValue = isRef(val) ? unref(val) : val;
-  if (typeof unwrappedValue === "symbol") {
-    return unwrappedValue.toString();
-  }
-  if (!isObject(unwrappedValue)) {
-    return unwrappedValue;
-  }
-  if (seen.has(unwrappedValue)) {
-    return seen.get(unwrappedValue);
-  }
-  if (Array.isArray(unwrappedValue)) {
-    const result = [];
-    seen.set(unwrappedValue, result);
-    let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
-    if (clean) {
-      list = list.filter((value) => typeof value !== "function");
-    }
-    result.push(...list);
-    return result;
-  } else {
-    const result = {};
-    seen.set(unwrappedValue, result);
-    toRawObject(unwrappedValue, result, clean, seen);
-    return result;
-  }
+	const unwrappedValue = isRef(val) ? unref(val) : val;
+	if (typeof unwrappedValue === "symbol") return unwrappedValue.toString();
+	if (!isObject(unwrappedValue)) return unwrappedValue;
+	if (seen.has(unwrappedValue)) return seen.get(unwrappedValue);
+	if (Array.isArray(unwrappedValue)) {
+		const result = [];
+		seen.set(unwrappedValue, result);
+		let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
+		if (clean) list = list.filter((value) => typeof value !== "function");
+		result.push(...list);
+		return result;
+	} else {
+		const result = {};
+		seen.set(unwrappedValue, result);
+		toRawObject(unwrappedValue, result, clean, seen);
+		return result;
+	}
 }
 function toRawObject(obj, target, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
-  Object.keys(obj).forEach((key) => {
-    if (clean && typeof obj[key] === "function") {
-      return;
-    }
-    target[key] = toRawDeep(obj[key], clean, seen);
-  });
+	Object.keys(obj).forEach((key) => {
+		if (clean && typeof obj[key] === "function") return;
+		target[key] = toRawDeep(obj[key], clean, seen);
+	});
 }
-export {
-  toRawDeep
-};
+//#endregion
+export { toRawDeep };

package/dist/bundled/util/tooltip.js

@@ -1,15 +1,14 @@
 import { isMac } from "./env.js";
 import { formatKey } from "./keyboard.js";
-"use strict";
+//#region src/app/util/tooltip.ts
 function makeTooltip(descriptionHtml, keyboardShortcut) {
-  return {
-    content: `<div>${descriptionHtml}</div><div class="ptw-flex ptw-items-center ptw-gap-1 ptw-mt-2 ptw-text-sm">${genKeyboardShortcutHtml(keyboardShortcut({ isMac }))}</div>`,
-    html: true
-  };
+	return {
+		content: `<div>${descriptionHtml}</div><div class="flex items-center gap-1 mt-2 text-sm">${genKeyboardShortcutHtml(keyboardShortcut({ isMac }))}</div>`,
+		html: true
+	};
 }
 function genKeyboardShortcutHtml(shortcut) {
-  return `<span class="ptw-border ptw-border-gray-600 ptw-px-1 ptw-rounded-sm ptw-text-gray-400">${shortcut.split("+").map((k) => formatKey(k.trim())).join(" ")}</span>`;
+	return `<span class="border border-gray-600 px-1 rounded-sm text-gray-400">${shortcut.split("+").map((k) => formatKey(k.trim())).join(" ")}</span>`;
 }
-export {
-  makeTooltip
-};
+//#endregion
+export { makeTooltip };