@markdy/core 1.1.5 → 1.2.0

package/README.md

@@ -7,7 +7,7 @@ The parser and AST types for [MarkdyScript](../../docs/SYNTAX.md) — a diagram-
 - **Zero runtime dependencies** — pure TypeScript, no DOM or platform APIs (~14 KB minzipped)
 - **Single-pass parser** — line-by-line state machine with strict `ParseError` line-number diagnostics
 - **17 Specialized Layout Engines** — `architecture`, `flowchart`, `tree`, `sequence`, `state`, `layers`, `nested`, `swimlane`, `timeline`, `gantt`, `medallion`, `flywheel`, `constellation`, `quadrant`, `pyramid`, `radar`, `venn`
-- **8 Semantic Themes** — `paper`, `editorial`, `midnight`, `blueprint`, `graphite`, `nebula`, `terminal`, `sketchy`
+- **10 Semantic Themes** — `paper`, `editorial`, `midnight`, `blueprint`, `graphite`, `nebula`, `terminal`, `sketchy`, `ink`, `doodle`
 - **Content-Adaptive Canvas Sizing** — automatically calculates optimal aspect ratio and bounds based on diagram items and topology
 - **Well-Architected Governance & AST Diffing** — layer boundaries, deadlock cycle detection, gateway isolation, and semantic AST evolution
 - **Isomorphic** — runs in Node.js, Deno, Bun, edge runtimes, and the browser
