@poveste/app 0.14.0 → 0.15.0

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

@@ -176,7 +176,7 @@ let startPosition = 0
 let startSplit = 0
 const el = ref<HTMLElement>()
 
-function dragStart(e) {
+function dragStart(e: MouseEvent) {
   dragging.value = true
   startPosition = props.orientation === 'landscape' ? e.pageX : e.pageY
   startSplit = boundSplit.value
@@ -184,7 +184,7 @@ function dragStart(e) {
   window.addEventListener('mouseup', dragEnd)
 }
 
-function dragMove(e) {
+function dragMove(e: MouseEvent) {
   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.

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

@@ -77,7 +77,7 @@ const {
 } = useSelection(formattedOptions)
 
 function selectIndex(index: number) {
-  const result = formattedOptions.value[index].value
+  const result = formattedOptions.value[index]?.value
   if (result) {
     model.value = result
   }

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

@@ -50,24 +50,35 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
 </script>
 
 <template>
-  <component
-    :is="comp"
+  <!-- The remove action is beside the control, not in its actions slot. Inside
+       the control's <label> or checkbox, a label forwarded clicks to it, its
+       name joined the control's name, and Space on it toggled the checkbox (#827). -->
+  <div
     v-if="comp"
-    v-model="model"
-    :placeholder="model === undefined ? definition?.default : null"
-    class="poveste-controls-component-prop-item"
-    :title="`${definition.name}${canReset ? ' *' : ''}`"
+    class="flex items-end hover:bg-primary-100 dark:hover:bg-primary-800"
   >
-    <template #actions>
+    <component
+      :is="comp"
+      v-model="model"
+      :placeholder="model === undefined ? definition?.default : null"
+      class="poveste-controls-component-prop-item grow min-w-0"
+      :title="`${definition.name}${canReset ? ' *' : ''}`"
+    />
+    <button
+      v-tooltip="'Remove override'"
+      type="button"
+      :aria-label="`Remove override of ${definition.name}`"
+      :disabled="!canReset"
+      class="flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+      :class="[
+        canReset ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+      ]"
+      @click="reset()"
+    >
       <Icon
-        v-tooltip="'Remove override'"
         icon="carbon:erase"
-        class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-        :class="[
-          canReset ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
-        ]"
-        @click.stop="reset()"
+        class="w-4 h-4"
       />
-    </template>
-  </component>
+    </button>
+  </div>
 </template>

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

@@ -25,13 +25,13 @@ const hasEvents = computed(() => eventsStore.events.length)
   <BaseOverflowMenu class="poveste-pane-tabs h-10 flex-none border-b border-gray-100 dark:border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-      :matched="!$route.query.tab"
+      :matched="!$route.query['tab']"
     >
       Controls
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-      :matched="$route.query.tab === 'docs'"
+      :matched="$route.query['tab'] === 'docs'"
       :class="{
         'opacity-70': !renderedDoc,
       }"
@@ -40,7 +40,7 @@ const hasEvents = computed(() => eventsStore.events.length)
     </BaseTab>
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-      :matched="$route.query.tab === 'events'"
+      :matched="$route.query['tab'] === 'events'"
       :class="{
         'opacity-70': !hasEvents,
       }"
@@ -54,13 +54,13 @@ const hasEvents = computed(() => eventsStore.events.length)
     <template #overflow>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: '' } }"
-        :matched="!$route.query.tab"
+        :matched="!$route.query['tab']"
       >
         Controls
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
-        :matched="$route.query.tab === 'docs'"
+        :matched="$route.query['tab'] === 'docs'"
         :class="{
           'opacity-70': !renderedDoc,
         }"
@@ -69,7 +69,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       </BaseOverflowTab>
       <BaseOverflowTab
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
-        :matched="$route.query.tab === 'events'"
+        :matched="$route.query['tab'] === 'events'"
         :class="{
           'opacity-70': !hasEvents,
         }"

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

