sketchmark 0.1.9 → 0.2.1

package/dist/animation/index.d.ts

@@ -24,6 +24,7 @@ export declare class AnimationController {
     readonly drawTargetTables: Set<string>;
     readonly drawTargetNotes: Set<string>;
     readonly drawTargetCharts: Set<string>;
+    readonly drawTargetMarkdowns: Set<string>;
     get drawTargets(): Set<string>;
     constructor(svg: SVGSVGElement, steps: ASTStep[]);
     get currentStep(): number;
@@ -52,5 +53,5 @@ export declare class AnimationController {
     private _doPulse;
     private _doColor;
 }
-export declare const ANIMATION_CSS = "\n.ng, .gg, .tg, .ntg, .cg, .eg {\n  transform-box: fill-box;\n  transform-origin: center;\n  transition: filter 0.3s, opacity 0.35s;\n}\n\n/* highlight */\n.ng.hl path, .ng.hl rect, .ng.hl ellipse, .ng.hl polygon,\n.tg.hl path, .tg.hl rect,\n.ntg.hl path, .ntg.hl polygon,\n.cg.hl path, .cg.hl rect,\n.eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }\n\n.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .eg.hl {\n  animation: ng-pulse 1.4s ease-in-out infinite;\n}\n@keyframes ng-pulse {\n  0%, 100% { filter: drop-shadow(0 0 7px rgba(200,84,40,.6)); }\n  50%       { filter: drop-shadow(0 0 14px rgba(200,84,40,.9)); }\n}\n\n/* fade */\n.ng.faded, .gg.faded, .tg.faded, .ntg.faded, .cg.faded, .eg.faded { opacity: 0.22; }\n\n.ng.hidden { opacity: 0; pointer-events: none; }\n.eg.draw-hidden { opacity: 0; }\n.eg.draw-reveal { opacity: 1; }\n.gg.gg-hidden  { opacity: 0; }\n.tg.gg-hidden  { opacity: 0; }\n.ntg.gg-hidden { opacity: 0; }\n.cg.gg-hidden  { opacity: 0; }\n";
+export declare const ANIMATION_CSS = "\n.ng, .gg, .tg, .ntg, .cg, .eg, .mdg {\n  transform-box: fill-box;\n  transform-origin: center;\n  transition: filter 0.3s, opacity 0.35s;\n}\n\n/* highlight */\n.ng.hl path, .ng.hl rect, .ng.hl ellipse, .ng.hl polygon,\n.tg.hl path, .tg.hl rect,\n.ntg.hl path, .ntg.hl polygon,\n.cg.hl path, .cg.hl rect,\n.mdg.hl text,\n.eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }\n\n.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .mdg.hl, .eg.hl {\n  animation: ng-pulse 1.4s ease-in-out infinite;\n}\n@keyframes ng-pulse {\n  0%, 100% { filter: drop-shadow(0 0 7px rgba(200,84,40,.6)); }\n  50%       { filter: drop-shadow(0 0 14px rgba(200,84,40,.9)); }\n}\n\n/* fade */\n.ng.faded, .gg.faded, .tg.faded, .ntg.faded,\n.cg.faded, .eg.faded, .mdg.faded { opacity: 0.22; }\n\n.ng.hidden { opacity: 0; pointer-events: none; }\n.eg.draw-hidden { opacity: 0; }\n.eg.draw-reveal { opacity: 1; }\n.gg.gg-hidden  { opacity: 0; }\n.tg.gg-hidden  { opacity: 0; }\n.ntg.gg-hidden { opacity: 0; }\n.cg.gg-hidden  { opacity: 0; }\n.mdg.gg-hidden { opacity: 0; }\n";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,CAAC;AACpB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AA2D5D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAQlE;AACD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOlE;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOlE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOnE;AAsHD,qBAAa,mBAAmB;IAwB5B,OAAO,CAAC,GAAG;aACK,KAAK,EAAE,OAAO,EAAE;IAxBlC,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAQf;IACJ,OAAO,CAAC,UAAU,CAA2B;IAC7C,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAEvC,IAAI,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,CAE7B;gBAGS,GAAG,EAAE,aAAa,EACV,KAAK,EAAE,OAAO,EAAE;IAqClC,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI;IAM3C,OAAO,CAAC,IAAI;IAUZ,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,OAAO;IASf,IAAI,IAAI,OAAO;IAST,IAAI,CAAC,SAAS,SAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1C,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAczB,OAAO,CAAC,SAAS;IAmGjB,OAAO,CAAC,UAAU;IA4ClB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,OAAO;IAyIf,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,QAAQ;IAYlB,OAAO,CAAC,QAAQ;CA6Bf;AAED,eAAO,MAAM,aAAa,y9BAgCzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,CAAC;AACpB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAwE5D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAQlE;AACD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOlE;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOlE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOnE;AA+HD,qBAAa,mBAAmB;IAyB5B,OAAO,CAAC,GAAG;aACK,KAAK,EAAE,OAAO,EAAE;IAzBlC,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,WAAW,CAQf;IACJ,OAAO,CAAC,UAAU,CAA2B;IAC7C,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1C,IAAI,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,CAE7B;gBAGS,GAAG,EAAE,aAAa,EACV,KAAK,EAAE,OAAO,EAAE;IA0ClC,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI;IAM3C,OAAO,CAAC,IAAI;IAUZ,KAAK,IAAI,IAAI;IAMb,IAAI,IAAI,OAAO;IASf,IAAI,IAAI,OAAO;IAST,IAAI,CAAC,SAAS,SAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1C,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAczB,OAAO,CAAC,SAAS;IAmHjB,OAAO,CAAC,UAAU;IA4ClB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,OAAO;IA6Kf,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,QAAQ;CAkCjB;AAED,eAAO,MAAM,aAAa,oiCAmCzB,CAAC"}

package/dist/index.cjs

@@ -836,6 +836,7 @@ function parse(src) {
                 v === "config" || // ← ADD
                 v === "theme" || // ← ADD
                 v === "style" ||
+                v === "markdown" ||
                 CHART_TYPES.includes(v)) {
                 break;
             }
@@ -6398,6 +6399,7 @@ const getEdgeEl = (svg, f, t) => getEl(svg, `edge-${f}-${t}`);
 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);
