@poveste/app 0.13.0 → 0.14.0

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

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     isActive: {
       type: Boolean,
       default: undefined,
@@ -31,6 +41,7 @@ export default defineComponent({
 <template>
   <RouterLink
     v-slot="{ isActive: linkIsActive, href, navigate }"
+    :to="to"
     class="poveste-base-list-item-link"
     v-bind="$attrs"
     custom
@@ -42,7 +53,7 @@ export default defineComponent({
       :class="[
         $attrs.class,
         (isActive != null ? isActive : linkIsActive)
-          ? 'active bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
+          ? 'active bg-primary-700 hover:bg-primary-800 dark:bg-primary-500 dark:hover:bg-primary-600 text-white dark:text-black'
           : 'hover:bg-primary-100 dark:hover:bg-primary-900',
       ]"
       @click="handleNavigate($event, navigate)"

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

@@ -49,15 +49,21 @@ const ChildWrapper = {
     const state = reactive({ width: 0, index: props.index })
 
     useResizeObserver(el, (entries) => {
+      // The observer only fires for an element it is observing, so this is
+      // never null here — but `children` is keyed by the element, and an
+      // undefined key would silently make a second entry for the same child.
+      const element = el.value
+      if (!element) return
       const width = entries[0].contentRect.width
-      if (!children.value.has(el.value)) {
-        children.value.set(el.value, state)
+      if (!children.value.has(element)) {
+        children.value.set(element, state)
       }
       state.width = width
     })
 
     onBeforeUnmount(() => {
-      children.value.delete(el.value)
+      const element = el.value
+      if (element) children.value.delete(element)
     })
 
     const visible = computed(() => visibleChildrenCount.value > state.index)

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

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     exact: {
       type: Boolean,
       default: false,
@@ -21,6 +31,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    :to="to"
     class="poveste-base-overflow-tab"
     v-bind="$attrs"
     custom
@@ -30,7 +41,7 @@ export default defineComponent({
       :href="href"
       class="px-4 h-10 min-w-[150px] inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-700 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >

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/base/BaseTab.vue

@@ -1,10 +1,20 @@
 <script lang="ts">
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // Declared rather than passed through `$attrs`: with
+    // `inheritAttrs: false` the checker cannot see it there, and
+    // router-link requires it.
+    to: {
+      type: [String, Object] as PropType<RouteLocationRaw>,
+      required: true,
+    },
+
     exact: {
       type: Boolean,
       default: false,
@@ -21,6 +31,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
+    :to="to"
     class="poveste-base-tab"
     v-bind="$attrs"
     custom
@@ -30,7 +41,7 @@ export default defineComponent({
       :href="href"
       class="px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative text-gray-900 dark:text-gray-100"
       :class="{
-        'text-primary-500 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'text-primary-700 dark:text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { ClientCommand } from '@poveste/shared'
+import type { Component } from 'vue'
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { executeCommand, getCommandContext } from '../../util/commands.js'
 import BaseButton from '../base/BaseButton.vue'
@@ -23,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)
@@ -67,8 +68,15 @@ onMounted(() => {
       {{ command.label }}
     </div>
 
+    <!--
+      `promptTypes[prompt.type]` resolves to the component whose `prompt` prop
+      is that member of the union, but nothing states the correlation and the
+      checker cannot infer it. Splitting this into `v-if` branches per type is
+      what makes it checkable; that is a refactor of untested UI, so it waits
+      for coverage rather than riding along with the type gate (#441).
+    -->
     <component
-      :is="promptTypes[prompt.type]"
+      :is="promptTypes[prompt.type] as Component"
       v-for="(prompt, index) of command.prompts"
       :key="prompt.field"
       ref="promptComps"

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

@@ -33,7 +33,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
       :matched="$route.query.tab === 'docs'"
       :class="{
-        'opacity-50': !renderedDoc,
+        'opacity-70': !renderedDoc,
       }"
     >
       Docs
@@ -42,7 +42,7 @@ const hasEvents = computed(() => eventsStore.events.length)
       :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
       :matched="$route.query.tab === 'events'"
       :class="{
-        'opacity-50': !hasEvents,
+        'opacity-70': !hasEvents,
       }"
     >
       Events
@@ -62,7 +62,7 @@ const hasEvents = computed(() => eventsStore.events.length)
         :to="{ ...$route, query: { ...$route.query, tab: 'docs' } }"
         :matched="$route.query.tab === 'docs'"
         :class="{
-          'opacity-50': !renderedDoc,
+          'opacity-70': !renderedDoc,
         }"
       >
         Docs
@@ -71,7 +71,7 @@ const hasEvents = computed(() => eventsStore.events.length)
         :to="{ ...$route, query: { ...$route.query, tab: 'events' } }"
         :matched="$route.query.tab === 'events'"
         :class="{
-          'opacity-50': !hasEvents,
+          'opacity-70': !hasEvents,
         }"
       >
         Events

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Highlighter } from 'shiki'
+import type { HighlighterCore } from 'shiki/core'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
@@ -15,20 +15,23 @@ 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)
   }
 })
 
-const highlighter = shallowRef<Highlighter>()
+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
@@ -103,7 +106,7 @@ onMounted(async () => {
 const sourceHtml = computed(() => displayedSourceCode.value
   ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
       lang: 'html',
-      theme: isDark.value ? 'github-dark' : 'github-light',
+      theme: isDark.value ? 'github-dark' : 'github-light-high-contrast',
     })
   : '')
 
@@ -152,7 +155,7 @@ watch(sourceHtml, async () => {
           v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
           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-600 dark:text-primary-400',
+            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',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
@@ -174,7 +177,7 @@ watch(sourceHtml, async () => {
           v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
           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-600 dark:text-primary-400',
+            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',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"

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 = [