@poveste/app 0.7.0 → 0.8.1

package/dist/bundled/app.css

@@ -1,9 +1,9 @@
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-tree-margin[data-v-0fa5d0aa] {
-  margin-left: var(--v00f90f2e);
+.bind-tree-margin[data-v-a603aebf] {
+  margin-left: var(--v18724f1f);
 }
-.bind-icon-color[data-v-0fa5d0aa] {
-  color: var(--fbc82fb6);
+.bind-icon-color[data-v-a603aebf] {
+  color: var(--v45b473db);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
@@ -129,8 +129,8 @@
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
-.bind-icon-color[data-v-e5d28031] {
-  color: var(--v97886b12);
+.bind-icon-color[data-v-8112241f] {
+  color: var(--v29a7233a);
 }
 }
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {

package/dist/bundled/components/story/StoryVariantListItem.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryVariantListItem_vue_vue_type_script_setup_true_lang_default from "./StoryVariantListItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/app/components/story/StoryVariantListItem.vue
-var StoryVariantListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-e5d28031"]]);
+var StoryVariantListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryVariantListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8112241f"]]);
 //#endregion
 export { StoryVariantListItem_default as default };

package/dist/bundled/components/story/StoryVariantListItem.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,9 @@
+import { useStoryStore } from "../../stores/story.js";
+import { useStoryErrorStore } from "../../stores/story-errors.js";
 import { useScrollOnActive } from "../../util/scroll.js";
 import BaseListItemLink_default from "../base/BaseListItemLink.js";
 import { useCurrentVariantRoute } from "../../util/variant.js";
-import { createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, toRefs, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, toRefs, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/story/StoryVariantListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "truncate" };
@@ -12,11 +14,18 @@ var StoryVariantListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 		required: true
 	} },
 	setup(__props) {
-		useCssVars((_ctx) => ({ "v97886b12": unref(variant).iconColor }));
-		const { variant } = toRefs(__props);
+		useCssVars((_ctx) => ({ "v29a7233a": unref(variant).iconColor }));
+		const props = __props;
+		const { variant } = toRefs(props);
 		const { isActive, targetRoute } = useCurrentVariantRoute(variant);
 		const el = ref();
 		useScrollOnActive(isActive, el);
+		const storyStore = useStoryStore();
+		const errorStore = useStoryErrorStore();
+		const error = computed(() => {
+			const storyId = storyStore.currentStory?.id;
+			return storyId ? errorStore.forVariant(storyId, props.variant.id) : void 0;
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
@@ -28,13 +37,23 @@ var StoryVariantListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE
 				"is-active": unref(isActive),
 				class: "px-2 py-2 md:py-1.5 m-1 rounded-sm flex items-center gap-2"
 			}, {
-				default: withCtx(({ active }) => [createVNode(unref(Icon), {
-					icon: unref(variant).icon ?? "carbon:cube",
-					class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
-						"text-gray-500": !active && !unref(variant).iconColor,
-						"bind-icon-color": !active && unref(variant).iconColor
-					}])
-				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_1, toDisplayString(unref(variant).title), 1)]),
+				default: withCtx(({ active }) => [
+					createVNode(unref(Icon), {
+						icon: unref(variant).icon ?? "carbon:cube",
+						class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
+							"text-gray-500": !active && !unref(variant).iconColor,
+							"bind-icon-color": !active && unref(variant).iconColor
+						}])
+					}, null, 8, ["icon", "class"]),
+					createElementVNode("span", _hoisted_1, toDisplayString(unref(variant).title), 1),
+					error.value ? (openBlock(), createBlock(unref(Icon), {
+						key: 0,
+						icon: "carbon:warning-alt",
+						class: "w-4 h-4 flex-none ml-auto text-red-500",
+						"data-testid": "variant-error-marker",
+						"aria-label": `Threw while rendering: ${error.value.message}`
+					}, null, 8, ["aria-label"])) : createCommentVNode("", true)
+				]),
 				_: 1
 			}, 8, ["to", "is-active"])], 512);
 		};

