@hina-ui/vue 1.7.9 → 1.7.11

package/dist/index.js

@@ -3540,7 +3540,7 @@ var _hoisted_1$122 = [
 	"onLoad"
 ];
 var _hoisted_2$70 = ["src"];
-var _hoisted_3$37 = [
+var _hoisted_3$38 = [
 	"src",
 	"alt",
 	"onLoad"
@@ -3636,7 +3636,7 @@ var LightboxStrip_default = /* @__PURE__ */ defineComponent({
 							draggable: "false",
 							class: "block size-full object-contain",
 							onLoad: ($event) => emit("learn", slide.item.id, $event.target)
-						}, null, 40, _hoisted_3$37)]),
+						}, null, 40, _hoisted_3$38)]),
 						_: 2
 					}, 1032, [
 						"style",
@@ -6340,9 +6340,9 @@ function useScrollFocus(host, viewport, options) {
 //#region src/components/scroll-area/ScrollArea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$121 = ["dir"];
 var _hoisted_2$69 = ["data-visible"];
-var _hoisted_3$36 = ["data-visible"];
-var _hoisted_4$30 = ["data-visible"];
-var _hoisted_5$23 = ["data-visible"];
+var _hoisted_3$37 = ["data-visible"];
+var _hoisted_4$31 = ["data-visible"];
+var _hoisted_5$24 = ["data-visible"];
 //#endregion
 //#region src/components/scroll-area/ScrollArea.vue
 var ScrollArea_default = /* @__PURE__ */ defineComponent({
@@ -6437,21 +6437,21 @@ var ScrollArea_default = /* @__PURE__ */ defineComponent({
 					"data-side": "x-end",
 					"data-visible": unref(showXEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_3$36)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_3$37)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					class: "hn-scroll-shadow",
 					"data-side": "y-start",
 					"data-visible": unref(showYStart) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_4$30)) : createCommentVNode("", true),
+				}, null, 8, _hoisted_4$31)) : createCommentVNode("", true),
 				props.direction !== "horizontal" ? (openBlock(), createElementBlock("div", {
 					key: 3,
 					class: "hn-scroll-shadow",
 					"data-side": "y-end",
 					"data-visible": unref(showYEnd) ? "" : void 0,
 					"aria-hidden": "true"
-				}, null, 8, _hoisted_5$23)) : createCommentVNode("", true)
+				}, null, 8, _hoisted_5$24)) : createCommentVNode("", true)
 			], 64)) : createCommentVNode("", true)], 10, _hoisted_1$121);
 		};
 	}
@@ -6519,7 +6519,7 @@ var _hoisted_2$68 = [
 	"aria-current",
 	"onClick"
 ];
-var _hoisted_3$35 = ["src"];
+var _hoisted_3$36 = ["src"];
 //#endregion
 //#region src/components/lightbox/LightboxThumbs.vue
 var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
@@ -6572,7 +6572,7 @@ var LightboxThumbs_default = /* @__PURE__ */ defineComponent({
 							alt: "",
 							draggable: "false",
 							class: "relative -z-10 size-full object-cover"
-						}, null, 8, _hoisted_3$35),
+						}, null, 8, _hoisted_3$36),
 						at === props.index ? (openBlock(), createBlock(Highlight_default, {
 							key: 0,
 							id: unref(highlightId),
@@ -9199,9 +9199,9 @@ var _hoisted_1$114 = {
 	class: "hn-collapse"
 };
 var _hoisted_2$64 = { class: "hn-collapse-body" };
-var _hoisted_3$34 = ["role"];
-var _hoisted_4$29 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
-var _hoisted_5$22 = {
+var _hoisted_3$35 = ["role"];
+var _hoisted_4$30 = { class: "flex min-w-0 flex-1 flex-col gap-1" };
+var _hoisted_5$23 = {
 	key: 0,
 	class: "text-fg font-medium"
 };
@@ -9258,7 +9258,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(unref(calloutIcon)({ tone: props.tone })),
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : createCommentVNode("", true)]),
-					createElementVNode("div", _hoisted_4$29, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$22, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
+					createElementVNode("div", _hoisted_4$30, [props.title ? (openBlock(), createElementBlock("p", _hoisted_5$23, toDisplayString(props.title), 1)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
 					unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_6$15, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true),
 					props.closable ? (openBlock(), createBlock(CloseButton_default, {
 						key: 1,
@@ -9266,7 +9266,7 @@ var Alert_default = /* @__PURE__ */ defineComponent({
 						class: "-my-0.5 -me-1",
 						onClick: close
 					})) : createCommentVNode("", true)
-				], 10, _hoisted_3$34)])])) : createCommentVNode("", true)]),
+				], 10, _hoisted_3$35)])])) : createCommentVNode("", true)]),
 				_: 3
 			}, 16);
 		};
