diff --git a/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue b/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
index 9162a7c..931416b 100644
--- a/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
+++ b/lib/components/ActiveTextTruncate/ActiveTextTruncate.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useResizeObserver } from '@/composables/useResizeObserver'
 import { RequestAnimationFrameWrapper } from '@/utils/animation'
 
@@ -150,6 +150,24 @@ function resetTextLivePosition(): void {
    */
   emit('cancel')
 }
+
+onUnmounted(() => {
+  // Stop the Request Animation Frame loop so it doesn't reschedule forever
+  textLivePositionRequestAnimationFrame.value.stop()
+  // Remove the transition listeners added on the text element
+  textElement.value?.removeEventListener(
+    'transitionstart',
+    startTrackingTextLivePosition
+  )
+  textElement.value?.removeEventListener(
+    'transitionend',
+    endTrackingTextLivePosition
+  )
+  textElement.value?.removeEventListener(
+    'transitioncancel',
+    resetTextLivePosition
+  )
+})
 </script>
 
 <template>
diff --git a/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue b/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
index 7b8db2c..c585e6d 100644
--- a/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
+++ b/lib/components/Form/FormAdvancedLink/FormAdvancedLink.vue
@@ -5,7 +5,7 @@ import { uniqueId } from 'lodash'
 import { ButtonVariant } from 'bootstrap-vue-next'
 
 import AdvancedLinkFormTab from './FormAdvancedLinkTab.vue'
