export interface RGB {
  r: number;
  g: number;
  b: number;
}

export interface SkyGradient {
  zenith: RGB;
  upper: RGB;
  lower: RGB;
  horizon: RGB;
}

export interface SunPosition {
  /** Degrees above horizon: 0 at horizon, ~90 at zenith */
  altitude: number;
  /** Compass bearing: 0=N, 90=E, 180=S, 270=W */
  azimuth: number;
  /** Daytime progress: 0=sunrise, 0.5=solar noon, 1=sunset. -1 when nighttime */
  progress: number;
}

export interface WeatherInfo {
  icon: string | null;
  main: string | null;
  description: string | null;
  temp: number | null;
}

export interface PhaseInfo {
  now: number;
  sunrise: number | null;
  sunset: number | null;
  phaseIndex: number;
  nextPhaseIndex: number;
  /** Interpolation factor 0-1 within the current phase */
  t: number;
  isDaytime: boolean;
  sun: SunPosition;
  weather: WeatherInfo;
}

export interface WeatherCurrent {
  main: string;
  description: string;
  icon: string;
  temp: number;
}

export interface StoreState {
  location: {
    lastFetched: number | null;
    lat: number | null;
    lng: number | null;
    country: string | null;
  };
  weather: {
    lastFetched: number | null;
    units: string | null;
    current: WeatherCurrent | null;
    sunrise: number | null;
    sunset: number | null;
  };
}

export interface LiveWindowState {
  /** Persisted to localStorage — API cache data */
  store: StoreState;
  /** Recomputed each update cycle from store + current time */
  computed: {
    phase: PhaseInfo;
  };
  /** Written by components during update(), read by downstream components */
  ref: {
    currentGradient?: SkyGradient;
  };
  /** Derived from web component attributes each cycle */
  attrs: {
    use12Hour: boolean;
    hideClock: boolean;
    hideWeatherText: boolean;
    bgColor: RGB;
    resolvedUnits: string;
  };
}

export interface SceneComponent {
  /** Create DOM elements inside the provided container */
  mount(container: HTMLElement): void;
  /** Called by the orchestrator at the component's update cadence */
  update(state: LiveWindowState): void;
  /** Tear down DOM and release resources */
  destroy(): void;
}

import type { RGB, SkyGradient } from "../types";

export type { RGB, SkyGradient } from "../types";

interface SkyPhase {
  name: string;
  gradient: SkyGradient;
}

// 16 sky phases ordered chronologically from midnight.
// Each defines a 4-stop vertical gradient: zenith (top) → horizon (bottom).
export const SKY_PHASES: SkyPhase[] = [
  // ... (copy all 16 phases exactly from layers/gradient.ts)
];

const MIN30 = 30 * 60_000;
const MIN60 = 60 * 60_000;
const MIN90 = 90 * 60_000;

export function getDefaultSunTimes(): { sunrise: number; sunset: number } {
  // ... (copy exactly from layers/gradient.ts)
}

export function calculatePhaseTimestamps(sunrise: number, sunset: number): number[] {
  // ... (copy exactly from layers/gradient.ts)
}

function blendChannel(a: number, b: number, t: number): number {
  return Math.round(a + (b - a) * t);
}

function blendColor(a: RGB, b: RGB, t: number): RGB {
  return {
    r: blendChannel(a.r, b.r, t),
    g: blendChannel(a.g, b.g, t),
    b: blendChannel(a.b, b.b, t),
  };
}

export function blendGradient(a: SkyGradient, b: SkyGradient, t: number): SkyGradient {
  // ... (copy exactly from layers/gradient.ts)
}

export function getCurrentSkyGradient(now: number, sunrise: number | null, sunset: number | null): SkyGradient {
  // ... (copy exactly from layers/gradient.ts)
}

// OLD
import { relativeLuminance, contrastRatio, getReadableColor, parseHexColor, parseComputedColor } from "../color";
// NEW
import { relativeLuminance, contrastRatio, getReadableColor, parseHexColor, parseComputedColor } from "../utils/color";

// OLD
import { buildPhaseInfo, calculateSunPosition } from "../phase-info";
// NEW
import { buildPhaseInfo, calculateSunPosition } from "../utils/phase";