@@ -2,7 +2,7 @@
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { applyState, clone } from '@poveste/shared'
-import { onClickOutside, useStorage, useTimeoutFn } from '@vueuse/core'
+import { onClickOutside, useLiveAnnouncer, useStorage, useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { toPresetState, toRawDeep } from '../../util/state'
 import BaseSelect from '../base/BaseSelect.vue'
@@ -41,7 +41,7 @@ const presetStates = useStorage<Map<string, { state: Record<string, unknown>, la
 )
 
 const presetsOptions = computed(() => {
-  const options = { [DEFAULT_ID]: 'Initial state' }
+  const options: Record<string, string> = { [DEFAULT_ID]: 'Initial state' }
   presetStates.value.forEach((value, key) => {
     options[key] = value.label
   })
@@ -53,7 +53,7 @@ function resetState() {
   applyState(props.variant.state, clone(defaultState))
 }
 
-function applyPreset(id) {
+function applyPreset(id: string) {
   if (id === DEFAULT_ID) {
     resetState()
   }
@@ -75,6 +75,7 @@ onMounted(() => {
 
 const input = ref<HTMLInputElement>()
 const select = ref<HTMLInputElement>()
+const picker = ref<InstanceType<typeof BaseSelect>>()
 const canEdit = computed(() => selectedOption.value !== DEFAULT_ID)
 const isEditing = ref(false)
 
@@ -102,6 +103,7 @@ const editingLabel = computed({
 })
 
 const savedNotif = ref(false)
+const { polite } = useLiveAnnouncer()
 const savedTimeout = useTimeoutFn(() => {
   savedNotif.value = false
 }, 1000)
@@ -114,9 +116,10 @@ async function savePreset() {
   preset.state = toPresetState(props.variant.state, omitKeys)
   savedNotif.value = true
   savedTimeout.start()
+  polite('Preset saved')
 }
 
-function deletePreset(id) {
+function deletePreset(id: string) {
   // @TODO custom confirm modal UI
   // eslint-disable-next-line no-alert
   if (!confirm('Are you sure you want to delete this preset?')) {
@@ -141,11 +144,20 @@ async function startEditing() {
   input.value?.select()
 }
 
-function stopEditing() {
+async function stopEditing(refocus = false) {
+  if (!isEditing.value) {
+    return
+  }
   isEditing.value = false
+  // Finishing a rename from the keyboard unmounts the field that had focus, so
+  // hand it to the picker, which now shows the new name.
+  if (refocus) {
+    await nextTick()
+    picker.value?.focus()
+  }
 }
 
-onClickOutside(select, stopEditing)
+onClickOutside(select, () => stopEditing())
 </script>
 
 <template>
@@ -154,79 +166,103 @@ onClickOutside(select, stopEditing)
       ref="select"
       class="flex-1 min-w-0"
     >
+      <!-- Swapped for the picker rather than put inside it: a text field inside a
+           combobox is a control nested in a control (#828). -->
+      <input
+        v-if="isEditing"
+        ref="input"
+        v-model="editingLabel"
+        type="text"
+        aria-label="Preset name"
+        class="text-inherit bg-transparent w-full px-2 h-[27px] -my-1 border border-solid border-primary-500 rounded-sm outline-none"
+        @keydown.enter="stopEditing(true)"
+        @keydown.escape="stopEditing(true)"
+      >
       <BaseSelect
+        v-else
+        ref="picker"
         v-model="selectedOption"
+        label="Preset"
         :options="presetsOptions"
         @dblclick="startEditing()"
-        @keydown.enter="stopEditing()"
-        @keydown.escape="stopEditing()"
         @select="id => applyPreset(id)"
-      >
-        <template #default="{ label }">
-          <input
-            v-if="isEditing"
-            ref="input"
-            v-model="editingLabel"
-            type="text"
-            class="text-inherit bg-transparent w-full h-full outline-none"
-            @click.stop.prevent
-          >
-
-          <div
-            v-else
-            class="flex items-center gap-2"
-          >
-            <span class="flex-1 truncate">
-              {{ label }}
-            </span>
-            <Icon
-              v-if="canEdit"
-              v-tooltip="'Rename this preset'"
-              icon="carbon:edit"
-              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-              @click.stop="startEditing()"
-            />
-          </div>
-        </template>
-
-        <template #option="{ label, value }">
-          <div class="flex gap-2 items-center">
-            <span
-              class="flex-1 truncate"
-            >{{ label }}</span>
-            <Icon
-              v-if="value !== DEFAULT_ID"
-              v-tooltip="'Delete this preset'"
-              icon="carbon:trash-can"
-              class="flex-none cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
-              @click.stop="deletePreset(value)"
-            />
-          </div>
-        </template>
-      </BaseSelect>
+      />
     </div>
-    <Icon
+    <button
+      v-tooltip="canEdit ? 'Rename this preset' : null"
+      type="button"
+      data-testid="preset-rename"
+      aria-label="Rename preset"
+      :disabled="!canEdit"
+      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+      :class="[
+        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+      ]"
+      @click="startEditing()"
+    >
+      <Icon
+        icon="carbon:edit"
+        class="w-4 h-4"
+      />
+    </button>
+    <button
+      v-tooltip="canEdit ? 'Delete this preset' : null"
+      type="button"
+      data-testid="preset-delete"
+      aria-label="Delete preset"
+      :disabled="!canEdit"
+      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+      :class="[
+        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+      ]"
+      @click="deletePreset(selectedOption)"
+    >
+      <Icon
+        icon="carbon:trash-can"
+        class="w-4 h-4"
+      />
+    </button>
+    <button
       v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
+      type="button"
       data-testid="preset-save"
-      :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
+      aria-label="Save to preset"
+      :disabled="!canEdit"
+      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
       :class="[
-        canEdit ? 'opacity-50 hover:opacity-100' : 'opacity-25 pointer-events-none',
+        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
       ]"
       @click="savePreset()"
-    />
-    <Icon
+    >
+      <Icon
+        :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
+        class="w-4 h-4"
+      />
+    </button>
+    <button
       v-tooltip="'Create new preset'"
+      type="button"
       data-testid="preset-create"
-      icon="carbon:add-alt"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
+      aria-label="Create new preset"
+      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
       @click="createPreset()"
-    />
-    <Icon
+    >
+      <Icon
+        icon="carbon:add-alt"
+        class="w-4 h-4"
+      />
+    </button>
+    <button
       v-tooltip="'Reset to initial state'"
-      icon="carbon:reset"
-      class="cursor-pointer w-4 h-4 hover:text-primary-500 opacity-50 hover:opacity-100 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100"
+      type="button"
+      aria-label="Reset to initial state"
+      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
       @click="resetState()"
-    />
+    >
+      <Icon
+        icon="carbon:reset"
+        class="w-4 h-4"
+      />
+    </button>
   </div>
 </template>

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

@@ -22,7 +22,7 @@ const innerOrientation = computed(() =>
 const route = useRoute()
 
 const panelContentComponent = computed(() => {
-  switch (route.query.tab) {
+  switch (route.query['tab']) {
     case 'docs':
       return StoryDocs
     case 'events':

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

@@ -58,7 +58,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   }
   catch (e) {
     console.error(e)
-    error.value = e.message
+    error.value = e instanceof Error ? e.message : String(e)
   }
 
   // Auto-switch
@@ -121,8 +121,8 @@ watch(() => props.variant, () => {
 
 const scroller = ref<HTMLElement>()
 
-function onScroll(event) {
-  if (sourceHtml.value) {
+function onScroll(event: Event) {
+  if (sourceHtml.value && event.target instanceof HTMLElement) {
     lastScroll = event.target.scrollTop
   }
 }
@@ -156,7 +156,7 @@ watch(sourceHtml, async () => {
           class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
             displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
-            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
+            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'dynamic' && 'opacity-50',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
         >
@@ -178,7 +178,7 @@ watch(sourceHtml, async () => {
           class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
             displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 dark:text-primary-400',
-            staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
+            staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'static' && 'opacity-50',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"
         >
@@ -223,6 +223,7 @@ watch(sourceHtml, async () => {
       ref="scroller"
       class="__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0"
       :value="displayedSourceCode"
+      aria-label="Source code"
       readonly
       data-testid="story-source-code"
       @scroll="onScroll"

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

@@ -8,9 +8,10 @@ defineProps<{
   selected: boolean
 }>()
 
-const defaultIcons = {
+const defaultIcons: Record<SearchResult['kind'], string> = {
   story: 'carbon:cube',
   variant: 'carbon:cube',
+  command: 'carbon:chevron-right',
 }
 
 const kindLabels = {

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

@@ -138,8 +138,7 @@ watch(rateLimitedSearch, async (value) => {
         break
       }
       case 'variant': {
-        const [storyId] = idMapData.id.split(':')
-        const story = storyStore.getStoryById(storyId)
+        const story = storyStore.getStoryById(idMapData.id.replace(/:.*$/s, ''))
         const variant = storyStore.getVariantById(idMapData.id)
         if (!story || !variant) continue
         list.push(variantResultFactory(story, variant, rank))
@@ -268,7 +267,7 @@ const results = computed<SearchResult[]>(() => {
     ...commandResults.value,
     ...titleResults.value,
   ]
-  const seen = {}
+  const seen: Record<string, boolean> = {}
   for (const r of titleResults.value) {
     seen[r.id] = true
   }

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

@@ -101,7 +101,9 @@ function useDragger(el: Ref<HTMLDivElement | undefined>, value: Ref<number | nul
   function onTouchStart(event: TouchEvent) {
     event.preventDefault()
     event.stopPropagation()
-    const start = axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY
+    const [touch] = event.touches
+    if (!touch) return
+    const start = axis === 'x' ? touch.clientX : touch.clientY
     const startValue = startFrom()
     resizing.value = true
 
@@ -112,7 +114,9 @@ function useDragger(el: Ref<HTMLDivElement | undefined>, value: Ref<number | nul
     ]
 
     function onTouchMove(event: TouchEvent) {
-      const delta = (axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY) - start
+      const [touch] = event.touches
+      if (!touch) return
+      const delta = (axis === 'x' ? touch.clientX : touch.clientY) - start
       value.value = Math.max(min, Math.min(max, startValue + delta))
     }
 

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

@@ -47,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,

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/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.
@@ -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