strokes-js 0.1.2 → 0.1.4

package/dist/glyphs/glyphs.js

@@ -66,59 +66,61 @@ import { punctExclamation } from "./punctuation/punct-exclamation.js";
 import { punctQuestion } from "./punctuation/punct-question.js";
 import { punctApostrophe } from "./punctuation/punct-apostrophe.js";
 import { punctHyphen } from "./punctuation/punct-hyphen.js";
+import { space } from "./space.js";
 export const glyphs = {
-    "A": letterAUpper,
-    "a": letterA,
-    "B": letterBUpper,
-    "b": letterB,
-    "C": letterCUpper,
-    "c": letterC,
-    "D": letterDUpper,
-    "d": letterD,
-    "E": letterEUpper,
-    "e": letterE,
-    "F": letterFUpper,
-    "f": letterF,
-    "G": letterGUpper,
-    "g": letterG,
-    "H": letterHUpper,
-    "h": letterH,
-    "I": letterIUpper,
-    "i": letterI,
-    "J": letterJUpper,
-    "j": letterJ,
-    "K": letterKUpper,
-    "k": letterK,
-    "L": letterLUpper,
-    "l": letterL,
-    "M": letterMUpper,
-    "m": letterM,
-    "N": letterNUpper,
-    "n": letterN,
-    "O": letterOUpper,
-    "o": letterO,
-    "P": letterPUpper,
-    "p": letterP,
-    "Q": letterQUpper,
-    "q": letterQ,
-    "R": letterRUpper,
-    "r": letterR,
-    "S": letterSUpper,
-    "s": letterS,
-    "T": letterTUpper,
-    "t": letterT,
-    "U": letterUUpper,
-    "u": letterU,
-    "V": letterVUpper,
-    "v": letterV,
-    "W": letterWUpper,
-    "w": letterW,
-    "X": letterXUpper,
-    "x": letterX,
-    "Y": letterYUpper,
-    "y": letterY,
-    "Z": letterZUpper,
-    "z": letterZ,
+    " ": space,
+    A: letterAUpper,
+    a: letterA,
+    B: letterBUpper,
+    b: letterB,
+    C: letterCUpper,
+    c: letterC,
+    D: letterDUpper,
+    d: letterD,
+    E: letterEUpper,
+    e: letterE,
+    F: letterFUpper,
+    f: letterF,
+    G: letterGUpper,
+    g: letterG,
+    H: letterHUpper,
+    h: letterH,
+    I: letterIUpper,
+    i: letterI,
+    J: letterJUpper,
+    j: letterJ,
+    K: letterKUpper,
+    k: letterK,
+    L: letterLUpper,
+    l: letterL,
+    M: letterMUpper,
+    m: letterM,
+    N: letterNUpper,
+    n: letterN,
+    O: letterOUpper,
+    o: letterO,
+    P: letterPUpper,
+    p: letterP,
+    Q: letterQUpper,
+    q: letterQ,
+    R: letterRUpper,
+    r: letterR,
+    S: letterSUpper,
+    s: letterS,
+    T: letterTUpper,
+    t: letterT,
+    U: letterUUpper,
+    u: letterU,
+    V: letterVUpper,
+    v: letterV,
+    W: letterWUpper,
+    w: letterW,
+    X: letterXUpper,
+    x: letterX,
+    Y: letterYUpper,
+    y: letterY,
+    Z: letterZUpper,
+    z: letterZ,
     "0": digit0,
     "1": digit1,
     "2": digit2,

package/dist/glyphs/space.d.ts

@@ -0,0 +1,2 @@
+import type { GlyphEntry } from "./types.js";
+export declare const space: GlyphEntry;

package/dist/glyphs/space.js

@@ -0,0 +1,5 @@
+export const space = {
+    width: 8,
+    variantWidths: [7, 8, 9],
+    variants: ["", "", ""],
+};

package/dist/glyphs/types.d.ts

@@ -1,5 +1,6 @@
 export interface GlyphEntry {
     width: number;
+    variantWidths?: number[];
     variants: string[];
 }
 export type GlyphDatabase = Record<string, GlyphEntry>;

package/dist/renderer.js

@@ -45,25 +45,44 @@ function renderWord(word, delayOffset, animate) {
             continue;
         const variantIndex = pickVariant(char, entry);
         const d = entry.variants[variantIndex];
+        const width = entry.variantWidths?.[variantIndex] ?? entry.width;
         const style = animate
             ? `stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset ${STROKE_MS}ms ease ${(delayOffset + letterIndex) * STAGGER_MS}ms;`
             : "";
-        const { rotate, dy, scale } = randomJitter();
-        const cx = entry.width / 2;
-        const cy = LETTER_HEIGHT / 2;
-        // Position first, then rotate/scale around the letter's own center (not the SVG origin)
-        // so the jitter can't nudge later letters in long words out of position.
-        const transform = `translate(${x} ${dy.toFixed(2)}) translate(${cx} ${cy}) ` +
-            `rotate(${rotate.toFixed(1)}) scale(${scale.toFixed(3)}) translate(${-cx} ${-cy})`;
-        paths.push(`<path d="${d}" transform="${transform}" stroke="var(--hw-color, #000)" fill="none" ` +
-            `stroke-width="2" stroke-linecap="round" pathLength="1" style="${style}" class="hw-letter" />`);
-        x += entry.width;
+        if (d) {
+            const { rotate, dy, scale } = randomJitter();
+            const cx = width / 2;
+            const cy = LETTER_HEIGHT / 2;
+            // Position first, then rotate/scale around the letter's own center (not the SVG origin)
+            // so the jitter can't nudge later letters in long words out of position.
+            const transform = `translate(${x} ${dy.toFixed(2)}) translate(${cx} ${cy}) ` +
+                `rotate(${rotate.toFixed(1)}) scale(${scale.toFixed(3)}) translate(${-cx} ${-cy})`;
+            paths.push(`<path d="${d}" transform="${transform}" stroke="var(--hw-color, #000)" fill="none" ` +
+                `stroke-width="2" stroke-linecap="round" pathLength="1" style="${style}" class="hw-letter" />`);
+        }
+        x += width;
         letterIndex++;
     }
     const svg = `<svg class="hw-word" xmlns="http://www.w3.org/2000/svg" width="${x}" height="${LETTER_HEIGHT}" ` +
         `viewBox="0 0 ${x} ${LETTER_HEIGHT}" aria-hidden="true">${paths.join("")}</svg>`;
     return { svg, letterCount: letterIndex };
 }
