@poveste/app 0.13.1 → 0.15.0

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,12 +53,17 @@ function resetState() {
   applyState(props.variant.state, clone(defaultState))
 }
 
-function applyPreset(id) {
+function applyPreset(id: string) {
   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)))
+    }
   }
 }
 
@@ -70,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)
 
@@ -80,10 +86,24 @@ 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 { polite } = useLiveAnnouncer()
 const savedTimeout = useTimeoutFn(() => {
   savedNotif.value = false
 }, 1000)
@@ -92,12 +112,14 @@ 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()
+  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?')) {
@@ -117,14 +139,25 @@ 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() {
+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>
@@ -133,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="presetStates.get(selectedOption).label"
-            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/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

@@ -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':
@@ -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
@@ -55,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
@@ -118,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
   }
 }
@@ -153,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')"
         >
@@ -175,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')"
         >
@@ -220,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

@@ -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,14 +129,18 @@ 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
       }
       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))
         rank++
         break
@@ -158,7 +164,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 +196,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 +220,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,
   }
@@ -259,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/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
       }
     }
@@ -76,8 +101,10 @@ function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, ma
   function onTouchStart(event: TouchEvent) {
     event.preventDefault()
     event.stopPropagation()
-    const start = axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY
-    const startValue = value.value
+    const [touch] = event.touches
+    if (!touch) return
+    const start = axis === 'x' ? touch.clientX : touch.clientY
+    const startValue = startFrom()
     resizing.value = true
 
     const removeListeners = [
@@ -87,7 +114,9 @@ function useDragger(el: Ref<HTMLDivElement>, value: Ref<number>, min: number, ma
     ]
 
     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))
     }