squiffy-runtime 6.0.0-alpha.15 → 6.0.0-alpha.17

package/dist/state.d.ts

@@ -0,0 +1,19 @@
+import { Emitter, SquiffyEventMap } from './events.js';
+export declare class State {
+    persist: boolean;
+    storyId: string;
+    onSet: (attribute: string, value: any) => void;
+    onSetInternal?: (attribute: string, oldValue: any, newValue: any) => void;
+    store: Record<string, any>;
+    emitter: Emitter<SquiffyEventMap>;
+    constructor(persist: boolean, storyId: string, onSet: (attribute: string, value: any) => void, emitter: Emitter<SquiffyEventMap>, onSetInternal?: (attribute: string, oldValue: any, newValue: any) => void);
+    private usePersistentStorage;
+    set(attribute: string, value: any): void;
+    setInternal(attribute: string, value: any, raiseEvents: boolean): void;
+    get(attribute: string): any;
+    getStore(): Record<string, any>;
+    load(): void;
+    reset(): void;
+    setSeen(sectionName: string): void;
+    getSeen(sectionName: string): boolean;
+}

package/dist/textProcessor.d.ts

@@ -1,16 +1,11 @@
-import { Section } from "./types.js";
+import { default as Handlebars } from 'handlebars';
+import { Section, Story } from './types.js';
+import { State } from './state.js';
 export declare class TextProcessor {
-    get: (attribute: string) => any;
-    set: (attribute: string, value: any) => void;
-    story: any;
+    story: Story;
+    state: State;
     getCurrentSection: () => Section;
-    seen: (section: string) => boolean;
-    processAttributes: (attributes: string[]) => void;
-    constructor(get: (attribute: string) => any, set: (attribute: string, value: any) => void, story: any, currentSection: () => Section, seen: (section: string) => boolean, processAttributes: (attributes: string[]) => void);
-    process(text: string, data: any): string;
-    processTextCommand(text: string, data: any): any;
-    processTextCommand_If(section: string, data: any): string;
-    processTextCommand_Else(section: string, data: any): string;
-    processTextCommand_Label(section: string, data: any): string;
-    processTextCommand_Rotate(type: string, section: string): string;
+    handlebars: typeof Handlebars;
+    constructor(story: Story, state: State, currentSection: () => Section);
+    process(text: string, inline: boolean): string;
 }

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { SquiffyEventHandler, SquiffyEventMap } from "./events.js";
+import { SquiffyEventHandler, SquiffyEventMap } from './events.js';
 export interface SquiffyInitOptions {
     element: HTMLElement;
     story: Story;
@@ -12,11 +12,13 @@ export interface SquiffySettings {
     onSet: (attribute: string, value: any) => void;
 }
 export interface SquiffyApi {
+    begin: () => Promise<void>;
     restart: () => void;
     get: (attribute: string) => any;
     set: (attribute: string, value: any) => void;
-    clickLink: (link: HTMLElement) => boolean;
+    clickLink: (link: HTMLElement) => Promise<boolean>;
     update: (story: Story) => void;
+    goBack: () => void;
     on<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
     off<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): void;
     once<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
@@ -35,6 +37,7 @@ export interface Story {
     js: ((squiffy: SquiffyJsFunctionApi, get: (attribute: string) => any, set: (attribute: string, value: any) => void) => void)[];
     start: string;
     id?: string | null;
+    uiJsIndex?: number;
     sections: Record<string, Section>;
 }
 export interface Section {

package/dist/types.plugins.d.ts

@@ -0,0 +1,27 @@
+import { HelperDelegate } from 'handlebars';
+import { SquiffyEventHandler, SquiffyEventMap } from './events.js';
+import { Animation } from './animation.js';
+export interface SquiffyPlugin {
+    name: string;
+    init(host: PluginHost): void | Promise<void>;
+    onWrite?(el: HTMLElement): void;
+    onLoad?(): void;
+}
+export interface HandleLinkResult {
+    disableLink?: boolean;
+}
+export interface PluginHost {
+    outputElement: HTMLElement;
+    registerHelper(name: string, helper: HelperDelegate): void;
+    registerLinkHandler(type: string, handler: (el: HTMLElement) => HandleLinkResult): void;
+    get(attribute: string): any;
+    set(attribute: string, value: any): void;
+    getSectionText(name: string): string | null;
+    getPassageText(name: string): string | null;
+    processText: (text: string, inline: boolean) => string;
+    addTransition: (fn: () => Promise<void>) => void;
+    animation: Animation;
+    on<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
+    off<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): void;
+    once<E extends keyof SquiffyEventMap>(event: E, handler: SquiffyEventHandler<E>): () => void;
+}

package/dist/updater.d.ts

@@ -0,0 +1,2 @@
+import { Story } from './types.js';
+export declare function updateStory(oldStory: Story, newStory: Story, outputElement: HTMLElement, ui: any, disableLink: (link: Element) => void): void;

package/dist/utils.d.ts

@@ -1,2 +1 @@
-export declare function startsWith(string: string, prefix: string): boolean;
-export declare function rotate(options: string, current: string | null): string[];
+export declare function fadeReplace(element: HTMLElement, text: string): Promise<void>;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.15",
+  "version": "6.0.0-alpha.17",
   "type": "module",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {
     "dev": "vitest",
     "test": "vitest --run",
-    "build": "tsc",
+    "build": "vite build",
     "prepublishOnly": "npm run build && npm run test"
   },
   "author": "Alex Warren",
@@ -20,11 +20,18 @@
   "description": "",
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
+    "css.escape": "^1.5.1",
     "global-jsdom": "^25.0.0",
     "jsdom": "^25.0.0",
-    "squiffy-compiler": "^6.0.0-alpha.15",
+    "squiffy-compiler": "^6.0.0-alpha.17",
     "typescript": "^5.6.2",
-    "vitest": "^2.1.1"
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "a326d226beb6121dcdf528e97d287deba553fe39"
+  "dependencies": {
+    "animejs": "^4.1.3",
+    "handlebars": "^4.7.8",
+    "marked": "^16.2.0"
+  },
+  "gitHead": "59e410271573c741dbc7c6031b7aab5619d9d1c7"
 }