@@ -6409,6 +6411,7 @@ function resolveEl(svg, target) {
         getTableEl(svg, target) ??
         getNoteEl(svg, target) ??
         getChartEl(svg, target) ??
+        getMarkdownEl(svg, target) ??
         null);
 }
 function pathLength(p) {
@@ -6419,6 +6422,15 @@ function pathLength(p) {
         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) {
@@ -6526,32 +6538,39 @@ function clearEdgeDrawStyles(el) {
     });
 }
 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);
     }));
 }
@@ -6575,6 +6594,7 @@ class AnimationController {
         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;
@@ -6595,6 +6615,10 @@ class AnimationController {
                 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();
     }
@@ -6766,7 +6790,24 @@ class AnimationController {
                 });
             }
         });
-        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 = "";
@@ -6944,6 +6985,9 @@ class AnimationController {
                 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;
         }
@@ -6964,6 +7008,8 @@ class AnimationController {
                 tableEl.classList.remove("gg-hidden");
                 prepareForDraw(tableEl);
                 animateShapeDraw(tableEl, 500, 40);
+                const tablePathCount = tableEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(tableEl, tablePathCount * 40 + 500 + 120);
             }
             return;
         }
@@ -6984,6 +7030,8 @@ class AnimationController {
                 noteEl.classList.remove("gg-hidden");
                 prepareForDraw(noteEl);
                 animateShapeDraw(noteEl, 420, 55);
+                const notePathCount = noteEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(noteEl, notePathCount * 55 + 420 + 120);
             }
             return;
         }
@@ -7011,6 +7059,28 @@ class AnimationController {
             }
             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)
@@ -7024,14 +7094,16 @@ class AnimationController {
             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 ───────────────────────────────────────────
@@ -7059,10 +7131,10 @@ class AnimationController {
             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;
             });
@@ -7070,22 +7142,24 @@ class AnimationController {
         }
         // 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;
@@ -7096,9 +7170,10 @@ const ANIMATION_CSS = `
 .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 {
@@ -7107,7 +7182,8 @@ const ANIMATION_CSS = `
 }
 
 /* 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; }
@@ -7116,6 +7192,7 @@ const ANIMATION_CSS = `
 .tg.gg-hidden  { opacity: 0; }
 .ntg.gg-hidden { opacity: 0; }
 .cg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 `;
 
 // ============================================================