@classytic/labs 0.2.0 → 0.3.0

package/dist/kit/slot-fill.mjs

@@ -2,7 +2,7 @@
 
 import { useCheckpoint } from "./pedagogy.mjs";
 import { useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/slot-fill.tsx
 /**
@@ -22,7 +22,9 @@ const norm = (v) => String(v).trim();
 function useSlotFill(slots, tiles, activity, onSolved) {
 	const [filled, setFilled] = useState({});
 	const [usedTiles, setUsedTiles] = useState(/* @__PURE__ */ new Set());
+	const [slotTile, setSlotTile] = useState({});
 	const [wrong, setWrong] = useState(null);
+	const wrongTimer = useRef(null);
 	const activeId = slots.find((s) => filled[s.id] == null)?.id ?? null;
 	const solved = slots.length > 0 && slots.every((s) => filled[s.id] != null && norm(filled[s.id]) === norm(s.answer));
 	useCheckpoint({
@@ -36,6 +38,9 @@ function useSlotFill(slots, tiles, activity, onSolved) {
 			onSolved?.();
 		}
 	}, [solved, onSolved]);
+	useEffect(() => () => {
+		if (wrongTimer.current) clearTimeout(wrongTimer.current);
+	}, []);
 	const place = (tileIdx) => {
 		if (!activeId || usedTiles.has(tileIdx)) return;
 		const slot = slots.find((s) => s.id === activeId);
@@ -45,18 +50,45 @@ function useSlotFill(slots, tiles, activity, onSolved) {
 				[activeId]: String(tiles[tileIdx])
 			}));
 			setUsedTiles((u) => new Set(u).add(tileIdx));
+			setSlotTile((m) => ({
+				...m,
+				[activeId]: tileIdx
+			}));
 			setWrong(null);
 		} else {
 			setWrong({
 				slot: activeId,
 				tile: tileIdx
 			});
-			setTimeout(() => setWrong(null), 450);
+			if (wrongTimer.current) clearTimeout(wrongTimer.current);
+			wrongTimer.current = setTimeout(() => setWrong(null), 450);
 		}
 	};
+	const clear = (slotId) => {
+		if (solved || filled[slotId] == null) return;
+		const tileIdx = slotTile[slotId];
+		setFilled((f) => {
+			const n = { ...f };
+			delete n[slotId];
+			return n;
+		});
+		setSlotTile((m) => {
+			const n = { ...m };
+			delete n[slotId];
+			return n;
+		});
+		if (tileIdx != null) setUsedTiles((u) => {
+			const n = new Set(u);
+			n.delete(tileIdx);
+			return n;
+		});
+		setWrong(null);
+	};
 	const reset = () => {
+		if (wrongTimer.current) clearTimeout(wrongTimer.current);
 		setFilled({});
 		setUsedTiles(/* @__PURE__ */ new Set());
+		setSlotTile({});
 		setWrong(null);
 		fired.current = false;
 	};
@@ -66,67 +98,72 @@ function useSlotFill(slots, tiles, activity, onSolved) {
 		solved,
 		wrong,
 		usedTiles,
+		slotTile,
 		slots,
 		tiles,
 		place,
+		clear,
 		reset
 	};
 }
