shared.js

(function () {
  const params = new URLSearchParams(location.search);
  const stored = (() => { try { return localStorage.getItem('lab-theme'); } catch (e) { return null; } })();
  document.documentElement.dataset.theme = params.get('theme') || stored || 'dark';
})();

const isEmbed = location.search.includes('embed');

if (isEmbed) {
  const _c = document.getElementById('mainCanvas');
  document.body.innerHTML = '';
  document.body.style.cssText = `margin:0;padding:0;background:${document.documentElement.dataset.theme === 'light' ? '#fff' : '#000'};overflow:hidden;width:100vw;height:100vh;`;
  _c.style.cssText = 'display:block;width:100vw;height:100vh;';
  document.body.appendChild(_c);
} else {
  const _btn = document.createElement('button');
  _btn.id = 'themeToggleBtn';
  _btn.style.cssText = 'position:fixed;top:14px;right:14px;z-index:9999;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid;cursor:pointer;transition:background 0.2s,border-color 0.2s,color 0.2s;';
  _btn.setAttribute('aria-label', 'Toggle theme');

  const MOON_SVG = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
  const SUN_SVG  = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';

  function _updateThemeBtn() {
    const light = document.documentElement.dataset.theme === 'light';
    _btn.innerHTML = light ? MOON_SVG : SUN_SVG;
    _btn.style.background   = light ? 'rgba(0,0,0,0.06)'  : 'rgba(255,255,255,0.07)';
    _btn.style.borderColor  = light ? 'rgba(0,0,0,0.12)'  : 'rgba(255,255,255,0.12)';
    _btn.style.color        = light ? '#18181b'            : '#fafafa';
  }

  _updateThemeBtn();
  _btn.addEventListener('click', function () {
    const next = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
    document.documentElement.dataset.theme = next;
    try { localStorage.setItem('lab-theme', next); } catch (e) { }
    _updateThemeBtn();
    window.dispatchEvent(new CustomEvent('themechange'));
  });

  document.body.appendChild(_btn);
}

// ─── Theme color tables ───────────────────────────────────────────────────────
const _TC = {
  dark: {
    bg:            '#000000',
    gridMinor:     'rgba(255,255,255,0.04)',
    axis:          'rgba(255,255,255,0.18)',
    axisAlt:       'rgba(255,255,255,0.15)',
    axisStrong:    'rgba(255,255,255,0.25)',
    label:         'rgba(255,255,255,0.35)',
    labelDim:      'rgba(255,255,255,0.20)',
    labelMuted:    'rgba(255,255,255,0.07)',
    labelFaint:    'rgba(255,255,255,0.012)',
    sectionLabel:  '#3f3f46',
    tickLine:      '#1c1c1c',
    tickLineMaj:   '#383838',
    tickCell:      '#282828',
    tickCellMaj:   '#444444',
    dotCenter:     '#333333',
    fillTextBg:    'rgba(0,0,0,0.75)',
    connector:     'rgba(255,255,255,0.07)',
    connectorAlt:  'rgba(255,255,255,0.10)',
    connectorMed:  'rgba(255,255,255,0.12)',
    circleOuter:   'rgba(255,255,255,0.07)',
    circleStroke:  'rgba(255,255,255,0.12)',
    circleFill:    'rgba(255,255,255,0.04)',
    circleRing:    'rgba(255,255,255,0.10)',
    circleTick:    'rgba(255,255,255,0.12)',
    selIdle:       '#252525',
    resultBg:      'rgba(255,255,255,0.04)',
    resultBorder:  'rgba(255,255,255,0.08)',
    white:         '#ffffff',
    whiteFaint:    'rgba(255,255,255,0.02)',
    whiteMed:      'rgba(255,255,255,0.12)',
    whiteDim:      'rgba(255,255,255,0.22)',
    whiteFaint2:   'rgba(255,255,255,0.15)',
    vfGridLine:    '#111111',
    vfGridLineMaj: '#1f1f1f',
    vfLabelDim:    '#2a2a2a',
    vfAxisLabel:   '#333333',
    vfDot:         '#555555',
    expLabel:      '#a1a1aa',
    radiusLabel:   'rgba(255,255,255,0.25)',
    signZero:      '#fafafa',
    rightAngle:    'rgba(255,255,255,0.18)',
    centerDot:     'rgba(255,255,255,0.20)',
    fnLabel:       'rgba(255,255,255,0.18)',
  },
  light: {
    bg:            '#ffffff',
    gridMinor:     'rgba(0,0,0,0.06)',
    axis:          'rgba(0,0,0,0.25)',
    axisAlt:       'rgba(0,0,0,0.20)',
    axisStrong:    'rgba(0,0,0,0.35)',
    label:         'rgba(0,0,0,0.55)',
    labelDim:      'rgba(0,0,0,0.35)',
    labelMuted:    'rgba(0,0,0,0.12)',
    labelFaint:    'rgba(0,0,0,0.015)',
    sectionLabel:  '#a1a1aa',
    tickLine:      '#d8d8d8',
    tickLineMaj:   '#b8b8b8',
    tickCell:      '#e0e0e0',
    tickCellMaj:   '#aaaaaa',
    dotCenter:     '#c8c8c8',
    fillTextBg:    'rgba(255,255,255,0.90)',
    connector:     'rgba(0,0,0,0.10)',
    connectorAlt:  'rgba(0,0,0,0.12)',
    connectorMed:  'rgba(0,0,0,0.15)',
    circleOuter:   'rgba(0,0,0,0.08)',
    circleStroke:  'rgba(0,0,0,0.18)',
    circleFill:    'rgba(0,0,0,0.04)',
    circleRing:    'rgba(0,0,0,0.12)',
    circleTick:    'rgba(0,0,0,0.15)',
    selIdle:       '#d8d8d8',
    resultBg:      'rgba(0,0,0,0.04)',
    resultBorder:  'rgba(0,0,0,0.10)',
    white:         '#111111',
    whiteFaint:    'rgba(0,0,0,0.02)',
    whiteMed:      'rgba(0,0,0,0.12)',
    whiteDim:      'rgba(0,0,0,0.22)',
    whiteFaint2:   'rgba(0,0,0,0.15)',
    vfGridLine:    '#eeeeee',
    vfGridLineMaj: '#e0e0e0',
    vfLabelDim:    '#cccccc',
    vfAxisLabel:   '#bbbbbb',
    vfDot:         '#aaaaaa',
    expLabel:      '#52525b',
    radiusLabel:   'rgba(0,0,0,0.35)',
    signZero:      '#111111',
    rightAngle:    'rgba(0,0,0,0.25)',
    centerDot:     'rgba(0,0,0,0.30)',
    fnLabel:       'rgba(0,0,0,0.30)',
  },
};

function getTC() {
  return _TC[document.documentElement.dataset.theme] ?? _TC.dark;
}

// Clears canvas and fills with the current theme background.
function clearCanvas(ctx, W, H) {
  const tc = getTC();
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = tc.bg;
  ctx.fillRect(0, 0, W, H);
}

function rgba(hex, a) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r},${g},${b},${a})`;
}