// OLD
import {
  SKY_PHASES,
  calculatePhaseTimestamps,
  getDefaultSunTimes,
  blendGradient,
  getCurrentSkyGradient,
} from "../layers/gradient";
// NEW
import {
  SKY_PHASES,
  calculatePhaseTimestamps,
  getDefaultSunTimes,
  blendGradient,
  getCurrentSkyGradient,
} from "../utils/sky-gradient";

import { describe, it, expect, beforeEach } from "vitest";
import { GradientLayer } from "../../../components/sky/GradientLayer";
import type { LiveWindowState } from "../../../types";
import { buildPhaseInfo } from "../../../utils/phase";
import { DEFAULT_STATE } from "../../../state";

function makeState(overrides?: Partial<LiveWindowState>): LiveWindowState {
  const store = overrides?.store ?? DEFAULT_STATE;
  const today = new Date();
  today.setHours(12, 0, 0, 0);
  return {
    store,
    computed: { phase: buildPhaseInfo(store, today.getTime()) },
    ref: {},
    attrs: {
      use12Hour: false,
      hideClock: false,
      hideWeatherText: false,
      bgColor: { r: 0, g: 0, b: 0 },
      resolvedUnits: "metric",
    },
    ...overrides,
  };
}

describe("GradientLayer", () => {
  let layer: GradientLayer;
  let container: HTMLElement;

  beforeEach(() => {
    layer = new GradientLayer();
    container = document.createElement("div");
    layer.mount(container);
  });

  it("sets sky-layer class on mount", () => {
    expect(container.className).toBe("sky-layer");
  });

  it("sets background gradient on update", () => {
    const state = makeState();
    layer.update(state);
    expect(container.style.background).toContain("linear-gradient");
  });

  it("writes currentGradient to state.ref", () => {
    const state = makeState();
    layer.update(state);
    expect(state.ref.currentGradient).toBeDefined();
    expect(state.ref.currentGradient!.zenith).toBeDefined();
    expect(state.ref.currentGradient!.horizon).toBeDefined();
  });

  it("clears element on destroy", () => {
    const state = makeState();
    layer.update(state);
    layer.destroy();
    expect(container.innerHTML).toBe("");
  });
});

import type { SceneComponent, LiveWindowState, SkyGradient } from "../../types";
import { getCurrentSkyGradient } from "../../utils/sky-gradient";

export class GradientLayer implements SceneComponent {
  private el: HTMLElement | null = null;

  mount(container: HTMLElement): void {
    this.el = container;
    this.el.className = "sky-layer";
  }

  update(state: LiveWindowState): void {
    const { phase } = state.computed;
    const gradient = getCurrentSkyGradient(phase.now, phase.sunrise, phase.sunset);
    state.ref.currentGradient = gradient;

    if (!this.el) return;
    const { zenith, upper, lower, horizon } = gradient;
    this.el.style.background = `linear-gradient(180deg, rgb(${zenith.r},${zenith.g},${zenith.b}), rgb(${upper.r},${upper.g},${upper.b}), rgb(${lower.r},${lower.g},${lower.b}), rgb(${horizon.r},${horizon.g},${horizon.b}))`;
  }

  destroy(): void {
    if (this.el) this.el.innerHTML = "";
    this.el = null;
  }
}

import type { SceneComponent, LiveWindowState } from "../../types";

export const ICON_WEATHER_MAP: Record<string, string[]> = {
  "02d": ["cloudSm"],
  "02n": ["cloudSm"],
  "03d": ["cloudSm", "cloudMd"],
  "03n": ["cloudSm", "cloudMd"],
  "04d": ["cloudSm", "cloudMd", "cloudLg"],
  "04n": ["cloudSm", "cloudMd", "cloudLg"],
  "09d": ["cloudMd", "lightRain"],
  "09n": ["cloudMd", "lightRain"],
  "10d": ["cloudMd", "cloudLg", "rain"],
  "10n": ["cloudMd", "cloudLg", "rain"],
  "11d": ["cloudSm", "cloudMd", "cloudLg", "thunderstorm"],
  "11n": ["cloudSm", "cloudMd", "cloudLg", "thunderstorm"],
  "13d": ["snow"],
  "13n": ["snow"],
  "50d": ["mist"],
  "50n": ["mist"],
};