-/** One inline blank, drops anywhere in a sentence/expression. Reads `fill` by slot id. */
+/** One inline blank, drops anywhere in a sentence/expression. Reads `fill` by slot id.
+*  A filled blank is tappable to clear (returns its tile to the tray) until solved. */
 function Blank({ fill, id, width = 46 }) {
 	const slot = fill.slots.find((s) => s.id === id);
 	const v = fill.filled[id];
 	const isActive = id === fill.activeId;
 	const isWrong = fill.wrong?.slot === id;
+	const clearable = v != null && !fill.solved;
+	const cellStyle = {
+		position: "relative",
+		minWidth: width,
+		height: 42,
+		padding: "0 8px",
+		borderRadius: 9,
+		display: "grid",
+		placeItems: "center",
+		fontSize: 17,
+		fontWeight: 800,
+		fontVariantNumeric: "tabular-nums",
+		fontFamily: "inherit",
+		appearance: "none",
+		background: v ? "color-mix(in oklab, var(--stage-good) 18%, transparent)" : "transparent",
+		border: `2px ${v ? "solid" : "dashed"} ${v ? "var(--stage-good)" : isActive ? "var(--stage-accent)" : "color-mix(in oklab, var(--stage-fg) 30%, transparent)"}`,
+		color: v ? "var(--stage-good)" : "var(--stage-fg)",
+		cursor: clearable ? "pointer" : "default",
+		animation: isWrong ? "slotfill-shake 0.4s" : void 0,
+		transition: "border-color 0.15s, background 0.15s"
+	};
+	const label = v ? clearable ? `filled ${v}, tap to clear` : `filled ${v}` : isActive ? "active blank" : "blank";
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [v ?? (isActive ? "▾" : ""), clearable && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "absolute -right-[7px] -top-[7px] grid size-4 place-items-center rounded-full bg-[var(--stage-good)] text-[11px] font-black leading-none text-[var(--stage-bg)] shadow-sm",
+		children: "×"
+	})] });
 	return /* @__PURE__ */ jsxs("span", {
-		style: {
-			display: "inline-grid",
-			justifyItems: "center",
-			gap: 3,
-			verticalAlign: "middle"
-		},
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-label": v ? `filled ${v}` : isActive ? "active blank" : "blank",
-			style: {
-				minWidth: width,
-				height: 42,
-				padding: "0 8px",
-				borderRadius: 9,
-				display: "grid",
-				placeItems: "center",
-				fontSize: 17,
-				fontWeight: 800,
-				fontVariantNumeric: "tabular-nums",
-				background: v ? "color-mix(in oklab, var(--stage-good) 18%, transparent)" : "transparent",
-				border: `2px ${v ? "solid" : "dashed"} ${v ? "var(--stage-good)" : isActive ? "var(--stage-accent)" : "color-mix(in oklab, var(--stage-fg) 30%, transparent)"}`,
-				color: v ? "var(--stage-good)" : "var(--stage-fg)",
-				animation: isWrong ? "slotfill-shake 0.4s" : void 0,
-				transition: "border-color 0.15s, background 0.15s"
-			},
-			children: v ?? (isActive ? "▾" : "")
+		className: "inline-grid justify-items-center gap-[3px] align-middle",
+		children: [clearable ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => fill.clear(id),
+			"aria-label": label,
+			title: "Tap to clear",
+			style: cellStyle,
+			children: content
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-label": label,
+			style: cellStyle,
+			children: content
 		}), slot?.label != null && /* @__PURE__ */ jsx("span", {
-			style: {
-				fontSize: 11,
-				color: "var(--stage-muted)",
-				fontWeight: 600
-			},
+			className: "text-[11px] font-semibold text-[var(--stage-muted)]",
 			children: slot.label
 		})]
 	});
 }
 /** The tile tray, tap a tile and it drops into the active blank. */
 function SlotTray({ fill }) {
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 10,
-			flexWrap: "wrap",
-			justifyContent: "center",
-			padding: "10px 14px",
-			borderRadius: 12,
-			background: "color-mix(in oklab, var(--stage-fg) 6%, transparent)"
-		},
-		children: [fill.tiles.map((t, i) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "mx-auto flex w-fit max-w-full flex-wrap justify-center gap-2.5 self-center rounded-xl bg-[color-mix(in_oklab,var(--stage-fg)_6%,transparent)] px-3.5 py-2.5",
+		children: fill.tiles.map((t, i) => {
 			const used = fill.usedTiles.has(i);
 			const isWrong = fill.wrong?.tile === i;
 			return /* @__PURE__ */ jsx("button", {
@@ -151,39 +188,21 @@ function SlotTray({ fill }) {
 				},
 				children: used ? "" : t
 			}, i);
-		}), /* @__PURE__ */ jsx("style", { children: `@keyframes slotfill-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}` })]
+		})
 	});
 }
 /** Row layout: labelled blanks in a bordered strip + the tray. The common case. */
 function SlotFill({ slots, tiles, activity, prompt, onSolved }) {
 	const fill = useSlotFill(slots, tiles, activity, onSolved);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose",
-		style: {
-			display: "grid",
-			gap: 12,
-			justifyItems: "center",
-			marginTop: 8
-		},
+		className: "not-prose mt-2 grid justify-items-center gap-3",
 		children: [
 			prompt && /* @__PURE__ */ jsx("p", {
-				style: {
-					margin: 0,
-					fontWeight: 600,
-					textAlign: "center"
-				},
+				className: "m-0 text-center font-semibold",
 				children: prompt
 			}),
 			/* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					gap: 12,
-					flexWrap: "wrap",
-					justifyContent: "center",
-					padding: "10px 14px",
-					borderRadius: 12,
-					border: "1px solid color-mix(in oklab, var(--stage-fg) 14%, transparent)"
-				},
+				className: "flex flex-wrap justify-center gap-3 rounded-xl border border-[color-mix(in_oklab,var(--stage-fg)_14%,transparent)] px-3.5 py-2.5",
 				children: slots.map((s) => /* @__PURE__ */ jsx(Blank, {
 					fill,
 					id: s.id
@@ -192,11 +211,7 @@ function SlotFill({ slots, tiles, activity, prompt, onSolved }) {
 			/* @__PURE__ */ jsx(SlotTray, { fill }),
 			fill.solved && /* @__PURE__ */ jsx("p", {
 				role: "status",
-				style: {
-					margin: 0,
-					color: "var(--stage-good)",
-					fontWeight: 700
-				},
+				className: "m-0 font-bold text-[var(--stage-good)]",
 				children: "✓ Nice, that's the pattern."
 			})
 		]

package/dist/kit/steps.d.mts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 
 //#region src/kit/steps.d.ts
+/** @deprecated Use `useLearningSequence` with `LearningSequenceNav`. */
 interface Steps {
   step: number;
   total: number;
@@ -10,7 +11,9 @@ interface Steps {
   prev: () => void;
   setStep: (n: number) => void;
 }
+/** @deprecated Use `useLearningSequence` with authored step data. */
 declare function useSteps(total: number): Steps;
+/** @deprecated Use `LearningSequenceNav` inside `Activity.Transport`. */
 declare function StepNav({
   steps,
   nextLabel,

package/dist/kit/steps.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { ActionButton } from "./controls.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -10,6 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * hits Continue. Pure UI state; pair with `<StepNav>` (Back / dots / Continue).
 * (Distinct from stage's cross-block StepProgress, this is within a single lab.)
 */
+/** @deprecated Use `useLearningSequence` with authored step data. */
 function useSteps(total) {
 	const [step, setStep] = useState(0);
 	const clamp = (n) => Math.max(0, Math.min(total - 1, n));
@@ -23,13 +25,13 @@ function useSteps(total) {
 		setStep: (n) => setStep(clamp(n))
 	};
 }
+/** @deprecated Use `LearningSequenceNav` inside `Activity.Transport`. */
 function StepNav({ steps, nextLabel = "Continue", doneLabel = "Done" }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "lab-stepnav",
 		children: [
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "lab-btn lab-btn-ghost",
+			/* @__PURE__ */ jsx(ActionButton, {
+				className: "lab-btn-ghost",
 				onClick: steps.prev,
 				disabled: steps.atStart,
 				children: "← Back"
@@ -42,9 +44,7 @@ function StepNav({ steps, nextLabel = "Continue", doneLabel = "Done" }) {
 					"data-on": i <= steps.step
 				}, i))
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "lab-btn",
+			/* @__PURE__ */ jsx(ActionButton, {
 				onClick: steps.next,
 				disabled: steps.atEnd,
 				children: steps.atEnd ? doneLabel : nextLabel

package/dist/kit/thermal.mjs

@@ -7,6 +7,14 @@ const METAL = "var(--stage-metal, #8a8a8a)";
 const BG = "var(--stage-bg, #fff)";
 const FG = "var(--stage-fg, #222)";
 const GLASS = "color-mix(in oklab, var(--stage-fg) 28%, transparent)";
+/** Apparatus labels sit ON the drawing (under a beaker, over a thermometer), so they carry the
+same paper halo every other scene label does and stay readable across a stroke they cross. */
+const HALO = {
+	paintOrder: "stroke",
+	stroke: BG,
+	strokeWidth: 3.5,
+	strokeLinejoin: "round"
+};
 /** Blue (cold) → red (hot) along a 0..1 fraction, in perceptual space. */
 function thermalColor(frac) {
 	return `color-mix(in oklab, #e23b3b ${(Math.max(0, Math.min(1, frac)) * 100).toFixed(0)}%, #2b7fff)`;
@@ -35,8 +43,16 @@ function ThermometerGlyph({ cx, top, h, frac, label }) {
 				cy: bulbCy,
 				r: bulbR,
 				fill: col,
-				stroke: METAL,
-				strokeWidth: 2
+				stroke: GLASS,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: cx - bulbR * .32,
+				cy: bulbCy - bulbR * .34,
+				rx: bulbR * .3,
+				ry: bulbR * .22,
+				fill: "var(--stage-sheen, #fff)",
+				opacity: .5
 			}),
 			/* @__PURE__ */ jsx("rect", {
 				x: cx - stemW / 2,
@@ -45,8 +61,8 @@ function ThermometerGlyph({ cx, top, h, frac, label }) {
 				height: colBot - stemTop,
 				rx: stemW / 2,
 				fill: BG,
-				stroke: METAL,
-				strokeWidth: 2
+				stroke: GLASS,
+				strokeWidth: 1.5
 			}),
 			/* @__PURE__ */ jsx("rect", {
 				x: cx - stemW / 2 + 2.5,
@@ -85,6 +101,7 @@ function ThermometerGlyph({ cx, top, h, frac, label }) {
 				fontSize: 12,
 				fontWeight: 700,
 				fill: FG,
+				...HALO,
 				children: label
 			})
 		]
@@ -197,6 +214,7 @@ function BeakerGlyph({ x, y, w, h, fillFrac, color, boiling = 0, steam = 0, iceF
 			fontSize: 12,
 			fontWeight: 700,
 			fill: FG,
+			...HALO,
 			children: label
 		})
 	] });

package/dist/kit/ticks.mjs

@@ -0,0 +1,19 @@
+//#region src/kit/ticks.ts
+/** Roughly how wide a number renders, in px: digits average a little over half an em. */
+const widthOf = (text, size) => text.length * size * .58;
+/** The ticks whose number can be printed, in their original order. */
+function clearTicks(ticks, keepClear = [], size = 11) {
+	const taken = keepClear.map((s) => [s.at - s.half, s.at + s.half]);
+	const kept = [];
+	for (const tick of ticks) {
+		const half = widthOf(tick.text, size) / 2 + 2;
+		const span = [tick.at - half, tick.at + half];
+		if (taken.some(([l, r]) => span[0] < r && l < span[1])) continue;
+		taken.push(span);
+		kept.push(tick);
+	}
+	return kept;
+}
+
+//#endregion
+export { clearTicks };

package/dist/kit/vessel.mjs

@@ -13,7 +13,7 @@ const TONE_COLOR = {
 	no: "var(--stage-warn)"
 };
 /** The pure <g> vessel, glass + liquid + objects + optional reading line. */
-function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", objects = 0, objectColor = "#e85aa6", guessFrac, guessTone = "idle" }) {
+function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", objects = 0, objectColor = "var(--stage-object, #e85aa6)", guessFrac, guessTone = "idle" }) {
 	const lipH = 6;
 	const wall = 3;
 	const innerTop = y + lipH;
@@ -46,7 +46,7 @@ function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", obje
 					cx: cxp - r * .32,
 					cy: cyp - r * .32,
 					r: r * .3,
-					fill: "#fff",
+					fill: "var(--stage-sheen, #fff)",
 					opacity: .55
 				})]
 			}, `o${i}`));
@@ -61,7 +61,16 @@ function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", obje
 			width: innerW,
 			height: Math.max(0, innerBot - liquidTop),
 			fill: color,
-			fillOpacity: .4,
+			fillOpacity: .5,
+			style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: liquidTop,
+			width: Math.max(3, innerW * .24),
+			height: Math.max(0, innerBot - liquidTop),
+			fill: "var(--stage-sheen, #fff)",
+			opacity: .2,
 			style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
 		}),
 		liq > .02 && /* @__PURE__ */ jsx("ellipse", {
@@ -70,7 +79,7 @@ function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", obje
 			rx: innerW / 2,
 			ry: 3.5,
 			fill: color,
-			fillOpacity: .7,
+			fillOpacity: .85,
 			style: { transition: "cy 0.5s ease-out" }
 		}),
 		cubes,
@@ -82,6 +91,16 @@ function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", obje
 			strokeLinejoin: "round",
 			strokeLinecap: "round"
 		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: lx + 2.5,
+			y1: innerTop + 5,
+			x2: lx + 2.5,
+			y2: innerBot - 5,
+			stroke: "var(--stage-sheen, #fff)",
+			strokeWidth: 2,
+			opacity: .28,
+			strokeLinecap: "round"
+		}),
 		/* @__PURE__ */ jsx("line", {
 			x1: x - 3,
 			y1: y,
@@ -111,16 +130,16 @@ function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", obje
 	] });
 }
 /** Self-contained vessel (its own <svg>), drops in beside a graph as the concrete twin. */
