@poveste/app 0.5.3 → 0.6.0

package/src/app/style/font.css

@@ -0,0 +1,78 @@
+/*
+ * Upstream's sheet with the woff fallback dropped — every browser the app
+ * runs in takes the woff2, so shipping both put ~160K of never-fetched files
+ * in each book. Copied rather than imported because the package pairs the two
+ * formats in every `src`; `font.spec.ts` fails if a bump moves the subsets.
+ *
+ * Regenerate: node packages/poveste-app/scripts/font.mjs
+ */
+
+/* noto-sans-display-cyrillic-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-display-cyrillic-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-cyrillic-400-normal.woff2') format('woff2');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-display-greek-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-display-greek-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-greek-400-normal.woff2') format('woff2');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-display-vietnamese-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-vietnamese-400-normal.woff2') format('woff2');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-display-latin-ext-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-ext-400-normal.woff2') format('woff2');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-display-latin-400-normal */
+@font-face {
+  font-family: 'Noto Sans Display';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/noto-sans-display/files/noto-sans-display-latin-400-normal.woff2') format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}

package/src/app/style/main.pcss

@@ -1,4 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
+/* The app face (Noto Sans Display) is imported by the bundle entries, not here:
+   this file is compiled by the postcss CLI into dist/style.css, which rebases
+   font URLs relative to the *source* and ships a path into node_modules. Vite
+   processes the entries and hashes the files into the book (#219). */
 @import 'floating-vue/dist/style.css';
 @import '@poveste/controls/dist/index.es.css';
 

package/src/app/style/sandbox.css

@@ -1,4 +1,7 @@
 @import '@poveste/controls/dist/index.es.css';
+/* Same self-hosted face as the app chrome (#219), so `html { font-family }`
+   below resolves the same way in a realm that has no app stylesheet. */
+@import './font.css';
 
 /* Lets the toolbar's preview background show through. Not `!important`: this
    file is wrapped in `@layer poveste-defaults` so consumer rules outrank it,

package/src/app/util/const.ts

@@ -4,3 +4,4 @@ export const EVENT_SEND = '__poveste:event'
 export const PREVIEW_SETTINGS_SYNC = '__poveste:preview-settings-sync'
 export const PREVIEW_SETTINGS_REQUEST = '__poveste:preview-settings-request'
 export const SANDBOX_HEIGHT = '__poveste:sandbox-height'
+export const SANDBOX_RETARGET = '__poveste:sandbox-retarget'

package/src/app/util/grid-cell-height.ts

@@ -0,0 +1,16 @@
+import { shallowRef } from 'vue'
+
+/**
+ * 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.
+ */
+export const firstReportedHeight = shallowRef<{ storyId: string, height: number } | null>(null)

package/src/app/util/grid-slots.ts

@@ -0,0 +1,72 @@
+import type { Variant } from '../types'
+
+/*
+ * Grid cells are slots, not variants (#240). A slot keeps its component and its
+ * sandbox iframe across the variants it shows, so handing it a new variant is a
+ * retarget of a warm realm rather than a new document. What is on screen is
+ * decided here; the grid only renders what it is given.
+ */
+export interface Slot {
+  /** The story the variant belongs to; ids repeat across stories (`v1`). */
+  storyId: string
+  variant: Variant
+  visible: boolean
+  /** Position on screen — CSS `order`, since DOM order is slot order. */
+  order: number
+}
+
+/**
+ * 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.
+ */
+export function assignSlots(slots: Slot[], storyId: string, visible: Variant[]): Slot[] {
+  const position = new Map(visible.map((v, i) => [v.id, i]))
+  const next: Slot[] = 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: 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.
+ */
+export function trimSlots(slots: Slot[]): Slot[] {
+  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: (Slot | undefined)[] = slots.slice(0, visibleCount).map(s => (s.visible ? s : undefined))
+    for (const slot of slots.slice(visibleCount)) {
+      if (!slot.visible) continue
+      kept[kept.indexOf(undefined)] = slot
+    }
+    next = kept as Slot[]
+  }
+
+  let end = next.length
+  while (end > 0 && !next[end - 1].visible) end--
+  return end === next.length ? next : next.slice(0, end)
+}

package/src/app/util/icons.generated.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/icons.mjs — do not edit. Refresh with `pnpm --filter @poveste/app icons`.
+import type { IconifyJSON } from '@iconify/vue'
+
+export const iconCollections: IconifyJSON[] = [
+  {"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},
+]

package/src/app/util/state-bridge.ts

@@ -0,0 +1,95 @@
+import { applyState, createStateBaseline, isEquivalent } from '@poveste/shared'
+
+/**
+ * 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.
+ */
+export function createStateBridge(post: (changes: Record<string, any>) => void) {
+  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: any) {
+      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: any, changes: any) {
+      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: any, changes: any) {
+  const agreed: Record<string, any> = {}
+
+  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: Record<string, any> | null = null
+
+    for (const nested in wanted) {
+      if (isEquivalent(current[nested], wanted[nested])) {
+        landed ??= {}
+        landed[nested] = wanted[nested]
+      }
+    }
+
+    if (landed) {
+      agreed[key] = landed
+    }
+  }
+
+  return agreed
+}

package/src/app/util/state.ts

@@ -1,3 +1,4 @@
+import { clone, omit } from '@poveste/shared'
 import { isRef, unref } from 'vue'
 
 const isObject = val => val !== null && typeof val === 'object'
@@ -43,3 +44,21 @@ function toRawObject(obj: Record<any, any>, target: Record<any, any>, clean = fa
     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.
+ */
+export function toPresetState(state: any, omitKeys: string[] = ['_hPropDefs']) {
+  return clone(omit(toRawDeep(state, true), omitKeys))
+}

package/src/bundle-main-dev.js

@@ -1,4 +1,5 @@
 import { mountMainApp } from './app/index'
+import './app/style/font.css'
 import './app/style/main.pcss'
 
 mountMainApp()

package/src/bundle-main.js

@@ -1,6 +1,9 @@
 /* eslint-disable perfectionist/sort-imports -- global styles must load before app bundle */
 import 'virtual:$poveste-global-styles'
 import { mountMainApp } from './bundled/index.js'
+// Self-hosted app face, here rather than in main.pcss so Vite hashes the font
+// files into the book instead of postcss shipping a node_modules path (#219).
+import './app/style/font.css'
 import './style.css'
 import './bundled/app.css'