export class WeatherLayer implements SceneComponent {
  private el: HTMLElement | null = null;

  mount(container: HTMLElement): void {
    this.el = container;
    this.el.className = "sky-layer weather";
  }

  update(state: LiveWindowState): void {
    if (!this.el) return;
    const icon = state.computed.phase.weather.icon;
    this.el.className = "sky-layer weather" + (icon ? ` weather-${icon}` : "");

    if (!icon) {
      this.el.innerHTML = "";
      return;
    }

    const effects = ICON_WEATHER_MAP[icon] ?? [];
    const has = (k: string) => effects.includes(k);
    const showDroplets = has("lightRain") || has("rain") || has("thunderstorm") || has("snow");

    let html = "";
    if (has("cloudLg")) html += '<div class="cloud cloud-lg"></div>';
    if (has("cloudMd")) html += '<div class="cloud cloud-md"></div>';
    if (has("thunderstorm")) html += '<div class="lightning"></div>';
    if (has("cloudSm")) html += '<div class="cloud cloud-sm"></div>';
    if (has("mist")) {
      html += '<div class="mist mist-lg"></div><div class="mist mist-md"></div><div class="mist mist-sm"></div>';
    }
    if (showDroplets) {
      html += '<div class="droplets">';
      for (let h = 0; h < 2; h++) {
        html += '<div class="droplets-half">';
        for (let i = 0; i < 6; i++) {
          html += `<div class="droplet-row droplet-row-${i + 1}">`;
          for (let j = 0; j < 6; j++) {
            html += `<div class="droplet droplet-${j + 1}"></div>`;
          }
          html += "</div>";
        }
        html += "</div>";
      }
      html += "</div>";
    }
    if (has("snow")) {
      html += '<div class="snow-sill">';
      for (let i = 1; i <= 6; i++) {
        html += `<div class="snow-mound snow-mound-${i}"></div>`;
      }
      html += "</div>";
    }
    this.el.innerHTML = html;
  }

  destroy(): void {
    if (this.el) this.el.innerHTML = "";
    this.el = null;
  }
}

import { describe, it, expect, beforeEach } from "vitest";
import { WeatherLayer, ICON_WEATHER_MAP } from "../../components/sky/WeatherLayer";
import type { LiveWindowState } from "../../types";
import { DEFAULT_STATE } from "../../state";
import { buildPhaseInfo } from "../../utils/phase";

function makeState(icon: string | null): LiveWindowState {
  const store = {
    ...DEFAULT_STATE,
    weather: {
      ...DEFAULT_STATE.weather,
      current: icon ? { main: "Test", description: "test", icon, temp: 20 } : null,
    },
  };
  return {
    store,
    computed: { phase: buildPhaseInfo(store, Date.now()) },
    ref: {},
    attrs: {
      use12Hour: false,
      hideClock: false,
      hideWeatherText: false,
      bgColor: { r: 0, g: 0, b: 0 },
      resolvedUnits: "metric",
    },
  };
}

describe("ICON_WEATHER_MAP", () => {
  it("maps all expected icon codes", () => {
    const expectedCodes = [
      "02d", "02n", "03d", "03n", "04d", "04n", "09d", "09n", "10d", "10n", "11d", "11n", "13d", "13n", "50d", "50n",
    ];
    for (const code of expectedCodes) {
      expect(ICON_WEATHER_MAP[code]).toBeDefined();
    }
  });
});

