inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/scanner/svg-fill-parent-regression.ts

@@ -0,0 +1,98 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import {
+  applyAspectRatioIfPossible,
+  applyFullWidthIfPossible,
+  hasAspectRatio,
+  markAspectRatio,
+  markFullWidthNode,
+} from '../src/layout/deferred-layout';
+
+// Stubs sized to expose the bits the resolvers inspect.
+type StubFrame = {
+  type: 'FRAME';
+  name?: string;
+  width: number;
+  height: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+  layoutMode: 'NONE' | 'VERTICAL' | 'HORIZONTAL';
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  counterAxisSizingMode: 'AUTO' | 'FIXED';
+  primaryAxisAlignItems?: string;
+  layoutAlign?: string;
+  layoutGrow?: number;
+  resize(w: number, h: number): void;
+};
+
+function frame(width: number, height: number, layoutMode: 'NONE' | 'VERTICAL' | 'HORIZONTAL' = 'NONE'): StubFrame {
+  return {
+    type: 'FRAME',
+    name: '',
+    width,
+    height,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    layoutMode,
+    primaryAxisSizingMode: 'AUTO',
+    counterAxisSizingMode: 'AUTO',
+    resize(w, h) {
+      this.width = w;
+      this.height = h;
+    },
+  };
+}
+
+function runRegression(): void {
+  // ---- Inline SVG marked w-full + h-full inside a layoutMode=NONE parent --
+  // Mirrors the round-trip section's arrows SVG: `<svg className="absolute
+  // inset-0 h-full w-full">` rendered into a wrapper that defaults to 24×24
+  // until layout marks resize it.
+  const parent = frame(720, 432, 'NONE');
+  const svgWrap = frame(24, 24);
+  markFullWidthNode(svgWrap as unknown as SceneNode);
+  // markFullHeightNode is private to deferred-layout, but ui-builder exports
+  // it for plugin internals; here we simulate by setting the underlying mark
+  // through an alternative entry. Calling applyFullWidthIfPossible directly
+  // requires both marks already set — verify via the public path:
+  // After the SVG handler propagates marks, `applyFullWidthIfPossible` should
+  // resize the wrapped svg to (parent.width, parent.height).
+  // For test purposes we simulate this by calling applyFullWidthIfPossible
+  // with a parent that has finite dims.
+  applyFullWidthIfPossible(svgWrap as unknown as SceneNode, parent as unknown as FrameNode);
+  assert.equal(svgWrap.width, 720, 'w-full on NONE parent → resize to parent.width');
+  assert.equal(
+    svgWrap.primaryAxisSizingMode === 'FIXED' || svgWrap.counterAxisSizingMode === 'FIXED',
+    true,
+    'sizing mode locked'
+  );
+
+  // ---- aspect-ratio applied to the wrapped svg ----------------------------
+  const svgAspect = frame(0, 0);
+  markFullWidthNode(svgAspect as unknown as SceneNode);
+  markAspectRatio(svgAspect as unknown as SceneNode, 5 / 3); // aspect-5/3
+  // Resolve width first.
+  applyFullWidthIfPossible(svgAspect as unknown as SceneNode, frame(720, 999, 'NONE') as unknown as FrameNode);
+  applyAspectRatioIfPossible(svgAspect as unknown as SceneNode);
+  assert.equal(svgAspect.width, 720, 'aspect svg width = parent width');
+  assert.equal(svgAspect.height, 432, 'aspect-5/3 height = 720 * 3/5 = 432');
+  assert.equal(hasAspectRatio(svgAspect as unknown as SceneNode), false, 'aspect mark consumed');
+}
+
+try {
+  runRegression();
+  console.log('svg-fill-parent-regression: PASS');
+} catch (err) {
+  console.error('svg-fill-parent-regression: FAIL');
+  console.error(err);
+  process.exit(1);
+}

package/scanner/svg-group-inheritance-regression.ts

