gigaboard 1.3.3 → 1.4.0

package/dist/index.d.cts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ChessboardProps, T as Theme, O as Orientation, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions, P as PieceRenderer } from './types-Bg2xiUHE.cjs';
-export { a as ArrowColors, D as DEFAULT_MOVE_HAPTIC_PATTERNS, b as DEFAULT_MOVE_SOUND_SOURCES, H as HapticFeedbackOptions, L as LegalTargetStyle, M as MoveFeedbackKey, c as MoveHapticKey, d as MoveHapticOptions, e as MoveHapticPatterns, f as MoveSoundKey, g as MoveSoundOptions, h as MoveSoundSources, i as PositionTransition, j as PromotionContext, k as RanksPosition, S as SquareContext, l as TriggerMoveHaptic, m as TriggerMoveSound, n as classifyMoveFeedback, t as triggerHaptic, o as triggerMoveHaptic, u as useMoveHaptics, p as useMoveSound, w as warmupHaptics } from './types-Bg2xiUHE.cjs';
-export { c as createGigachessAdapter, p as preloadGigachessAdapter } from './gigachess-3BDD--yT.cjs';
-import { u as BoardModel, w as BoardSnapshot, S as SquareIndex, v as BoardModelOptions, P as PackedMove, t as BoardCell } from './board-model-BvJOtwQ3.cjs';
-export { z as Color, E as EngineAdapter, a as PieceType, Z as ZobristKey, Y as createBoardModel, a4 as packMove, a6 as unpackMove } from './board-model-BvJOtwQ3.cjs';
+import { C as ChessboardProps, T as Theme, O as Orientation, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions, P as PieceRenderer } from './types-DfqRXtbD.cjs';
+export { a as ArrowColors, D as DEFAULT_MOVE_HAPTIC_PATTERNS, b as DEFAULT_MOVE_SOUND_SOURCES, H as HapticFeedbackOptions, L as LegalTargetStyle, M as MoveFeedbackKey, c as MoveHapticKey, d as MoveHapticOptions, e as MoveHapticPatterns, f as MoveSoundKey, g as MoveSoundOptions, h as MoveSoundSources, i as PositionTransition, j as PromotionContext, k as RanksPosition, S as SquareContext, l as TriggerMoveHaptic, m as TriggerMoveSound, n as classifyMoveFeedback, t as triggerHaptic, o as triggerMoveHaptic, u as useMoveHaptics, p as useMoveSound, w as warmupHaptics } from './types-DfqRXtbD.cjs';
+export { c as createGigachessAdapter, p as preloadGigachessAdapter } from './gigachess-Dr5gCN68.cjs';
+import { v as BoardModel, x as BoardSnapshot, S as SquareIndex, w as BoardModelOptions, P as PackedMove, u as BoardCell } from './board-model-BMtkLQvL.cjs';
+export { D as Color, E as EngineAdapter, a as PieceType, Z as ZobristKey, _ as createBoardModel, a5 as packMove, a7 as unpackMove } from './board-model-BMtkLQvL.cjs';
 import { RefObject, ReactNode } from 'react';
 export { HapticInput, TriggerOptions } from 'web-haptics';
 

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as ChessboardProps, T as Theme, O as Orientation, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions, P as PieceRenderer } from './types-D5eBJGzj.js';
-export { a as ArrowColors, D as DEFAULT_MOVE_HAPTIC_PATTERNS, b as DEFAULT_MOVE_SOUND_SOURCES, H as HapticFeedbackOptions, L as LegalTargetStyle, M as MoveFeedbackKey, c as MoveHapticKey, d as MoveHapticOptions, e as MoveHapticPatterns, f as MoveSoundKey, g as MoveSoundOptions, h as MoveSoundSources, i as PositionTransition, j as PromotionContext, k as RanksPosition, S as SquareContext, l as TriggerMoveHaptic, m as TriggerMoveSound, n as classifyMoveFeedback, t as triggerHaptic, o as triggerMoveHaptic, u as useMoveHaptics, p as useMoveSound, w as warmupHaptics } from './types-D5eBJGzj.js';
-export { c as createGigachessAdapter, p as preloadGigachessAdapter } from './gigachess-DolQlR82.js';
-import { u as BoardModel, w as BoardSnapshot, S as SquareIndex, v as BoardModelOptions, P as PackedMove, t as BoardCell } from './board-model-BvJOtwQ3.js';
-export { z as Color, E as EngineAdapter, a as PieceType, Z as ZobristKey, Y as createBoardModel, a4 as packMove, a6 as unpackMove } from './board-model-BvJOtwQ3.js';
+import { C as ChessboardProps, T as Theme, O as Orientation, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions, P as PieceRenderer } from './types-CcOgT5ov.js';
+export { a as ArrowColors, D as DEFAULT_MOVE_HAPTIC_PATTERNS, b as DEFAULT_MOVE_SOUND_SOURCES, H as HapticFeedbackOptions, L as LegalTargetStyle, M as MoveFeedbackKey, c as MoveHapticKey, d as MoveHapticOptions, e as MoveHapticPatterns, f as MoveSoundKey, g as MoveSoundOptions, h as MoveSoundSources, i as PositionTransition, j as PromotionContext, k as RanksPosition, S as SquareContext, l as TriggerMoveHaptic, m as TriggerMoveSound, n as classifyMoveFeedback, t as triggerHaptic, o as triggerMoveHaptic, u as useMoveHaptics, p as useMoveSound, w as warmupHaptics } from './types-CcOgT5ov.js';
+export { c as createGigachessAdapter, p as preloadGigachessAdapter } from './gigachess-C08uAeFw.js';
+import { v as BoardModel, x as BoardSnapshot, S as SquareIndex, w as BoardModelOptions, P as PackedMove, u as BoardCell } from './board-model-BMtkLQvL.js';
+export { D as Color, E as EngineAdapter, a as PieceType, Z as ZobristKey, _ as createBoardModel, a5 as packMove, a7 as unpackMove } from './board-model-BMtkLQvL.js';
 import { RefObject, ReactNode } from 'react';
 export { HapticInput, TriggerOptions } from 'web-haptics';
 