package/dist/bundled/components/story/StoryVariantSinglePreviewRemote.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from "../../util/const.js";
 import { trackWindow } from "../../util/keyboard.js";
 import { useStoryStore } from "../../stores/story.js";
+import { useStoryErrorStore } from "../../stores/story-errors.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
 import { getSandboxUrl } from "../../util/sandbox.js";
 import { createStateBridge } from "../../util/state-bridge.js";
@@ -9,9 +10,25 @@ import { useEventsStore } from "../../stores/events.js";
 import { firstReportedHeight } from "../../util/grid-cell-height.js";
 import StoryResponsivePreview_default from "./StoryResponsivePreview.js";
 import { useEventListener } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toRaw, watch, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toDisplayString, toRaw, unref, watch, withCtx } from "@poveste/vendors/vue";
+import { Icon } from "@poveste/vendors/iconify";
+import { SANDBOX_ERROR } from "@poveste/shared";
 //#region src/app/components/story/StoryVariantSinglePreviewRemote.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
+var _hoisted_2 = {
+	key: 0,
+	class: "poveste-story-error absolute inset-0 overflow-auto p-6 bg-white dark:bg-gray-900",
+	"data-testid": "story-error"
+};
+var _hoisted_3 = { class: "flex items-center gap-2 text-red-600 dark:text-red-400 font-medium" };
+var _hoisted_4 = {
+	class: "mt-2 font-mono text-sm text-red-700 dark:text-red-300",
+	"data-testid": "story-error-message"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "mt-4 text-xs whitespace-pre-wrap text-gray-600 dark:text-gray-400"
+};
 var MIN_HEIGHT = 40;
 var MAX_AUTO_HEIGHT = 400;
 var REUSE_LIMIT = 30;
@@ -30,6 +47,11 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 	setup(__props) {
 		const props = __props;
 		const settings = usePreviewSettingsStore().currentSettings;
+		const errorStore = useStoryErrorStore();
+		const storyError = computed(() => errorStore.forVariant(props.story.id, props.variant.id));
+		watch(() => [props.story.id, props.variant.id], () => {
+			errorStore.clear(props.story.id, props.variant.id);
+		});
 		const iframe = ref();
 		function postState(changes) {
 			iframe.value?.contentWindow?.postMessage({
@@ -67,6 +89,15 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 					if (!fromCurrentOccupant(event.data)) break;
 					setPreviewReady();
 					break;
+				case SANDBOX_ERROR:
+					if (!fromCurrentOccupant(event.data)) break;
+					errorStore.report({
+						message: event.data.message,
+						stack: event.data.stack,
+						storyId: props.story.id,
+						variantId: props.variant.id
+					});
+					break;
 				case PREVIEW_SETTINGS_REQUEST:
 					syncSettings();
 					break;
@@ -192,7 +223,14 @@ var StoryVariantSinglePreviewRemote_vue_vue_type_script_setup_true_lang_default
 					style: normalizeStyle(previewStyle(isResponsiveEnabled, finalWidth, finalHeight)),
 					"data-testid": "preview-iframe",
 					onLoad: _cache[0] || (_cache[0] = ($event) => onIframeLoad())
-				}, null, 46, _hoisted_1)]),
+				}, null, 46, _hoisted_1), storyError.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+					createElementVNode("div", _hoisted_3, [createVNode(unref(Icon), {
+						icon: "carbon:warning-alt",
+						class: "w-5 h-5 flex-none"
+					}), _cache[1] || (_cache[1] = createElementVNode("span", null, "This component threw while rendering", -1))]),
+					createElementVNode("p", _hoisted_4, toDisplayString(storyError.value.message), 1),
+					storyError.value.stack ? (openBlock(), createElementBlock("pre", _hoisted_5, toDisplayString(storyError.value.stack), 1)) : createCommentVNode("", true)
+				])) : createCommentVNode("", true)]),
 				_: 1
 			}, 8, ["variant", "responsive"]);
 		};

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

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import StoryListItem_vue_vue_type_script_setup_true_lang_default from "./StoryListItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/app/components/tree/StoryListItem.vue
-var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0fa5d0aa"]]);
+var StoryListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(StoryListItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-a603aebf"]]);
 //#endregion
 export { StoryListItem_default as default };

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

@@ -1,13 +1,14 @@
+import { useStoryErrorStore } from "../../stores/story-errors.js";
 import { useScrollOnActive } from "../../util/scroll.js";
 import BaseListItemLink_default from "../base/BaseListItemLink.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, toDisplayString, unref, useCssVars, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 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: 0,
+	key: 1,
 	class: "opacity-40 text-sm"
 };
 var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -18,10 +19,12 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v00f90f2e": filePadding.value,
