@poveste/app 0.1.2 → 0.2.0

package/src/app/sandbox.ts

@@ -1,5 +1,6 @@
 import type { StoryFile } from './types'
 import { applyState } from '@poveste/shared'
+import { usePreferredDark } from '@vueuse/core'
 import { createPinia } from 'pinia'
 import { files } from 'virtual:$poveste-stories'
 import { computed, createApp, h, onMounted, ref, watch } from 'vue'
@@ -7,16 +8,44 @@ import { parseQuery } from 'vue-router'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import GenericRenderStory from './components/story/GenericRenderStory.vue'
 import { setupPluginApi } from './plugin.js'
+import { resolvePreviewDark } from './util/color-scheme.js'
 import { povesteConfig } from './util/config.js'
-import { PREVIEW_SETTINGS_SYNC, SANDBOX_READY, STATE_SYNC } from './util/const.js'
+import { PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC } from './util/const.js'
 import { isDark } from './util/dark.js'
 import { mapFile } from './util/mapping'
-import { applyPreviewSettings } from './util/preview-settings.js'
+import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from './util/preview-settings.js'
 import { toRawDeep } from './util/state.js'
 
 const query = parseQuery(window.location.search)
 const file = ref<StoryFile>(mapFile(files.find(f => f.id === query.storyId)))
 
