squiffy-runtime 6.0.0-alpha.2 → 6.0.0-alpha.20

package/dist/squiffy.runtime.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import { default as Handlebars } from 'handlebars';
+import { Section, Story } from './types.js';
+import { State } from './state.js';
+export declare class TextProcessor {
+    story: Story;
+    state: State;
+    getCurrentSection: () => Section;
+    handlebars: typeof Handlebars;
+    constructor(story: Story, state: State, currentSection: () => Section);
+    process(text: string, inline: boolean): string;
+}

package/dist/types.d.ts

@@ -0,0 +1,57 @@
+import { SquiffyEventHandler, SquiffyEventMap } from './events.js';
+export interface SquiffyInitOptions {
+    element: HTMLElement;
+    story: Story;
+    scroll?: string;
+    persist?: boolean;
+    onSet?: (attribute: string, value: any) => void;
+}
+export interface SquiffySettings {
+    scroll: string;
+    persist: boolean;
+    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) => 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;
+}
+interface SquiffyJsFunctionApi {
+    get: (attribute: string) => any;
+    set: (attribute: string, value: any) => void;
+    ui: {
+        transition: (f: any) => void;
+    };
+    story: {
+        go: (section: string) => void;
+    };
+}
+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 {
+    text?: string;
+    clear?: boolean;
+    attributes?: string[];
+    jsIndex?: number;
+    passages?: Record<string, Passage>;
+    passageCount?: number;
+}
+export interface Passage {
+    text?: string;
+    clear?: boolean;
+    attributes?: string[];
+    jsIndex?: number;
+}
+export {};

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

@@ -0,0 +1 @@
+export declare function fadeReplace(element: HTMLElement, text: string): Promise<void>;

package/package.json

@@ -1,16 +1,37 @@
 {
   "name": "squiffy-runtime",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.20",
+  "type": "module",
   "main": "dist/squiffy.runtime.js",
   "types": "dist/squiffy.runtime.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc"
+    "dev": "vitest",
+    "test": "vitest --run",
+    "build": "vite build",
+    "prepublishOnly": "npm run build && npm run test"
   },
   "author": "Alex Warren",
+  "contributors": [
+    "CrisisSDK",
+    "mrangel",
+    "Luis Felipe Morales"
+  ],
   "license": "MIT",
   "description": "",
   "devDependencies": {
-    "typescript": "^5.6.2"
-  }
+    "@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.20",
+    "typescript": "^5.6.2",
+    "vite": "^7.1.3",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "animejs": "^4.1.3",
+    "handlebars": "^4.7.8",
+    "marked": "^16.2.0"
+  },
+  "gitHead": "eee4b8836ed791b68d8d56b0d5071129e6214d2b"
 }

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

@@ -0,0 +1,138 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`"Hello world" script should run 1`] = `
+"
+    <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><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[`Click a passage link 2`] = `
+"
+    <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-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><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[`Click a section link 2`] = `
+"
+    <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" 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><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><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><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><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><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><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><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><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><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><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

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+
+export type SquiffyEventMap = {
+    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> =
+    (payload: SquiffyEventMap[E]) => void;
+
+export class Emitter<Events extends Record<string, any>> {
+    private listeners = new Map<keyof Events, Set<Function>>();
+
+    on<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        if (!this.listeners.has(event)) this.listeners.set(event, new Set());
+        this.listeners.get(event)!.add(handler);
+        return () => this.off(event, handler);
+    }
+
+    off<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        this.listeners.get(event)?.delete(handler);
+    }
+
+    once<E extends keyof Events>(event: E, handler: (p: Events[E]) => void) {
+        const off = this.on(event, (payload) => {
+            off();
+            handler(payload);
+        });
+        return off;
+    }
+
+    emit<E extends keyof Events>(event: E, payload: Events[E]) {
+        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?.());
+    }
+}