@poveste/app 0.13.1 → 0.14.0

package/src/app/components/base/BaseSplitPane.vue

@@ -168,13 +168,13 @@ const rightStyle = computed(() => {
   if (!hasBothPanes.value) {
     return { [axis.value]: '100%' }
   }
-  return { [axis.value]: props.fixed ? null : `${100 - boundSplit.value}%` }
+  return { [axis.value]: props.fixed ? undefined : `${100 - boundSplit.value}%` }
 })
 
 const dragging = ref(false)
 let startPosition = 0
 let startSplit = 0
-const el = ref(null)
+const el = ref<HTMLElement>()
 
 function dragStart(e) {
   dragging.value = true
@@ -186,15 +186,20 @@ function dragStart(e) {
 
 function dragMove(e) {
   if (dragging.value) {
+    // The move listener is on `window`, so it can outlive the element for the
+    // rest of a drag if the pane unmounts under it.
+    const pane = el.value
+    if (!pane) return
+
     let position
     let totalSize
     if (props.orientation === 'landscape') {
       position = e.pageX
-      totalSize = el.value.offsetWidth
+      totalSize = pane.offsetWidth
     }
     else {
       position = e.pageY
-      totalSize = el.value.offsetHeight
+      totalSize = pane.offsetHeight
     }
     const dPosition = position - startPosition
     if (props.fixed) {

package/src/app/components/command/CommandPrompts.vue

@@ -24,7 +24,7 @@ const promptTypes = {
 const answers = reactive<Record<string, any>>({})
 
 // Initial default values
-for (const prompt of props.command.prompts) {
+for (const prompt of props.command.prompts ?? []) {
   let defaultValue
   if (typeof prompt.defaultValue === 'function') {
     defaultValue = prompt.defaultValue(answers)

package/src/app/components/command/CommandPromptsModal.vue

@@ -33,6 +33,7 @@ const commandStore = useCommandStore()
     />
     <div class="bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] max-h-[80vh] overflow-y-auto scroll-smooth shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850">
       <CommandPrompts
+        v-if="commandStore.selectedCommand"
         :command="commandStore.selectedCommand"
         @close="close()"
       />

package/src/app/components/command/PromptSelect.vue

@@ -16,8 +16,9 @@ const emit = defineEmits<{
   (e: 'next'): void
 }>()
 
+// Optional coming in, required going out, so the empty case settles here.
 const model = computed({
-  get: () => props.modelValue,
+  get: () => props.modelValue ?? '',
   set: (value) => {
     emit('update:modelValue', value)
     emit('next')

package/src/app/components/command/PromptText.vue

@@ -9,11 +9,15 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: string | undefined): void
 }>()
 
-const model = computed({
-  get: () => props.modelValue,
+// The input needs a string to bind to, so the getter fills in `''` — but an
+// absent answer has to leave as absent. `''` is falsy and *not* nullish, so
+// coercing on the way out would stop a command's `answers.x ?? fallback` from
+// firing, which is the trap #440 was about one file over.
+const model = computed<string | undefined>({
+  get: () => props.modelValue ?? '',
   set: value => emit('update:modelValue', value),
 })
 

package/src/app/components/panel/StatePresets.vue

@@ -57,8 +57,13 @@ function applyPreset(id) {
   if (id === DEFAULT_ID) {
     resetState()
   }
-  else if (presetStates.value.has(id)) {
-    applyState(props.variant.state, clone(toRawDeep(presetStates.value.get(id).state)))
+  else {
+    // `has` then `get` is two lookups and only the second one is the value;
+    // reading it once says the same thing and carries the type with it.
+    const preset = presetStates.value.get(id)
+    if (preset) {
+      applyState(props.variant.state, clone(toRawDeep(preset.state)))
+    }
   }
 }
 
@@ -80,9 +85,22 @@ async function createPreset() {
   selectedOption.value = id
   isEditing.value = true
   await nextTick()
-  input.value.select()
+  // The input is rendered by the edit state set above, so it exists by now —
+  // unless editing was cancelled during the tick, which unmounts it.
+  input.value?.select()
 }
 
+// The template bound `v-model` straight to `presetStates.get(selectedOption).label`,
+// which is a Map lookup that can miss. Naming it once keeps the template honest
+// and gives the miss somewhere to go.
+const editingLabel = computed({
+  get: () => presetStates.value.get(selectedOption.value)?.label ?? '',
+  set: (value) => {
+    const preset = presetStates.value.get(selectedOption.value)
+    if (preset) preset.label = value
+  },
+})
+
 const savedNotif = ref(false)
 const savedTimeout = useTimeoutFn(() => {
   savedNotif.value = false
@@ -92,6 +110,7 @@ async function savePreset() {
   if (!canEdit.value) return
 
   const preset = presetStates.value.get(selectedOption.value)
+  if (!preset) return
   preset.state = toPresetState(props.variant.state, omitKeys)
   savedNotif.value = true
   savedTimeout.start()
@@ -117,7 +136,9 @@ async function startEditing() {
 
   isEditing.value = true
   await nextTick()
-  input.value.select()
+  // The input is rendered by the edit state set above, so it exists by now —
+  // unless editing was cancelled during the tick, which unmounts it.
+  input.value?.select()
 }
 
 function stopEditing() {
@@ -145,7 +166,7 @@ onClickOutside(select, stopEditing)
           <input
             v-if="isEditing"
             ref="input"
-            v-model="presetStates.get(selectedOption).label"
+            v-model="editingLabel"
             type="text"
             class="text-inherit bg-transparent w-full h-full outline-none"
             @click.stop.prevent

package/src/app/components/panel/StoryControls.vue

@@ -28,7 +28,7 @@ watch(() => props.variant, () => {
   ready.value = false
 })
 
-const hasCustomControls = computed(() => props.variant.slots().controls || props.story.slots().controls)
+const hasCustomControls = computed(() => props.variant.slots?.().controls || props.story.slots?.().controls)
 
 const hasInitState = computed(() => Object
   .entries(props.variant.state || {})

package/src/app/components/panel/StoryDocs.vue

@@ -14,7 +14,9 @@ export function useStoryDoc(story: Ref<Story>) {
 
   watchEffect(async () => {
     // Markdown file
-    const mdKey = story.value.file.filePath.replace(/\.(\w*)$/, '.md')
+    const filePath = story.value?.file?.filePath
+    if (!filePath) return
+    const mdKey = filePath.replace(/\.(\w*)$/, '.md')
     if (markdownFiles[mdKey]) {
       const md = await markdownFiles[mdKey]()
       renderedDoc.value = md.html

package/src/app/components/panel/StoryEvent.vue

@@ -10,8 +10,13 @@ const formattedArgument = computed(() => {
   switch (typeof props.event.argument) {
     case 'string':
       return `"${props.event.argument}"`
-    case 'object':
-      return `{ ${Object.keys(props.event.argument).map(key => `${key}: ${props.event.argument[key]}`).join(', ')} }`
+    case 'object': {
+      // `argument` is `unknown`, and `typeof x === 'object'` narrows it only as
+      // far as `object | null` — enough for `Object.keys`, not for indexing.
+      const argument = props.event.argument as Record<string, unknown> | null
+      if (!argument) return 'null'
+      return `{ ${Object.keys(argument).map(key => `${key}: ${argument[key]}`).join(', ')} }`
+    }
     default:
       return props.event.argument
   }

package/src/app/components/panel/StoryEvents.vue

@@ -19,7 +19,10 @@ async function resetUnseen() {
     eventsStore.unseen = 0
   }
   await nextTick()
-  eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight })
+  // Read after the await, and it is a template ref: the panel can be closed
+  // during the tick, and then there is nothing to scroll.
+  const events = eventsElement.value
+  events?.scrollTo({ top: events.scrollHeight })
 }
 </script>
 

package/src/app/components/panel/StorySidePanel.vue

@@ -60,6 +60,7 @@ const panelContentComponent = computed(() => {
         <template #first>
           <div class="flex flex-col h-full">
             <PaneTabs
+              v-if="storyStore.currentStory"
               :story="storyStore.currentStory"
               :variant="storyStore.currentVariant"
             />
@@ -75,6 +76,7 @@ const panelContentComponent = computed(() => {
 
         <template #last>
           <StorySourceCode
+            v-if="storyStore.currentStory"
             :story="storyStore.currentStory"
             :variant="storyStore.currentVariant"
             class="h-full"

package/src/app/components/panel/StorySourceCode.vue

@@ -15,10 +15,13 @@ const props = defineProps<{
   variant: Variant
 }>()
 
-const generateSourceCodeFn = ref(null)
+// `ref(null)` infers `Ref<null>`, so the assignment below and the call further
+// down were both errors about a type nobody meant to declare.
+const generateSourceCodeFn = shallowRef<((variant: Variant) => Promise<string>) | null>(null)
 
 watchEffect(async () => {
-  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  const supportPluginId = props.story.file?.supportPluginId
+  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
   if (clientPlugin) {
     const pluginModule = await clientPlugin()
     generateSourceCodeFn.value = markRaw(pluginModule.generateSourceCode)
@@ -28,7 +31,7 @@ watchEffect(async () => {
 const highlighter = shallowRef<HighlighterCore>()
 
 const dynamicSourceCode = ref('')
-const error = ref<string>(null)
+const error = ref<string | null>(null)
 
 // Above the watch that assigns it: the callback is async but runs immediately,
 // and a story whose `slots()` throws reaches the auto-switch below before its

package/src/app/components/search/SearchPane.vue

@@ -45,7 +45,9 @@ watch(() => props.shown, (value) => {
   if (value) {
     requestAnimationFrame(() => {
       focused.value = true
-      input.value.select()
+      // A whole frame later, so the pane may have been closed again — a
+      // template ref is undefined once its element unmounts.
+      input.value?.select()
     })
   }
 })
@@ -127,7 +129,11 @@ watch(rateLimitedSearch, async (value) => {
     if (!idMapData) continue
     switch (idMapData.kind) {
       case 'story': {
-        list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank))
+        // The search index is built from the stories and outlives an
+        // individual one, so a hit can name a story that is no longer loaded.
+        const story = storyStore.getStoryById(idMapData.id)
+        if (!story) continue
+        list.push(storyResultFactory(story, rank))
         rank++
         break
       }
@@ -135,6 +141,7 @@ watch(rateLimitedSearch, async (value) => {
         const [storyId] = idMapData.id.split(':')
         const story = storyStore.getStoryById(storyId)
         const variant = storyStore.getVariantById(idMapData.id)
+        if (!story || !variant) continue
         list.push(variantResultFactory(story, variant, rank))
         rank++
         break
@@ -158,7 +165,9 @@ async function searchOnDocField(query: string) {
       if (!idMapData) continue
       switch (idMapData.kind) {
         case 'story': {
-          list.push(storyResultFactory(storyStore.getStoryById(idMapData.id), rank, 'docs'))
+          const story = storyStore.getStoryById(idMapData.id)
+          if (!story) continue
+          list.push(storyResultFactory(story, rank, 'docs'))
           rank++
           break
         }
@@ -188,7 +197,7 @@ function storyResultFactory(story: Story, rank: number, type: SearchResultType =
           : {},
       },
     },
-    path: story.file.path.slice(0, -1),
+    path: story.file?.path.slice(0, -1) ?? [],
     icon: story.icon,
     iconColor: story.iconColor,
   }
@@ -212,7 +221,7 @@ function variantResultFactory(story: Story, variant: Variant, rank: number, type
           : {},
       },
     },
-    path: [...story.file.path ?? [], story.title],
+    path: [...story.file?.path ?? [], story.title],
     icon: variant.icon,
     iconColor: variant.iconColor,
   }

package/src/app/components/story/GenericMountStory.vue

@@ -16,7 +16,8 @@ const props = defineProps<{
 const mountComponent = ref(null)
 
 watchEffect(async () => {
-  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  const supportPluginId = props.story.file?.supportPluginId
+  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
   if (clientPlugin) {
     const pluginModule = await clientPlugin()
     mountComponent.value = markRaw(pluginModule.MountStory)

package/src/app/components/story/GenericRenderStory.vue

@@ -16,7 +16,8 @@ const props = defineProps<{
 const mountComponent = ref(null)
 
 watchEffect(async () => {
-  const clientPlugin = clientSupportPlugins[props.story.file?.supportPluginId]
+  const supportPluginId = props.story.file?.supportPluginId
+  const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
   if (clientPlugin) {
     try {
       const pluginModule = await clientPlugin()

package/src/app/components/story/StoryResponsivePreview.vue

@@ -43,12 +43,34 @@ function addWindowListener(event: string, listener: (event: any) => unknown) {
 
 const previewWrapper = ref<HTMLDivElement>()
 
-function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, max: number, axis: 'x' | 'y') {
+function useDragger(el: Ref<HTMLDivElement | undefined>, value: Ref<number | null>, min: number, max: number, axis: 'x' | 'y') {
+  // The wrapper is a template ref, so it is undefined before mount and after
+  // unmount. Every read below happens during a drag, when it is on screen — but
+  // the move and up listeners are on `window`, so "during a drag" is not the
+  // same as "while this component is alive".
+  function wrapperSize() {
+    const wrapper = previewWrapper.value
+    if (!wrapper) return null
+    return axis === 'x' ? wrapper.clientWidth : wrapper.clientHeight
+  }
+
+  // `null` is the value that means "size to the available space", so a drag
+  // beginning from auto has to begin from the size actually rendered. The touch
+  // path had no fallback and `null + delta` coerces to `delta`, which collapsed
+  // a full-height preview to the minimum on the first move (#440).
+  function startFrom() {
+    if (value.value !== null) return value.value
+    const size = wrapperSize()
+    // Nothing to measure against, so start from the floor rather than from NaN.
+    if (size === null) return min
+    return size - (axis === 'x' ? 67 : 70)
+  }
+
   function onMouseDown(event: MouseEvent) {
     event.preventDefault()
     event.stopPropagation()
     const start = axis === 'x' ? event.clientX : event.clientY
-    const startValue = value.value ?? (axis === 'x' ? previewWrapper.value.clientWidth - 67 : previewWrapper.value.clientHeight - 70)
+    const startValue = startFrom()
     resizing.value = true
 
     const removeListeners = [
@@ -57,11 +79,14 @@ function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, ma
     ]
 
     function onMouseMove(event: MouseEvent) {
-      const snapTarget = (axis === 'x' ? previewWrapper.value.clientWidth : previewWrapper.value.clientHeight)
+      const snapTarget = wrapperSize()
       const delta = (axis === 'x' ? event.clientX : event.clientY) - start
       value.value = Math.max(min, Math.min(max, startValue + delta))
 
-      if (Math.abs(value.value - (snapTarget - 67)) < 16) {
+      // 67 on both axes, unlike `startFrom`. Left as it was: the snap threshold
+      // is a feel, not a measurement, and changing it here would be a UX edit
+      // wearing a type fix's clothes.
+      if (snapTarget !== null && Math.abs(value.value - (snapTarget - 67)) < 16) {
         value.value = null
       }
     }
@@ -77,7 +102,7 @@ function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, ma
     event.preventDefault()
     event.stopPropagation()
     const start = axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY
-    const startValue = value.value
+    const startValue = startFrom()
     resizing.value = true
 
     const removeListeners = [

package/src/app/components/story/StoryVariantGrid.vue

@@ -8,12 +8,19 @@ import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
 const storyStore = useStoryStore()
 
+// `currentStory` is a `.find()` over the loaded stories, so it is undefined for
+// a route naming a story that is not there, and `layout` is optional on top of
+// that. `StoryView` only mounts this component inside its `v-else` on the same
+// value, so neither is ever absent here — but that guarantee lives in another
+// component's template and cannot be seen from this one, which is why these
+// read through `?.` rather than an assertion.
 const gridTemplateWidth = computed(() => {
-  if (storyStore.currentStory.layout.type !== 'grid') {
+  const layout = storyStore.currentStory?.layout
+  if (layout?.type !== 'grid') {
     return
   }
 
-  const layoutWidth = storyStore.currentStory.layout.width
+  const layoutWidth = layout.width
 
   if (!layoutWidth) {
     return '200px'
@@ -38,11 +45,11 @@ const initialCount = 10
 
 const maxItemHeight = ref(0)
 
-const el = ref<HTMLDivElement>(null)
+const el = ref<HTMLDivElement>()
 const scrollTop = ref(0)
 const viewportHeight = ref(0)
 
-const variants = computed(() => storyStore.currentStory.variants)
+const variants = computed(() => storyStore.currentStory?.variants ?? [])
 
 useResizeObserver(el, () => {
   updateWindow()
@@ -103,7 +110,7 @@ function onItemResize(_w: number, h: number) {
 
 // Grid size
 
-const gridEl = ref<HTMLDivElement>(null)
+const gridEl = ref<HTMLDivElement>()
 const gridColumnWidth = ref(1)
 const viewWidth = ref(1)
 
@@ -113,8 +120,12 @@ function updateSize() {
 
   if (!gridEl.value) return
 
-  if (gridTemplateWidth.value.endsWith('%')) {
-    gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap
+  // Undefined when the story is not a grid, which is when this never runs.
+  const templateWidth = gridTemplateWidth.value
+  if (!templateWidth) return
+
+  if (templateWidth.endsWith('%')) {
+    gridColumnWidth.value = viewWidth.value * Number.parseInt(templateWidth) / 100 - gap
   }
   else {
     gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value)
@@ -184,7 +195,9 @@ function scheduleTrim() {
 }
 
 watch(visibleVariants, (visible) => {
-  slots.value = assignSlots(slots.value, storyStore.currentStory.id, visible)
+  const story = storyStore.currentStory
+  if (!story) return
+  slots.value = assignSlots(slots.value, story.id, visible)
   scheduleTrim()
 }, { immediate: true })
 
@@ -241,14 +254,18 @@ watch(() => storyStore.currentVariant, (variant) => {
               transform: offsetY ? `translateY(${offsetY}px)` : undefined,
             }"
           >
-            <StoryVariantGridItem
-              v-for="(slot, index) of slots"
-              :key="index"
-              :variant="slot.variant"
-              :story="storyStore.currentStory"
-              :style="{ order: slot.order, display: slot.visible ? undefined : 'none' }"
-              @resize="onItemResize"
-            />
+            <!-- A `template`, so the guard adds no element: `gridEl` above is
+                 measured by a resize observer and must not move. -->
+            <template v-if="storyStore.currentStory">
+              <StoryVariantGridItem
+                v-for="(slot, index) of slots"
+                :key="index"
+                :variant="slot.variant"
+                :story="storyStore.currentStory"
+                :style="{ order: slot.order, display: slot.visible ? undefined : 'none' }"
+                @resize="onItemResize"
+              />
+            </template>
           </div>
         </div>
       </div>

package/src/app/components/story/StoryView.vue

@@ -33,8 +33,12 @@ const route = useRoute()
 // Restore variant selection
 
 watch(() => storyStore.currentVariant, (value) => {
-  if (value) {
-    storyStore.currentStory.lastSelectedVariant = value
+  // A current variant is found *inside* the current story, so one implies the
+  // other — but that is a fact about two computeds in the store, not something
+  // the compiler can see from here.
+  const story = storyStore.currentStory
+  if (value && story) {
+    story.lastSelectedVariant = value
   }
 }, {
   immediate: true,
@@ -61,7 +65,7 @@ function setVariant(variantId: string) {
 
 // Docs auto-scroll to top
 
-const docsOnlyScroller = ref<HTMLElement>(null)
+const docsOnlyScroller = ref<HTMLElement>()
 
 function scrollDocsToTop() {
   docsOnlyScroller.value?.scrollTo(0, 0)

package/src/app/components/story/StoryViewer.vue

@@ -24,10 +24,10 @@ watch(variant, () => {
 <template>
   <div class="poveste-story-viewer bg-gray-50 h-full dark:bg-gray-750">
     <StoryVariantGrid
-      v-if="storyStore.currentStory.layout.type === 'grid'"
+      v-if="storyStore.currentStory?.layout?.type === 'grid'"
     />
     <StoryVariantSingle
-      v-else-if="storyStore.currentStory.layout.type === 'single'"
+      v-else-if="storyStore.currentStory?.layout?.type === 'single'"
       @open-variant-menu="isMenuOpened = true"
     />
   </div>
@@ -38,7 +38,7 @@ watch(variant, () => {
     @close="closeMenu"
   >
     <StoryVariantListItem
-      v-for="(v, index) of storyStore.currentStory.variants"
+      v-for="(v, index) of storyStore.currentStory?.variants ?? []"
       :key="index"
       :variant="v"
     />

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -17,7 +17,7 @@ const colorSchemeOptions: { value: SandboxColorScheme, label: string, icon: stri
 // A book that hides the app color scheme switch doesn't want the preview one
 // either — it keeps whatever `theme.defaultColorScheme` says.
 const showColorScheme = !povesteConfig.theme.hideColorSchemeSwitch
-const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets.length
+const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.length
 </script>
 
 <template>

package/src/app/components/toolbar/ToolbarResponsiveSize.vue

@@ -1,10 +1,30 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { povesteConfig } from '../../util/config'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
+
+// Not `v-model.number`: Vue's `looseToNumber` returns the original value when
+// `parseFloat` gives NaN, so clearing the field stored the string `''`. That is
+// a third value for a two-valued setting, and it is not nullish — so the `??`
+// in the size tooltip and in the dragger's start value both stopped firing, and
+// dragging after clearing the field set the size to the drag distance (#440).
+// The placeholder already says empty means auto, so empty becomes `null`.
+function autoWhenEmpty(key: 'responsiveWidth' | 'responsiveHeight') {
+  return computed<number | null>({
+    get: () => settings[key],
+    set: (value) => {
+      const parsed = typeof value === 'number' ? value : Number.parseFloat(value ?? '')
+      settings[key] = Number.isFinite(parsed) ? parsed : null
+    },
+  })
+}
+
+const responsiveWidth = autoWhenEmpty('responsiveWidth')
+const responsiveHeight = autoWhenEmpty('responsiveHeight')
 </script>
 
 <template>
@@ -40,7 +60,7 @@ const settings = usePreviewSettingsStore().currentSettings
 
         <div class="flex items-center gap-2 px-4 py-3">
           <input
-            v-model.number="settings.responsiveWidth"
+            v-model="responsiveWidth"
             v-tooltip="'Responsive width (px)'"
             type="number"
             class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
@@ -49,7 +69,7 @@ const settings = usePreviewSettingsStore().currentSettings
           >
           <span class="opacity-50">×</span>
           <input
-            v-model.number="settings.responsiveHeight"
+            v-model="responsiveHeight"
             v-tooltip="'Responsive height (px)'"
             type="number"
             class="bg-transparent border border-gray-200 dark:border-gray-850 rounded w-20 opacity-50 focus:opacity-100 flex-1 min-w-0"
@@ -67,7 +87,7 @@ const settings = usePreviewSettingsStore().currentSettings
               ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
               : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
-          @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height;hide()"
+          @click="settings.responsiveWidth = preset.width;settings.responsiveHeight = preset.height ?? null;hide()"
         >
           {{ preset.label }}
           <span class="ml-auto opacity-70 flex gap-1">

package/src/app/plugin.ts

@@ -1,11 +1,15 @@
 import { router } from './router.js'
 
 export function setupPluginApi() {
-  if (!import.meta.hot) return
+  // Captured rather than re-read: the narrowing from this guard does not reach
+  // into the callbacks below, and `hot?.send` there would leave `sendEvent`'s
+  // promise waiting for a reply to a message that was never sent.
+  const hot = import.meta.hot
+  if (!hot) return
 
   const listeners: Record<string, Set<(result: any) => unknown>> = {}
 
-  import.meta.hot.on('poveste:dev-event-result', ({ event, result }) => {
+  hot.on('poveste:dev-event-result', ({ event, result }) => {
     const set = listeners[event]
     if (set) {
       for (const listener of set) {
@@ -36,7 +40,7 @@ export function setupPluginApi() {
   window.__HST_PLUGIN_API__ = {
     sendEvent: (event: string, payload?: any) => {
       return new Promise((resolve) => {
-        import.meta.hot.send(`poveste:dev-event`, {
+        hot.send(`poveste:dev-event`, {
           event,
           payload,
         })

package/src/app/sandbox.ts

@@ -72,7 +72,7 @@ if (window.parent && window.parent !== window) {
 // window, and no framework hook sees an error raised outside its own call
 // stack (#323).
 function reportUncaught(error: unknown) {
-  reportStoryError(error, { storyId: storyId.value, variantId: variantId.value })
+  reportStoryError(error, { storyId: storyId.value ?? undefined, variantId: variantId.value ?? undefined })
 }
 window.addEventListener('error', (event) => {
   if (!isBenignResizeObserverEvent(event)) {

package/src/app/stores/folder.ts

@@ -51,7 +51,7 @@ export const useFolderStore = defineStore('folder', () => {
   const storyStore = useStoryStore()
 
   watch(() => storyStore.currentStory, (story) => {
-    if (story) {
+    if (story?.file) {
       openFileFolders(story.file.path)
     }
   })