strokes-js 0.1.3 → 0.2.0

package/dist/glyphs/glyphs.js

@@ -66,59 +66,73 @@ 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 { punctAmpersand } from "./punctuation/punct-ampersand.js";
+import { punctParenOpen } from "./punctuation/punct-paren-open.js";
+import { punctParenClose } from "./punctuation/punct-paren-close.js";
+import { punctEmDash } from "./punctuation/punct-em-dash.js";
+import { punctQuote } from "./punctuation/punct-quote.js";
+import { punctBacktick } from "./punctuation/punct-backtick.js";
+import { punctBraceOpen } from "./punctuation/punct-brace-open.js";
+import { punctBraceClose } from "./punctuation/punct-brace-close.js";
+import { punctBracketOpen } from "./punctuation/punct-bracket-open.js";
+import { punctBracketClose } from "./punctuation/punct-bracket-close.js";
+import { punctAsterisk } from "./punctuation/punct-asterisk.js";
+import { punctEquals } from "./punctuation/punct-equals.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,
@@ -135,4 +149,16 @@ export const glyphs = {
     "?": punctQuestion,
     "'": punctApostrophe,
     "-": punctHyphen,
+    "&": punctAmpersand,
+    "(": punctParenOpen,
+    ")": punctParenClose,
+    "—": punctEmDash,
+    '"': punctQuote,
+    "`": punctBacktick,
+    "{": punctBraceOpen,
+    "}": punctBraceClose,
+    "[": punctBracketOpen,
+    "]": punctBracketClose,
+    "*": punctAsterisk,
+    "=": punctEquals,
 };

package/dist/glyphs/punctuation/punct-ampersand.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "&", 3 wobble variants. */
+export declare const punctAmpersand: GlyphEntry;

package/dist/glyphs/punctuation/punct-ampersand.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "&", 3 wobble variants. */
+export const punctAmpersand = {
+    width: 14,
+    variants: [
+        "M11 8 C 11 5.5 8.5 4 7 5.5 C 5.5 7 6.5 9 8 10.5 L 11.5 14 C 13 15.5 12.5 18.5 10 19.5 C 7 20.5 3.5 19.5 2.5 17 C 1.5 14.5 3.5 12 6.5 12 C 9 12 10.5 13.5 11.5 15.5",
+        "M11.0 7.9 C 11.2 5.4 8.6 3.9 6.9 5.6 C 5.4 7.1 6.6 9.1 8.1 10.4 C 8.1 10.4 11.6 13.9 11.6 13.9 C 13.1 15.6 12.4 18.6 9.9 19.6 C 6.9 20.6 3.6 19.4 2.6 16.9 C 1.6 14.4 3.6 11.9 6.6 12.1 C 9.1 11.9 10.6 13.6 11.6 15.4",
+        "M10.9 8.1 C 10.9 5.6 8.4 4.1 7.1 5.4 C 5.6 6.9 6.4 8.9 7.9 10.6 L 11.4 14.1 C 12.9 15.4 12.6 18.4 10.1 19.4 C 7.1 20.4 3.4 19.6 2.4 17.1 C 1.4 14.6 3.4 12.1 6.4 11.9 C 8.9 12.1 10.4 13.4 11.4 15.6",
+    ],
+};

package/dist/glyphs/punctuation/punct-asterisk.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "*", 3 wobble variants. */
+export declare const punctAsterisk: GlyphEntry;

