strokes-js 0.1.0 → 0.1.1

package/README.md

@@ -197,6 +197,15 @@ export interface GlyphEntry {
 
 Adding or editing a glyph means editing its own file under `glyphs/letters`, `glyphs/digits`, or `glyphs/punctuation` — no other file needs to change except `glyphs.ts`'s import/lookup if you're adding a brand-new character.
 
+## Development
+
+```bash
+npm run build      # tsc — compiles src/ to dist/ (ESM + .d.ts)
+npm run typecheck  # tsc --noEmit
+```
+
+There is no test suite or lint script yet.
+
 ## Demo
 
 `demo/index.html` is a static page (loads `../dist/index.js`, so run `npm run build` first) with:

package/dist/renderer.js

@@ -16,9 +16,8 @@ function pickVariant(char, entry) {
     lastVariant.set(char, index);
     return index;
 }
-function splitWords(text) {
-    // Attach trailing punctuation to the preceding word (e.g. "word," stays one unit).
-    return text.split(/\s+/).filter((w) => w.length > 0);
+function splitText(text) {
+    return text.split(/(\s+)/).filter((part) => part.length > 0);
 }
 const JITTER_ROTATE_DEG = 7;
 const JITTER_BASELINE = 1;
@@ -72,15 +71,20 @@ function renderWord(word, delayOffset, animate) {
  */
 export function renderText(text, options = {}) {
     const { animate = true } = options;
-    const words = splitWords(text);
+    const parts = splitText(text);
     let delayOffset = 0;
-    const wordSvgs = [];
-    for (const word of words) {
+    const markup = [];
+    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>`);
+            continue;
+        }
+        const word = part;
         const { svg, letterCount } = renderWord(word, delayOffset, animate);
-        wordSvgs.push(svg);
+        markup.push(svg);
         delayOffset += letterCount;
     }
-    return `<span class="hw-sentence" aria-label="${escapeAttr(text)}">${wordSvgs.join(" ")}</span>`;
+    return `<span class="hw-sentence" aria-label="${escapeAttr(text)}">${markup.join("")}</span>`;
 }
 function escapeAttr(value) {
     return value
@@ -89,6 +93,12 @@ 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.0",
+  "version": "0.1.1",
   "description": "Renders text as animated hand-drawn SVG",
   "type": "module",
   "main": "dist/index.js",