@@ -10979,6 +10979,7 @@ function choiceRows(items, query, contains) {
 			result.push({
 				key: `group:${groupIndex}`,
 				label: item.label,
+				source: item,
 				position: 0
 			});
 			for (const option of options) result.push({
@@ -11255,6 +11256,8 @@ var virtualListContent = tv({
 		horizontal: "flex-row"
 	} }
 });
+var virtualChoiceHeadings = tv({ base: "pointer-events-none absolute inset-0 z-1 p-[inherit]" });
+var virtualChoiceHeading = tv({ base: "pointer-events-auto absolute inset-x-0" });
 var virtualListItem = tv({
 	base: "flow-root min-w-0 shrink-0",
 	variants: { orientation: {
@@ -11267,6 +11270,9 @@ var virtualListStatus = tv({ base: "text-muted flex shrink-0 items-center justif
 //#region src/components/virtual-list/VirtualChoices.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$111 = ["data-index"];
 var _hoisted_2$62 = ["id"];
+var _hoisted_3$34 = ["id"];
+var _hoisted_4$29 = { class: "relative" };
+var _hoisted_5$22 = ["data-index"];
 //#endregion
 //#region src/components/virtual-list/VirtualChoices.vue
 var VirtualChoices_default = /* @__PURE__ */ defineComponent({
@@ -11286,6 +11292,9 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const t = useUiLocale();
 		const { area, body, rows, entries, bodyStyle, measure, itemAttrs, labelId } = useVirtualChoices(props);
+		const slots = useSlots();
+		const held = (index) => !!slots.group && !rows.value[index].option;
+		const origin = computed(() => entries.value[0] ? entries.value[0].start - parseFloat(bodyStyle.value.paddingBlockStart) : 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ScrollArea_default, {
 				ref_key: "area",
@@ -11293,7 +11302,7 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(props.class),
 				style: normalizeStyle({ maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight })
 			}, {
-				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(props.padded === false ? void 0 : "p-1") }, [createElementVNode("div", mergeProps({
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(cn)(slots.group && "relative", props.padded !== false && "p-1") || void 0) }, [createElementVNode("div", mergeProps({
 					ref_key: "body",
 					ref: body
 				}, _ctx.$attrs, {
@@ -11304,23 +11313,42 @@ var VirtualChoices_default = /* @__PURE__ */ defineComponent({
 					return openBlock(), createElementBlock("div", {
 						key: entry.key,
 						ref_for: true,
-						ref: unref(measure),
+						ref: held(entry.index) ? void 0 : unref(measure),
 						"data-index": entry.index,
 						role: "presentation",
 						class: normalizeClass(unref(virtualListItem)({ orientation: "vertical" })),
-						style: normalizeStyle({ marginBlockStart: `${entry.gapBefore}px` })
+						style: normalizeStyle({
+							marginBlockStart: `${entry.gapBefore}px`,
+							height: held(entry.index) ? `${entry.size}px` : void 0
+						})
 					}, [unref(rows)[entry.index].option ? renderSlot(_ctx.$slots, "default", {
 						option: unref(rows)[entry.index].option,
 						attrs: unref(itemAttrs)(entry.index)
-					}, void 0, void 0, 0) : (openBlock(), createElementBlock("div", {
+					}, void 0, void 0, 0) : slots.group ? (openBlock(), createElementBlock("span", {
 						key: 1,
 						id: unref(labelId)(entry.index),
+						hidden: ""
+					}, toDisplayString(unref(rows)[entry.index].label), 9, _hoisted_2$62)) : (openBlock(), createElementBlock("div", {
+						key: 2,
+						id: unref(labelId)(entry.index),
 						class: normalizeClass(unref(selectLabel)())
-					}, toDisplayString(unref(rows)[entry.index].label), 11, _hoisted_2$62))], 14, _hoisted_1$111);
+					}, toDisplayString(unref(rows)[entry.index].label), 11, _hoisted_3$34))], 14, _hoisted_1$111);
 				}), 128))], 16), !unref(rows).length ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(unref(selectEmpty)())
-				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t).select.empty), 1)])], 2)) : createCommentVNode("", true)], 2)]),
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(t).select.empty), 1)])], 2)) : slots.group ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(virtualChoiceHeadings)())
+				}, [createElementVNode("div", _hoisted_4$29, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(entries), (entry) => {
+					return openBlock(), createElementBlock(Fragment, { key: entry.key }, [unref(rows)[entry.index].source ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_for: true,
+						ref: unref(measure),
+						"data-index": entry.index,
+						class: normalizeClass(unref(virtualChoiceHeading)()),
+						style: normalizeStyle({ top: `${entry.start - origin.value}px` })
+					}, [renderSlot(_ctx.$slots, "group", { group: unref(rows)[entry.index].source })], 14, _hoisted_5$22)) : createCommentVNode("", true)], 64);
+				}), 128))])], 2)) : createCommentVNode("", true)], 2)]),
 				_: 3
 			}, 8, ["class", "style"]);
 		};