-import { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 
 /**
  * A form with tabs to offer several copy formats to users.
@@ -31,7 +31,7 @@ export interface FormAdvancedLinkProps {
   /**
    * The forms to display
    */
-  forms?: Tab[]
+  forms?: AdvancedLinkTab[]
   /**
    * Activate the card integration for the tabs
    */
@@ -65,7 +65,7 @@ export interface FormAdvancedLinkProps {
 const props = withDefaults(defineProps<FormAdvancedLinkProps>(), {
   link: undefined,
   title: 'Link',
-  forms: () => ['raw', 'markdown', 'rich', 'html'],
+  forms: () => [AdvancedLinkTab.raw, AdvancedLinkTab.markdown, AdvancedLinkTab.rich, AdvancedLinkTab.html],
   card: false,
   pills: false,
   small: false,
@@ -86,7 +86,7 @@ const formClasses = computed(() => {
 })
 
 // default tabs order
-const defaultTabs: Tab[] = ['raw', 'rich', 'markdown', 'html']
+const defaultTabs: AdvancedLinkTab[] = [AdvancedLinkTab.raw, AdvancedLinkTab.rich, AdvancedLinkTab.markdown, AdvancedLinkTab.html]
 
 const tabs = computed(() => {
   return defaultTabs
diff --git a/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue b/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
index 42fed83..c1501f0 100644
--- a/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
+++ b/lib/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue
@@ -2,7 +2,6 @@
 import { BaseButtonVariant } from 'bootstrap-vue-next'
 import HapticCopy from '@/components/HapticCopy/HapticCopy.vue'
 import { computed, nextTick, type ShallowRef, useTemplateRef } from 'vue'
-import { uniqueId } from 'lodash'
 
 import { AdvancedLinkTab } from '@/enums'
 
@@ -28,8 +27,7 @@ interface HTMLElementSupportingCreateRange extends HTMLElement {
 const props = withDefaults(defineProps<AdvancedLinkFormTabProps>(), {
   type: AdvancedLinkTab.raw,
   compact: false,
-  variant: 'primary',
-  id: uniqueId('advanced-link-form-tab')
+  variant: 'primary'
 })
 
 const size = computed(() => (props.compact ? 'sm' : 'md'))
diff --git a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
index 58f143f..5674225 100644
--- a/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
+++ b/lib/components/Form/FormControl/FormControlSelectableDropdown.vue
@@ -5,6 +5,7 @@ import findIndex from 'lodash/findIndex'
 import filter from 'lodash/filter'
 import identity from 'lodash/identity'
 import isEqual from 'lodash/isEqual'
+import omit from 'lodash/omit'
 // @ts-expect-error no typings available
 import { RecycleScroller } from 'vue-virtual-scroller'
 
@@ -135,9 +136,20 @@ const keyField = computed(() => {
 })
 
 const firstActiveItemIndex = computed(() => {
-  return activeItems.value.length
-    ? items_.value.indexOf(activeItems.value[0])
-    : -1
+  if (!activeItems.value.length) {
+    return -1
+  }
+  const activeItem = activeItems.value[0]
+  if (typeof activeItem === 'string') {
+    return items_.value.indexOf(activeItem)
+  }
+  // activeItems may hold either a raw modelValue object (no recycle_scroller_id)
+  // or an items_ entry from a click/range-select (which carries it), so strip
+  // the injected key from both sides before comparing.
+  const target = omit(activeItem, 'recycle_scroller_id')
+  return items_.value.findIndex(it =>
+    isEqual(omit(it, 'recycle_scroller_id'), target)
+  )
 })
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
diff --git a/lib/components/Form/FormDonate.vue b/lib/components/Form/FormDonate.vue
index 3f0e06f..947612e 100644
--- a/lib/components/Form/FormDonate.vue
+++ b/lib/components/Form/FormDonate.vue
@@ -120,11 +120,8 @@ watch(installmentPeriod, () => {
 
 watch(
   () => amount.value,
-  (v: number) => {
+  () => {
     level.value = changeThe.value
-
-    // Set manual amount
-    return (amount.value = v)
   }
 )
 </script>
diff --git a/lib/components/Form/FormEmbed.vue b/lib/components/Form/FormEmbed.vue
index 0325d42..020ffcf 100644
--- a/lib/components/Form/FormEmbed.vue
+++ b/lib/components/Form/FormEmbed.vue
@@ -65,8 +65,8 @@ const currentUrl = computed(() => {
   return props.url || window?.location?.href
 })
 
-function iframeCodeFor(_url = currentUrl, width: string, height: string) {
-  const src = IframeResizer.deletePymParams(props.url)
+function iframeCodeFor(url = currentUrl, width: string, height: string) {
+  const src = IframeResizer.deletePymParams(url.value)
   return `<iframe width="${width}" height="${height}" src="${src}" frameborder="0" allowfullscreen></iframe>`
 }
 
diff --git a/lib/components/HapticCopy/HapticCopy.vue b/lib/components/HapticCopy/HapticCopy.vue
index e0b6138..8e8dce2 100644
--- a/lib/components/HapticCopy/HapticCopy.vue
+++ b/lib/components/HapticCopy/HapticCopy.vue
@@ -147,6 +147,7 @@ async function openTooltip(msg = 'haptic-copy.tooltip.succeed') {
 }
 
 async function closeTooltip() {
+  clearTimeout(tooltipTimeout.value)
   showClipboardTooltip.value = false
   tooltipTimeout.value = undefined
   emit('hideClipboardTooltip')
diff --git a/lib/components/Pagination/PaginationTiny.vue b/lib/components/Pagination/PaginationTiny.vue
index f078db9..50f366e 100644
--- a/lib/components/Pagination/PaginationTiny.vue
+++ b/lib/components/Pagination/PaginationTiny.vue
@@ -155,6 +155,7 @@
 </template>
 
 <script lang="ts" setup>
+import clamp from 'lodash/clamp'
 import { BButton, BFormInput } from 'bootstrap-vue-next'
 import { computed, ref, watch, type Component } from 'vue'
 import { directive as vInputAutowidth } from 'vue-input-autowidth'
@@ -376,14 +377,14 @@ const title = computed(() => {
 function applyPageForm(): void {
   const { value } = currentPageInput
   if (!isNaN(value as number)) {
-    modelValue.value = +value
+    modelValue.value = clamp(Math.floor(+value), 1, numberOfPages.value)
   }
 }
 
 function applyRowForm(): void {
   const { value } = currentRowInput
   if (!isNaN(value as number)) {
-    currentPageInput.value = Math.floor(+value / +props.perPage) + 1
+    currentPageInput.value = clamp(Math.floor(+value / +props.perPage) + 1, 1, numberOfPages.value)
     currentRowInput.value = +props.perPage * (+currentPageInput.value - 1) + 1
     modelValue.value = +currentPageInput.value
   }
diff --git a/lib/components/ResponsiveIframe/ResponsiveIframe.vue b/lib/components/ResponsiveIframe/ResponsiveIframe.vue
index f0f275b..e095be3 100644
--- a/lib/components/ResponsiveIframe/ResponsiveIframe.vue
+++ b/lib/components/ResponsiveIframe/ResponsiveIframe.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, getCurrentInstance } from 'vue'
+import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import type { Parent } from 'pym.js'
 
 import { injectAssets } from '@/utils/assets'
@@ -41,6 +41,10 @@ onMounted(async (): Promise<void> => {
     props.options ?? {}
   )
 })
+
+onUnmounted(() => {
+  pymParent.value?.remove?.()
+})
 </script>
 
 <template>
diff --git a/lib/components/SharingOptions/SharingOptions.vue b/lib/components/SharingOptions/SharingOptions.vue
index 96a814a..6dbc4d7 100644
--- a/lib/components/SharingOptions/SharingOptions.vue
+++ b/lib/components/SharingOptions/SharingOptions.vue
@@ -91,7 +91,7 @@ const metaValues = computed((): MetaValuesMap => {
     title: defaultValueFor('sharing-options.title'),
     description: defaultValueFor(
       'sharing-options.description',
-      'meta[name="description]'
+      'meta[name="description"]'
     ),
     facebook_title: defaultValueFor(
       'sharing-options.facebook_title',
@@ -109,7 +109,7 @@ const metaValues = computed((): MetaValuesMap => {
 })
 
 function valuesFor(network: string): Record<string, string> {
-  const values = Object.assign(metaValues.value, props.values)
+  const values = Object.assign({}, metaValues.value, props.values)
   return reduce(
     props.valuesKeys,
     (res: Record<string, string>, key) => {
diff --git a/lib/components/SharingOptions/SharingOptionsLink.vue b/lib/components/SharingOptions/SharingOptionsLink.vue
index f66fcb8..937c3af 100644
--- a/lib/components/SharingOptions/SharingOptionsLink.vue
+++ b/lib/components/SharingOptions/SharingOptionsLink.vue
@@ -72,7 +72,7 @@ export const networks: SharingPlatforms = {
 import querystring from 'querystring-es3'
 import reduce from 'lodash/reduce'
 import get from 'lodash/get'
-import { computed, reactive } from 'vue'
+import { computed, onUnmounted, reactive } from 'vue'
 
 import AppIcon from '@/components/App/AppIcon.vue'
 
@@ -229,6 +229,13 @@ function handleClick(event: Event): void {
   }
 }
 
+// Make sure the polling interval (and any open popup) is torn down when the
+// component unmounts, otherwise the setInterval started in openPopup() keeps
+// firing against a destroyed instance.
+onUnmounted(() => {
+  cleanExistingPopupInstance()
+})
+
 defineExpose({
   base,
   args,
diff --git a/lib/components/SlideUpDown/SlideUpDown.vue b/lib/components/SlideUpDown/SlideUpDown.vue
index 9158d35..92d1637 100644
--- a/lib/components/SlideUpDown/SlideUpDown.vue
+++ b/lib/components/SlideUpDown/SlideUpDown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import type { CSSProperties } from 'vue'
 
 import { SlideUpDownState } from '@/enums'
@@ -89,6 +89,10 @@ async function triggerSlide(): Promise<void> {
   state.value = SlideUpDownState.active
 }
 
+function onTransitionEnd(e: TransitionEvent) {
+  cleanLayout(e)
+}
+
 function cleanLayout(e: Event | null) {
   // This method can be triggered by animated child elements in
   // which case, we should do anything
@@ -111,9 +115,11 @@ onMounted(async () => {
   await deferredNextTick()
   mounted.value = true
   await cleanLayout(null)
-  container.value?.addEventListener('transitionend', (e: TransitionEvent) =>
-    cleanLayout(e)
-  )
+  container.value?.addEventListener('transitionend', onTransitionEnd)
+})
+
+onUnmounted(() => {
+  container.value?.removeEventListener('transitionend', onTransitionEnd)
 })
 
 defineExpose({
diff --git a/lib/composables/useChart.ts b/lib/composables/useChart.ts
index 5b7af3a..bd4ba82 100644
--- a/lib/composables/useChart.ts
+++ b/lib/composables/useChart.ts
@@ -155,7 +155,7 @@ export function useChart(
 
     await afterLoaded?.()
     isLoaded.value = true
-    emit('loaded')
+    emit('loaded', loadedData.value)
 
     if (onResized) {
       onResized()
@@ -217,7 +217,10 @@ export function useChart(
   })
 
   const dataHasHighlights = computed(() => {
-    const data = toValue(dataRef)
+    // Prefer loadedData (so URL-fetched data is inspected), but fall back to the
+    // raw prop so a synchronously-passed array reports highlights on first paint
+    // rather than flickering once the load watcher resolves.
+    const data = loadedData.value ?? toValue(dataRef)
     if (Array.isArray(data)) {
       return some(data, highlighted)
     }
diff --git a/lib/composables/useQueryObserver.ts b/lib/composables/useQueryObserver.ts
index 6e2a353..06bbae8 100644
--- a/lib/composables/useQueryObserver.ts
+++ b/lib/composables/useQueryObserver.ts
@@ -1,4 +1,4 @@
-import { computed, reactive, toRef, watch } from 'vue'
+import { computed, onScopeDispose, reactive, toRef, watch } from 'vue'
 import { first, get } from 'lodash'
 type ElementMap = Record<string, HTMLElement[]>
 
@@ -56,6 +56,12 @@ export function useQueryObserver(root = window.document, once = false) {
     return computed(() => get(elements, selector, []))
   }
 
+  onScopeDispose(() => {
+    for (const selector in observers) {
+      observers[selector].disconnect()
+    }
+  })
+
   return {
     querySelector,
     querySelectorAll
diff --git a/lib/composables/useResizeObserver.ts b/lib/composables/useResizeObserver.ts
index 878b0b9..cb478f6 100644
--- a/lib/composables/useResizeObserver.ts
+++ b/lib/composables/useResizeObserver.ts
@@ -1,7 +1,12 @@
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
 import { Ref } from 'vue'
+import debounce from 'lodash/debounce'
 import ResizeObserver from 'resize-observer-polyfill'
 
+// Coalesce resize bursts (e.g. a window/pane drag fires dozens per second) so
+// consumers only redraw once the dimensions settle, rather than every frame.
+const RESIZE_DEBOUNCE_MS = 100
+
 export function useResizeObserver(resizableRef?: Ref) {
   const resizeRef: Ref<HTMLElement> = resizableRef ?? ref()
   const resizeState = reactive({
@@ -10,25 +15,32 @@ export function useResizeObserver(resizableRef?: Ref) {
     narrowWidth: false
   })
 
-  const observer = new ResizeObserver((entries) => {
+  const onResize = debounce((entries: ResizeObserverEntry[]) => {
     entries.forEach((entry) => {
       resizeState.dimensions = entry.contentRect
       resizeState.offsetWidth = (entry.target as HTMLElement).offsetWidth
       resizeState.narrowWidth = (resizeState.offsetWidth ?? 540) < 540
     })
-  })
+  }, RESIZE_DEBOUNCE_MS)
+
+  const observer = new ResizeObserver(onResize)
 
   onMounted(async () => {
-    // set initial dimensions right before observing: Element.getBoundingClientRect()
-    resizeState.dimensions = resizeRef.value.getBoundingClientRect()
-    resizeState.offsetWidth = resizeRef.value.offsetWidth
-    resizeState.narrowWidth = false // TODO CD: old default is false but maybe this would work (resizeState.offsetWidth ?? 540) < 540 but would be often true
+    if (resizeRef.value) {
+      // set initial dimensions right before observing: Element.getBoundingClientRect()
+      resizeState.dimensions = resizeRef.value.getBoundingClientRect()
+      resizeState.offsetWidth = resizeRef.value.offsetWidth
+      resizeState.narrowWidth = false // TODO CD: old default is false but maybe this would work (resizeState.offsetWidth ?? 540) < 540 but would be often true
 
-    observer.observe(resizeRef.value)
+      observer.observe(resizeRef.value)
+    }
   })
 
   onBeforeUnmount(() => {
-    observer.unobserve(resizeRef.value)
+    // Drop any pending trailing call so it can't fire after teardown, then stop
+    // observing every element (disconnect covers unobserve).
+    onResize.cancel()
+    observer.disconnect()
   })
 
   return { resizeState, resizeRef }
diff --git a/lib/datavisualisations/BarChart/BarChart.vue b/lib/datavisualisations/BarChart/BarChart.vue
index d4dd04a..d978312 100644
--- a/lib/datavisualisations/BarChart/BarChart.vue
+++ b/lib/datavisualisations/BarChart/BarChart.vue
@@ -2,7 +2,7 @@
 import * as d3 from 'd3'
 import identity from 'lodash/identity'
 import sortByFn from 'lodash/sortBy'
-import { computed, ref, watch, ComponentPublicInstance } from 'vue'
+import { computed, ref, ComponentPublicInstance } from 'vue'
 import { getChartProps, useChart } from '@/composables/useChart'
 
 defineOptions({
@@ -104,13 +104,13 @@ const isLoaded = ref(false)
 const { loadedData, elementsMaxBBox, dataHasHighlights, d3Formatter }
   = useChart(el, getChartProps(props), { emit }, isLoaded, onResize)
 
-const sortedData = computed((): [] => {
+const sortedData = computed((): object[] => {
   if (!loadedData.value) {
     return []
   }
   return !props.sortBy
     ? loadedData.value
-    : sortByFn(sortedData.value, props.sortBy)
+    : sortByFn(loadedData.value, props.sortBy)
 })
 
 const labelWidth = computed(() => {
@@ -140,8 +140,8 @@ const margin = computed(() => {
 })
 
 const padded = computed(() => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
@@ -150,7 +150,7 @@ const scale = computed(() => {
     .scaleLinear()
     // @ts-expect-error D3 api
     .domain([0, d3.max(sortedData.value, (d: Datum) => d.value)])
-    .range([0, padded.value.width - valueWidth.value])
+    .range([0, Math.max(0, padded.value.width - valueWidth.value)])
   return { x }
 })
 
@@ -191,14 +191,6 @@ function onResize() {
   }
 }
 
-function initialize() {
-  // @ts-expect-error D3 api
-  d3.axisBottom().scale(scale.value.x)
-}
-
-watch(width, () => {
-  initialize()
-})
 </script>
 
 <template>
diff --git a/lib/datavisualisations/ColumnChart/ColumnChart.vue b/lib/datavisualisations/ColumnChart/ColumnChart.vue
index 27c2a97..1ff1ee2 100644
--- a/lib/datavisualisations/ColumnChart/ColumnChart.vue
+++ b/lib/datavisualisations/ColumnChart/ColumnChart.vue
@@ -213,7 +213,7 @@ const sortedData = computed((): object[] => {
   }
   return !props.sortBy
     ? loadedData.value
-    : sortByFn(sortedData.value, props.sortBy)
+    : sortByFn(loadedData.value, props.sortBy)
 })
 
 const labelWidth = computed((): number => {
@@ -261,8 +261,8 @@ const margin = computed(
 )
 
 const padded = computed((): { width: number, height: number } => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
@@ -288,7 +288,7 @@ const scaleY = computed((): d3.ScaleLinear<number, number> => {
     maxValue = props.maxValue ?? waterfallTotalValue.value
   }
   else {
-    maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName))
+    maxValue = props.maxValue ?? d3.max(sortedData.value, iteratee(props.seriesName)) ?? 0
   }
   return d3
     .scaleLinear()
diff --git a/lib/datavisualisations/LineChart/LineChart.vue b/lib/datavisualisations/LineChart/LineChart.vue
index b95dfc3..18901cc 100644
--- a/lib/datavisualisations/LineChart/LineChart.vue
+++ b/lib/datavisualisations/LineChart/LineChart.vue
@@ -222,8 +222,8 @@ const margin = computed(() => {
 })
 
 const padded = computed(() => {
-  const widthP = width.value - margin.value.left - margin.value.right
-  const heightP = height.value - margin.value.top - margin.value.bottom
+  const widthP = Math.max(0, width.value - margin.value.left - margin.value.right)
+  const heightP = Math.max(0, height.value - margin.value.top - margin.value.bottom)
   return { width: widthP, height: heightP }
 })
 
diff --git a/lib/datavisualisations/StackedBarChart/StackedBarChart.vue b/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
index c4cfaa3..72fea35 100644
--- a/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
+++ b/lib/datavisualisations/StackedBarChart/StackedBarChart.vue
@@ -255,9 +255,10 @@ function isRowHighlighted(i: number | string) {
 
 function barStyle(i: number | string, key: string) {
   const value = sortedData.value[i as number][key]
-  const totalWidth = props.relative ? totalRowValue(i) : maxValue.value
+  let totalWidth = props.relative ? totalRowValue(i) : maxValue.value
   if (!totalWidth) {
-    throw new Error('Total width is not correct' + totalWidth)
+    console.error('totalWidth as divider cannot be ' + totalWidth)
+    totalWidth = 100
   }
   const width = `${100 * (value / totalWidth)}%`
   const backgroundColor = colorScale.value(key)
diff --git a/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue b/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
index e0533af..5dc7673 100644
--- a/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
+++ b/lib/datavisualisations/StackedColumnChart/StackedColumnChart.vue
@@ -210,7 +210,7 @@ const leftAxis = computed(() => {
   return d3
     .axisLeft(leftScale.value)
     .tickFormat(d => d3Formatter(d, props.yAxisTickFormat))
-    .tickSize(width.value - leftAxisLabelsWidth.value)
+    .tickSize(Math.max(0, width.value - leftAxisLabelsWidth.value))
     .tickPadding(props.yAxisTickPadding)
 })
 
@@ -246,7 +246,7 @@ const barTooltipDelay = computed(() => {
 const maxRowValue = computed(() => {
   return (
     props.maxValue
-    || (d3.max(loadedData.value || [], (datum, i) => {
+    ?? (d3.max(loadedData.value || [], (datum, i) => {
       return totalRowValue(i)
     }) as number)
   )
diff --git a/lib/directives/EllipsisTooltip.ts b/lib/directives/EllipsisTooltip.ts
index b334b97..a96f840 100644
--- a/lib/directives/EllipsisTooltip.ts
+++ b/lib/directives/EllipsisTooltip.ts
@@ -9,8 +9,12 @@ import {
   unbind,
 } from '@/utils/floatingUi'
 
+interface ElementWithResizeObserver extends ElementWithPopper {
+  $__ellipsisResizeObserver?: ResizeObserver
+}
+
 export default {
-  mounted(el: ElementWithPopper, binding: DirectiveBinding) {
+  mounted(el: ElementWithResizeObserver, binding: DirectiveBinding) {
     const props = resolveDirectiveProps(binding, el)
     const tooltip = resolveActiveStatus(binding.value)
     const text = resolveContent(binding.value, el)
@@ -30,10 +34,13 @@ export default {
       }
     })
 
+    el.$__ellipsisResizeObserver = resizeObserver
     resizeObserver.observe(el)
     toggleTooltip(el)
   },
-  beforeUnmount(el: ElementWithPopper) {
+  beforeUnmount(el: ElementWithResizeObserver) {
+    el.$__ellipsisResizeObserver?.disconnect()
+    delete el.$__ellipsisResizeObserver
     unbind(el)
   }
-} satisfies Directive<ElementWithPopper>
+} satisfies Directive<ElementWithResizeObserver>
diff --git a/lib/maps/ChoroplethMap/ChoroplethMap.vue b/lib/maps/ChoroplethMap/ChoroplethMap.vue
index c875d93..75e5a07 100644
--- a/lib/maps/ChoroplethMap/ChoroplethMap.vue
+++ b/lib/maps/ChoroplethMap/ChoroplethMap.vue
@@ -372,6 +372,13 @@ const mapRotate = computed(() => {
   return d3.drag(map.value as any).on('drag', mapRotated)
 })
 
+// The zoom behavior actually bound to the selection (see prepareZoom): spherical
+// maps scale via mapSphericalZoom, planar maps via mapZoom. Programmatic zoom
+// must dispatch through this one so the matching handler runs.
+const activeZoomBehavior = computed(() => {
+  return props.spherical ? mapSphericalZoom.value : mapZoom.value
+})
+
 const mapHeight = computed(() => {
   return mapRect.value.height
 })
@@ -462,11 +469,9 @@ function prepare() {
 }
 
 function prepareZoom() {
-  if (props.zoomable) {
-    map.value?.call(mapZoom.value as any)
-  }
-
-  // User can zoom on the map
+  // User can zoom on the map. A spherical map rotates and scales through its
+  // dedicated behaviors; a planar map uses mapZoom. Binding both (or binding
+  // mapZoom twice) would install conflicting zoom handlers on the selection.
   if (props.zoomable && props.spherical) {
     map.value?.call(mapRotate.value as any).call(mapSphericalZoom.value as any)
   }
@@ -653,10 +658,13 @@ function applyZoomIdentity(
   pointer: number[] | null = null,
   transitionDuration = props.transitionDuration
 ) {
+  // Dispatch through the behavior actually bound to the selection so the
+  // matching handler runs (spherical applies scale only and preserves
+  // rotation; planar applies the full transform).
   return map.value
     ?.transition()
     .duration(transitionDuration)
-    .call(mapZoom.value.transform as any, zoomIdentity, pointer)
+    .call(activeZoomBehavior.value.transform as any, zoomIdentity, pointer)
     .end()
 }
 
@@ -665,7 +673,7 @@ function resetZoom(_event: MouseEvent, _d: number) {
     ?.style('--map-scale', 1)
     .transition()
     .duration(props.transitionDuration)
-    .call((mapZoom.value as any)?.transform, d3.zoomIdentity)
+    .call((activeZoomBehavior.value as any)?.transform, d3.zoomIdentity)
   featureZoom.value = null
   emitResetEvent()
 }
@@ -699,7 +707,7 @@ function setFeatureZoom(d: any, pointer = [0, 0]) {
     ?.style('--map-scale', scale)
     .transition()
     .duration(props.transitionDuration)
-    .call((mapZoom.value as any)?.transform, zoomIdentity, pointer)
+    .call((activeZoomBehavior.value as any)?.transform, zoomIdentity, pointer)
     .end()
 }
 
@@ -791,7 +799,6 @@ defineExpose({
     :class="mapClass"
     :style="mapStyle"
     class="choropleth-map"
-    @click="draw"
   >
     <svg
       :viewbox="`0 0 ${mapRect.width} ${mapRect.height}`"
diff --git a/lib/maps/SymbolMap/SymbolMap.vue b/lib/maps/SymbolMap/SymbolMap.vue
index 87bb80d..db536ff 100644
--- a/lib/maps/SymbolMap/SymbolMap.vue
+++ b/lib/maps/SymbolMap/SymbolMap.vue
@@ -346,6 +346,14 @@ const categories = computed(() => {
   return uniq(cats).map(String)
 })
 
+// Name -> index lookup so markerClassObject() doesn't run an O(n) indexOf for
+// every marker (which made class assignment O(n²) across the dataset).
+const categoryIndexByName = computed(() => {
+  const index = new Map<string, number>()
+  categories.value.forEach((category, i) => index.set(category, i))
+  return index
+})
+
 const legendData = computed(() => {
   const cats = groupBy(loadedData.value || [], (d: any) => {
     return get(d, props.categoryObjectsPath)
@@ -363,7 +371,9 @@ const hasTooltip = computed(() => {
 
 const tooltipTarget = computed(() => {
   if (hasTooltip.value) {
-    return markerId(markerCursor.value)
+    // markerCursor already holds the resolved id value, so build the element
+    // id directly rather than re-extracting it through markerId().
+    return `${mapId.value}-marker-${markerCursor.value}`
   }
   return null
 })
@@ -481,7 +491,7 @@ function markerId(d: any) {
 
 function markerClassObject(d: any) {
   const category = String(get(d, props.categoryObjectsPath))
-  const categoryIndex = categories.value.indexOf(category)
+  const categoryIndex = categoryIndexByName.value.get(category) ?? -1
   const id = get(d, props.markerObjectsPath)
   const pathClass = 'symbol-map__main__markers__item'
   return {
diff --git a/lib/utils/assets.ts b/lib/utils/assets.ts
index 329828b..60baa51 100644
--- a/lib/utils/assets.ts
+++ b/lib/utils/assets.ts
@@ -6,7 +6,7 @@ export const injectAsset = memoize(function (
   file: string,
   id = `dynamic-asset-${assetUniqueIdCounter++}`
 ): Promise<unknown> {
-  return new Promise((resolve: (value?: unknown) => void) => {
+  const promise = new Promise((resolve: (value?: unknown) => void, reject: (reason?: unknown) => void) => {
     const parent: HTMLElement
       = document.querySelector('body') || document.querySelector('head')!
     const parts = file.split('.')
@@ -16,6 +16,7 @@ export const injectAsset = memoize(function (
       const script = document.createElement('script')
       script.setAttribute('type', 'text/javascript')
       script.onload = resolve
+      script.onerror = reject
       parent.appendChild(script)
       script.setAttribute('src', file)
       script.setAttribute('id', id)
@@ -25,16 +26,29 @@ export const injectAsset = memoize(function (
       css.setAttribute('rel', 'stylesheet')
       css.setAttribute('type', 'text/css')
       css.onload = resolve
+      css.onerror = reject
       parent.appendChild(css)
       css.setAttribute('href', file)
       css.setAttribute('id', id)
     }
+    else {
+      reject(new Error(`Unsupported asset extension: ${ext}`))
+    }
+  })
+  // Don't keep a failed injection cached forever, so callers can retry later.
+  return promise.catch((err) => {
+    injectAsset.cache?.delete(file)
+    throw err
   })
 })
 
 export const injectAssets = function (...args: string[]): Promise<void> {
   const files = flatten(args)
   return new Promise((resolve: () => void) => {
+    if (files.length === 0) {
+      resolve()
+      return
+    }
     let filesLoaded = 0
     const allFilesLoaded = function () {
       if (++filesLoaded == files.length) {
@@ -42,9 +56,11 @@ export const injectAssets = function (...args: string[]): Promise<void> {
       }
     }
     for (const file of files) {
+      // Count a failed injection as "settled" too, otherwise one asset that
+      // fails to load leaves the batch promise pending forever.
       injectAsset(file)
         .then(allFilesLoaded)
-        .catch(() => null)
+        .catch(allFilesLoaded)
     }
   })
 }
diff --git a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
index d231114..fd623df 100644
--- a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
+++ b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLink.spec.ts
@@ -1,7 +1,7 @@
 import { mount, shallowMount, flushPromises } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import AdvancedLinkForm from '@/components/Form/FormAdvancedLink/FormAdvancedLink.vue'
-import { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 
 describe('AdvancedLinkForm.vue', () => {
   const global = { stubs: { HapticCopy: true }, renderStubDefaultSlot: true }
@@ -47,7 +47,7 @@ describe('AdvancedLinkForm.vue', () => {
   })
 
   it('should create only 3 forms, markdown active by default', async () => {
-    const propsData = { forms: ['raw', 'markdown', 'html'] as Tab[], modelValue: 1 }
+    const propsData = { forms: ['raw', 'markdown', 'html'] as AdvancedLinkTab[], modelValue: 1 }
     const wrapper = mount(AdvancedLinkForm, { propsData, global })
     await wrapper.vm.$nextTick()
     expect(wrapper.findAll('.tab-pane').length).toBe(3)
diff --git a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
index 2e97532..de52283 100644
--- a/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
+++ b/tests/unit/components/Form/FormAdvancedLink/FormAdvancedLinkTab.spec.ts
@@ -1,10 +1,11 @@
 import { mount, shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import AdvancedLinkFormTab, { Tab } from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import AdvancedLinkFormTab from '@/components/Form/FormAdvancedLink/FormAdvancedLinkTab.vue'
+import { AdvancedLinkTab } from '@/enums'
 interface AdvancedLinkFormTabsProps {
   readonly link: string
   readonly title: string
-  readonly type?: Tab
+  readonly type?: AdvancedLinkTab
 }
 
 describe('AdvancedLinkFormTab.vue', () => {
diff --git a/tests/unit/datavisualisations/BarChart/BarChart.spec.js b/tests/unit/datavisualisations/BarChart/BarChart.spec.js
index e0407c8..15c6bd6 100644
--- a/tests/unit/datavisualisations/BarChart/BarChart.spec.js
+++ b/tests/unit/datavisualisations/BarChart/BarChart.spec.js
@@ -59,4 +59,35 @@ describe('BarChart.vue', () => {
       expect(wrapper.vm).toBeTruthy()
     })
   })
+
+  describe('with the sortBy prop set', () => {
+    let wrapper
+
+    beforeEach(async () => {
+      const propsData = {
+        sortBy: 'value',
+        data: [
+          { label: 'B', value: 20 },
+          { label: 'A', value: 50 },
+          { label: 'C', value: 10 }
+        ]
+      }
+      wrapper = mount(BarChart, { propsData })
+      wrapper.vm.$el.style.width = '500px'
+      await wrapper.vm.$nextTick()
+    })
+
+    // Regression: sortedData used to sort itself instead of loadedData, so
+    // enabling sortBy collapsed the dataset to [] and rendered no bars.
+    it('still renders a bar for every datum', () => {
+      expect(wrapper.findAll('.bar-chart__bars__item')).toHaveLength(3)
+    })
+
+    it('orders the bars by the sortBy field', () => {
+      const labels = wrapper
+        .findAll('.bar-chart__labels__item')
+        .map(node => node.text())
+      expect(labels).toEqual(['C', 'B', 'A'])
+    })
+  })
 })
diff --git a/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js b/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
index 4a71bec..640251d 100644
--- a/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
+++ b/tests/unit/datavisualisations/ColumnChart/ColumnChart.spec.js
@@ -411,4 +411,35 @@ describe('ColumnChart.vue', () => {
       expect(ticks.at(0).text()).toBe('\'20')
     })
   })
+
+  describe('with the sortBy prop set', () => {
+    let wrapper
+
+    beforeEach(async () => {
+      const propsData = {
+        sortBy: 'value',
+        data: [
+          { date: 2000, value: 30 },
+          { date: 2001, value: 10 },
+          { date: 2002, value: 20 }
+        ]
+      }
+      wrapper = mount(ColumnChart, { propsData })
+      wrapper.vm.$el.style.width = '500px'
+      await wrapper.vm.$nextTick()
+    })
+
+    // Regression: sortedData used to sort itself instead of loadedData, so
+    // enabling sortBy collapsed the dataset to [] and rendered no columns.
+    it('still renders a column for every datum', () => {
+      expect(wrapper.findAll('.column-chart__columns__item__bar')).toHaveLength(3)
+    })
+
+    it('orders the columns by the sortBy field', () => {
+      const ticks = wrapper
+        .findAll('.column-chart__axis--x .tick')
+        .map(node => node.text())
+      expect(ticks).toEqual(['2001', '2002', '2000'])
+    })
+  })
 })