@rohal12/spindle 0.59.12 → 0.59.13

package/dist/pkg/headless.js

@@ -11791,7 +11791,7 @@ var InlineContext = createContext(false);
 /**
 * True while rendering inside an element whose content is not markdown: SVG
 * (whose namespace `<p>` wrappers would break) and the preformatted `<pre>`
-* and `<textarea>`, whose text (indentation, `#`, `*`, ...) is literal.
+* `<textarea>` and `<style>`, whose text (indentation, `#`, `*`, ...) is literal.
 * Macro and widget bodies read it so their content stays literal too.
 */
 var RawTextContext = createContext(false);
@@ -11802,7 +11802,11 @@ var RawTextContext = createContext(false);
 var SvgContext = createContext(false);
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 /** Elements whose content is literal text, not markdown. */
-var PREFORMATTED_ELEMENTS = new Set(["pre", "textarea"]);
+var PREFORMATTED_ELEMENTS = new Set([
+	"pre",
+	"textarea",
+	"style"
+]);
 var WidgetChildrenContext = createContext(null);
 function placeholderHtml(nonce, index) {
 	return `<span data-tw=${nonce}:${index}></span>`;
@@ -12021,6 +12025,7 @@ var INLINE_ELEMENTS = new Set([
 	"span",
 	"strong",
 	"sub",
+	"summary",
 	"sup",
 	"time",
 	"u",
@@ -12225,6 +12230,12 @@ function resolveAttributeValue(name, value, scope, errors) {
 	for (const error of result.errors) errors.push([name, error]);
 	return result.text;
 }
+/** The index of the summary element opening `nodes`, or -1 when none does. */
+function leadingSummaryIndex(nodes) {
+	const at = nodes.findIndex((n) => n.type !== "text" || n.value.trim() !== "");
+	const first = nodes[at];
+	return first?.type === "html" && first.tag.toLowerCase() === "summary" ? at : -1;
+}
 function HtmlNodeRenderer({ node }) {
 	const scope = useTextScope();
 	const { nobr, locals, raw: inRaw, inline: parentInline } = useRenderOptions();
@@ -12244,11 +12255,17 @@ function HtmlNodeRenderer({ node }) {
 	let children = void 0;
 	if (node.children.length > 0) if (inRaw || isRawRoot) children = renderInlineNodes(node.children);
 	else {
-		children = renderNodes(node.children, {
+		const summaryAt = tag === "details" ? leadingSummaryIndex(node.children) : -1;
+		const body = (nodes) => renderNodes(nodes, {
 			nobr,
 			locals,
 			inline: isInline
 		});
+		children = summaryAt === -1 ? body(node.children) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			body(node.children.slice(0, summaryAt)),
+			renderSingleNode(node.children[summaryAt]),
+			body(node.children.slice(summaryAt + 1))
+		] });
 		if (isInline !== parentInline) children = /* @__PURE__ */ jsx(InlineContext.Provider, {
 			value: isInline,
 			children
@@ -15582,6 +15599,26 @@ var clonersFor = (paths) => {
 function frozenCopy(value) {
 	return freeze(cloneValue(value), true);
 }
+/** Whether `value` and everything it holds is frozen. */
+function deeplyFrozen(value, seen = /* @__PURE__ */ new Set()) {
+	if (typeof value !== "object" || value === null || seen.has(value)) return true;
+	if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) return true;
+	if (!Object.isFrozen(value)) return false;
+	seen.add(value);
+	return Reflect.ownKeys(value).every((key) => {
+		const desc = Object.getOwnPropertyDescriptor(value, key);
+		return !desc || !("value" in desc) || deeplyFrozen(desc.value, seen);
+	});
+}
+/**
+* A value read from the store, made safe to hand out: the store holds plain
+* values frozen, but not registered class instances, whose methods could
+* change the recorded history through the live object. Such a value is
+* returned as a frozen copy, like a read inside mutation code.
+*/
+function readOnlyValue(value) {
+	return deeplyFrozen(value) ? value : frozenCopy(value);
+}
 /**
 * Apply a write that reached the store while mutations execute to their
 * `work` and `base` copies (see MutationScope), so the code sees it and
@@ -17265,7 +17302,8 @@ var FOCUSABLE = [
 	"select:not([disabled])",
 	"textarea:not([disabled])",
 	"iframe",
-	"[contenteditable=\"true\"]",
+	"summary",
+	"[contenteditable]",
 	"[tabindex]"
 ].join(",");
 /**
@@ -17293,6 +17331,11 @@ function tabIndexAttr(el) {
 function isTabStop(el) {
 	const tabIndex = tabIndexAttr(el);
 	if (tabIndex !== null && tabIndex < 0) return false;
+	if (el.hasAttribute("contenteditable") && !el.matches("a[href], button, input, select, textarea, iframe, summary") && (!el.isContentEditable || el.parentElement?.isContentEditable)) return false;
+	if (el.localName === "summary") {
+		const details = el.parentElement;
+		if (details?.localName !== "details" || Array.from(details.children).find((c) => c.localName === "summary") !== el) return tabIndex !== null;
+	}
 	if (el instanceof HTMLInputElement && el.type === "radio" && el.name) {
 		const group = Array.from((el.form ?? el.getRootNode()).querySelectorAll("input[type=\"radio\"]")).filter((r) => r.name === el.name && r.form === el.form && !r.disabled);
 		return el === (group.find((r) => r.checked) ?? group[0]);
@@ -17816,18 +17859,38 @@ var settings = {
 //#endregion
 //#region src/utils/control-edits.ts
 /**
-* Counts the edits a reader made through a control bound to a story
+* Records the edits a reader made through a control bound to a story
 * variable (`{textbox}`, `{checkbox}`, ...). {for} tells these apart from a
 * list that is replaced: typing into a control inside an iteration changes
 * its item, but must not remount the iteration and drop the control's focus.
+* An edit is attributed to the variable path it wrote, so a replacement made
+* elsewhere (a watcher reacting to the edit) still remounts.
 */
 var version = 0;
-function noteControlEdit() {
-	version++;
+var MAX_LOG = 256;
+var log = [];
+function noteControlEdit(segments) {
+	log.push({
+		version: ++version,
+		segments
+	});
+	if (log.length > MAX_LOG) log.shift();
 }
 function controlEditVersion() {
 	return version;
 }
+/**
+* Whether an edit since `since` wrote inside `item`, element `index` of
+* `list`: the path leads through the item (compared by reference in
+* `variables`), or, for a primitive item, ends at its slot in the list.
+*/
+function editedItem(since, variables, list, item, index) {
+	return log.some(({ version: v, segments }) => {
+		if (v <= since) return false;
+		if (typeof item === "object" && item !== null) return segments.some((_, n) => getByPath(variables, segments.slice(0, n + 1)) === item);
+		return segments[segments.length - 1] === String(index) && getByPath(variables, segments.slice(0, -1)) === list;
+	});
+}
 //#endregion
 //#region src/action-registry.ts
 /** The fields of a StoryAction that are left out when unset. */
@@ -18073,7 +18136,7 @@ function defineMacro(config, source = "builtin") {
 			ctx.value = useStoryStore((s) => getByPath(s.variables, segments));
 			ctx.getValue = () => getByPath(readState().variables, segments);
 			ctx.setValue = (value) => {
-				noteControlEdit();
+				noteControlEdit(segments);
 				mutateState((work, adopt) => {
 					setByPath(work.variables, segments, adopt(value), { createMissing: true });
 				});
@@ -18208,7 +18271,7 @@ function createStoryAPI() {
 			const source = scope ?? useStoryStore.getState();
 			const namespace = isTransient ? source.transient : source.variables;
 			const value = key.includes(".") ? getByPath(namespace, key.split(".")) : ownValue(namespace, key);
-			return scope ? frozenCopy(value) : value;
+			return scope ? frozenCopy(value) : readOnlyValue(value);
 		},
 		set(nameOrVars, value) {
 			const entries = typeof nameOrVars === "string" ? [[nameOrVars, value]] : Object.entries(nameOrVars);
@@ -18920,7 +18983,8 @@ var PRIMITIVE_SAMPLES = {
 };
 function inferSchema(value) {
 	if (Array.isArray(value)) return { type: "array" };
-	if (value !== null && typeof value === "object") {
+	if (value === null) return { type: "null" };
+	if (typeof value === "object") {
 		const fields = /* @__PURE__ */ new Map();
 		for (const [key, val] of Object.entries(value)) fields.set(key, inferSchema(val));
 		return {
@@ -18983,6 +19047,7 @@ function validateRef(ref, schema) {
 	for (let i = 1; i < parts.length; i++) {
 		const part = parts[i];
 		if (current.type === "array") return null;
+		if (current.type === "null") return null;
 		const sample = PRIMITIVE_SAMPLES[current.type];
 		if (sample && part in sample) {
 			const memberType = typeof sample[part];
@@ -19211,23 +19276,31 @@ function assignmentArgs(rawArgs, args) {
 /**
 * Evaluate `expr` against the current values — the store's state and the
 * enclosing locals scope's live values (`getLocals`) — and write the result
-* to the target if it differs from the previous output (always, the first
+* to the target if it differs from the previous output or the target's value (always, the first
 * time). Reading live values rather than the render's snapshot means the
 * first computation sees a local a preceding {set} just assigned (the scope's
 * context value only catches up on its re-render), and the first computation
 * and later recomputations read the same source.
 */
-function computeAndApply(expr, name, isTemp, isLocal, getLocals, rawArgs, prevRef, localsUpdate) {
+function computeAndApply(expr, name, isTemp, isLocal, getLocals, rawArgs, prevRef, lastNavigation, localsUpdate) {
 	const location = currentSourceLocation();
 	let newValue;
+	let current = prevRef.current;
+	let navigated = false;
+	const { navigationId } = useStoryStore.getState();
 	try {
 		const { variables, temporary, transient } = readState();
+		if (!isLocal) {
+			current = ownValue(isTemp ? temporary : variables, name);
+			navigated = navigationId !== lastNavigation.current;
+		}
 		newValue = evaluate(expr, variables, temporary, getLocals(), transient);
 	} catch (err) {
 		logMacroError(`computed ${rawArgs}`, err, location);
 		return;
 	}
-	if (!deepEqualStrict(prevRef.current, newValue)) {
+	lastNavigation.current = navigationId;
+	if (!deepEqualStrict(prevRef.current, newValue) || navigated && !deepEqualStrict(current, newValue)) {
 		prevRef.current = newValue;
 		if (isLocal) try {
 			localsUpdate(name, newValue);
@@ -19276,7 +19349,8 @@ defineMacro({
 		const name = target.slice(1);
 		const localsUpdate = isLocal ? ctx.update : null;
 		const prevOutput = ctx.hooks.useRef(UNSET);
-		const compute = () => computeAndApply(expr, name, isTemp, isLocal, ctx.getValues, rawArgs, prevOutput, localsUpdate);
+		const lastNavigation = ctx.hooks.useRef(-1);
+		const compute = () => computeAndApply(expr, name, isTemp, isLocal, ctx.getValues, rawArgs, prevOutput, lastNavigation, localsUpdate);
 		const ran = ctx.hooks.useRef(false);
 		if (!ran.current) {
 			ran.current = true;
@@ -19539,11 +19613,12 @@ defineMacro({
 			});
 		}
 		const { itemVar, indexVar } = loop;
-		const edited = controlEditVersion() !== keys.edits;
+		const since = keys.edits;
+		const { variables } = readState();
 		keys.edits = controlEditVersion();
 		const generations = list.map((item, i) => {
 			const contents = stableKey(item);
-			if (keys.generations[i] === void 0 || contents !== keys.contents[i] && !edited) keys.generations[i] = keys.next++;
+			if (keys.generations[i] === void 0 || contents !== keys.contents[i] && !editedItem(since, variables, list, item, i)) keys.generations[i] = keys.next++;
 			keys.contents[i] = contents;
 			return keys.generations[i];
 		});
@@ -19937,12 +20012,13 @@ defineMacro({
 		const containerRef = useRef(null);
 		const innerRef = useRef(null);
 		const [clip, setClip] = useState();
-		const [totalChars, setTotalChars] = useState(0);
+		const [measured, setMeasured] = useState(null);
+		const totalChars = measured ?? 0;
 		const [visibleChars, setVisibleChars] = useState(0);
 		const visibleCharsRef = useRef(0);
 		visibleCharsRef.current = visibleChars;
 		useEffect(() => {
-			if (containerRef.current) setTotalChars((containerRef.current.textContent || "").length);
+			if (containerRef.current) setMeasured((containerRef.current.textContent || "").length);
 		});
 		useEffect(() => {
 			if (totalChars === 0) return;
@@ -19958,7 +20034,7 @@ defineMacro({
 			}, speed);
 			return () => clearInterval(timer);
 		}, [totalChars, speed]);
-		const done = visibleChars >= totalChars && totalChars > 0;
+		const done = measured !== null && visibleChars >= totalChars;
 		useLayoutEffect(() => {
 			const root = containerRef.current;
 			const inner = innerRef.current;
@@ -19989,7 +20065,7 @@ defineMacro({
 				class: "macro-type-inner",
 				style: {
 					display: "inline",
-					visibility: totalChars === 0 ? "hidden" : "visible",
+					visibility: measured === null ? "hidden" : "visible",
 					clipPath: clip
 				},
 				children: ctx.renderInlineNodes(children)

package/dist/pkg/story-variables.js

@@ -11082,7 +11082,8 @@ var VALID_VAR_TYPES = new Set([
 ]);
 function inferSchema(value) {
 	if (Array.isArray(value)) return { type: "array" };
-	if (value !== null && typeof value === "object") {
+	if (value === null) return { type: "null" };
+	if (typeof value === "object") {
 		const fields = /* @__PURE__ */ new Map();
 		for (const [key, val] of Object.entries(value)) fields.set(key, inferSchema(val));
 		return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.59.12",
+  "version": "0.59.13",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/components/macros/Computed.tsx

@@ -5,7 +5,7 @@ import { deepEqualStrict } from '../../structural';
 import { defineMacro } from '../../define-macro';
 import { MacroError, logMacroError } from './MacroError';
 import { currentSourceLocation } from '../../utils/source-location';
-import { checkVariableName } from '../../utils/namespace';
+import { checkVariableName, ownValue } from '../../utils/namespace';
 
 /**
  * The previous output before the first successful evaluation. Distinct from
@@ -39,7 +39,7 @@ function assignmentArgs(
 /**
  * Evaluate `expr` against the current values — the store's state and the
  * enclosing locals scope's live values (`getLocals`) — and write the result
- * to the target if it differs from the previous output (always, the first
+ * to the target if it differs from the previous output or the target's value (always, the first
  * time). Reading live values rather than the render's snapshot means the
  * first computation sees a local a preceding {set} just assigned (the scope's
  * context value only catches up on its re-render), and the first computation
@@ -53,22 +53,39 @@ function computeAndApply(
   getLocals: () => Record<string, unknown>,
   rawArgs: string,
   prevRef: { current: unknown },
+  lastNavigation: { current: number },
   localsUpdate: ((key: string, value: unknown) => void) | null,
 ): void {
   // Before evaluating: the expression may navigate away from this passage
   const location = currentSourceLocation();
   let newValue: unknown;
+  let current: unknown = prevRef.current;
+  let navigated = false;
+  const { navigationId } = useStoryStore.getState();
   try {
     // In program order, also when mutation code sets this off
     const { variables, temporary, transient } = readState();
+    // A navigation (or restored session) resets the temporary namespace,
+    // which a persistent {computed} survives: the target is then gone though
+    // the result is unchanged, and is written again. Between navigations a
+    // target the story removed or set itself stays as it is.
+    if (!isLocal) {
+      current = ownValue(isTemp ? temporary : variables, name);
+      navigated = navigationId !== lastNavigation.current;
+    }
     newValue = evaluate(expr, variables, temporary, getLocals(), transient);
   } catch (err) {
     logMacroError(`computed ${rawArgs}`, err, location);
     return;
   }
 
+  lastNavigation.current = navigationId;
+
   // Strict: a change of only the aliases inside the result is a change
-  if (!deepEqualStrict(prevRef.current, newValue)) {
+  if (
+    !deepEqualStrict(prevRef.current, newValue) ||
+    (navigated && !deepEqualStrict(current, newValue))
+  ) {
     prevRef.current = newValue;
     if (isLocal) {
       try {
@@ -111,6 +128,8 @@ defineMacro({
     const localsUpdate = isLocal ? ctx.update : null;
 
     const prevOutput = ctx.hooks.useRef<unknown>(UNSET);
+    // The navigation the target was last checked in
+    const lastNavigation = ctx.hooks.useRef(-1);
 
     const compute = () =>
       computeAndApply(
@@ -121,6 +140,7 @@ defineMacro({
         ctx.getValues,
         rawArgs,
         prevOutput,
+        lastNavigation,
         localsUpdate,
       );
 

package/src/components/macros/For.tsx

@@ -3,9 +3,10 @@ import { LocalsValuesContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import { stableKey } from '../../utils/stable-key';
-import { controlEditVersion } from '../../utils/control-edits';
+import { controlEditVersion, editedItem } from '../../utils/control-edits';
 import type { ASTNode } from '../../markup/ast';
 import { checkVariableName } from '../../utils/namespace';
+import { readState } from '../../execute-mutation';
 import { LocalsScope } from './locals-scope';
 
 /**
@@ -131,13 +132,15 @@ defineMacro({
     // macros run again for the new item (#45) -- unless the change is a
     // reader editing the item through a control: remounting would drop the
     // control's focus after the first keystroke.
-    const edited = controlEditVersion() !== keys.edits;
+    const since = keys.edits;
+    const { variables } = readState();
     keys.edits = controlEditVersion();
     const generations = list.map((item, i) => {
       const contents = stableKey(item);
       if (
         keys.generations[i] === undefined ||
-        (contents !== keys.contents[i] && !edited)
+        (contents !== keys.contents[i] &&
+          !editedItem(since, variables, list, item, i))
       ) {
         keys.generations[i] = keys.next++;
       }

package/src/components/macros/Type.tsx

@@ -49,7 +49,10 @@ defineMacro({
     const containerRef = useRef<HTMLSpanElement>(null);
     const innerRef = useRef<HTMLSpanElement>(null);
     const [clip, setClip] = useState<string | undefined>();
-    const [totalChars, setTotalChars] = useState(0);
+    // Null until the content has been measured: zero characters is then a
+    // result (nothing to animate), not a pending measurement.
+    const [measured, setMeasured] = useState<number | null>(null);
+    const totalChars = measured ?? 0;
     const [visibleChars, setVisibleChars] = useState(0);
     const visibleCharsRef = useRef(0);
     visibleCharsRef.current = visibleChars;
@@ -59,7 +62,7 @@ defineMacro({
     useEffect(() => {
       if (containerRef.current) {
         const text = containerRef.current.textContent || '';
-        setTotalChars(text.length);
+        setMeasured(text.length);
       }
     });
 
@@ -81,7 +84,8 @@ defineMacro({
       return () => clearInterval(timer);
     }, [totalChars, speed]);
 
-    const done = visibleChars >= totalChars && totalChars > 0;
+    // Empty text can still become reactive text later, which restarts typing
+    const done = measured !== null && visibleChars >= totalChars;
 
     // Clip to the characters revealed so far, as laid out: remeasured when
     // the count changes and when the width the text wraps in does.
@@ -117,7 +121,7 @@ defineMacro({
           class="macro-type-inner"
           style={{
             display: 'inline',
-            visibility: totalChars === 0 ? 'hidden' : 'visible',
+            visibility: measured === null ? 'hidden' : 'visible',
             clipPath: clip,
           }}
         >

package/src/define-macro.ts

@@ -229,7 +229,7 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
       // In program order, also when mutation code performs the input
       ctx.getValue = () => getByPath(readState().variables, segments);
       ctx.setValue = (value: unknown) => {
-        noteControlEdit();
+        noteControlEdit(segments);
         // The commit mutation code uses, which keeps the references among
         // variables: a write to a draft copies only the path written, and
         // other variables sharing the object would keep the old one.

package/src/execute-mutation.ts

@@ -138,6 +138,32 @@ export function frozenCopy<T>(value: T): T {
   return freeze(cloneValue(value), true);
 }
 
+/** Whether `value` and everything it holds is frozen. */
+function deeplyFrozen(value: unknown, seen = new Set<object>()): boolean {
+  if (typeof value !== 'object' || value === null || seen.has(value)) {
+    return true;
+  }
+  // Leaves a freeze cannot lock (typed array elements) and that a copy would
+  // detach from what they share (a buffer): handed out as they are
+  if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) return true;
+  if (!Object.isFrozen(value)) return false;
+  seen.add(value);
+  return Reflect.ownKeys(value).every((key) => {
+    const desc = Object.getOwnPropertyDescriptor(value, key);
+    return !desc || !('value' in desc) || deeplyFrozen(desc.value, seen);
+  });
+}
+
+/**
+ * A value read from the store, made safe to hand out: the store holds plain
+ * values frozen, but not registered class instances, whose methods could
+ * change the recorded history through the live object. Such a value is
+ * returned as a frozen copy, like a read inside mutation code.
+ */
+export function readOnlyValue<T>(value: T): T {
+  return deeplyFrozen(value) ? value : frozenCopy(value);
+}
+
 /**
  * Apply a write that reached the store while mutations execute to their
  * `work` and `base` copies (see MutationScope), so the code sees it and

package/src/hooks/use-modal-focus.ts

@@ -9,7 +9,8 @@ const FOCUSABLE = [
   'select:not([disabled])',
   'textarea:not([disabled])',
   'iframe',
-  '[contenteditable="true"]',
+  'summary',
+  '[contenteditable]',
   '[tabindex]',
 ].join(',');
 
@@ -42,6 +43,25 @@ function tabIndexAttr(el: HTMLElement): number | null {
 function isTabStop(el: HTMLElement): boolean {
   const tabIndex = tabIndexAttr(el);
   if (tabIndex !== null && tabIndex < 0) return false;
+  // Only an editing host takes focus, not `contenteditable="false"` or
+  // content nested in a host
+  if (
+    el.hasAttribute('contenteditable') &&
+    !el.matches('a[href], button, input, select, textarea, iframe, summary') &&
+    (!el.isContentEditable || el.parentElement?.isContentEditable)
+  ) {
+    return false;
+  }
+  // Only a details element's first summary child is its toggle
+  if (el.localName === 'summary') {
+    const details = el.parentElement;
+    if (
+      details?.localName !== 'details' ||
+      Array.from(details.children).find((c) => c.localName === 'summary') !== el
+    ) {
+      return tabIndex !== null;
+    }
+  }
   if (el instanceof HTMLInputElement && el.type === 'radio' && el.name) {
     const group = Array.from(
       (

package/src/markup/render.tsx

@@ -52,7 +52,7 @@ export const InlineContext = createContext(false);
 /**
  * True while rendering inside an element whose content is not markdown: SVG
  * (whose namespace `<p>` wrappers would break) and the preformatted `<pre>`
- * and `<textarea>`, whose text (indentation, `#`, `*`, ...) is literal.
+ * `<textarea>` and `<style>`, whose text (indentation, `#`, `*`, ...) is literal.
  * Macro and widget bodies read it so their content stays literal too.
  */
 export const RawTextContext = createContext(false);
@@ -66,7 +66,7 @@ const SvgContext = createContext(false);
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
 /** Elements whose content is literal text, not markdown. */
-const PREFORMATTED_ELEMENTS = new Set(['pre', 'textarea']);
+const PREFORMATTED_ELEMENTS = new Set(['pre', 'textarea', 'style']);
 export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
 
 /**
@@ -392,6 +392,7 @@ const INLINE_ELEMENTS = new Set([
   'span',
   'strong',
   'sub',
+  'summary',
   'sup',
   'time',
   'u',
@@ -632,6 +633,15 @@ function resolveAttributeValue(
   return result.text;
 }
 
+/** The index of the summary element opening `nodes`, or -1 when none does. */
+function leadingSummaryIndex(nodes: ASTNode[]): number {
+  const at = nodes.findIndex((n) => n.type !== 'text' || n.value.trim() !== '');
+  const first = nodes[at];
+  return first?.type === 'html' && first.tag.toLowerCase() === 'summary'
+    ? at
+    : -1;
+}
+
 function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const scope = useTextScope();
   const { nobr, locals, raw: inRaw, inline: parentInline } = useRenderOptions();
@@ -658,7 +668,22 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
     if (inRaw || isRawRoot) {
       children = renderInlineNodes(node.children);
     } else {
-      children = renderNodes(node.children, { nobr, locals, inline: isInline });
+      // A details element's summary stays its direct child: it is rendered
+      // apart from the markdown of the rest of the content.
+      const summaryAt =
+        tag === 'details' ? leadingSummaryIndex(node.children) : -1;
+      const body = (nodes: ASTNode[]) =>
+        renderNodes(nodes, { nobr, locals, inline: isInline });
+      children =
+        summaryAt === -1 ? (
+          body(node.children)
+        ) : (
+          <>
+            {body(node.children.slice(0, summaryAt))}
+            {renderSingleNode(node.children[summaryAt]!)}
+            {body(node.children.slice(summaryAt + 1))}
+          </>
+        );
       if (isInline !== parentInline) {
         children = (
           <InlineContext.Provider value={isInline}>

package/src/story-api.ts

@@ -23,6 +23,7 @@ import { getBackendType } from './saves/storage';
 import { registerClass } from './class-registry';
 import {
   frozenCopy,
+  readOnlyValue,
   getActiveMutationScope,
   mutateState,
 } from './execute-mutation';
@@ -286,7 +287,7 @@ function createStoryAPI(): StoryAPI {
       const value = key.includes('.')
         ? getByPath(namespace, key.split('.'))
         : ownValue(namespace, key);
-      return scope ? frozenCopy(value) : value;
+      return scope ? frozenCopy(value) : readOnlyValue(value);
     },
 
     set(nameOrVars: string | Record<string, unknown>, value?: unknown): void {

package/src/story-variables.ts

@@ -32,7 +32,13 @@ function tokensOf(text: string, textMode: boolean): Token[] {
   }
 }
 
-export type VarType = 'number' | 'string' | 'boolean' | 'array' | 'object';
+export type VarType =
+  | 'number'
+  | 'string'
+  | 'boolean'
+  | 'array'
+  | 'object'
+  | 'null';
 
 export interface FieldSchema {
   type: VarType;
@@ -66,7 +72,9 @@ function inferSchema(value: unknown): FieldSchema {
   if (Array.isArray(value)) {
     return { type: 'array' };
   }
-  if (value !== null && typeof value === 'object') {
+  // A default of null means "nothing yet"; the value may later be anything
+  if (value === null) return { type: 'null' };
+  if (typeof value === 'object') {
     const fields = new Map<string, FieldSchema>();
     for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
       fields.set(key, inferSchema(val));
@@ -156,6 +164,8 @@ function validateRef(
     // Arrays have built-in methods/properties (push, find, length, etc.)
     // so any field access on an array is allowed.
     if (current.type === 'array') return null;
+    // A null default may later hold a value of any shape
+    if (current.type === 'null') return null;
 
     // Primitives expose their wrapper's built-ins (length, toUpperCase,
     // toFixed, etc.). Keep validating past properties of primitive type.