@tailwind-styled/devtools 2.0.0

package/dist/index.js

@@ -0,0 +1,953 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/index.tsx
+import React, { useCallback, useEffect, useRef, useState } from "react";
+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 (e) {
+    return {};
+  }
+}
+function findNearestTwElement(el) {
+  var _a;
+  let cur = el;
+  while (cur) {
+    if ((_a = cur.dataset) == null ? void 0 : _a.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: __spreadProps(__spreadValues({}, S.varKey), { color: "#f59e0b" }) }, `data-${k}`),
+          React.createElement("span", { style: __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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: () => {
+          var _a;
+          (_a = navigator.clipboard) == null ? void 0 : _a.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: __spreadProps(__spreadValues({}, S.classChip), { color: "#f59e0b" }) },
+              `data-${s}`
+            )
+          )
+        ),
+        React.createElement(
+          "div",
+          { style: __spreadProps(__spreadValues({}, S.row), { marginTop: "4px" }) },
+          React.createElement(
+            "span",
+            {
+              style: __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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_(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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 runScan = useCallback(() => {
+    setScanning(true);
+    setTimeout(() => {
+      var _a, _b, _c, _d;
+      const twEls = document.querySelectorAll("[data-tw]");
+      const classMap = /* @__PURE__ */ new Map();
+      for (const el of twEls) {
+        const { name, classes } = (() => {
+          var _a2;
+          const dTw = (_a2 = el.dataset.tw) != null ? _a2 : 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: (_a = stateReg == null ? void 0 : stateReg.size) != null ? _a : 0,
+        containerCount: (_b = containerReg == null ? void 0 : containerReg.size) != null ? _b : 0,
+        tokenCount: Object.keys((_d = (_c = tokenEngine == null ? void 0 : tokenEngine.getTokens) == null ? void 0 : _c.call(tokenEngine)) != null ? _d : {}).length
+      });
+      setScanning(false);
+    }, 100);
+  }, []);
+  return React.createElement(
+    "div",
+    { style: S.scrollArea },
+    React.createElement(
+      "div",
+      { style: { padding: "10px 12px" } },
+      React.createElement(
+        "button",
+        {
+          style: __spreadProps(__spreadValues({}, S.copyBtn), { borderTop: "none", color: "#60a5fa", fontWeight: "600" }),
+          onClick: runScan,
+          disabled: scanning
+        },
+        scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
+      ),
+      results && React.createElement(
+        "div",
+        null,
+        // Summary
+        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))
+          )
+        ),
+        // Duplicates
+        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 ? "..." : "")
+              )
+            )
+          )
+        ) : results && 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) => __spreadProps(__spreadValues({}, s), { open: !s.open, inspected: null }));
+      }
+      if (e.key === "Escape")
+        setState((s) => __spreadProps(__spreadValues({}, s), { open: false, pinned: false, inspected: null }));
+      if (e.key === "1") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "inspector" }) : s);
+      if (e.key === "2") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "state" }) : s);
+      if (e.key === "3") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "container" }) : s);
+      if (e.key === "4") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "tokens" }) : s);
+      if (e.key === "5") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "analyzer" }) : s);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const onMouseMove = useCallback(
+    (e) => {
+      var _a;
+      if (!isInspecting || state.pinned) return;
+      const twEl = findNearestTwElement(e.target);
+      if (!twEl) {
+        setState((s) => __spreadProps(__spreadValues({}, s), { inspected: null, position: { x: e.clientX, y: e.clientY } }));
+        return;
+      }
+      const { name, classes } = parseDataTw((_a = twEl.dataset.tw) != null ? _a : null);
+      setState((s) => {
+        var _a2;
+        return __spreadProps(__spreadValues({}, s), {
+          position: { x: e.clientX, y: e.clientY },
+          inspected: {
+            componentName: name,
+            element: twEl,
+            rect: twEl.getBoundingClientRect(),
+            twClasses: classes,
+            variantProps: parseVariantAttr((_a2 = twEl.dataset.twVariants) != null ? _a2 : null),
+            atomicMap: getAtomicMap(classes),
+            rawClassName: twEl.className,
+            stateNames: getStateNames(twEl),
+            activeStates: getActiveStates(twEl),
+            containerBps: getContainerBps(twEl)
+          }
+        });
+      });
+    },
+    [isInspecting, state.pinned]
+  );
+  const onClick = useCallback(
+    (e) => {
+      var _a;
+      if (!isInspecting) return;
+      if ((_a = overlayRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      setState((s) => __spreadProps(__spreadValues({}, 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) => __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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 ? __spreadProps(__spreadValues({}, S.panel), {
+          top: Math.min(state.position.y + 16, window.innerHeight - 460),
+          left: Math.min(state.position.x + 16, window.innerWidth - 320)
+        }) : __spreadProps(__spreadValues({}, 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) => __spreadProps(__spreadValues({}, 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: __spreadProps(__spreadValues({}, 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) => __spreadProps(__spreadValues({}, 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
+};