@rohal12/spindle 0.59.8 → 0.59.9

package/src/components/PassageDialog.tsx

@@ -83,9 +83,9 @@ export function PassageDialog({
 
   const handleBackdrop = (e: MouseEvent) => {
     if (!dismissible) return;
-    if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
-      stableOnClose();
-    }
+    // Only a click on this overlay itself: a nested dialog's backdrop click
+    // bubbles through the outer overlay, whose target is not its own.
+    if (e.target === e.currentTarget) stableOnClose();
   };
 
   const cls = panelClass ? `dialog-panel ${panelClass}` : 'dialog-panel';
@@ -105,6 +105,7 @@ export function PassageDialog({
         >
           {showCloseButton && (
             <button
+              type="button"
               class="dialog-close"
               aria-label="Close"
               onClick={stableOnClose}

package/src/components/macros/Button.tsx

@@ -26,6 +26,7 @@ defineMacro({
 
     return (
       <button
+        type="button"
         id={ctx.id}
         class={ctx.cls}
         onClick={handleClick}

package/src/components/macros/Cycle.tsx

@@ -32,6 +32,7 @@ defineMacro({
 
     return (
       <button
+        type="button"
         id={ctx.id}
         class={ctx.cls}
         onClick={handleClick}

package/src/components/macros/Dialog.tsx

@@ -22,6 +22,7 @@ defineMacro({
     return (
       <>
         <button
+          type="button"
           id={ctx.id}
           class={ctx.cls}
           onClick={() => setOpen(true)}

package/src/components/macros/Do.tsx

@@ -1,5 +1,5 @@
 import { defineMacro } from '../../define-macro';
-import { logMacroError } from './MacroError';
+import { useRunOnce } from './MacroError';
 
 defineMacro({
   name: 'do',
@@ -8,16 +8,8 @@ defineMacro({
     // The parser keeps the body verbatim as a single text node
     const code = ctx.collectText(children);
 
-    ctx.hooks.useLayoutEffect(() => {
-      // Before the code runs: it may navigate away from this passage
-      const location = ctx.sourceLocation();
-      try {
-        ctx.mutate(code);
-      } catch (err) {
-        logMacroError('do', err, location);
-      }
-    }, []);
-
-    return null;
+    // During the first render, like {set}: the macros after it in the
+    // passage run later and see its writes (a layout effect ran after them).
+    return useRunOnce('do', '', () => ctx.mutate(code));
   },
 });

package/src/components/macros/MacroError.tsx

@@ -49,7 +49,7 @@ export function useRunOnce(macro: string, rawArgs: string, effect: () => void) {
       effect();
     } catch (error) {
       failure.current = { error };
-      logMacroError(`${macro} ${rawArgs}`, error, location);
+      logMacroError(`${macro} ${rawArgs}`.trim(), error, location);
     }
   }
 

package/src/components/macros/MenubarButtons.tsx

@@ -63,6 +63,7 @@ export function defineMenubarAction(config: MenubarActionConfig) {
       return (
         <>
           <button
+            type="button"
             id={ctx.id}
             class={cls}
             onClick={perform}

package/src/components/macros/PassageDisplay.tsx

@@ -8,7 +8,7 @@ import { resolveTransition, type ResolvedTransition } from '../../transition';
 /**
  * Create a snapshot clone of a .passage element for outgoing transitions.
  * - Strips `id` attributes from the clone tree
- * - Disables interaction (pointer-events, user-select)
+ * - Disables interaction (pointer-events, user-select, inert, aria-hidden)
  * - Pauses/mutes any <audio>/<video>
  * - Adds `.passage-snapshot` class and `data-transition` attribute
  */
@@ -28,6 +28,10 @@ function createSnapshot(
   // Disable interaction
   clone.style.pointerEvents = 'none';
   clone.style.userSelect = 'none';
+  // Visual only: out of the tab order and the accessibility tree, and its
+  // controls (copied with their inline handlers) can not be activated
+  clone.setAttribute('inert', '');
+  clone.setAttribute('aria-hidden', 'true');
 
   // Pause/mute media
   const mediaEls = clone.querySelectorAll('audio, video');

package/src/components/macros/SaveManager.tsx

@@ -21,6 +21,7 @@ import {
   saveWithHooks,
   type PlaythroughGroup,
 } from '../../saves/save-manager';
+import { getBackendType } from '../../saves/storage';
 import { DialogCloseContext } from '../PassageDialog';
 import { defineMacro } from '../../define-macro';
 import { errorMessage } from '../../utils/error-message';
@@ -71,10 +72,15 @@ export function SaveManagerContent() {
       'loadFromPayload',
     );
   const ifid = storyData?.ifid ?? '';
+  // Saves held in memory only (no browser storage is available) are lost
+  // when the page is reloaded or closed: told to the player, who can export
+  const [temporary, setTemporary] = useState(false);
 
   const refresh = useCallback(async () => {
     if (!ifid) return;
     const data = await getSavesGrouped(ifid);
+    // After the read: the storage in use is known by now
+    setTemporary(getBackendType() === 'memory');
     setGroups(data);
     setLoading(false);
   }, [ifid]);
@@ -131,7 +137,7 @@ export function SaveManagerContent() {
         // Queued now, in call order with other storage operations
         return createSave(ifid, playthrough, payload);
       });
-      showStatus('Save created');
+      showStatus(temporary ? 'Save created (temporary)' : 'Save created');
       await refresh();
     } catch {
       showStatus('Failed to create save', 'error');
@@ -276,12 +282,14 @@ export function SaveManagerContent() {
         <div class="saves-header-left">
           <div class="saves-mode-toggle">
             <button
+              type="button"
               class={mode === 'save' ? 'active' : ''}
               onClick={() => setMode('save')}
             >
               Save
             </button>
             <button
+              type="button"
               class={mode === 'load' ? 'active' : ''}
               onClick={() => setMode('load')}
             >
@@ -291,8 +299,19 @@ export function SaveManagerContent() {
         </div>
       </div>
 
+      {temporary && (
+        <div
+          class="saves-notice"
+          role="status"
+        >
+          Saves can not be kept in this browser: they are lost when the page is
+          reloaded or closed. Export a save to keep it.
+        </div>
+      )}
+
       <div class="saves-toolbar">
         <button
+          type="button"
           class="saves-toolbar-button"
           onClick={handleImport}
         >
@@ -376,6 +395,7 @@ export function SaveManagerContent() {
                         <div class="save-slot-actions">
                           {mode === 'save' ? (
                             <button
+                              type="button"
                               class="save-slot-action primary"
                               onClick={() => handleOverwrite(save.meta.id)}
                             >
@@ -383,6 +403,7 @@ export function SaveManagerContent() {
                             </button>
                           ) : (
                             <button
+                              type="button"
                               class="save-slot-action primary"
                               onClick={() => handleLoad(save)}
                             >
@@ -390,18 +411,21 @@ export function SaveManagerContent() {
                             </button>
                           )}
                           <button
+                            type="button"
                             class="save-slot-action"
                             onClick={() => handleRenameStart(save)}
                           >
                             Rename
                           </button>
                           <button
+                            type="button"
                             class="save-slot-action"
                             onClick={() => handleExport(save.meta.id)}
                           >
                             Export
                           </button>
                           <button
+                            type="button"
                             class="save-slot-action danger"
                             onClick={() => handleDelete(save.meta.id)}
                           >
@@ -413,6 +437,7 @@ export function SaveManagerContent() {
 
                     {mode === 'save' && isCurrentPt && (
                       <button
+                        type="button"
                         class="save-slot-new"
                         onClick={handleNewSave}
                       >
@@ -432,6 +457,7 @@ export function SaveManagerContent() {
             <div class="playthrough-group">
               <div class="playthrough-saves">
                 <button
+                  type="button"
                   class="save-slot-new"
                   onClick={handleNewSave}
                 >

package/src/components/macros/Type.tsx

@@ -1,15 +1,54 @@
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER } from './macro-args';
 
+/**
+ * The clip-path that shows the first `count` characters of `root`'s text in
+ * reading order: the boxes the browser laid out for them, each wrapped line
+ * as far as its last revealed character, as one path in the coordinates of
+ * `inner`'s box. Undefined where there is no layout to measure.
+ */
+function revealedPath(
+  root: HTMLElement,
+  inner: HTMLElement,
+  count: number,
+): string | undefined {
+  const range = document.createRange();
+  if (!range.getClientRects) return undefined;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let left = count;
+  let end: { node: Node; offset: number } | undefined;
+  for (let n = walker.nextNode(); n && left > 0; n = walker.nextNode()) {
+    const length = n.nodeValue?.length ?? 0;
+    end = { node: n, offset: Math.min(left, length) };
+    left -= length;
+  }
+  if (!end) return 'inset(0 100% 0 0)';
+  range.setStart(root, 0);
+  range.setEnd(end.node, end.offset);
+  const rects = range.getClientRects();
+  if (rects.length === 0) return undefined;
+  const origin = inner.getBoundingClientRect();
+  let path = '';
+  for (const r of Array.from(rects)) {
+    if (r.width === 0 && r.height === 0) continue;
+    const x = (r.left - origin.left).toFixed(2);
+    const y = (r.top - origin.top).toFixed(2);
+    path += `M${x} ${y}h${r.width.toFixed(2)}v${r.height.toFixed(2)}h-${r.width.toFixed(2)}z`;
+  }
+  return path ? `path("${path}")` : undefined;
+}
+
 defineMacro({
   name: 'type',
   block: true,
   interpolate: true,
   parameters: [DELAY_PARAMETER],
   render({ children = [] }, ctx) {
-    const { useState, useEffect, useRef } = ctx.hooks;
+    const { useState, useEffect, useLayoutEffect, useRef } = ctx.hooks;
     const speed = ctx.args.delay ?? 0;
     const containerRef = useRef<HTMLSpanElement>(null);
+    const innerRef = useRef<HTMLSpanElement>(null);
+    const [clip, setClip] = useState<string | undefined>();
     const [totalChars, setTotalChars] = useState(0);
     const [visibleChars, setVisibleChars] = useState(0);
     const visibleCharsRef = useRef(0);
@@ -44,6 +83,21 @@ defineMacro({
 
     const done = visibleChars >= totalChars && totalChars > 0;
 
+    // Clip to the characters revealed so far, as laid out: remeasured when
+    // the count changes and when the width the text wraps in does.
+    useLayoutEffect(() => {
+      const root = containerRef.current;
+      const inner = innerRef.current;
+      if (!root || !inner || totalChars === 0 || done) {
+        setClip(undefined);
+        return;
+      }
+      const measure = () => setClip(revealedPath(root, inner, visibleChars));
+      measure();
+      window.addEventListener('resize', measure);
+      return () => window.removeEventListener('resize', measure);
+    }, [visibleChars, totalChars, done]);
+
     const cls = [
       'macro-type',
       done ? 'macro-type-done' : '',
@@ -57,19 +111,14 @@ defineMacro({
         id={ctx.id}
         class={cls}
         ref={containerRef}
-        style={{
-          clipPath: totalChars > 0 && !done ? undefined : undefined,
-        }}
       >
         <span
+          ref={innerRef}
           class="macro-type-inner"
           style={{
             display: 'inline',
             visibility: totalChars === 0 ? 'hidden' : 'visible',
-            clipPath:
-              totalChars > 0 && !done
-                ? `inset(0 ${((totalChars - visibleChars) / totalChars) * 100}% 0 0)`
-                : undefined,
+            clipPath: clip,
           }}
         >
           {ctx.renderInlineNodes(children)}

package/src/saves/format.ts

@@ -135,6 +135,14 @@ const isMoment = (value: unknown): boolean =>
   typeof value.timestamp === 'number' &&
   isOptionalPRNGSnapshot(value.prng);
 
+const isWatchers = (value: unknown): boolean =>
+  value === undefined ||
+  (Array.isArray(value) &&
+    Array.from(value).every(
+      (w) =>
+        isRecord(w) && typeof w.condition === 'string' && isRecord(w.options),
+    ));
+
 const isCountsMap = (value: unknown): boolean =>
   value === undefined ||
   (value instanceof Map &&
@@ -166,7 +174,8 @@ function isPayload(value: unknown): value is Record<string, unknown> {
   return (
     isCountsMap(value.visitCounts) &&
     isCountsMap(value.renderCounts) &&
-    isOptionalPRNGSnapshot(value.prng)
+    isOptionalPRNGSnapshot(value.prng) &&
+    isWatchers(value.watchers)
   );
 }
 

package/src/saves/save-manager.ts

@@ -134,17 +134,18 @@ async function startNewPlaythroughNow(
   id: string = randomUUID(),
 ): Promise<string> {
   const backend = await getBackend();
-  const num = await nextPlaythroughNumber(ifid);
-
-  const record: PlaythroughRecord = {
-    id,
-    ifid,
-    createdAt: new Date().toISOString(),
-    label: `Playthrough ${num}`,
-  };
-
-  await backend.putPlaythrough(record);
-  await backend.setMeta(playthroughCountKey(ifid), num);
+  // Taking the next number is a read-modify-write other tabs do too
+  await withTabLock(`spindle-playthrough-count:${ifid}`, async () => {
+    const num = await nextPlaythroughNumber(ifid);
+    const record: PlaythroughRecord = {
+      id,
+      ifid,
+      createdAt: new Date().toISOString(),
+      label: `Playthrough ${num}`,
+    };
+    await backend.putPlaythrough(record);
+    await backend.setMeta(playthroughCountKey(ifid), num);
+  });
   await backend.setMeta(currentPlaythroughKey(ifid), id);
   return id;
 }
@@ -503,15 +504,51 @@ function slotMetaKey(ifid: string, slot?: string): string {
 
 const slotIndexKey = (ifid: string) => `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
 
-/** Read-modify-write the per-story slot index. */
+/**
+ * Run `op` holding the browser's lock `name`, so other tabs of the story
+ * (the operation queue only orders this document's operations) wait for it.
+ * Runs `op` without a lock where the browser offers none (or refuses it, as
+ * in a sandboxed frame, which has no other tabs sharing its storage).
+ */
+async function withTabLock<T>(name: string, op: () => Promise<T>): Promise<T> {
+  let locks: LockManager | undefined;
+  try {
+    locks = navigator.locks;
+  } catch {
+    // Access refused: no lock
+  }
+  if (!locks) return op();
+  let started = false;
+  try {
+    return await locks.request(name, () => {
+      started = true;
+      return op();
+    });
+  } catch (err) {
+    // Only a failure to take the lock falls back; op's own errors are its
+    if (started) throw err;
+    return op();
+  }
+}
+
+/**
+ * Read-modify-write the per-story slot index. Under a lock shared by the
+ * story's tabs: two tabs adding a slot at once would both read the old index
+ * and the later write would drop the other's slot.
+ */
 async function updateSlotIndex(
   ifid: string,
   update: (slots: string[]) => string[],
 ): Promise<void> {
   const backend = await getBackend();
-  const existing = (await backend.getMeta<string[]>(slotIndexKey(ifid))) ?? [];
-  const updated = update(existing);
-  if (updated !== existing) await backend.setMeta(slotIndexKey(ifid), updated);
+  await withTabLock(`spindle-slot-index:${ifid}`, async () => {
+    const existing =
+      (await backend.getMeta<string[]>(slotIndexKey(ifid))) ?? [];
+    const updated = update(existing);
+    if (updated !== existing) {
+      await backend.setMeta(slotIndexKey(ifid), updated);
+    }
+  });
 }
 
 /** Every slot: the default one (undefined), then those in the slot index. */

package/src/saves/types.ts

@@ -1,4 +1,5 @@
 import type { PRNGSnapshot } from '../prng';
+import type { SavedWatcher } from '../triggers';
 import { hasOwn } from '../utils/namespace';
 import {
   checkFormatVersion,
@@ -25,6 +26,8 @@ export interface SavePayload {
   visitCounts?: Record<string, number>;
   renderCounts?: Record<string, number>;
   prng?: PRNGSnapshot | null;
+  /** The {watch} macro watchers registered (absent in older saves). */
+  watchers?: SavedWatcher[];
 }
 
 export interface SaveMeta {

package/src/store.ts

@@ -22,6 +22,8 @@ import { emit } from './event-emitter';
 import {
   resetTriggers,
   checkTriggersOnNavigation,
+  restoreMacroWatchers,
+  savedMacroWatchers,
   reinitTriggerState,
 } from './triggers';
 import {
@@ -302,6 +304,7 @@ function persistSession(get: () => StoryState): { error: unknown } | undefined {
     visitCounts,
     renderCounts,
     prng: snapshotPRNG(),
+    watchers: savedMacroWatchers(),
   });
 }
 
@@ -947,6 +950,21 @@ export interface StoryState {
   clearDeferredRender: () => void;
 }
 
+/**
+ * The first passage of `payload` (its current passage, then its history)
+ * that `storyData` does not have, as when the story was updated since the
+ * save; undefined if the story has them all (or is not loaded).
+ */
+export function missingPassage(
+  storyData: StoryData | null | undefined,
+  payload: SavePayload,
+): string | undefined {
+  if (!storyData) return undefined;
+  return [payload.passage, ...payload.history.map((m) => m.passage)].find(
+    (name) => !storyData.passages.has(name),
+  );
+}
+
 const NAMESPACE_KEYS = ['variables', 'temporary', 'transient'] as const;
 
 type StoryRecipe = (draft: Draft<StoryState>) => void;
@@ -1601,6 +1619,7 @@ export const useStoryStore = create<StoryState>()(
         visitCounts: { ...visitCounts },
         renderCounts: { ...renderCounts },
         prng: snapshotPRNG(),
+        watchers: savedMacroWatchers(),
       };
     },
 
@@ -1618,12 +1637,21 @@ export const useStoryStore = create<StoryState>()(
       slot?: string,
       playthroughId?: string,
     ) => {
-      const replacement = slotLoadApplying ?? ++stateReplacementsIssued;
+      const applying = slotLoadApplying;
       slotLoadApplying = null;
+      const replacement = applying ?? ++stateReplacementsIssued;
       if (payload.history.length === 0) {
         console.warn('loadFromPayload: rejecting payload with empty history');
         return;
       }
+      // Before anything is replaced: an incompatible payload leaves the
+      // running game as it is
+      const missing = missingPassage(get().storyData, payload);
+      if (missing !== undefined) {
+        throw new Error(
+          `The save refers to the passage "${missing}", which this version of the story does not have`,
+        );
+      }
       latestStateApplied = replacement;
 
       emit('beforeload', slot);
@@ -1684,7 +1712,10 @@ export const useStoryStore = create<StoryState>()(
         state.transient = createNamespace(deepClone(get().transientDefaults));
       });
 
-      // Loaded state is not a change watchers react to
+      // The watchers of the loaded game (a payload without any, from an
+      // older version, leaves the registered ones), then: loaded state is
+      // not a change watchers react to
+      if (payload.watchers) restoreMacroWatchers(payload.watchers);
       reinitTriggerState();
 
       // The next navigate() diffs from the snapshot recorded for the current

package/src/story-init.ts

@@ -1,5 +1,5 @@
 import { h, render } from 'preact';
-import { useStoryStore, recordStoryInitState } from './store';
+import { useStoryStore, recordStoryInitState, missingPassage } from './store';
 import { parseMarkup } from './markup/parse';
 import { renderNodes } from './markup/render';
 import { setSaveTitlePassage } from './saves/save-manager';
@@ -71,6 +71,18 @@ export function executeStoryInit() {
 export function initializeStory(session?: SavePayload): void {
   executeStoryInit();
 
+  // A session that refers to a passage the story no longer has (it was
+  // updated since) is dropped: the game starts from the beginning
+  const missing = session
+    ? missingPassage(useStoryStore.getState().storyData, session)
+    : undefined;
+  if (missing !== undefined) {
+    console.warn(
+      `spindle: discarding the saved session: the story no longer has the passage "${missing}"`,
+    );
+    session = undefined;
+  }
+
   if (session) {
     useStoryStore.getState().loadFromPayload(session);
   }

package/src/structural.ts

@@ -85,7 +85,9 @@ export function deepClone<T>(value: T, options: DeepCloneOptions = {}): T {
   function cloneBuiltin(val: object): object | undefined {
     if (val instanceof Date) return keep(val, new Date(val.getTime()));
     if (val instanceof RegExp) {
-      return keep(val, new RegExp(val.source, val.flags));
+      const copy = new RegExp(val.source, val.flags);
+      copy.lastIndex = val.lastIndex; // the scanning cursor of g/y patterns
+      return keep(val, copy);
     }
     if (val instanceof ArrayBuffer) return keep(val, val.slice(0));
     if (ArrayBuffer.isView(val)) {
@@ -343,7 +345,9 @@ function equalBuiltin(
   assumed: Pairs,
 ): boolean | undefined {
   if (a instanceof Date) return Object.is(a.getTime(), (b as Date).getTime());
-  if (a instanceof RegExp) return String(a) === String(b);
+  if (a instanceof RegExp) {
+    return String(a) === String(b) && a.lastIndex === (b as RegExp).lastIndex;
+  }
   if (ArrayBuffer.isView(a)) {
     // A view is its place in its backing buffer, and the whole buffer (which
     // other views can share): equal only if both match.

package/src/styles.css

@@ -571,6 +571,15 @@ tw-storydata {
   background: rgba(100, 181, 246, 0.05);
 }
 
+.saves-notice {
+  padding: 0.5em 1.25em;
+  font-size: 0.8em;
+  color: #ffb74d;
+  border-bottom: 1px solid rgba(255, 183, 77, 0.3);
+  background: rgba(255, 183, 77, 0.08);
+  flex-shrink: 0;
+}
+
 .saves-status {
   padding: 0.5em 1.25em;
   font-size: 0.8em;

package/src/triggers.ts

@@ -115,6 +115,36 @@ export function addMacroTrigger(
   registerTrigger(condition, options, macroKey);
 }
 
+/** A {watch} macro's watcher as a save and the session hold it. */
+export interface SavedWatcher {
+  condition: string;
+  options: WatchOptions;
+}
+
+/**
+ * The {watch} macro watchers now registered, for a save or the session:
+ * watchers outlive the passage that declared them, so a game restored
+ * where it stopped needs the ones its earlier passages registered (and
+ * not the ones {unwatch} or `once` removed).
+ */
+export function savedMacroWatchers(): SavedWatcher[] {
+  return triggers
+    .filter((t) => t.macroKey !== undefined && t.options)
+    .map((t) => ({ condition: t.condition, options: { ...t.options } }));
+}
+
+/**
+ * Make the {watch} macro watchers those of a loaded game: the ones of
+ * `watchers` replace the registered ones (watchers added by Story.watch
+ * code stay). The passage shown mounts its own {watch} macros again.
+ */
+export function restoreMacroWatchers(watchers: readonly SavedWatcher[]): void {
+  triggers = triggers.filter((t) => t.macroKey === undefined);
+  for (const { condition, options } of watchers) {
+    addMacroTrigger(condition, options);
+  }
+}
+
 export function removeTrigger(name: string): void {
   triggers = triggers.filter((t) => t.name !== name);
 }

package/src/utils/stable-key.ts

@@ -49,7 +49,7 @@ function keyOf(val: unknown, ancestors: object[]): string {
   if (depth !== -1) return `<cycle ${ancestors.length - depth}>`;
 
   if (val instanceof Date) return `Date(${val.getTime()})`;
-  if (val instanceof RegExp) return `RegExp(${String(val)})`;
+  if (val instanceof RegExp) return `RegExp(${String(val)}@${val.lastIndex})`;
 
   ancestors.push(obj);
   try {