@poveste/app 0.13.1 → 0.15.0

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/StoryVariantGridItem.vue

@@ -132,7 +132,7 @@ const useIframe = computed(() => {
       </RouterLink>
 
       <!-- Toolbar -->
-      <div class="flex-none ml-auto hidden group-hover:flex items-center">
+      <div class="flex-none ml-auto hidden group-hover:flex group-focus-within:flex items-center">
         <HstCopyIcon
           :content="() => getSourceCode(story, variant)"
         />

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

@@ -12,6 +12,7 @@ import { useStoryErrorStore } from '../../stores/story-errors'
 import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from '../../util/const'
 import { firstReportedHeight } from '../../util/grid-cell-height'
 import { trackWindow } from '../../util/keyboard'
+import { createRenderTracker } from '../../util/render-tracker'
 import { getSandboxUrl } from '../../util/sandbox'
 import { toRawDeep } from '../../util/state'
 import { createStateBridge } from '../../util/state-bridge'
@@ -31,11 +32,7 @@ const errorStore = useStoryErrorStore()
 
 const storyError = computed(() => errorStore.forVariant(props.story.id, props.variant.id))
 
-// The realm re-renders on every retarget, so a stale error must not outlive the
-// render that produced it — otherwise a fixed story stays marked until reload.
-watch(() => [props.story.id, props.variant.id], () => {
-  errorStore.clear(props.story.id, props.variant.id)
-})
+const render = createRenderTracker()
 
 // Iframe
 
@@ -103,6 +100,8 @@ function fromCurrentOccupant(data: { storyId?: string, variantId?: string }) {
 useEventListener(window, 'message', (event) => {
   // With many grid iframes mounted, every sandbox postMessage hits every
   // parent listener. Skip events that didn't originate from this iframe.
+  // Paired with the origin check in `sandbox.ts`, which guards the other
+  // direction (#379).
   if (event.source !== iframe.value?.contentWindow) return
   switch (event.data?.type) {
     case STATE_SYNC:
@@ -115,10 +114,15 @@ useEventListener(window, 'message', (event) => {
       break
     case SANDBOX_READY:
       if (!fromCurrentOccupant(event.data)) break
+      // Last render wins, which is what makes a fixed story stop being marked
+      // without a reload. Clearing on the id change instead cleared the pair
+      // being navigated *to*, so arriving at a broken story hid its error (#597).
+      if (render.wasClean()) errorStore.clear(props.story.id, props.variant.id)
       setPreviewReady()
       break
     case SANDBOX_ERROR:
       if (!fromCurrentOccupant(event.data)) break
+      render.threw()
       errorStore.report({
         message: event.data.message,
         stack: event.data.stack,
@@ -207,6 +211,7 @@ let stopTrackKeyboard: (() => void) | undefined
 let unmounted = false
 
 function reload(url: string) {
+  render.begin()
   retargets = 0
   retargeting.value = false
   clearTimeout(retargetTimer)
@@ -223,6 +228,7 @@ function reload(url: string) {
 }
 
 watch(sandboxUrl, (url) => {
+  render.begin()
   // A new occupant has agreed to nothing, so neither has this end. Kept as a
   // new bridge rather than a reset so there is one way to be in that state.
   bridge = createStateBridge(postState)
@@ -285,12 +291,12 @@ function previewStyle(isResponsiveEnabled: boolean, finalWidth: number | null, f
   const style: Record<string, string> = {}
 
   if (isResponsiveEnabled) {
-    if (finalWidth) style.width = `${finalWidth}px`
-    if (finalHeight) style.height = `${finalHeight}px`
+    if (finalWidth) style['width'] = `${finalWidth}px`
+    if (finalHeight) style['height'] = `${finalHeight}px`
   }
 
   if (props.autoHeight) {
-    style.height = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`
+    style['height'] = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`
   }
 
   return style

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,
@@ -43,7 +47,9 @@ watch(() => storyStore.currentVariant, (value) => {
 watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
   if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) {
     const variant = storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]
-    setVariant(variant.id)
+    if (variant) {
+      setVariant(variant.id)
+    }
   }
 }, {
   immediate: true,
@@ -61,7 +67,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/components/toolbar/ToolbarTitle.vue

@@ -4,8 +4,8 @@ import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  variant?: Variant
-  story?: Story
+  variant?: Variant | undefined
+  story?: Story | undefined
 }>()
 
 const icon = computed(() => props.variant?.icon ?? props.story?.icon ?? 'carbon:cube')

package/src/app/components/tree/StoryGroup.vue

@@ -63,8 +63,8 @@ function toggleOpen() {
           :depth="0"
         />
         <StoryListItem
-          v-else
-          :story="stories[(element as TreeLeaf).index]"
+          v-else-if="stories[(element as TreeLeaf).index]"
+          :story="stories[(element as TreeLeaf).index]!"
           :depth="0"
         />
       </template>

package/src/app/components/tree/StoryList.vue

@@ -27,8 +27,8 @@ defineProps<{
         :stories="stories"
       />
       <StoryListItem
-        v-else
-        :story="stories[(element as TreeLeaf).index]"
+        v-else-if="stories[(element as TreeLeaf).index]"
+        :story="stories[(element as TreeLeaf).index]!"
       />
     </template>
   </div>

package/src/app/components/tree/StoryListFolder.vue

@@ -72,8 +72,8 @@ const folderPadding = computed(() => {
           :depth="depth + 1"
         />
         <StoryListItem
-          v-else
-          :story="stories[(element as TreeLeaf).index]"
+          v-else-if="stories[(element as TreeLeaf).index]"
+          :story="stories[(element as TreeLeaf).index]!"
           :depth="depth + 1"
         />
       </template>

package/src/app/components/tree/StoryListItem.vue

@@ -25,7 +25,7 @@ const filePadding = computed(() => {
 })
 
 const route = useRoute()
-const isActive = computed(() => route.params.storyId === props.story.id)
+const isActive = computed(() => route.params['storyId'] === props.story.id)
 const el = ref<HTMLDivElement>()
 useScrollOnActive(isActive, el)
 </script>

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

@@ -22,8 +22,8 @@ const query = parseQuery(window.location.search)
 // What this realm serves. Set from the URL on boot, and again by a
 // SANDBOX_RETARGET from the host: a warm realm is handed the next story or
 // variant instead of being torn down for a new document (#240).
-const storyId = ref(typeof query.storyId === 'string' ? query.storyId : null)
-const variantId = ref(typeof query.variantId === 'string' ? query.variantId : null)
+const storyId = ref(typeof query['storyId'] === 'string' ? query['storyId'] : null)
+const variantId = ref(typeof query['variantId'] === 'string' ? query['variantId'] : null)
 
 // Kept in step so `logEvent` can name the occupant it is speaking for; it posts
 // from the story's own code and cannot see these refs.
@@ -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)) {
@@ -147,6 +147,12 @@ const app = createApp({
     let mounted = false
 
     window.addEventListener('message', (event) => {
+      // The sandbox end of the check the host makes in
+      // `StoryVariantSinglePreviewRemote`. `__sandbox.html` is a public URL in
+      // every published book, and a page that iframes it is its `parent`, so
+      // without this anyone embedding it could write story state, retarget it,
+      // or restyle it. Only the book drives its own sandbox (#379).
+      if (event.origin !== window.location.origin) return
       // console.log('[sandbox] received message', event.data)
       if (event.data?.type === STATE_SYNC) {
         if (!mounted || !variant.value) return

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)
     }
   })

package/src/app/stores/story.ts

@@ -9,9 +9,9 @@ export const useStoryStore = defineStore('story', () => {
     stories.value = value
   }
 
-  const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params.storyId))
+  const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params['storyId']))
 
-  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query.variantId))
+  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query['variantId']))
 
   const maps = computed(() => {
     const storyMap = new Map<string, Story>()

package/src/app/types.ts

@@ -33,10 +33,10 @@ export interface SearchResultBase {
   rank: number
   id: string
   title: string
-  path?: string[]
-  icon?: string
-  iconColor?: string
-  type?: SearchResultType
+  path?: string[] | undefined
+  icon?: string | undefined
+  iconColor?: string | undefined
+  type?: SearchResultType | undefined
 }
 
 export type SearchResult = SearchResultBase & ({
@@ -54,14 +54,14 @@ export interface PreviewSettings {
    *
    * @default 720
    */
-  responsiveWidth: number
+  responsiveWidth: number | null
   /**
    * Height of the responsive preview, in pixels. `null` sizes it to the
    * available space.
    *
    * @default null
    */
-  responsiveHeight: number
+  responsiveHeight: number | null
   /**
    * Swap `responsiveWidth` and `responsiveHeight`, to preview a size in
    * landscape without editing both values.

package/src/app/util/commands.ts

@@ -1,29 +1,39 @@
-import type { ClientCommand, ClientCommandContext } from '@poveste/shared'
+import type { ClientCommand, ClientCommandContext, Story } from '@poveste/shared'
 import { router } from '../router.js'
 import { useStoryStore } from '../stores/story.js'
 import { openInEditor } from './open-in-editor.js'
 
+/**
+ * The path "Open file in editor" should open, or undefined when there is none.
+ *
+ * `Story.file` is optional, and `let file: string` used to be assigned
+ * `story.file?.filePath` in both branches — so a story without a file produced
+ * `file: undefined`, and `openInEditor` sent
+ * `__open-in-editor?file=undefined` to the dev server: a request to open a file
+ * literally named "undefined", with nothing said in the UI (#667).
+ *
+ * A docs-only story prefers its markdown, falling back to the component file
+ * when the story has both.
+ */
+function editableFilePath(story: Story | undefined): string | undefined {
+  const file = story?.file
+  if (!file) return undefined
+  return story?.docsOnly ? file.docsFilePath ?? file.filePath : file.filePath
+}
+
 export const builtinCommands: ClientCommand[] = [
   {
     id: 'builtin:open-in-editor',
     label: 'Open file in editor',
     icon: 'carbon:script-reference',
-    showIf: ({ route }) => route.name === 'story' && !!useStoryStore().currentStory,
-    getParams: () => {
-      const story = useStoryStore().currentStory
-      let file: string
-      if (story.docsOnly) {
-        file = story.file?.docsFilePath ?? story.file?.filePath
-      }
-      else {
-        file = story.file?.filePath
-      }
-      return {
-        file,
-      }
-    },
+    // On the path rather than on the story: a story with no file has nothing
+    // to open, and offering the command was how the bad request got sent.
+    showIf: ({ route }) => route.name === 'story' && !!editableFilePath(useStoryStore().currentStory),
+    getParams: () => ({
+      file: editableFilePath(useStoryStore().currentStory),
+    }),
     clientAction: ({ file }) => {
-      openInEditor(file)
+      if (file) openInEditor(file)
     },
   },
   {
@@ -31,7 +41,7 @@ export const builtinCommands: ClientCommand[] = [
     label: 'Open Poveste Documentation',
     icon: 'carbon:help',
     clientAction: () => {
-      window.open('https://poveste.dev/guide/getting-started.html', '_blank')
+      window.open('https://poveste.dev/guide/getting-started', '_blank')
     },
   },
 ]

package/src/app/util/dark.ts

@@ -4,7 +4,7 @@ import { povesteConfig } from './config.js'
 
 export const isDark = useDark({
   valueDark: 'ptw-dark',
-  initialValue: povesteConfig.theme.defaultColorScheme,
+  ...povesteConfig.theme.defaultColorScheme ? { initialValue: povesteConfig.theme.defaultColorScheme } : {},
   storageKey: 'poveste-color-scheme',
   storage: povesteConfig.theme.storeColorScheme ? localStorage : sessionStorage,
 })

package/src/app/util/docs.ts

@@ -13,7 +13,8 @@ export async function getSourceCode(story: Story, variant: Variant) {
     }
   }
   else {
-    const clientPlugin = clientSupportPlugins[story.file?.supportPluginId]
+    const supportPluginId = story.file?.supportPluginId
+    const clientPlugin = supportPluginId ? clientSupportPlugins[supportPluginId] : undefined
     if (clientPlugin) {
       const pluginModule = await clientPlugin()
       return pluginModule.generateSourceCode(variant)

package/src/app/util/env.ts

@@ -2,5 +2,4 @@
 // `navigator.userAgentData` is Chromium-only, so reading it here would simply
 // stop detecting macOS in Safari and Firefox — the two places where getting the
 // ⌘ shortcuts right matters most.
-// eslint-disable-next-line ts/no-deprecated
 export const isMac = navigator.platform.toLowerCase().includes('mac')

package/src/app/util/events.ts

@@ -1,7 +1,7 @@
 import { EVENT_SEND } from './const'
 import { occupant } from './occupant'
 
-export async function logEvent(name: string, argument) {
+export async function logEvent(name: string, argument: unknown) {
   const event = {
     name,
     argument: JSON.parse(stringifyEvent(argument)), // Needed for HTMLEvent that can't be cloned
@@ -20,10 +20,11 @@ export async function logEvent(name: string, argument) {
   }
 }
 
-function stringifyEvent(e) {
-  const obj = {}
-  for (const k in e) {
-    obj[k] = e[k]
+function stringifyEvent(e: unknown) {
+  const obj: Record<string, unknown> = {}
+  // `for...in` rather than `Object.entries`: an event's fields are inherited.
+  for (const k in e as object) {
+    obj[k] = Reflect.get(e as object, k)
   }
   return JSON.stringify(obj, (k, v) => {
     if (v instanceof Node) return 'Node'

package/src/app/util/grid-slots.ts

@@ -26,7 +26,7 @@ export function assignSlots(slots: Slot[], storyId: string, visible: Variant[]):
   const position = new Map(visible.map((v, i) => [v.id, i]))
   const next: Slot[] = slots.map(slot => (
     slot.storyId === storyId && position.has(slot.variant.id)
-      ? { ...slot, visible: true, order: position.get(slot.variant.id) }
+      ? { ...slot, visible: true, order: position.get(slot.variant.id) ?? 0 }
       : { ...slot, visible: false, order: 0 }
   ))
   const placed = new Set(next.filter(s => s.visible).map(s => s.variant.id))
@@ -67,6 +67,6 @@ export function trimSlots(slots: Slot[]): Slot[] {
   }
 
   let end = next.length
-  while (end > 0 && !next[end - 1].visible) end--
+  while (end > 0 && !next[end - 1]?.visible) end--
   return end === next.length ? next : next.slice(0, end)
 }