@markdy/renderer-dom 0.7.27 → 0.7.29

package/dist/index.js

@@ -37,6 +37,9 @@ function toEasing(val) {
   return "linear";
 }
 
+// src/actors.ts
+import { TECHNICAL_NODE_KINDS, VISUAL_PRIMITIVE_TYPES } from "@markdy/core";
+
 // src/figure.ts
 function createFigureEl(def) {
   const skinColor = def.args[0] || "#ffdbac";
@@ -309,30 +312,20 @@ function readRotation(el) {
 }
 
 // src/actors.ts
-var ARCHITECTURE_NODE_TYPES = /* @__PURE__ */ new Set([
-  "service",
-  "api",
-  "microservice",
-  "client",
-  "user",
-  "db",
-  "database",
-  "queue",
-  "cache",
-  "cloud",
-  "region",
-  "container",
-  "cluster"
+var ARCHITECTURE_NODE_TYPES = new Set(Object.keys(TECHNICAL_NODE_KINDS));
+var LEGACY_VISUAL_PRIMITIVE_TYPES = ["parking_map", "ascii_map", "game_scene", "byte_viz"];
+var VISUAL_PRIMITIVE_TYPE_SET = /* @__PURE__ */ new Set([
+  ...VISUAL_PRIMITIVE_TYPES,
+  ...LEGACY_VISUAL_PRIMITIVE_TYPES
 ]);
-var SHOWCASE_SURFACE_TYPES = /* @__PURE__ */ new Set(["parking_map", "ascii_map", "game_scene", "byte_viz"]);
 var ARCHITECTURE_STYLE_ID = "markdy-architecture-node-styles";
-var SHOWCASE_STYLE_ID = "markdy-showcase-surface-styles";
-function ensureShowcaseStyles(doc) {
-  if (doc.getElementById(SHOWCASE_STYLE_ID)) return;
+var VISUAL_PRIMITIVE_STYLE_ID = "markdy-visual-primitive-styles";
+function ensureVisualPrimitiveStyles(doc) {
+  if (doc.getElementById(VISUAL_PRIMITIVE_STYLE_ID)) return;
   const style = doc.createElement("style");
-  style.id = SHOWCASE_STYLE_ID;
+  style.id = VISUAL_PRIMITIVE_STYLE_ID;
   style.textContent = `
-.markdy-showcase {
+.markdy-visual {
   --surface-a: rgba(15, 23, 42, 0.9);
   --accent: #38bdf8;
   --accent-2: #22c55e;
@@ -354,12 +347,17 @@ function ensureShowcaseStyles(doc) {
     0 1px 0 rgba(255, 255, 255, 0.18) inset,
     0 0 44px color-mix(in srgb, var(--accent) 24%, transparent);
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.2;
   isolation: isolate;
   contain: layout paint style;
   backdrop-filter: blur(16px) saturate(1.2);
   -webkit-backdrop-filter: blur(16px) saturate(1.2);
 }
-.markdy-showcase::before {
+.markdy-visual,
+.markdy-visual * {
+  box-sizing: border-box;
+}
+.markdy-visual::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -371,7 +369,7 @@ function ensureShowcaseStyles(doc) {
   opacity: 0.48;
   animation: markdyGridDrift 7s linear infinite;
 }
-.markdy-showcase::after {
+.markdy-visual::after {
   content: "";
   position: absolute;
   inset: -40% -20%;
@@ -380,15 +378,18 @@ function ensureShowcaseStyles(doc) {
   opacity: 0.6;
   animation: markdyAurora 9s linear infinite;
 }
-.markdy-showcase--byte_viz { width: 420px; }
-.markdy-showcase__top {
+.markdy-visual[data-tone="green"] { --accent: #22c55e; --accent-2: #38bdf8; }
+.markdy-visual[data-tone="amber"] { --accent: #f59e0b; --accent-2: #22c55e; }
+.markdy-visual[data-tone="purple"] { --accent: #a78bfa; --accent-2: #38bdf8; }
+.markdy-visual[data-tone="rose"] { --accent: #fb7185; --accent-2: #f59e0b; }
+.markdy-visual__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px 8px;
 }
-.markdy-showcase__title {
+.markdy-visual__title {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -398,7 +399,7 @@ function ensureShowcaseStyles(doc) {
   letter-spacing: 0.01em;
   color: #f8fafc;
 }
-.markdy-showcase__pill {
+.markdy-visual__pill {
   flex: 0 0 auto;
   border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
   border-radius: 999px;
@@ -411,127 +412,95 @@ function ensureShowcaseStyles(doc) {
   text-transform: uppercase;
   box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
 }
-.markdy-showcase__body { position: absolute; inset: 48px 14px 14px; }
-.markdy-showcase--parking_map { --accent: #38bdf8; --accent-2: #22c55e; }
-.parking-map__road {
-  position: absolute;
-  left: 14px;
-  right: 14px;
-  top: 78px;
-  height: 50px;
+.markdy-visual__body { position: absolute; inset: 48px 14px 14px; }
+.markdy-visual--metric {
+  width: 112px;
+  height: 44px;
+  border-radius: 14px;
+}
+.markdy-visual--grid {
+  width: 190px;
+  height: 92px;
+  border-radius: 18px;
+}
+.markdy-visual--lane {
+  width: 300px;
+  height: 44px;
   border-radius: 999px;
-  background:
-    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.78) 0 18px, transparent 18px 34px) center / 100% 3px no-repeat,
-    linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88));
-  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28) inset;
 }
-.parking-map__scan {
+.markdy-visual--marker {
+  width: 50px;
+  height: 24px;
+  border-radius: 999px;
+}
+.markdy-visual--token_strip {
+  width: 300px;
+  height: 54px;
+  border-radius: 16px;
+}
+.markdy-visual--glyph_card {
+  width: 98px;
+  height: 120px;
+  border-radius: 22px;
+}
+.visual-panel__scan {
   position: absolute;
-  left: 28px;
-  top: 42px;
-  width: 66px;
-  height: 124px;
-  border-radius: 18px;
-  border: 1px solid rgba(56, 189, 248, 0.55);
-  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), transparent);
-  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28);
+  left: 18px;
+  top: 18px;
+  width: 92px;
+  height: 122px;
+  border-radius: 24px;
+  border: 1px solid color-mix(in srgb, var(--accent) 54%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
+  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 28%, transparent);
   animation: markdyScanPulse 1.8s ease-in-out infinite;
 }
-.parking-map__car {
+.visual-panel__rails {
   position: absolute;
-  left: 48px;
-  top: 86px;
-  width: 46px;
-  height: 22px;
-  border-radius: 11px 15px 15px 11px;
-  background: linear-gradient(90deg, #22d3ee, #818cf8);
-  box-shadow: 0 0 18px rgba(56, 189, 248, 0.55), 0 8px 18px rgba(2, 6, 23, 0.35);
-  animation: markdyCarGlide 3.8s cubic-bezier(.4,0,.2,1) infinite;
-}
-.parking-map__car::before,
-.parking-map__car::after {
-  content: "";
+  left: 18px;
+  right: 18px;
+  bottom: 42px;
+  height: 48px;
+  border-radius: 999px;
+  background:
+    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.74) 0 18px, transparent 18px 34px) center / 100% 3px no-repeat,
+    linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88));
+  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28) inset;
+}
+.visual-panel__pulse {
   position: absolute;
-  bottom: -4px;
-  width: 8px;
-  height: 8px;
+  left: 110px;
+  right: 78px;
+  bottom: 64px;
+  height: 3px;
   border-radius: 999px;
-  background: #020617;
-  border: 2px solid #cbd5e1;
+  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
+  filter: drop-shadow(0 0 8px var(--accent-2));
+  animation: markdyRouteFlow 1.5s linear infinite;
 }
-.parking-map__car::before { left: 7px; }
-.parking-map__car::after { right: 7px; }
-.parking-map__slots {
+.visual-panel__cells {
   position: absolute;
-  right: 12px;
-  top: 24px;
+  right: 18px;
+  top: 22px;
   display: grid;
-  grid-template-columns: repeat(4, 44px);
-  gap: 8px;
+  grid-template-columns: repeat(4, 42px);
+  gap: 7px;
 }
-.parking-map__slot {
-  height: 34px;
+.visual-panel__cell {
+  height: 30px;
   border-radius: 10px;
   border: 1px solid rgba(148, 163, 184, 0.34);
   background: rgba(15, 23, 42, 0.7);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.035) inset;
 }
-.parking-map__slot:nth-child(3),
-.parking-map__slot:nth-child(6),
-.parking-map__slot:nth-child(8) {
-  border-color: rgba(34, 197, 94, 0.78);
-  background: rgba(20, 83, 45, 0.5);
+.visual-panel__cell:nth-child(3),
+.visual-panel__cell:nth-child(6),
+.visual-panel__cell:nth-child(8) {
+  border-color: color-mix(in srgb, var(--accent-2) 78%, transparent);
+  background: color-mix(in srgb, var(--accent-2) 35%, rgba(15, 23, 42, 0.7));
   animation: markdySlotGlow 1.7s ease-in-out infinite;
 }
-.parking-map__route {
-  position: absolute;
-  left: 91px;
-  right: 95px;
-  top: 109px;
-  height: 3px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, transparent, #22c55e, #38bdf8, transparent);
-  filter: drop-shadow(0 0 8px #22c55e);
-  animation: markdyRouteFlow 1.5s linear infinite;
-}
-.parking-map__stats {
-  position: absolute;
-  left: 12px;
-  right: 12px;
-  bottom: 5px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-}
-.parking-map__stat,
-.ascii-map__badge,
-.game-scene__hud,
-.byte-viz__badge {
-  border: 1px solid rgba(148, 163, 184, 0.24);
-  border-radius: 12px;
-  padding: 8px;
-  background: rgba(2, 6, 23, 0.42);
-  color: #cbd5e1;
-  font-size: 10px;
-  font-weight: 760;
-}
-.parking-map__stat strong,
-.byte-viz__badge strong {
-  display: block;
-  margin-top: 2px;
-  color: #f8fafc;
-  font-size: 16px;
-}
-.markdy-showcase--ascii_map { --accent: #22c55e; --accent-2: #38bdf8; }
-.ascii-map__terminal {
-  position: absolute;
-  inset: 0;
-  border-radius: 18px;
-  border: 1px solid rgba(34, 197, 94, 0.34);
-  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.36));
-  box-shadow: 0 0 28px rgba(34, 197, 94, 0.16) inset;
-}
-.ascii-map__chrome {
+.visual-terminal__chrome {
   height: 28px;
   padding-left: 12px;
   display: flex;
@@ -539,256 +508,276 @@ function ensureShowcaseStyles(doc) {
   gap: 6px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.16);
 }
-.ascii-map__chrome span {
+.visual-terminal__chrome span {
   width: 8px;
   height: 8px;
   border-radius: 999px;
   background: #ef4444;
   box-shadow: 14px 0 #f59e0b, 28px 0 #22c55e;
 }
-.ascii-map__code {
+.visual-terminal__lines {
   position: absolute;
   left: 16px;
+  right: 16px;
   top: 46px;
   font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 19px;
+  font-size: 18px;
   line-height: 1.55;
-  color: #bbf7d0;
-  text-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
+  color: color-mix(in srgb, var(--accent-2) 62%, #f8fafc);
+  text-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 38%, transparent);
 }
-.ascii-map__code b {
-  color: #67e8f9;
-  animation: markdyBlink 1.2s steps(2, end) infinite;
+.visual-terminal__line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.ascii-map__minimap {
-  position: absolute;
-  right: 18px;
-  top: 48px;
-  width: 102px;
-  height: 122px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 7px;
+.visual-metric {
+  height: 100%;
+  padding: 7px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
 }
-.ascii-map__mini-slot {
-  border-radius: 7px;
-  border: 1px solid rgba(148, 163, 184, 0.28);
-  background: rgba(15, 23, 42, 0.72);
+.visual-metric strong {
+  flex: 0 0 auto;
+  color: #f8fafc;
+  font-size: 15px;
+  line-height: 1;
 }
-.ascii-map__mini-slot:nth-child(2),
-.ascii-map__mini-slot:nth-child(6) {
-  border-color: rgba(34, 197, 94, 0.85);
-  background: rgba(20, 83, 45, 0.56);
+.visual-metric span {
+  min-width: 0;
+  overflow: hidden;
+  color: #94a3b8;
+  font-size: 8px;
+  font-weight: 840;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
 }
-.ascii-map__transform {
+.visual-grid {
   position: absolute;
-  left: 16px;
-  right: 16px;
-  bottom: 10px;
+  inset: 10px;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
+  gap: 7px;
 }
-.markdy-showcase--game_scene { --accent: #f59e0b; --accent-2: #22c55e; }
-.game-scene__world {
-  position: absolute;
-  inset: 0;
-  border-radius: 18px;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at 80% 18%, rgba(245, 158, 11, 0.22), transparent 26%),
-    linear-gradient(160deg, #172554, #020617 72%);
+.visual-grid__cell {
+  border-radius: 8px;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  background: rgba(15, 23, 42, 0.74);
 }
-.game-scene__world::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,0.06) 22px 24px);
-  animation: markdyRoadMove 4s linear infinite;
+.visual-grid__cell.is-active {
+  border-color: color-mix(in srgb, var(--accent-2) 78%, transparent);
+  background: color-mix(in srgb, var(--accent-2) 35%, rgba(15, 23, 42, 0.74));
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 26%, transparent);
 }
-.game-scene__road {
+.visual-lane {
   position: absolute;
-  left: -35px;
-  right: -35px;
-  top: 94px;
-  height: 76px;
-  transform: rotate(-8deg);
+  inset: 0;
+  border-radius: inherit;
   background:
-    repeating-linear-gradient(90deg, #e2e8f0 0 24px, transparent 24px 46px) center / 100% 4px no-repeat,
-    linear-gradient(180deg, #334155, #0f172a);
-  box-shadow: 0 18px 32px rgba(2, 6, 23, 0.42);
-}
-.game-scene__car {
-  position: absolute;
-  left: 88px;
-  top: 126px;
-  width: 58px;
-  height: 30px;
-  border-radius: 12px 18px 18px 12px;
-  background: linear-gradient(90deg, #fb7185, #f59e0b);
-  transform: rotate(-8deg);
-  box-shadow: 0 0 24px rgba(245, 158, 11, 0.52);
-  animation: markdyCarPark 3.4s cubic-bezier(.2,1,.3,1) infinite;
-}
-.game-scene__spot {
-  position: absolute;
-  right: 54px;
-  top: 85px;
-  width: 90px;
-  height: 68px;
-  border: 3px solid rgba(34, 197, 94, 0.78);
-  border-left-style: dashed;
-  border-radius: 10px;
-  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.48));
+    repeating-linear-gradient(90deg, rgba(226, 232, 240, 0.76) 0 18px, transparent 18px 34px) center / 100% 3px no-repeat,
+    linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88));
+  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.28) inset, 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
 }
-.game-scene__cones {
+.visual-lane::after {
+  content: "";
   position: absolute;
-  right: 80px;
-  bottom: 34px;
-  display: flex;
-  gap: 14px;
-}
-.game-scene__cone {
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-bottom: 26px solid #f97316;
-  filter: drop-shadow(0 5px 8px rgba(2, 6, 23, 0.35));
+  left: 18%;
+  right: 18%;
+  top: 50%;
+  height: 3px;
+  border-radius: 999px;
+  transform: translateY(-50%);
+  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
+  filter: drop-shadow(0 0 8px var(--accent-2));
+  animation: markdyRouteFlow 1.5s linear infinite;
 }
-.game-scene__hud {
+.visual-marker {
   position: absolute;
-  left: 14px;
-  top: 14px;
-  min-width: 120px;
-  border-color: rgba(245, 158, 11, 0.38);
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--accent), #818cf8);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 18px rgba(2, 6, 23, 0.35);
 }
-.game-scene__hud strong { color: #fed7aa; font-size: 18px; }
-.game-scene__perfect {
-  position: absolute;
-  left: 132px;
-  top: 54px;
-  color: #fef3c7;
-  font-size: 21px;
-  font-weight: 900;
-  letter-spacing: 0.05em;
-  text-shadow: 0 0 18px rgba(245, 158, 11, 0.7);
-  animation: markdyPerfectPop 1.6s ease-in-out infinite;
-}
-.markdy-showcase--byte_viz { --accent: #a78bfa; --accent-2: #38bdf8; }
-.byte-viz__pipeline {
+.visual-marker::before,
+.visual-marker::after {
+  content: "";
   position: absolute;
-  inset: 4px;
-  display: grid;
-  grid-template-columns: 98px 1fr 122px;
-  gap: 12px;
-  align-items: stretch;
+  bottom: -3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: #020617;
+  border: 2px solid #cbd5e1;
 }
-.byte-viz__glyph {
-  display: grid;
-  place-items: center;
-  border-radius: 22px;
-  border: 1px solid rgba(167, 139, 250, 0.45);
-  background: radial-gradient(circle at 30% 20%, rgba(167, 139, 250, 0.42), rgba(15, 23, 42, 0.78));
-  color: #fff;
-  font-size: 72px;
-  font-weight: 920;
-  box-shadow: 0 0 34px rgba(167, 139, 250, 0.32) inset;
-}
-.byte-viz__middle { display: grid; gap: 10px; }
-.byte-viz__row {
+.visual-marker::before { left: 9px; }
+.visual-marker::after { right: 9px; }
+.visual-tokens {
+  height: 100%;
+  padding: 8px;
   display: flex;
   align-items: center;
   gap: 7px;
 }
-.byte-viz__chip {
+.visual-token {
   flex: 1 1 0;
+  min-width: 0;
   border: 1px solid rgba(148, 163, 184, 0.25);
   border-radius: 12px;
   padding: 8px 10px;
   background: rgba(2, 6, 23, 0.42);
-  color: #ddd6fe;
+  color: color-mix(in srgb, var(--accent) 45%, #f8fafc);
   font-family: "SFMono-Regular", Consolas, monospace;
   font-size: 12px;
   font-weight: 800;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.byte-viz__arrow {
-  color: #67e8f9;
-  filter: drop-shadow(0 0 8px #38bdf8);
-  animation: markdyArrowPulse 1.1s ease-in-out infinite;
-}
-.byte-viz__bits {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 5px;
-}
-.byte-viz__bit {
+.visual-glyph {
+  height: 100%;
   display: grid;
   place-items: center;
-  height: 31px;
-  border-radius: 8px;
-  background: rgba(15, 23, 42, 0.82);
-  border: 1px solid rgba(56, 189, 248, 0.28);
-  color: #bae6fd;
-  font-family: "SFMono-Regular", Consolas, monospace;
-  font-size: 12px;
-  font-weight: 900;
-  animation: markdyBitFlip 1.9s ease-in-out infinite;
+  padding: 10px;
+  text-align: center;
+}
+.visual-glyph strong {
+  color: #f8fafc;
+  font-size: 56px;
+  line-height: 1;
+}
+.visual-glyph span {
+  margin-top: 6px;
+  color: #cbd5e1;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
-.byte-viz__bit:nth-child(2n) { animation-delay: 0.12s; }
-.byte-viz__bit:nth-child(3n) { animation-delay: 0.24s; }
-.byte-viz__side { display: grid; gap: 9px; }
 @keyframes markdyGridDrift { to { background-position: 34px 34px, 34px 34px; } }
 @keyframes markdyAurora { to { transform: rotate(1turn); } }
 @keyframes markdyScanPulse { 50% { transform: translateX(18px); opacity: 0.72; } }
-@keyframes markdyCarGlide { 0%, 12% { transform: translateX(0); } 68%, 100% { transform: translateX(198px); } }
-@keyframes markdySlotGlow { 50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.38); } }
-@keyframes markdyRouteFlow { to { filter: hue-rotate(70deg) drop-shadow(0 0 9px #38bdf8); } }
-@keyframes markdyBlink { 50% { opacity: 0.25; } }
-@keyframes markdyRoadMove { to { background-position: 44px 0; } }
-@keyframes markdyCarPark { 0%, 12% { transform: translateX(0) rotate(-8deg); } 70%, 100% { transform: translateX(164px) translateY(-31px) rotate(-1deg); } }
-@keyframes markdyPerfectPop { 0%, 100% { transform: scale(0.92); opacity: 0.72; } 50% { transform: scale(1.05); opacity: 1; } }
-@keyframes markdyArrowPulse { 50% { transform: translateX(3px); opacity: 0.72; } }
-@keyframes markdyBitFlip { 50% { transform: translateY(-2px); border-color: rgba(167, 139, 250, 0.75); } }
+@keyframes markdySlotGlow { 50% { box-shadow: 0 0 20px color-mix(in srgb, var(--accent-2) 32%, transparent); } }
+@keyframes markdyRouteFlow { to { filter: hue-rotate(70deg) drop-shadow(0 0 9px var(--accent)); } }
 `;
   doc.head.appendChild(style);
 }
-function createShowcaseSurfaceEl(type, def) {
-  ensureShowcaseStyles(document);
-  const label = def.args[0] || type.replace("_", " ");
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function toneArg(def, index, fallback = "cyan") {
+  const tone = def.args[index]?.trim().toLowerCase() || fallback;
+  return /^(cyan|green|amber|purple|rose)$/.test(tone) ? tone : fallback;
+}
+function parseGridSpec(spec) {
+  const match = /^(\d+)x(\d+)$/i.exec(spec?.trim() ?? "");
+  const cols = match ? Number(match[1]) : 4;
+  const rows = match ? Number(match[2]) : 2;
+  return {
+    cols: Math.min(Math.max(cols, 1), 8),
+    rows: Math.min(Math.max(rows, 1), 4)
+  };
+}
+function activeCellSet(value) {
+  return new Set(
+    (value ?? "").split(/[|\s]+/).map((part) => Number(part.trim())).filter((part) => Number.isInteger(part) && part > 0)
+  );
+}
+function canonicalVisualType(type) {
+  switch (type) {
+    case "surface":
+      return "panel";
+    case "stat":
+      return "metric";
+    case "matrix":
+      return "grid";
+    case "track":
+      return "lane";
+    case "dot":
+      return "marker";
+    case "chips":
+      return "token_strip";
+    case "glyph":
+      return "glyph_card";
+    case "parking_map":
+    case "game_scene":
+    case "byte_viz":
+      return "panel";
+    case "ascii_map":
+      return "terminal";
+    default:
+      return type;
+  }
+}
+function legacyVisualArgs(type, args) {
+  const label = args[0] || type.replace("_", " ");
+  switch (type) {
+    case "parking_map":
+      return [label, "live ops", "cyan"];
+    case "ascii_map":
+      return [label, "[P1][P2][  ][EV]", "[IN]===LANE===[OUT]", "0101 0000 0100 0001", "green"];
+    case "game_scene":
+      return [label, "60 fps", "amber"];
+    case "byte_viz":
+      return [label, "UTF-8", "purple"];
+    default:
+      return args;
+  }
+}
+function createVisualPrimitiveEl(type, def) {
+  ensureVisualPrimitiveStyles(document);
+  const visualType = canonicalVisualType(type);
+  const args = legacyVisualArgs(type, def.args);
+  const label = args[0] || type.replace("_", " ");
   const root = document.createElement("div");
-  root.className = `markdy-showcase markdy-showcase--${type}`;
+  root.className = `markdy-visual markdy-visual--${visualType}`;
+  root.dataset.visualType = visualType;
   root.setAttribute("role", "img");
   root.setAttribute("aria-label", label);
-  if (type === "parking_map") {
-    root.innerHTML = `
-      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">live ops</div></div>
-      <div class="markdy-showcase__body">
-        <div class="parking-map__scan"></div><div class="parking-map__road"></div><div class="parking-map__route"></div><div class="parking-map__car"></div>
-        <div class="parking-map__slots"><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span><span class="parking-map__slot"></span></div>
-        <div class="parking-map__stats"><div class="parking-map__stat">occupancy<strong>87%</strong></div><div class="parking-map__stat">OCR<strong>18ms</strong></div><div class="parking-map__stat">route<strong>A-17</strong></div></div>
-      </div>`;
-  } else if (type === "ascii_map") {
+  if (visualType === "panel") {
+    const tag = escapeHtml(args[1] || "live");
+    root.dataset.tone = toneArg({ ...def, args }, 2);
     root.innerHTML = `
-      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">parser</div></div>
-      <div class="markdy-showcase__body">
-        <div class="ascii-map__terminal"><div class="ascii-map__chrome"><span></span></div><div class="ascii-map__code">[P1][P2][<b>  </b>][EV]<br />[IN]===LANE===[OUT]<br />0101 0000 0100 0001</div><div class="ascii-map__minimap"><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i><i class="ascii-map__mini-slot"></i></div><div class="ascii-map__transform"><div class="ascii-map__badge">tokens</div><div class="ascii-map__badge">graph</div><div class="ascii-map__badge">slots</div></div></div>
+      <div class="markdy-visual__top"><div class="markdy-visual__title">${escapeHtml(label)}</div><div class="markdy-visual__pill">${tag}</div></div>
+      <div class="markdy-visual__body">
+        <div class="visual-panel__scan"></div>
+        <div class="visual-panel__cells">${Array.from({ length: 8 }, () => '<span class="visual-panel__cell"></span>').join("")}</div>
+        <div class="visual-panel__rails"></div>
+        <div class="visual-panel__pulse"></div>
       </div>`;
-  } else if (type === "game_scene") {
+  } else if (visualType === "terminal") {
+    root.dataset.tone = toneArg({ ...def, args }, 4, "green");
+    const lines = [args[1], args[2], args[3]].filter((line) => typeof line === "string" && line.length > 0).map((line) => `<div class="visual-terminal__line">${escapeHtml(line)}</div>`).join("");
     root.innerHTML = `
-      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">60 fps</div></div>
-      <div class="markdy-showcase__body">
-        <div class="game-scene__world"><div class="game-scene__hud">combo<br /><strong>x4.2</strong></div><div class="game-scene__perfect">PERFECT PARK</div><div class="game-scene__road"></div><div class="game-scene__spot"></div><div class="game-scene__car"></div><div class="game-scene__cones"><i class="game-scene__cone"></i><i class="game-scene__cone"></i><i class="game-scene__cone"></i></div></div>
-      </div>`;
+      <div class="markdy-visual__top"><div class="markdy-visual__title">${escapeHtml(label)}</div><div class="markdy-visual__pill">terminal</div></div>
+      <div class="markdy-visual__body"><div class="visual-terminal__chrome"><span></span></div><div class="visual-terminal__lines">${lines}</div></div>`;
+  } else if (visualType === "metric") {
+    root.dataset.tone = toneArg({ ...def, args }, 2);
+    root.innerHTML = `<div class="visual-metric"><strong>${escapeHtml(args[1] || "\u2014")}</strong><span>${escapeHtml(label)}</span></div>`;
+  } else if (visualType === "grid") {
+    root.dataset.tone = toneArg({ ...def, args }, 3, "green");
+    const { cols, rows } = parseGridSpec(args[1]);
+    const active = activeCellSet(args[2]);
+    root.innerHTML = `<div class="visual-grid" style="grid-template-columns: repeat(${cols}, 1fr);">${Array.from({ length: cols * rows }, (_, i) => `<span class="visual-grid__cell${active.has(i + 1) ? " is-active" : ""}"></span>`).join("")}</div>`;
+  } else if (visualType === "lane") {
+    root.dataset.tone = toneArg({ ...def, args }, 1);
+    root.innerHTML = `<div class="visual-lane"></div>`;
+  } else if (visualType === "marker") {
+    root.dataset.tone = toneArg({ ...def, args }, 1);
+    root.innerHTML = `<div class="visual-marker"></div>`;
+  } else if (visualType === "token_strip") {
+    root.dataset.tone = toneArg({ ...def, args }, 1, "purple");
+    const tokens = (args[0] || "token").split("|").map((token) => token.trim()).filter(Boolean);
+    root.innerHTML = `<div class="visual-tokens">${tokens.map((token) => `<span class="visual-token">${escapeHtml(token)}</span>`).join("")}</div>`;
   } else {
-    root.innerHTML = `
-      <div class="markdy-showcase__top"><div class="markdy-showcase__title"></div><div class="markdy-showcase__pill">UTF-8</div></div>
-      <div class="markdy-showcase__body">
-        <div class="byte-viz__pipeline"><div class="byte-viz__glyph">A</div><div class="byte-viz__middle"><div class="byte-viz__row"><div class="byte-viz__chip">char</div><span class="byte-viz__arrow">-></span><div class="byte-viz__chip">U+0041</div></div><div class="byte-viz__row"><div class="byte-viz__chip">0x41</div><span class="byte-viz__arrow">-></span><div class="byte-viz__chip">01000001</div></div><div class="byte-viz__bits"><span class="byte-viz__bit">0</span><span class="byte-viz__bit">1</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">0</span><span class="byte-viz__bit">1</span></div></div><div class="byte-viz__side"><div class="byte-viz__badge">bytes<strong>1</strong></div><div class="byte-viz__badge">planes<strong>BMP</strong></div><div class="byte-viz__badge">glyph<strong>paint</strong></div></div></div>
-      </div>`;
+    root.dataset.tone = toneArg({ ...def, args }, 2, "purple");
+    root.innerHTML = `<div class="visual-glyph"><div><strong>${escapeHtml(args[0] || "A")}</strong><span>${escapeHtml(args[1] || "glyph")}</span></div></div>`;
   }
-  const title = root.querySelector(".markdy-showcase__title");
-  if (title) title.textContent = label;
   return root;
 }
 function ensureArchitectureStyles(doc) {
@@ -892,59 +881,75 @@ function ensureArchitectureStyles(doc) {
   color: color-mix(in srgb, var(--markdy-node-accent) 70%, #e2e8f0);
   opacity: 0.86;
 }
-.markdy-arch-node[data-markdy-system-type="service"],
-.markdy-arch-node[data-markdy-system-type="api"],
-.markdy-arch-node[data-markdy-system-type="microservice"] {
+.markdy-arch-node[data-markdy-system-kind="compute"],
+.markdy-arch-node[data-markdy-system-kind="code"] {
   --markdy-node-accent: #38bdf8;
   --markdy-node-accent-2: #818cf8;
 }
-.markdy-arch-node[data-markdy-system-type="client"],
-.markdy-arch-node[data-markdy-system-type="user"] {
+.markdy-arch-node[data-markdy-system-kind="client"] {
   --markdy-node-accent: #f59e0b;
   --markdy-node-accent-2: #fb7185;
 }
-.markdy-arch-node[data-markdy-system-type="database"],
-.markdy-arch-node[data-markdy-system-type="db"] {
+.markdy-arch-node[data-markdy-system-kind="data"] {
   --markdy-node-accent: #22c55e;
   --markdy-node-accent-2: #14b8a6;
-  border-radius: 18px 18px 24px 24px;
 }
-.markdy-arch-node[data-markdy-system-type="cache"] {
-  --markdy-node-accent: #a3e635;
-  --markdy-node-accent-2: #22c55e;
-  border-style: dashed;
-}
-.markdy-arch-node[data-markdy-system-type="queue"] {
+.markdy-arch-node[data-markdy-system-kind="messaging"] {
   --markdy-node-accent: #a78bfa;
   --markdy-node-accent-2: #38bdf8;
 }
-.markdy-arch-node[data-markdy-system-type="cloud"],
-.markdy-arch-node[data-markdy-system-type="region"] {
+.markdy-arch-node[data-markdy-system-kind="network"] {
   --markdy-node-accent: #60a5fa;
   --markdy-node-accent-2: #67e8f9;
-  border-radius: 999px;
 }
-.markdy-arch-node[data-markdy-system-type="container"],
-.markdy-arch-node[data-markdy-system-type="cluster"] {
+.markdy-arch-node[data-markdy-system-kind="platform"] {
   --markdy-node-accent: #c084fc;
   --markdy-node-accent-2: #f472b6;
+}
+.markdy-arch-node[data-markdy-system-kind="security"] {
+  --markdy-node-accent: #fb7185;
+  --markdy-node-accent-2: #f59e0b;
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] {
+  --markdy-node-accent: #facc15;
+  --markdy-node-accent-2: #22c55e;
+}
+.markdy-arch-node[data-markdy-system-kind="observability"] {
+  --markdy-node-accent: #2dd4bf;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] {
+  --markdy-node-accent: #e879f9;
+  --markdy-node-accent-2: #a78bfa;
+}
+.markdy-arch-node[data-markdy-system-kind="distributed"] {
+  --markdy-node-accent: #94a3b8;
+  --markdy-node-accent-2: #38bdf8;
+}
+.markdy-arch-node[data-markdy-system-kind="data"] {
+  border-radius: 18px 18px 24px 24px;
+}
+.markdy-arch-node[data-markdy-system-kind="network"] {
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-kind="platform"] {
   border-radius: 10px;
 }
-.markdy-arch-node[data-markdy-system-type="service"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="api"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="microservice"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="security"] {
+  border-style: solid;
+}
+.markdy-arch-node[data-markdy-system-kind="compute"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="code"] .markdy-arch-node__icon::before {
   inset: 9px 7px;
   border-top: 3px solid rgba(255, 255, 255, 0.92);
   border-bottom: 3px solid rgba(255, 255, 255, 0.92);
 }
-.markdy-arch-node[data-markdy-system-type="service"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="api"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="microservice"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="compute"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="code"] .markdy-arch-node__icon::after {
   inset: 14px 7px auto;
   border-top: 3px solid rgba(255, 255, 255, 0.92);
 }
-.markdy-arch-node[data-markdy-system-type="client"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="user"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="client"] .markdy-arch-node__icon::before {
   left: 8px;
   right: 8px;
   top: 8px;
@@ -952,34 +957,29 @@ function ensureArchitectureStyles(doc) {
   border: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 3px;
 }
-.markdy-arch-node[data-markdy-system-type="client"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="user"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="client"] .markdy-arch-node__icon::after {
   left: 12px;
   right: 12px;
   bottom: 7px;
   border-top: 2px solid rgba(255, 255, 255, 0.92);
 }
-.markdy-arch-node[data-markdy-system-type="database"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="db"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="cache"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="data"] .markdy-arch-node__icon::before {
   inset: 7px 7px 9px;
   border: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 50% / 16%;
 }
-.markdy-arch-node[data-markdy-system-type="database"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="db"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="cache"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="data"] .markdy-arch-node__icon::after {
   left: 8px;
   right: 8px;
   top: 12px;
   border-top: 2px solid rgba(255, 255, 255, 0.72);
 }
-.markdy-arch-node[data-markdy-system-type="queue"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="messaging"] .markdy-arch-node__icon::before {
   inset: 9px 8px;
   border: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 999px;
 }
-.markdy-arch-node[data-markdy-system-type="queue"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="messaging"] .markdy-arch-node__icon::after {
   left: 13px;
   top: 9px;
   width: 8px;
@@ -987,8 +987,7 @@ function ensureArchitectureStyles(doc) {
   border-left: 2px solid rgba(255, 255, 255, 0.82);
   border-right: 2px solid rgba(255, 255, 255, 0.82);
 }
-.markdy-arch-node[data-markdy-system-type="cloud"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="region"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="network"] .markdy-arch-node__icon::before {
   left: 7px;
   right: 7px;
   bottom: 9px;
@@ -996,8 +995,7 @@ function ensureArchitectureStyles(doc) {
   border: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 999px;
 }
-.markdy-arch-node[data-markdy-system-type="cloud"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="region"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="network"] .markdy-arch-node__icon::after {
   left: 10px;
   top: 7px;
   width: 13px;
@@ -1006,33 +1004,74 @@ function ensureArchitectureStyles(doc) {
   border-left: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 999px 0 0 0;
 }
-.markdy-arch-node[data-markdy-system-type="container"] .markdy-arch-node__icon::before,
-.markdy-arch-node[data-markdy-system-type="cluster"] .markdy-arch-node__icon::before {
+.markdy-arch-node[data-markdy-system-kind="platform"] .markdy-arch-node__icon::before {
   inset: 8px;
   border: 2px solid rgba(255, 255, 255, 0.92);
   border-radius: 4px;
 }
-.markdy-arch-node[data-markdy-system-type="container"] .markdy-arch-node__icon::after,
-.markdy-arch-node[data-markdy-system-type="cluster"] .markdy-arch-node__icon::after {
+.markdy-arch-node[data-markdy-system-kind="platform"] .markdy-arch-node__icon::after {
   left: 10px;
   right: 10px;
   top: 14px;
   border-top: 2px solid rgba(255, 255, 255, 0.72);
 }
+.markdy-arch-node[data-markdy-system-kind="security"] .markdy-arch-node__icon::before {
+  left: 9px;
+  right: 9px;
+  top: 7px;
+  bottom: 7px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 10px 10px 14px 14px;
+}
+.markdy-arch-node[data-markdy-system-kind="security"] .markdy-arch-node__icon::after {
+  left: 14px;
+  right: 14px;
+  top: 14px;
+  border-top: 2px solid rgba(255, 255, 255, 0.82);
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="observability"] .markdy-arch-node__icon::before,
+.markdy-arch-node[data-markdy-system-kind="distributed"] .markdy-arch-node__icon::before {
+  inset: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+}
+.markdy-arch-node[data-markdy-system-kind="delivery"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="observability"] .markdy-arch-node__icon::after,
+.markdy-arch-node[data-markdy-system-kind="distributed"] .markdy-arch-node__icon::after {
+  left: 15px;
+  top: 7px;
+  bottom: 7px;
+  border-left: 2px solid rgba(255, 255, 255, 0.82);
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] .markdy-arch-node__icon::before {
+  inset: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.92);
+  transform: rotate(45deg);
+}
+.markdy-arch-node[data-markdy-system-kind="flow"] .markdy-arch-node__icon::after {
+  left: 14px;
+  right: 14px;
+  top: 15px;
+  border-top: 2px solid rgba(255, 255, 255, 0.82);
+}
 `;
   doc.head.appendChild(style);
 }
 function isArchitectureNodeType(type) {
   return ARCHITECTURE_NODE_TYPES.has(type);
 }
-function isShowcaseSurfaceType(type) {
-  return SHOWCASE_SURFACE_TYPES.has(type);
+function isVisualPrimitiveType(type) {
+  return VISUAL_PRIMITIVE_TYPE_SET.has(type);
 }
 function architectureTypeLabel(type) {
   if (type === "db") return "database";
   if (type === "api") return "service";
   return type;
 }
+function architectureNodeKind(type) {
+  return TECHNICAL_NODE_KINDS[type] ?? "compute";
+}
 function createActorEl(name, def, assetDefs, assetOverrides) {
   let el;
   switch (def.type) {
@@ -1101,30 +1140,25 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       el = createFigureEl(def);
       break;
     }
-    case "parking_map":
-    case "ascii_map":
-    case "game_scene":
-    case "byte_viz": {
-      el = createShowcaseSurfaceEl(def.type, def);
-      break;
-    }
-    case "service":
-    case "api":
-    case "microservice":
-    case "client":
-    case "user":
-    case "db":
-    case "database":
-    case "queue":
-    case "cache":
-    case "cloud":
-    case "region":
-    case "container":
-    case "cluster": {
+    default: {
+      if (VISUAL_PRIMITIVE_TYPE_SET.has(def.type)) {
+        el = createVisualPrimitiveEl(def.type, def);
+        break;
+      }
+      if (!isArchitectureNodeType(def.type)) {
+        const div = document.createElement("div");
+        div.style.width = "100px";
+        div.style.height = "100px";
+        div.style.background = "#999";
+        div.style.boxSizing = "border-box";
+        el = div;
+        break;
+      }
       ensureArchitectureStyles(document);
       const card = document.createElement("div");
       card.className = "markdy-arch-node";
       card.dataset.markdySystemType = def.type;
+      card.dataset.markdySystemKind = architectureNodeKind(def.type);
       card.setAttribute("role", "img");
       card.setAttribute("aria-label", `${architectureTypeLabel(def.type)} ${def.args[0] ?? name}`);
       const icon = document.createElement("span");
@@ -1143,15 +1177,6 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
       el = card;
       break;
     }
-    default: {
-      const div = document.createElement("div");
-      div.style.width = "100px";
-      div.style.height = "100px";
-      div.style.background = "#999";
-      div.style.boxSizing = "border-box";
-      el = div;
-      break;
-    }
   }
   el.dataset.markdyActor = name;
   el.style.position = "absolute";
@@ -1162,7 +1187,7 @@ function createActorEl(name, def, assetDefs, assetOverrides) {
   el.style.opacity = String(def.opacity ?? 1);
   if (def.z !== void 0) el.style.zIndex = String(def.z);
   else if (def.type === "caption") el.style.zIndex = "100";
-  else if (isShowcaseSurfaceType(def.type)) el.style.zIndex = "25";
+  else if (isVisualPrimitiveType(def.type)) el.style.zIndex = "25";
   else if (isArchitectureNodeType(def.type)) el.style.zIndex = "10";
   return el;
 }
@@ -1620,27 +1645,32 @@ var parallax = ({ ev, el, state, baseOpts, anims, tx: tx2 }) => {
 };
 
 // src/geometry/rect.ts
+import { TECHNICAL_NODE_TYPES } from "@markdy/core";
+var SYSTEM_NODE_SIZE = { width: 184, height: 88 };
 var ACTOR_SIZES = {
-  service: { width: 184, height: 88 },
-  api: { width: 184, height: 88 },
-  microservice: { width: 184, height: 88 },
-  client: { width: 184, height: 88 },
-  user: { width: 184, height: 88 },
-  db: { width: 184, height: 88 },
-  database: { width: 184, height: 88 },
-  queue: { width: 184, height: 88 },
-  cache: { width: 184, height: 88 },
-  cloud: { width: 184, height: 88 },
-  region: { width: 184, height: 88 },
-  container: { width: 184, height: 88 },
-  cluster: { width: 184, height: 88 },
+  ...Object.fromEntries(TECHNICAL_NODE_TYPES.map((type) => [type, SYSTEM_NODE_SIZE])),
   box: { width: 100, height: 100 },
   caption: { width: 260, height: 56 },
   figure: { width: 120, height: 170 },
+  panel: { width: 390, height: 250 },
+  surface: { width: 390, height: 250 },
+  terminal: { width: 390, height: 250 },
+  metric: { width: 112, height: 44 },
+  stat: { width: 112, height: 44 },
+  grid: { width: 190, height: 92 },
+  matrix: { width: 190, height: 92 },
+  lane: { width: 300, height: 44 },
+  track: { width: 300, height: 44 },
+  marker: { width: 50, height: 24 },
+  dot: { width: 50, height: 24 },
+  token_strip: { width: 300, height: 54 },
+  chips: { width: 300, height: 54 },
+  glyph_card: { width: 98, height: 120 },
+  glyph: { width: 98, height: 120 },
   parking_map: { width: 390, height: 250 },
   ascii_map: { width: 390, height: 250 },
   game_scene: { width: 390, height: 250 },
-  byte_viz: { width: 420, height: 250 }
+  byte_viz: { width: 390, height: 250 }
 };
 var DEFAULT_ACTOR_SIZE = { width: 140, height: 42 };
 function actorSizeByType(type) {
@@ -1718,25 +1748,59 @@ function polylineLength(points) {
 function segmentLength(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
-function labelPointForPath(points, lane) {
-  if (points.length < 2) return points[0] ?? { x: 0, y: 0 };
+function rectsOverlap(a, b) {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+function overlapCount(rect, obstacles) {
+  let hits = 0;
+  for (const o of obstacles) if (rectsOverlap(rect, o)) hits++;
+  return hits;
+}
+var LABEL_BOX_HEIGHT = 18;
+function placeFlowLabel(points, textWidth, obstacles, ast) {
   let bestIndex = 0;
   let bestLength = -1;
   for (let i = 0; i < points.length - 1; i++) {
     const len = segmentLength(points[i], points[i + 1]);
     if (len > bestLength) {
-      bestIndex = i;
       bestLength = len;
+      bestIndex = i;
     }
   }
-  const a = points[bestIndex];
-  const b = points[bestIndex + 1];
+  const a = points[bestIndex] ?? { x: 0, y: 0 };
+  const b = points[bestIndex + 1] ?? a;
   const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-  const offset = lane * 8;
-  if (Math.abs(a.x - b.x) >= Math.abs(a.y - b.y)) {
-    return { x: mid.x, y: mid.y - 10 - offset };
+  const horizontal = Math.abs(a.x - b.x) >= Math.abs(a.y - b.y);
+  const half = textWidth / 2;
+  const halfH = LABEL_BOX_HEIGHT / 2;
+  const pad = 8;
+  const base = horizontal ? 15 : half + 12;
+  const step = horizontal ? LABEL_BOX_HEIGHT + 3 : textWidth + 12;
+  const order = horizontal ? [-1, 1] : [1, -1];
+  const offsets = [];
+  for (let k = 0; k < 7; k++) {
+    for (const sign of order) offsets.push(sign * (base + k * step));
+  }
+  let fallback = null;
+  let fallbackHits = Number.POSITIVE_INFINITY;
+  for (const off of offsets) {
+    let cx = horizontal ? mid.x : mid.x + off;
+    let cy = horizontal ? mid.y + off : mid.y;
+    cx = clamp(cx, pad + half, ast.meta.width - pad - half);
+    cy = clamp(cy, pad + halfH, ast.meta.height - pad - halfH);
+    const rect = { x1: cx - half, y1: cy - halfH, x2: cx + half, y2: cy + halfH };
+    const hits = overlapCount(rect, obstacles);
+    if (hits === 0) return { x: round1(cx), y: round1(cy), rect };
+    if (hits < fallbackHits) {
+      fallbackHits = hits;
+      fallback = { x: round1(cx), y: round1(cy), rect };
+    }
   }
-  return { x: mid.x + 10 + offset, y: mid.y };
+  return fallback ?? {
+    x: round1(mid.x),
+    y: round1(mid.y),
+    rect: { x1: mid.x - half, y1: mid.y - halfH, x2: mid.x + half, y2: mid.y + halfH }
+  };
 }
 function clamp(n, min, max) {
   if (max < min) return n;
@@ -1833,7 +1897,9 @@ var STROKE_BY_ACTION = {
 };
 var DEFAULT_STROKE = "#38bdf8";
 var LABEL_MAX_CHARS = 28;
-var EDGE_FADE_MS = 140;
+var LABEL_CHAR_PX = 6.8;
+var EDGE_REVEAL_MS = 220;
+var LABEL_RECTS = /* @__PURE__ */ new WeakMap();
 function ensureEdgeLayer(scene) {
   const existing = scene.querySelector(`svg[${EDGE_LAYER_ATTR}='1']`);
   if (existing) return existing;
@@ -1890,6 +1956,12 @@ function isDashed(ctx) {
   const style = String(ctx.ev.params.style ?? "");
   return style === "dashed" || style === "fire_and_forget" || ctx.ev.action === "response";
 }
+function nodeObstacleRect(state, type, sceneWidth) {
+  const rect = actorRect(state, type);
+  if (type !== "caption") return rect;
+  const halfH = (rect.y2 - rect.y1) / 2 + 4;
+  return { x1: 0, y1: state.y - halfH, x2: sceneWidth, y2: state.y + halfH };
+}
 function buildEdge(ctx, targetName) {
   const { ev, state, states, ast, scene, baseOpts, anims } = ctx;
   const targetState = states.get(targetName);
@@ -1901,8 +1973,12 @@ function buildEdge(ctx, targetName) {
   const stroke = STROKE_BY_ACTION[ev.action] ?? DEFAULT_STROKE;
   const svg = ensureEdgeLayer(scene);
   ensureEdgeDefs(svg);
+  const startMs = Number(baseOpts.delay ?? 0);
+  const durationMs = Math.max(1, Number(baseOpts.duration ?? 500));
+  const revealMs = Math.min(EDGE_REVEAL_MS, durationMs);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-markdy-flow-edge", "1");
+  group.style.opacity = "0";
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttribute("d", pathD);
   path.setAttribute("fill", "none");
@@ -1926,37 +2002,51 @@ function buildEdge(ctx, targetName) {
   group.appendChild(marker);
   const labelText = String(ev.params.label ?? "");
   if (labelText) {
-    const midPoint = labelPointForPath(points, lane);
+    const shown = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    const textWidth = shown.length * LABEL_CHAR_PX + 12;
+    const placed = LABEL_RECTS.get(svg) ?? (LABEL_RECTS.set(svg, []), LABEL_RECTS.get(svg));
+    const obstacles = [...placed];
+    for (const [name, nodeState] of states.entries()) {
+      const type = ast.actors[name]?.type ?? "box";
+      obstacles.push(inflateRect(nodeObstacleRect(nodeState, type, ast.meta.width), 2));
+    }
+    const spot = placeFlowLabel(points, textWidth, obstacles, ast);
+    placed.push(spot.rect);
     const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    label.setAttribute("x", `${round1(midPoint.x)}`);
-    label.setAttribute("y", `${round1(midPoint.y - 8)}`);
+    label.setAttribute("x", `${spot.x}`);
+    label.setAttribute("y", `${spot.y}`);
     label.setAttribute("text-anchor", "middle");
+    label.setAttribute("dominant-baseline", "middle");
     label.setAttribute("font-size", "12");
     label.setAttribute("font-weight", "700");
     label.setAttribute("paint-order", "stroke");
-    label.setAttribute("stroke", "rgba(2, 6, 23, 0.88)");
+    label.setAttribute("stroke", "rgba(2, 6, 23, 0.9)");
     label.setAttribute("stroke-width", "5");
     label.setAttribute("stroke-linejoin", "round");
-    label.setAttribute("fill", "#cbd5e1");
-    label.setAttribute("filter", "url(#markdy-flow-glow)");
+    label.setAttribute("fill", "#dbe4f0");
     label.setAttribute("data-full-label", labelText);
-    label.textContent = labelText.length > LABEL_MAX_CHARS ? `${labelText.slice(0, LABEL_MAX_CHARS - 1)}\u2026` : labelText;
+    label.textContent = shown;
     group.appendChild(label);
   }
   svg.appendChild(group);
   anims.push(
     path.animate([{ strokeDashoffset: length }, { strokeDashoffset: 0 }], baseOpts),
+    // Travel the dot along the edge, then fade it at arrival so the finished
+    // edge is a clean line + arrowhead rather than a dot resting on the tip.
     marker.animate(
       [
-        { offsetDistance: "0%", opacity: 1 },
-        { offsetDistance: "100%", opacity: 1 }
+        { offsetDistance: "0%", opacity: 1, offset: 0 },
+        { offsetDistance: "100%", opacity: 1, offset: 0.82 },
+        { offsetDistance: "100%", opacity: 0, offset: 1 }
       ],
       baseOpts
     ),
-    group.animate([{ opacity: 1 }, { opacity: 0 }], {
-      delay: Number(baseOpts.delay ?? 0) + Number(baseOpts.duration ?? 0),
-      duration: EDGE_FADE_MS,
-      fill: "forwards"
+    // Reveal the edge at its scheduled time and keep it (persist). `fill: both`
+    // holds opacity 0 during the delay, so nothing appears before its turn.
+    group.animate([{ opacity: 0 }, { opacity: 1 }], {
+      delay: startMs,
+      duration: revealMs,
+      fill: "both"
     })
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "description": "Web Animations API renderer for MarkdyScript scenes.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.7.27"
+    "@markdy/core": "0.7.29"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.7.27"
+    "@markdy/stdlib-systems": "0.7.29"
   },
   "scripts": {
     "build": "tsup",