@poveste/app 0.10.0 → 0.12.0

package/dist/bundled/components/tree/StoryListItem.vue_vue_type_script_setup_true_lang.js

@@ -7,10 +7,7 @@ import { useRoute } from "@poveste/vendors/vue-router";
 //#region src/app/components/tree/StoryListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "bind-tree-margin flex items-center gap-2 pl-4 min-w-0" };
 var _hoisted_2 = { class: "truncate" };
-var _hoisted_3 = {
-	key: 1,
-	class: "opacity-40 text-sm"
-};
+var _hoisted_3 = ["aria-label"];
 var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StoryListItem",
 	props: {
@@ -19,8 +16,8 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v18724f1f": filePadding.value,
-			"v45b473db": _ctx.story.iconColor
+			"v516f2a64": filePadding.value,
+			"v2fa7200a": _ctx.story.iconColor
 		}));
 		const props = __props;
 		const errorStore = useStoryErrorStore();
@@ -60,7 +57,12 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 						"data-testid": "story-error-marker",
 						"aria-label": "A variant of this story threw while rendering"
 					})) : createCommentVNode("", true),
-					!__props.story.docsOnly ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.story.variants.length), 1)) : createCommentVNode("", true)
+					!__props.story.docsOnly ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: "opacity-40 text-sm",
+						"aria-label": `${__props.story.variants.length} ${__props.story.variants.length === 1 ? "variant" : "variants"}`,
+						role: "note"
+					}, toDisplayString(__props.story.variants.length), 9, _hoisted_3)) : createCommentVNode("", true)
 				]),
 				_: 1
 			}, 8, ["to"])], 512);

package/dist/bundled/sandbox.js

@@ -7,6 +7,7 @@ import { mapFile } from "./util/mapping.js";
 import GenericRenderStory_default from "./components/story/GenericRenderStory.js";
 import { createStateBridge } from "./util/state-bridge.js";
 import { toRawDeep } from "./util/state.js";
+import { isBenignResizeObserverEvent } from "./util/uncaught.js";
 import { usePreferredDark } from "@poveste/vendors/vue-use";
 import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/vue";
 import { createPinia } from "@poveste/vendors/pinia";
@@ -36,7 +37,9 @@ function reportUncaught(error) {
 		variantId: variantId.value
 	});
 }
-window.addEventListener("error", (event) => reportUncaught(event.error ?? event.message));
+window.addEventListener("error", (event) => {
+	if (!isBenignResizeObserverEvent(event)) reportUncaught(event.error ?? event.message);
+});
 window.addEventListener("unhandledrejection", (event) => reportUncaught(event.reason));
 var prefersDark = usePreferredDark();
 var previewDark = computed(() => resolvePreviewDark(receivedSettings.colorScheme, prefersDark.value, isDark.value));

package/dist/bundled/util/uncaught.js

@@ -0,0 +1,14 @@
+//#region src/app/util/uncaught.ts
+var RESIZE_OBSERVER_LOOP = ["ResizeObserver loop limit exceeded", "ResizeObserver loop completed with undelivered notifications"];
+/**
+* A ResizeObserver loop notification is the browser saying it deferred a resize
+* callback to the next frame, not a component throwing. It reaches the `error`
+* event with a null `error`, so reporting `event.error ?? event.message` blames
+* the story that happens to be rendering for it (#468). Requiring the null keeps
+* a genuine `throw` of the same text reportable.
+*/
+function isBenignResizeObserverEvent({ error, message }) {
+	return error == null && typeof message === "string" && RESIZE_OBSERVER_LOOP.some((known) => message.startsWith(known));
+}
+//#endregion
+export { isBenignResizeObserverEvent };

package/dist/style.css

@@ -2499,7 +2499,7 @@
           text-decoration: underline;
         }
       }
