@poveste/app 0.15.0 → 0.16.1

package/dist/bundled/components/toolbar/ToolbarTextDirection.vue_vue_type_script_setup_true_lang.js

@@ -1,25 +1,28 @@
 import TopBarChipItem_default from "../app/TopBarChipItem.js";
 import { usePreviewSettingsStore } from "../../stores/preview-settings.js";
-import { createBlock, createVNode, defineComponent, openBlock, resolveDirective, unref, withCtx, withDirectives } from "@poveste/vendors/vue";
+import { createBlock, createVNode, defineComponent, openBlock, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/toolbar/ToolbarTextDirection.vue?vue&type=script&setup=true&lang.ts
 var ToolbarTextDirection_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ToolbarTextDirection",
 	setup(__props) {
 		const settings = usePreviewSettingsStore().currentSettings;
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return withDirectives((openBlock(), createBlock(TopBarChipItem_default, {
-				"aria-label": "Toggle text direction",
-				class: "poveste-toolbar-text-direction",
-				onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
-			}, {
-				default: withCtx(() => [createVNode(unref(Icon), {
-					icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
-					class: "w-4 h-4"
-				}, null, 8, ["icon"])]),
+			return openBlock(), createBlock(unref(HstTooltip), { content: `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}` }, {
+				default: withCtx(() => [createVNode(TopBarChipItem_default, {
+					"aria-label": "Toggle text direction",
+					class: "poveste-toolbar-text-direction",
+					onClick: _cache[0] || (_cache[0] = ($event) => unref(settings).textDirection = unref(settings).textDirection === "ltr" ? "rtl" : "ltr")
+				}, {
+					default: withCtx(() => [createVNode(unref(Icon), {
+						icon: unref(settings).textDirection === "ltr" ? "fluent:text-paragraph-direction-right-16-regular" : "fluent:text-paragraph-direction-left-16-regular",
+						class: "w-4 h-4"
+					}, null, 8, ["icon"])]),
+					_: 1
+				})]),
 				_: 1
-			})), [[_directive_tooltip, `Switch to text direction ${unref(settings).textDirection === "ltr" ? "Right to Left" : "Left to Right"}`]]);
+			}, 8, ["content"]);
 		};
 	}
 });

package/dist/bundled/index.js

