@poveste/app 0.1.2 → 0.2.0

package/dist/bundled/stores/layout.js

@@ -0,0 +1,16 @@
+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
+  };
+});
+export {
+  useLayoutStore
+};

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

@@ -1,17 +1,32 @@
 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 { PREVIEW_SETTINGS_STORAGE_KEY } from "../util/preview-settings.js";
 "use strict";
 const usePreviewSettingsStore = defineStore("preview-settings", () => {
-  const currentSettings = useStorage("_poveste-sandbox-settings-v3", {
+  const currentSettings = useStorage(PREVIEW_SETTINGS_STORAGE_KEY, {
     responsiveWidth: 720,
     responsiveHeight: null,
     rotate: false,
-    backgroundColor: "transparent",
+    backgroundColor: povesteConfig.defaultBackgroundColor ?? "transparent",
+    backgroundColorPicked: false,
     checkerboard: false,
-    textDirection: "ltr"
+    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
+    currentSettings,
+    setBackgroundColor
   };
 });
 export {

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

@@ -0,0 +1,27 @@
+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";
+function resolvePreviewDark(colorScheme, prefersDark, chromeDark) {
+  switch (colorScheme) {
+    case "light":
+      return false;
+    case "dark":
+      return true;
+    case "auto":
+      return prefersDark;
+    default:
+      return chromeDark;
+  }
+}
+function usePreviewDark(settings) {
+  const prefersDark = usePreferredDark();
+  return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value));
+}
+export {
+  defaultPreviewColorScheme,
+  resolvePreviewDark,
+  usePreviewDark
+};

package/dist/bundled/util/const.js

@@ -2,9 +2,11 @@ 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
 };

package/dist/bundled/util/dark.js

@@ -3,14 +3,14 @@ import { watch } from "@poveste/vendors/vue";
 import { povesteConfig } from "./config.js";
 "use strict";
 const isDark = useDark({
-  valueDark: "htw-dark",
+  valueDark: "ptw-dark",
   initialValue: povesteConfig.theme.defaultColorScheme,
   storageKey: "poveste-color-scheme",
   storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage
 });
 const toggleDark = useToggle(isDark);
 function applyDarkToControls() {
-  window.__hst_controls_dark?.forEach((ref) => {
+  window.__pvt_controls_dark?.forEach((ref) => {
     ref.value = isDark.value;
   });
 }
@@ -19,7 +19,7 @@ watch(isDark, () => {
 }, {
   immediate: true
 });
-window.__hst_controls_dark_ready = () => {
+window.__pvt_controls_dark_ready = () => {
   applyDarkToControls();
 };
 export {

package/dist/bundled/util/keyboard.js

@@ -1,14 +1,7 @@
 import { useEventListener } from "@poveste/vendors/vue-use";
-import { isRef } from "@poveste/vendors/vue";
+import { shallowRef, isRef } from "@poveste/vendors/vue";
 import { isMac } from "./env.js";
 "use strict";
-function onKeyboardShortcut(shortcut, handler, options = {}) {
-  useEventListener(options.event ?? "keydown", (event) => {
-    if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) {
-      handler(event);
-    }
-  });
-}
 const modifiers = {
   ctrl: { key: "Control", pressed: false },
   alt: { key: "Alt", pressed: false },
@@ -16,35 +9,69 @@ const modifiers = {
   meta: { key: "Meta", pressed: false }
 };
 const pressedKeys = /* @__PURE__ */ new Set();
-window.addEventListener("keydown", (event) => {
-  for (const i in modifiers) {
-    const mod = modifiers[i];
-    if (mod.key === event.key) {
-      mod.pressed = true;
-      return;
-    }
-  }
-  pressedKeys.add(event.key.toLocaleLowerCase());
-});
-window.addEventListener("keyup", (event) => {
-  requestAnimationFrame(() => {
-    pressedKeys.clear();
+const trackedWindows = shallowRef([]);
+function bindTracking(target) {
+  const onKeydown = (event) => {
     for (const i in modifiers) {
       const mod = modifiers[i];
       if (mod.key === event.key) {
-        mod.pressed = false;
-        break;
+        mod.pressed = true;
+        return;
       }
     }
-  });
-});
-window.addEventListener("blur", () => {
-  pressedKeys.clear();
-  for (const i in modifiers) {
-    const mod = modifiers[i];
-    mod.pressed = false;
+    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);
+  };
+}
+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);
+  };
+}
+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);
+    }
+  });
+}
 function isMatchingShortcut(shortcut) {
   for (const combination of shortcut) {
     if (isMatchingCombination(combination.toLowerCase())) {
@@ -86,5 +113,6 @@ function formatKey(key) {
 }
 export {
   formatKey,
-  onKeyboardShortcut
+  onKeyboardShortcut,
+  trackWindow
 };

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

@@ -1,7 +1,16 @@
 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({});
+function loadStoredPreviewSettings() {
+  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);
@@ -16,7 +25,9 @@ function getContrastColor(setting) {
   return povesteConfig.backgroundPresets.find((preset) => preset.color === setting.backgroundColor)?.contrastColor ?? "unset";
 }
 export {
+  PREVIEW_SETTINGS_STORAGE_KEY,
   applyPreviewSettings,
   getContrastColor,
+  loadStoredPreviewSettings,
   receivedSettings
 };

package/dist/bundled/util/tooltip.js

@@ -3,12 +3,12 @@ import { formatKey } from "./keyboard.js";
 "use strict";
 function makeTooltip(descriptionHtml, keyboardShortcut) {
   return {
-    content: `<div>${descriptionHtml}</div><div class="htw-flex htw-items-center htw-gap-1 htw-mt-2 htw-text-sm">${genKeyboardShortcutHtml(keyboardShortcut({ isMac }))}</div>`,
+    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
   };
 }
 function genKeyboardShortcutHtml(shortcut) {
-  return `<span class="htw-border htw-border-gray-600 htw-px-1 htw-rounded-sm htw-text-gray-400">${shortcut.split("+").map((k) => formatKey(k.trim())).join(" ")}</span>`;
+  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>`;
 }
 export {
   makeTooltip