-      &:is(h1, h2, h3, h4, th) {
+      &:is(h1, h2, h3, h4) {
         margin-bottom: 0.75rem;
         &:not(:first-child) {
           margin-top: 1.25rem;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Pre-bundled UI for Poveste",
   "author": {
-    "name": "Sorin Gitlan"
+    "name": "Sorin Gitlan",
+    "url": "https://x.com/50rayn"
   },
   "license": "MIT",
   "homepage": "https://poveste.dev",
@@ -38,11 +39,11 @@
   },
   "dependencies": {
     "@fontsource/noto-sans-display": "^5.3.0",
+    "@poveste/controls": "^0.12.0",
+    "@poveste/shared": "^0.12.0",
+    "@poveste/vendors": "^0.12.0",
     "fuse.js": "^7.0.0",
-    "shiki": "^3.0.0",
-    "@poveste/controls": "^0.10.0",
-    "@poveste/shared": "^0.10.0",
-    "@poveste/vendors": "^0.10.0"
+    "shiki": "^3.0.0"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.25",
@@ -54,13 +55,13 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.10.1",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^6.0.0",
     "chokidar": "^4.0.1",
     "concurrently": "^9.1.0",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
     "pathe": "^1.1.2",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.23",
     "postcss-cli": "^11.0.1",
     "tailwindcss": "^4.3.3",
     "typescript": "5.6.3",

package/src/__tests__/uncaught.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { isBenignResizeObserverEvent } from '../app/util/uncaught'
+
+/**
+ * The shape the sandbox's `error` listener sees. A browser-emitted
+ * ResizeObserver notification carries a null `error`; a real throw carries the
+ * `Error` that was thrown.
+ */
+const notification = (message: string) => ({ error: null, message })
+const thrown = (message: string) => ({ error: new Error(message), message: `Uncaught Error: ${message}` })
+
+describe('a ResizeObserver loop notification', () => {
+  // Chrome's exact wording, trailing period included, as captured from a live
+  // observer loop.
+  it('is recognised as benign with the period Chrome sends', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop completed with undelivered notifications.'))).toBe(true)
+  })
+
+  it('is recognised as benign without the period Firefox omits', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop completed with undelivered notifications'))).toBe(true)
+  })
+
+  it('is recognised as benign in the older loop limit wording', () => {
+    expect(isBenignResizeObserverEvent(notification('ResizeObserver loop limit exceeded'))).toBe(true)
+  })
+})
+
+describe('an error the sandbox exists to report', () => {
+  it('is not treated as benign when a component throws the same text', () => {
+    expect(isBenignResizeObserverEvent(thrown('ResizeObserver loop completed with undelivered notifications'))).toBe(false)
+  })
+
+  it('is not treated as benign when an unrelated script fails with no error object', () => {
+    expect(isBenignResizeObserverEvent(notification('Script error.'))).toBe(false)
+  })
+})

package/src/app/App.vue

@@ -111,6 +111,9 @@ const layoutStore = useLayoutStore()
 
 <template>
   <div class="poveste-app-root h-full">
+    <!-- The book is a page and axe's page-level rules apply to it, unlike the
+         sandbox, which renders one isolated component (#310). -->
+
     <div
       v-if="storyStore.currentStory"
       class="poveste-app hidden"
@@ -144,7 +147,9 @@ const layoutStore = useLayoutStore()
           :tree="tree"
           :stories="stories"
         />
-        <RouterView class="grow" />
+        <main class="grow flex flex-col min-h-0">
+          <RouterView class="grow" />
+        </main>
       </div>
 
       <BaseSplitPane
@@ -158,34 +163,48 @@ const layoutStore = useLayoutStore()
         <template #first>
           <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-750 __poveste-pane-shadow-from-right">
             <AppHeader class="flex-none" />
-            <StoryList
-              :tree="tree"
-              :stories="stories"
-              class="flex-1"
-            />
+            <nav
+              aria-label="Stories"
+              class="flex-1 flex flex-col min-h-0"
+            >
+              <StoryList
+                :tree="tree"
+                :stories="stories"
+                class="flex-1"
+              />
+            </nav>
           </div>
         </template>
 
         <template #last>
-          <div class="flex flex-col h-full">
+          <main class="flex flex-col h-full">
             <TopBar
               @layout="isLayoutOpen = true"
               @search="isSearchOpen = true"
             />
             <RouterView class="flex-1 min-h-0" />
-          </div>
+          </main>
         </template>
       </BaseSplitPane>
-      <div
-        v-else
-        class="h-full flex flex-col"
-      >
-        <TopBar
-          @layout="isLayoutOpen = true"
-          @search="isSearchOpen = true"
-        />
-        <RouterView class="flex-1 min-h-0" />
-      </div>
+      <template v-else>
+        <!--
+          The story list is hidden in this layout, and `AppHeader` went with it —
+          taking the page's only `h1` and its banner. A heading has to exist in
+          every layout, and it has to sit inside a landmark, so this branch
+          carries its own (#310).
+        -->
+        <header class="sr-only">
+          <h1>{{ povesteConfig.theme?.title ?? 'Poveste' }}</h1>
+        </header>
+
+        <main class="h-full flex flex-col">
+          <TopBar
+            @layout="isLayoutOpen = true"
+            @search="isSearchOpen = true"
+          />
+          <RouterView class="flex-1 min-h-0" />
+        </main>
+      </template>
 
       <LayoutModal
         v-if="!isMobile"

package/src/app/components/app/AppActions.vue

@@ -35,6 +35,7 @@ const themeIcon = computed(() => {
 
     <TopBarChipItem
       v-tooltip="makeTooltip('Search', ({ isMac }) => isMac ? 'meta+k' : 'ctrl+k')"
+      aria-label="Search stories"
       data-testid="search-btn"
       @click="$emit('search')"
     >
@@ -47,6 +48,7 @@ const themeIcon = computed(() => {
     <TopBarChipItem
       v-if="!povesteConfig.theme.hideColorSchemeSwitch"
       v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
+      aria-label="Toggle dark mode"
       @click="toggleDark()"
     >
       <Icon

package/src/app/components/app/AppHeader.vue

@@ -4,9 +4,14 @@ import AppLogo from './AppLogo.vue'
 </script>
 
 <template>
-  <div
+  <header
     class="poveste-app-header px-4 h-14 flex items-center gap-2"
   >
+    <!-- A page needs exactly one h1, and it has to sit inside a landmark or it
+         is content outside any region itself (#310). -->
+    <h1 class="sr-only">
+      {{ povesteConfig.theme?.title ?? 'Poveste' }}
+    </h1>
     <div class="py-3 sm:py-4 flex-1 h-full flex items-center pr-2">
       <a
         :href="povesteConfig.theme?.logoHref"
@@ -18,5 +23,5 @@ import AppLogo from './AppLogo.vue'
         />
       </a>
     </div>
-  </div>
+  </header>
 </template>

package/src/app/components/app/TopBarChipItem.vue

@@ -1,5 +1,8 @@
 <template>
+  <!-- Without an href this is not a link, so `aria-label` on it is prohibited and
+       it has no accessible role. Chip items are used both ways (#310). -->
   <a
+    :role="$attrs.href ? undefined : 'button'"
     class="poveste-top-bar-chip-item flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 active:bg-white/70 dark:hover:bg-white/10 dark:active:bg-white/15 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors"
   >
     <slot />

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

@@ -12,6 +12,9 @@ const emit = defineEmits({
   'update:modelValue': (_newValue: boolean) => true,
 })
 
+// Off until the first toggle, so the tick does not animate itself in on mount.
+const animationEnabled = ref(false)
+
 function toggle() {
   emit('update:modelValue', !props.modelValue)
   animationEnabled.value = true
@@ -23,7 +26,6 @@ const path = ref<SVGPathElement>()
 const dasharray = ref(0)
 const progress = computed(() => props.modelValue ? 1 : 0)
 const dashoffset = computed(() => (1 - progress.value) * dasharray.value)
-const animationEnabled = ref(false)
 
 watch(path, () => {
   dasharray.value = path.value.getTotalLength?.() ?? 21.21
@@ -34,6 +36,7 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
+    :aria-checked="modelValue"
     class="poveste-base-checkbox flex items-center gap-2 select-none px-4 py-3 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"

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

@@ -37,6 +37,7 @@ export default defineComponent({
   >
     <a
       :href="href"
+      :aria-current="(isActive != null ? isActive : linkIsActive) ? 'page' : undefined"
       class="flex items-center gap-2 text-gray-900 dark:text-gray-100"
       :class="[
         $attrs.class,

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

@@ -20,14 +20,24 @@ const omitKeys = ['_hPropDefs']
 
 const defaultState = toPresetState(props.variant.state, omitKeys)
 
+/*
+ * `writeDefaults: false`: these are keyed per variant, so writing the default on
+ * mount persisted "no presets, default selected" for every variant merely
+ * browsed. Nothing prunes them, and a renamed variant orphans its keys forever
+ * because no code path can match them again (#326).
+ */
 const selectedOption = useStorage<string>(
   `_poveste-presets/${saveId.value}/selected`,
   DEFAULT_ID,
+  undefined,
+  { writeDefaults: false },
 )
 
 const presetStates = useStorage<Map<string, { state: Record<string, unknown>, label: string }>>(
   `_poveste-presets/${saveId.value}/states`,
   new Map(),
+  undefined,
+  { writeDefaults: false },
 )
 
 const presetsOptions = computed(() => {
@@ -176,6 +186,7 @@ onClickOutside(select, stopEditing)
     </div>
     <Icon
       v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
+      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"
       :class="[
@@ -185,6 +196,7 @@ onClickOutside(select, stopEditing)
     />
     <Icon
       v-tooltip="'Create new preset'"
+      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"
       @click="createPreset()"

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

@@ -12,6 +12,8 @@ const hasEvents = computed(() => eventsStore.events.length)
 onMounted(resetUnseen)
 watch(() => eventsStore.unseen, resetUnseen)
 
+const eventsElement = ref<HTMLDivElement>()
+
 async function resetUnseen() {
   if (eventsStore.unseen > 0) {
     eventsStore.unseen = 0
@@ -19,8 +21,6 @@ async function resetUnseen() {
   await nextTick()
   eventsElement.value.scrollTo({ top: eventsElement.value.scrollHeight })
 }
-
-const eventsElement = ref<HTMLDivElement>()
 </script>
 
 <template>

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

@@ -30,6 +30,11 @@ const highlighter = shallowRef<Highlighter>()
 const dynamicSourceCode = ref('')
 const error = ref<string>(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
+// first `await` — with the declaration underneath, that path hits the TDZ.
+const displayedSource = ref<'dynamic' | 'static'>('dynamic')
+
 watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   if (!generateSourceCodeFn.value) return
   error.value = null
@@ -75,8 +80,6 @@ watch(() => [props.story, props.story?.file?.source], async () => {
   immediate: true,
 })
 
-const displayedSource = ref<'dynamic' | 'static'>('dynamic')
-
 const displayedSourceCode = computed(() => {
   if (displayedSource.value === 'dynamic') {
     return dynamicSourceCode.value

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

@@ -39,6 +39,8 @@ function action() {
 <template>
   <div
     ref="el"
+    role="option"
+    :aria-selected="selected"
     class="poveste-search-item"
     data-testid="search-item"
     :data-selected="selected ? '' : undefined"

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

@@ -279,6 +279,23 @@ const {
   selectPrevious,
 } = useSelection(results)
 
+// Announced to a screen reader on every change: the count when a search returns
+// something, and which result is focused as the arrows move. Both are silent
+// otherwise — arrowing only changes styling.
+const resultsAnnouncement = computed(() => {
+  if (!rateLimitedSearch.value) {
+    return ''
+  }
+  if (!results.value.length) {
+    return 'No results'
+  }
+
+  const count = `${results.value.length} result${results.value.length === 1 ? '' : 's'}`
+  const current = results.value[selectedIndex.value]
+
+  return current ? `${count}. ${current.title}, ${selectedIndex.value + 1} of ${results.value.length}` : count
+})
+
 // Activation
 
 const router = useRouter()
@@ -321,6 +338,13 @@ onKeyboardShortcut(['enter'], () => {
     <input
       ref="input"
       v-model="searchInputText"
+      type="search"
+      role="combobox"
+      aria-label="Search for stories and variants"
+      aria-autocomplete="list"
+      :aria-expanded="results.length > 0"
+      :aria-controls="results.length ? 'poveste-search-results' : undefined"
+      :aria-activedescendant="results.length ? `poveste-search-option-${selectedIndex}` : undefined"
       placeholder="Search for stories, variants..."
       class="bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none"
       @keydown.down.prevent="selectNext()"
@@ -338,14 +362,32 @@ onKeyboardShortcut(['enter'], () => {
 
   <div
     v-else-if="results.length"
+    id="poveste-search-results"
+    role="listbox"
+    aria-label="Search results"
     class="max-h-[400px] overflow-y-auto rounded-b-lg"
   >
     <SearchItem
       v-for="(result, index) of results"
+      :id="`poveste-search-option-${index}`"
       :key="result.id"
       :result="result"
       :selected="index === selectedIndex"
       @close="close()"
     />
   </div>
+
+  <!--
+    Arrowing through results was a purely visual state change: `selectedIndex`
+    drove styling and nothing else, so a screen reader announced nothing on
+    typing, nothing on arrowing, and nothing on selecting (#311). The count is
+    what tells you the search did anything at all.
+  -->
+  <div
+    class="sr-only"
+    aria-live="polite"
+    role="status"
+  >
+    {{ resultsAnnouncement }}
+  </div>
 </template>

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

@@ -41,6 +41,8 @@ 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 onMouseDown(event: MouseEvent) {
     event.preventDefault()
@@ -109,7 +111,6 @@ const responsiveHeight = computed({
 const horizontalDragger = ref<HTMLDivElement>()
 const verticalDragger = ref<HTMLDivElement>()
 const cornerDragger = ref<HTMLDivElement>()
-const previewWrapper = ref<HTMLDivElement>()
 
 useDragger(horizontalDragger, responsiveWidth, 32, 20000, 'x')
 useDragger(verticalDragger, responsiveHeight, 32, 20000, 'y')

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

@@ -322,6 +322,7 @@ function onIframeLoad() {
       }"
       :style="previewStyle(isResponsiveEnabled, finalWidth, finalHeight)"
       data-testid="preview-iframe"
+      :title="`Preview of ${story.title} — ${variant.title}`"
       @load="onIframeLoad()"
     />
 

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -12,6 +12,7 @@ defineProps<{
 <template>
   <TopBarChipItem
     v-tooltip="tooltip"
+    aria-label="Open story in editor"
     target="_blank"
     class="poveste-toolbar-open-in-editor"
     @click="openInEditor(file)"

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -20,6 +20,7 @@ const sandboxUrl = computed(() => {
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
+    aria-label="Open variant in new tab"
     class="poveste-toolbar-new-tab"
   >
     <Icon

package/src/app/components/toolbar/ToolbarTextDirection.vue

@@ -9,6 +9,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <TopBarChipItem
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
+    aria-label="Toggle text direction"
     class="poveste-toolbar-text-direction"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >

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

@@ -69,6 +69,8 @@ useScrollOnActive(isActive, el)
       <span
         v-if="!story.docsOnly"
         class="opacity-40 text-sm"
+        :aria-label="`${story.variants.length} ${story.variants.length === 1 ? 'variant' : 'variants'}`"
+        role="note"
       >
         {{ story.variants.length }}
       </span>

package/src/app/sandbox.ts

@@ -14,6 +14,7 @@ import { mapFile } from './util/mapping'
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from './util/preview-settings.js'
 import { createStateBridge } from './util/state-bridge.js'
 import { toRawDeep } from './util/state.js'
+import { isBenignResizeObserverEvent } from './util/uncaught.js'
 
 const query = parseQuery(window.location.search)
 
@@ -65,7 +66,11 @@ if (window.parent && window.parent !== window) {
 function reportUncaught(error: unknown) {
   reportStoryError(error, { storyId: storyId.value, variantId: variantId.value })
 }
-window.addEventListener('error', event => reportUncaught(event.error ?? event.message))
+window.addEventListener('error', (event) => {
+  if (!isBenignResizeObserverEvent(event)) {
+    reportUncaught(event.error ?? event.message)
+  }
+})
 window.addEventListener('unhandledrejection', event => reportUncaught(event.reason))
 
 // The story preview has its own color scheme, independent from the app chrome.

package/src/app/style/main.pcss

@@ -25,7 +25,6 @@
    its utility classes live in a package v4 never scans. */
 @source "../../../../poveste/src/node/markdown.ts";
 
-/* TODO(#36): port the v3 typography theme() customization to v4 CSS. */
 @plugin '@tailwindcss/typography';
 
 /* Chrome dark mode. Deliberately a distinct class from the story-side
@@ -181,7 +180,7 @@
 /*
  * Typography (@tailwindcss/typography) customization — ported from the v3
  * `theme.extend.typography` JS config to CSS. Unlayered so it overrides the
- * plugin's layered defaults. Needs a visual pass on the docs/markdown pages.
+ * plugin's layered defaults.
  */
 .prose {
   --tw-prose-invert-quote-borders: var(--color-gray-800);
@@ -207,7 +206,7 @@
       }
     }
 
-    &:is(h1, h2, h3, h4, th) {
+    &:is(h1, h2, h3, h4) {
       margin-bottom: 0.75rem;
 
       &:not(:first-child) {

package/src/app/util/uncaught.ts

@@ -0,0 +1,19 @@
+// Chrome ends the sentence with a period and Firefox does not, so these are
+// prefixes rather than whole messages.
+const RESIZE_OBSERVER_LOOP = [
+  'ResizeObserver loop limit exceeded',
+  'ResizeObserver loop completed with undelivered notifications',
+]
+
+/**
+ * A ResizeObserver loop notification is the browser saying it deferred a resize
+ * callback to the next frame, not a component throwing. It reaches the `error`
+ * event with a null `error`, so reporting `event.error ?? event.message` blames
+ * the story that happens to be rendering for it (#468). Requiring the null keeps
+ * a genuine `throw` of the same text reportable.
+ */
+export function isBenignResizeObserverEvent({ error, message }: { error?: unknown, message?: unknown }): boolean {
+  return error == null
+    && typeof message === 'string'
+    && RESIZE_OBSERVER_LOOP.some(known => message.startsWith(known))
+}