tailwind-styled-v4 4.0.0 → 5.0.1

package/dist/{devtools.cjs → devtools.mjs}

@@ -1,31 +1,6 @@
-'use strict';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-var React = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
-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));
+/* tailwind-styled-v4 v5.0.1 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
 function parseDataTw(dataTw) {
   if (!dataTw) return { name: "Unknown", classes: [] };
   const colonIdx = dataTw.indexOf(":");
@@ -38,15 +13,14 @@ function parseVariantAttr(v) {
   if (!v) return {};
   try {
     return JSON.parse(v);
-  } catch (e) {
+  } catch {
     return {};
   }
 }
 function findNearestTwElement(el) {
-  var _a;
   let cur = el;
   while (cur) {
-    if ((_a = cur.dataset) == null ? void 0 : _a.tw) return cur;
+    if (cur.dataset?.tw) return cur;
     cur = cur.parentElement;
   }
   return null;
@@ -93,60 +67,61 @@ function InspectorPanel({
   pinned: _pinned
 }) {
   if (!inspected) {
-    return React__default.default.createElement(
+    return React.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement("span", { style: { opacity: 0.4 } }, "Hover an element to inspect")
+      React.createElement("span", { style: { opacity: 0.4 } }, "Hover an element to inspect")
     );
   }
-  return React__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.scrollArea },
     // Variant props
-    Object.keys(inspected.variantProps).length > 0 && React__default.default.createElement(
+    Object.keys(inspected.variantProps).length > 0 && React.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Variants"),
+      React.createElement("div", { style: S.sectionTitle }, "Variants"),
       Object.entries(inspected.variantProps).map(
-        ([k, v]) => React__default.default.createElement(
+        ([k, v]) => React.createElement(
           "div",
           { key: k, style: S.row },
-          React__default.default.createElement("span", { style: S.varKey }, k),
-          React__default.default.createElement("span", { style: S.varValue }, `"${v}"`)
+          React.createElement("span", { style: S.varKey }, k),
+          React.createElement("span", { style: S.varValue }, `"${v}"`)
         )
       )
     ),
     // Active states
-    Object.keys(inspected.activeStates).length > 0 && React__default.default.createElement(
+    Object.keys(inspected.activeStates).length > 0 && React.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Active Data Attrs"),
+      React.createElement("div", { style: S.sectionTitle }, "Active Data Attrs"),
       Object.entries(inspected.activeStates).map(
-        ([k, v]) => React__default.default.createElement(
+        ([k, v]) => React.createElement(
           "div",
           { key: k, style: S.row },
-          React__default.default.createElement("code", { style: __spreadProps(__spreadValues({}, S.varKey), { color: "#f59e0b" }) }, `data-${k}`),
-          React__default.default.createElement("span", { style: __spreadProps(__spreadValues({}, S.varValue), { color: "#34d399" }) }, `"${v}"`)
+          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__default.default.createElement(
+    inspected.stateNames.length > 0 && React.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Reactive States"),
-      React__default.default.createElement(
+      React.createElement("div", { style: S.sectionTitle }, "Reactive States"),
+      React.createElement(
         "div",
         { style: S.classGrid },
         inspected.stateNames.map(
-          (s) => React__default.default.createElement(
+          (s) => React.createElement(
             "code",
             {
               key: s,
-              style: __spreadProps(__spreadValues({}, S.classChip), {
+              style: {
+                ...S.classChip,
                 background: inspected.activeStates[s] === "true" ? "#065f46" : "#18181b",
                 borderColor: inspected.activeStates[s] === "true" ? "#34d399" : "#27272a"
-              })
+              }
             },
             s
           )
@@ -154,32 +129,32 @@ function InspectorPanel({
       )
     ),
     // Container breakpoints
-    inspected.containerBps.length > 0 && React__default.default.createElement(
+    inspected.containerBps.length > 0 && React.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Container Breakpoints"),
-      React__default.default.createElement(
+      React.createElement("div", { style: S.sectionTitle }, "Container Breakpoints"),
+      React.createElement(
         "div",
         { style: S.classGrid },
         inspected.containerBps.map(
-          (bp) => React__default.default.createElement(
+          (bp) => React.createElement(
             "code",
-            { key: bp, style: __spreadProps(__spreadValues({}, S.classChip), { color: "#818cf8" }) },
+            { key: bp, style: { ...S.classChip, color: "#818cf8" } },
             bp
           )
         )
       )
     ),
     // Tailwind classes
-    inspected.twClasses.length > 0 && React__default.default.createElement(
+    inspected.twClasses.length > 0 && React.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Classes"),
-      React__default.default.createElement(
+      React.createElement("div", { style: S.sectionTitle }, "Classes"),
+      React.createElement(
         "div",
         { style: S.classGrid },
         inspected.twClasses.map(
-          (cls) => React__default.default.createElement(
+          (cls) => React.createElement(
             "code",
             { key: cls, style: S.classChip, title: inspected.atomicMap[cls] },
             cls
@@ -188,13 +163,12 @@ function InspectorPanel({
       )
     ),
     // Copy
-    React__default.default.createElement(
+    React.createElement(
       "button",
       {
         style: S.copyBtn,
         onClick: () => {
-          var _a;
-          (_a = navigator.clipboard) == null ? void 0 : _a.writeText(
+          navigator.clipboard?.writeText(
             JSON.stringify(
               {
                 component: inspected.componentName,
@@ -213,8 +187,8 @@ function InspectorPanel({
   );
 }
 function StatePanel() {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
+  const [entries, setEntries] = useState([]);
+  useEffect(() => {
     const refresh = () => {
       const reg = window.__TW_STATE_REGISTRY__;
       setEntries(reg ? Array.from(reg.values()) : []);
@@ -224,60 +198,61 @@ function StatePanel() {
     return () => clearInterval(interval);
   }, []);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return React.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement(
+      React.createElement(
         "span",
         { style: { opacity: 0.4 } },
         "No state-enabled components found."
       ),
-      React__default.default.createElement("br", null),
-      React__default.default.createElement(
+      React.createElement("br", null),
+      React.createElement(
         "span",
         { style: { opacity: 0.3, fontSize: "11px" } },
         'Use tw.button({ state: { active: "..." } }) to register.'
       )
     );
   }
-  return React__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.scrollArea },
     entries.map(
-      (entry) => React__default.default.createElement(
+      (entry) => React.createElement(
         "div",
         { key: entry.id, style: S.section },
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: S.sectionTitle },
-          React__default.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
-          React__default.default.createElement(
+          React.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          React.createElement(
             "span",
             { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
             entry.id
           )
         ),
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: S.classGrid },
           entry.states.map(
-            (s) => React__default.default.createElement(
+            (s) => React.createElement(
               "code",
-              { key: s, style: __spreadProps(__spreadValues({}, S.classChip), { color: "#f59e0b" }) },
+              { key: s, style: { ...S.classChip, color: "#f59e0b" } },
               `data-${s}`
             )
           )
         ),
-        React__default.default.createElement(
+        React.createElement(
           "div",
-          { style: __spreadProps(__spreadValues({}, S.row), { marginTop: "4px" }) },
-          React__default.default.createElement(
+          { style: { ...S.row, marginTop: "4px" } },
+          React.createElement(
             "span",
             {
-              style: __spreadProps(__spreadValues({}, S.sectionTitle), {
+              style: {
+                ...S.sectionTitle,
                 marginBottom: 0,
                 color: entry.cssInjected ? "#34d399" : "#ef4444"
-              })
+              }
             },
             entry.cssInjected ? "\u25CF CSS injected" : "\u25CB CSS pending"
           )
@@ -287,8 +262,8 @@ function StatePanel() {
   );
 }
 function ContainerPanel() {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
+  const [entries, setEntries] = useState([]);
+  useEffect(() => {
     const refresh = () => {
       const reg = window.__TW_CONTAINER_REGISTRY__;
       setEntries(reg ? Array.from(reg.values()) : []);
@@ -298,57 +273,57 @@ function ContainerPanel() {
     return () => clearInterval(interval);
   }, []);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return React.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement(
+      React.createElement(
         "span",
         { style: { opacity: 0.4 } },
         "No container query components found."
       ),
-      React__default.default.createElement("br", null),
-      React__default.default.createElement(
+      React.createElement("br", null),
+      React.createElement(
         "span",
         { style: { opacity: 0.3, fontSize: "11px" } },
         'Use tw.div({ container: { md: "flex-row" } }) to register.'
       )
     );
   }
-  return React__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.scrollArea },
     entries.map(
-      (entry) => React__default.default.createElement(
+      (entry) => React.createElement(
         "div",
         { key: entry.id, style: S.section },
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: S.sectionTitle },
-          React__default.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
-          entry.containerName && React__default.default.createElement(
+          React.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          entry.containerName && React.createElement(
             "span",
             { style: { marginLeft: "6px", color: "#818cf8" } },
             `[${entry.containerName}]`
           ),
-          React__default.default.createElement(
+          React.createElement(
             "span",
             { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
             entry.id
           )
         ),
-        React__default.default.createElement(
+        React.createElement(
           "div",
           null,
           entry.breakpoints.map(
-            (bp, i) => React__default.default.createElement(
+            (bp, i) => React.createElement(
               "div",
-              { key: i, style: __spreadProps(__spreadValues({}, S.row), { marginBottom: "2px" }) },
-              React__default.default.createElement(
+              { key: i, style: { ...S.row, marginBottom: "2px" } },
+              React.createElement(
                 "code",
                 { style: { color: "#818cf8", fontSize: "11px" } },
                 `\u2265 ${bp.minWidth}`
               ),
-              React__default.default.createElement(
+              React.createElement(
                 "span",
                 { style: { color: "#6b7280", fontSize: "11px" } },
                 bp.classes
@@ -361,45 +336,45 @@ function ContainerPanel() {
   );
 }
 function TokensPanel() {
-  const [tokens, setTokens_] = React.useState({});
-  React.useEffect(() => {
+  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)));
+    const unsub = engine.subscribe((t) => setTokens_({ ...t }));
     return unsub;
   }, []);
   const entries = Object.entries(tokens);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return React.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement("span", { style: { opacity: 0.4 } }, "No live tokens registered."),
-      React__default.default.createElement("br", null),
-      React__default.default.createElement(
+      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__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.scrollArea },
-    React__default.default.createElement(
+    React.createElement(
       "div",
-      { style: __spreadProps(__spreadValues({}, S.sectionTitle), { padding: "8px 12px 4px", color: "#52525b" }) },
+      { 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__default.default.createElement(
+      return React.createElement(
         "div",
-        { key: name, style: __spreadProps(__spreadValues({}, S.row), { padding: "6px 12px", borderBottom: "1px solid #18181b" }) },
-        React__default.default.createElement(
+        { key: name, style: { ...S.row, padding: "6px 12px", borderBottom: "1px solid #18181b" } },
+        React.createElement(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "8px" } },
-          isColor && React__default.default.createElement("div", {
+          isColor && React.createElement("div", {
             style: {
               width: "16px",
               height: "16px",
@@ -409,9 +384,9 @@ function TokensPanel() {
               flexShrink: 0
             }
           }),
-          React__default.default.createElement("span", { style: { color: "#a1a1aa", fontSize: "12px" } }, name)
+          React.createElement("span", { style: { color: "#a1a1aa", fontSize: "12px" } }, name)
         ),
-        isColor ? React__default.default.createElement("input", {
+        isColor ? React.createElement("input", {
           type: "color",
           defaultValue: value.startsWith("#") ? value : "#000000",
           style: {
@@ -425,7 +400,7 @@ function TokensPanel() {
             const engine = window.__TW_TOKEN_ENGINE__;
             if (engine) engine.setToken(name, e.target.value);
           }
-        }) : React__default.default.createElement("input", {
+        }) : React.createElement("input", {
           type: "text",
           defaultValue: value,
           style: {
@@ -448,18 +423,39 @@ function TokensPanel() {
   );
 }
 function AnalyzerPanel() {
-  const [scanning, setScanning] = React.useState(false);
-  const [results, setResults] = React.useState(null);
-  const runScan = React.useCallback(() => {
+  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(() => {
-      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;
+          const dTw = el.dataset.tw ?? null;
           if (!dTw) return { name: "?", classes: [] };
           const ci = dTw.indexOf(":");
           return {
@@ -477,70 +473,186 @@ function AnalyzerPanel() {
       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
+        stateCount: stateReg?.size ?? 0,
+        containerCount: containerReg?.size ?? 0,
+        tokenCount: Object.keys(tokenEngine?.getTokens?.() ?? {}).length
       });
       setScanning(false);
     }, 100);
   }, []);
-  return React__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.scrollArea },
-    React__default.default.createElement(
+    React.createElement(
       "div",
       { style: { padding: "10px 12px" } },
-      React__default.default.createElement(
+      // ── DOM Scan ──────────────────────────────────────────────────────────
+      React.createElement(
         "button",
         {
-          style: __spreadProps(__spreadValues({}, S.copyBtn), { borderTop: "none", color: "#60a5fa", fontWeight: "600" }),
+          style: { ...S.copyBtn, borderTop: "none", color: "#60a5fa", fontWeight: "600" },
           onClick: runScan,
           disabled: scanning
         },
         scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
       ),
-      results && React__default.default.createElement(
+      // ── 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,
-        // Summary
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement("div", { style: S.sectionTitle }, "Summary"),
-          React__default.default.createElement(
+          React.createElement("div", { style: S.sectionTitle }, "Summary"),
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "State components"),
-            React__default.default.createElement("span", { style: S.varValue }, String(results.stateCount))
+            React.createElement("span", { style: S.varKey }, "State components"),
+            React.createElement("span", { style: S.varValue }, String(results.stateCount))
           ),
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Container components"),
-            React__default.default.createElement("span", { style: S.varValue }, String(results.containerCount))
+            React.createElement("span", { style: S.varKey }, "Container components"),
+            React.createElement("span", { style: S.varValue }, String(results.containerCount))
           ),
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Live tokens"),
-            React__default.default.createElement("span", { style: S.varValue }, String(results.tokenCount))
+            React.createElement("span", { style: S.varKey }, "Live tokens"),
+            React.createElement("span", { style: S.varValue }, String(results.tokenCount))
           )
         ),
-        // Duplicates
-        results.duplicates.length > 0 ? React__default.default.createElement(
+        results.duplicates.length > 0 ? React.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement("div", { style: S.sectionTitle }, "Duplicate Class Sets"),
+          React.createElement("div", { style: S.sectionTitle }, "Duplicate Class Sets"),
           results.duplicates.map(
-            (d, i) => React__default.default.createElement(
+            (d, i) => React.createElement(
               "div",
               { key: i, style: { marginBottom: "8px" } },
-              React__default.default.createElement(
+              React.createElement(
                 "div",
                 { style: { color: "#f59e0b", fontSize: "11px", marginBottom: "2px" } },
                 d.names.join(", ")
               ),
-              React__default.default.createElement(
+              React.createElement(
                 "code",
                 {
                   style: {
@@ -553,10 +665,10 @@ function AnalyzerPanel() {
               )
             )
           )
-        ) : results && React__default.default.createElement(
+        ) : React.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement(
+          React.createElement(
             "span",
             { style: { color: "#34d399", fontSize: "12px" } },
             "\u2713 No duplicate class sets in current DOM"
@@ -568,73 +680,69 @@ function AnalyzerPanel() {
 }
 function TwDevTools() {
   if (process.env.NODE_ENV === "production") return null;
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     open: false,
     panel: "inspector",
     pinned: false,
     inspected: null,
     position: { x: 0, y: 0 }
   });
-  const overlayRef = React.useRef(null);
+  const overlayRef = useRef(null);
   const isInspecting = state.open && state.panel === "inspector";
-  React.useEffect(() => {
+  useEffect(() => {
     const onKey = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
-        setState((s) => __spreadProps(__spreadValues({}, s), { open: !s.open, inspected: null }));
+        setState((s) => ({ ...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);
+        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 = React.useCallback(
+  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 } }));
+        setState((s) => ({ ...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)
-          }
-        });
-      });
+      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 = React.useCallback(
+  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 }));
+      if (overlayRef.current?.contains(e.target)) return;
+      setState((s) => ({ ...s, pinned: !s.pinned && !!s.inspected }));
     },
     [isInspecting]
   );
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isInspecting) return;
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("click", onClick);
@@ -644,10 +752,10 @@ function TwDevTools() {
     };
   }, [isInspecting, onMouseMove, onClick]);
   if (!state.open) {
-    return React__default.default.createElement(
+    return React.createElement(
       "button",
       {
-        onClick: () => setState((s) => __spreadProps(__spreadValues({}, s), { open: true })),
+        onClick: () => setState((s) => ({ ...s, open: true })),
         style: S.toggleBtn,
         title: "tailwind-styled-v4 DevTools (Ctrl+Shift+D)"
       },
@@ -661,20 +769,21 @@ function TwDevTools() {
     { id: "tokens", label: "Tokens", icon: "\u{1F3A8}" },
     { id: "analyzer", label: "Analyzer", icon: "\u{1F4CA}" }
   ];
-  return React__default.default.createElement(
+  return React.createElement(
     "div",
     { style: S.root },
     // ── Element highlight (inspector only) ──────────────────────────────
-    isInspecting && state.inspected && React__default.default.createElement("div", {
-      style: __spreadProps(__spreadValues({}, S.highlight), {
+    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__default.default.createElement(
+    isInspecting && state.inspected && React.createElement(
       "div",
       {
         style: {
@@ -694,58 +803,61 @@ function TwDevTools() {
       state.inspected.componentName
     ),
     // ── Main DevTools panel ─────────────────────────────────────────────
-    React__default.default.createElement(
+    React.createElement(
       "div",
       {
         ref: overlayRef,
-        style: state.panel === "inspector" && state.inspected ? __spreadProps(__spreadValues({}, S.panel), {
+        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)
-        }) : __spreadProps(__spreadValues({}, S.panel), {
+        } : {
+          ...S.panel,
           top: "auto",
           bottom: "40px",
           right: "12px",
           left: "auto"
-        })
+        }
       },
       // Header
-      React__default.default.createElement(
+      React.createElement(
         "div",
         { style: S.header },
-        React__default.default.createElement(
+        React.createElement(
           "span",
           { style: S.componentName },
           state.inspected && state.panel === "inspector" ? state.inspected.componentName : "tailwind-styled-v4"
         ),
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: S.headerActions },
-          state.pinned && React__default.default.createElement("span", { style: S.pinBadge }, "\u{1F4CC}"),
-          React__default.default.createElement(
+          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 }))
+              onClick: () => setState((s) => ({ ...s, open: false, pinned: false, inspected: null }))
             },
             "\u2715"
           )
         )
       ),
       // Tab bar
-      React__default.default.createElement(
+      React.createElement(
         "div",
         { style: S.tabBar },
         PANELS.map(
-          (p) => React__default.default.createElement(
+          (p) => React.createElement(
             "button",
             {
               key: p.id,
-              style: __spreadProps(__spreadValues({}, S.tab), {
+              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) => __spreadProps(__spreadValues({}, s), { panel: p.id })),
+              },
+              onClick: () => setState((s) => ({ ...s, panel: p.id })),
               title: `${p.label} (${PANELS.findIndex((x) => x.id === p.id) + 1})`
             },
             `${p.icon} ${p.label}`
@@ -753,22 +865,22 @@ function TwDevTools() {
         )
       ),
       // Panel content
-      state.panel === "inspector" && React__default.default.createElement(InspectorPanel, {
+      state.panel === "inspector" && React.createElement(InspectorPanel, {
         inspected: state.inspected,
         position: state.position,
         pinned: state.pinned
       }),
-      state.panel === "state" && React__default.default.createElement(StatePanel, null),
-      state.panel === "container" && React__default.default.createElement(ContainerPanel, null),
-      state.panel === "tokens" && React__default.default.createElement(TokensPanel, null),
-      state.panel === "analyzer" && React__default.default.createElement(AnalyzerPanel, null)
+      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__default.default.createElement(
+    React.createElement(
       "div",
       { style: S.statusBar },
-      React__default.default.createElement("span", null, "\u{1F3A8} tailwind-styled-v4 DevTools"),
-      React__default.default.createElement(
+      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"
@@ -950,10 +1062,9 @@ var S = {
 };
 function DevToolsProvider() {
   if (process.env.NODE_ENV === "production") return null;
-  return React__default.default.createElement(TwDevTools);
+  return React.createElement(TwDevTools);
 }
 
-exports.DevToolsProvider = DevToolsProvider;
-exports.TwDevTools = TwDevTools;
-//# sourceMappingURL=devtools.cjs.map
-//# sourceMappingURL=devtools.cjs.map
+export { DevToolsProvider, TwDevTools };
+//# sourceMappingURL=devtools.mjs.map
+//# sourceMappingURL=devtools.mjs.map