@@ -0,0 +1,166 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import { flattenGroupInheritance, flattenSvgRootInheritance } from '../src/effects/icon-builder';
+
+/**
+ * Regression: Figma's `createNodeFromSvg` does NOT honor SVG `<g>` attribute
+ * inheritance. A `<path>` inside `<g stroke="…">` gets neither the stroke
+ * nor a fill, and the icon-builder's paint-fallback then fills it with the
+ * icon color — turning the round-trip arrow arcs into filled green wedges
+ * instead of dashed stroked arcs with arrowheads.
+ *
+ * The fix in `preprocessSvgForFigma` is to flatten `<g>` stroke / fill /
+ * stroke-* attributes onto child shape elements before sending to Figma.
+ * This fixture pins the flattening helper itself.
+ */
+
+// ---------------------------------------------------------------------------
+// Case 1 — the round-trip arrows pattern: `<g stroke="X" stroke-width="2"
+// stroke-linecap="round"><path d="…" stroke-dasharray="6 6" marker-end="…"
+// /></g>`. Each path must inherit stroke, stroke-width, stroke-linecap.
+// ---------------------------------------------------------------------------
+{
+  const input = `<svg viewBox="0 0 600 360" fill="none">
+    <g stroke="#0a0" stroke-width="2" stroke-linecap="round">
+      <path d="M 112 50 A 195 195 0 0 1 488 50" stroke-dasharray="6 6" marker-end="url(#a)" />
+      <path d="M 482 170 A 195 195 0 0 1 360 285" stroke-dasharray="6 6" />
+    </g>
+  </svg>`;
+  const output = flattenGroupInheritance(input);
+  // Each path should now carry stroke, stroke-width, stroke-linecap inline.
+  const pathMatches = output.match(/<path[^>]*>/g) || [];
+  assert.equal(pathMatches.length, 2, 'two paths in fixture');
+  for (const p of pathMatches) {
+    assert.ok(/\sstroke="#0a0"/.test(p), 'path inherits stroke from <g>: ' + p);
+    assert.ok(/\sstroke-width="2"/.test(p), 'path inherits stroke-width from <g>: ' + p);
+    assert.ok(/\sstroke-linecap="round"/.test(p), 'path inherits stroke-linecap from <g>: ' + p);
+  }
+  // Path's own stroke-dasharray and marker-end must be preserved.
+  assert.ok(/stroke-dasharray="6 6"/.test(output), 'path own stroke-dasharray preserved');
+  assert.ok(/marker-end="url\(#a\)"/.test(output), 'path own marker-end preserved');
+}
+
+// ---------------------------------------------------------------------------
+// Case 2 — child stroke wins over `<g>` stroke (CSS inheritance: own
+// declaration beats inherited).
+// ---------------------------------------------------------------------------
+{
+  const input = `<g stroke="#aaa" stroke-width="2">
+    <path d="M 0 0 L 10 10" stroke="#000" />
+  </g>`;
+  const output = flattenGroupInheritance(input);
+  const pathMatch = output.match(/<path[^>]*>/);
+  assert.ok(pathMatch, 'path captured');
+  // Child's own stroke="#000" must NOT be replaced by parent's "#aaa".
+  assert.ok(/\sstroke="#000"/.test(pathMatch![0]), 'child own stroke wins: ' + pathMatch![0]);
+  assert.ok(!/\sstroke="#aaa"/.test(pathMatch![0]), 'parent stroke not added when child has own: ' + pathMatch![0]);
+  // But stroke-width (which child doesn't have) IS inherited.
+  assert.ok(/\sstroke-width="2"/.test(pathMatch![0]), 'sibling attr stroke-width still inherited: ' + pathMatch![0]);
+}
+
+// ---------------------------------------------------------------------------
+// Case 3 — nested `<g>` propagates through both levels. The inner-most
+// pass runs first; the outer pass then propagates to anything not covered.
+// ---------------------------------------------------------------------------
+{
+  const input = `<g fill="#red">
+    <g stroke="#0a0">
+      <path d="M 0 0 L 10 10" />
+    </g>
+  </g>`;
+  const output = flattenGroupInheritance(input);
+  const pathMatch = output.match(/<path[^>]*>/);
+  assert.ok(pathMatch, 'path captured');
+  assert.ok(/\sstroke="#0a0"/.test(pathMatch![0]), 'inner <g> stroke inherited: ' + pathMatch![0]);
+  assert.ok(/\sfill="#red"/.test(pathMatch![0]), 'outer <g> fill inherited through nested level: ' + pathMatch![0]);
+}
+
+// ---------------------------------------------------------------------------
+// Case 4 — `<g>` with no inheritable attrs is a no-op (no spurious changes).
+// ---------------------------------------------------------------------------
+{
+  const input = `<g transform="translate(10,10)">
+    <path d="M 0 0 L 10 10" />
+  </g>`;
+  const output = flattenGroupInheritance(input);
+  assert.equal(output, input, 'no-op when <g> has no inheritable attrs');
+}
+
+// ---------------------------------------------------------------------------
+// Case 5 — multiple shape types (path, line, circle) all inherit.
+// ---------------------------------------------------------------------------
+{
+  const input = `<g stroke="#blue" stroke-width="3">
+    <path d="M 0 0" />
+    <line x1="0" y1="0" x2="10" y2="10" />
+    <circle cx="5" cy="5" r="3" />
+  </g>`;
+  const output = flattenGroupInheritance(input);
+  for (const tag of ['path', 'line', 'circle']) {
+    const re = new RegExp('<' + tag + '[^>]*>');
+    const m = output.match(re);
+    assert.ok(m, tag + ' captured');
+    assert.ok(/\sstroke="#blue"/.test(m![0]), tag + ' inherits stroke: ' + m![0]);
+    assert.ok(/\sstroke-width="3"/.test(m![0]), tag + ' inherits stroke-width: ' + m![0]);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Case 6 — opacity / fill-opacity / stroke-opacity inherit from `<g>`.
+// Common in duotone icon libraries (Lucide duotone, Heroicons solid/outline
+// pairs) that apply opacity to a `<g>` wrapping accent paths.
+// ---------------------------------------------------------------------------
+{
+  const input = `<g opacity="0.5" fill-opacity="0.6">
+    <path d="M 0 0 L 10 10" />
+  </g>`;
+  const output = flattenGroupInheritance(input);
+  const pathMatch = output.match(/<path[^>]*>/);
+  assert.ok(pathMatch, 'path captured');
+  assert.ok(/\sopacity="0\.5"/.test(pathMatch![0]), 'path inherits opacity: ' + pathMatch![0]);
+  assert.ok(/\sfill-opacity="0\.6"/.test(pathMatch![0]), 'path inherits fill-opacity: ' + pathMatch![0]);
+}
+
+// ---------------------------------------------------------------------------
+// Case 7 — root `<svg>` inheritable attrs flatten onto child shapes. Many
+// icon libraries (Lucide, Heroicons) set `stroke="currentColor" fill="none"
+// stroke-width="2"` at the SVG root. Figma's createNodeFromSvg doesn't
+// propagate these — without `flattenSvgRootInheritance`, paths render
+// without stroke / fill / stroke-width.
+// ---------------------------------------------------------------------------
+{
+  const input = `<svg stroke="#0a0" fill="none" stroke-width="2" viewBox="0 0 24 24">
+    <path d="M 4 4 L 20 20" />
+    <circle cx="12" cy="12" r="5" />
+  </svg>`;
+  const output = flattenSvgRootInheritance(input);
+  const pathMatch = output.match(/<path[^>]*>/);
+  const circleMatch = output.match(/<circle[^>]*>/);
+  assert.ok(pathMatch && circleMatch, 'shapes captured');
+  for (const m of [pathMatch![0], circleMatch![0]]) {
+    assert.ok(/\sstroke="#0a0"/.test(m), 'shape inherits stroke from <svg>: ' + m);
+    assert.ok(/\sfill="none"/.test(m), 'shape inherits fill from <svg>: ' + m);
+    assert.ok(/\sstroke-width="2"/.test(m), 'shape inherits stroke-width from <svg>: ' + m);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Case 8 — root SVG attrs don't override shape's own (CSS inheritance).
+// ---------------------------------------------------------------------------
+{
+  const input = `<svg stroke="#aaa" fill="none">
+    <path d="M 0 0 L 10 10" stroke="#000" />
+  </svg>`;
+  const output = flattenSvgRootInheritance(input);
+  const pathMatch = output.match(/<path[^>]*>/);
+  assert.ok(/\sstroke="#000"/.test(pathMatch![0]), 'shape own stroke wins over root: ' + pathMatch![0]);
+  assert.ok(!/\sstroke="#aaa"/.test(pathMatch![0]), 'root stroke not added when shape has own: ' + pathMatch![0]);
+  assert.ok(/\sfill="none"/.test(pathMatch![0]), 'fill from root inherited (shape has no own fill): ' + pathMatch![0]);
+}
+
+console.log('svg-group-inheritance-regression: PASS');

package/scanner/svg-marker-inline-regression.ts

@@ -0,0 +1,211 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import { inlineSvgMarkers } from '../src/effects/icon-builder';
+
+/**
+ * Regression: Figma's `createNodeFromSvg` does NOT render `<marker>`
+ * references — `marker-end` arrowheads disappear silently. The fix in
+ * `preprocessSvgForFigma` inlines the marker geometry as a transformed
+ * `<g transform="translate(x y) rotate(θ) scale(sx sy) translate(-refX -refY)">`
+ * at the path endpoint, oriented along the tangent.
+ *
+ * This fixture pins the inlining helper for the round-trip arc pattern:
+ *   <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5"
+ *           markerWidth="4" markerHeight="4">
+ *     <path d="M0,0 L10,5 L0,10 Z" fill="..." />
+ *   </marker>
+ *   <path d="M 112 50 A 195 195 0 0 1 488 50" marker-end="url(#arrow)" />
+ *
+ * Expected: an extra `<g transform="…">` block appears before `</svg>`,
+ * positioning the triangle at the arc endpoint with the correct tangent
+ * rotation.
+ */
+
+// ---------------------------------------------------------------------------
+// Case 1: arc path with marker-end — endpoint + tangent must inject geometry.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 600 360">
+    <defs>
+      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="4" markerHeight="4">
+        <path d="M0,0 L10,5 L0,10 Z" fill="#00aa00" />
+      </marker>
+    </defs>
+    <path d="M 112 50 A 195 195 0 0 1 488 50" marker-end="url(#arrow)" />
+  </svg>`;
+
+  const out = inlineSvgMarkers(svg);
+  // Should contain a new <g transform=...> with the marker triangle inside.
+  assert.match(
+    out,
+    /<g\s+transform="translate\(488 50\)\s+rotate\([^"]+\)\s+scale\(0\.4 0\.4\)\s+translate\(-9 -5\)">/,
+    'inlined marker <g> with translate-to-endpoint, rotate, scale, refX/refY-align'
+  );
+  assert.ok(out.indexOf('M0,0 L10,5 L0,10 Z') !== -1, 'marker triangle path preserved');
+}
+
+// ---------------------------------------------------------------------------
+// Case 2: tangent angle for a CW horizontal-chord arc points DOWN at right
+// endpoint. For arc `M 112 50 A 195 195 0 0 1 488 50` (sweep CW, lar=small),
+// chord is horizontal; center lies BELOW the chord (sign of perp); tangent
+// at endpoint should point downward (positive y). Roughly 90° in SVG
+// y-down coords.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 600 360">
+    <defs>
+      <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="4" markerHeight="4">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 112 50 A 195 195 0 0 1 488 50" marker-end="url(#arrow)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  const rotMatch = out.match(/rotate\(([-\d.]+)\)/);
+  assert.ok(rotMatch, 'rotation present');
+  const angle = parseFloat(rotMatch![1]);
+  // Arc `M 112 50 A 195 195 0 0 1 488 50`: small arc + sweep=1.
+  // Center at (300, 101.78) — below chord in SVG y-down (visually above the
+  // arc since y-down inverts). Arc passes through (300, -93) — bulges UP
+  // visually. Velocity at endpoint (488, 50) is (-r sin θ_end, r cos θ_end)
+  // where θ_end ≈ -15.4°: velocity ≈ (52, 188). Angle ≈ atan2(188, 52) ≈
+  // 74.5° — pointing RIGHT and DOWN, which is the direction of travel as
+  // the arc descends from its apex into the endpoint.
+  assert.ok(angle > 60 && angle < 90, `rotation angle ${angle} should be ≈74.5° (right-down, direction of travel at arc endpoint)`);
+}
+
+// ---------------------------------------------------------------------------
+// Case 3: path WITHOUT marker-end — no inlining.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 100 100">
+    <defs><marker id="arrow"><path d="M0 0 L10 5 L0 10 Z" /></marker></defs>
+    <path d="M 10 10 L 90 90" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.equal(out, svg, 'no marker-end → no inlining (output unchanged)');
+}
+
+// ---------------------------------------------------------------------------
+// Case 4: line path (M + L) — tangent is the direction from start to end.
+// For `M 0 0 L 100 0` (horizontal right), tangent angle = 0°.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 200 100">
+    <defs>
+      <marker id="m" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 0 0 L 100 0" marker-end="url(#m)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.match(
+    out,
+    /translate\(100 0\)\s+rotate\(0\)/,
+    'horizontal line → endpoint (100, 0) and rotation 0°'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 5: line going DOWN (positive y in SVG) — tangent 90°.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 100 200">
+    <defs>
+      <marker id="m" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="3" markerHeight="3">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 50 0 L 50 100" marker-end="url(#m)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.match(
+    out,
+    /translate\(50 100\)\s+rotate\(90\)/,
+    'vertical-down line → endpoint (50, 100) and rotation 90°'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 6: missing marker definition — silently skipped (no crash, no inline).
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 100 100">
+    <path d="M 0 0 L 100 100" marker-end="url(#nonexistent)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.equal(out, svg, 'unknown marker id → no-op');
+}
+
+// ---------------------------------------------------------------------------
+// Case 7: cubic bezier (C command). Tangent at end = direction from second
+// control to endpoint. For `M 0 0 C 50 0 100 50 100 100`: last control
+// (100, 50), end (100, 100). Tangent = (0, 50), angle = atan2(50, 0) = 90°.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 200 200">
+    <defs>
+      <marker id="m" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 0 0 C 50 0 100 50 100 100" marker-end="url(#m)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.match(
+    out,
+    /translate\(100 100\)\s+rotate\(90\)/,
+    'cubic bezier endpoint at (100, 100), tangent direction angle 90°'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 8: quadratic bezier (Q command). Tangent at end = direction from
+// control to endpoint. For `M 0 0 Q 50 0 100 50`: control (50, 0), end
+// (100, 50). Tangent = (50, 50), angle = 45°.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 200 200">
+    <defs>
+      <marker id="m" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 0 0 Q 50 0 100 50" marker-end="url(#m)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.match(
+    out,
+    /translate\(100 50\)\s+rotate\(45\)/,
+    'quadratic bezier endpoint at (100, 50), tangent direction angle 45°'
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Case 9: horizontal lineto (H) — endpoint inherits Y from previous point,
+// tangent points along the H direction.
+// ---------------------------------------------------------------------------
+{
+  const svg = `<svg viewBox="0 0 200 200">
+    <defs>
+      <marker id="m" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4">
+        <path d="M0,0 L10,5 L0,10 Z" />
+      </marker>
+    </defs>
+    <path d="M 10 20 H 100" marker-end="url(#m)" />
+  </svg>`;
+  const out = inlineSvgMarkers(svg);
+  assert.match(
+    out,
+    /translate\(100 20\)\s+rotate\(0\)/,
+    'H 100 from (10, 20) → endpoint (100, 20), horizontal tangent 0°'
+  );
+}
+
+console.log('svg-marker-inline-regression: PASS');

package/scanner/svg-marker-regression.ts

@@ -0,0 +1,116 @@
+import assert from 'node:assert/strict';
+
+import { nodeIrToSvg } from '../src/effects/icon-builder';
+import type { NodeIR } from '../src/tailwind/node-ir';
+
+// Fixture: serialise a JSX-style svg tree (NodeIR) back to an SVG string and
+// verify two things this regression locks in:
+//   1. <marker> children inside <defs> survive serialisation (they used to be
+//      filtered out because `marker` wasn't in SVG_CHILD_TAGS, so any
+//      arrowhead defined this way would silently disappear in Figma).
+//   2. SVG attributes that are camelCase in the spec — `viewBox`,
+//      `preserveAspectRatio`, `refX`, `refY`, `markerWidth`, `markerHeight` —
+//      are emitted as-is, NOT converted to kebab-case (e.g. `marker-width`),
+//      which would produce invalid SVG that `figma.createNodeFromSvg` won't
+//      render.
+//
+// Originating bug: the round-trip section's bidirectional arrows used
+// <marker> + markerEnd to draw arrowheads. Without this fix, the arrowheads
+// disappeared in the Figma render and the bridge silhouette lost its
+// `xMidYMin slice` framing.
+
+function elem(tagLower: string, props: Record<string, unknown>, children: NodeIR[] = []): NodeIR {
+  return {
+    kind: 'element',
+    tagName: tagLower,
+    tagLower,
+    props,
+    children,
+    classes: [],
+  } as unknown as NodeIR;
+}
+
+function runRegression(): void {
+  const tree = elem(
+    'svg',
+    {
+      viewBox: '0 0 600 360',
+      preserveAspectRatio: 'xMidYMid meet',
+      width: '100%',
+      height: '100%',
+      fill: 'none',
+    },
+    [
+      elem('defs', {}, [
+        elem(
+          'marker',
+          {
+            id: 'rt-arrow',
+            viewBox: '0 0 10 10',
+            refX: 9,
+            refY: 5,
+            markerWidth: 4,
+            markerHeight: 4,
+            orient: 'auto-start-reverse',
+          },
+          [
+            elem('path', {
+              d: 'M0,0 L10,5 L0,10 Z',
+              fill: 'currentColor',
+            }),
+          ]
+        ),
+      ]),
+      elem('path', {
+        d: 'M 100 100 A 50 50 0 0 1 200 100',
+        strokeWidth: 2,
+        strokeDasharray: '6 6',
+        markerEnd: 'url(#rt-arrow)',
+      }),
+    ]
+  );
+
+  const svg = nodeIrToSvg(tree);
+  assert.ok(svg, 'expected nodeIrToSvg to return a non-empty string');
+
+  // Wrapper attrs: viewBox + preserveAspectRatio preserved with original
+  // (camelCase) spelling.
+  assert.match(svg!, /viewBox="0 0 600 360"/, 'wrapper viewBox must be preserved');
+  assert.match(
+    svg!,
+    /preserveAspectRatio="xMidYMid meet"/,
+    'wrapper preserveAspectRatio must be preserved'
+  );
+
+  // Marker tag survives.
+  assert.match(svg!, /<marker /, '<marker> tag must be present');
+  assert.match(svg!, /id="rt-arrow"/, 'marker id must be preserved');
+
+  // Marker camelCase attributes preserved (NOT marker-width / ref-x).
+  assert.match(svg!, /markerWidth="4"/, 'markerWidth must keep camelCase');
+  assert.match(svg!, /markerHeight="4"/, 'markerHeight must keep camelCase');
+  assert.match(svg!, /refX="9"/, 'refX must keep camelCase');
+  assert.match(svg!, /refY="5"/, 'refY must keep camelCase');
+  assert.doesNotMatch(svg!, /marker-width=/, 'must not emit kebab marker-width');
+  assert.doesNotMatch(svg!, /ref-x=/, 'must not emit kebab ref-x');
+
+  // marker child <path> survives.
+  assert.match(svg!, /<path d="M0,0 L10,5 L0,10 Z"/, 'marker child path must be present');
+
+  // Path-level presentation attributes ARE kebab-case in SVG.
+  assert.match(svg!, /stroke-dasharray="6 6"/, 'strokeDasharray must convert to kebab-case');
+  assert.match(
+    svg!,
+    /marker-end="url\(#rt-arrow\)"/,
+    'markerEnd reference must convert to kebab-case (the SVG attribute is marker-end)'
+  );
+}
+
+try {
+  runRegression();
+  console.log('svg-marker-regression: PASS');
+} catch (err) {
+  console.error('svg-marker-regression: FAIL');
+  console.error(err);
+  process.exit(1);
+}