@rohal12/spindle 0.36.1 → 0.37.0

package/package.json

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

package/src/index.tsx

@@ -101,6 +101,7 @@ function boot() {
 
   // Execute StoryInit passage if it exists
   executeStoryInit();
+  useStoryStore.getState().bumpInitCount();
 
   // Restore session state if the page was refreshed
   const sessionPayload = loadSession(storyData.ifid);

package/src/markup/ast.ts

@@ -152,7 +152,10 @@ export function buildAST(tokens: Token[]): ASTNode[] {
           }
 
           const top = stack[stack.length - 1]!;
-          if (top.node.type !== 'html' || top.node.tag !== token.tag) {
+          if (
+            top.node.type !== 'html' ||
+            top.node.tag.toLowerCase() !== token.tag.toLowerCase()
+          ) {
             const expected =
               top.node.type === 'html'
                 ? `</${top.node.tag}>`

package/src/markup/render.tsx

@@ -23,6 +23,7 @@ const defaultUpdater: LocalsUpdater = {
 export const LocalsValuesContext = createContext<Record<string, unknown>>({});
 export const LocalsUpdateContext = createContext<LocalsUpdater>(defaultUpdater);
 export const NobrContext = createContext(false);
+export const SvgContext = createContext(false);
 export const WidgetChildrenContext = createContext<ASTNode[] | null>(null);
 
 /**
@@ -85,16 +86,25 @@ function HtmlNodeRenderer({ node }: { node: HtmlNode }) {
   const resolve = useInterpolate();
   const nobr = useContext(NobrContext);
   const locals = useContext(LocalsValuesContext);
+  const inSvg = useContext(SvgContext);
   const attrs: Record<string, unknown> = {};
   for (const [k, v] of Object.entries(node.attributes)) {
     attrs[k] = resolve(v) ?? v;
   }
-  return h(
-    node.tag,
-    attrs,
+  const isSvgRoot = node.tag.toLowerCase() === 'svg';
+  // Inside SVG, skip markdown processing — markdown wraps content in <p> tags
+  // which break the SVG namespace and produce zero-dimension elements.
+  const children =
     node.children.length > 0
-      ? renderNodes(node.children, { nobr, locals })
-      : undefined,
+      ? inSvg || isSvgRoot
+        ? renderInlineNodes(node.children)
+        : renderNodes(node.children, { nobr, locals })
+      : undefined;
+  const element = h(node.tag, attrs, children);
+  return isSvgRoot ? (
+    <SvgContext.Provider value={true}>{element}</SvgContext.Provider>
+  ) : (
+    element
   );
 }
 

package/src/markup/tokenizer.ts

@@ -604,23 +604,11 @@ export function tokenize(input: string): Token[] {
       // Read tag name (letters, digits, hyphens for custom elements)
       const tagStart = j;
       while (j < input.length && /[a-zA-Z0-9-]/.test(input[j]!)) j++;
-      const tag = input.slice(tagStart, j).toLowerCase();
+      const tag = input.slice(tagStart, j);
+      const tagLower = tag.toLowerCase();
 
       // Valid tag name must start with a letter
       if (tag && VALID_TAG_START.test(tag[0]!)) {
-        // SVG is its own world — treat <svg>…</svg> as opaque text
-        // so the markdown pipeline handles it with proper namespace.
-        if (tag === 'svg' && !isClose) {
-          const closeTag = '</svg>';
-          const closeIdx = input.indexOf(closeTag, j);
-          if (closeIdx !== -1) {
-            const end = closeIdx + closeTag.length;
-            // Leave the entire <svg>…</svg> block as text
-            i = end;
-            continue;
-          }
-        }
-
         if (isClose) {
           // Closing tag: skip whitespace, expect >
           while (j < input.length && /\s/.test(input[j]!)) j++;
@@ -645,7 +633,7 @@ export function tokenize(input: string): Token[] {
           const parsed = parseHtmlAttributes(input, j);
           j = parsed.endIdx;
 
-          let isSelfClose = HTML_VOID_TAGS.has(tag);
+          let isSelfClose = HTML_VOID_TAGS.has(tagLower);
           if (input[j] === '/') {
             isSelfClose = true;
             j++;

package/src/store.ts

@@ -207,6 +207,7 @@ export interface StoryState {
   renderCounts: Record<string, number>;
   knownSaves: Record<string, true>;
   playthroughId: string;
+  initCount: number;
   maxHistory: number;
   saveError: string | null;
   loadError: string | null;
@@ -214,6 +215,7 @@ export interface StoryState {
   nextTransition: TransitionConfig | null;
   nobr: boolean;
 
+  bumpInitCount: () => void;
   setMaxHistory: (limit: number) => void;
   init: (
     storyData: StoryData,
@@ -258,6 +260,7 @@ export const useStoryStore = create<StoryState>()(
     renderCounts: {},
     knownSaves: {},
     playthroughId: '',
+    initCount: 0,
     maxHistory: 40,
     saveError: null,
     loadError: null,
@@ -265,6 +268,12 @@ export const useStoryStore = create<StoryState>()(
     nextTransition: null,
     nobr: false,
 
+    bumpInitCount: () => {
+      set((state) => {
+        state.initCount++;
+      });
+    },
+
     setMaxHistory: (limit: number) => {
       set((state) => {
         state.maxHistory = Math.max(1, Math.round(limit));
@@ -494,6 +503,7 @@ export const useStoryStore = create<StoryState>()(
 
       lastNavigationVars = get().variables;
       executeStoryInit();
+      get().bumpInitCount();
       clearSession(storyData.ifid);
 
       // Start a new playthrough on restart

package/src/story-api.ts

@@ -51,6 +51,7 @@ export type { StoryAction };
 export type { MacroMetadata };
 
 type NavigateCallback = (to: string, from: string) => void;
+type StoryInitCallback = () => void;
 type ActionsChangedCallback = () => void;
 type VariableChangedCallback = (
   changed: Record<string, { from: unknown; to: unknown }>,
@@ -100,6 +101,7 @@ export interface StoryAPI {
   getActions(): StoryAction[];
   performAction(id: string, value?: unknown): void;
   on(event: 'navigate', callback: NavigateCallback): () => void;
+  on(event: 'storyinit', callback: StoryInitCallback): () => void;
   on(event: 'actionsChanged', callback: ActionsChangedCallback): () => void;
   on(event: 'variableChanged', callback: VariableChangedCallback): () => void;
   waitForActions(): Promise<StoryAction[]>;
@@ -356,6 +358,16 @@ function createStoryAPI(): StoryAPI {
         });
       }
 
+      if (event === 'storyinit') {
+        let prevCount = useStoryStore.getState().initCount;
+        return useStoryStore.subscribe((state) => {
+          if (state.initCount !== prevCount) {
+            prevCount = state.initCount;
+            (callback as StoryInitCallback)();
+          }
+        });
+      }
+
       if (event === 'actionsChanged') {
         return onActionsChanged(callback as ActionsChangedCallback);
       }