package/dist/glyphs/punctuation/punct-asterisk.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "*", 3 wobble variants. */
+export const punctAsterisk = {
+    width: 10,
+    variants: [
+        "M5 5 L5 13 M1.5 7 L8.5 11 M8.5 7 L1.5 11",
+        "M4.9 4.9 L5.1 13.1 M1.4 6.9 L8.6 11.1 M8.6 6.9 L1.4 11.1",
+        "M5.1 5.1 L4.9 12.9 M1.6 7.1 L8.4 10.9 M8.4 7.1 L1.6 10.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-backtick.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "`", 3 wobble variants. */
+export declare const punctBacktick: GlyphEntry;

package/dist/glyphs/punctuation/punct-backtick.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "`", 3 wobble variants. */
+export const punctBacktick = {
+    width: 6,
+    variants: [
+        "M3.5 4 L4.5 7",
+        "M3.4 3.9 L4.6 7.1",
+        "M3.6 4.1 L4.4 6.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-brace-close.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "}", 3 wobble variants. */
+export declare const punctBraceClose: GlyphEntry;

package/dist/glyphs/punctuation/punct-brace-close.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "}", 3 wobble variants. */
+export const punctBraceClose = {
+    width: 10,
+    variants: [
+        "M3 3 C 6 3 5 7 5 9 C 5 11 7 11.5 8 12 C 7 12.5 5 13 5 15 C 5 17 6 21 3 21",
+        "M2.9 2.9 C 6.1 3.1 4.9 6.9 5.0 9.1 C 5.1 11.1 6.9 11.4 8.1 12.1 C 6.9 12.6 5.1 12.9 4.9 15.1 C 5.1 17.1 6.1 20.9 2.9 21.1",
+        "M3.1 3.1 C 5.9 2.9 5.1 7.1 5.0 8.9 C 4.9 10.9 7.1 11.6 7.9 11.9 C 7.1 12.4 4.9 13.1 5.1 14.9 C 4.9 16.9 5.9 21.1 3.1 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-brace-open.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "{", 3 wobble variants. */
+export declare const punctBraceOpen: GlyphEntry;

package/dist/glyphs/punctuation/punct-brace-open.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "{", 3 wobble variants. */
+export const punctBraceOpen = {
+    width: 10,
+    variants: [
+        "M7 3 C 4 3 5 7 5 9 C 5 11 3 11.5 2 12 C 3 12.5 5 13 5 15 C 5 17 4 21 7 21",
+        "M7.1 2.9 C 3.9 3.1 5.1 6.9 5.0 9.1 C 4.9 11.1 3.1 11.4 1.9 12.1 C 3.1 12.6 4.9 12.9 5.1 15.1 C 4.9 17.1 3.9 20.9 7.1 21.1",
+        "M6.9 3.1 C 4.1 2.9 4.9 7.1 5.0 8.9 C 5.1 10.9 2.9 11.6 2.1 11.9 C 2.9 12.4 5.1 13.1 4.9 14.9 C 5.1 16.9 4.1 21.1 6.9 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-bracket-close.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "]", 3 wobble variants. */
+export declare const punctBracketClose: GlyphEntry;

package/dist/glyphs/punctuation/punct-bracket-close.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "]", 3 wobble variants. */
+export const punctBracketClose = {
+    width: 8,
+    variants: [
+        "M2 3 L5 3 L5 21 L2 21",
+        "M1.9 2.9 L5.1 3.1 L4.9 20.9 L1.9 21.1",
+        "M2.1 3.1 L4.9 2.9 L5.1 21.1 L2.1 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-bracket-open.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "[", 3 wobble variants. */
+export declare const punctBracketOpen: GlyphEntry;

package/dist/glyphs/punctuation/punct-bracket-open.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "[", 3 wobble variants. */
+export const punctBracketOpen = {
+    width: 8,
+    variants: [
+        "M6 3 L3 3 L3 21 L6 21",
+        "M6.1 2.9 L2.9 3.1 L3.1 20.9 L6.1 21.1",
+        "M5.9 3.1 L3.1 2.9 L2.9 21.1 L5.9 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-em-dash.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "—" (em dash), 3 wobble variants. */
+export declare const punctEmDash: GlyphEntry;

package/dist/glyphs/punctuation/punct-em-dash.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "—" (em dash), 3 wobble variants. */
+export const punctEmDash = {
+    width: 12,
+    variants: [
+        "M1 12 L11 12",
+        "M0.9 12.1 L11.1 11.9",
+        "M1.1 11.9 L10.9 12.1",
+    ],
+};

package/dist/glyphs/punctuation/punct-equals.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "=", 3 wobble variants. */
+export declare const punctEquals: GlyphEntry;

package/dist/glyphs/punctuation/punct-equals.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "=", 3 wobble variants. */
+export const punctEquals = {
+    width: 10,
+    variants: [
+        "M1 10 L9 10 M1 14 L9 14",
+        "M0.9 10.1 L9.1 9.9 M0.9 14.1 L9.1 13.9",
+        "M1.1 9.9 L8.9 10.1 M1.1 14.1 L8.9 13.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-paren-close.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: ")", 3 wobble variants. */
+export declare const punctParenClose: GlyphEntry;

package/dist/glyphs/punctuation/punct-paren-close.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: ")", 3 wobble variants. */
+export const punctParenClose = {
+    width: 8,
+    variants: [
+        "M2 3 C 6 7 6 17 2 21",
+        "M1.9 2.9 C 6.1 6.9 6.2 17.1 1.9 21.1",
+        "M2.1 3.1 C 5.9 7.1 5.8 16.9 2.1 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-paren-open.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: "(", 3 wobble variants. */
+export declare const punctParenOpen: GlyphEntry;

package/dist/glyphs/punctuation/punct-paren-open.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: "(", 3 wobble variants. */
+export const punctParenOpen = {
+    width: 8,
+    variants: [
+        "M6 3 C 2 7 2 17 6 21",
+        "M6.1 2.9 C 1.9 6.9 1.8 17.1 6.1 21.1",
+        "M5.9 3.1 C 2.1 7.1 2.2 16.9 5.9 20.9",
+    ],
+};

package/dist/glyphs/punctuation/punct-quote.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphEntry } from "../types.js";
+/** Real hand-drawn glyph: '"', 3 wobble variants. */
+export declare const punctQuote: GlyphEntry;

package/dist/glyphs/punctuation/punct-quote.js

@@ -0,0 +1,9 @@
+/** Real hand-drawn glyph: '"', 3 wobble variants. */
+export const punctQuote = {
+    width: 9,
+    variants: [
+        "M2.5 4 L2 7 M6.5 4 L6 7",
+        "M2.4 3.9 L2.1 7.1 M6.4 3.9 L6.1 7.1",
+        "M2.6 4.1 L1.9 6.9 M6.6 4.1 L5.9 6.9",
+    ],
+};

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`
@@ -82,15 +101,14 @@ export function renderText(text, options = {}) {
         }
         const word = part;
         const { svg, letterCount } = renderWord(word, delayOffset, animate);
-        const space = pendingWhitespace
-            ? `<span class="hw-space" aria-hidden="true" style="white-space: pre-wrap">${escapeHtml(pendingWhitespace)}</span>`
-            : "";
-        markup.push(`<span class="hw-token">${space}${svg}</span>`);
+        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 += letterCount;
+        delayOffset += spaceCount + letterCount;
     }
     if (pendingWhitespace) {
-        markup.push(`<span class="hw-token"><span class="hw-space" aria-hidden="true" style="white-space: pre-wrap">${escapeHtml(pendingWhitespace)}</span></span>`);
+        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>`;
 }
@@ -101,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.3",
+  "version": "0.2.0",
   "description": "Renders text as animated hand-drawn SVG",
   "type": "module",
   "main": "dist/index.js",