sketchmark 0.1.9 → 0.2.1

package/dist/parser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAmBX,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA8B/C,qBAAa,UAAW,SAAQ,KAAK;IAG1B,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;gBAFlB,GAAG,EAAE,MAAM,EACJ,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM;CAKrB;AA8BD,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAs7B7C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,UAAU,EAmBX,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AA8B/C,qBAAa,UAAW,SAAQ,KAAK;IAG1B,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,MAAM;gBAFlB,GAAG,EAAE,MAAM,EACJ,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM;CAKrB;AA8BD,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAu7B7C"}

package/dist/sketchmark.iife.js

@@ -837,6 +837,7 @@ var AIDiagram = (function (exports) {
                     v === "config" || // ← ADD
                     v === "theme" || // ← ADD
                     v === "style" ||
+                    v === "markdown" ||
                     CHART_TYPES.includes(v)) {
                     break;
                 }
@@ -6399,6 +6400,7 @@ var AIDiagram = (function (exports) {
     const getTableEl = (svg, id) => getEl(svg, `table-${id}`);
     const getNoteEl = (svg, id) => getEl(svg, `note-${id}`);
     const getChartEl = (svg, id) => getEl(svg, `chart-${id}`);
+    const getMarkdownEl = (svg, id) => getEl(svg, `markdown-${id}`);
     function resolveEl(svg, target) {
         // check edge first — target contains connector like "a-->b"
         const edge = parseEdgeTarget(target);
@@ -6410,6 +6412,7 @@ var AIDiagram = (function (exports) {
             getTableEl(svg, target) ??
             getNoteEl(svg, target) ??
             getChartEl(svg, target) ??
+            getMarkdownEl(svg, target) ??
             null);
     }
     function pathLength(p) {
@@ -6420,6 +6423,15 @@ var AIDiagram = (function (exports) {
             return 200;
         }
     }
+    function clearDashOverridesAfter(el, delayMs) {
+        setTimeout(() => {
+            el.querySelectorAll('path').forEach(p => {
+                p.style.strokeDasharray = '';
+                p.style.strokeDashoffset = '';
+                p.style.transition = '';
+            });
+        }, delayMs);
+    }
     // ── Arrow connector parser ────────────────────────────────
     const ARROW_CONNECTORS = ["<-->", "<->", "-->", "<--", "->", "<-", "---", "--"];
     function parseEdgeTarget(target) {
@@ -6527,32 +6539,39 @@ var AIDiagram = (function (exports) {
         });
     }
     function animateEdgeDraw(el, conn) {
-        const paths = Array.from(el.querySelectorAll("path"));
+        const paths = Array.from(el.querySelectorAll('path'));
         if (!paths.length)
             return;
         const linePath = paths[0];
         const headPaths = paths.slice(1);
         const STROKE_DUR = 360;
         const len = pathLength(linePath);
-        const reversed = conn.startsWith("<") && !conn.includes(">");
+        const reversed = conn.startsWith('<') && !conn.includes('>');
         linePath.style.strokeDasharray = `${len}`;
         linePath.style.strokeDashoffset = reversed ? `${-len}` : `${len}`;
-        linePath.style.transition = "none";
-        headPaths.forEach((p) => {
-            p.style.opacity = "0";
-            p.style.transition = "none";
+        linePath.style.transition = 'none';
+        headPaths.forEach(p => {
+            p.style.opacity = '0';
+            p.style.transition = 'none';
         });
-        el.classList.remove("draw-hidden");
-        el.classList.add("draw-reveal");
-        el.style.opacity = "1";
+        el.classList.remove('draw-hidden');
+        el.classList.add('draw-reveal');
+        el.style.opacity = '1';
         requestAnimationFrame(() => requestAnimationFrame(() => {
             linePath.style.transition = `stroke-dashoffset ${STROKE_DUR}ms cubic-bezier(.4,0,.2,1)`;
-            linePath.style.strokeDashoffset = "0";
+            linePath.style.strokeDashoffset = '0';
             setTimeout(() => {
-                headPaths.forEach((p) => {
-                    p.style.transition = "opacity 120ms ease";
-                    p.style.opacity = "1";
+                headPaths.forEach(p => {
+                    p.style.transition = 'opacity 120ms ease';
+                    p.style.opacity = '1';
                 });
+                // ── ADD: clear inline dash overrides so SVG attribute
+                //    (stroke-dasharray="6,5" for dashed arrows) takes over again
+                setTimeout(() => {
+                    linePath.style.strokeDasharray = '';
+                    linePath.style.strokeDashoffset = '';
+                    linePath.style.transition = '';
+                }, 160);
             }, STROKE_DUR - 40);
         }));
     }
@@ -6576,6 +6595,7 @@ var AIDiagram = (function (exports) {
             this.drawTargetTables = new Set();
             this.drawTargetNotes = new Set();
             this.drawTargetCharts = new Set();
+            this.drawTargetMarkdowns = new Set();
             for (const s of steps) {
                 if (s.action !== "draw" || parseEdgeTarget(s.target))
                     continue;
@@ -6596,6 +6616,10 @@ var AIDiagram = (function (exports) {
                     this.drawTargetCharts.add(`chart-${s.target}`);
                     this.drawTargetNodes.delete(`node-${s.target}`);
                 }
+                if (svg.querySelector(`#markdown-${s.target}`)) {
+                    this.drawTargetMarkdowns.add(`markdown-${s.target}`);
+                    this.drawTargetNodes.delete(`node-${s.target}`);
+                }
             }
             this._clearAll();
         }
@@ -6767,7 +6791,24 @@ var AIDiagram = (function (exports) {
                     });
                 }
             });
-            this.svg.querySelectorAll(".tg, .ntg, .cg").forEach((el) => {
+            // Markdown
+            this.svg.querySelectorAll(".mdg").forEach((el) => {
+                clearDrawStyles(el);
+                el.style.transition = "none";
+                el.style.opacity = "";
+                if (this.drawTargetMarkdowns.has(el.id)) {
+                    el.classList.add("gg-hidden");
+                }
+                else {
+                    el.classList.remove("gg-hidden");
+                    requestAnimationFrame(() => {
+                        el.style.transition = "";
+                    });
+                }
+            });
+            this.svg
+                .querySelectorAll(".tg, .ntg, .cg, .mdg")
+                .forEach((el) => {
                 el.style.transform = "";
                 el.style.transition = "";
                 el.style.opacity = "";
@@ -6945,6 +6986,9 @@ var AIDiagram = (function (exports) {
                     if (!firstPath?.style.strokeDasharray)
                         prepareForDraw(groupEl);
                     animateShapeDraw(groupEl, 550, 40);
+                    const pathCount = groupEl.querySelectorAll('path').length;
+                    const totalMs = pathCount * 40 + 550 + 120; // stagger + duration + buffer
+                    clearDashOverridesAfter(groupEl, totalMs);
                 }
                 return;
             }
@@ -6965,6 +7009,8 @@ var AIDiagram = (function (exports) {
                     tableEl.classList.remove("gg-hidden");
                     prepareForDraw(tableEl);
                     animateShapeDraw(tableEl, 500, 40);
+                    const tablePathCount = tableEl.querySelectorAll('path').length;
+                    clearDashOverridesAfter(tableEl, tablePathCount * 40 + 500 + 120);
                 }
                 return;
             }
@@ -6985,6 +7031,8 @@ var AIDiagram = (function (exports) {
                     noteEl.classList.remove("gg-hidden");
                     prepareForDraw(noteEl);
                     animateShapeDraw(noteEl, 420, 55);
+                    const notePathCount = noteEl.querySelectorAll('path').length;
+                    clearDashOverridesAfter(noteEl, notePathCount * 55 + 420 + 120);
                 }
                 return;
             }
@@ -7012,6 +7060,28 @@ var AIDiagram = (function (exports) {
                 }
                 return;
             }
+            // ── Markdown ──────────────────────────────────────────
+            const markdownEl = getMarkdownEl(this.svg, target);
+            if (markdownEl) {
+                if (silent) {
+                    markdownEl.style.transition = "none";
+                    markdownEl.style.opacity = "";
+                    markdownEl.classList.remove("gg-hidden");
+                    markdownEl.style.opacity = "1";
+                    requestAnimationFrame(() => requestAnimationFrame(() => {
+                        markdownEl.style.transition = "";
+                    }));
+                }
+                else {
+                    markdownEl.style.opacity = "0";
+                    markdownEl.classList.remove("gg-hidden");
+                    requestAnimationFrame(() => requestAnimationFrame(() => {
+                        markdownEl.style.transition = "opacity 500ms ease";
+                        markdownEl.style.opacity = "1";
+                    }));
+                }
+                return;
+            }
             // ── Node draw ──────────────────────────────────────
             const nodeEl = getNodeEl(this.svg, target);
             if (!nodeEl)
@@ -7025,14 +7095,16 @@ var AIDiagram = (function (exports) {
                 if (!firstPath?.style.strokeDasharray)
                     prepareForDraw(nodeEl);
                 animateShapeDraw(nodeEl, 420, 55);
+                const nodePathCount = nodeEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(nodeEl, nodePathCount * 55 + 420 + 120);
             }
         }
         // ── erase ─────────────────────────────────────────────────
         _doErase(target) {
             const el = resolveEl(this.svg, target); // handles edges too now
             if (el) {
-                el.style.transition = 'opacity 0.4s';
-                el.style.opacity = '0';
+                el.style.transition = "opacity 0.4s";
+                el.style.opacity = "0";
             }
         }
         // ── show / hide ───────────────────────────────────────────
@@ -7060,10 +7132,10 @@ var AIDiagram = (function (exports) {
                 return;
             // edge — color stroke
             if (parseEdgeTarget(target)) {
-                el.querySelectorAll('path, line, polyline').forEach(p => {
+                el.querySelectorAll("path, line, polyline").forEach((p) => {
                     p.style.stroke = color;
                 });
-                el.querySelectorAll('polygon').forEach(p => {
+                el.querySelectorAll("polygon").forEach((p) => {
                     p.style.fill = color;
                     p.style.stroke = color;
                 });
@@ -7071,22 +7143,24 @@ var AIDiagram = (function (exports) {
             }
             // everything else — color fill
             let hit = false;
-            el.querySelectorAll('path, rect, ellipse, polygon').forEach(c => {
-                const attrFill = c.getAttribute('fill');
-                if (attrFill === 'none')
+            el.querySelectorAll("path, rect, ellipse, polygon").forEach((c) => {
+                const attrFill = c.getAttribute("fill");
+                if (attrFill === "none")
                     return;
-                if (attrFill === null && c.tagName === 'path')
+                if (attrFill === null && c.tagName === "path")
                     return;
                 c.style.fill = color;
                 hit = true;
             });
             if (!hit) {
-                el.querySelectorAll('text').forEach(t => { t.style.fill = color; });
+                el.querySelectorAll("text").forEach((t) => {
+                    t.style.fill = color;
+                });
             }
         }
     }
     const ANIMATION_CSS = `
-.ng, .gg, .tg, .ntg, .cg, .eg {
+.ng, .gg, .tg, .ntg, .cg, .eg, .mdg {
   transform-box: fill-box;
   transform-origin: center;
   transition: filter 0.3s, opacity 0.35s;
@@ -7097,9 +7171,10 @@ var AIDiagram = (function (exports) {
 .tg.hl path, .tg.hl rect,
 .ntg.hl path, .ntg.hl polygon,
 .cg.hl path, .cg.hl rect,
+.mdg.hl text,
 .eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }
 
-.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .eg.hl {
+.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .mdg.hl, .eg.hl {
   animation: ng-pulse 1.4s ease-in-out infinite;
 }
 @keyframes ng-pulse {
@@ -7108,7 +7183,8 @@ var AIDiagram = (function (exports) {
 }
 
 /* fade */
-.ng.faded, .gg.faded, .tg.faded, .ntg.faded, .cg.faded, .eg.faded { opacity: 0.22; }
+.ng.faded, .gg.faded, .tg.faded, .ntg.faded,
+.cg.faded, .eg.faded, .mdg.faded { opacity: 0.22; }
 
 .ng.hidden { opacity: 0; pointer-events: none; }
 .eg.draw-hidden { opacity: 0; }
@@ -7117,6 +7193,7 @@ var AIDiagram = (function (exports) {
 .tg.gg-hidden  { opacity: 0; }
 .ntg.gg-hidden { opacity: 0; }
 .cg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 `;
 
     // ============================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "A plain-text DSL for hand-drawn diagrams. Write boxes, edges, and groups as code — renders sketchy SVG/Canvas via rough.js with a built-in step-by-step animation system.",
   "keywords": [
     "diagram",