describe("WeatherLayer", () => {
  let layer: WeatherLayer;
  let container: HTMLElement;

  beforeEach(() => {
    layer = new WeatherLayer();
    container = document.createElement("div");
    layer.mount(container);
  });

  it("renders nothing when icon is null", () => {
    layer.update(makeState(null));
    expect(container.innerHTML).toBe("");
  });

  it("renders clouds for partly cloudy (02d)", () => {
    layer.update(makeState("02d"));
    expect(container.querySelector(".cloud-sm")).toBeTruthy();
  });

  it("renders droplets for rain (10d)", () => {
    layer.update(makeState("10d"));
    expect(container.querySelector(".droplets")).toBeTruthy();
    expect(container.querySelector(".cloud-lg")).toBeTruthy();
  });

  it("renders lightning for thunderstorm (11d)", () => {
    layer.update(makeState("11d"));
    expect(container.querySelector(".lightning")).toBeTruthy();
  });

  it("renders mist layers for mist (50d)", () => {
    layer.update(makeState("50d"));
    expect(container.querySelector(".mist-lg")).toBeTruthy();
    expect(container.querySelector(".mist-md")).toBeTruthy();
    expect(container.querySelector(".mist-sm")).toBeTruthy();
  });

  it("renders snow mounds for snow (13d)", () => {
    layer.update(makeState("13d"));
    expect(container.querySelector(".snow-sill")).toBeTruthy();
    expect(container.querySelector(".droplets")).toBeTruthy();
  });

  it("cleans up on destroy", () => {
    layer.update(makeState("10d"));
    layer.destroy();
    expect(container.innerHTML).toBe("");
  });
});

import { describe, it, expect, beforeEach } from "vitest";
import { SkyComponent } from "../../components/SkyComponent";
import type { LiveWindowState } from "../../types";
import { DEFAULT_STATE } from "../../state";
import { buildPhaseInfo } from "../../utils/phase";

function makeState(): LiveWindowState {
  const today = new Date();
  today.setHours(12, 0, 0, 0);
  return {
    store: DEFAULT_STATE,
    computed: { phase: buildPhaseInfo(DEFAULT_STATE, today.getTime()) },
    ref: {},
    attrs: {
      use12Hour: false,
      hideClock: false,
      hideWeatherText: false,
      bgColor: { r: 0, g: 0, b: 0 },
      resolvedUnits: "metric",
    },
  };
}

describe("SkyComponent", () => {
  let sky: SkyComponent;
  let container: HTMLElement;

  beforeEach(() => {
    sky = new SkyComponent();
    container = document.createElement("div");
    sky.mount(container);
  });

  it("sets sky class on container", () => {
    expect(container.className).toBe("sky");
  });

  it("mounts child layers as divs inside container", () => {
    expect(container.children.length).toBe(2);
  });

  it("populates state.ref.currentGradient after update", () => {
    const state = makeState();
    sky.update(state);
    expect(state.ref.currentGradient).toBeDefined();
  });

  it("cleans up children on destroy", () => {
    const state = makeState();
    sky.update(state);
    sky.destroy();
    // After destroy, child layers have cleared their elements
    for (const child of container.children) {
      expect((child as HTMLElement).innerHTML).toBe("");
    }
  });
});

import type { SceneComponent, LiveWindowState } from "../types";
import { GradientLayer } from "./sky/GradientLayer";
import { WeatherLayer } from "./sky/WeatherLayer";

export class SkyComponent implements SceneComponent {
  private children: SceneComponent[] = [new GradientLayer(), new WeatherLayer()];

  mount(container: HTMLElement): void {
    container.className = "sky";
    for (const child of this.children) {
      const div = document.createElement("div");
      container.appendChild(div);
      child.mount(div);
    }
  }

  update(state: LiveWindowState): void {
    for (const child of this.children) child.update(state);
  }

  destroy(): void {
    for (const child of this.children) child.destroy();
  }
}

import { describe, it, expect, beforeEach } from "vitest";
import { ClockComponent } from "../../components/ClockComponent";
import type { LiveWindowState } from "../../types";
import { DEFAULT_STATE } from "../../state";
import { buildPhaseInfo } from "../../utils/phase";

function makeState(use12Hour = false): LiveWindowState {
  return {
    store: DEFAULT_STATE,
    computed: { phase: buildPhaseInfo(DEFAULT_STATE, Date.now()) },
    ref: {},
    attrs: {
      use12Hour,
      hideClock: false,
      hideWeatherText: false,
      bgColor: { r: 0, g: 0, b: 0 },
      resolvedUnits: "metric",
    },
  };
}