@@ -16029,6 +16057,9 @@ var commandItemBody = tv({ base: "flex min-w-0 flex-1 flex-col" });
 var commandItemMatch = tv({ base: "text-accent-text font-medium" });
 var commandItemHint = tv({ base: "ms-auto flex shrink-0 items-center gap-1" });
 var commandEmpty = tv({ base: "text-muted px-4 py-8 text-center text-sm" });
+var commandHeading = tv({ base: "text-muted flex min-h-7 items-center justify-between gap-2 px-2.5 text-xs font-medium" });
+var commandGrid = tv({ base: "grid grid-cols-[minmax(0,1fr)] p-1" });
+var commandGridRows = tv({ base: "col-start-1 grid grid-rows-subgrid" });
 var commandStatus = tv({ base: "border-line text-muted shrink-0 border-t px-4 py-2 text-center text-sm" });
 //#endregion
 //#region src/components/command-palette/context.ts
@@ -16221,16 +16252,34 @@ function score(item, query) {
 function rank(items, query) {
 	return items.map((item) => score(item, query)).filter((match) => match !== null).sort((a, b) => b.score - a.score);
 }
+function layoutCommandSections(sections) {
+	let row = 1;
+	const placed = sections.map((section) => {
+		const span = section.matches.length + (section.group ? 1 : 0);
+		const entry = {
+			section,
+			row,
+			span
+		};
+		row += span;
+		return entry;
+	});
+	return {
+		rows: Math.max(row - 1, 1),
+		sections: placed
+	};
+}
 function filterCommands(items, query) {
 	const q = query.trim().toLowerCase();
 	const sections = [];
 	let loose = [];
-	const push = (label, entries) => {
+	const push = (group, entries) => {
 		const ranked = rank(entries, q);
 		if (ranked.length === 0) return;
 		sections.push({
 			key: String(sections.length),
-			label,
+			label: group?.label,
+			group,
 			best: ranked[0].score,
 			matches: ranked.map(({ item, start, end }) => ({
 				item,
@@ -16250,13 +16299,14 @@ function filterCommands(items, query) {
 			continue;
 		}
 		flush();
-		push(entry.label, entry.items);
+		push(entry, entry.items);
 	}
 	flush();
 	if (q) sections.sort((a, b) => b.best - a.best);
-	return sections.map(({ key, label, matches }) => ({
+	return sections.map(({ key, label, group, matches }) => ({
 		key,
 		label,
+		group,
 		matches
 	}));
 }
@@ -16280,9 +16330,10 @@ function useCommandItems(props, search) {
 				description: match.item.description,
 				match
 			}));
-			return section.label ? [{
-				label: section.label,
-				options
+			return section.group ? [{
+				label: section.group.label,
+				options,
+				group: section.group
 			}] : options;
 		}))
 	};
@@ -16311,10 +16362,19 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const slots = useSlots();
 		const search = useModel(__props, "search");
 		const t = useUiLocale();
 		const input = shallowRef();
 		const { sections, options } = useCommandItems(props, () => search.value);
+		const layout = computed(() => slots.heading ? layoutCommandSections(sections.value) : void 0);
+		function returnFocus() {
+			nextTick(() => {
+				const field = input.value;
+				const active = document.activeElement;
+				if (field?.isConnected && (!active || active === document.body || active.contains(field))) field.focus({ preventScroll: true });
+			});
+		}
 		function select(item) {
 			const field = input.value;
 			const panel = field?.closest("[data-hn-command-palette]");
@@ -16362,7 +16422,7 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 								input: input.value,
 								kind: "listbox",
 								class: normalizeClass(unref(commandList)())
-							}, {
+							}, createSlots({
 								default: withCtx(({ option, attrs }) => [createVNode(CommandPaletteItem_default, mergeProps(attrs, {
 									match: option.match,
 									onSelect: ($event) => select(option.match.item)
@@ -16375,8 +16435,17 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 									key: "0"
 								} : void 0]), 1040, ["match", "onSelect"])]),
 								empty: withCtx(() => [props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(t).common.loading), 1)], void 0, 0) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createTextVNode(toDisplayString(unref(t).command.empty), 1)], void 0, 1)]),
-								_: 3
-							}, 8, [
+								_: 2
+							}, [_ctx.$slots.heading ? {
+								name: "group",
+								fn: withCtx(({ group }) => [createElementVNode("div", {
+									"data-hn-command-heading": "",
+									class: normalizeClass(unref(commandHeading)()),
+									onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"])),
+									onClick: returnFocus
+								}, [renderSlot(_ctx.$slots, "heading", { group: group.group })], 34)]),
+								key: "0"
+							} : void 0]), 1032, [
 								"options",
 								"virtualize",
 								"input",
@@ -16387,7 +16456,87 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 							key: 3,
 							class: normalizeClass(unref(commandList)())
 						}, {
-							default: withCtx(() => [createVNode(unref(ListboxContent), {
+							default: withCtx(() => [layout.value ? (openBlock(), createElementBlock("div", {
+								key: 0,
+								class: normalizeClass(unref(commandGrid)())
+							}, [createVNode(unref(ListboxContent), {
+								"aria-label": props.label,
+								"aria-busy": props.loading || void 0,
+								class: normalizeClass(unref(commandGridRows)()),
+								style: normalizeStyle({ gridRow: `1 / span ${layout.value.rows}` })
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.sections, ({ section, row, span }) => {
+									return openBlock(), createElementBlock(Fragment, { key: section.key }, [section.group ? (openBlock(), createBlock(unref(ListboxGroup), {
+										key: 0,
+										"aria-label": section.group.label,
+										"aria-labelledby": void 0,
+										class: normalizeClass(unref(commandGridRows)()),
+										style: normalizeStyle({ gridRow: `${row} / span ${span}` })
+									}, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(section.matches, (match, index) => {
+											return openBlock(), createBlock(CommandPaletteItem_default, {
+												key: match.item.id,
+												match,
+												style: normalizeStyle({ gridRow: index + 2 }),
+												onSelect: ($event) => select(match.item)
+											}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+												name: "default",
+												fn: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+													item: match.item,
+													match: unref(commandMatchRange)(match)
+												})]),
+												key: "0"
+											} : void 0]), 1032, [
+												"match",
+												"style",
+												"onSelect"
+											]);
+										}), 128))]),
+										_: 2
+									}, 1032, [
+										"aria-label",
+										"class",
+										"style"
+									])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(section.matches, (match, index) => {
+										return openBlock(), createBlock(CommandPaletteItem_default, {
+											key: match.item.id,
+											match,
+											style: normalizeStyle({ gridRow: row + index }),
+											onSelect: ($event) => select(match.item)
+										}, createSlots({ _: 2 }, [_ctx.$slots.item ? {
+											name: "default",
+											fn: withCtx(() => [renderSlot(_ctx.$slots, "item", {
+												item: match.item,
+												match: unref(commandMatchRange)(match)
+											})]),
+											key: "0"
+										} : void 0]), 1032, [
+											"match",
+											"style",
+											"onSelect"
+										]);
+									}), 128))], 64);
+								}), 128))]),
+								_: 3
+							}, 8, [
+								"aria-label",
+								"aria-busy",
+								"class",
+								"style"
+							]), (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.sections, ({ section, row }) => {
+								return openBlock(), createElementBlock(Fragment, { key: section.key }, [section.group ? (openBlock(), createElementBlock("div", {
+									key: 0,
+									"data-hn-command-heading": "",
+									class: normalizeClass(unref(commandHeading)()),
+									style: normalizeStyle({
+										gridRow: row,
+										gridColumn: 1
+									}),
+									onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+									onClick: returnFocus
+								}, [renderSlot(_ctx.$slots, "heading", { group: section.group })], 38)) : createCommentVNode("", true)], 64);
+							}), 128))], 2)) : (openBlock(), createBlock(unref(ListboxContent), {
+								key: 1,
 								"aria-label": props.label,
 								"aria-busy": props.loading || void 0,
 								class: normalizeClass(unref(selectListBody)())
@@ -16432,8 +16581,8 @@ var CommandPalettePanel_default = /* @__PURE__ */ defineComponent({
 								"aria-label",
 								"aria-busy",
 								"class"
-							]), unref(sections).length === 0 ? (openBlock(), createElementBlock("div", {
-								key: 0,
+							])), unref(sections).length === 0 ? (openBlock(), createElementBlock("div", {
+								key: 2,
 								role: "status",
 								class: normalizeClass(unref(commandEmpty)())
 							}, [props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(t).common.loading), 1)], void 0, 0) : renderSlot(_ctx.$slots, "empty", { search: search.value }, () => [createTextVNode(toDisplayString(unref(t).command.empty), 1)], void 0, 1)], 2)) : createCommentVNode("", true)]),
