Function createLegend

src/components/createLegend.ts:49–222

(
  container: HTMLElement,
  position: LegendPosition = 'right'
)

};

export function createLegend(
  container: HTMLElement,
  position: LegendPosition = 'right'
): Legend {
  const computedPosition = getComputedStyle(container).position;
  const didSetRelative = computedPosition === 'static';
  const previousInlinePosition = didSetRelative ? container.style.position : null;

  if (didSetRelative) {
    container.style.position = 'relative';
  }

  const root = document.createElement('div');
  root.style.position = 'absolute';
  root.style.pointerEvents = 'none';
  root.style.userSelect = 'none';
  root.style.boxSizing = 'border-box';

  // Theme-driven styling (set/update in update()).
  root.style.padding = '8px';
  root.style.borderRadius = '8px';
  root.style.borderStyle = 'solid';
  root.style.borderWidth = '1px';
  root.style.maxHeight = 'calc(100% - 16px)';
  root.style.overflow = 'auto';

  const list = document.createElement('div');
  list.style.display = 'flex';
  list.style.gap = '8px';
  root.appendChild(list);

  const applyPositionStyles = (p: LegendPosition): void => {
    // Clear positional styles first so changing position is safe/idempotent.
    root.style.top = '';
    root.style.right = '';
    root.style.bottom = '';
    root.style.left = '';
    root.style.maxWidth = '';

    list.style.flexDirection = '';
    list.style.flexWrap = '';
    list.style.alignItems = '';

    switch (p) {
      case 'right': {
        root.style.top = '8px';
        root.style.right = '8px';
        root.style.maxWidth = '40%';

        list.style.flexDirection = 'column';
        list.style.flexWrap = 'nowrap';
        list.style.alignItems = 'flex-start';
        return;
      }
      case 'left': {
        root.style.top = '8px';
        root.style.left = '8px';
        root.style.maxWidth = '40%';