describe("ClockComponent", () => {
  let clock: ClockComponent;
  let container: HTMLElement;

  beforeEach(() => {
    clock = new ClockComponent();
    container = document.createElement("div");
    clock.mount(container);
  });

  it("creates clock HTML structure on mount", () => {
    expect(container.querySelector(".clock")).toBeTruthy();
    expect(container.querySelector(".clock-hour")).toBeTruthy();
    expect(container.querySelector(".clock-minute")).toBeTruthy();
    expect(container.querySelector(".clock-ampm")).toBeTruthy();
  });

  it("updates time display on update", () => {
    clock.update(makeState());
    const hourEl = container.querySelector(".clock-hour") as HTMLElement;
    const minuteEl = container.querySelector(".clock-minute") as HTMLElement;
    expect(hourEl.textContent).toBeTruthy();
    expect(minuteEl.textContent).toBeTruthy();
  });

  it("hides ampm when in 24-hour mode", () => {
    clock.update(makeState(false));
    const ampmEl = container.querySelector(".clock-ampm") as HTMLElement;
    expect(ampmEl.hidden).toBe(true);
  });

  it("shows ampm when in 12-hour mode", () => {
    clock.update(makeState(true));
    const ampmEl = container.querySelector(".clock-ampm") as HTMLElement;
    expect(ampmEl.hidden).toBe(false);
  });

  it("respects hideClock attr", () => {
    const state = makeState();
    state.attrs.hideClock = true;
    clock.update(state);
    const clockEl = container.querySelector(".clock") as HTMLElement;
    expect(clockEl.hidden).toBe(true);
  });

  it("cleans up on destroy", () => {
    clock.update(makeState());
    clock.destroy();
    expect(container.innerHTML).toBe("");
  });

  it("returns hour and minute from lastTick after update", () => {
    clock.update(makeState());
    const tick = clock.lastTick;
    expect(tick).toBeDefined();
    expect(tick!.hour).toBeGreaterThanOrEqual(0);
    expect(tick!.hour).toBeLessThan(24);
    expect(tick!.minute).toBeGreaterThanOrEqual(0);
    expect(tick!.minute).toBeLessThan(60);
  });
});

import type { SceneComponent, LiveWindowState } from "../types";

export class ClockComponent implements SceneComponent {
  private clockEl: HTMLDivElement | null = null;
  private hourEl: HTMLSpanElement | null = null;
  private minuteEl: HTMLSpanElement | null = null;
  private ampmEl: HTMLSpanElement | null = null;
  private amEl: HTMLSpanElement | null = null;
  private pmEl: HTMLSpanElement | null = null;

  /** Exposed so the orchestrator can read the last rendered time for events */
  public lastTick: { hour: number; minute: number } | null = null;

  mount(container: HTMLElement): void {
    const clock = document.createElement("div");
    clock.className = "clock";
    clock.innerHTML = `
      <span class="clock-hour"></span>
      <span class="separator">:</span>
      <span class="clock-minute"></span>
      <span class="clock-ampm" hidden>
        <span class="ampm-am">AM</span>
        <span class="ampm-pm">PM</span>
      </span>
    `;
    container.appendChild(clock);

    this.clockEl = clock;
    this.hourEl = clock.querySelector(".clock-hour");
    this.minuteEl = clock.querySelector(".clock-minute");
    this.ampmEl = clock.querySelector(".clock-ampm");
    this.amEl = clock.querySelector(".ampm-am");
    this.pmEl = clock.querySelector(".ampm-pm");
  }

  update(state: LiveWindowState): void {
    if (!this.clockEl) return;

    this.clockEl.hidden = state.attrs.hideClock;

    const now = new Date();
    const raw = now.getHours();
    let h = raw;
    const m = now.getMinutes();
    const use12Hour = state.attrs.use12Hour;

    if (use12Hour) {
      h = raw % 12 || 12;
    }

    if (this.hourEl) this.hourEl.textContent = `${h < 10 ? "0" : ""}${h}`;
    if (this.minuteEl) this.minuteEl.textContent = `${m < 10 ? "0" : ""}${m}`;

    if (this.ampmEl) {
      this.ampmEl.hidden = !use12Hour;
      if (use12Hour) {
        const isPm = raw >= 12;
        this.amEl?.classList.toggle("active", !isPm);
        this.pmEl?.classList.toggle("active", isPm);
      }
    }

    this.lastTick = { hour: raw, minute: m };
  }