-function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "idle", objects = 0, liquidColor = "var(--stage-accent)", objectColor = "#e85aa6", label, scaleMax, scaleStep, unit }) {
+function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "idle", objects = 0, liquidColor = "var(--stage-accent)", objectColor = "var(--stage-object, #e85aa6)", label, scaleMax, scaleStep, unit }) {
 	const padL = scaleMax != null ? 4 : 8;
 	const padR = scaleMax != null ? 34 : 8;
-	const padTop = 10;
+	const padTop = unit && scaleMax != null ? 22 : 10;
 	const padBot = label ? 26 : 10;
 	const vx = padL;
 	const vw = width - padL - padR;
 	const vy = padTop;
 	const vh = height - padTop - padBot;
-	const innerTop = 16;
+	const innerTop = vy + 6;
 	const innerBot = vy + vh - 3;
 	const innerH = innerBot - innerTop;
 	const ticks = [];
@@ -166,9 +185,10 @@ function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "i
 				guessTone
 			}),
 			unit && scaleMax != null && /* @__PURE__ */ jsx("text", {
-				x: vx + vw + 8,
-				y: 12,
+				x: vx + vw + 5,
+				y: 7,
 				fontSize: 9,
+				fontWeight: 600,
 				fill: MUTED,
 				dominantBaseline: "hanging",
 				children: unit
@@ -181,8 +201,7 @@ function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "i
 				fill: FG,
 				textAnchor: "middle",
 				children: label
-			}),
-			/* @__PURE__ */ jsx("style", { children: `@keyframes vessel-drop{from{transform:translateY(-34px);opacity:0}to{transform:translateY(0);opacity:1}}` })
+			})
 		]
 	});
 }

