yarn-spinner-runner-ts 0.1.2-b → 0.1.3

package/src/parse/parser.ts

@@ -1,4 +1,6 @@
 import { lex, Token } from "./lexer.js";
+import { parseMarkup, sliceMarkup } from "../markup/parser.js";
+import type { MarkupParseResult } from "../markup/types.js";
 import type {
   YarnDocument,
   YarnNode,
@@ -177,17 +179,33 @@ class Parser {
     }
     if (t.type === "TEXT") {
       const raw = this.take("TEXT").text;
-      const { cleanText: text, tags } = this.extractTags(raw);
-      const speakerMatch = text.match(/^([^:\s][^:]*)\s*:\s*(.*)$/);
+      const { cleanText: textWithoutTags, tags } = this.extractTags(raw);
+      const markup = parseMarkup(textWithoutTags);
+      const speakerMatch = markup.text.match(/^([^:\s][^:]*)\s*:\s*(.*)$/);
       if (speakerMatch) {
-        return { type: "Line", speaker: speakerMatch[1].trim(), text: speakerMatch[2], tags } as Line;
+        const messageText = speakerMatch[2];
+        const messageOffset = markup.text.length - messageText.length;
+        const slicedMarkup = sliceMarkup(markup, messageOffset);
+        const normalizedMarkup = this.normalizeMarkup(slicedMarkup);
+        return {
+          type: "Line",
+          speaker: speakerMatch[1].trim(),
+          text: messageText,
+          tags,
+          markup: normalizedMarkup,
+        } as Line;
       }
       // If/Else blocks use inline markup {if ...}
-      const trimmed = text.trim();
+      const trimmed = markup.text.trim();
       if (trimmed.startsWith("{if ") || trimmed === "{else}" || trimmed.startsWith("{else if ") || trimmed === "{endif}") {
-        return this.parseIfFromText(text);
+        return this.parseIfFromText(markup.text);
       }
-      return { type: "Line", text, tags } as Line;
+      return {
+        type: "Line",
+        text: markup.text,
+        tags,
+        markup: this.normalizeMarkup(markup),
+      } as Line;
     }
     throw new ParseError(`Unexpected token ${t.type}`);
   }