  destroy(): void {
    if (this.clockEl?.parentElement) {
      this.clockEl.parentElement.innerHTML = "";
    }
    this.clockEl = null;
    this.hourEl = null;
    this.minuteEl = null;
    this.ampmEl = null;
    this.amEl = null;
    this.pmEl = null;
    this.lastTick = null;
  }
}

import { describe, it, expect, beforeEach } from "vitest";
import { BlindsComponent } from "../../components/BlindsComponent";
import type { LiveWindowState } from "../../types";
import { DEFAULT_STATE } from "../../state";
import { buildPhaseInfo } from "../../utils/phase";

function makeState(): LiveWindowState {
  return {
    store: DEFAULT_STATE,
    computed: { phase: buildPhaseInfo(DEFAULT_STATE, Date.now()) },
    ref: {},
    attrs: {
      use12Hour: false,
      hideClock: false,
      hideWeatherText: false,
      bgColor: { r: 0, g: 0, b: 0 },
      resolvedUnits: "metric",
    },
  };
}

describe("BlindsComponent", () => {
  let blinds: BlindsComponent;
  let container: HTMLElement;

  beforeEach(() => {
    blinds = new BlindsComponent();
    container = document.createElement("div");
    blinds.mount(container);
  });

  it("creates blinds HTML structure on mount", () => {
    expect(container.querySelector(".blinds")).toBeTruthy();
    expect(container.querySelector(".blinds-string-left")).toBeTruthy();
    expect(container.querySelector(".blinds-string-right")).toBeTruthy();
  });

  it("renders slats on mount", () => {
    expect(container.querySelector(".slats")).toBeTruthy();
    expect(container.querySelector(".slat")).toBeTruthy();
  });

  it("cleans up on destroy", () => {
    blinds.destroy();
    expect(container.innerHTML).toBe("");
  });
});

import type { SceneComponent, LiveWindowState } from "../types";

const NUM_BLINDS = 20;

interface BlindsState {
  numBlindsCollapsed: number;
  blindsOpenDeg: number;
  blindsSkewDeg: number;
  skewDirection: number;
}

type AnimatableProp = keyof BlindsState;

export class BlindsComponent implements SceneComponent {
  private blindsEl: HTMLDivElement | null = null;
  private stringLeftEl: HTMLDivElement | null = null;
  private stringRightEl: HTMLDivElement | null = null;
  private containerEl: HTMLElement | null = null;

  private blindsState: BlindsState = {
    numBlindsCollapsed: 0,
    blindsOpenDeg: 20,
    blindsSkewDeg: 0,
    skewDirection: 0,
  };

  private animationStarted = false;

  mount(container: HTMLElement): void {
    this.containerEl = container;
    container.innerHTML = `
      <div class="blinds" style="--live-window-num-blinds: ${NUM_BLINDS}"></div>
      <div class="blinds-string blinds-string-left"></div>
      <div class="blinds-string blinds-string-right"></div>
    `;

    this.blindsEl = container.querySelector(".blinds");
    this.stringLeftEl = container.querySelector(".blinds-string-left");
    this.stringRightEl = container.querySelector(".blinds-string-right");

    this.renderBlinds();
  }

  update(_state: LiveWindowState): void {
    if (!this.animationStarted) {
      this.animationStarted = true;
      this.runAnimation();
    }
  }

  destroy(): void {
    if (this.containerEl) this.containerEl.innerHTML = "";
    this.containerEl = null;
    this.blindsEl = null;
    this.stringLeftEl = null;
    this.stringRightEl = null;
  }

  // -- Rendering --------------------------------------------------------------