package/dist/lab-def/attrs.d.mts

@@ -0,0 +1,31 @@
+//#region src/lab-def/attrs.d.ts
+/**
+ * Tolerant parsing for authored block attributes.
+ *
+ * A lab's structured props (a vocab deck, a question list, a rows table) travel as MDX JSX
+ * attributes. MDX itself accepts any JavaScript expression, so a perfectly ordinary lesson can
+ * carry:
+ *
+ *     <WordMatch deck={{termLang:"en-US",items:[{term:"water",translation:"পানি"}]}} />
+ *
+ * That is valid MDX and renders correctly through the MDX compiler, but the editor's
+ * MDX↔Slate round-trip reads expression attributes with `JSON.parse`, which rejects unquoted
+ * keys. The value then arrives at the lab as a raw string and the lab throws ("Language deck
+ * must be valid JSON") — a dead block for content that was never actually wrong.
+ *
+ * A second shape shows up when a structured prop was a STRING at save time: it is written as a
+ * QUOTED attribute, so the JSON's own double quotes come back HTML-entity-escaped (`&#x22;`).
+ *
+ * `parseAuthoredValue` accepts strict JSON, entity-escaped JSON, and plain JS object-literal
+ * syntax, and returns the input untouched when it is none of those — so a genuine string prop
+ * is never mangled and genuinely broken data still surfaces as an error the author can see.
+ */
+/**
+ * Parse an authored attribute that is meant to be structured. Returns the parsed value, or the
+ * original input when it is not structured text or cannot be recovered.
+ */
+declare function parseAuthoredValue(raw: unknown): unknown;
+/** Apply `parseAuthoredValue` to every attribute of a block node. */
+declare function parseAuthoredAttrs(raw: Record<string, unknown>): Record<string, unknown>;
+//#endregion
+export { parseAuthoredAttrs, parseAuthoredValue };

