tailwind-styled-v4 1.0.1 → 5.0.0

package/dist/devtools.js

@@ -0,0 +1,1064 @@
+import './chunk-VZEJV27B.js';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+function parseDataTw(dataTw) {
+  if (!dataTw) return { name: "Unknown", classes: [] };
+  const colonIdx = dataTw.indexOf(":");
+  if (colonIdx === -1) return { name: dataTw, classes: [] };
+  const name = dataTw.slice(0, colonIdx);
+  const classes = dataTw.slice(colonIdx + 1).split(/\s+/).filter(Boolean);
+  return { name, classes };
+}
+function parseVariantAttr(v) {
+  if (!v) return {};
+  try {
+    return JSON.parse(v);
+  } catch {
+    return {};
+  }
+}
+function findNearestTwElement(el) {
+  let cur = el;
+  while (cur) {
+    if (cur.dataset?.tw) return cur;
+    cur = cur.parentElement;
+  }
+  return null;
+}
+function getAtomicMap(classes) {
+  const registry = window.__TW_REGISTRY__;
+  if (!registry) return {};
+  const map = {};
+  for (const cls of classes) {
+    if (registry[cls]) map[cls] = registry[cls];
+  }
+  return map;
+}
+function getActiveStates(el) {
+  const states = {};
+  for (const attr of el.attributes) {
+    if (attr.name.startsWith("data-")) {
+      states[attr.name.replace("data-", "")] = attr.value;
+    }
+  }
+  return states;
+}
+function getStateNames(el) {
+  const registry = window.__TW_STATE_REGISTRY__;
+  if (!registry) return [];
+  for (const [id, entry] of registry) {
+    if (el.classList.contains(id)) return entry.states;
+  }
+  return [];
+}
+function getContainerBps(el) {
+  const registry = window.__TW_CONTAINER_REGISTRY__;
+  if (!registry) return [];
+  for (const [id, entry] of registry) {
+    if (el.classList.contains(id)) {
+      return entry.breakpoints.map((bp) => bp.minWidth);
+    }
+  }
+  return [];
+}
+function InspectorPanel({
+  inspected,
+  position: _position,
+  pinned: _pinned
+}) {
+  if (!inspected) {
+    return React.createElement(
+      "div",
+      { style: S.emptyPanel },
+      React.createElement("span", { style: { opacity: 0.4 } }, "Hover an element to inspect")
+    );
+  }
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    // Variant props
+    Object.keys(inspected.variantProps).length > 0 && React.createElement(
+      "div",
+      { style: S.section },
+      React.createElement("div", { style: S.sectionTitle }, "Variants"),
+      Object.entries(inspected.variantProps).map(
+        ([k, v]) => React.createElement(
+          "div",
+          { key: k, style: S.row },
+          React.createElement("span", { style: S.varKey }, k),
+          React.createElement("span", { style: S.varValue }, `"${v}"`)
+        )
+      )
+    ),
+    // Active states
+    Object.keys(inspected.activeStates).length > 0 && React.createElement(
+      "div",
+      { style: S.section },
+      React.createElement("div", { style: S.sectionTitle }, "Active Data Attrs"),
+      Object.entries(inspected.activeStates).map(
+        ([k, v]) => React.createElement(
+          "div",
+          { key: k, style: S.row },
+          React.createElement("code", { style: { ...S.varKey, color: "#f59e0b" } }, `data-${k}`),
+          React.createElement("span", { style: { ...S.varValue, color: "#34d399" } }, `"${v}"`)
+        )
+      )
+    ),
+    // State names
+    inspected.stateNames.length > 0 && React.createElement(
+      "div",
+      { style: S.section },
+      React.createElement("div", { style: S.sectionTitle }, "Reactive States"),
+      React.createElement(
+        "div",
+        { style: S.classGrid },
+        inspected.stateNames.map(
+          (s) => React.createElement(
+            "code",
+            {
+              key: s,
+              style: {
+                ...S.classChip,
+                background: inspected.activeStates[s] === "true" ? "#065f46" : "#18181b",
+                borderColor: inspected.activeStates[s] === "true" ? "#34d399" : "#27272a"
+              }
+            },
+            s
+          )
+        )
+      )
+    ),
+    // Container breakpoints
+    inspected.containerBps.length > 0 && React.createElement(
+      "div",
+      { style: S.section },
+      React.createElement("div", { style: S.sectionTitle }, "Container Breakpoints"),
+      React.createElement(
+        "div",
+        { style: S.classGrid },
+        inspected.containerBps.map(
+          (bp) => React.createElement(
+            "code",
+            { key: bp, style: { ...S.classChip, color: "#818cf8" } },
+            bp
+          )
+        )
+      )
+    ),
+    // Tailwind classes
+    inspected.twClasses.length > 0 && React.createElement(
+      "div",
+      { style: S.section },
+      React.createElement("div", { style: S.sectionTitle }, "Classes"),
+      React.createElement(
+        "div",
+        { style: S.classGrid },
+        inspected.twClasses.map(
+          (cls) => React.createElement(
+            "code",
+            { key: cls, style: S.classChip, title: inspected.atomicMap[cls] },
+            cls
+          )
+        )
+      )
+    ),
+    // Copy
+    React.createElement(
+      "button",
+      {
+        style: S.copyBtn,
+        onClick: () => {
+          navigator.clipboard?.writeText(
+            JSON.stringify(
+              {
+                component: inspected.componentName,
+                variants: inspected.variantProps,
+                states: inspected.activeStates,
+                classes: inspected.twClasses
+              },
+              null,
+              2
+            )
+          );
+        }
+      },
+      "Copy to clipboard"
+    )
+  );
+}
+function StatePanel() {
+  const [entries, setEntries] = useState([]);
+  useEffect(() => {
+    const refresh = () => {
+      const reg = window.__TW_STATE_REGISTRY__;
+      setEntries(reg ? Array.from(reg.values()) : []);
+    };
+    refresh();
+    const interval = setInterval(refresh, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  if (entries.length === 0) {
+    return React.createElement(
+      "div",
+      { style: S.emptyPanel },
+      React.createElement(
+        "span",
+        { style: { opacity: 0.4 } },
+        "No state-enabled components found."
+      ),
+      React.createElement("br", null),
+      React.createElement(
+        "span",
+        { style: { opacity: 0.3, fontSize: "11px" } },
+        'Use tw.button({ state: { active: "..." } }) to register.'
+      )
+    );
+  }
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    entries.map(
+      (entry) => React.createElement(
+        "div",
+        { key: entry.id, style: S.section },
+        React.createElement(
+          "div",
+          { style: S.sectionTitle },
+          React.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          React.createElement(
+            "span",
+            { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
+            entry.id
+          )
+        ),
+        React.createElement(
+          "div",
+          { style: S.classGrid },
+          entry.states.map(
+            (s) => React.createElement(
+              "code",
+              { key: s, style: { ...S.classChip, color: "#f59e0b" } },
+              `data-${s}`
+            )
+          )
+        ),
+        React.createElement(
+          "div",
+          { style: { ...S.row, marginTop: "4px" } },
+          React.createElement(
+            "span",
+            {
+              style: {
+                ...S.sectionTitle,
+                marginBottom: 0,
+                color: entry.cssInjected ? "#34d399" : "#ef4444"
+              }
+            },
+            entry.cssInjected ? "\u25CF CSS injected" : "\u25CB CSS pending"
+          )
+        )
+      )
+    )
+  );
+}
+function ContainerPanel() {
+  const [entries, setEntries] = useState([]);
+  useEffect(() => {
+    const refresh = () => {
+      const reg = window.__TW_CONTAINER_REGISTRY__;
+      setEntries(reg ? Array.from(reg.values()) : []);
+    };
+    refresh();
+    const interval = setInterval(refresh, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  if (entries.length === 0) {
+    return React.createElement(
+      "div",
+      { style: S.emptyPanel },
+      React.createElement(
+        "span",
+        { style: { opacity: 0.4 } },
+        "No container query components found."
+      ),
+      React.createElement("br", null),
+      React.createElement(
+        "span",
+        { style: { opacity: 0.3, fontSize: "11px" } },
+        'Use tw.div({ container: { md: "flex-row" } }) to register.'
+      )
+    );
+  }
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    entries.map(
+      (entry) => React.createElement(
+        "div",
+        { key: entry.id, style: S.section },
+        React.createElement(
+          "div",
+          { style: S.sectionTitle },
+          React.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          entry.containerName && React.createElement(
+            "span",
+            { style: { marginLeft: "6px", color: "#818cf8" } },
+            `[${entry.containerName}]`
+          ),
+          React.createElement(
+            "span",
+            { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
+            entry.id
+          )
+        ),
+        React.createElement(
+          "div",
+          null,
+          entry.breakpoints.map(
+            (bp, i) => React.createElement(
+              "div",
+              { key: i, style: { ...S.row, marginBottom: "2px" } },
+              React.createElement(
+                "code",
+                { style: { color: "#818cf8", fontSize: "11px" } },
+                `\u2265 ${bp.minWidth}`
+              ),
+              React.createElement(
+                "span",
+                { style: { color: "#6b7280", fontSize: "11px" } },
+                bp.classes
+              )
+            )
+          )
+        )
+      )
+    )
+  );
+}
+function TokensPanel() {
+  const [tokens, setTokens_] = useState({});
+  useEffect(() => {
+    const engine = window.__TW_TOKEN_ENGINE__;
+    if (!engine) return;
+    setTokens_(engine.getTokens());
+    const unsub = engine.subscribe((t) => setTokens_({ ...t }));
+    return unsub;
+  }, []);
+  const entries = Object.entries(tokens);
+  if (entries.length === 0) {
+    return React.createElement(
+      "div",
+      { style: S.emptyPanel },
+      React.createElement("span", { style: { opacity: 0.4 } }, "No live tokens registered."),
+      React.createElement("br", null),
+      React.createElement(
+        "span",
+        { style: { opacity: 0.3, fontSize: "11px" } },
+        'Use liveToken({ primary: "#3b82f6" }) to register tokens.'
+      )
+    );
+  }
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    React.createElement(
+      "div",
+      { style: { ...S.sectionTitle, padding: "8px 12px 4px", color: "#52525b" } },
+      "Click color to edit \xB7 Changes apply instantly"
+    ),
+    entries.map(([name, value]) => {
+      const isColor = value.startsWith("#") || value.startsWith("rgb") || value.startsWith("hsl");
+      return React.createElement(
+        "div",
+        { key: name, style: { ...S.row, padding: "6px 12px", borderBottom: "1px solid #18181b" } },
+        React.createElement(
+          "div",
+          { style: { display: "flex", alignItems: "center", gap: "8px" } },
+          isColor && React.createElement("div", {
+            style: {
+              width: "16px",
+              height: "16px",
+              borderRadius: "3px",
+              background: value,
+              border: "1px solid #27272a",
+              flexShrink: 0
+            }
+          }),
+          React.createElement("span", { style: { color: "#a1a1aa", fontSize: "12px" } }, name)
+        ),
+        isColor ? React.createElement("input", {
+          type: "color",
+          defaultValue: value.startsWith("#") ? value : "#000000",
+          style: {
+            width: "52px",
+            height: "22px",
+            border: "none",
+            background: "none",
+            cursor: "pointer"
+          },
+          onChange: (e) => {
+            const engine = window.__TW_TOKEN_ENGINE__;
+            if (engine) engine.setToken(name, e.target.value);
+          }
+        }) : React.createElement("input", {
+          type: "text",
+          defaultValue: value,
+          style: {
+            background: "#18181b",
+            border: "1px solid #27272a",
+            borderRadius: "3px",
+            color: "#e4e4e7",
+            fontSize: "11px",
+            padding: "2px 6px",
+            width: "100px",
+            fontFamily: "monospace"
+          },
+          onBlur: (e) => {
+            const engine = window.__TW_TOKEN_ENGINE__;
+            if (engine) engine.setToken(name, e.target.value);
+          }
+        })
+      );
+    })
+  );
+}
+function AnalyzerPanel() {
+  const [scanning, setScanning] = useState(false);
+  const [results, setResults] = useState(null);
+  const [engineMetrics, setEngineMetrics] = useState(null);
+  const [metricsFetching, setMetricsFetching] = useState(false);
+  const [metricsError, setMetricsError] = useState(null);
+  const loadEngineMetrics = useCallback(async () => {
+    setMetricsFetching(true);
+    setMetricsError(null);
+    try {
+      const res = await fetch("http://localhost:3000/metrics", { signal: AbortSignal.timeout(2e3) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setEngineMetrics(data);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setMetricsError(
+        msg.includes("Failed to fetch") || msg.includes("NetworkError") ? "Dashboard tidak berjalan. Jalankan: tw dashboard" : msg
+      );
+      setEngineMetrics(null);
+    } finally {
+      setMetricsFetching(false);
+    }
+  }, []);
+  const runScan = useCallback(() => {
+    setScanning(true);
+    setTimeout(() => {
+      const twEls = document.querySelectorAll("[data-tw]");
+      const classMap = /* @__PURE__ */ new Map();
+      for (const el of twEls) {
+        const { name, classes } = (() => {
+          const dTw = el.dataset.tw ?? null;
+          if (!dTw) return { name: "?", classes: [] };
+          const ci = dTw.indexOf(":");
+          return {
+            name: ci >= 0 ? dTw.slice(0, ci) : dTw,
+            classes: ci >= 0 ? dTw.slice(ci + 1).split(/\s+/).filter(Boolean) : []
+          };
+        })();
+        const key = classes.sort().join(" ");
+        if (!classMap.has(key)) classMap.set(key, []);
+        classMap.get(key).push(name);
+      }
+      const duplicates = Array.from(classMap.entries()).filter(([, names]) => names.length > 1).map(([pattern, names]) => ({ pattern, count: names.length, names })).sort((a, b) => b.count - a.count).slice(0, 10);
+      const stateReg = window.__TW_STATE_REGISTRY__;
+      const containerReg = window.__TW_CONTAINER_REGISTRY__;
+      const tokenEngine = window.__TW_TOKEN_ENGINE__;
+      setResults({
+        duplicates,
+        stateCount: stateReg?.size ?? 0,
+        containerCount: containerReg?.size ?? 0,
+        tokenCount: Object.keys(tokenEngine?.getTokens?.() ?? {}).length
+      });
+      setScanning(false);
+    }, 100);
+  }, []);
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    React.createElement(
+      "div",
+      { style: { padding: "10px 12px" } },
+      // ── DOM Scan ──────────────────────────────────────────────────────────
+      React.createElement(
+        "button",
+        {
+          style: { ...S.copyBtn, borderTop: "none", color: "#60a5fa", fontWeight: "600" },
+          onClick: runScan,
+          disabled: scanning
+        },
+        scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
+      ),
+      // ── Engine Metrics (dari dashboard) ───────────────────────────────────
+      React.createElement(
+        "div",
+        { style: { ...S.section, marginTop: "8px" } },
+        React.createElement(
+          "div",
+          { style: { ...S.sectionTitle, marginBottom: "6px" } },
+          "\u26A1 Engine Metrics"
+        ),
+        engineMetrics ? React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Build"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              engineMetrics.buildMs != null ? `${engineMetrics.buildMs}ms` : "\u2014"
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Classes"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              String(engineMetrics.classCount ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Files"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              String(engineMetrics.fileCount ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Mode"),
+            React.createElement(
+              "span",
+              { style: { color: "#a1a1aa", fontSize: "11px" } },
+              String(engineMetrics.mode ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "button",
+            {
+              style: {
+                ...S.copyBtn,
+                borderTop: "none",
+                color: "#52525b",
+                fontSize: "10px",
+                padding: "4px 0"
+              },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            "\u21BB Refresh"
+          )
+        ) : metricsError ? React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            { style: { color: "#f87171", fontSize: "11px", marginBottom: "6px" } },
+            metricsError
+          ),
+          React.createElement(
+            "button",
+            {
+              style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            metricsFetching ? "Connecting..." : "\u21BB Retry"
+          )
+        ) : React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            {
+              style: { color: "#71717a", fontSize: "11px", lineHeight: 1.6, marginBottom: "6px" }
+            },
+            "Rust analyzer hanya tersedia via CLI atau dashboard.",
+            React.createElement("br", null),
+            React.createElement(
+              "code",
+              { style: { color: "#52525b", fontSize: "10px" } },
+              "tw analyze . | tw dashboard"
+            )
+          ),
+          React.createElement(
+            "button",
+            {
+              style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            metricsFetching ? "Connecting..." : "\u26A1 Load from Dashboard"
+          )
+        )
+      ),
+      // ── DOM Scan Results ──────────────────────────────────────────────────
+      results && React.createElement(
+        "div",
+        null,
+        React.createElement(
+          "div",
+          { style: S.section },
+          React.createElement("div", { style: S.sectionTitle }, "Summary"),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "State components"),
+            React.createElement("span", { style: S.varValue }, String(results.stateCount))
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Container components"),
+            React.createElement("span", { style: S.varValue }, String(results.containerCount))
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Live tokens"),
+            React.createElement("span", { style: S.varValue }, String(results.tokenCount))
+          )
+        ),
+        results.duplicates.length > 0 ? React.createElement(
+          "div",
+          { style: S.section },
+          React.createElement("div", { style: S.sectionTitle }, "Duplicate Class Sets"),
+          results.duplicates.map(
+            (d, i) => React.createElement(
+              "div",
+              { key: i, style: { marginBottom: "8px" } },
+              React.createElement(
+                "div",
+                { style: { color: "#f59e0b", fontSize: "11px", marginBottom: "2px" } },
+                d.names.join(", ")
+              ),
+              React.createElement(
+                "code",
+                {
+                  style: {
+                    color: "#52525b",
+                    fontSize: "10px",
+                    wordBreak: "break-all"
+                  }
+                },
+                d.pattern.split(" ").slice(0, 8).join(" ") + (d.pattern.split(" ").length > 8 ? "..." : "")
+              )
+            )
+          )
+        ) : React.createElement(
+          "div",
+          { style: S.section },
+          React.createElement(
+            "span",
+            { style: { color: "#34d399", fontSize: "12px" } },
+            "\u2713 No duplicate class sets in current DOM"
+          )
+        )
+      )
+    )
+  );
+}
+function TwDevTools() {
+  if (process.env.NODE_ENV === "production") return null;
+  const [state, setState] = useState({
+    open: false,
+    panel: "inspector",
+    pinned: false,
+    inspected: null,
+    position: { x: 0, y: 0 }
+  });
+  const overlayRef = useRef(null);
+  const isInspecting = state.open && state.panel === "inspector";
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.ctrlKey && e.shiftKey && e.key === "D") {
+        e.preventDefault();
+        setState((s) => ({ ...s, open: !s.open, inspected: null }));
+      }
+      if (e.key === "Escape")
+        setState((s) => ({ ...s, open: false, pinned: false, inspected: null }));
+      if (e.key === "1") setState((s) => s.open ? { ...s, panel: "inspector" } : s);
+      if (e.key === "2") setState((s) => s.open ? { ...s, panel: "state" } : s);
+      if (e.key === "3") setState((s) => s.open ? { ...s, panel: "container" } : s);
+      if (e.key === "4") setState((s) => s.open ? { ...s, panel: "tokens" } : s);
+      if (e.key === "5") setState((s) => s.open ? { ...s, panel: "analyzer" } : s);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const onMouseMove = useCallback(
+    (e) => {
+      if (!isInspecting || state.pinned) return;
+      const twEl = findNearestTwElement(e.target);
+      if (!twEl) {
+        setState((s) => ({ ...s, inspected: null, position: { x: e.clientX, y: e.clientY } }));
+        return;
+      }
+      const { name, classes } = parseDataTw(twEl.dataset.tw ?? null);
+      setState((s) => ({
+        ...s,
+        position: { x: e.clientX, y: e.clientY },
+        inspected: {
+          componentName: name,
+          element: twEl,
+          rect: twEl.getBoundingClientRect(),
+          twClasses: classes,
+          variantProps: parseVariantAttr(twEl.dataset.twVariants ?? null),
+          atomicMap: getAtomicMap(classes),
+          rawClassName: twEl.className,
+          stateNames: getStateNames(twEl),
+          activeStates: getActiveStates(twEl),
+          containerBps: getContainerBps(twEl)
+        }
+      }));
+    },
+    [isInspecting, state.pinned]
+  );
+  const onClick = useCallback(
+    (e) => {
+      if (!isInspecting) return;
+      if (overlayRef.current?.contains(e.target)) return;
+      setState((s) => ({ ...s, pinned: !s.pinned && !!s.inspected }));
+    },
+    [isInspecting]
+  );
+  useEffect(() => {
+    if (!isInspecting) return;
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("click", onClick);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("click", onClick);
+    };
+  }, [isInspecting, onMouseMove, onClick]);
+  if (!state.open) {
+    return React.createElement(
+      "button",
+      {
+        onClick: () => setState((s) => ({ ...s, open: true })),
+        style: S.toggleBtn,
+        title: "tailwind-styled-v4 DevTools (Ctrl+Shift+D)"
+      },
+      "\u{1F3A8}"
+    );
+  }
+  const PANELS = [
+    { id: "inspector", label: "Inspector", icon: "\u{1F50D}" },
+    { id: "state", label: "State", icon: "\u26A1" },
+    { id: "container", label: "Container", icon: "\u{1F4E6}" },
+    { id: "tokens", label: "Tokens", icon: "\u{1F3A8}" },
+    { id: "analyzer", label: "Analyzer", icon: "\u{1F4CA}" }
+  ];
+  return React.createElement(
+    "div",
+    { style: S.root },
+    // ── Element highlight (inspector only) ──────────────────────────────
+    isInspecting && state.inspected && React.createElement("div", {
+      style: {
+        ...S.highlight,
+        top: state.inspected.rect.top + window.scrollY,
+        left: state.inspected.rect.left + window.scrollX,
+        width: state.inspected.rect.width,
+        height: state.inspected.rect.height
+      }
+    }),
+    // ── Component name label ────────────────────────────────────────────
+    isInspecting && state.inspected && React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: state.inspected.rect.top + window.scrollY - 22,
+          left: state.inspected.rect.left + window.scrollX,
+          background: "#1e3a5f",
+          color: "#93c5fd",
+          fontSize: "11px",
+          padding: "2px 6px",
+          borderRadius: "3px 3px 0 0",
+          pointerEvents: "none",
+          zIndex: 2147483646,
+          fontFamily: "monospace"
+        }
+      },
+      state.inspected.componentName
+    ),
+    // ── Main DevTools panel ─────────────────────────────────────────────
+    React.createElement(
+      "div",
+      {
+        ref: overlayRef,
+        style: state.panel === "inspector" && state.inspected ? {
+          ...S.panel,
+          top: Math.min(state.position.y + 16, window.innerHeight - 460),
+          left: Math.min(state.position.x + 16, window.innerWidth - 320)
+        } : {
+          ...S.panel,
+          top: "auto",
+          bottom: "40px",
+          right: "12px",
+          left: "auto"
+        }
+      },
+      // Header
+      React.createElement(
+        "div",
+        { style: S.header },
+        React.createElement(
+          "span",
+          { style: S.componentName },
+          state.inspected && state.panel === "inspector" ? state.inspected.componentName : "tailwind-styled-v4"
+        ),
+        React.createElement(
+          "div",
+          { style: S.headerActions },
+          state.pinned && React.createElement("span", { style: S.pinBadge }, "\u{1F4CC}"),
+          React.createElement(
+            "button",
+            {
+              style: S.closeBtn,
+              onClick: () => setState((s) => ({ ...s, open: false, pinned: false, inspected: null }))
+            },
+            "\u2715"
+          )
+        )
+      ),
+      // Tab bar
+      React.createElement(
+        "div",
+        { style: S.tabBar },
+        PANELS.map(
+          (p) => React.createElement(
+            "button",
+            {
+              key: p.id,
+              style: {
+                ...S.tab,
+                background: state.panel === p.id ? "#18181b" : "none",
+                color: state.panel === p.id ? "#e4e4e7" : "#52525b",
+                borderBottom: state.panel === p.id ? "2px solid #3b82f6" : "2px solid transparent"
+              },
+              onClick: () => setState((s) => ({ ...s, panel: p.id })),
+              title: `${p.label} (${PANELS.findIndex((x) => x.id === p.id) + 1})`
+            },
+            `${p.icon} ${p.label}`
+          )
+        )
+      ),
+      // Panel content
+      state.panel === "inspector" && React.createElement(InspectorPanel, {
+        inspected: state.inspected,
+        position: state.position,
+        pinned: state.pinned
+      }),
+      state.panel === "state" && React.createElement(StatePanel, null),
+      state.panel === "container" && React.createElement(ContainerPanel, null),
+      state.panel === "tokens" && React.createElement(TokensPanel, null),
+      state.panel === "analyzer" && React.createElement(AnalyzerPanel, null)
+    ),
+    // ── Status bar ──────────────────────────────────────────────────────
+    React.createElement(
+      "div",
+      { style: S.statusBar },
+      React.createElement("span", null, "\u{1F3A8} tailwind-styled-v4 DevTools"),
+      React.createElement(
+        "span",
+        { style: { opacity: 0.6, fontSize: "10px" } },
+        state.pinned ? "Click to unpin" : isInspecting ? "Hover to inspect \xB7 Click to pin \xB7 1-5 switch panel \xB7 Esc close" : "Ctrl+Shift+D close \xB7 1-5 switch panel"
+      )
+    )
+  );
+}
+var S = {
+  root: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 2147483647,
+    pointerEvents: "none",
+    fontFamily: "ui-monospace, 'JetBrains Mono', monospace",
+    fontSize: "12px"
+  },
+  highlight: {
+    position: "absolute",
+    borderRadius: "3px",
+    outline: "2px solid #3b82f6",
+    outlineOffset: "1px",
+    background: "rgba(59,130,246,0.08)",
+    pointerEvents: "none",
+    transition: "all 0.1s ease",
+    zIndex: 2147483646
+  },
+  panel: {
+    position: "fixed",
+    width: 320,
+    maxHeight: 480,
+    background: "#0f0f0f",
+    border: "1px solid #27272a",
+    borderRadius: "10px",
+    boxShadow: "0 8px 32px rgba(0,0,0,0.8)",
+    pointerEvents: "all",
+    zIndex: 2147483647,
+    userSelect: "text",
+    display: "flex",
+    flexDirection: "column"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px 6px",
+    borderBottom: "1px solid #1f1f1f",
+    flexShrink: 0
+  },
+  tabBar: {
+    display: "flex",
+    borderBottom: "1px solid #18181b",
+    flexShrink: 0,
+    overflowX: "auto"
+  },
+  tab: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "10px",
+    padding: "5px 8px",
+    whiteSpace: "nowrap",
+    fontFamily: "inherit",
+    transition: "color 0.1s",
+    pointerEvents: "all"
+  },
+  scrollArea: {
+    overflowY: "auto",
+    flex: 1
+  },
+  emptyPanel: {
+    padding: "24px 12px",
+    color: "#71717a",
+    fontSize: "12px",
+    textAlign: "center",
+    lineHeight: 1.6
+  },
+  componentName: {
+    color: "#60a5fa",
+    fontWeight: "bold",
+    fontSize: "13px"
+  },
+  headerActions: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  },
+  pinBadge: { color: "#fbbf24", fontSize: "10px" },
+  closeBtn: {
+    background: "none",
+    border: "none",
+    color: "#71717a",
+    cursor: "pointer",
+    fontSize: "14px",
+    lineHeight: 1,
+    padding: "2px 4px",
+    pointerEvents: "all"
+  },
+  section: {
+    padding: "8px 12px",
+    borderBottom: "1px solid #18181b"
+  },
+  sectionTitle: {
+    color: "#52525b",
+    fontSize: "10px",
+    textTransform: "uppercase",
+    letterSpacing: "0.08em",
+    marginBottom: "6px"
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "3px"
+  },
+  varKey: { color: "#a1a1aa" },
+  varValue: { color: "#34d399", fontWeight: "bold" },
+  classGrid: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "4px"
+  },
+  classChip: {
+    background: "#18181b",
+    border: "1px solid #27272a",
+    borderRadius: "4px",
+    padding: "2px 6px",
+    color: "#e4e4e7",
+    cursor: "default",
+    fontSize: "11px"
+  },
+  copyBtn: {
+    display: "block",
+    width: "100%",
+    background: "none",
+    border: "none",
+    borderTop: "1px solid #18181b",
+    color: "#52525b",
+    cursor: "pointer",
+    padding: "8px 12px",
+    textAlign: "left",
+    fontSize: "11px",
+    pointerEvents: "all",
+    fontFamily: "inherit"
+  },
+  statusBar: {
+    position: "fixed",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: "#1e3a5f",
+    color: "#93c5fd",
+    fontSize: "11px",
+    padding: "4px 12px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    pointerEvents: "all",
+    zIndex: 2147483647
+  },
+  toggleBtn: {
+    position: "fixed",
+    bottom: 12,
+    right: 12,
+    width: 36,
+    height: 36,
+    borderRadius: "50%",
+    background: "#1e3a5f",
+    border: "1px solid #3b82f6",
+    color: "white",
+    cursor: "pointer",
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 2147483647,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+    pointerEvents: "all"
+  }
+};
+function DevToolsProvider() {
+  if (process.env.NODE_ENV === "production") return null;
+  return React.createElement(TwDevTools);
+}
+
+export { DevToolsProvider, TwDevTools };
+//# sourceMappingURL=devtools.js.map
+//# sourceMappingURL=devtools.js.map