+function renderWhitespace(whitespace, delayOffset, animate) {
+    let letterCount = 0;
+    const markup = [];
+    for (const chunk of whitespace.split(/(\r\n|\r|\n)/)) {
+        if (!chunk)
+            continue;
+        if (/^(\r\n|\r|\n)$/.test(chunk)) {
+            markup.push("<br />");
+            continue;
+        }
+        const { svg, letterCount: count } = renderWord(chunk.replace(/\s/g, " "), delayOffset + letterCount, animate);
+        markup.push(svg);
+        letterCount += count;
+    }
+    return { markup: markup.join(""), letterCount };
+}
 /**
  * Renders text as a sentence wrapper containing one <svg> per word.
  * When animate (default), each word's letters draw in via stroke-dashoffset once `.hw-visible`
@@ -74,15 +93,22 @@ export function renderText(text, options = {}) {
     const parts = splitText(text);
     let delayOffset = 0;
     const markup = [];
+    let pendingWhitespace = "";
     for (const part of parts) {
         if (/^\s+$/.test(part)) {
-            markup.push(`<span class="hw-space" aria-hidden="true" style="white-space: pre-wrap">${escapeHtml(part)}</span>`);
+            pendingWhitespace += part;
             continue;
         }
         const word = part;
         const { svg, letterCount } = renderWord(word, delayOffset, animate);
-        markup.push(svg);
-        delayOffset += letterCount;
+        const { markup: space, letterCount: spaceCount } = renderWhitespace(pendingWhitespace, delayOffset, animate);
+        markup.push(`<span class="hw-token" style="display:inline-flex;align-items:baseline">${space}${svg}</span>`);
+        pendingWhitespace = "";
+        delayOffset += spaceCount + letterCount;
+    }
+    if (pendingWhitespace) {
+        const { markup: space } = renderWhitespace(pendingWhitespace, delayOffset, animate);
+        markup.push(`<span class="hw-token" style="display:inline-flex;align-items:baseline">${space}</span>`);
     }
     return `<span class="hw-sentence" aria-label="${escapeAttr(text)}">${markup.join("")}</span>`;
 }
@@ -93,12 +119,6 @@ function escapeAttr(value) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }
-function escapeHtml(value) {
-    return value
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-}
 /** Toggles the class that starts the draw-in transition for a rendered word's strokes. */
 export function animateWriting(el) {
     el.classList.add("hw-visible");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strokes-js",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Renders text as animated hand-drawn SVG",
   "type": "module",
   "main": "dist/index.js",