package/dist/lab-def/attrs.mjs

@@ -0,0 +1,65 @@
+//#region src/lab-def/attrs.ts
+/**
+* Tolerant parsing for authored block attributes.
+*
+* A lab's structured props (a vocab deck, a question list, a rows table) travel as MDX JSX
+* attributes. MDX itself accepts any JavaScript expression, so a perfectly ordinary lesson can
+* carry:
+*
+*     <WordMatch deck={{termLang:"en-US",items:[{term:"water",translation:"পানি"}]}} />
+*
+* That is valid MDX and renders correctly through the MDX compiler, but the editor's
+* MDX↔Slate round-trip reads expression attributes with `JSON.parse`, which rejects unquoted
+* keys. The value then arrives at the lab as a raw string and the lab throws ("Language deck
+* must be valid JSON") — a dead block for content that was never actually wrong.
+*
+* A second shape shows up when a structured prop was a STRING at save time: it is written as a
+* QUOTED attribute, so the JSON's own double quotes come back HTML-entity-escaped (`&#x22;`).
+*
+* `parseAuthoredValue` accepts strict JSON, entity-escaped JSON, and plain JS object-literal
+* syntax, and returns the input untouched when it is none of those — so a genuine string prop
+* is never mangled and genuinely broken data still surfaces as an error the author can see.
+*/
+/** Undo the entity escaping a quoted MDX attribute applies to the text inside it. */
+function decodeEntities(source) {
+	return source.replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCodePoint(Number.parseInt(hex, 16))).replace(/&#(\d+);/g, (_, dec) => String.fromCodePoint(Number(dec))).replace(/&quot;/g, "\"").replace(/&apos;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+/**
+* Quote bare object keys so a JS object literal becomes JSON. Only keys immediately after `{`
+* or `,` are touched, and the result is validated by the caller's `JSON.parse`, so a false
+* positive inside a string value fails closed rather than corrupting the value.
+*/
+function quoteBareKeys(source) {
+	return source.replace(/([{,]\s*)([A-Za-z_$][\w$]*)\s*:/g, "$1\"$2\":");
+}
+const STRUCTURED = /^\s*(?:[[{]|&#x5[BD];|&lt;)/;
+/**
+* Parse an authored attribute that is meant to be structured. Returns the parsed value, or the
+* original input when it is not structured text or cannot be recovered.
+*/
+function parseAuthoredValue(raw) {
+	if (typeof raw !== "string") return raw;
+	if (!STRUCTURED.test(raw)) return raw;
+	const attempts = [
+		(s) => s,
+		decodeEntities,
+		quoteBareKeys,
+		(s) => quoteBareKeys(decodeEntities(s))
+	];
+	for (const attempt of attempts) try {
+		return JSON.parse(attempt(raw.trim()));
+	} catch {}
+	return raw;
+}
+/** Apply `parseAuthoredValue` to every attribute of a block node. */
+function parseAuthoredAttrs(raw) {
+	const out = {};
+	for (const [key, value] of Object.entries(raw)) {
+		const parsed = parseAuthoredValue(value);
+		if (parsed !== value) out[key] = parsed;
+	}
+	return out;
+}
+
+//#endregion
+export { parseAuthoredAttrs, parseAuthoredValue };