@@ -198,7 +216,8 @@ class Parser {
     while (this.at("OPTION")) {
       const raw = this.take("OPTION").text;
       const { cleanText: textWithAttrs, tags } = this.extractTags(raw);
-      const { text, css } = this.extractCss(textWithAttrs);
+      const { text: textWithoutCss, css } = this.extractCss(textWithAttrs);
+      const markup = parseMarkup(textWithoutCss);
       let body: Statement[] = [];
       if (this.at("INDENT")) {
         this.take("INDENT");
@@ -206,13 +225,46 @@ class Parser {
         this.take("DEDENT");
         while (this.at("EMPTY")) this.i++;
       }
-      options.push({ type: "Option", text, body, tags, css });
+      options.push({
+        type: "Option",
+        text: markup.text,
+        body,
+        tags,
+        css,
+        markup: this.normalizeMarkup(markup),
+      });
       // Consecutive options belong to the same group; break on non-OPTION
       while (this.at("EMPTY")) this.i++;
     }
     return { type: "OptionGroup", options };
   }
 
+  private normalizeMarkup(result: MarkupParseResult): MarkupParseResult | undefined {
+    if (!result) return undefined;
+    if (result.segments.length === 0) {
+      return undefined;
+    }
+    const hasFormatting = result.segments.some(
+      (segment) => segment.wrappers.length > 0 || segment.selfClosing
+    );
+    if (!hasFormatting) {
+      return undefined;
+    }
+    return {
+      text: result.text,
+      segments: result.segments.map((segment) => ({
+        start: segment.start,
+        end: segment.end,
+        wrappers: segment.wrappers.map((wrapper) => ({
+          name: wrapper.name,
+          type: wrapper.type,
+          properties: { ...wrapper.properties },
+        })),
+        selfClosing: segment.selfClosing,
+      })),
+    };
+  }
+
   private extractTags(input: string): { cleanText: string; tags?: string[] } {
     const tags: string[] = [];
     // Match tags that are space-separated and not part of hex colors or CSS

package/src/react/DialogueExample.tsx

@@ -9,8 +9,9 @@ import type { SceneCollection } from "../scene/types.js";
 const DEFAULT_YARN = `title: Start
 scene: scene1
 ---
+Narrator: [wave]hello[/wave] [b]hello[/b]  baarter
 Narrator: Welcome to yarn-spinner-ts!
-Narrator: This is a dialogue system powered by Yarn Spinner.
+npc: This is a dialogue system powered by Yarn Spinner.
 Narrator: Click anywhere to continue, or choose an option below.
 -> Start the adventure &css{backgroundColor: #4a9eff; color: white;}
     Narrator: Great! Let's begin your journey.
@@ -23,7 +24,7 @@ Narrator: Click anywhere to continue, or choose an option below.
 
 title: NextScene
 ---
-blablabla
+npc: blablabla
 Narrator: You've reached the next scene!
 Narrator: The dialogue system supports rich features like:
 Narrator: • Variables and expressions
@@ -114,6 +115,7 @@ export function DialogueExample() {
           cursorCharacter="$"
           autoAdvanceAfterTyping={true}
           autoAdvanceDelay={2000}
+          actorTransitionDuration={1000} 
           pauseBeforeAdvance={enableTypingAnimation ? 1000 : 0}
         />
       </div>

package/src/react/DialogueScene.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo, useRef } from "react";
 import type { SceneCollection, SceneConfig } from "../scene/types.js";
 // Note: CSS is imported in the browser demo entry point (examples/browser/main.tsx)
 // This prevents Node.js from trying to resolve CSS imports during tests
@@ -8,25 +8,59 @@ export interface DialogueSceneProps {
   speaker?: string;
   scenes: SceneCollection;
   className?: string;
+  actorTransitionDuration?: number;
 }
 
 /**
  * Visual scene component that displays background and actor images
  */
-export function DialogueScene({ sceneName, speaker, scenes, className }: DialogueSceneProps) {
+export function DialogueScene({
+  sceneName,
+  speaker,
+  scenes,
+  className,
+  actorTransitionDuration = 350,
+}: DialogueSceneProps) {
+
   const [currentBackground, setCurrentBackground] = useState<string | null>(null);
   const [backgroundOpacity, setBackgroundOpacity] = useState(1);
   const [nextBackground, setNextBackground] = useState<string | null>(null);
   const [lastSceneName, setLastSceneName] = useState<string | undefined>(undefined);
   const [lastSpeaker, setLastSpeaker] = useState<string | undefined>(undefined);
+  const [activeActor, setActiveActor] = useState<{ name: string; image: string } | null>(null);
+  const [previousActor, setPreviousActor] = useState<{ name: string; image: string } | null>(null);
+  const [currentActorVisible, setCurrentActorVisible] = useState(false);
+  const [previousActorVisible, setPreviousActorVisible] = useState(false);
+  const previousActorTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
   // Get scene config - use last scene if current node has no scene
   const activeSceneName = sceneName || lastSceneName;
   const sceneConfig: SceneConfig | undefined = activeSceneName ? scenes.scenes[activeSceneName] : undefined;
   const backgroundImage = sceneConfig?.background;
 
-  // Get all actors from the current scene
-  const sceneActors = sceneConfig ? Object.keys(sceneConfig.actors) : [];
+  const activeSpeakerName = speaker || lastSpeaker;
+
+  const resolvedActor = useMemo(() => {
+    if (!sceneConfig || !activeSpeakerName) {
+      return null;
+    }
+
+    const actorEntries = Object.entries(sceneConfig.actors);
+    const matchingActor = actorEntries.find(
+      ([actorName]) => actorName.toLowerCase() === activeSpeakerName.toLowerCase()
+    );
+
+    if (!matchingActor) {
+      return null;
+    }
+
+    const [actorName, actorConfig] = matchingActor;
+    if (!actorConfig?.image) {
+      return null;
+    }
+
+    return { name: actorName, image: actorConfig.image };
+  }, [sceneConfig, activeSpeakerName]);
   
   // Track last speaker - update when speaker is provided, keep when undefined
   useEffect(() => {
@@ -64,18 +98,95 @@ export function DialogueScene({ sceneName, speaker, scenes, className }: Dialogu
     // Never clear background - keep it until a new one is explicitly set
   }, [backgroundImage, currentBackground, sceneName, lastSceneName]);
 
+  // Handle actor portrait transitions (cross-fade between speakers)
+  useEffect(() => {
+    let fadeOutTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    setActiveActor((currentActor) => {
+      const currentImage = currentActor?.image ?? null;
+      const currentName = currentActor?.name ?? null;
+      const nextImage = resolvedActor?.image ?? null;
+      const nextName = resolvedActor?.name ?? null;
+
+      if (currentImage === nextImage && currentName === nextName) {
+        return currentActor;
+      }
+
+      if (currentActor) {
+        setPreviousActor(currentActor);
+        setPreviousActorVisible(true);
+        fadeOutTimeout = setTimeout(() => {
+          setPreviousActorVisible(false);
+        }, 0);
+      } else {
+        setPreviousActor(null);
+        setPreviousActorVisible(false);
+      }
+
+      setCurrentActorVisible(false);
+
+      return resolvedActor;
+    });
+
+    return () => {
+      if (fadeOutTimeout !== null) {
+        clearTimeout(fadeOutTimeout);
+      }
+    };
+  }, [resolvedActor]);
+
+  useEffect(() => {
+    if (!activeActor) {
+      return;
+    }
+
+    const fadeInTimeout = setTimeout(() => {
+      setCurrentActorVisible(true);
+    }, 0);
+
+    return () => {
+      clearTimeout(fadeInTimeout);
+    };
+  }, [activeActor]);
+
+  // Remove previous actor once fade-out completes
+  useEffect(() => {
+    if (!previousActor) {
+      return;
+    }
+
+    if (previousActorTimeoutRef.current) {
+      clearTimeout(previousActorTimeoutRef.current);
+    }
+
+    previousActorTimeoutRef.current = setTimeout(() => {
+      setPreviousActor(null);
+      previousActorTimeoutRef.current = null;
+    }, actorTransitionDuration);
+
+    return () => {
+      if (previousActorTimeoutRef.current) {
+        clearTimeout(previousActorTimeoutRef.current);
+        previousActorTimeoutRef.current = null;
+      }
+    };
+  }, [previousActor, actorTransitionDuration]);
+
   // Default background color when no scene
   const defaultBgColor = "rgba(26, 26, 46, 1)"; // Dark blue-purple
+  const handleActorImageError = (actorName: string, imageUrl: string) => () => {
+    console.error(`Failed to load actor image for ${actorName}:`, imageUrl);
+  };
 
-  return (
-    <div
-      className={`yd-scene ${className || ""}`}
-      style={{
-        backgroundColor: currentBackground ? undefined : defaultBgColor,
-        backgroundImage: currentBackground ? `url(${currentBackground})` : undefined,
-        opacity: backgroundOpacity,
-      }}
-    >
+  const sceneStyle: React.CSSProperties & { ["--yd-actor-transition"]: string } = {
+    backgroundColor: currentBackground ? undefined : defaultBgColor,
+    backgroundImage: currentBackground ? `url(${currentBackground})` : undefined,
+    opacity: backgroundOpacity,
+    ["--yd-actor-transition"]: `${Math.max(actorTransitionDuration, 0)}ms`,
+  };
+
+  return (
+    <div className={`yd-scene ${className || ""}`} style={sceneStyle}>
       {/* Next background (during transition) */}
       {nextBackground && (
         <div
@@ -87,37 +198,25 @@ export function DialogueScene({ sceneName, speaker, scenes, className }: Dialogu
         />
       )}
 
-      {/* Actor image - show only the speaking actor, aligned to top */}
-      {sceneConfig && (speaker || lastSpeaker) && (() => {
-        // Use current speaker if available, otherwise use last speaker to keep image visible
-        const activeSpeaker = speaker || lastSpeaker;
-        
-        // Type guard: ensure activeSpeaker is defined
-        if (!activeSpeaker) return null;
-        
-        // Find the actor that matches the speaker (case-insensitive)
-        const speakingActorName = sceneActors.find(
-          actorName => actorName.toLowerCase() === activeSpeaker.toLowerCase()
-        );
-        
-        if (!speakingActorName) return null;
-        
-        const actorConfig = sceneConfig.actors[speakingActorName];
-        if (!actorConfig?.image) return null;
-
-        return (
-          <img
-            key={speakingActorName}
-            className="yd-actor"
-            src={actorConfig.image}
-            alt={speakingActorName}
-            onError={(e) => {
-              console.error(`Failed to load actor image for ${speakingActorName}:`, actorConfig.image, e);
-            }}
-          />
-        );
-      })()}
+      {/* Actor portraits with cross-fade */}
+      {previousActor && (
+        <img
+          key={`${previousActor.name}-previous`}
+          className={`yd-actor yd-actor--previous ${previousActorVisible ? "yd-actor--visible" : ""}`}
+          src={previousActor.image}
+          alt={previousActor.name}
+          onError={handleActorImageError(previousActor.name, previousActor.image)}
+        />
+      )}
+      {activeActor && (
+        <img
+          key={`${activeActor.name}-current`}
+          className={`yd-actor yd-actor--current ${currentActorVisible ? "yd-actor--visible" : ""}`}
+          src={activeActor.image}
+          alt={activeActor.name}
+          onError={handleActorImageError(activeActor.name, activeActor.image)}
+        />
+      )}
     </div>
   );
 }
-

package/src/react/DialogueView.tsx

@@ -3,6 +3,7 @@ import type { RuntimeResult } from "../runtime/results.js";
 import { DialogueScene } from "./DialogueScene.js";
 import type { SceneCollection } from "../scene/types.js";
 import { TypingText } from "./TypingText.js";
+import { MarkupRenderer } from "./MarkupRenderer.js";
 // Note: CSS is imported in the browser demo entry point (examples/browser/main.tsx)
 // This prevents Node.js from trying to resolve CSS imports during tests
 
@@ -11,6 +12,7 @@ export interface DialogueViewProps {
   onAdvance: (optionIndex?: number) => void;
   className?: string;
   scenes?: SceneCollection;
+  actorTransitionDuration?: number;
   // Typing animation options
   enableTypingAnimation?: boolean;
   typingSpeed?: number;
@@ -85,6 +87,7 @@ export function DialogueView({
   onAdvance,
   className,
   scenes,
+  actorTransitionDuration = 350,
   enableTypingAnimation = false,
   typingSpeed = 50, // Characters per second (50 cps = ~20ms per character)
   showTypingCursor = true,
@@ -143,7 +146,7 @@ export function DialogueView({
   if (result.type === "text") {
     const nodeStyles = parseCss(result.nodeCss);
     const displayText = result.text || "\u00A0";
-    const shouldShowContinue = !result.isDialogueEnd && !enableTypingAnimation;
+    const shouldShowContinue = !result.isDialogueEnd && !enableTypingAnimation;
 
     const handleClick = () => {
       if (result.isDialogueEnd) return;
@@ -174,7 +177,12 @@ export function DialogueView({
 
     return (
       <div className="yd-container">
-        <DialogueScene sceneName={sceneName} speaker={speaker} scenes={sceneCollection} />
+        <DialogueScene
+          sceneName={sceneName}
+          speaker={speaker}
+          scenes={sceneCollection}
+          actorTransitionDuration={actorTransitionDuration}
+        />
         <div
           className={`yd-dialogue-box ${result.isDialogueEnd ? "yd-text-box-end" : ""} ${className || ""}`}
           style={nodeStyles} // Only apply dynamic node CSS
@@ -191,6 +199,7 @@ export function DialogueView({
                 <TypingText
                   key={currentTextKey}
                   text={displayText}
+                  markup={result.markup}
                   typingSpeed={typingSpeed}
                   showCursor={showTypingCursor}
                   cursorCharacter={cursorCharacter}
@@ -198,7 +207,7 @@ export function DialogueView({
                   onComplete={() => setTypingComplete(true)}
                 />
               ) : (
-                displayText
+                <MarkupRenderer text={displayText} markup={result.markup} />
               )}
             </p>
             {shouldShowContinue && (
@@ -216,7 +225,12 @@ export function DialogueView({
     const nodeStyles = parseCss(result.nodeCss);
     return (
       <div className="yd-container">
-        <DialogueScene sceneName={sceneName} speaker={speaker} scenes={sceneCollection} />
+        <DialogueScene
+          sceneName={sceneName}
+          speaker={speaker}
+          scenes={sceneCollection}
+          actorTransitionDuration={actorTransitionDuration}
+        />
         <div className={`yd-options-container ${className || ""}`}>
           <div className="yd-options-box" style={nodeStyles}>
             <div className="yd-options-title">Choose an option:</div>
@@ -230,7 +244,7 @@ export function DialogueView({
                     onClick={() => onAdvance(index)}
                     style={optionStyles} // Only apply dynamic option CSS
                   >
-                    {option.text}
+                    <MarkupRenderer text={option.text} markup={option.markup} />
                   </button>
                 );
               })}

package/src/react/MarkupRenderer.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import type { MarkupParseResult, MarkupWrapper } from "../markup/types.js";
+
+const DEFAULT_HTML_TAGS = new Set(["b", "em", "small", "strong", "sub", "sup", "ins", "del", "mark"]);
+
+interface RenderPiece {
+  text: string;
+  wrappers: MarkupWrapper[];
+  key: string;
+  selfClosing?: boolean;
+}
+
+interface MarkupRendererProps {
+  text: string;
+  markup?: MarkupParseResult;
+  length?: number;
+}
+
+export function MarkupRenderer({ text, markup, length }: MarkupRendererProps) {
+  const maxLength = length ?? text.length;
+  if (!markup || markup.segments.length === 0) {
+    return <>{text.slice(0, maxLength)}</>;
+  }
+
+  const pieces: RenderPiece[] = [];
+  const limit = Math.max(0, Math.min(maxLength, markup.text.length));
+
+  markup.segments.forEach((segment, index) => {
+    if (segment.selfClosing) {
+      if (segment.start <= limit) {
+        pieces.push({
+          text: "",
+          wrappers: segment.wrappers,
+          selfClosing: true,
+          key: `self-${index}`,
+        });
+      }
+      return;
+    }
+    const start = Math.max(0, Math.min(segment.start, limit));
+    const end = Math.max(start, Math.min(segment.end, limit));
+    if (end <= start) {
+      return;
+    }
+    const segmentText = markup.text.slice(start, end);
+    pieces.push({
+      text: segmentText,
+      wrappers: segment.wrappers,
+      key: `seg-${index}-${start}-${end}`,
+    });
+  });
+
+  if (pieces.length === 0) {
+    return <>{text.slice(0, maxLength)}</>;
+  }
+
+  return (
+    <>
+      {pieces.map((piece, pieceIndex) => renderPiece(piece, pieceIndex))}
+    </>
+  );
+}
+
+function renderPiece(piece: RenderPiece, pieceIndex: number): React.ReactNode {
+  const baseKey = `${piece.key}-${pieceIndex}`;
+
+  if (piece.selfClosing) {
+    return piece.wrappers.reduceRight<React.ReactNode>(
+      (child, wrapper, wrapperIndex) => createWrapperElement(wrapper, `${baseKey}-wrapper-${wrapperIndex}`, child),
+      null
+    );
+  }
+
+  const content = piece.wrappers.reduceRight<React.ReactNode>(
+    (child, wrapper, wrapperIndex) => createWrapperElement(wrapper, `${baseKey}-wrapper-${wrapperIndex}`, child),
+    piece.text
+  );
+
+  return <React.Fragment key={baseKey}>{content}</React.Fragment>;
+}
+
+function createWrapperElement(
+  wrapper: MarkupWrapper,
+  key: string,
+  children: React.ReactNode
+): React.ReactElement {
+  const tagName = DEFAULT_HTML_TAGS.has(wrapper.name) ? wrapper.name : "span";
+  const className =
+    wrapper.type === "custom" ? `yd-markup-${sanitizeClassName(wrapper.name)}` : undefined;
+
+  const dataAttributes: Record<string, string> = {};
+  for (const [propertyName, value] of Object.entries(wrapper.properties)) {
+    dataAttributes[`data-markup-${propertyName}`] = String(value);
+  }
+
+  return React.createElement(
+    tagName,
+    {
+      key,
+      className,
+      ...dataAttributes,
+    },
+    children
+  );
+}
+
+function sanitizeClassName(name: string): string {
+  return name.toLowerCase().replace(/[^a-z0-9_-]/g, "-");
+}
+

package/src/react/TypingText.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useEffect, useRef } from "react";
+import type { MarkupParseResult } from "../markup/types.js";
+import { MarkupRenderer } from "./MarkupRenderer.js";
 
 export interface TypingTextProps {
   text: string;
+  markup?: MarkupParseResult;
   typingSpeed?: number;
   showCursor?: boolean;
   cursorCharacter?: string;
@@ -14,6 +17,7 @@ export interface TypingTextProps {
 
 export function TypingText({
   text,
+  markup,
   typingSpeed = 100,
   showCursor = true,
   cursorCharacter = "|",
@@ -23,7 +27,7 @@ export function TypingText({
   onComplete,
   disabled = false,
 }: TypingTextProps) {
-  const [displayedText, setDisplayedText] = useState("");
+  const [displayedLength, setDisplayedLength] = useState(disabled ? text.length : 0);
   const [cursorVisible, setCursorVisible] = useState(true);
   const cursorIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -51,8 +55,7 @@ export function TypingText({
   // Handle typing animation
   useEffect(() => {
     if (disabled) {
-      // If disabled, show full text immediately
-      setDisplayedText(text);
+      setDisplayedLength(text.length);
       if (onCompleteRef.current && text.length > 0) {
         onCompleteRef.current();
       }
@@ -60,7 +63,7 @@ export function TypingText({
     }
 
     // Reset when text changes
-    setDisplayedText("");
+    setDisplayedLength(0);
 
     if (text.length === 0) {
       if (onCompleteRef.current) {
@@ -72,38 +75,22 @@ export function TypingText({
     let index = 0;
     const typeNextCharacter = () => {
       if (index < text.length) {
-        index++;
-        setDisplayedText(text.slice(0, index));
-        
-       
-        // If speed is 0 or very small, type next character immediately (use requestAnimationFrame for smoother animation)
+        index += 1;
+        setDisplayedLength(index);
         if (typingSpeed <= 0) {
-          // Use requestAnimationFrame for instant/smooth rendering
-          requestAnimationFrame(() => {
-            typeNextCharacter();
-          });
+          requestAnimationFrame(typeNextCharacter);
         } else {
-          typingTimeoutRef.current = setTimeout(() => {
-            typeNextCharacter();
-          }, typingSpeed);
-        }
-      } else {
-        if (onCompleteRef.current) {
-          onCompleteRef.current();
+          typingTimeoutRef.current = setTimeout(typeNextCharacter, typingSpeed);
         }
+      } else if (onCompleteRef.current) {
+        onCompleteRef.current();
       }
     };
 
-    // Start typing
     if (typingSpeed <= 0) {
-      // Start immediately if speed is 0
-      requestAnimationFrame(() => {
-        typeNextCharacter();
-      });
+      requestAnimationFrame(typeNextCharacter);
     } else {
-      typingTimeoutRef.current = setTimeout(() => {
-        typeNextCharacter();
-      }, typingSpeed);
+      typingTimeoutRef.current = setTimeout(typeNextCharacter, typingSpeed);
     }
 
     return () => {
@@ -111,11 +98,19 @@ export function TypingText({
         clearTimeout(typingTimeoutRef.current);
       }
     };
-  }, [text, disabled]);
+  }, [text, disabled, typingSpeed]);
+
+  const visibleLength = markup ? Math.min(displayedLength, markup.text.length) : Math.min(displayedLength, text.length);
 
   return (
     <span className={className}>
-      <span>{displayedText}</span>
+      <span>
+        {markup ? (
+          <MarkupRenderer text={text} markup={markup} length={visibleLength} />
+        ) : (
+          text.slice(0, visibleLength)
+        )}
+      </span>
       {showCursor && !disabled && (
         <span
           className={`yd-typing-cursor ${cursorClassName}`}