-			"fbc82fb6": _ctx.story.iconColor
+			"v18724f1f": filePadding.value,
+			"v45b473db": _ctx.story.iconColor
 		}));
 		const props = __props;
+		const errorStore = useStoryErrorStore();
+		const hasError = computed(() => errorStore.storyHasError(props.story.id));
 		const filePadding = computed(() => {
 			return `${props.depth * 12}px`;
 		});
@@ -42,13 +45,23 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				},
 				class: "pl-0.5 pr-2 py-2 md:py-1.5 mx-1 rounded-sm"
 			}, {
-				default: withCtx(({ active }) => [createElementVNode("span", _hoisted_1, [createVNode(unref(Icon), {
-					icon: __props.story.icon ?? "carbon:cube",
-					class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
-						"text-primary-500": !active && !__props.story.iconColor,
-						"bind-icon-color": !active && __props.story.iconColor
-					}])
-				}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(__props.story.title), 1)]), !__props.story.docsOnly ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.story.variants.length), 1)) : createCommentVNode("", true)]),
+				default: withCtx(({ active }) => [
+					createElementVNode("span", _hoisted_1, [createVNode(unref(Icon), {
+						icon: __props.story.icon ?? "carbon:cube",
+						class: normalizeClass(["w-5 h-5 sm:w-4 sm:h-4 flex-none", {
+							"text-primary-500": !active && !__props.story.iconColor,
+							"bind-icon-color": !active && __props.story.iconColor
+						}])
+					}, null, 8, ["icon", "class"]), createElementVNode("span", _hoisted_2, toDisplayString(__props.story.title), 1)]),
+					hasError.value ? (openBlock(), createBlock(unref(Icon), {
+						key: 0,
+						icon: "carbon:warning-alt",
+						class: "w-4 h-4 flex-none ml-auto text-red-500",
+						"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)
+				]),
 				_: 1
 			}, 8, ["to"])], 512);
 		};

package/dist/bundled/sandbox.js

@@ -12,6 +12,7 @@ import { computed, createApp, h, onMounted, ref, watch } from "@poveste/vendors/
 import { createPinia } from "@poveste/vendors/pinia";
 import { files, onUpdate } from "virtual:$poveste-stories";
 import { parseQuery } from "@poveste/vendors/vue-router";
+import { reportStoryError } from "@poveste/shared";
 //#region src/app/sandbox.ts
 var query = parseQuery(window.location.search);
 var storyId = ref(typeof query.storyId === "string" ? query.storyId : null);
