tailwind-styled-v4 5.0.0 → 5.0.1

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

@@ -1,13 +1,6 @@
-'use strict';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-require('./chunk-Y5D3E72P.cjs');
-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 */
+/* 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(":");
@@ -74,53 +67,53 @@ 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: { ...S.varKey, color: "#f59e0b" } }, `data-${k}`),
-          React__default.default.createElement("span", { style: { ...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,
@@ -136,15 +129,15 @@ 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: { ...S.classChip, color: "#818cf8" } },
             bp
@@ -153,15 +146,15 @@ function InspectorPanel({
       )
     ),
     // 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
@@ -170,7 +163,7 @@ function InspectorPanel({
       )
     ),
     // Copy
-    React__default.default.createElement(
+    React.createElement(
       "button",
       {
         style: S.copyBtn,
@@ -194,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()) : []);
@@ -205,54 +198,54 @@ 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: { ...S.classChip, color: "#f59e0b" } },
               `data-${s}`
             )
           )
         ),
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: { ...S.row, marginTop: "4px" } },
-          React__default.default.createElement(
+          React.createElement(
             "span",
             {
               style: {
@@ -269,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()) : []);
@@ -280,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: { ...S.row, marginBottom: "2px" } },
-              React__default.default.createElement(
+              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
@@ -343,8 +336,8 @@ 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());
@@ -353,35 +346,35 @@ function TokensPanel() {
   }, []);
   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: { ...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: { ...S.row, padding: "6px 12px", borderBottom: "1px solid #18181b" } },
-        React__default.default.createElement(
+        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",
@@ -391,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: {
@@ -407,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: {
@@ -430,16 +423,18 @@ function TokensPanel() {
   );
 }
 function AnalyzerPanel() {
-  const [scanning, setScanning] = React.useState(false);
-  const [results, setResults] = React.useState(null);
-  const [engineMetrics, setEngineMetrics] = React.useState(null);
-  const [metricsFetching, setMetricsFetching] = React.useState(false);
-  const [metricsError, setMetricsError] = React.useState(null);
-  const loadEngineMetrics = React.useCallback(async () => {
+  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) });
+      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);
@@ -453,7 +448,7 @@ function AnalyzerPanel() {
       setMetricsFetching(false);
     }
   }, []);
-  const runScan = React.useCallback(() => {
+  const runScan = useCallback(() => {
     setScanning(true);
     setTimeout(() => {
       const twEls = document.querySelectorAll("[data-tw]");
@@ -485,14 +480,14 @@ function AnalyzerPanel() {
       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" } },
       // ── DOM Scan ──────────────────────────────────────────────────────────
-      React__default.default.createElement(
+      React.createElement(
         "button",
         {
           style: { ...S.copyBtn, borderTop: "none", color: "#60a5fa", fontWeight: "600" },
@@ -502,58 +497,58 @@ function AnalyzerPanel() {
         scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
       ),
       // ── Engine Metrics (dari dashboard) ───────────────────────────────────
-      React__default.default.createElement(
+      React.createElement(
         "div",
         { style: { ...S.section, marginTop: "8px" } },
-        React__default.default.createElement(
+        React.createElement(
           "div",
           { style: { ...S.sectionTitle, marginBottom: "6px" } },
           "\u26A1 Engine Metrics"
         ),
-        engineMetrics ? React__default.default.createElement(
+        engineMetrics ? React.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Build"),
-            React__default.default.createElement(
+            React.createElement("span", { style: S.varKey }, "Build"),
+            React.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               engineMetrics.buildMs != null ? `${engineMetrics.buildMs}ms` : "\u2014"
             )
           ),
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Classes"),
-            React__default.default.createElement(
+            React.createElement("span", { style: S.varKey }, "Classes"),
+            React.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               String(engineMetrics.classCount ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Files"),
-            React__default.default.createElement(
+            React.createElement("span", { style: S.varKey }, "Files"),
+            React.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               String(engineMetrics.fileCount ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Mode"),
-            React__default.default.createElement(
+            React.createElement("span", { style: S.varKey }, "Mode"),
+            React.createElement(
               "span",
               { style: { color: "#a1a1aa", fontSize: "11px" } },
               String(engineMetrics.mode ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          React.createElement(
             "button",
             {
               style: {
@@ -568,15 +563,15 @@ function AnalyzerPanel() {
             },
             "\u21BB Refresh"
           )
-        ) : metricsError ? React__default.default.createElement(
+        ) : metricsError ? React.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          React.createElement(
             "div",
             { style: { color: "#f87171", fontSize: "11px", marginBottom: "6px" } },
             metricsError
           ),
-          React__default.default.createElement(
+          React.createElement(
             "button",
             {
               style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -585,23 +580,28 @@ function AnalyzerPanel() {
             },
             metricsFetching ? "Connecting..." : "\u21BB Retry"
           )
-        ) : React__default.default.createElement(
+        ) : React.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          React.createElement(
             "div",
             {
-              style: { color: "#71717a", fontSize: "11px", lineHeight: 1.6, marginBottom: "6px" }
+              style: {
+                color: "#71717a",
+                fontSize: "11px",
+                lineHeight: 1.6,
+                marginBottom: "6px"
+              }
             },
             "Rust analyzer hanya tersedia via CLI atau dashboard.",
-            React__default.default.createElement("br", null),
-            React__default.default.createElement(
+            React.createElement("br", null),
+            React.createElement(
               "code",
               { style: { color: "#52525b", fontSize: "10px" } },
               "tw analyze . | tw dashboard"
             )
           ),
-          React__default.default.createElement(
+          React.createElement(
             "button",
             {
               style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -613,46 +613,46 @@ function AnalyzerPanel() {
         )
       ),
       // ── DOM Scan Results ──────────────────────────────────────────────────
-      results && React__default.default.createElement(
+      results && React.createElement(
         "div",
         null,
-        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))
           )
         ),
-        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: {
@@ -665,10 +665,10 @@ function AnalyzerPanel() {
               )
             )
           )
-        ) : 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"
@@ -680,16 +680,16 @@ 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();
@@ -706,7 +706,7 @@ function TwDevTools() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, []);
-  const onMouseMove = React.useCallback(
+  const onMouseMove = useCallback(
     (e) => {
       if (!isInspecting || state.pinned) return;
       const twEl = findNearestTwElement(e.target);
@@ -734,7 +734,7 @@ function TwDevTools() {
     },
     [isInspecting, state.pinned]
   );
-  const onClick = React.useCallback(
+  const onClick = useCallback(
     (e) => {
       if (!isInspecting) return;
       if (overlayRef.current?.contains(e.target)) return;
@@ -742,7 +742,7 @@ function TwDevTools() {
     },
     [isInspecting]
   );
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isInspecting) return;
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("click", onClick);
@@ -752,7 +752,7 @@ function TwDevTools() {
     };
   }, [isInspecting, onMouseMove, onClick]);
   if (!state.open) {
-    return React__default.default.createElement(
+    return React.createElement(
       "button",
       {
         onClick: () => setState((s) => ({ ...s, open: true })),
@@ -769,11 +769,11 @@ 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", {
+    isInspecting && state.inspected && React.createElement("div", {
       style: {
         ...S.highlight,
         top: state.inspected.rect.top + window.scrollY,
@@ -783,7 +783,7 @@ function TwDevTools() {
       }
     }),
     // ── Component name label ────────────────────────────────────────────
-    isInspecting && state.inspected && React__default.default.createElement(
+    isInspecting && state.inspected && React.createElement(
       "div",
       {
         style: {
@@ -803,7 +803,7 @@ function TwDevTools() {
       state.inspected.componentName
     ),
     // ── Main DevTools panel ─────────────────────────────────────────────
-    React__default.default.createElement(
+    React.createElement(
       "div",
       {
         ref: overlayRef,
@@ -820,19 +820,19 @@ function TwDevTools() {
         }
       },
       // 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,
@@ -843,11 +843,11 @@ function TwDevTools() {
         )
       ),
       // 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,
@@ -865,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"
@@ -1062,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