@@ -93,7 +93,7 @@ try {
 | `validateArchitectureRules` | `(ast) => Diagnostic[]` | Run Well-Architected rules: cycle detection, layer boundaries, and gateway checks |
 | `diffAST` | `(astA, astB) => ASTDiffResult` | Compare architecture versions, calculate diff metrics, and generate migration scenes |
 | `compressUrlState` / `decompressUrlState` | `(code, opts?) => string` | Zero-dependency URL hash state encoder for shareable playground links |
-| `THEMES` / `resolveTheme` | tokens / function | 8 Semantic theme palettes (`paper`, `editorial`, `nebula`, `midnight`, `blueprint`, `graphite`, `terminal`, `sketchy`) |
+| `THEMES` / `resolveTheme` | tokens / function | 10 Semantic theme palettes (`paper`, `editorial`, `nebula`, `midnight`, `blueprint`, `graphite`, `terminal`, `sketchy`, `ink`, `doodle`) |
 
 ## Documentation
 

package/dist/index.d.ts

@@ -25,6 +25,7 @@ type PlayerControlsConfig = {
     resetView?: boolean;
     fullscreen?: boolean;
     svg?: boolean;
+    gif?: boolean;
     share?: boolean;
     /** Show the MarkdyScript source code when clicked. */
     code?: boolean;
@@ -82,6 +83,8 @@ type SceneMeta = {
     explicitWidth?: boolean;
     /** Whether height was explicitly specified by the author in the script. */
     explicitHeight?: boolean;
+    /** Whether theme was explicitly specified by the author in the script. */
+    explicitTheme?: boolean;
     /** Opt-in diagram mode; defaults to architecture. */
     type?: DiagramType;
     /** Playback, controls, interaction, and chrome behavior. Source of truth. */

package/dist/index.js

@@ -397,6 +397,7 @@ var CONTROL_KEYS = [
   "resetView",
   "fullscreen",
   "svg",
+  "gif",
   "share",
   "code",
   "theme"
@@ -448,6 +449,11 @@ var CONTROLS = {
   svg: { group: "controls", key: "svg", type: "boolean" },
   exportSvg: { group: "controls", key: "svg", type: "boolean" },
   export_svg: { group: "controls", key: "svg", type: "boolean" },
+  gif: { group: "controls", key: "gif", type: "boolean" },
+  exportGif: { group: "controls", key: "gif", type: "boolean" },
+  export_gif: { group: "controls", key: "gif", type: "boolean" },
+  gifButton: { group: "controls", key: "gif", type: "boolean" },
+  gif_button: { group: "controls", key: "gif", type: "boolean" },
   share: { group: "controls", key: "share", type: "boolean" },
   shareLink: { group: "controls", key: "share", type: "boolean" },
   share_link: { group: "controls", key: "share", type: "boolean" },
@@ -528,6 +534,11 @@ var FLAT = {
   fullscreen_button: CONTROLS.fullscreen_button,
   exportSvg: CONTROLS.exportSvg,
   export_svg: CONTROLS.export_svg,
+  gif: CONTROLS.gif,
+  exportGif: CONTROLS.exportGif,
+  export_gif: CONTROLS.export_gif,
+  gifButton: CONTROLS.gifButton,
+  gif_button: CONTROLS.gif_button,
   shareLink: CONTROLS.shareLink,
   share_link: CONTROLS.share_link,
   code: CONTROLS.code,
@@ -643,6 +654,7 @@ function resolvePlayer(config = {}, overrides = {}) {
     resetView: resolveControl(configuredControls.resetView),
     fullscreen: resolveControl(configuredControls.fullscreen),
     svg: resolveControl(configuredControls.svg),
+    gif: resolveControl(configuredControls.gif, false),
     share: resolveControl(configuredControls.share),
     code: resolveControl(configuredControls.code, false),
     theme: resolveControl(configuredControls.theme, hostControlDefault)
@@ -791,6 +803,38 @@ var NODE_W = 180;
 var NODE_H = 76;
 var VENN_NODE_SIZE = 220;
 var GROUP_PAD = 28;
+function computeNodeDimensions(decl, baseW = 180, baseH = 76) {
+  if (typeof decl.props?.width === "number") {
+    return {
+      width: decl.props.width,
+      height: typeof decl.props.height === "number" ? decl.props.height : baseH
+    };
+  }
+  const labelLen = (decl.label || "").length;
+  const tech = decl.props?.tech ?? decl.props?.sub;
+  const techLen = tech ? String(tech).length : 0;
+  const val = decl.props?.value ?? decl.props?.metric;
+  const valLen = val ? String(val).length : 0;
+  if (decl.kind === "dot") return { width: 64, height: 64 };
+  if (decl.kind === "matrix") return { width: 220, height: 96 };
+  const valueW = valLen > 0 ? Math.max(50, valLen * 9.5 + 16) : 0;
+  const neededLabelChars = labelLen > 18 ? Math.ceil(labelLen / 2) : labelLen;
+  const maxChars = Math.max(neededLabelChars, techLen);
+  const neededTextW = Math.max(88, maxChars * 7.8);
+  const calculatedW = 56 + neededTextW + (valueW > 0 ? valueW + 14 : 0) + 16;
+  const minW = Math.max(baseW, Math.min(360, calculatedW));
+  let width = Math.ceil(minW / 8) * 8;
+  let height = baseH;
+  if (labelLen > 24 && techLen > 0) {
+    height = Math.max(height, 84);
+  }
+  return { width, height };
+}
+function resolveNodeStyle(decl, ast) {
+  if (!decl.style) return void 0;
+  if (typeof decl.style === "string") return ast.styles[decl.style]?.props;
+  return decl.style;
+}
 var DEFAULTS = {
   show: 0.35,
   hide: 0.35,
@@ -805,7 +849,13 @@ var DEFAULTS = {
 function diagramType(ast) {
   return ast.meta.type ?? "architecture";
 }
-function nodeShape(kind, dtype) {
+function nodeShape(kind, dtype, props) {
+  if (typeof props?.shape === "string") {
+    const s = props.shape.toLowerCase();
+    if (s === "diamond" || s === "circle" || s === "pill" || s === "terminal" || s === "rounded" || s === "card" || s === "container") {
+      return s;
+    }
+  }
   if (kind === "terminal") return "terminal";
   if (kind === "dot" || kind === "marker") return "circle";
   if (kind === "token_strip" || kind === "chips") return "pill";
@@ -940,22 +990,31 @@ function layoutRanked(ast, edges, opts) {
     });
   }
   const isVertical = direction === "TB" || direction === "BT";
+  const hasTitle = Boolean(ast.meta.title && ast.meta.title.trim().length > 0);
+  const hasBeatCaptions = ast.beats.some((b) => b.label && b.label.trim().length > 0);
+  const titleBand = hasTitle ? TITLE_BAND : 0;
+  const bottomBand = hasBeatCaptions ? 44 : 0;
   const contentW = ast.meta.width - SAFE * 2;
-  const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
   const maxRank = Math.max(...byRank.keys(), 0);
   const rankCount = maxRank + 1;
   const maxInRank = Math.max(...[...byRank.values()].map((v) => v.length), 1);
   const nodes = [];
+  const nodeDims = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    nodeDims.set(id, computeNodeDimensions(ast.nodes[id]));
+  }
   if (opts.columnLayout) {
     const count = nodeIds.length;
-    const colSpacing = Math.max(NODE_W + 32, contentW / Math.max(count, 1));
-    const totalW2 = (count - 1) * colSpacing + NODE_W;
+    const maxNodeW = Math.max(...nodeIds.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+    const colSpacing = Math.max(maxNodeW + 32, contentW / Math.max(count, 1));
+    const totalW2 = (count - 1) * colSpacing + maxNodeW;
     const startX2 = SAFE + Math.max(0, (contentW - totalW2) / 2);
     nodeIds.forEach((id, idx) => {
       const decl = ast.nodes[id];
       const role = nodeRole(decl.kind);
-      const x = startX2 + idx * colSpacing;
-      const y = TITLE_BAND + 32;
+      const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
+      const x = startX2 + idx * colSpacing + (maxNodeW - dims.width) / 2;
+      const y = (hasTitle ? titleBand : 20) + 32;
       nodes.push({
         id,
         kind: decl.kind,
@@ -963,12 +1022,12 @@ function layoutRanked(ast, edges, opts) {
         label: decl.label,
         x: snapGrid(x),
         y: snapGrid(y),
-        width: NODE_W,
-        height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        width: dims.width,
+        height: dims.height,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
-        shape: nodeShape(decl.kind, dtype),
+        shape: nodeShape(decl.kind, dtype, decl.props),
         focal: decl.props.focal === true || decl.props.accent === true,
         column: idx
       });
@@ -976,18 +1035,22 @@ function layoutRanked(ast, edges, opts) {
     return nodes;
   }
   if (isVertical) {
-    const rowGap = Math.max(NODE_H + 40, Math.min(180, contentH / Math.max(rankCount, 1)));
-    const totalH = (rankCount - 1) * rowGap + NODE_H;
+    const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
+    const maxNodeH = Math.max(...nodeIds.map((id) => nodeDims.get(id)?.height ?? NODE_H));
+    const rowGap = Math.max(maxNodeH + 40, Math.min(200, contentH / Math.max(rankCount, 1)));
+    const totalH = (rankCount - 1) * rowGap + maxNodeH;
     const startY = TITLE_BAND + Math.max(0, (contentH - totalH) / 2);
     for (const [rank, ids] of [...byRank.entries()].sort((a, b) => a[0] - b[0])) {
       const rowCount = ids.length;
-      const colSpacing = Math.max(NODE_W + 36, Math.min(260, contentW / Math.max(rowCount, 1)));
-      const rankW = (rowCount - 1) * colSpacing + NODE_W;
+      const maxRowW = Math.max(...ids.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+      const colSpacing = Math.max(maxRowW + 36, Math.min(320, contentW / Math.max(rowCount, 1)));
+      const rankW = (rowCount - 1) * colSpacing + maxRowW;
       const rankStartX = SAFE + Math.max(0, (contentW - rankW) / 2);
       const y = startY + rank * rowGap;
       ids.forEach((id, idx) => {
         const decl = ast.nodes[id];
         const role = nodeRole(decl.kind);
+        const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
         const x = rankStartX + idx * colSpacing;
         const focal = decl.props.focal === true || decl.props.accent === true;
         nodes.push({
@@ -997,32 +1060,44 @@ function layoutRanked(ast, edges, opts) {
           label: decl.label,
           x: snapGrid(x),
           y: snapGrid(y),
-          width: NODE_W,
-          height: NODE_H,
-          style: decl.style ? ast.styles[decl.style]?.props : void 0,
+          width: dims.width,
+          height: dims.height,
+          style: resolveNodeStyle(decl, ast),
           props: decl.props,
           opacity: 0,
-          shape: nodeShape(decl.kind, dtype),
+          shape: nodeShape(decl.kind, dtype, decl.props),
           focal
         });
       });
     }
     return nodes;
   }
-  const maxPossibleStep = rankCount > 1 ? (contentW - NODE_W) / (rankCount - 1) : 0;
-  const colGap = rankCount > 1 ? Math.min(300, Math.max(50, maxPossibleStep)) : 0;
-  const totalW = (rankCount - 1) * colGap + NODE_W;
+  const rankWidths = /* @__PURE__ */ new Map();
+  for (const [rank, ids] of byRank.entries()) {
+    const maxW = Math.max(...ids.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+    rankWidths.set(rank, maxW);
+  }
+  const totalRankWidths = [...rankWidths.values()].reduce((a, b) => a + b, 0);
+  const minColGap = 56;
+  const availableGapW = Math.max(0, contentW - totalRankWidths);
+  const colGap = rankCount > 1 ? Math.max(minColGap, Math.min(160, availableGapW / (rankCount - 1))) : 0;
+  const totalW = totalRankWidths + (rankCount - 1) * colGap;
   const startX = SAFE + Math.max(0, (contentW - totalW) / 2);
-  for (const [rank, ids] of [...byRank.entries()].sort((a, b) => a[0] - b[0])) {
+  const availableH = Math.max(NODE_H, ast.meta.height - titleBand - bottomBand);
+  let currentRankX = startX;
+  for (let rank = 0; rank < rankCount; rank++) {
+    const ids = byRank.get(rank) ?? [];
+    const rankW = rankWidths.get(rank) ?? NODE_W;
     const rowCount = ids.length;
-    const maxPossibleRowStep = rowCount > 1 ? (contentH - NODE_H) / (rowCount - 1) : 0;
-    const rowSpacing = rowCount > 1 ? Math.min(150, Math.max(36, maxPossibleRowStep)) : 0;
-    const colH = (rowCount - 1) * rowSpacing + NODE_H;
-    const colStartY = TITLE_BAND + Math.max(0, (contentH - colH) / 2);
-    const x = startX + rank * colGap;
+    const maxH = Math.max(...ids.map((id) => nodeDims.get(id)?.height ?? NODE_H), NODE_H);
+    const maxPossibleRowStep = rowCount > 1 ? (availableH - maxH) / (rowCount - 1) : 0;
+    const rowSpacing = rowCount > 1 ? Math.min(180, Math.max(maxH + 28, maxPossibleRowStep)) : 0;
+    const colH = (rowCount - 1) * rowSpacing + maxH;
+    const colStartY = titleBand + Math.max(0, (availableH - colH) / 2);
     ids.forEach((id, idx) => {
       const decl = ast.nodes[id];
       const role = nodeRole(decl.kind);
+      const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
       const y = colStartY + idx * rowSpacing;
       const focal = decl.props.focal === true || decl.props.accent === true;
       nodes.push({
@@ -1030,17 +1105,18 @@ function layoutRanked(ast, edges, opts) {
         kind: decl.kind,
         role,
         label: decl.label,
-        x: snapGrid(x),
+        x: snapGrid(currentRankX),
         y: snapGrid(y),
-        width: NODE_W,
-        height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        width: dims.width,
+        height: dims.height,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
-        shape: nodeShape(decl.kind, dtype),
+        shape: nodeShape(decl.kind, dtype, decl.props),
         focal
       });
     });
+    currentRankX += rankW + colGap;
   }
   return nodes;
 }
@@ -1141,7 +1217,7 @@ function layoutTree(ast, edges) {
       y: snapGrid(pos.y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "card",
@@ -1209,10 +1285,10 @@ function layoutConstellation(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
-      shape: nodeShape(decl.kind, "constellation"),
+      shape: nodeShape(decl.kind, "constellation", decl.props),
       focal: isFocal || decl.props.focal === true || decl.props.accent === true
     });
   }
@@ -1257,7 +1333,7 @@ function layoutLoop(ast) {
       y: snapGrid(y),
       width: isHub ? snapGrid(NODE_W * 1.25) : NODE_W,
       height: isHub ? snapGrid(NODE_H * 1.15) : NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: isHub ? "pill" : "card",
@@ -1311,7 +1387,7 @@ function layoutMedallion(ast, edges) {
         y: snapGrid(rowY),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1373,7 +1449,7 @@ function layoutQuadrant(ast) {
         y: snapGrid(y),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1426,7 +1502,7 @@ function layoutSwimlane(ast, edges) {
         y: snapGrid(laneY),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1475,7 +1551,7 @@ function layoutPyramid(ast) {
         y: snapGrid(tierY),
         width: snapGrid(nodeW),
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1508,7 +1584,7 @@ function layoutTimeline(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "pill",
@@ -1551,7 +1627,7 @@ function layoutGantt(ast) {
       y: snapGrid(y),
       width: snapGrid(w),
       height: barH,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "pill",
@@ -1591,7 +1667,7 @@ function layoutVenn(ast) {
       y: snapGrid(y),
       width: VENN_NODE_SIZE,
       height: VENN_NODE_SIZE,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "circle",
@@ -1625,7 +1701,7 @@ function layoutLayers(ast) {
       y: snapGrid(y),
       width: snapGrid(layerW),
       height: snapGrid(layerH),
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "rounded",
@@ -1672,7 +1748,7 @@ function layoutNested(ast) {
       y: snapGrid(y),
       width: snapGrid(w),
       height: snapGrid(h),
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: isCore ? "card" : "container",
@@ -1706,7 +1782,7 @@ function layoutRadar(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "rounded",
@@ -2094,17 +2170,32 @@ function computeAdaptiveDimensions(ast, edges) {
         autoH = Math.max(720, Math.min(2e3, requiredH));
       }
     } else {
-      const requiredW = SAFE * 2 + rankCount * NODE_W + (rankCount - 1) * 44 + groupPaddingBonus;
-      const requiredH = SAFE * 2 + TITLE_BAND + maxInRank * NODE_H + (maxInRank - 1) * 36 + groupPaddingBonus;
-      if (nodeCount <= 2 && rankCount <= 2) {
+      const hasTitle = Boolean(ast.meta.title && ast.meta.title.trim().length > 0);
+      const hasBeatCaptions = ast.beats.some((b) => b.label && b.label.trim().length > 0);
+      const titleBand = hasTitle ? TITLE_BAND : 0;
+      const bottomBand = hasBeatCaptions ? 44 : 0;
+      const maxRankW = Math.max(...nodeIds.map((id) => computeNodeDimensions(ast.nodes[id]).width));
+      const maxRankH = Math.max(...nodeIds.map((id) => computeNodeDimensions(ast.nodes[id]).height));
+      const requiredW = SAFE * 2 + rankCount * maxRankW + (rankCount - 1) * 56 + groupPaddingBonus;
+      const requiredH = SAFE * 2 + titleBand + bottomBand + maxInRank * maxRankH + (maxInRank - 1) * 44 + groupPaddingBonus;
+      if (maxInRank === 1 && !hasTitle) {
+        autoW = Math.max(1024, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 240 : 208, Math.min(360, requiredH + 24));
+      } else if (maxInRank === 2 && !hasTitle) {
+        autoW = Math.max(1024, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 368 : 336, Math.min(480, requiredH + 24));
+      } else if (maxInRank === 3 && !hasTitle) {
+        autoW = Math.max(1152, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 480 : 448, Math.min(640, requiredH + 24));
+      } else if (nodeCount <= 2 && rankCount <= 2) {
         autoW = 1024;
-        autoH = 576;
+        autoH = hasTitle ? 576 : 384;
       } else if (nodeCount <= 4 && rankCount <= 3 && maxInRank <= 2) {
         autoW = 1152;
-        autoH = 648;
+        autoH = hasTitle ? 648 : 448;
       } else {
         autoW = Math.max(1152, Math.min(2560, requiredW));
-        autoH = Math.max(648, Math.min(1600, requiredH));
+        autoH = Math.max(hasTitle ? 648 : maxInRank <= 2 ? 448 : 576, Math.min(1600, requiredH));
       }
     }
   }
@@ -2440,6 +2531,116 @@ var THEMES = {
     },
     radiusMd: 4,
     spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 }
+  },
+  ink: {
+    name: "ink",
+    canvas: "#f8fafd",
+    surface: "#ffffff",
+    surfaceRaised: "#eff6ff",
+    border: "#1d4ed8",
+    text: "#0f172a",
+    textMuted: "#3b629b",
+    paper: "#f8fafd",
+    ink: "#1e40af",
+    muted: "#4776b2",
+    rule: "rgba(29, 78, 216, 0.14)",
+    soft: "#60a5fa",
+    link: "#2563eb",
+    gridMinor: "rgba(37, 99, 235, 0.05)",
+    gridMajor: "rgba(37, 99, 235, 0.10)",
+    vignette: "rgba(219, 234, 254, 0.45)",
+    accent: "#1d4ed8",
+    accentTint: "rgba(29, 78, 216, 0.08)",
+    nodeSurface: "#ffffff",
+    nodeSurfaceRaised: "#f4f8ff",
+    hairline: "rgba(29, 78, 216, 0.20)",
+    shadow: "rgba(15, 35, 90, 0.09)",
+    labelPlate: "#ffffff",
+    flatCards: false,
+    roles: {
+      ...ROLE_COLORS,
+      compute: "#1d4ed8",
+      code: "#2563eb",
+      client: "#0284c7",
+      data: "#0369a1",
+      messaging: "#4338ca",
+      network: "#0284c7",
+      security: "#1e3a8a",
+      platform: "#3b82f6",
+      observability: "#0891b2",
+      delivery: "#4f46e5",
+      flow: "#2563eb",
+      distributed: "#475569"
+    },
+    edges: {
+      request: "#1d4ed8",
+      response: "#3b82f6",
+      event: "#0284c7",
+      dependency: "#64748b"
+    },
+    fonts: {
+      title: 'ui-serif, "Charter", "Newsreader", "Georgia", "Songti SC", "Noto Serif", serif',
+      nodeName: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif',
+      mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace'
+    },
+    radiusMd: 6,
+    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 },
+    series: ["#1d4ed8", "#0284c7", "#4338ca", "#0891b2", "#1e3a8a"]
+  },
+  doodle: {
+    name: "doodle",
+    canvas: "#fffef9",
+    surface: "#ffffff",
+    surfaceRaised: "#fdf8ec",
+    border: "#18181b",
+    text: "#18181b",
+    textMuted: "#52525b",
+    paper: "#fffef9",
+    ink: "#18181b",
+    muted: "#52525b",
+    rule: "rgba(24, 24, 27, 0.16)",
+    soft: "#71717a",
+    link: "#f43f5e",
+    gridMinor: "rgba(24, 24, 27, 0.05)",
+    gridMajor: "rgba(24, 24, 27, 0.08)",
+    vignette: "rgba(245, 235, 210, 0.35)",
+    accent: "#f43f5e",
+    accentTint: "rgba(244, 63, 94, 0.12)",
+    nodeSurface: "#ffffff",
+    nodeSurfaceRaised: "#fffdf5",
+    hairline: "rgba(24, 24, 27, 0.25)",
+    shadow: "rgba(24, 24, 27, 0.15)",
+    labelPlate: "#ffffff",
+    flatCards: true,
+    roles: {
+      ...ROLE_COLORS,
+      compute: "#2563eb",
+      code: "#2563eb",
+      client: "#f43f5e",
+      data: "#10b981",
+      messaging: "#8b5cf6",
+      network: "#06b6d4",
+      security: "#ef4444",
+      platform: "#f59e0b",
+      observability: "#14b8a6",
+      delivery: "#f59e0b",
+      flow: "#ec4899",
+      distributed: "#71717a"
+    },
+    edges: {
+      request: "#18181b",
+      response: "#71717a",
+      event: "#f43f5e",
+      dependency: "#a1a1aa"
+    },
+    fonts: {
+      title: '"Caveat", "Comic Neue", "Chalkboard SE", "Patrick Hand", "Comic Sans MS", cursive, sans-serif',
+      nodeName: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif',
+      mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace'
+    },
+    radiusMd: 12,
+    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 },
+    series: ["#f43f5e", "#2563eb", "#10b981", "#8b5cf6", "#f59e0b"]
   }
 };
 function resolveTheme(name) {
@@ -3005,7 +3206,7 @@ function validateReferences(ast) {
     }
   }
   for (const node of Object.values(ast.nodes)) {
-    if (node.style && !ast.styles[node.style]) {
+    if (typeof node.style === "string" && !ast.styles[node.style]) {
       pushWarning(ast.diagnostics, seen, node.line, `node '${node.id}' references unknown style '${node.style}'`);
     }
   }
@@ -3109,6 +3310,7 @@ function parse(source, opts = {}) {
     height: 720,
     fps: 60,
     theme: "paper",
+    explicitTheme: false,
     direction: "LR"
   };
   const styles = {};
@@ -3207,6 +3409,7 @@ function parse(source, opts = {}) {
       const str = parseStringToken(rest2);
       if (str) {
         title = str.value;
+        meta.title = title;
         remainder = str.rest;
       }
       const inlineLayout = remainder.match(/\blayout\s+(LR|RL|TB|BT)\b/i);
@@ -3229,8 +3432,11 @@ function parse(source, opts = {}) {
         } else if (k === "fps") {
           meta.fps = Number(v);
         } else if (k === "duration") meta.duration = Number(v);
-        else if (k === "theme") meta.theme = String(v);
-        else if (k === "direction" || k === "layout") meta.direction = String(v).toUpperCase();
+        else if (k === "theme") {
+          const val = String(v).toLowerCase();
+          meta.theme = val;
+          meta.explicitTheme = val !== "auto";
+        } else if (k === "direction" || k === "layout") meta.direction = String(v).toUpperCase();
         else if (PLAYER_FLAT_KEY_SET.has(k)) {
           const error = applyPlayerSetting(meta.player ??= {}, "player", k, String(v));
           if (error) diagnostics.push({ severity: "warning", message: error, line: lineNo });
@@ -3249,6 +3455,16 @@ function parse(source, opts = {}) {
       i++;
       continue;
     }
+    if (/^theme\s*[:=]?\s*([a-zA-Z0-9_-]+)/i.test(line)) {
+      const match = line.match(/^theme\s*[:=]?\s*([a-zA-Z0-9_-]+)/i);
+      if (match) {
+        const val = match[1].toLowerCase();
+        meta.theme = val;
+        meta.explicitTheme = val !== "auto";
+      }
+      i++;
+      continue;
+    }
     const directiveMatch = line.match(PLAYER_DIRECTIVE_RE);
     if (directiveMatch) {
       const error = applyPlayerSetting(meta.player ??= {}, "player", directiveMatch[1], directiveMatch[2] ?? "");
@@ -4621,7 +4837,7 @@ function diagnoseMarkdyCode(code, options = {}) {
             snippet: trimmed,
             suggestion: closeTheme ? `Use theme '${closeTheme.match}'.` : `Choose from: ${THEME_NAMES.join(", ")}.`,
             didYouMean: closeTheme?.match,
-            ruleExplanation: "Supported themes: paper, editorial, midnight, blueprint, graphite, nebula, sketchy, terminal.",
+            ruleExplanation: "Supported themes: paper, editorial, midnight, blueprint, graphite, nebula, sketchy, terminal, ink, doodle.",
             fix: closeTheme ? { original: themeMatch[0], replacement: `theme=${closeTheme.match}` } : void 0
           });
         }
@@ -5517,7 +5733,9 @@ function getIntelliCodeCompletions(docText, cursorLine, cursorCol) {
       { name: "editorial", desc: "High-contrast serif luxury publication layout" },
       { name: "graphite", desc: "Sleek slate monochrome engineering aesthetic" },
       { name: "terminal", desc: "Retro phosphor CRT hacker terminal green on black" },
-      { name: "sketchy", desc: "Hand-drawn sketchy whiteboard marker design" }
+      { name: "sketchy", desc: "Hand-drawn sketchy whiteboard marker design" },
+      { name: "ink", desc: "Monochromatic blue ink style inspired by ballpoint pens, fountain pens, cyanotypes & porcelain" },
+      { name: "doodle", desc: "Playful hand-drawn doodle sketchbook with felt-tip marker pens and comic block shadows" }
     ];
     for (const t of themeEntries) {
       items.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/core",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Diagram-native MarkdyScript parser and compiler (auto-layout, edge routing, cue scheduling) — zero runtime dependencies.",
   "license": "MIT",
   "type": "module",