@@ -29,6 +30,14 @@ onUpdate((newFiles) => {
 var storedSettings = loadStoredPreviewSettings();
 if (storedSettings) applyPreviewSettings(storedSettings);
 if (window.parent && window.parent !== window) window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin);
+function reportUncaught(error) {
+	reportStoryError(error, {
+		storyId: storyId.value,
+		variantId: variantId.value
+	});
+}
+window.addEventListener("error", (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));
 var darkClassTargets = [document.documentElement, document.querySelector("#app")];

package/dist/bundled/stores/story-errors.js

@@ -0,0 +1,26 @@
+import { computed, ref } from "@poveste/vendors/vue";
+import { defineStore } from "@poveste/vendors/pinia";
+//#region src/app/stores/story-errors.ts
+var useStoryErrorStore = defineStore("story-errors", () => {
+	const errors = ref(/* @__PURE__ */ new Map());
+	const key = (storyId, variantId) => `${storyId}::${variantId ?? ""}`;
+	function report(error) {
+		if (!error.storyId) return;
+		errors.value.set(key(error.storyId, error.variantId), error);
+	}
+	function clear(storyId, variantId) {
+		errors.value.delete(key(storyId, variantId));
+	}
+	return {
+		errors,
+		report,
+		clear,
+		forVariant: computed(() => (storyId, variantId) => errors.value.get(key(storyId, variantId))),
+		storyHasError: computed(() => (storyId) => {
+			for (const [entry] of errors.value) if (entry.startsWith(`${storyId}::`)) return true;
+			return false;
+		})
+	};
+});
+//#endregion
+export { useStoryErrorStore };

package/dist/style.css

@@ -335,7 +335,11 @@
     :scope, :host {
       --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+      --color-red-300: oklch(80.8% 0.114 19.571);
+      --color-red-400: oklch(70.4% 0.191 22.216);
       --color-red-500: oklch(63.7% 0.237 25.331);
+      --color-red-600: oklch(57.7% 0.245 27.325);
+      --color-red-700: oklch(50.5% 0.213 27.518);
       --color-orange-500: oklch(70.5% 0.213 47.604);
       --color-emerald-50: oklch(97.9% 0.021 166.113);
       --color-emerald-100: oklch(95% 0.052 163.051);
@@ -990,6 +994,9 @@
     .mt-2 {
       margin-top: calc(var(--spacing) * 2);
     }
+    .mt-4 {
+      margin-top: calc(var(--spacing) * 4);
+    }
     .mr-2 {
       margin-right: calc(var(--spacing) * 2);
     }
@@ -1669,6 +1676,9 @@
     .p-4 {
       padding: calc(var(--spacing) * 4);
     }
+    .p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
     .p-8 {
       padding: calc(var(--spacing) * 8);
     }
@@ -1812,6 +1822,9 @@
     .whitespace-nowrap {
       white-space: nowrap;
     }
+    .whitespace-pre-wrap {
+      white-space: pre-wrap;
+    }
     .text-black\/\[1\%\] {
       color: color-mix(in srgb, #000 1%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
@@ -1830,6 +1843,9 @@
         color: color-mix(in oklab, var(--color-gray-500) 20%, transparent);
       }
     }
+    .text-gray-600 {
+      color: var(--color-gray-600);
+    }
     .text-gray-700 {
       color: var(--color-gray-700);
     }
@@ -1854,6 +1870,12 @@
     .text-red-500 {
       color: var(--color-red-500);
     }
+    .text-red-600 {
+      color: var(--color-red-600);
+    }
+    .text-red-700 {
+      color: var(--color-red-700);
+    }
     .text-white {
       color: var(--color-white);
     }
@@ -2307,6 +2329,12 @@
     .dark\:text-primary-400:where(.ptw-dark, .ptw-dark *) {
       color: var(--color-primary-400);
     }
+    .dark\:text-red-300:where(.ptw-dark, .ptw-dark *) {
+      color: var(--color-red-300);
+    }
+    .dark\:text-red-400:where(.ptw-dark, .ptw-dark *) {
+      color: var(--color-red-400);
+    }
     .dark\:text-white\/\[1\%\]:where(.ptw-dark, .ptw-dark *) {
       color: color-mix(in srgb, #fff 1%, transparent);
       @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -40,9 +40,9 @@
     "@fontsource/noto-sans-display": "^5.3.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.7.0",
-    "@poveste/vendors": "^0.7.0",
-    "@poveste/shared": "^0.7.0"
+    "@poveste/controls": "^0.8.1",
+    "@poveste/shared": "^0.8.1",
+    "@poveste/vendors": "^0.8.1"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.2.25",

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

@@ -2,7 +2,9 @@
 import type { PropType } from 'vue'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { ref, toRefs } from 'vue'
+import { computed, ref, toRefs } from 'vue'
+import { useStoryStore } from '../../stores/story'
+import { useStoryErrorStore } from '../../stores/story-errors'
 import { useScrollOnActive } from '../../util/scroll'
 import { useCurrentVariantRoute } from '../../util/variant'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
@@ -18,6 +20,14 @@ const { variant } = toRefs(props)
 const { isActive, targetRoute } = useCurrentVariantRoute(variant)
 const el = ref<HTMLDivElement>()
 useScrollOnActive(isActive, el)
+
+// This list only ever shows the current story's variants.
+const storyStore = useStoryStore()
+const errorStore = useStoryErrorStore()
+const error = computed(() => {
+  const storyId = storyStore.currentStory?.id
+  return storyId ? errorStore.forVariant(storyId, props.variant.id) : undefined
+})
 </script>
 
 <template>
@@ -41,6 +51,13 @@ useScrollOnActive(isActive, el)
         }"
       />
       <span class="truncate">{{ variant.title }}</span>
+      <Icon
+        v-if="error"
+        icon="carbon:warning-alt"
+        class="w-4 h-4 flex-none ml-auto text-red-500"
+        data-testid="variant-error-marker"
+        :aria-label="`Threw while rendering: ${error.message}`"
+      />
     </BaseListItemLink>
   </div>
 </template>

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

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import type { HstEvent } from '../../stores/events'
 import type { Story, Variant } from '../../types'
+import { Icon } from '@iconify/vue'
+import { SANDBOX_ERROR } from '@poveste/shared'
 import { useEventListener } from '@vueuse/core'
 import { computed, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import { useEventsStore } from '../../stores/events'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { useStoryStore } from '../../stores/story'
+import { useStoryErrorStore } from '../../stores/story-errors'
 import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from '../../util/const'
 import { firstReportedHeight } from '../../util/grid-cell-height'
 import { trackWindow } from '../../util/keyboard'
@@ -24,6 +27,15 @@ const props = withDefaults(defineProps<{
 })
 
 const settings = usePreviewSettingsStore().currentSettings
+const errorStore = useStoryErrorStore()
+
+const storyError = computed(() => errorStore.forVariant(props.story.id, props.variant.id))
+
+// The realm re-renders on every retarget, so a stale error must not outlive the
+// render that produced it — otherwise a fixed story stays marked until reload.
+watch(() => [props.story.id, props.variant.id], () => {
+  errorStore.clear(props.story.id, props.variant.id)
+})
 
 // Iframe
 
@@ -104,6 +116,15 @@ useEventListener(window, 'message', (event) => {
       if (!fromCurrentOccupant(event.data)) break
       setPreviewReady()
       break
+    case SANDBOX_ERROR:
+      if (!fromCurrentOccupant(event.data)) break
+      errorStore.report({
+        message: event.data.message,
+        stack: event.data.stack,
+        storyId: props.story.id,
+        variantId: props.variant.id,
+      })
+      break
     case PREVIEW_SETTINGS_REQUEST:
       syncSettings()
       break
@@ -303,5 +324,28 @@ function onIframeLoad() {
       data-testid="preview-iframe"
       @load="onIframeLoad()"
     />
+
+    <!--
+      Covers the preview rather than sitting beside it: a component that threw
+      has rendered something, but nothing about it can be trusted — the template
+      below is exactly what makes a broken story look like a working one (#323).
+    -->
+    <div
+      v-if="storyError"
+      class="poveste-story-error absolute inset-0 overflow-auto p-6 bg-white dark:bg-gray-900"
+      data-testid="story-error"
+    >
+      <div class="flex items-center gap-2 text-red-600 dark:text-red-400 font-medium">
+        <Icon icon="carbon:warning-alt" class="w-5 h-5 flex-none" />
+        <span>This component threw while rendering</span>
+      </div>
+      <p class="mt-2 font-mono text-sm text-red-700 dark:text-red-300" data-testid="story-error-message">
+        {{ storyError.message }}
+      </p>
+      <pre
+        v-if="storyError.stack"
+        class="mt-4 text-xs whitespace-pre-wrap text-gray-600 dark:text-gray-400"
+      >{{ storyError.stack }}</pre>
+    </div>
   </StoryResponsivePreview>
 </template>

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

@@ -3,6 +3,7 @@ import type { Story } from '../../types'
 import { Icon } from '@iconify/vue'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useStoryErrorStore } from '../../stores/story-errors'
 import { useScrollOnActive } from '../../util/scroll'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
 
@@ -13,6 +14,12 @@ const props = withDefaults(defineProps<{
   depth: 0,
 })
 
+// Only ever means "a variant of this story was seen to throw". A variant that
+// has not rendered cannot have reported, so no marker is not a clean bill of
+// health — see the store, and the open half of #323.
+const errorStore = useStoryErrorStore()
+const hasError = computed(() => errorStore.storyHasError(props.story.id))
+
 const filePadding = computed(() => {
   return `${props.depth * 12}px`
 })
@@ -51,6 +58,14 @@ useScrollOnActive(isActive, el)
         <span class="truncate">{{ story.title }}</span>
       </span>
 
+      <Icon
+        v-if="hasError"
+        icon="carbon:warning-alt"
+        class="w-4 h-4 flex-none ml-auto text-red-500"
+        data-testid="story-error-marker"
+        aria-label="A variant of this story threw while rendering"
+      />
+
       <span
         v-if="!story.docsOnly"
         class="opacity-40 text-sm"

package/src/app/sandbox.ts

@@ -1,4 +1,5 @@
 import type { StoryFile } from './types'
+import { reportStoryError } from '@poveste/shared'
 import { usePreferredDark } from '@vueuse/core'
 import { createPinia } from 'pinia'
 import { files, onUpdate } from 'virtual:$poveste-stories'
@@ -56,6 +57,17 @@ if (window.parent && window.parent !== window) {
   window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin)
 }
 
+// The framework hooks catch what the framework swallows; this catches what
+// escapes it — a throw from an event handler, a rejected promise, an async
+// effect. Neither alone is enough: Vue never lets a render error reach the
+// window, and no framework hook sees an error raised outside its own call
+// stack (#323).
+function reportUncaught(error: unknown) {
+  reportStoryError(error, { storyId: storyId.value, variantId: variantId.value })
+}
+window.addEventListener('error', 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.
 // The fallback covers settings stored before the option existed.
 const prefersDark = usePreferredDark()

package/src/app/stores/story-errors.ts

@@ -0,0 +1,48 @@
+import type { StoryError } from '@poveste/shared'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+// Errors reported by a sandbox while rendering a variant (#323).
+//
+// This only knows about variants that have actually rendered. A variant is not
+// mounted until it scrolls into the grid's window (#103), so the absence of a
+// marker means "not seen to fail", never "fine" — telling a book it is healthy
+// would need a rendering pass, which is the open half of #323.
+export const useStoryErrorStore = defineStore('story-errors', () => {
+  const errors = ref(new Map<string, StoryError>())
+
+  const key = (storyId: string, variantId?: string | null) => `${storyId}::${variantId ?? ''}`
+
+  function report(error: StoryError) {
+    if (!error.storyId) {
+      return
+    }
+    errors.value.set(key(error.storyId, error.variantId), error)
+  }
+
+  // A variant is re-rendered on every retarget, so last render wins: a story
+  // that has been fixed must stop being marked without a reload.
+  function clear(storyId: string, variantId?: string | null) {
+    errors.value.delete(key(storyId, variantId))
+  }
+
+  const forVariant = computed(() => (storyId: string, variantId?: string | null) =>
+    errors.value.get(key(storyId, variantId)))
+
+  const storyHasError = computed(() => (storyId: string) => {
+    for (const [entry] of errors.value) {
+      if (entry.startsWith(`${storyId}::`)) {
+        return true
+      }
+    }
+    return false
+  })
+
+  return {
+    errors,
+    report,
+    clear,
+    forVariant,
+    storyHasError,
+  }
+})