@@ -4,7 +4,6 @@ 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
@@ -12,18 +11,6 @@ async function mountMainApp() {
 	for (const collection of iconCollections) addCollection(collection);
 	const app = createApp(App_default);
 	app.use(createPinia());
-	app.use(FloatingVue, {
-		container: ".poveste-app-root",
-		overflowPadding: 4,
-		arrowPadding: 8,
-		themes: {
-			tooltip: { distance: 8 },
-			dropdown: {
-				computeTransformOrigin: true,
-				distance: 8
-			}
-		}
-	});
 	app.use(router);
 	app.mount("#app");
 	if (import.meta.hot) import.meta.hot.send("poveste:mount", {});

package/dist/bundled/sandbox.js

@@ -103,7 +103,8 @@ var app = createApp({
 		return [h("div", { class: "__poveste-sandbox-hidden" }, [h(GenericMountStory_default, {
 			key: file.value.story.id,
 			story: file.value.story,
-			targetVariantId: variantId.value
+			targetVariantId: variantId.value,
+			syncState: false
 		})]), this.story && this.variant ? h(GenericRenderStory_default, {
 			key: `${this.story.id}/${this.variant.id}`,
 			story: this.story,

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

@@ -6,11 +6,13 @@ var iconCollections = [
 			"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\"/>" },
+			"calendar": { "body": "<path fill=\"currentColor\" d=\"M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 22H6V12h20zm0-16H6V6h4v2h2V6h8v2h2V6h4z\"/>" },
 			"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-left": { "body": "<path fill=\"currentColor\" d=\"M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z\"/>" },
 			"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\"/>" },
@@ -54,7 +56,7 @@ var iconCollections = [
 			"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,
+		"lastModified": 1789034045,
 		"aliases": { "software-resource-resource": { "parent": "software-resource-reference" } },
 		"width": 32,
 		"height": 32
@@ -73,7 +75,7 @@ var iconCollections = [
 				"height": 16
 			}
 		},
-		"lastModified": 1786851660,
+		"lastModified": 1789279072,
 		"width": 20,
 		"height": 20
 	},

package/dist/bundled/util/scroll.js

@@ -1,17 +1,38 @@
 import { onMounted, watch } from "@poveste/vendors/vue";
-import scrollIntoView from "@poveste/vendors/scroll";
 //#region src/app/util/scroll.ts
+/**
+* The closest ancestor that can actually scroll, or `null` for the viewport.
+*
+* `overlay` is in the test because it is what `overflow: overlay` computes to
+* where it is still supported, and an element scrolling under it would
+* otherwise be measured against the wrong box.
+*/
+function scrollParent(el) {
+	for (let node = el.parentElement; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		if (/auto|scroll|overlay/.test(style.overflowY + style.overflowX)) return node;
+	}
+	return null;
+}
+/** Whether the element is already wholly inside the box that would scroll. */
+function isVisibleIn(el, scroller) {
+	const rect = el.getBoundingClientRect();
+	const bounds = scroller?.getBoundingClientRect();
+	const top = bounds?.top ?? 0;
+	const bottom = bounds?.bottom ?? window.innerHeight;
+	return rect.top >= top && rect.bottom <= bottom;
+}
 function useScrollOnActive(active, el) {
 	watch(active, (value) => {
 		if (value) autoScroll();
 	}, { flush: "post" });
 	function autoScroll() {
-		if (el.value) scrollIntoView(el.value, {
-			scrollMode: "if-needed",
+		const target = el.value;
+		if (!target || isVisibleIn(target, scrollParent(target))) return;
+		target.scrollIntoView({
 			block: "center",
 			inline: "nearest",
-			behavior: "smooth",
-			boundary: document.body
+			behavior: "smooth"
 		});
 	}
 	onMounted(() => {

package/dist/bundled/util/state.js

@@ -1,17 +1,48 @@
 import { isRef, unref } from "@poveste/vendors/vue";
-import { clone, omit } from "@poveste/shared";
+import { clone, isMarkedRaw, isPlainObject, omit } from "@poveste/shared";
 //#region src/app/util/state.ts
 var isObject = (val) => val !== null && typeof val === "object";
+/**
+* A value the caller must leave out rather than carry, because it cannot make
+* the trip this copy is being made for.
+*/
+var DROP = Symbol("poveste.drop");
+/**
+* A detached copy of `val`, with refs unwrapped.
+*
+* `clean` means the copy leaves the realm — it is posted to the other side of
+* the sandbox bridge, or stored as a preset — so values that cannot survive
+* that are dropped rather than carried: functions, and anything Vue has marked
+* raw.
+*
+* Marked values are dropped rather than passed through, because `__v_skip` is
+* non-enumerable and does not cross `structuredClone`. Handing one over would
+* strip the mark and hand the far side a plain graph to deep-watch, which is
+* how the first attempt at #957 turned a slow story into a hanging one. A key
+* the sandbox never sends is a key the controls panel does not show, and for
+* the case this aims at — a template ref onto a component's exposed object —
+* that is a control nobody could have used anyway.
+*
+* Without `clean` the copy stays in this realm, so a marked value is carried by
+* reference. That is what the two Vues' bridge wants: an identity both sides
+* share, which `isEquivalent` then settles by `Object.is` instead of walking.
+*/
 function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
+	const value = walk(val, clean, seen);
+	return value === DROP ? {} : value;
+}
+function walk(val, clean, seen) {
 	const unwrappedValue = isRef(val) ? unref(val) : val;
 	if (typeof unwrappedValue === "symbol") return unwrappedValue.toString();
 	if (!isObject(unwrappedValue)) return unwrappedValue;
+	if (isMarkedRaw(unwrappedValue)) return clean ? DROP : unwrappedValue;
 	if (seen.has(unwrappedValue)) return seen.get(unwrappedValue);
+	if (!Array.isArray(unwrappedValue) && !isPlainObject(unwrappedValue)) return notPlain(unwrappedValue, clean, seen);
 	if (Array.isArray(unwrappedValue)) {
 		const result = [];
 		seen.set(unwrappedValue, result);
-		let list = unwrappedValue.map((value) => toRawDeep(value, clean, seen));
-		if (clean) list = list.filter((value) => typeof value !== "function");
+		let list = unwrappedValue.map((value) => walk(value, clean, seen));
+		if (clean) list = list.filter((value) => typeof value !== "function" && value !== DROP);
 		result.push(...list);
 		return result;
 	} else {
@@ -21,10 +52,79 @@ function toRawDeep(val, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
 		return result;
 	}
 }
-function toRawObject(obj, target, clean = false, seen = /* @__PURE__ */ new WeakMap()) {
+/**
+* A value with a prototype of its own — a `Date`, a `Map`, a class instance.
+*
+* These used to fall past every branch into `toRawObject`, whose `Object.keys`
+* is empty for most of them, so they arrived as `{}` with no error and no
+* warning (#977). `postMessage` is structured clone, and structured clone
+* carries `Date`, `Map`, `Set`, `RegExp`, `Error`, typed arrays and `BigInt`
+* intact — so they were being destroyed here, before the transport that would
+* have carried them was ever reached.
+*
+* Structured clone is therefore the line, rather than a list authored here:
+* it is the boundary that actually exists, it needs no maintaining as the
+* platform adds types, and adopting it is what makes this walk agree with
+* `isEquivalent`, which refuses to compare anything that is not plain.
+*
+* Without `clean` the copy stays in this realm, so the value is carried by
+* reference — the same answer `copyState` in `@poveste/shared` gives, and the
+* identity `isEquivalent` then settles by `Object.is`.
+*/
+function notPlain(value, clean, seen) {
+	if (!clean) return value;
+	if (value instanceof Map || value instanceof Set) return walkCollection(value, seen);
+	try {
+		const copy = structuredClone(value);
+		seen.set(value, copy);
+		return copy;
+	} catch {
+		return DROP;
+	}
+}
+/**
+* `Map` and `Set`, walked rather than handed to `structuredClone`, for two
+* measured reasons.
+*
+* They hold user values, so this walk's own rules have to reach inside them: a
+* function or a marked value in a `Map` is the same problem it is in an array,
+* and an array already comes out shorter for it. Cloning the whole container
+* would carry a function straight into a `DataCloneError`, and would strip a
+* marked value's `__v_skip` and hand the far side a plain graph to deep-watch
+* — which is the hazard #974 exists to prevent.
+*
+* And these are the only types here that Vue proxies. `structuredClone` throws
+* `DataCloneError` on a reactive `Map` while the raw one clones fine, so a
+* `Map` in reactive state would be refused and dropped — a second silence
+* rather than a fix for the first. `Date`, `RegExp`, `Error` and typed arrays
+* are not proxied, so the path below never meets a proxy and needs no `toRaw`.
+*/
+function walkCollection(value, seen) {
+	const keep = (walked) => walked !== DROP && typeof walked !== "function";
+	if (value instanceof Set) {
+		const copy = /* @__PURE__ */ new Set();
+		seen.set(value, copy);
+		for (const entry of value) {
+			const walked = walk(entry, true, seen);
+			if (keep(walked)) copy.add(walked);
+		}
+		return copy;
+	}
+	const copy = /* @__PURE__ */ new Map();
+	seen.set(value, copy);
+	for (const [key, entry] of value) {
+		const walkedKey = walk(key, true, seen);
+		const walked = walk(entry, true, seen);
+		if (keep(walkedKey) && keep(walked)) copy.set(walkedKey, walked);
+	}
+	return copy;
+}
+function toRawObject(obj, target, clean, seen) {
 	Object.keys(obj).forEach((key) => {
 		if (clean && typeof obj[key] === "function") return;
-		target[key] = toRawDeep(obj[key], clean, seen);
+		const value = walk(obj[key], clean, seen);
+		if (value === DROP) return;
+		target[key] = value;
 	});
 }
 /**