@@ -16554,15 +16703,20 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
 					key: "1"
 				} : void 0,
+				_ctx.$slots.heading ? {
+					name: "heading",
+					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "heading", normalizeProps(guardReactiveProps(slotProps)))]),
+					key: "2"
+				} : void 0,
 				_ctx.$slots.loading ? {
 					name: "loading",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "loading")]),
-					key: "2"
+					key: "3"
 				} : void 0,
 				_ctx.$slots.empty ? {
 					name: "empty",
 					fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps(slotProps)))]),
-					key: "3"
+					key: "4"
 				} : void 0
 			]), 1040, [
 				"search",
@@ -16618,15 +16772,20 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))]),
 								key: "1"
 							} : void 0,
+							_ctx.$slots.heading ? {
+								name: "heading",
+								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "heading", normalizeProps(guardReactiveProps(slotProps)))]),
+								key: "2"
+							} : void 0,
 							_ctx.$slots.loading ? {
 								name: "loading",
 								fn: withCtx(() => [renderSlot(_ctx.$slots, "loading")]),
-								key: "2"
+								key: "3"
 							} : void 0,
 							_ctx.$slots.empty ? {
 								name: "empty",
 								fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", normalizeProps(guardReactiveProps(slotProps)))]),
-								key: "3"
+								key: "4"
 							} : void 0
 						]), 1040, [
 							"search",
@@ -35045,8 +35204,6 @@ var workletMain = () => {
 	const M = Math;
 	const lcgrand = (seed = 1) => (a = 0, b = 1) => a + M.abs(b - a) * (M.imul(48271, seed = M.imul(214013, seed) + 2531011) & 2147483647) / 2147483647;
 	const pol2vec = (l, a = 0) => [l * M.cos(a), l * M.sin(a)];
-	const vecmag = ([x, y]) => M.sqrt(x * x + y * y);
-	const vecnorm = ([x, y], l = vecmag([x, y])) => l === 0 ? [0, 0] : [x / l, y / l];
 	const trapezoidalWave = (l, a, b) => {
 		const s = M.max(a, l - b);
 		return (t) => {
@@ -35154,18 +35311,18 @@ var workletMain = () => {
 			const lineHeight = height - 2 * vgap;
 			const wordDist = mimicWords ? makeWordDistribution(lineWidth, lineHeight, M.max(12, lineHeight / 4)) : (x) => x * (width - 2 * hgap);
 			ctx.clearRect(0, 0, size.width, size.height);
+			const l = parseInt(accent[2] ?? "0");
+			const ldir = l > 50 ? -1 : 1;
+			const hue = `hsl(${accent[0]} ${accent[1]} `;
 			for (let i = 0; i < world.n; ++i) {
 				const x0 = hgap + wordDist(rand());
 				const y0 = rand(vgap, height - vgap);
 				const v0mag = rand(vmin, vmax);
 				const size0 = rand(1, 1 + sizedev);
-				const l = parseInt(accent[2] ?? "0");
-				const ldir = l > 50 ? -1 : 1;
 				const lightness = M.floor(clamp(0, l + ldir * rand(0, 30), 100));
 				const v0 = pol2vec(v0mag, rand(0, M.PI * 2));
 				const vx0 = v0[0];
 				const vy0 = v0[1];
-				vecnorm(v0);
 				const shape = rand() > .5 ? "square" : "circle";
 				const lifetime = rand(.3, 1.5);
 				const respawn = rand(0, 1);
@@ -35176,11 +35333,12 @@ var workletMain = () => {
 				const x = x0 + vx0 * t;
 				const y = y0 + vy0 * t;
 				const fade = animateFadeInOut(world, i, fadeDuration);
-				const alpha = fade * (1 - t / lifetime);
+				const alpha = M.round(fade * (1 - t / lifetime) * 100);
 				const psize = fade * (size0 * visibilityFn(t));
+				if (alpha <= 0 || psize <= 0) continue;
+				ctx.fillStyle = `${hue}${lightness}% / ${alpha}%)`;
 				for (const [wx, wy] of cycleBounds([x, y], [width, height], psize / 2)) {
 					ctx.beginPath();
-					ctx.fillStyle = `hsl(${accent[0]} ${accent[1]} ${lightness}% / ${M.round(alpha * 100)}%)`;
 					if (shape === "square") ctx.rect(wx, wy, psize, psize);
 					else ctx.arc(wx, wy, psize / 2, 0, M.PI * 2);
 					ctx.closePath();
@@ -35208,23 +35366,44 @@ var DEFAULTS = {
 	mimicWords: true,
 	accent: "0 0% 20%"
 };
+var SPOILER_WORKLET_INPUTS = [
+	"--hn-nz-t",
+	"--hn-nz-stop",
+	"--hn-nz-fade",
+	"--hn-nz-gap",
+	"--hn-nz-accent",
+	"--hn-nz-words",
+	"--hn-nz-density"
+];
 var BLOCK_MAX_TILE = 293;
 var INLINE_MAX_TILE = 333;
 var GAP_RATIO = 8;
 var DEFAULT_FADE_S = 1.5;
+var CLOCK_S = 3600;
+var painters = /* @__PURE__ */ new WeakMap();
+var viewport;
+function watchViewport() {
+	viewport ??= new IntersectionObserver((entries) => {
+		for (const entry of entries) painters.get(entry.target)?.setInView(entry.isIntersecting);
+	});
+	return viewport;
+}
 var SpoilerPainter = class {
 	el;
 	maxFPS = DEFAULTS.fps;
-	t = 0;
-	t0 = 0;
-	tstop = null;
-	raf = null;
-	fadeS = 0;
+	clock = null;
+	settle;
+	running = false;
+	inView = false;
 	hidden = false;
 	destroyed = false;
 	constructor(el, options = {}) {
 		registerSpoilerWorklet();
 		this.el = el;
+		painters.set(el, this);
+		watchViewport().observe(el);
+		this.setFade(0);
+		this.setTstop(null);
 		this.update(options);
 	}
 	get isHidden() {
@@ -35232,11 +35411,17 @@ var SpoilerPainter = class {
 	}
 	update({ fps = DEFAULTS.fps, gap = DEFAULTS.gap, density = DEFAULTS.density, mimicWords = DEFAULTS.mimicWords, accent = DEFAULTS.accent } = {}) {
 		if (this.destroyed) return;
-		this.maxFPS = prefersReducedMotion() ? 0 : fps;
+		const maxFPS = prefersReducedMotion() ? 0 : fps;
+		if (maxFPS !== this.maxFPS) {
+			this.maxFPS = maxFPS;
+			if (maxFPS > 0) this.clock?.effect?.updateTiming({ easing: this.easing() });
+			else this.stopClock();
+		}
 		this.el.style.setProperty("--hn-nz-density", String(density));
 		this.el.style.setProperty("--hn-nz-accent", accent);
 		const isBlockElement = getComputedStyle(this.el).getPropertyValue("display") !== "inline";
 		this.useBackgroundStyle("auto", "auto", false);
+		this.el.style.setProperty("--hn-nz-gap", "0px 0px");
 		if (isBlockElement) {
 			this.el.style.setProperty("--hn-nz-words", "false");
 			const rect = this.el.getBoundingClientRect();
@@ -35260,71 +35445,77 @@ var SpoilerPainter = class {
 		const repeatAndPosition = tile ? "repeat left center" : "no-repeat center center";
 		this.el.style.background = `paint(hn-spoiler) ${repeatAndPosition} / ${w} ${h}`;
 	}
+	easing() {
+		return `steps(${Math.round(CLOCK_S * this.maxFPS)})`;
+	}
+	time() {
+		const elapsed = Number(this.clock?.currentTime ?? 0) / 1e3;
+		return this.maxFPS > 0 ? Math.floor(elapsed * this.maxFPS) / this.maxFPS : 0;
+	}
 	setFade(value) {
-		this.fadeS = value;
 		this.el.style.setProperty("--hn-nz-fade", `${value}s`);
 	}
-	setT(value) {
-		this.t = value;
-		this.el.style.setProperty("--hn-nz-t", value.toFixed(3));
-	}
 	setTstop(value) {
-		this.tstop = value;
-		if (value !== null) this.el.style.setProperty("--hn-nz-stop", value.toFixed(3));
-		else this.el.style.removeProperty("--hn-nz-stop");
+		this.el.style.setProperty("--hn-nz-stop", value === null ? "Infinity" : value.toFixed(3));
 	}
 	parseFade(value) {
 		if (this.maxFPS <= 0) return 0;
 		return value === true || value === void 0 ? DEFAULT_FADE_S : Number(value);
 	}
+	sync() {
+		if (!this.clock) return;
+		if (this.running && this.inView) this.clock.play();
+		else this.clock.pause();
+	}
+	stopClock() {
+		clearTimeout(this.settle);
+		this.settle = void 0;
+		this.clock?.cancel();
+		this.clock = null;
+		this.running = false;
+	}
+	setInView(value) {
+		if (this.destroyed || value === this.inView) return;
+		this.inView = value;
+		this.sync();
+	}
 	hide(animate) {
 		if (this.destroyed) return;
 		this.hidden = true;
 		this.setFade(this.parseFade(animate));
 		this.setTstop(null);
-		this.setT(0);
-		this.startAnimation();
+		this.stopClock();
+		if (this.maxFPS <= 0) return;
+		this.clock = this.el.animate({ "--hn-nz-t": [0, CLOCK_S] }, {
+			duration: CLOCK_S * 1e3,
+			easing: this.easing(),
+			iterations: Infinity
+		});
+		this.running = true;
+		this.sync();
 	}
 	reveal(animate) {
 		if (this.destroyed) return;
 		this.hidden = false;
 		const duration = this.parseFade(animate);
 		this.setFade(duration);
-		this.setTstop(this.t);
-		if (duration <= 0) this.stopAnimation();
-	}
-	frame = (now) => {
-		if (this.destroyed) return;
-		const shouldStop = this.tstop !== null && this.t > this.tstop + this.fadeS;
-		if (this.maxFPS > 0 && !shouldStop) this.raf = requestAnimationFrame(this.frame);
-		const dt = now - this.t0;
-		if (dt > 0 && dt < 1e3 / this.maxFPS) return;
-		this.setT(this.t + dt / 1e3);
-		this.t0 = now;
-	};
-	startAnimation() {
-		this.t0 = performance.now();
-		this.frame(this.t0);
-	}
-	stopAnimation() {
-		if (this.raf !== null) {
-			cancelAnimationFrame(this.raf);
-			this.raf = null;
-		}
+		this.setTstop(this.time());
+		clearTimeout(this.settle);
+		const stop = () => {
+			this.settle = void 0;
+			this.running = false;
+			this.sync();
+		};
+		if (duration <= 0) stop();
+		else this.settle = setTimeout(stop, duration * 1e3 + 1e3 / this.maxFPS);
 	}
 	destroy() {
 		this.destroyed = true;
-		this.stopAnimation();
+		this.stopClock();
+		viewport?.unobserve(this.el);
+		painters.delete(this.el);
 		this.el.style.removeProperty("background");
-		for (const prop of [
-			"--hn-nz-t",
-			"--hn-nz-stop",
-			"--hn-nz-fade",
-			"--hn-nz-gap",
-			"--hn-nz-words",
-			"--hn-nz-density",
-			"--hn-nz-accent"
-		]) this.el.style.removeProperty(prop);
+		for (const prop of SPOILER_WORKLET_INPUTS) this.el.style.removeProperty(prop);
 	}
 };
 //#endregion