package/src/__snapshots__/squiffy.runtime.test.ts.snap

@@ -2,103 +2,137 @@
 
 exports[`"Hello world" script should run 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div></div>"
 `;
 
 exports[`Click a passage link 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
 <p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
 <p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
 <p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
 <p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
 <p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
 <p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div>"
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div></div>"
 `;
 
 exports[`Click a passage link 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
 <p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
 <p>This should be <a class="squiffy-link link-passage disabled" data-passage="passage" role="link" tabindex="-1">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
 <p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
 <p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
 <p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
 <p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div><div class="squiffy-output-block"><div data-source="[[Introduction]][passage]"><p>Here's some text for the passage.</p></div></div></div>"
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div><div class="squiffy-output-passage" data-passage="passage" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;Introduction&quot;]}"><div class="squiffy-output-block"><div data-source="[[Introduction]][passage]"><p>Here's some text for the passage.</p></div></div></div></div></div>"
+`;
+
+exports[`Click a passage link and go back 1`] = `
+"
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div></div>"
 `;
 
 exports[`Click a section link 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
 <p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
 <p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
 <p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
 <p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
 <p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
 <p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div>"
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div></div>"
 `;
 
 exports[`Click a section link 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="Introduction"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
 <p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
 <p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
 <p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
 <p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
 <p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
 <p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
-<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="section 3"><div class="squiffy-output-block"><div data-source="[[section 3]]"><p>Another section is here, with passages <a class="squiffy-link link-passage" data-passage="a" role="link" tabindex="0">a</a> and <a class="squiffy-link link-passage" data-passage="b" role="link" tabindex="0">b</a>.</p></div></div></div>"
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div><div class="squiffy-output-section" data-section="section 3" data-undo="{&quot;_section&quot;:&quot;Introduction&quot;,&quot;_seen_sections&quot;:[&quot;Introduction&quot;],&quot;_turncount&quot;:0}"><div class="squiffy-output-block"><div data-source="[[section 3]]"><p>Another section is here, with passages <a class="squiffy-link link-passage" data-passage="a" role="link" tabindex="0">a</a> and <a class="squiffy-link link-passage" data-passage="b" role="link" tabindex="0">b</a>.</p></div></div></div></div>"
+`;
+
+exports[`Click a section link and go back 1`] = `
+"
+    <div><div class="squiffy-output-section" data-section="Introduction" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[Introduction]]"><h1>Squiffy Test</h1>
+<p>This is <a href="http://textadventures.co.uk">a website link</a>.</p>
+<p>This should be <a class="squiffy-link link-passage" data-passage="passage" role="link" tabindex="0">a link to a passage</a>. Here's <a class="squiffy-link link-passage" data-passage="passage2" role="link" tabindex="0">another one</a>.</p>
+<p>You don't need to specify a name - for example, this <a class="squiffy-link link-passage" data-passage="link" role="link" tabindex="0">link</a> and this <a class="squiffy-link link-section" data-section="section" role="link" tabindex="0">section</a>.</p>
+<p>And this goes to the <a class="squiffy-link link-section" data-section="section2" role="link" tabindex="0">next section</a>.</p>
+<p>This line has links to <a class="squiffy-link link-section" data-section="section 3" role="link" tabindex="0">section 3</a> and <a class="squiffy-link link-section" data-section="section four" role="link" tabindex="0">section 4</a>.</p>
+<p>This line has links to <a class="squiffy-link link-passage" data-passage="passage 3" role="link" tabindex="0">passage 3</a> and <a class="squiffy-link link-passage" data-passage="passage four" role="link" tabindex="0">passage 4</a>.</p>
+<p>Oh look - <a class="squiffy-link link-passage" data-passage="it's a passage with an apostrophe" role="link" tabindex="0">it's a passage with an apostrophe</a>.</p></div></div></div></div>"
 `;
 
 exports[`Delete passage 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>New passage</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-passage" data-passage="a" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;]}"><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>New passage</p></div></div></div></div></div>"
 `;
 
 exports[`Delete passage 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div></div></div>"
 `;
 
 exports[`Delete section 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div><div class="squiffy-output-section" id="squiffy-section-2" data-section="a"><div class="squiffy-output-block"><div data-source="[[a]]"><p>New section</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div><div class="squiffy-output-section" data-section="a" data-undo="{&quot;_section&quot;:&quot;_default&quot;,&quot;_seen_sections&quot;:[&quot;_default&quot;],&quot;_turncount&quot;:0}"><div class="squiffy-output-block"><div data-source="[[a]]"><p>New section</p></div></div></div></div>"
 `;
 
 exports[`Delete section 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-section" data-section="a" role="link" tabindex="0">a</a></p></div></div></div></div>"
+`;
+
+exports[`Going back handling @clear and attribute changes 1`] = `
+"
+    <div><div class="squiffy-clear-stack" style="display: none;"><div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Choose: <a class="squiffy-link link-passage" data-passage="a" role="link">a</a>, <a class="squiffy-link link-passage disabled" data-passage="b" role="link" tabindex="-1">b</a></p></div></div><div class="squiffy-output-passage" data-passage="b" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;],&quot;test&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]][b]"><p>You chose b. Now <a class="squiffy-link link-section" data-section="continue" role="link" tabindex="0">continue</a></p></div></div></div></div><div class="squiffy-output-section" data-section="continue" data-undo="{&quot;_section&quot;:&quot;_default&quot;,&quot;_seen_sections&quot;:[&quot;_default&quot;,&quot;b&quot;],&quot;test&quot;:456,&quot;_turncount&quot;:1}"><div class="squiffy-output-block"><div data-source="[[continue]]"><p>Now choose: <a class="squiffy-link link-passage disabled" data-passage="c" role="link" tabindex="-1">c</a>, <a class="squiffy-link link-passage" data-passage="d" role="link" tabindex="0">d</a></p></div></div></div></div></div><div class="squiffy-output-section" data-section="continue" data-clear="true"><div class="squiffy-output-passage" data-passage="c" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;,&quot;b&quot;,&quot;continue&quot;],&quot;test&quot;:789}"><div class="squiffy-output-block"><div data-source="[[continue]][c]"><p>You chose c. Now <a class="squiffy-link link-section" data-section="finish" role="link" tabindex="0">finish</a></p></div></div></div></div></div>"
+`;
+
+exports[`Going back handling @clear and attribute changes 2`] = `
+"
+    <div><div class="squiffy-clear-stack" style="display: none;"></div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Choose: <a class="squiffy-link link-passage" data-passage="a" role="link">a</a>, <a class="squiffy-link link-passage disabled" data-passage="b" role="link" tabindex="-1">b</a></p></div></div><div class="squiffy-output-passage" data-passage="b" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;],&quot;test&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]][b]"><p>You chose b. Now <a class="squiffy-link link-section" data-section="continue" role="link" tabindex="0">continue</a></p></div></div></div></div><div class="squiffy-output-section" data-section="continue" data-undo="{&quot;_section&quot;:&quot;_default&quot;,&quot;_seen_sections&quot;:[&quot;_default&quot;,&quot;b&quot;],&quot;test&quot;:456,&quot;_turncount&quot;:1}"><div class="squiffy-output-block"><div data-source="[[continue]]"><p>Now choose: <a class="squiffy-link link-passage" data-passage="c" role="link">c</a>, <a class="squiffy-link link-passage" data-passage="d" role="link" tabindex="0">d</a></p></div></div></div></div>"
 `;
 
 exports[`Update default section output 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Hello world</p></div></div></div></div>"
 `;
 
 exports[`Update default section output 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Updated content</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Updated content</p></div></div></div></div>"
 `;
 
 exports[`Update passage output - passage name "a" 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Passage a content</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-passage" data-passage="a" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;]}"><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Passage a content</p></div></div></div></div></div>"
 `;
 
 exports[`Update passage output - passage name "a" 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Updated passage content</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a" role="link" tabindex="-1">a</a></p></div></div><div class="squiffy-output-passage" data-passage="a" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;]}"><div class="squiffy-output-block"><div data-source="[[_default]][a]"><p>Updated passage content</p></div></div></div></div></div>"
 `;
 
 exports[`Update passage output - passage name "a'1" 1`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Passage a content</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-passage" data-passage="a'1" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;]}"><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Passage a content</p></div></div></div></div></div>"
 `;
 
 exports[`Update passage output - passage name "a'1" 2`] = `
 "
-    <div class="squiffy-output-section" id="squiffy-section-1" data-section="_default"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Updated passage content</p></div></div></div>"
+    <div><div class="squiffy-output-section" data-section="_default" data-undo="{&quot;_section&quot;:null,&quot;_seen_sections&quot;:null,&quot;_turncount&quot;:null}"><div class="squiffy-output-block"><div data-source="[[_default]]"><p>Click this: <a class="squiffy-link link-passage disabled" data-passage="a'1" role="link" tabindex="-1">a'1</a></p></div></div><div class="squiffy-output-passage" data-passage="a'1" data-undo="{&quot;_turncount&quot;:0,&quot;_seen_sections&quot;:[&quot;_default&quot;]}"><div class="squiffy-output-block"><div data-source="[[_default]][a'1]"><p>Updated passage content</p></div></div></div></div></div>"
 `;

package/src/animation.ts

@@ -0,0 +1,68 @@
+import { animate, stagger, text } from "animejs";
+
+export class Animation {
+    animations: {[name: string]: (el: HTMLElement, params: Record<string, any>, onComplete: () => void, loop: boolean) => void} = {};
+    linkAnimations = new Map<HTMLElement, () => void>();
+
+    registerAnimation(name: string, handler: (el: HTMLElement, params: Record<string, any>, onComplete: () => void, loop: boolean) => void) {
+        this.animations[name] = handler;
+    }
+
+    runAnimation(name: string, el: HTMLElement, params: Record<string, any>, onComplete: () => void, loop: boolean) {
+        const animation = this.animations[name];
+        if (animation) {
+            animation(el, params, onComplete, loop);
+        } else {
+            console.warn(`No animation registered with name: ${name}`);
+            onComplete();
+        }
+    }
+
+    addLinkAnimation(link: HTMLElement, fn: () => void) {
+        this.linkAnimations.set(link, fn);
+    }
+
+    runLinkAnimation(link: HTMLElement) {
+        const fn = this.linkAnimations.get(link);
+        if (fn) {
+            fn();
+        }
+    }
+
+    constructor() {
+        this.registerAnimation("typewriter", function(el, params, onComplete, loop) {
+            const { chars } = text.split(el, { words: false, chars: true });
+
+            const fadeDuration = params.fadeDuration || 100;   // ms fade-in per character
+            const interval = params.interval || 100;           // ms between each character appearing
+
+            animate(chars, {
+                opacity: [0, 1],
+                easing: "linear",
+                duration: fadeDuration,
+                delay: stagger(interval, { start: params.start || 0 }),
+                loop: loop,
+                onComplete: onComplete
+            });
+        });
+
+        this.registerAnimation("toast", function(el, params, onComplete, loop) {
+            const { words } = text.split(el, { words: true, chars: false });
+
+            const fadeDuration = params.fadeDuration || 100;   // ms fade-in per word
+            const interval = params.interval || 200;           // ms between each word appearing
+
+            animate(words, {
+                opacity: [0, 1],
+                y: [
+                    { to: ["100%", "0%"] },
+                ],
+                easing: "linear",
+                duration: fadeDuration,
+                delay: stagger(interval, { start: params.start || 0 }),
+                loop: loop,
+                onComplete: onComplete
+            });
+        });
+    }
+}

package/src/events.ts

@@ -1,7 +1,9 @@
-type LinkType = 'section' | 'passage' | 'rotate' | 'sequence';
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 
 export type SquiffyEventMap = {
-    linkClick: { linkType: LinkType }; // a story link was clicked
+    linkClick: { linkType: string }; // a story link was clicked
+    set: { attribute: string, value: any }; // an attribute was set
+    canGoBackChanged: { canGoBack: boolean }; // whether the "back" button should be enabled
 };
 
 export type SquiffyEventHandler<E extends keyof SquiffyEventMap> =
@@ -29,14 +31,11 @@ export class Emitter<Events extends Record<string, any>> {
     }
 
     emit<E extends keyof Events>(event: E, payload: Events[E]) {
-        // Fire handlers asynchronously so the runtime isn't blocked by user code.
-        queueMicrotask(() => {
-            this.listeners.get(event)?.forEach(h => {
-                try { (h as any)(payload); } catch (err) {
-                    // Swallow so a bad handler doesn't break the game; optionally log.
-                    console.error(`[Squiffy] handler for "${String(event)}" failed`, err);
-                }
-            });
+        this.listeners.get(event)?.forEach(h => {
+            try { (h as any)(payload); } catch (err) {
+                // Swallow so a bad handler doesn't break the game; optionally log.
+                console.error(`[Squiffy] handler for "${String(event)}" failed`, err);
+            }
         });
     }
 }

package/src/import.ts

@@ -0,0 +1,5 @@
+import * as animejs from "animejs";
+
+export const imports = {
+    animejs
+};

package/src/linkHandler.ts

@@ -0,0 +1,18 @@
+import { HandleLinkResult } from "./types.plugins.js";
+
+export class LinkHandler {
+    linkHandlers: {[type: string]: (el: HTMLElement) => HandleLinkResult} = {};
+
+    registerLinkHandler(type: string, handler: (el: HTMLElement) => HandleLinkResult) {
+        this.linkHandlers[type] = handler;
+    }
+
+    handleLink(link: HTMLElement): [found: boolean, type: string, result: HandleLinkResult] {
+        const type = link.getAttribute("data-handler") || "";
+        const handler = this.linkHandlers[type];
+        if (handler) {
+            return [true, type, handler(link)];
+        }
+        return [false, type, null];
+    }
+}

package/src/pluginManager.ts

@@ -0,0 +1,74 @@
+import { TextProcessor } from "./textProcessor.js";
+import { SquiffyPlugin } from "./types.plugins.js";
+import { State } from "./state.js";
+import { LinkHandler } from "./linkHandler.js";
+import { Emitter, SquiffyEventMap } from "./events.js";
+import { Animation } from "./animation.js";
+
+export class PluginManager {
+    outputElement: HTMLElement;
+    textProcessor: TextProcessor;
+    state: State;
+    linkHandler: LinkHandler;
+    getSectionText: (name: string) => string | null;
+    getPassageText: (name: string) => string | null;
+    processText: (text: string, inline: boolean) => string;
+    addTransition: (fn: () => Promise<void>) => void;
+    emitter: Emitter<SquiffyEventMap>;
+    plugins: SquiffyPlugin[] = [];
+    animation: Animation;
+
+    constructor(outputElement: HTMLElement,
+                textProcessor: TextProcessor,
+                state: State,
+                linkHandler: LinkHandler,
+                getSectionText: (name: string) => string | null,
+                getPassageText: (name: string) => string | null,
+                processText: (text: string, inline: boolean) => string,
+                addTransition: (fn: () => Promise<void>) => void,
+                animation: Animation,
+                emitter: Emitter<SquiffyEventMap>) {
+        this.outputElement = outputElement;
+        this.textProcessor = textProcessor;
+        this.state = state;
+        this.linkHandler = linkHandler;
+        this.getSectionText = getSectionText;
+        this.getPassageText = getPassageText;
+        this.processText = processText;
+        this.addTransition = addTransition;
+        this.animation = animation;
+        this.emitter = emitter;
+    }
+
+    add(plugin: SquiffyPlugin) {
+        const instance = plugin.init({
+            outputElement: this.outputElement,
+            registerHelper: (name, helper) => {
+                this.textProcessor.handlebars.registerHelper(name, helper);
+            },
+            registerLinkHandler: (type, handler) => {
+                this.linkHandler.registerLinkHandler(type, handler);
+            },
+            get: (attribute) => this.state.get(attribute),
+            set: (attribute, value) => this.state.set(attribute, value),
+            getSectionText: this.getSectionText,
+            getPassageText: this.getPassageText,
+            processText: this.processText,
+            addTransition: this.addTransition,
+            animation: this.animation,
+            on: (e, h) => this.emitter.on(e, h),
+            off: (e, h) => this.emitter.off(e, h),
+            once: (e, h) => this.emitter.once(e, h),
+        });
+        this.plugins.push(plugin);
+        return instance;
+    }
+
+    onWrite(el: HTMLElement) {
+        this.plugins.forEach(p => p.onWrite?.(el));
+    }
+
+    onLoad() {
+        this.plugins.forEach(p => p.onLoad?.());
+    }
+}