@poveste/app 0.5.3 → 0.6.1

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

@@ -18,8 +18,8 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	},
 	setup(__props) {
 		useCssVars((_ctx) => ({
-			"v8be95bec": filePadding.value,
-			"c827ed74": _ctx.story.iconColor
+			"v00f90f2e": filePadding.value,
+			"fbc82fb6": _ctx.story.iconColor
 		}));
 		const props = __props;
 		const filePadding = computed(() => {
@@ -33,7 +33,7 @@ var StoryListItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
-				"data-test-id": "story-list-item",
+				"data-testid": "story-list-item",
 				class: "poveste-story-list-item"
 			}, [createVNode(BaseListItemLink_default, {
 				to: {

package/dist/bundled/index.js

@@ -1,12 +1,15 @@
 import { router } from "./router.js";
 import App_default from "./App.js";
 import "./plugin.js";
+import { iconCollections } from "./util/icons.generated.js";
 import { createApp } from "@poveste/vendors/vue";
+import { addCollection } from "@poveste/vendors/iconify";
 import FloatingVue from "@poveste/vendors/floating-vue";
 import { createPinia } from "@poveste/vendors/pinia";
 import "virtual:$poveste-theme";
 //#region src/app/index.ts
 async function mountMainApp() {
+	for (const collection of iconCollections) addCollection(collection);
 	const app = createApp(App_default);
 	app.use(createPinia());
 	app.use(FloatingVue, {

package/dist/bundled/sandbox.js

@@ -4,18 +4,28 @@ import { previewDarkClasses, resolvePreviewDark } from "./util/color-scheme.js";
 import { applyPreviewSettings, loadStoredPreviewSettings, receivedSettings } from "./util/preview-settings.js";
 import GenericMountStory_default from "./components/story/GenericMountStory.js";
 import { mapFile } from "./util/mapping.js";
-import "./plugin.js";
 import GenericRenderStory_default from "./components/story/GenericRenderStory.js";
+import { createStateBridge } from "./util/state-bridge.js";
 import { toRawDeep } from "./util/state.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";
-import { files } from "virtual:$poveste-stories";
+import { files, onUpdate } from "virtual:$poveste-stories";
 import { parseQuery } from "@poveste/vendors/vue-router";
-import { applyState } from "@poveste/shared";
 //#region src/app/sandbox.ts
 var query = parseQuery(window.location.search);
-var file = ref(mapFile(files.find((f) => f.id === query.storyId)));
+var storyId = ref(typeof query.storyId === "string" ? query.storyId : null);
+var variantId = ref(typeof query.variantId === "string" ? query.variantId : null);
+var file = ref(null);
+function resolveFile(list = files) {
+	const found = list.find((f) => f.id === storyId.value);
+	if (found && file.value?.story.id === found.id) return;
+	file.value = found ? mapFile(found) : null;
+}
+resolveFile();
+onUpdate((newFiles) => {
+	if (!file.value) resolveFile(newFiles);
+});
 var storedSettings = loadStoredPreviewSettings();
 if (storedSettings) applyPreviewSettings(storedSettings);
 if (window.parent && window.parent !== window) window.parent.postMessage({ type: PREVIEW_SETTINGS_REQUEST }, window.location.origin);
@@ -28,28 +38,39 @@ watch(previewDark, (value) => {
 		for (const className of previewDarkClasses()) el.classList.toggle(className, value);
 	}
 }, { immediate: true });
+var pendingFrame = null;
+var lastReportedHeight = -1;
 var app = createApp({
 	name: "SandboxApp",
 	setup() {
-		const story = computed(() => file.value.story);
-		const variant = computed(() => story.value?.variants.find((v) => v.id === query.variantId));
-		let synced = false;
+		const story = computed(() => file.value?.story);
+		const variant = computed(() => story.value?.variants.find((v) => v.id === variantId.value));
+		const postState = (changes) => {
+			window.parent?.postMessage({
+				type: STATE_SYNC,
+				state: changes,
+				storyId: storyId.value,
+				variantId: variantId.value
+			});
+		};
+		let bridge = createStateBridge(postState);
 		let mounted = false;
 		window.addEventListener("message", (event) => {
 			if (event.data?.type === "__poveste:state-sync") {
-				if (!mounted) return;
-				synced = applyState(variant.value.state, event.data.state);
+				if (!mounted || !variant.value) return;
+				bridge.receive(variant.value.state, event.data.state);
 			} else if (event.data?.type === "__poveste:preview-settings-sync") applyPreviewSettings(event.data.settings);
-		});
-		watch(() => variant.value.state, (value) => {
-			if (synced && mounted) {
-				synced = false;
-				return;
+			else if (event.data?.type === "__poveste:sandbox-retarget") {
+				bridge = createStateBridge(postState);
+				lastReportedHeight = -1;
+				variantId.value = typeof event.data.variantId === "string" ? event.data.variantId : null;
+				storyId.value = typeof event.data.storyId === "string" ? event.data.storyId : null;
+				resolveFile();
 			}
-			window.parent?.postMessage({
-				type: STATE_SYNC,
-				state: toRawDeep(value, true)
-			});
+		});
+		watch(() => variant.value?.state, (value, previous) => {
+			if (!value || value !== previous) return;
+			bridge.send(toRawDeep(value, true));
 		}, { deep: true });
 		onMounted(() => {
 			mounted = true;
@@ -60,14 +81,22 @@ var app = createApp({
 		};
 	},
 	render() {
+		if (!file.value) return null;
 		return [h("div", { class: "__poveste-sandbox-hidden" }, [h(GenericMountStory_default, {
 			key: file.value.story.id,
-			story: file.value.story
+			story: file.value.story,
+			targetVariantId: variantId.value
 		})]), this.story && this.variant ? h(GenericRenderStory_default, {
+			key: `${this.story.id}/${this.variant.id}`,
 			story: this.story,
 			variant: this.variant,
 			onReady: () => {
-				window.parent?.postMessage({ type: SANDBOX_READY });
+				window.parent?.postMessage({
+					type: SANDBOX_READY,
+					storyId: this.story.id,
+					variantId: this.variant.id
+				});
+				scheduleReport();
 			}
 		}) : null];
 	}
@@ -75,8 +104,6 @@ var app = createApp({
 app.use(createPinia());
 app.mount("#app");
 document.body.classList.add("__poveste-render-story", "__poveste-render-custom-controls");
-var pendingFrame = null;
-var lastReportedHeight = -1;
 function reportHeight() {
 	pendingFrame = null;
 	const renderRoot = document.querySelector(".__poveste-render-story");
@@ -85,7 +112,9 @@ function reportHeight() {
 	lastReportedHeight = h;
 	window.parent?.postMessage({
 		type: SANDBOX_HEIGHT,
-		h
+		h,
+		storyId: storyId.value,
+		variantId: variantId.value
 	}, window.location.origin);
 }
 function scheduleReport() {
@@ -94,5 +123,5 @@ function scheduleReport() {
 }
 new ResizeObserver(scheduleReport).observe(document.body);
 requestAnimationFrame(scheduleReport);
-if (import.meta.hot) {}
+if (import.meta.env.DEV && import.meta.hot) import("./plugin.js").then(({ setupPluginApi }) => setupPluginApi());
 //#endregion

package/dist/bundled/util/const.js

@@ -5,5 +5,6 @@ var EVENT_SEND = "__poveste:event";
 var PREVIEW_SETTINGS_SYNC = "__poveste:preview-settings-sync";
 var PREVIEW_SETTINGS_REQUEST = "__poveste:preview-settings-request";
 var SANDBOX_HEIGHT = "__poveste:sandbox-height";
+var SANDBOX_RETARGET = "__poveste:sandbox-retarget";
 //#endregion
-export { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, STATE_SYNC };
+export { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC };

package/dist/bundled/util/grid-cell-height.js

@@ -0,0 +1,18 @@
+import { shallowRef } from "@poveste/vendors/vue";
+//#region src/app/util/grid-cell-height.ts
+/**
+* The first height reported by any cell of a story's grid.
+*
+* Sandboxes boot one at a time: on the 1000-variant grid the last cell reports
+* ~15s after the first. Until a cell reports it has nothing to size itself by,
+* so the grid spends that time as a wall of stubs resizing one by one. Variants
+* of one story are usually near-identical in size, which makes the first height
+* to arrive a far better guess than a fixed floor.
+*
+* Keyed by story so the next one doesn't inherit it. Module scope rather than a
+* component ref because `<script setup>` bodies run per instance — a ref
+* declared there would be one per cell, and never shared.
+*/
+var firstReportedHeight = shallowRef(null);
+//#endregion
+export { firstReportedHeight };

package/dist/bundled/util/grid-slots.js

@@ -0,0 +1,64 @@
+//#region src/app/util/grid-slots.ts
+/**
+* Hand the visible variants to slots. Assignment is sticky: a variant that is
+* still visible keeps its slot, so a one-row scroll retargets one row's worth of
+* cells. A variant that scrolled out stays in its slot, hidden, until a new one
+* needs it — unmounting would throw the warm realm away, and the window wobbles
+* by a row while a scroll settles.
+*/
+function assignSlots(slots, storyId, visible) {
+	const position = new Map(visible.map((v, i) => [v.id, i]));
+	const next = slots.map((slot) => slot.storyId === storyId && position.has(slot.variant.id) ? {
+		...slot,
+		visible: true,
+		order: position.get(slot.variant.id)
+	} : {
+		...slot,
+		visible: false,
+		order: 0
+	});
+	const placed = new Set(next.filter((s) => s.visible).map((s) => s.variant.id));
+	for (const [i, variant] of visible.entries()) {
+		if (placed.has(variant.id)) continue;
+		const slot = {
+			storyId,
+			variant,
+			visible: true,
+			order: i
+		};
+		const free = next.findIndex((s) => !s.visible);
+		if (free === -1) next.push(slot);
+		else next[free] = slot;
+	}
+	return next;
+}
+/**
+* Let idle slots go once the window has settled. A hidden slot is a realm that
+* keeps running — timers, observers, a listener on every message — and with
+* sticky assignment alone the pool would be the largest window ever seen.
+*
+* Slots are keyed by index, so only the tail can be dropped without moving
+* anything. Trailing hidden slots go; interior ones stay as the spare for the
+* next scroll — until they outnumber the visible ones, when the pool is
+* compacted onto its first slots: a visible slot past that point moves down
+* into a hidden one, which is one retarget, and the rest is cut.
+*/
+function trimSlots(slots) {
+	const visibleCount = slots.filter((s) => s.visible).length;
+	const hiddenCount = slots.length - visibleCount;
+	if (hiddenCount === 0) return slots;
+	let next = slots;
+	if (hiddenCount > visibleCount) {
+		const kept = slots.slice(0, visibleCount).map((s) => s.visible ? s : void 0);
+		for (const slot of slots.slice(visibleCount)) {
+			if (!slot.visible) continue;
+			kept[kept.indexOf(void 0)] = slot;
+		}
+		next = kept;
+	}
+	let end = next.length;
+	while (end > 0 && !next[end - 1].visible) end--;
+	return end === next.length ? next : next.slice(0, end);
+}
+//#endregion
+export { assignSlots, trimSlots };

package/dist/bundled/util/icons.generated.js

@@ -0,0 +1,104 @@
+//#region src/app/util/icons.generated.ts
+var iconCollections = [
+	{
+		"prefix": "carbon",
+		"icons": {
+			"add-alt": { "body": "<path fill=\"currentColor\" d=\"M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16S9.4 4 16 4m0-2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2\"/><path fill=\"currentColor\" d=\"M24 15h-7V8h-2v7H8v2h7v7h2v-7h7z\"/>" },
+			"area": { "body": "<path fill=\"currentColor\" d=\"M27 22.142V9.858A3.992 3.992 0 1 0 22.142 5H9.858A3.992 3.992 0 1 0 5 9.858v12.284A3.992 3.992 0 1 0 9.858 27h12.284A3.992 3.992 0 1 0 27 22.142M26 4a2 2 0 1 1-2 2a2 2 0 0 1 2-2M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m16.142-3H9.858A4 4 0 0 0 7 22.142V9.858A4 4 0 0 0 9.858 7h12.284A4 4 0 0 0 25 9.858v12.284A3.99 3.99 0 0 0 22.142 25M26 28a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>" },
+			"audio-console": { "body": "<path fill=\"currentColor\" d=\"M28 14.005h-1v-12h-2v12h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v10h2v-10h1a2.003 2.003 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10-12h-1v-4h-2v4h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v18h2v-18h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4h-4v-2h4Zm-10 10H7v-18H5v18H4a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1v4h2v-4h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2m0 4H4v-2h4Z\"/>" },
+			"bring-forward": { "body": "<path fill=\"currentColor\" d=\"M12 15h-2v-3a2 2 0 0 1 2-2h3v2h-3Zm3 15h-3a2 2 0 0 1-2-2v-3h2v3h3Zm3-2h4v2h-4zm10 2h-3v-2h3v-3h2v3a2 2 0 0 1-2 2M10 18h2v4h-2zm18 0h2v4h-2zm2-3h-2v-3h-3v-2h3a2 2 0 0 1 2 2Zm-12-5h4v2h-4z\"/><path fill=\"currentColor\" d=\"M8 22H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4h-2V4H4v16h4Z\"/>" },
+			"caret-down": { "body": "<path fill=\"currentColor\" d=\"m24 12l-8 10l-8-10z\"/>" },
+			"caret-right": { "body": "<path fill=\"currentColor\" d=\"m12 8l10 8l-10 8z\"/>" },
+			"checkbox": { "body": "<path fill=\"currentColor\" d=\"M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M6 26V6h20v20Z\"/>" },
+			"checkmark": { "body": "<path fill=\"currentColor\" d=\"m13 24l-9-9l1.414-1.414L13 21.171L26.586 7.586L28 9z\"/>" },
+			"chevron-down": { "body": "<path fill=\"currentColor\" d=\"M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z\"/>" },
+			"chevron-right": { "body": "<path fill=\"currentColor\" d=\"M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z\"/>" },
+			"chevron-sort": { "body": "<path fill=\"currentColor\" d=\"m16 28l-7-7l1.41-1.41L16 25.17l5.59-5.58L23 21zm0-24l7 7l-1.41 1.41L16 6.83l-5.59 5.58L9 11z\"/>" },
+			"close": { "body": "<path fill=\"currentColor\" d=\"M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z\"/>" },
+			"code": { "body": "<path fill=\"currentColor\" d=\"m31 16l-7 7l-1.41-1.41L28.17 16l-5.58-5.59L24 9zM1 16l7-7l1.41 1.41L3.83 16l5.58 5.59L8 23zm11.42 9.484L17.64 6l1.932.517L14.352 26z\"/>" },
+			"code-hide": { "body": "<path fill=\"currentColor\" d=\"m17.713 13.471l1.863-6.953L17.645 6l-1.565 5.838zm6.494 6.494l1.414 1.414L31 16l-7-7l-1.414 1.414L28.172 16zM30 28.586L3.414 2L2 3.414l5.793 5.793L1 16l7 7l1.414-1.414L3.828 16l5.379-5.379l5.677 5.677l-2.461 9.184l1.932.518l2.162-8.069L28.586 30z\"/>" },
+			"color-palette": { "body": "<circle cx=\"10\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"16\" cy=\"9\" r=\"2\" fill=\"currentColor\"/><circle cx=\"22\" cy=\"12\" r=\"2\" fill=\"currentColor\"/><circle cx=\"23\" cy=\"18\" r=\"2\" fill=\"currentColor\"/><circle cx=\"19\" cy=\"23\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M16.54 2A14 14 0 0 0 2 16a4.82 4.82 0 0 0 6.09 4.65l1.12-.31a3 3 0 0 1 3.79 2.9V27a3 3 0 0 0 3 3a14 14 0 0 0 14-14.54A14.05 14.05 0 0 0 16.54 2m8.11 22.31A11.93 11.93 0 0 1 16 28a1 1 0 0 1-1-1v-3.76a5 5 0 0 0-5-5a5 5 0 0 0-1.33.18l-1.12.31A2.82 2.82 0 0 1 4 16A12 12 0 0 1 16.47 4A12.18 12.18 0 0 1 28 15.53a11.9 11.9 0 0 1-3.35 8.79Z\"/>" },
+			"condition-wait-point": { "body": "<path fill=\"currentColor\" d=\"m8 16l8-8l8 8l-8 8z\"/><path fill=\"currentColor\" d=\"M16 4A12 12 0 1 1 4 16A12.014 12.014 0 0 1 16 4m0-2a14 14 0 1 0 14 14A14 14 0 0 0 16 2\"/>" },
+			"copy-file": { "body": "<path fill=\"currentColor\" d=\"m27.4 14.7l-6.1-6.1C21 8.2 20.5 8 20 8h-8c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V16.1c0-.5-.2-1-.6-1.4M20 10l5.9 6H20zm-8 18V10h6v6c0 1.1.9 2 2 2h6v10z\"/><path fill=\"currentColor\" d=\"M6 18H4V4c0-1.1.9-2 2-2h14v2H6z\"/>" },
+			"cube": { "body": "<path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M16 3.158L26.016 9L16 14.842L5.984 9ZM5 10.74l10 5.833V28.26L5 22.426Zm12 17.52V16.574l10-5.833v11.685Z\"/>" },
+			"cube-view": { "body": "<circle cx=\"16\" cy=\"16\" r=\"2\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M23.777 15.479A8.64 8.64 0 0 0 16 10a8.64 8.64 0 0 0-7.777 5.479L8 16l.223.522A8.64 8.64 0 0 0 16 22a8.64 8.64 0 0 0 7.777-5.478L24 16ZM16 20a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4\"/><path fill=\"currentColor\" d=\"m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M27 22.426l-11 6.416l-11-6.416V9.574l11-6.416l11 6.416Z\"/>" },
+			"data-vis-1": { "body": "<path fill=\"currentColor\" d=\"M26 22a3.96 3.96 0 0 0-2.02.567l-3.813-3.814a4.965 4.965 0 0 0 0-5.506l2.547-2.547A3.028 3.028 0 1 0 21.3 9.286l-2.547 2.547a4.965 4.965 0 0 0-5.506 0L9.433 8.019A3.96 3.96 0 0 0 10 6a4 4 0 1 0-4 4a3.96 3.96 0 0 0 2.02-.567l3.813 3.814a4.965 4.965 0 0 0 0 5.506l-3.814 3.814A3.96 3.96 0 0 0 6 22a4 4 0 1 0 4 4a3.96 3.96 0 0 0-.567-2.02l3.814-3.813a5 5 0 0 0 1.753.732v3.285a3 3 0 1 0 2 0v-3.285a5 5 0 0 0 1.753-.732l3.814 3.814A3.96 3.96 0 0 0 22 26a4 4 0 1 0 4-4m-10-9a3 3 0 1 1-3 3a3.003 3.003 0 0 1 3-3M4 6a2 2 0 1 1 2 2a2 2 0 0 1-2-2m2 22a2 2 0 1 1 2-2a2 2 0 0 1-2 2m20 0a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2\"/>" },
+			"devices": { "body": "<path fill=\"currentColor\" d=\"M10 30H4a2 2 0 0 1-2-2V16a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2M4 16v12h6V16Z\"/><path fill=\"currentColor\" d=\"M28 4H6a2 2 0 0 0-2 2v6h2V6h22v14H14v2h2v4h-2v2h9v-2h-5v-4h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2\"/>" },
+			"document": { "body": "<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7M18 4.4l5.6 5.6H18zM24 28H8V4h8v6c0 1.1.9 2 2 2h6z\"/><path fill=\"currentColor\" d=\"M10 22h12v2H10zm0-6h12v2H10z\"/>" },
+			"document-blank": { "body": "<path fill=\"currentColor\" d=\"m25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v24a2.006 2.006 0 0 0 2 2h16a2.006 2.006 0 0 0 2-2V10a.9.9 0 0 0-.3-.7M18 4.4l5.6 5.6H18ZM24 28H8V4h8v6a2.006 2.006 0 0 0 2 2h6Z\"/>" },
+			"document-unknown": { "body": "<circle cx=\"9\" cy=\"28.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M10 25H8v-4h2a2 2 0 0 0 0-4H8a2 2 0 0 0-2 2v.5H4V19a4.005 4.005 0 0 1 4-4h2a4 4 0 0 1 0 8Z\"/><path fill=\"currentColor\" d=\"m27.7 9.3l-7-7A.9.9 0 0 0 20 2H10a2.006 2.006 0 0 0-2 2v8h2V4h8v6a2.006 2.006 0 0 0 2 2h6v16H14v2h12a2.006 2.006 0 0 0 2-2V10a.91.91 0 0 0-.3-.7M20 10V4.4l5.6 5.6Z\"/>" },
+			"edit": { "body": "<path fill=\"currentColor\" d=\"M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4zm-5-5L24 7.6l-3 3L17.4 7zM6 22v-3.6l10-10l3.6 3.6l-10 10z\"/>" },
+			"erase": { "body": "<path fill=\"currentColor\" d=\"M7 27h23v2H7zm20.38-16.49l-7.93-7.92a2 2 0 0 0-2.83 0l-14 14a2 2 0 0 0 0 2.83L7.13 24h9.59l10.66-10.66a2 2 0 0 0 0-2.83M15.89 22H8l-4-4l6.31-6.31l7.93 7.92Zm3.76-3.76l-7.92-7.93L18 4l8 7.93Z\"/>" },
+			"event-schedule": { "body": "<path fill=\"currentColor\" d=\"M21 30a8 8 0 1 1 8-8a8 8 0 0 1-8 8m0-14a6 6 0 1 0 6 6a6 6 0 0 0-6-6\"/><path fill=\"currentColor\" d=\"M22.59 25L20 22.41V18h2v3.59l2 2z\"/><path fill=\"currentColor\" d=\"M28 6a2 2 0 0 0-2-2h-4V2h-2v2h-8V2h-2v2H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h4v-2H6V6h4v2h2V6h8v2h2V6h4v6h2Z\"/>" },
+			"flash": { "body": "<path fill=\"currentColor\" d=\"M11.61 29.92a1 1 0 0 1-.6-1.07L12.83 17H8a1 1 0 0 1-1-1.23l3-13A1 1 0 0 1 11 2h10a1 1 0 0 1 .78.37a1 1 0 0 1 .2.85L20.25 11H25a1 1 0 0 1 .9.56a1 1 0 0 1-.11 1l-13 17A1 1 0 0 1 12 30a1.1 1.1 0 0 1-.39-.08M17.75 13l2-9H11.8L9.26 15h5.91l-1.59 10.28L23 13Z\"/>" },
+			"help": { "body": "<path fill=\"currentColor\" d=\"M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 26a12 12 0 1 1 12-12a12 12 0 0 1-12 12\"/><circle cx=\"16\" cy=\"23.5\" r=\"1.5\" fill=\"currentColor\"/><path fill=\"currentColor\" d=\"M17 8h-1.5a4.49 4.49 0 0 0-4.5 4.5v.5h2v-.5a2.5 2.5 0 0 1 2.5-2.5H17a2.5 2.5 0 0 1 0 5h-2v4.5h2V17a4.5 4.5 0 0 0 0-9\"/>" },
+			"launch": { "body": "<path fill=\"currentColor\" d=\"M26 28H6a2.003 2.003 0 0 1-2-2V6a2.003 2.003 0 0 1 2-2h10v2H6v20h20V16h2v10a2.003 2.003 0 0 1-2 2\"/><path fill=\"currentColor\" d=\"M20 2v2h6.586L18 12.586L19.414 14L28 5.414V12h2V2z\"/>" },
+			"moon": { "body": "<path fill=\"currentColor\" d=\"M13.503 5.414a15.076 15.076 0 0 0 11.593 18.194a11.1 11.1 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1 1 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.07 13.07 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3\"/>" },
+			"open-panel-filled-bottom": { "body": "<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 2v12H4V6Z\"/>" },
+			"open-panel-filled-left": { "body": "<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 22H12V6h16Z\"/>" },
+			"open-panel-filled-right": { "body": "<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M4 6h16v20H4Z\"/>" },
+			"pan-horizontal": { "body": "<path fill=\"currentColor\" d=\"m24 10l-1.414 1.414L26.172 15H5.828l3.586-3.586L8 10l-6 6l6 6l1.414-1.414L5.828 17h20.344l-3.586 3.586L24 22l6-6z\"/>" },
+			"pan-vertical": { "body": "<path fill=\"currentColor\" d=\"m10 8l1.414 1.414L15 5.828v20.344l-3.586-3.586L10 24l6 6l6-6l-1.414-1.414L17 26.172V5.828l3.586 3.586L22 8l-6-6z\"/>" },
+			"panel-expansion": { "body": "<path fill=\"currentColor\" d=\"M12 6H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 8V8h6v6Zm20-8h-6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-6 18V8h6v16Z\"/>" },
+			"reset": { "body": "<path fill=\"currentColor\" d=\"M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z\"/>" },
+			"save": { "body": "<path fill=\"currentColor\" d=\"m27.71 9.29l-5-5A1 1 0 0 0 22 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V10a1 1 0 0 0-.29-.71M12 6h8v4h-8Zm8 20h-8v-8h8Zm2 0v-8a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8H6V6h4v4a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6.41l4 4V26Z\"/>" },
+			"screen": { "body": "<path fill=\"currentColor\" d=\"M28 4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2M18 28h-4v-4h4Zm10-6H4V6h24Z\"/>" },
+			"script-reference": { "body": "<path fill=\"currentColor\" d=\"M4 20v2h4.586L2 28.586L3.414 30L10 23.414V28h2v-8zm23.17 6l-2.58 2.58L26 30l4-4l-4-4l-1.42 1.41zm-8.34 0l2.58-2.58L20 22l-4 4l4 4l1.42-1.41zM25.7 9.3l-7-7A.9.9 0 0 0 18 2H8a2.006 2.006 0 0 0-2 2v12h2V4h8v6a2.006 2.006 0 0 0 2 2h6v6h2v-8a.91.91 0 0 0-.3-.7M18 10V4.4l5.6 5.6Z\"/>" },
+			"search": { "body": "<path fill=\"currentColor\" d=\"m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9\"/>" },
+			"shape-except": { "body": "<path fill=\"currentColor\" d=\"M28 10h-6V4a2 2 0 0 0-2-2H4a2.003 2.003 0 0 0-2 2v16a2.003 2.003 0 0 0 2 2h6v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V12a2 2 0 0 0-2-2M12 20v-8h8v8ZM3.999 4H20v6h-8a2 2 0 0 0-2 2v8H4Z\"/>" },
+			"software-resource-reference": { "body": "<path fill=\"currentColor\" d=\"m6.899 10.283l3.394-3.394l1.414 1.414l-3.394 3.394zM4.9 19.7l-2.3-2.3C2.2 17 2 16.5 2 16s.2-1 .6-1.4l2.3-2.3l1.4 1.4L4 16l2.3 2.3zm1.989 2.007l1.414-1.414l3.394 3.394l-1.414 1.414zM16 30c-.5 0-1-.2-1.4-.6l-2.3-2.3l1.4-1.4L16 28l2.3-2.3l1.4 1.4l-2.3 2.3c-.4.4-.9.6-1.4.6m4.293-6.303l3.394-3.394l1.414 1.414l-3.394 3.394zM27.1 19.7l-1.4-1.4L28 16l-2.3-2.3l1.4-1.4l2.3 2.3c.4.4.6.9.6 1.4s-.2 1-.6 1.4zM20.303 8.313l1.414-1.414l3.394 3.394l-1.414 1.414zM16 2c-.5 0-1 .2-1.4.6l-2.3 2.3l1.4 1.4L16 4l2.3 2.3l1.4-1.4l-2.3-2.3C17 2.2 16.5 2 16 2\"/>" },
+			"sun": { "body": "<path fill=\"currentColor\" d=\"M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6M5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z\"/>" },
+			"text-color": { "body": "<path fill=\"currentColor\" d=\"M22 21h2L17 4h-2L8 21h2l1.61-4h8.74Zm-9.57-6l3.44-8.37h.26L19.54 15ZM6 24h20v4H6z\"/>" },
+			"text-font": { "body": "<path fill=\"currentColor\" d=\"M25 12h-5v2h5a1 1 0 0 1 1 1v2h-4a3.003 3.003 0 0 0-3 3v1a3.003 3.003 0 0 0 3 3h6v-9a3.003 3.003 0 0 0-3-3m-3 10a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4v3Zm-6 2h2L12 7h-2L4 24h2l1.694-5h6.613Zm-7.629-7l2.497-7.371h.266L13.63 17Z\"/>" },
+			"trash-can": { "body": "<path fill=\"currentColor\" d=\"M12 12h2v12h-2zm6 0h2v12h-2z\"/><path fill=\"currentColor\" d=\"M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6Zm4 22V8h16v20Zm4-26h8v2h-8z\"/>" },
+			"view": { "body": "<path fill=\"currentColor\" d=\"M30.94 15.66A16.69 16.69 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68A16.69 16.69 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M16 25c-5.3 0-10.9-3.93-12.93-9C5.1 10.93 10.7 7 16 7s10.9 3.93 12.93 9C26.9 21.07 21.3 25 16 25\"/><path fill=\"currentColor\" d=\"M16 10a6 6 0 1 0 6 6a6 6 0 0 0-6-6m0 10a4 4 0 1 1 4-4a4 4 0 0 1-4 4\"/>" },
+			"view-off": { "body": "<path fill=\"currentColor\" d=\"m5.24 22.51l1.43-1.42A14.06 14.06 0 0 1 3.07 16C5.1 10.93 10.7 7 16 7a12.4 12.4 0 0 1 4 .72l1.55-1.56A14.7 14.7 0 0 0 16 5A16.69 16.69 0 0 0 1.06 15.66a1 1 0 0 0 0 .68a16 16 0 0 0 4.18 6.17\"/><path fill=\"currentColor\" d=\"M12 15.73a4 4 0 0 1 3.7-3.7l1.81-1.82a6 6 0 0 0-7.33 7.33Zm18.94-.07a16.4 16.4 0 0 0-5.74-7.44L30 3.41L28.59 2L2 28.59L3.41 30l5.1-5.1A15.3 15.3 0 0 0 16 27a16.69 16.69 0 0 0 14.94-10.66a1 1 0 0 0 0-.68M20 16a4 4 0 0 1-6 3.44L19.44 14a4 4 0 0 1 .56 2m-4 9a13.05 13.05 0 0 1-6-1.58l2.54-2.54a6 6 0 0 0 8.35-8.35l2.87-2.87A14.54 14.54 0 0 1 28.93 16C26.9 21.07 21.3 25 16 25\"/>" },
+			"warning-alt": { "body": "<path fill=\"currentColor\" d=\"M16 23a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 16 23m-1-11h2v9h-2z\"/><path fill=\"currentColor\" d=\"M29 30H3a1 1 0 0 1-.887-1.461l13-25a1 1 0 0 1 1.774 0l13 25A1 1 0 0 1 29 30M4.65 28h22.7l.001-.003L16.002 6.17h-.004L4.648 27.997Z\"/>" }
+		},
+		"lastModified": 1785496919,
+		"aliases": { "software-resource-resource": { "parent": "software-resource-reference" } },
+		"width": 32,
+		"height": 32
+	},
+	{
+		"prefix": "fluent",
+		"icons": {
+			"text-paragraph-direction-left-16-regular": {
+				"body": "<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM3.854 6.146a.5.5 0 0 1 0 .708L2.707 8l1.147 1.146a.5.5 0 1 1-.708.708l-1.5-1.5a.5.5 0 0 1 0-.708l1.5-1.5a.5.5 0 0 1 .708 0\"/>",
+				"width": 16,
+				"height": 16
+			},
+			"text-paragraph-direction-right-16-regular": {
+				"body": "<path fill=\"currentColor\" d=\"M9 3a2.5 2.5 0 0 0 0 5h1V3zm2 0v10.5a.5.5 0 0 1-1 0V9H9a3.5 3.5 0 1 1 0-7h4.5a.5.5 0 0 1 0 1H13v10.5a.5.5 0 0 1-1 0V3zM2.146 6.146a.5.5 0 0 1 .708 0l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708-.708L3.293 8L2.146 6.854a.5.5 0 0 1 0-.708\"/>",
+				"width": 16,
+				"height": 16
+			}
+		},
+		"lastModified": 1786851660,
+		"width": 20,
+		"height": 20
+	},
+	{
+		"prefix": "mdi",
+		"icons": {
+			"drag-horizontal-variant": { "body": "<path fill=\"currentColor\" d=\"M21 11H3V9h18zm0 2H3v2h18z\"/>" },
+			"drag-vertical-variant": { "body": "<path fill=\"currentColor\" d=\"M11 21H9V3h2zm4-18h-2v18h2z\"/>" },
+			"tailwind": { "body": "<path fill=\"currentColor\" d=\"M12 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.31.74 1.91 1.35c.98 1 2.09 2.15 4.59 2.15c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C15.61 7.15 14.5 6 12 6m-5 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.3.74 1.91 1.35C8.39 16.85 9.5 18 12 18c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C10.61 13.15 9.5 12 7 12\"/>" }
+		},
+		"lastModified": 1737398331,
+		"width": 24,
+		"height": 24
+	},
+	{
+		"prefix": "ri",
+		"icons": {
+			"add-line": { "body": "<path fill=\"currentColor\" d=\"M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z\"/>" },
+			"subtract-line": { "body": "<path fill=\"currentColor\" d=\"M5 11v2h14v-2z\"/>" }
+		},
+		"lastModified": 1770712905,
+		"width": 24,
+		"height": 24
+	}
+];
+//#endregion
+export { iconCollections };

package/dist/bundled/util/state-bridge.js

@@ -0,0 +1,75 @@
+import { applyState, createStateBaseline, isEquivalent } from "@poveste/shared";
+//#region src/app/util/state-bridge.ts
+/**
+* One end of the state bridge between the app and a sandbox iframe.
+*
+* Both ends used to send the *whole* state and tell an echo from a real edit
+* with a boolean meaning "ignore the next firing, it is mine". Two writes in one
+* task then put two messages in flight, each carrying its sender's stale copy of
+* the key the other just changed, and each end applied the other's stale copy
+* over its own fresh one. The two sides ended up disagreeing outright — the
+* controls panel showing one value, the story another, with nothing left in
+* flight to settle it. Same defect as #96 in `plugin-vue`, one transport out.
+*
+* So each end keeps a baseline of what both sides have agreed on, and sends only
+* what its own side changed since. Nothing stale is ever sent, so nothing stale
+* can be applied — and an echo diffs to nothing, which is what retires the flag.
+*
+* Unlike `plugin-vue`, the two ends cannot share one baseline: they are in
+* different documents. Each holds its own and records what arrives, which is
+* what `record` is for.
+*/
+function createStateBridge(post) {
+	const baseline = createStateBaseline();
+	return {
+		/**
+		* This side's state moved. Sends what changed, or nothing if the move was
+		* this end applying what the far end sent.
+		*/
+		send(next) {
+			const changes = baseline.take(next);
+			if (changes) post(changes);
+		},
+		/** The far end sent changes: apply them, and agree to the ones that landed. */
+		receive(target, changes) {
+			applyState(target, changes);
+			baseline.record(agreedFrom(target, changes));
+		}
+	};
+}
+/**
+* Of `changes`, the part `target` actually took.
+*
+* `applyState` swallows a write a setter refuses — a read-only `computed` in
+* state is the case that occurs — and reports it as written anyway. Recording
+* that as agreed is worse than losing it: the far side still holds the old
+* value, its next firing diffs that against a baseline claiming the new one,
+* and it comes back as a fresh edit that reverts the sender. A control edit
+* silently undoing itself, with nothing to show for it.
+*
+* So read the target back. Comparing per nested key as well as per key is what
+* keeps a merged write recordable: `applyState` merges one level, so a narrowed
+* change never equals the whole object it landed in.
+*/
+function agreedFrom(target, changes) {
+	const agreed = {};
+	for (const key in changes) {
+		const wanted = changes[key];
+		const current = target[key];
+		if (isEquivalent(current, wanted)) {
+			agreed[key] = wanted;
+			continue;
+		}
+		if (wanted === null || typeof wanted !== "object" || Array.isArray(wanted)) continue;
+		if (current === null || typeof current !== "object") continue;
+		let landed = null;
+		for (const nested in wanted) if (isEquivalent(current[nested], wanted[nested])) {
+			landed ??= {};
+			landed[nested] = wanted[nested];
+		}
+		if (landed) agreed[key] = landed;
+	}
+	return agreed;
+}
+//#endregion
+export { createStateBridge };

package/dist/bundled/util/state.js

@@ -1,4 +1,5 @@
 import { isRef, unref } from "@poveste/vendors/vue";
+import { clone, omit } from "@poveste/shared";
 //#region src/app/util/state.ts
 var isObject = (val) => val !== null && typeof val === "object";
 function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
@@ -26,5 +27,22 @@ function toRawObject(obj, target, clean = false, seen = /* @__PURE__ */ new Weak
 		target[key] = toRawDeep(obj[key], clean, seen);
 	});
 }
+/**
+* A variant's state as a preset holds it: a detached deep copy, with the keys
+* a preset has no business storing dropped.
+*
+* The clean pass is what keeps `clone` from failing. A preset is a value — it
+* is persisted as JSON, so a function could never be part of one — and leaving
+* functions in made `structuredClone` throw `DataCloneError`, with the JSON
+* fallback behind it throwing again on the cycle a self-referential prop
+* produces. The copy came out correct anyway, because `toRawDeep` above had
+* already detached it, but every mount of such a story logged the failure —
+* a warning carrying the function's source, then an error — and paid for two
+* doomed clone attempts. `structuredClone` handles the cycle by itself once
+* the functions are gone.
+*/
+function toPresetState(state, omitKeys = ["_hPropDefs"]) {
+	return clone(omit(toRawDeep(state, true), omitKeys));
+}
 //#endregion
-export { toRawDeep };
+export { toPresetState, toRawDeep };

package/dist/style.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
 @scope (:root) to (.__poveste-render-story:not(.__poveste-render-custom-controls)) {
   /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
   @layer properties;
@@ -175,7 +174,7 @@
   .bind-col-size {
     grid-template-columns: repeat(auto-fill, minmax(var(--poveste-col-size), 1fr));
   }
-  .__poveste-json-code[data-v-8570567f] .cm-editor {
+  .__poveste-json-code[data-v-e4c89a1b] .cm-editor {
     min-width: 280px;
     height: 100%;
   }
@@ -447,6 +446,9 @@
     .static {
       position: static;
     }
+    .sticky {
+      position: sticky;
+    }
     .inset-0 {
       inset: 0px;
     }
@@ -1138,6 +1140,9 @@
     .min-h-\[26px\] {
       min-height: 26px;
     }
+    .min-h-full {
+      min-height: 100%;
+    }
     .w-0 {
       width: 0px;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -28,13 +28,19 @@
     "src"
   ],
   "dependencies": {
+    "@fontsource/noto-sans-display": "^5.3.0",
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.5.3",
-    "@poveste/shared": "^0.5.3",
-    "@poveste/vendors": "^0.5.3"
+    "@poveste/controls": "^0.6.1",
+    "@poveste/shared": "^0.6.1",
+    "@poveste/vendors": "^0.6.1"
   },
   "devDependencies": {
+    "@iconify-json/carbon": "^1.2.25",
+    "@iconify-json/fluent": "1.2.56",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/ri": "^1.2.10",
+    "@iconify/utils": "^3.1.4",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.15",
     "@types/fs-extra": "^11.0.4",
@@ -54,8 +60,9 @@
     "vue": "^3.5.26"
   },
   "scripts": {
-    "build": "rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",
+    "build": "pnpm run icons && rimraf dist && vite build && pnpm run build:css && node ./scripts/copy.mjs",
     "build:css": "postcss src/app/style/main.pcss -o ./dist/style.css",
+    "icons": "node ./scripts/icons.mjs",
     "test": "vitest run",
     "test:dev": "vitest",
     "watch": "concurrently \"vite build --watch\" \"pnpm run build:css --watch\" \"node ./scripts/watchAndCopy.mjs\""

package/src/__tests__/font.spec.ts

@@ -0,0 +1,30 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'vitest'
+// @ts-expect-error plain script, no types
+import { FONT_PACKAGE, generateFontCss } from '../../scripts/font.mjs'
+
+// Vitest runs from the package root, and stubs `?raw` CSS imports to empty.
+// Newlines are normalised: the shipped sheet is checked in, so a Windows
+// checkout hands it back with CRLF, and this compares content against the
+// LF-newline installed package, not line endings (#156).
+const read = (path: string) => readFileSync(join(process.cwd(), path), 'utf8').replace(/\r\n/g, '\n')
+
+const shipped = read('src/app/style/font.css')
+const upstream = read(join('node_modules', FONT_PACKAGE, 'index.css'))
+
+describe('the bundled app face', () => {
+  it('matches the installed package, so a bump cannot go unnoticed', () => {
+    expect(shipped).toBe(generateFontCss(upstream))
+  })
+
+  it('asks for no format the woff2 already covers', () => {
+    expect(shipped).not.toContain('format(\'woff\')')
+  })
+
+  it('keeps every subset upstream ships, so non-latin text stays on the face', () => {
+    const subsets = (css: string) => (css.match(/unicode-range: [^;]+/g) ?? []).sort()
+
+    expect(subsets(shipped)).toEqual(subsets(upstream))
+  })
+})