  private renderBlinds(): void {
    if (!this.blindsEl) return;
    const state = this.blindsState;
    const numOpen = NUM_BLINDS - Math.round(state.numBlindsCollapsed);
    const numCollapsed = Math.round(state.numBlindsCollapsed);

    let slats = "";
    for (let i = 0; i < numOpen; i++) {
      slats += `<div class="slat slat-${i + 1}" style="transform:${this.getSkewAndRotateTransform(i)}"></div>`;
    }

    const skew = this.getSkewOnlyTransform();
    slats += `<div class="slat-collapse-group" style="transform:${skew}">`;
    for (let i = 0; i < numCollapsed; i++) {
      slats += '<div class="slat collapse"></div>';
    }
    slats += "</div>";

    slats += `<div class="slat-bar" style="transform:${skew}">`;
    slats += '<span class="string-marker string-marker-left"></span>';
    slats += '<span class="string-marker string-marker-right"></span>';
    slats += "</div>";

    this.blindsEl.innerHTML = `
      <div class="slats">${slats}</div>
      <div class="rod"></div>
    `;

    requestAnimationFrame(() =>
      requestAnimationFrame(() => this.updateStrings()),
    );
  }

  private updateStrings(): void {
    if (!this.containerEl) return;
    const win = this.containerEl.closest(".live-window");
    const ml = this.containerEl.querySelector(".string-marker-left");
    const mr = this.containerEl.querySelector(".string-marker-right");
    if (!win || !ml || !mr) return;

    const winTop = win.getBoundingClientRect().top;
    if (this.stringLeftEl) this.stringLeftEl.style.height = `${ml.getBoundingClientRect().top - winTop}px`;
    if (this.stringRightEl) this.stringRightEl.style.height = `${mr.getBoundingClientRect().top - winTop}px`;
  }

  // -- Animation --------------------------------------------------------------

  private runAnimation(): void {
    this.stepAnimation(
      { blindsOpenDeg: { targetValue: 75, step: 5 } },
      150,
    ).then(() => {
      this.stepAnimation({
        blindsOpenDeg: { targetValue: 80, step: 1 },
        numBlindsCollapsed: { targetValue: NUM_BLINDS * 0.7, step: 1 },
        blindsSkewDeg: { targetValue: 5, step: 1 },
        skewDirection: { targetValue: -1, step: 1 },
      });
    });
  }

  private stepAnimation(
    targets: Partial<Record<AnimatableProp, { targetValue: number; step: number }>>,
    speedMs = 100,
  ): Promise<void> {
    const remaining = new Map(
      Object.entries(targets) as [string, { targetValue: number; step: number }][],
    );
    return new Promise<void>((resolve) => {
      const interval = window.setInterval(() => {
        const size = remaining.size;
        let finished = 0;

        for (const [prop, anim] of remaining) {
          const cur = (this.blindsState as unknown as Record<string, number>)[prop];
          const dir = cur < anim.targetValue ? 1 : -1;
          const next = cur + anim.step * dir;
          (this.blindsState as unknown as Record<string, number>)[prop] = next;

          const reached = dir === -1 ? next <= anim.targetValue : next >= anim.targetValue;
          if (reached) {
            finished++;
            remaining.delete(prop);
          }
        }

        this.renderBlinds();

        if (finished >= size) {
          clearInterval(interval);
          resolve();
        }
      }, speedMs);
    });
  }

  // -- Transform helpers ------------------------------------------------------

  private getSkewAndRotateTransform(blindIndex: number): string {
    const state = this.blindsState;
    const currBlind = NUM_BLINDS - blindIndex;
    const numOpen = NUM_BLINDS - state.numBlindsCollapsed;
    const skewSteps = numOpen > 0 ? state.blindsSkewDeg / numOpen : 0;

    let skewDeg = 0;
    if (state.skewDirection !== 0 && state.blindsSkewDeg >= 0) {
      skewDeg = state.blindsSkewDeg - (currBlind - state.numBlindsCollapsed - 1) * skewSteps;
    }

    const rot = state.blindsOpenDeg;
    return `rotateX(${rot}deg) skewY(${skewDeg * state.skewDirection}deg)`;
  }

  private getSkewOnlyTransform(): string {
    const state = this.blindsState;
    let skewDeg = 0;
    if (state.skewDirection !== 0 && state.blindsSkewDeg >= 0) {
      skewDeg = state.blindsSkewDeg / 2;
    }
    return `skewY(${skewDeg * state.skewDirection}deg)`;
  }
}