index.js

import { slideVars } from "./src/index.ts";
import "./src/logo.ts";

// Tab switching
document.querySelectorAll(".tab-button").forEach((button) => {
  button.addEventListener("click", () => {
    const tab = button.dataset.tab;

    // Update buttons
    document.querySelectorAll(".tab-button").forEach((b) => {
      b.classList.remove("active");
      b.setAttribute("aria-selected", "false");
    });
    button.classList.add("active");
    button.setAttribute("aria-selected", "true");

    // Update content
    document.querySelectorAll(".tab-content").forEach((c) => {
      c.classList.remove("active");
      c.setAttribute("hidden", "");
    });
    const activeTab = document.getElementById(`${tab}-tab`);
    activeTab.classList.add("active");
    activeTab.removeAttribute("hidden");

    // Switch demo after a small delay to ensure DOM is updated
    requestAnimationFrame(() => {
      setTimeout(() => switchDemo(tab), 10);
    });
  });
});

let currentInstance = null;

function switchDemo(tab) {
  // Destroy existing instance
  if (currentInstance) {
    slideVars.destroy();
  }

  if (tab === "auto") {
    // Auto-detection demo (with one manual just for fun)
    slideVars.init(
      {
        "--shadow-size": {
          type: "slider",
          min: 3,
          max: 30,
          default: 10,
          unit: "px",
        },
      },
      {
        auto: true,
        filterVariables: ["--arc-"],
      }
    );
  } else {
    // Manual configuration demo
    slideVars.init({
      "--width": {
        type: "slider",
        min: 50,
        max: 400,
        default: 100,
        unit: "px",
        scope: "#manual-demo",
      },
      "--height": {
        type: "slider",
        min: 50,
        max: 400,
        default: 100,
        unit: "px",
        scope: "#manual-demo",
      },
      "--bg": {
        type: "color",
        default: "#667eea",
        scope: "#manual-demo",
      },
      "--radius": {
        type: "slider",
        min: 0,
        max: 200,
        default: 0,
        unit: "px",
        scope: "#manual-demo",
      },
    });
  }
}

// Initialize with auto-detection
switchDemo("auto");

// Update live CSS values
function updateLiveValues() {
  const liveValues = document.querySelectorAll(".live-value");

  liveValues.forEach((span) => {
    const varName = span.dataset.var;
    if (varName) {
      // Try to read from the appropriate scope
      let value = "";

      // Check if variable is in manual demo
      if (!value) {
        const manualDemo = document.getElementById("manual-demo");
        if (manualDemo) {
          value = getComputedStyle(manualDemo).getPropertyValue(varName).trim();
        }
      }

      // Fall back to :root / body
      if (!value) {
        value = getComputedStyle(document.documentElement)
          .getPropertyValue(varName)
          .trim();
      }

      span.textContent = value || "inherit";
    }
  });
}

// Update on initialization
setTimeout(updateLiveValues, 100);

// Watch for style changes on body element
const observer = new MutationObserver(() => {
  updateLiveValues();
});

observer.observe(document.body, {
  attributes: true,
  attributeFilter: ["style"],
});

// Also update periodically as a fallback
setInterval(updateLiveValues, 200);