+// Sandboxes opened on their own (the "open in a new tab" toolbar button) never
+// receive a PREVIEW_SETTINGS_SYNC, and inside the app the first one only lands
+// after the iframe is already visible. Both read the same storage the app
+// writes to, so seed from it and let the sync take over from there.
+const storedSettings = loadStoredPreviewSettings()
+if (storedSettings) {
+  applyPreviewSettings(storedSettings)
+}
+
+// The story preview has its own color scheme, independent from the app chrome.
+// The fallback covers settings stored before the option existed.
+const prefersDark = usePreferredDark()
+const previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value))
+
+watch(previewDark, (value) => {
+  if (value) {
+    document.documentElement.classList.add(povesteConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.add(povesteConfig.theme.darkClass)
+  }
+  else {
+    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass) // @TODO remove
+    document.documentElement.classList.remove(povesteConfig.theme.darkClass)
+  }
+}, {
+  immediate: true,
+})
+
 const app = createApp({
   name: 'SandboxApp',
 
@@ -64,7 +93,7 @@ const app = createApp({
 
   render() {
     return [
-      h('div', { class: 'htw-sandbox-hidden' }, [
+      h('div', { class: 'ptw-sandbox-hidden' }, [
         h(GenericMountStory, {
           key: file.value.story.id,
           story: file.value.story,
@@ -83,18 +112,33 @@ const app = createApp({
 app.use(createPinia())
 app.mount('#app')
 
-watch(isDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.add(povesteConfig.theme.darkClass)
-  }
-  else {
-    document.documentElement.classList.remove(povesteConfig.sandboxDarkClass) // @TODO remove
-    document.documentElement.classList.remove(povesteConfig.theme.darkClass)
-  }
-}, {
-  immediate: true,
-})
+// Tagging body itself as a story render root puts components teleported to
+// document.body (floating-vue popper, dialogs) inside the user-CSS @scope
+// boundary applied in dev. The custom-controls class opts out of poveste-app
+// source-level rules that add overflow/min-height to the render root.
+document.body.classList.add('__poveste-render-story', '__poveste-render-custom-controls')
+
+let pendingFrame: number | null = null
+let lastReportedHeight = -1
+function reportHeight() {
+  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
+  // Same-origin: parent and iframe are both served by the poveste dev /
+  // build server, so scope the target rather than broadcasting.
+  window.parent?.postMessage({ type: SANDBOX_HEIGHT, h }, window.location.origin)
+}
+function scheduleReport() {
+  if (pendingFrame !== null) return
+  pendingFrame = requestAnimationFrame(reportHeight)
+}
+const ro = new ResizeObserver(scheduleReport)
+ro.observe(document.body)
+requestAnimationFrame(scheduleReport)
 
 if (import.meta.hot) {
   /* #__PURE__ */ setupPluginApi()

package/src/app/stores/layout.ts

@@ -0,0 +1,22 @@
+import { useStorage } from '@vueuse/core'
+import { defineStore } from 'pinia'
+
+export type StoryOptionsPlacement = 'right' | 'bottom'
+
+export interface LayoutSettings {
+  storyListVisible: boolean
+  storyOptionsVisible: boolean
+  storyOptionsPlacement: StoryOptionsPlacement
+}
+
+export const useLayoutStore = defineStore('layout', () => {
+  const settings = useStorage<LayoutSettings>('_poveste-layout-v1', {
+    storyListVisible: true,
+    storyOptionsVisible: true,
+    storyOptionsPlacement: 'right',
+  })
+
+  return {
+    settings,
+  }
+})

package/src/app/stores/preview-settings.ts

@@ -1,18 +1,42 @@
 import type { PreviewSettings } from '../types'
 import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
+import { defaultPreviewColorScheme } from '../util/color-scheme'
+import { povesteConfig } from '../util/config'
+import { PREVIEW_SETTINGS_STORAGE_KEY } from '../util/preview-settings'
 
 export const usePreviewSettingsStore = defineStore('preview-settings', () => {
-  const currentSettings = useStorage<PreviewSettings>('_poveste-sandbox-settings-v3', {
+  const currentSettings = useStorage<PreviewSettings>(PREVIEW_SETTINGS_STORAGE_KEY, {
     responsiveWidth: 720,
     responsiveHeight: null,
     rotate: false,
-    backgroundColor: 'transparent',
+    backgroundColor: povesteConfig.defaultBackgroundColor ?? 'transparent',
+    backgroundColorPicked: false,
     checkerboard: false,
     textDirection: 'ltr',
+    colorScheme: defaultPreviewColorScheme,
   })
 
+  // useStorage honors its default only on first run, so already-stored settings
+  // would never see `defaultBackgroundColor` (nor a later change to it). Re-apply
+  // it on every load until the user picks a color from the toolbar; the flag lives
+  // in the settings object so it travels with the value it describes.
+  const configBg = povesteConfig.defaultBackgroundColor
+  if (configBg && !currentSettings.value.backgroundColorPicked) {
+    currentSettings.value.backgroundColor = configBg
+  }
+
+  // Same reason: settings stored before `colorScheme` existed would leave it
+  // undefined, so the toolbar would show no active option.
+  currentSettings.value.colorScheme ??= defaultPreviewColorScheme
+
+  function setBackgroundColor(color: string) {
+    currentSettings.value.backgroundColor = color
+    currentSettings.value.backgroundColorPicked = true
+  }
+
   return {
     currentSettings,
+    setBackgroundColor,
   }
 })

package/src/app/style/floating.pcss

@@ -5,17 +5,17 @@
 }
 
 .v-popper--theme-dropdown {
-  .htw-dark & {
+  .ptw-dark & {
     .v-popper__inner {
-      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+      @apply ptw-bg-gray-700 ptw-border-gray-850 ptw-text-gray-100;
     }
 
     .v-popper__arrow-inner {
-      @apply htw-border-gray-700;
+      @apply ptw-border-gray-700;
     }
 
     .v-popper__arrow-outer {
-      @apply htw-border-gray-850;
+      @apply ptw-border-gray-850;
     }
   }
 

package/src/app/style/main.pcss

@@ -73,7 +73,7 @@ button {
     background: transparent !important;
   }
 
-  .htw-prose {
+  .ptw-prose {
     h1, h2, h3, h4 {
       &:not(:hover) {
         .header-anchor[aria-hidden="true"] {
@@ -93,7 +93,7 @@ button {
     background-repeat: no-repeat;
     background-position: right;
 
-    .htw-dark & {
+    .ptw-dark & {
       background-image: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
     }
   }

package/src/app/style/sandbox.css

@@ -14,7 +14,7 @@ html {
   font-family: 'Noto Sans Display', system-ui, sans-serif;
 }
 
-.htw-sandbox-hidden {
+.ptw-sandbox-hidden {
   display: none;
 }
 

package/src/app/types.ts

@@ -45,13 +45,62 @@ export type SearchResult = SearchResultBase & ({
   onActivate: () => unknown
 })
 
+export type SandboxColorScheme = 'auto' | 'light' | 'dark'
+
 export interface PreviewSettings {
+  /**
+   * Width of the responsive preview, in pixels. `null` sizes it to the
+   * available space.
+   *
+   * @default 720
+   */
   responsiveWidth: number
+  /**
+   * Height of the responsive preview, in pixels. `null` sizes it to the
+   * available space.
+   *
+   * @default null
+   */
   responsiveHeight: number
+  /**
+   * Swap `responsiveWidth` and `responsiveHeight`, to preview a size in
+   * landscape without editing both values.
+   *
+   * @default false
+   */
   rotate: boolean
+  /**
+   * Background color of the story preview. Any CSS color, not only the ones
+   * from `backgroundPresets`.
+   *
+   * @default 'transparent'
+   */
   backgroundColor: string
+  /**
+   * Whether `backgroundColor` came from an explicit toolbar pick rather than
+   * from the `defaultBackgroundColor` config option.
+   *
+   * @default false
+   */
+  backgroundColorPicked: boolean
+  /**
+   * Show a checkerboard pattern behind the story, to spot transparency.
+   *
+   * @default false
+   */
   checkerboard: boolean
+  /**
+   * `dir` attribute set on the story preview.
+   *
+   * @default 'ltr'
+   */
   textDirection: 'ltr' | 'rtl'
+  /**
+   * Color scheme of the story preview, independent from the app chrome.
+   *
+   * @default 'auto'
+   */
+  colorScheme: SandboxColorScheme
 }
 
 declare module 'vue' {

package/src/app/util/color-scheme.ts

@@ -0,0 +1,36 @@
+import type { PreviewSettings, SandboxColorScheme } from '../types'
+import { usePreferredDark } from '@vueuse/core'
+import { computed } from 'vue'
+import { povesteConfig } from './config'
+import { isDark } from './dark'
+
+/**
+ * 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.
+ */
+export const defaultPreviewColorScheme: SandboxColorScheme = 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.
+ */
+export function resolvePreviewDark(colorScheme: SandboxColorScheme | undefined, prefersDark: boolean, chromeDark: boolean) {
+  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`.
+ */
+export function usePreviewDark(settings: PreviewSettings) {
+  const prefersDark = usePreferredDark()
+  return computed(() => resolvePreviewDark(settings.colorScheme, prefersDark.value, isDark.value))
+}

package/src/app/util/const.ts

@@ -2,3 +2,4 @@ export const STATE_SYNC = '__poveste:state-sync'
 export const SANDBOX_READY = '__poveste:sandbox-ready'
 export const EVENT_SEND = '__poveste:event'
 export const PREVIEW_SETTINGS_SYNC = '__poveste:preview-settings-sync'
+export const SANDBOX_HEIGHT = '__poveste:sandbox-height'

package/src/app/util/dark.ts

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

package/src/app/util/keyboard.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { isRef } from 'vue'
+import { isRef, shallowRef } from 'vue'
 import { isMac } from './env.js'
 
 export type KeyboardShortcut = string[]
@@ -11,14 +11,6 @@ export interface KeyboardShortcutOptions {
   event?: 'keyup' | 'keydown' | 'keypress'
 }
 
-export function onKeyboardShortcut(shortcut: KeyboardShortcut | Ref<KeyboardShortcut>, handler: KeyboardHandler, options: KeyboardShortcutOptions = {}) {
-  useEventListener(options.event ?? 'keydown', (event) => {
-    if (isMatchingShortcut(isRef(shortcut) ? shortcut.value : shortcut)) {
-      handler(event)
-    }
-  })
-}
-
 const modifiers: { [i: string]: { key: string, pressed: boolean } } = {
   ctrl: { key: 'Control', pressed: false },
   alt: { key: 'Alt', pressed: false },
@@ -28,37 +20,78 @@ const modifiers: { [i: string]: { key: string, pressed: boolean } } = {
 
 const pressedKeys = new Set<string>()
 
-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())
-})
+const trackedWindows = shallowRef<Window[]>([])
 
-window.addEventListener('keyup', (event) => {
-  requestAnimationFrame(() => {
-    pressedKeys.clear()
+function bindTracking(target: Window) {
+  const onKeydown = (event: KeyboardEvent) => {
     for (const i in modifiers) {
       const mod = modifiers[i]
       if (mod.key === event.key) {
-        mod.pressed = false
-        break
+        mod.pressed = true
+        return
       }
     }
-  })
-})
+    pressedKeys.add(event.key.toLocaleLowerCase())
+  }
+  const onKeyup = (event: KeyboardEvent) => {
+    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)
+  }
+}
 
-window.addEventListener('blur', () => {
-  pressedKeys.clear()
-  for (const i in modifiers) {
-    const mod = modifiers[i]
-    mod.pressed = false
+/**
+ * Opt an additional window (typically a sandbox iframe `contentWindow`) into
+ * shortcut tracking, so keys pressed while it has focus still reach the app.
+ */
+export function trackWindow(target: Window): () => void {
+  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)
+
+export function onKeyboardShortcut(shortcut: KeyboardShortcut | Ref<KeyboardShortcut>, handler: KeyboardHandler, options: KeyboardShortcutOptions = {}) {
+  useEventListener(trackedWindows, options.event ?? 'keydown', (event: KeyboardEvent) => {
+    // Sync modifier state from the event so a blur-clear (e.g. focusing an
+    // iframe while holding a modifier) doesn't drop the shortcut.
+    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: KeyboardShortcut): boolean {
   for (const combination of shortcut) {

package/src/app/util/preview-settings.ts

@@ -2,8 +2,24 @@ import type { PreviewSettings } from '../types'
 import { reactive } from 'vue'
 import { povesteConfig } from './config'
 
+export const PREVIEW_SETTINGS_STORAGE_KEY = '_poveste-sandbox-settings-v3'
+
 export const receivedSettings = reactive<PreviewSettings>({} as PreviewSettings)
 
+/**
+ * Read the settings the app persists, for sandboxes that can't wait for (or
+ * will never get) a `PREVIEW_SETTINGS_SYNC` message.
+ */
+export function loadStoredPreviewSettings(): PreviewSettings | null {
+  try {
+    const raw = localStorage.getItem(PREVIEW_SETTINGS_STORAGE_KEY)
+    return raw ? JSON.parse(raw) : null
+  }
+  catch {
+    return null
+  }
+}
+
 export function applyPreviewSettings(settings: PreviewSettings) {
   Object.assign(receivedSettings, settings)
 

package/src/app/util/tooltip.ts

@@ -3,11 +3,11 @@ import { formatKey } from './keyboard.js'
 
 export function makeTooltip(descriptionHtml: string, keyboardShortcut: (options: { isMac: boolean }) => string) {
   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: string) {
-  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>`
 }

package/src/bundle-main.js

@@ -1,3 +1,5 @@
+/* eslint-disable perfectionist/sort-imports -- global styles must load before app bundle */
+import 'virtual:$poveste-global-styles'
 import { mountMainApp } from './bundled/index.js'
 import './style.css'
 import './bundled/app.css'

package/src/shim.d.ts

@@ -4,7 +4,7 @@ import type { Ref } from '@poveste/vendors/vue'
 
 global {
   interface Window {
-    __hst_controls_dark: Ref<boolean>[]
-    __hst_controls_dark_ready: () => void
+    __pvt_controls_dark: Ref<boolean>[]
+    __pvt_controls_dark_ready: () => void
   }
 }