package/dist/index.js

@@ -1,5 +1,5 @@
-import { PieceType, Color, createDragController, createGigachessAdapter, createBoardModel, isEmptyCell, pieceTypeOf, colorOf, encodeBoardCell, decodePackedMove } from './chunk-BB54XFHQ.js';
-export { Color, PieceType, createBoardModel, createGigachessAdapter, packMove, preloadGigachessAdapter, unpackMove } from './chunk-BB54XFHQ.js';
+import { PieceType, Color, createDragController, createGigachessAdapter, createBoardModel, isEmptyCell, pieceTypeOf, colorOf, encodeBoardCell, decodePackedMove } from './chunk-BNJKX6K7.js';
+export { Color, PieceType, createBoardModel, createGigachessAdapter, packMove, preloadGigachessAdapter, unpackMove } from './chunk-BNJKX6K7.js';
 import { CSS_VARS, defaultTheme, defaultPieces, parseFenPlacement, defaultArrowColors, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT } from './chunk-EJUGH25P.js';
 export { CSS_VARS, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT, defaultArrowColors, defaultPieces, defaultTheme } from './chunk-EJUGH25P.js';
 import './chunk-OQLY5GJF.js';
@@ -142,6 +142,7 @@ function redraw(canvas, arrows, preview, orientation, palette) {
   ctx.clearRect(0, 0, cssWidth, cssHeight);
   const sqSize = cssWidth / 8;
   for (const arrow of arrows) {
+    if (arrow.label?.background !== void 0) continue;
     drawArrow(ctx, arrow.from, arrow.to, resolveColor(arrow, palette), sqSize, orientation, false);
   }
   if (preview !== null) {
@@ -155,6 +156,243 @@ function anchorPct(from, to, orientation, center) {
   if (center === "dest") return b;
   return { cx: (a.cx + b.cx) / 2, cy: (a.cy + b.cy) / 2 };
 }
+function computeDynamicAeroGeometry(text, style, fontSize, isTerminal = true) {
+  const resolvedStyle = style ?? "aero_chisel";
+  const hasText = Boolean(text && text.trim().length > 0);
+  if (!hasText) {
+    const tipX = 2.8;
+    const shoulderX = 0.2;
+    const rearX = -1.2;
+    const dockX2 = -1.8;
+    const halfH2 = 2.2;
+    const path2 = `M ${rearX},${-halfH2} L ${shoulderX},${-halfH2} L ${tipX},0 L ${shoulderX},${halfH2} L ${rearX},${halfH2} C ${dockX2},${halfH2} ${dockX2},${-halfH2} ${rearX},${-halfH2} Z`;
+    return {
+      path: path2,
+      tipLen: tipX,
+      dockLen: -dockX2,
+      frontLen: tipX,
+      cabinW: 0
+    };
+  }
+  const charWidth = fontSize * 0.6;
+  const textWidth = text.length * charWidth;
+  const halfTextW = textWidth / 2;
+  const padX = 0.75;
+  const cabinW = Math.max(3.2, halfTextW + padX);
+  const halfH = Math.max(2.3, fontSize * 0.9);
+  const rearInset = 0.65;
+  const dockX = -cabinW - rearInset;
+  let frontLen = 0;
+  let path = "";
+  if (resolvedStyle === "aero_chisel") {
+    if (isTerminal) {
+      const noseLead = 1.25;
+      const tipX = cabinW + noseLead;
+      frontLen = tipX;
+      path = `M ${-cabinW},${-halfH} L ${cabinW},${-halfH} L ${tipX},0 L ${cabinW},${halfH} L ${-cabinW},${halfH} C ${dockX},${halfH} ${dockX},${-halfH} ${-cabinW},${-halfH} Z`;
+    } else {
+      frontLen = cabinW + rearInset;
+      path = `M ${-cabinW},${-halfH} L ${cabinW},${-halfH} C ${frontLen},${-halfH} ${frontLen},${halfH} ${cabinW},${halfH} L ${-cabinW},${halfH} C ${dockX},${halfH} ${dockX},${-halfH} ${-cabinW},${-halfH} Z`;
+    }
+  } else if (resolvedStyle === "chamfer_arrow") {
+    if (isTerminal) {
+      const tipX = cabinW + 1.4;
+      frontLen = tipX;
+      path = `M ${-cabinW},-1.2 L ${-cabinW + 1.2},${-halfH} L ${cabinW},${-halfH} L ${tipX},0 L ${cabinW},${halfH} L ${-cabinW + 1.2},${halfH} L ${-cabinW},1.2 Z`;
+    } else {
+      frontLen = cabinW + 0.8;
+      path = `M ${-cabinW},-1.2 L ${-cabinW + 1.2},${-halfH} L ${cabinW - 1.2},${-halfH} L ${cabinW},-1.2 L ${cabinW},1.2 L ${cabinW - 1.2},${halfH} L ${-cabinW + 1.2},${halfH} L ${-cabinW},1.2 Z`;
+    }
+  } else if (resolvedStyle === "blunt_wedge") {
+    if (isTerminal) {
+      const tipX = cabinW + 1.1;
+      frontLen = tipX;
+      path = `M ${-cabinW},${-halfH} L ${cabinW},${-halfH} L ${tipX},${-halfH * 0.35} L ${tipX},${halfH * 0.35} L ${cabinW},${halfH} L ${-cabinW},${halfH} C ${dockX},${halfH} ${dockX},${-halfH} ${-cabinW},${-halfH} Z`;
+    } else {
+      frontLen = cabinW + rearInset;
+      path = `M ${-cabinW},${-halfH} L ${cabinW},${-halfH} C ${frontLen},${-halfH} ${frontLen},${halfH} ${cabinW},${halfH} L ${-cabinW},${halfH} C ${dockX},${halfH} ${dockX},${-halfH} ${-cabinW},${-halfH} Z`;
+    }
+  } else if (resolvedStyle === "stealth") {
+    const wingBack = cabinW + 2.3;
+    const wingY = halfH + 0.35;
+    const shoulderX = cabinW * 0.35;
+    const tipX = cabinW + 3.6;
+    frontLen = tipX;
+    path = `M ${dockX.toFixed(2)},0 L ${(-wingBack).toFixed(2)},${(-wingY).toFixed(2)} L ${(-cabinW).toFixed(2)},${(-halfH).toFixed(2)} L ${shoulderX.toFixed(2)},${(-halfH).toFixed(2)} L ${tipX.toFixed(2)},0 L ${shoulderX.toFixed(2)},${halfH.toFixed(2)} L ${(-cabinW).toFixed(2)},${halfH.toFixed(2)} L ${(-wingBack).toFixed(2)},${wingY.toFixed(2)} Z`;
+  } else {
+    const noseLead = 1.25;
+    const tipX = cabinW + noseLead;
+    frontLen = tipX;
+    path = `M ${-cabinW},${-halfH} L ${cabinW},${-halfH} L ${tipX},0 L ${cabinW},${halfH} L ${-cabinW},${halfH} C ${dockX},${halfH} ${dockX},${-halfH} ${-cabinW},${-halfH} Z`;
+  }
+  return {
+    path,
+    tipLen: frontLen,
+    dockLen: -dockX,
+    frontLen,
+    cabinW
+  };
+}
+function chooseKnightCorner(fromIndex, toIndex, allArrows, orientation) {
+  const a = squareCentrePct(fromIndex, orientation);
+  const b = squareCentrePct(toIndex, orientation);
+  const dx = b.cx - a.cx;
+  const dy = b.cy - a.cy;
+  const corner1 = { x: b.cx, y: a.cy };
+  const corner2 = { x: a.cx, y: b.cy };
+  const fromFile = fromIndex & 7;
+  const hasColinearArrowOnFile = allArrows.some(
+    (other) => other.from !== fromIndex && (other.from & 7) === fromFile
+  );
+  if (hasColinearArrowOnFile) {
+    return corner1;
+  }
+  return Math.abs(dx) > Math.abs(dy) ? corner1 : corner2;
+}
+function computeIntegratedArrowVectors(arrow, orientation, allArrows) {
+  const label = arrow.label;
+  if (!label || label.background === void 0) return null;
+  const a = squareCentrePct(arrow.from, orientation);
+  const b = squareCentrePct(arrow.to, orientation);
+  if (arrow.from === arrow.to) return null;
+  const isKnight = isKnightMove(arrow.from, arrow.to);
+  const fontSize = label.fontSize ?? 2.45;
+  const geom = computeDynamicAeroGeometry(label.text, label.headStyle, fontSize, true);
+  let startUnit;
+  let finalUnit;
+  let corner = null;
+  if (!isKnight) {
+    const u = unitVector({ x: a.cx, y: a.cy }, { x: b.cx, y: b.cy });
+    if (u === null) return null;
+    startUnit = u;
+    finalUnit = u;
+  } else {
+    corner = chooseKnightCorner(arrow.from, arrow.to, allArrows, orientation);
+    startUnit = unitVector({ x: a.cx, y: a.cy }, corner);
+    finalUnit = unitVector(corner, { x: b.cx, y: b.cy });
+    if (startUnit === null || finalUnit === null) return null;
+  }
+  const tip = {
+    x: b.cx + finalUnit.x * 2.08,
+    y: b.cy + finalUnit.y * 2.08
+  };
+  const headCenter = {
+    x: tip.x - finalUnit.x * geom.frontLen,
+    y: tip.y - finalUnit.y * geom.frontLen
+  };
+  const shaftEnd = {
+    x: headCenter.x - finalUnit.x * geom.dockLen,
+    y: headCenter.y - finalUnit.y * geom.dockLen
+  };
+  const dist = Math.hypot(b.cx - a.cx, b.cy - a.cy);
+  const startOffset = dist < 18 ? 0.5 : 2.4;
+  const shaftStart = {
+    x: a.cx + startUnit.x * startOffset,
+    y: a.cy + startUnit.y * startOffset
+  };
+  const angleRad = Math.atan2(finalUnit.y, finalUnit.x);
+  const angleDeg = angleRad * 180 / Math.PI;
+  let textRot = 0;
+  const rotMode = label.textRotation ?? "auto";
+  if (rotMode === "flat") {
+    textRot = -angleDeg;
+  } else if (rotMode === "auto") {
+    const norm = (angleDeg % 360 + 360) % 360;
+    if (norm > 90 && norm < 270) {
+      textRot = 180;
+    }
+  }
+  const shaftD = corner !== null ? `M ${shaftStart.x} ${shaftStart.y} L ${corner.x} ${corner.y} L ${shaftEnd.x} ${shaftEnd.y}` : `M ${shaftStart.x} ${shaftStart.y} L ${shaftEnd.x} ${shaftEnd.y}`;
+  const shaftLen = (shaftEnd.x - shaftStart.x) * startUnit.x + (shaftEnd.y - shaftStart.y) * startUnit.y;
+  const showShaft = isKnight || shaftLen > 0.2;
+  return {
+    label,
+    fontSize,
+    geom,
+    headCenter,
+    shaftD,
+    showShaft,
+    angleDeg,
+    textRot
+  };
+}
+function renderIntegratedShaft(arrow, color, orientation, key, allArrows) {
+  const v = computeIntegratedArrowVectors(arrow, orientation, allArrows);
+  if (v === null || !v.showShaft) return null;
+  const is3d = v.label.style3d !== false;
+  const filterId = is3d ? "url(#gb-apple-elevation)" : "url(#gb-arrow-shadow)";
+  return /* @__PURE__ */ jsxs("g", { filter: filterId, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: v.shaftD,
+        fill: "none",
+        stroke: is3d ? "rgba(44, 27, 20, 0.75)" : color,
+        strokeWidth: is3d ? "3.2" : "2.2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: v.shaftD,
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2.1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    is3d && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: v.shaftD,
+        fill: "none",
+        stroke: "rgba(255, 255, 255, 0.3)",
+        strokeWidth: "0.6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }, `${key}-shaft`);
+}
+function renderIntegratedHead(arrow, _color, orientation, key, allArrows) {
+  const v = computeIntegratedArrowVectors(arrow, orientation, allArrows);
+  if (v === null) return null;
+  const is3d = v.label.style3d !== false;
+  const filterId = is3d ? "url(#gb-apple-elevation)" : "url(#gb-arrow-shadow)";
+  const headFill = v.label.background === "#F59E0B" && is3d ? "url(#gb-apple-amber-grad)" : v.label.background;
+  const headStroke = v.label.borderColor ?? "#78350F";
+  return /* @__PURE__ */ jsx("g", { filter: filterId, children: /* @__PURE__ */ jsxs("g", { transform: `translate(${v.headCenter.x}, ${v.headCenter.y}) rotate(${v.angleDeg})`, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: v.geom.path,
+        fill: headFill,
+        stroke: headStroke,
+        strokeWidth: "0.7",
+        strokeLinejoin: "round"
+      }
+    ),
+    Boolean(v.label.text && v.label.text.trim().length > 0) && /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: 0,
+        y: 0,
+        transform: v.textRot !== 0 ? `rotate(${v.textRot})` : void 0,
+        fill: v.label.fill ?? "#000000",
+        fontSize: v.fontSize,
+        fontWeight: "800",
+        fontFamily: "'JetBrains Mono', ui-monospace, monospace",
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        style: { userSelect: "none" },
+        children: v.label.text
+      }
+    )
+  ] }) }, `${key}-head`);
+}
 var ArrowsLayer = memo(
   forwardRef(function ArrowsLayer2({ model, orientation, palette, below = false }, handle) {
     const canvasRef = useRef(null);
@@ -213,7 +451,7 @@ var ArrowsLayer = memo(
           }
         }
       ),
-      hasDecorations ? /* @__PURE__ */ jsx(
+      hasDecorations ? /* @__PURE__ */ jsxs(
         "svg",
         {
           "data-layer": below ? "arrows-below-decor" : "arrows-decor",
@@ -229,50 +467,126 @@ var ArrowsLayer = memo(
             // Decorations share the z-plane of the canvas they annotate.
             ...layerZIndex !== void 0 ? { zIndex: layerZIndex } : {}
           },
-          children: arrows.map((arrow) => {
-            const key = `${arrow.from}-${arrow.to}-${arrow.color}-${arrow.brush ?? ""}`;
-            const color = resolveColor(arrow, palette);
-            const nodes = [];
-            if (arrow.label !== void 0) {
-              const { cx, cy } = anchorPct(arrow.from, arrow.to, orientation, "label");
-              nodes.push(
-                /* @__PURE__ */ jsx(
-                  "text",
-                  {
-                    x: cx,
-                    y: cy,
-                    fill: arrow.label.fill ?? color,
-                    fontSize: "4",
-                    fontWeight: "700",
-                    textAnchor: "middle",
-                    dominantBaseline: "central",
-                    style: { userSelect: "none" },
-                    children: arrow.label.text
-                  },
-                  `${key}-label`
-                )
-              );
-            }
-            if (arrow.customSvg !== void 0) {
-              const { cx, cy } = anchorPct(
-                arrow.from,
-                arrow.to,
-                orientation,
-                arrow.customSvg.center ?? "dest"
-              );
-              nodes.push(
-                /* @__PURE__ */ jsx(
-                  "g",
-                  {
-                    transform: `translate(${cx}, ${cy})`,
-                    dangerouslySetInnerHTML: { __html: arrow.customSvg.html }
-                  },
-                  `${key}-svg`
-                )
-              );
-            }
-            return nodes.length === 0 ? null : /* @__PURE__ */ jsx("g", { children: nodes }, key);
-          })
+          children: [
+            /* @__PURE__ */ jsxs("defs", { children: [
+              /* @__PURE__ */ jsx(
+                "filter",
+                {
+                  id: "gb-arrow-shadow",
+                  filterUnits: "userSpaceOnUse",
+                  x: "-20",
+                  y: "-20",
+                  width: "140",
+                  height: "140",
+                  children: /* @__PURE__ */ jsx(
+                    "feDropShadow",
+                    {
+                      dx: "0",
+                      dy: "1.2",
+                      stdDeviation: "1.2",
+                      floodColor: "#000000",
+                      floodOpacity: "0.55"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "filter",
+                {
+                  id: "gb-apple-elevation",
+                  filterUnits: "userSpaceOnUse",
+                  x: "-20",
+                  y: "-20",
+                  width: "140",
+                  height: "140",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "feDropShadow",
+                      {
+                        dx: "0",
+                        dy: "2.8",
+                        stdDeviation: "2.2",
+                        floodColor: "#000000",
+                        floodOpacity: "0.4"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "feDropShadow",
+                      {
+                        dx: "0",
+                        dy: "1.0",
+                        stdDeviation: "0.7",
+                        floodColor: "#000000",
+                        floodOpacity: "0.6"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("linearGradient", { id: "gb-apple-amber-grad", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#FBBF24", stopOpacity: "1" }),
+                /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#F59E0B", stopOpacity: "1" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#D97706", stopOpacity: "1" })
+              ] })
+            ] }),
+            arrows.map((arrow) => {
+              if (arrow.label?.background === void 0) return null;
+              const key = `${arrow.from}-${arrow.to}-${arrow.color}-${arrow.brush ?? ""}`;
+              const color = resolveColor(arrow, palette);
+              return renderIntegratedShaft(arrow, color, orientation, key, arrows);
+            }),
+            arrows.map((arrow) => {
+              if (arrow.label?.background === void 0) return null;
+              const key = `${arrow.from}-${arrow.to}-${arrow.color}-${arrow.brush ?? ""}`;
+              const color = resolveColor(arrow, palette);
+              return renderIntegratedHead(arrow, color, orientation, key, arrows);
+            }),
+            arrows.map((arrow) => {
+              if (arrow.label?.background !== void 0) return null;
+              const key = `${arrow.from}-${arrow.to}-${arrow.color}-${arrow.brush ?? ""}`;
+              const color = resolveColor(arrow, palette);
+              const nodes = [];
+              if (arrow.label !== void 0) {
+                const { cx, cy } = anchorPct(arrow.from, arrow.to, orientation, "label");
+                nodes.push(
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: cx,
+                      y: cy,
+                      fill: arrow.label.fill ?? color,
+                      fontSize: "4",
+                      fontWeight: "700",
+                      textAnchor: "middle",
+                      dominantBaseline: "central",
+                      style: { userSelect: "none" },
+                      children: arrow.label.text
+                    },
+                    `${key}-label`
+                  )
+                );
+              }
+              if (arrow.customSvg !== void 0) {
+                const { cx, cy } = anchorPct(
+                  arrow.from,
+                  arrow.to,
+                  orientation,
+                  arrow.customSvg.center ?? "dest"
+                );
+                nodes.push(
+                  /* @__PURE__ */ jsx(
+                    "g",
+                    {
+                      transform: `translate(${cx}, ${cy})`,
+                      dangerouslySetInnerHTML: { __html: arrow.customSvg.html }
+                    },
+                    `${key}-svg`
+                  )
+                );
+              }
+              return nodes.length === 0 ? null : /* @__PURE__ */ jsx("g", { children: nodes }, key);
+            })
+          ]
         }
       ) : null
     ] });