@rohal12/spindle 0.36.0 → 0.36.2

package/package.json

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

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

@@ -53,68 +53,8 @@ export type Token =
   | VariableToken
   | HtmlToken;
 
-const HTML_TAGS = new Set([
-  'a',
-  'article',
-  'aside',
-  'b',
-  'blockquote',
-  'br',
-  'caption',
-  'code',
-  'col',
-  'colgroup',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'figcaption',
-  'figure',
-  'footer',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hr',
-  'i',
-  'img',
-  'ins',
-  'kbd',
-  'li',
-  'main',
-  'mark',
-  'nav',
-  'ol',
-  'p',
-  'pre',
-  'q',
-  's',
-  'samp',
-  'section',
-  'small',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'table',
-  'tbody',
-  'td',
-  'tfoot',
-  'th',
-  'thead',
-  'tr',
-  'u',
-  'ul',
-  'wbr',
-]);
+/** Tag name must start with a letter (covers standard and custom elements). */
+const VALID_TAG_START = /[a-zA-Z]/;
 
 const HTML_VOID_TAGS = new Set(['br', 'col', 'hr', 'img', 'wbr']);
 
@@ -661,13 +601,14 @@ export function tokenize(input: string): Token[] {
       const isClose = input[j] === '/';
       if (isClose) j++;
 
-      // Read tag name
+      // 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();
+      while (j < input.length && /[a-zA-Z0-9-]/.test(input[j]!)) j++;
+      const tag = input.slice(tagStart, j);
+      const tagLower = tag.toLowerCase();
 
-      // Only handle known HTML tags
-      if (tag && HTML_TAGS.has(tag)) {
+      // Valid tag name must start with a letter
+      if (tag && VALID_TAG_START.test(tag[0]!)) {
         if (isClose) {
           // Closing tag: skip whitespace, expect >
           while (j < input.length && /\s/.test(input[j]!)) j++;
@@ -692,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++;