tailwind-styled-v4 5.0.36 → 5.0.38

package/dist/devtools.js

@@ -1,22 +1,35 @@
-'use strict';
-
-require('crypto');
-require('fs');
-require('path');
-require('url');
-var module$1 = require('module');
-var React = require('react');
-
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
 /* tailwind-styled-v4 v5.0.4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/domain/shared/src/trace.ts
 function getHealthColor(status) {
@@ -84,16 +97,46 @@ function getPipelinePercentages(metrics) {
 }
 var init_trace = __esm({
   "packages/domain/shared/src/trace.ts"() {
+    "use strict";
   }
 });
+
+// packages/domain/shared/src/index.ts
+var import_node_crypto, import_node_fs, import_node_path, import_node_url, import_node_module, import_meta, _require;
 var init_src = __esm({
   "packages/domain/shared/src/index.ts"() {
+    "use strict";
+    import_node_crypto = require("crypto");
+    import_node_fs = __toESM(require("fs"));
+    import_node_path = __toESM(require("path"));
+    import_node_url = require("url");
+    import_node_module = require("module");
     init_trace();
-    module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('devtools.js', document.baseURI).href)));
+    import_meta = {};
+    _require = (0, import_node_module.createRequire)(import_meta.url);
   }
 });
 
+// src/umbrella/devtools.ts
+var devtools_exports = {};
+__export(devtools_exports, {
+  DevToolsProvider: () => DevToolsProvider,
+  TwDevTools: () => TwDevTools,
+  fetchClassInspection: () => fetchClassInspection,
+  formatClassInspectionCli: () => formatClassInspectionCli,
+  formatClassInspectionJson: () => formatClassInspectionJson,
+  formatDuration: () => formatDuration,
+  formatMemory: () => formatMemory,
+  getBuildTimeColor: () => getBuildTimeColor,
+  getHealthColor: () => getHealthColor,
+  getMemoryColor: () => getMemoryColor,
+  getModeColor: () => getModeColor,
+  getPipelinePercentages: () => getPipelinePercentages
+});
+module.exports = __toCommonJS(devtools_exports);
+
 // packages/infrastructure/devtools/src/index.tsx
+var import_react = __toESM(require("react"), 1);
 init_src();
 
 // packages/infrastructure/devtools/src/classInspector.ts
@@ -224,53 +267,53 @@ function InspectorPanel({
   pinned: _pinned
 }) {
   if (!inspected) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement("span", { style: { opacity: 0.4 } }, "Hover an element to inspect")
+      import_react.default.createElement("span", { style: { opacity: 0.4 } }, "Hover an element to inspect")
     );
   }
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
     // Variant props
-    Object.keys(inspected.variantProps).length > 0 && React__default.default.createElement(
+    Object.keys(inspected.variantProps).length > 0 && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Variants"),
+      import_react.default.createElement("div", { style: S.sectionTitle }, "Variants"),
       Object.entries(inspected.variantProps).map(
-        ([k, v]) => React__default.default.createElement(
+        ([k, v]) => import_react.default.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}"`)
+          import_react.default.createElement("span", { style: S.varKey }, k),
+          import_react.default.createElement("span", { style: S.varValue }, `"${v}"`)
         )
       )
     ),
     // Active states
-    Object.keys(inspected.activeStates).length > 0 && React__default.default.createElement(
+    Object.keys(inspected.activeStates).length > 0 && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Active Data Attrs"),
+      import_react.default.createElement("div", { style: S.sectionTitle }, "Active Data Attrs"),
       Object.entries(inspected.activeStates).map(
-        ([k, v]) => React__default.default.createElement(
+        ([k, v]) => import_react.default.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}"`)
+          import_react.default.createElement("code", { style: { ...S.varKey, color: "#f59e0b" } }, `data-${k}`),
+          import_react.default.createElement("span", { style: { ...S.varValue, color: "#34d399" } }, `"${v}"`)
         )
       )
     ),
     // State names
-    inspected.stateNames.length > 0 && React__default.default.createElement(
+    inspected.stateNames.length > 0 && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Reactive States"),
-      React__default.default.createElement(
+      import_react.default.createElement("div", { style: S.sectionTitle }, "Reactive States"),
+      import_react.default.createElement(
         "div",
         { style: S.classGrid },
         inspected.stateNames.map(
-          (s) => React__default.default.createElement(
+          (s) => import_react.default.createElement(
             "code",
             {
               key: s,
@@ -286,15 +329,15 @@ function InspectorPanel({
       )
     ),
     // Container breakpoints
-    inspected.containerBps.length > 0 && React__default.default.createElement(
+    inspected.containerBps.length > 0 && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Container Breakpoints"),
-      React__default.default.createElement(
+      import_react.default.createElement("div", { style: S.sectionTitle }, "Container Breakpoints"),
+      import_react.default.createElement(
         "div",
         { style: S.classGrid },
         inspected.containerBps.map(
-          (bp) => React__default.default.createElement(
+          (bp) => import_react.default.createElement(
             "code",
             { key: bp, style: { ...S.classChip, color: "#818cf8" } },
             bp
@@ -303,15 +346,15 @@ function InspectorPanel({
       )
     ),
     // Tailwind classes
-    inspected.twClasses.length > 0 && React__default.default.createElement(
+    inspected.twClasses.length > 0 && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: S.sectionTitle }, "Classes"),
-      React__default.default.createElement(
+      import_react.default.createElement("div", { style: S.sectionTitle }, "Classes"),
+      import_react.default.createElement(
         "div",
         { style: S.classGrid },
         inspected.twClasses.map(
-          (cls) => React__default.default.createElement(
+          (cls) => import_react.default.createElement(
             "code",
             { key: cls, style: S.classChip, title: inspected.atomicMap[cls] },
             cls
@@ -320,7 +363,7 @@ function InspectorPanel({
       )
     ),
     // Copy
-    React__default.default.createElement(
+    import_react.default.createElement(
       "button",
       {
         style: S.copyBtn,
@@ -344,8 +387,8 @@ function InspectorPanel({
   );
 }
 function StatePanel() {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
+  const [entries, setEntries] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
     const refresh = () => {
       const reg = window.__TW_STATE_REGISTRY__;
       setEntries(reg ? Array.from(reg.values()) : []);
@@ -355,54 +398,54 @@ function StatePanel() {
     return () => clearInterval(interval);
   }, []);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.4 } },
         "No state-enabled components found."
       ),
-      React__default.default.createElement("br", null),
-      React__default.default.createElement(
+      import_react.default.createElement("br", null),
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.3, fontSize: "11px" } },
         'Use tw.button({ state: { active: "..." } }) to register.'
       )
     );
   }
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
     entries.map(
-      (entry) => React__default.default.createElement(
+      (entry) => import_react.default.createElement(
         "div",
         { key: entry.id, style: S.section },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: S.sectionTitle },
-          React__default.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
-          React__default.default.createElement(
+          import_react.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          import_react.default.createElement(
             "span",
             { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
             entry.id
           )
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: S.classGrid },
           entry.states.map(
-            (s) => React__default.default.createElement(
+            (s) => import_react.default.createElement(
               "code",
               { key: s, style: { ...S.classChip, color: "#f59e0b" } },
               `data-${s}`
             )
           )
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { ...S.row, marginTop: "4px" } },
-          React__default.default.createElement(
+          import_react.default.createElement(
             "span",
             {
               style: {
@@ -419,8 +462,8 @@ function StatePanel() {
   );
 }
 function ContainerPanel() {
-  const [entries, setEntries] = React.useState([]);
-  React.useEffect(() => {
+  const [entries, setEntries] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
     const refresh = () => {
       const reg = window.__TW_CONTAINER_REGISTRY__;
       setEntries(reg ? Array.from(reg.values()) : []);
@@ -430,57 +473,57 @@ function ContainerPanel() {
     return () => clearInterval(interval);
   }, []);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       { style: S.emptyPanel },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.4 } },
         "No container query components found."
       ),
-      React__default.default.createElement("br", null),
-      React__default.default.createElement(
+      import_react.default.createElement("br", null),
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.3, fontSize: "11px" } },
         'Use tw.div({ container: { md: "flex-row" } }) to register.'
       )
     );
   }
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
     entries.map(
-      (entry) => React__default.default.createElement(
+      (entry) => import_react.default.createElement(
         "div",
         { key: entry.id, style: S.section },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: S.sectionTitle },
-          React__default.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
-          entry.containerName && React__default.default.createElement(
+          import_react.default.createElement("span", { style: { color: "#60a5fa" } }, entry.tag.toUpperCase()),
+          entry.containerName && import_react.default.createElement(
             "span",
             { style: { marginLeft: "6px", color: "#818cf8" } },
             `[${entry.containerName}]`
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "span",
             { style: { marginLeft: "8px", color: "#52525b", fontSize: "10px" } },
             entry.id
           )
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           null,
           entry.breakpoints.map(
-            (bp, i) => React__default.default.createElement(
+            (bp, i) => import_react.default.createElement(
               "div",
               { key: i, style: { ...S.row, marginBottom: "2px" } },
-              React__default.default.createElement(
+              import_react.default.createElement(
                 "code",
                 { style: { color: "#818cf8", fontSize: "11px" } },
                 `\u2265 ${bp.minWidth}`
               ),
-              React__default.default.createElement(
+              import_react.default.createElement(
                 "span",
                 { style: { color: "#6b7280", fontSize: "11px" } },
                 bp.classes
@@ -493,8 +536,8 @@ function ContainerPanel() {
   );
 }
 function TokensPanel() {
-  const [tokens, setTokens_] = React.useState({});
-  React.useEffect(() => {
+  const [tokens, setTokens_] = (0, import_react.useState)({});
+  (0, import_react.useEffect)(() => {
     const engine = window.__TW_TOKEN_ENGINE__;
     if (!engine) return;
     setTokens_(engine.getTokens());
@@ -504,35 +547,35 @@ function TokensPanel() {
   }, []);
   const entries = Object.entries(tokens);
   if (entries.length === 0) {
-    return React__default.default.createElement(
+    return import_react.default.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(
+      import_react.default.createElement("span", { style: { opacity: 0.4 } }, "No live tokens registered."),
+      import_react.default.createElement("br", null),
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.3, fontSize: "11px" } },
         'Use liveToken({ primary: "#3b82f6" }) to register tokens.'
       )
     );
   }
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
-    React__default.default.createElement(
+    import_react.default.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 import_react.default.createElement(
         "div",
         { key: name, style: { ...S.row, padding: "6px 12px", borderBottom: "1px solid #18181b" } },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "8px" } },
-          isColor && React__default.default.createElement("div", {
+          isColor && import_react.default.createElement("div", {
             style: {
               width: "16px",
               height: "16px",
@@ -542,9 +585,9 @@ function TokensPanel() {
               flexShrink: 0
             }
           }),
-          React__default.default.createElement("span", { style: { color: "#a1a1aa", fontSize: "12px" } }, name)
+          import_react.default.createElement("span", { style: { color: "#a1a1aa", fontSize: "12px" } }, name)
         ),
-        isColor ? React__default.default.createElement("input", {
+        isColor ? import_react.default.createElement("input", {
           type: "color",
           defaultValue: value.startsWith("#") ? value : "#000000",
           style: {
@@ -558,7 +601,7 @@ function TokensPanel() {
             const engine = window.__TW_TOKEN_ENGINE__;
             if (engine) engine.setToken(name, e.target.value);
           }
-        }) : React__default.default.createElement("input", {
+        }) : import_react.default.createElement("input", {
           type: "text",
           defaultValue: value,
           style: {
@@ -581,12 +624,12 @@ 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] = (0, import_react.useState)(false);
+  const [results, setResults] = (0, import_react.useState)(null);
+  const [engineMetrics, setEngineMetrics] = (0, import_react.useState)(null);
+  const [metricsFetching, setMetricsFetching] = (0, import_react.useState)(false);
+  const [metricsError, setMetricsError] = (0, import_react.useState)(null);
+  const loadEngineMetrics = (0, import_react.useCallback)(async () => {
     setMetricsFetching(true);
     setMetricsError(null);
     try {
@@ -606,7 +649,7 @@ function AnalyzerPanel() {
       setMetricsFetching(false);
     }
   }, []);
-  const runScan = React.useCallback(() => {
+  const runScan = (0, import_react.useCallback)(() => {
     setScanning(true);
     setTimeout(() => {
       const twEls = document.querySelectorAll("[data-tw]");
@@ -638,14 +681,14 @@ function AnalyzerPanel() {
       setScanning(false);
     }, 100);
   }, []);
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       { style: { padding: "10px 12px" } },
       // ── DOM Scan ──────────────────────────────────────────────────────────
-      React__default.default.createElement(
+      import_react.default.createElement(
         "button",
         {
           style: { ...S.copyBtn, borderTop: "none", color: "#60a5fa", fontWeight: "600" },
@@ -655,58 +698,58 @@ function AnalyzerPanel() {
         scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
       ),
       // ── Engine Metrics (dari dashboard) ───────────────────────────────────
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.section, marginTop: "8px" } },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { ...S.sectionTitle, marginBottom: "6px" } },
           "\u26A1 Engine Metrics"
         ),
-        engineMetrics ? React__default.default.createElement(
+        engineMetrics ? import_react.default.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Build"),
-            React__default.default.createElement(
+            import_react.default.createElement("span", { style: S.varKey }, "Build"),
+            import_react.default.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               engineMetrics.buildMs !== null ? `${engineMetrics.buildMs}ms` : "\u2014"
             )
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Classes"),
-            React__default.default.createElement(
+            import_react.default.createElement("span", { style: S.varKey }, "Classes"),
+            import_react.default.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               String(engineMetrics.classCount ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Files"),
-            React__default.default.createElement(
+            import_react.default.createElement("span", { style: S.varKey }, "Files"),
+            import_react.default.createElement(
               "span",
               { style: { ...S.varValue, color: "#34d399" } },
               String(engineMetrics.fileCount ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             { style: S.row },
-            React__default.default.createElement("span", { style: S.varKey }, "Mode"),
-            React__default.default.createElement(
+            import_react.default.createElement("span", { style: S.varKey }, "Mode"),
+            import_react.default.createElement(
               "span",
               { style: { color: "#a1a1aa", fontSize: "11px" } },
               String(engineMetrics.mode ?? "\u2014")
             )
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "button",
             {
               style: {
@@ -721,15 +764,15 @@ function AnalyzerPanel() {
             },
             "\u21BB Refresh"
           )
-        ) : metricsError ? React__default.default.createElement(
+        ) : metricsError ? import_react.default.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             { style: { color: "#f87171", fontSize: "11px", marginBottom: "6px" } },
             metricsError
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "button",
             {
               style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -738,10 +781,10 @@ function AnalyzerPanel() {
             },
             metricsFetching ? "Connecting..." : "\u21BB Retry"
           )
-        ) : React__default.default.createElement(
+        ) : import_react.default.createElement(
           "div",
           null,
-          React__default.default.createElement(
+          import_react.default.createElement(
             "div",
             {
               style: {
@@ -752,14 +795,14 @@ function AnalyzerPanel() {
               }
             },
             "Rust analyzer hanya tersedia via CLI atau dashboard.",
-            React__default.default.createElement("br", null),
-            React__default.default.createElement(
+            import_react.default.createElement("br", null),
+            import_react.default.createElement(
               "code",
               { style: { color: "#52525b", fontSize: "10px" } },
               "tw analyze . | tw dashboard"
             )
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "button",
             {
               style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -771,46 +814,46 @@ function AnalyzerPanel() {
         )
       ),
       // ── DOM Scan Results ──────────────────────────────────────────────────
-      results && React__default.default.createElement(
+      results && import_react.default.createElement(
         "div",
         null,
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement("div", { style: S.sectionTitle }, "Summary"),
-          React__default.default.createElement(
+          import_react.default.createElement("div", { style: S.sectionTitle }, "Summary"),
+          import_react.default.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))
+            import_react.default.createElement("span", { style: S.varKey }, "State components"),
+            import_react.default.createElement("span", { style: S.varValue }, String(results.stateCount))
           ),
-          React__default.default.createElement(
+          import_react.default.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))
+            import_react.default.createElement("span", { style: S.varKey }, "Container components"),
+            import_react.default.createElement("span", { style: S.varValue }, String(results.containerCount))
           ),
-          React__default.default.createElement(
+          import_react.default.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))
+            import_react.default.createElement("span", { style: S.varKey }, "Live tokens"),
+            import_react.default.createElement("span", { style: S.varValue }, String(results.tokenCount))
           )
         ),
-        results.duplicates.length > 0 ? React__default.default.createElement(
+        results.duplicates.length > 0 ? import_react.default.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement("div", { style: S.sectionTitle }, "Duplicate Class Sets"),
+          import_react.default.createElement("div", { style: S.sectionTitle }, "Duplicate Class Sets"),
           results.duplicates.map(
-            (d, i) => React__default.default.createElement(
+            (d, i) => import_react.default.createElement(
               "div",
               { key: i, style: { marginBottom: "8px" } },
-              React__default.default.createElement(
+              import_react.default.createElement(
                 "div",
                 { style: { color: "#f59e0b", fontSize: "11px", marginBottom: "2px" } },
                 d.names.join(", ")
               ),
-              React__default.default.createElement(
+              import_react.default.createElement(
                 "code",
                 {
                   style: {
@@ -823,10 +866,10 @@ function AnalyzerPanel() {
               )
             )
           )
-        ) : React__default.default.createElement(
+        ) : import_react.default.createElement(
           "div",
           { style: S.section },
-          React__default.default.createElement(
+          import_react.default.createElement(
             "span",
             { style: { color: "#34d399", fontSize: "12px" } },
             "\u2713 No duplicate class sets in current DOM"
@@ -838,14 +881,14 @@ function AnalyzerPanel() {
 }
 var DASHBOARD_BASE = "http://localhost:3000";
 function TracePanel() {
-  const [metrics, setMetrics] = React.useState(null);
-  const [history, setHistory] = React.useState([]);
-  const [summary, setSummary] = React.useState(null);
-  const [error, setError] = React.useState(null);
-  const [fetching, setFetching] = React.useState(false);
-  const [autoRefresh, setAutoRefresh] = React.useState(false);
-  const intervalRef = React.useRef(null);
-  const fetchAll = React.useCallback(async () => {
+  const [metrics, setMetrics] = (0, import_react.useState)(null);
+  const [history, setHistory] = (0, import_react.useState)([]);
+  const [summary, setSummary] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [fetching, setFetching] = (0, import_react.useState)(false);
+  const [autoRefresh, setAutoRefresh] = (0, import_react.useState)(false);
+  const intervalRef = (0, import_react.useRef)(null);
+  const fetchAll = (0, import_react.useCallback)(async () => {
     setFetching(true);
     setError(null);
     try {
@@ -872,7 +915,7 @@ function TracePanel() {
       setFetching(false);
     }
   }, []);
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (autoRefresh) {
       fetchAll();
       intervalRef.current = setInterval(fetchAll, 3e3);
@@ -887,7 +930,7 @@ function TracePanel() {
   const renderHistoryChart = () => {
     const vals = history.map((h) => h.buildMs ?? 0).filter((v) => v > 0);
     if (vals.length === 0) {
-      return React__default.default.createElement(
+      return import_react.default.createElement(
         "div",
         {
           style: {
@@ -903,7 +946,7 @@ function TracePanel() {
     const max = Math.max(...vals);
     const chartWidth = 296;
     const barWidth = Math.max(3, Math.floor(chartWidth / vals.length) - 1);
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       {
         style: {
@@ -916,7 +959,7 @@ function TracePanel() {
       },
       vals.map((v, i) => {
         const h = max > 0 ? Math.max(3, Math.round(v / max * 56)) : 3;
-        return React__default.default.createElement("div", {
+        return import_react.default.createElement("div", {
           key: i,
           style: {
             width: `${barWidth}px`,
@@ -938,15 +981,15 @@ function TracePanel() {
     const analyze = metrics.analyzeMs ?? 0;
     const compile = metrics.compileMs ?? 0;
     if (scanPct === 0 && analyzePct === 0 && compilePct === 0) return null;
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       null,
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.sectionTitle, marginBottom: "6px" } },
         "Pipeline Breakdown"
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         {
           style: {
@@ -957,41 +1000,41 @@ function TracePanel() {
             marginBottom: "6px"
           }
         },
-        scanPct > 0 && React__default.default.createElement("div", {
+        scanPct > 0 && import_react.default.createElement("div", {
           style: { width: `${scanPct}%`, background: "#60a5fa", minWidth: "2px" },
           title: `Scan: ${scan}ms`
         }),
-        analyzePct > 0 && React__default.default.createElement("div", {
+        analyzePct > 0 && import_react.default.createElement("div", {
           style: { width: `${analyzePct}%`, background: "#818cf8", minWidth: "2px" },
           title: `Analyze: ${analyze}ms`
         }),
-        compilePct > 0 && React__default.default.createElement("div", {
+        compilePct > 0 && import_react.default.createElement("div", {
           style: { width: `${compilePct}%`, background: "#34d399", minWidth: "2px" },
           title: `Compile: ${compile}ms`
         })
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { display: "flex", gap: "12px", fontSize: "10px" } },
-        React__default.default.createElement("span", { style: { color: "#60a5fa" } }, `Scan ${scan}ms`),
-        React__default.default.createElement("span", { style: { color: "#818cf8" } }, `Analyze ${analyze}ms`),
-        React__default.default.createElement("span", { style: { color: "#34d399" } }, `Compile ${compile}ms`)
+        import_react.default.createElement("span", { style: { color: "#60a5fa" } }, `Scan ${scan}ms`),
+        import_react.default.createElement("span", { style: { color: "#818cf8" } }, `Analyze ${analyze}ms`),
+        import_react.default.createElement("span", { style: { color: "#34d399" } }, `Compile ${compile}ms`)
       )
     );
   };
   if (error && !metrics) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       { style: S.scrollArea },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { padding: "12px" } },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { color: "#f87171", fontSize: "11px", marginBottom: "8px" } },
           error
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "button",
           {
             style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -1004,13 +1047,13 @@ function TracePanel() {
     );
   }
   if (!metrics) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "div",
       { style: S.scrollArea },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { padding: "12px" } },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           {
             style: {
@@ -1021,14 +1064,14 @@ function TracePanel() {
             }
           },
           "Build timeline dan pipeline events dari engine.",
-          React__default.default.createElement("br", null),
-          React__default.default.createElement(
+          import_react.default.createElement("br", null),
+          import_react.default.createElement(
             "code",
             { style: { color: "#52525b", fontSize: "10px" } },
             "tw dashboard"
           )
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "button",
           {
             style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
@@ -1040,14 +1083,14 @@ function TracePanel() {
       )
     );
   }
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.scrollArea },
     // ── Mode & Health ────────────────────────────────────────────────────
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       { style: { padding: "10px 12px 6px" } },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         {
           style: {
@@ -1057,10 +1100,10 @@ function TracePanel() {
             marginBottom: "8px"
           }
         },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "8px" } },
-          React__default.default.createElement("div", {
+          import_react.default.createElement("div", {
             style: {
               width: "8px",
               height: "8px",
@@ -1069,7 +1112,7 @@ function TracePanel() {
               boxShadow: `0 0 6px ${getModeColor(metrics.mode)}`
             }
           }),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "span",
             {
               style: {
@@ -1082,10 +1125,10 @@ function TracePanel() {
             metrics.mode ?? "unknown"
           )
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: { display: "flex", gap: "4px" } },
-          React__default.default.createElement(
+          import_react.default.createElement(
             "button",
             {
               style: {
@@ -1104,7 +1147,7 @@ function TracePanel() {
             },
             autoRefresh ? "\u25CF Live" : "\u25CB Live"
           ),
-          React__default.default.createElement(
+          import_react.default.createElement(
             "button",
             {
               style: {
@@ -1128,25 +1171,25 @@ function TracePanel() {
       )
     ),
     // ── Health Status ────────────────────────────────────────────────────
-    summary && React__default.default.createElement(
+    summary && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: { ...S.sectionTitle, marginBottom: "6px" } }, "Health"),
-      React__default.default.createElement(
+      import_react.default.createElement("div", { style: { ...S.sectionTitle, marginBottom: "6px" } }, "Health"),
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Status"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Status"),
+        import_react.default.createElement(
           "span",
           { style: { color: getHealthColor(summary.health?.status), fontWeight: "600" } },
           summary.health?.status ?? "unknown"
         )
       ),
-      summary.health?.issues && summary.health.issues.length > 0 && React__default.default.createElement(
+      summary.health?.issues && summary.health.issues.length > 0 && import_react.default.createElement(
         "div",
         { style: { marginTop: "4px" } },
         summary.health.issues.map(
-          (issue, i) => React__default.default.createElement(
+          (issue, i) => import_react.default.createElement(
             "div",
             {
               key: i,
@@ -1162,19 +1205,19 @@ function TracePanel() {
       )
     ),
     // ── Build Metrics ────────────────────────────────────────────────────
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.sectionTitle, marginBottom: "6px" } },
         "Build Metrics"
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Build"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Build"),
+        import_react.default.createElement(
           "span",
           {
             style: {
@@ -1185,23 +1228,23 @@ function TracePanel() {
           metrics.buildMs !== null ? `${metrics.buildMs}ms` : "\u2014"
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Classes"),
-        React__default.default.createElement("span", { style: S.varValue }, String(metrics.classCount ?? "\u2014"))
+        import_react.default.createElement("span", { style: S.varKey }, "Classes"),
+        import_react.default.createElement("span", { style: S.varValue }, String(metrics.classCount ?? "\u2014"))
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Files"),
-        React__default.default.createElement("span", { style: S.varValue }, String(metrics.fileCount ?? "\u2014"))
+        import_react.default.createElement("span", { style: S.varKey }, "Files"),
+        import_react.default.createElement("span", { style: S.varValue }, String(metrics.fileCount ?? "\u2014"))
       ),
-      metrics.cssBytes !== null && React__default.default.createElement(
+      metrics.cssBytes !== null && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "CSS"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "CSS"),
+        import_react.default.createElement(
           "span",
           { style: { ...S.varValue, color: "#818cf8" } },
           formatMemory(metrics.cssBytes)
@@ -1209,61 +1252,61 @@ function TracePanel() {
       )
     ),
     // ── Pipeline Breakdown ───────────────────────────────────────────────
-    React__default.default.createElement("div", { style: S.section }, renderPipelineBar()),
+    import_react.default.createElement("div", { style: S.section }, renderPipelineBar()),
     // ── Pipeline Events ──────────────────────────────────────────────────
-    (metrics.eventsReceived !== void 0 || metrics.batchesProcessed !== void 0) && React__default.default.createElement(
+    (metrics.eventsReceived !== void 0 || metrics.batchesProcessed !== void 0) && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.sectionTitle, marginBottom: "6px" } },
         "Pipeline Events"
       ),
-      metrics.eventsReceived !== void 0 && React__default.default.createElement(
+      metrics.eventsReceived !== void 0 && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Events received"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Events received"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(metrics.eventsReceived)
         )
       ),
-      metrics.eventsProcessed !== void 0 && React__default.default.createElement(
+      metrics.eventsProcessed !== void 0 && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Events processed"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Events processed"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(metrics.eventsProcessed)
         )
       ),
-      metrics.batchesProcessed !== void 0 && React__default.default.createElement(
+      metrics.batchesProcessed !== void 0 && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Batches"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Batches"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(metrics.batchesProcessed)
         )
       ),
-      metrics.incrementalUpdates !== void 0 && React__default.default.createElement(
+      metrics.incrementalUpdates !== void 0 && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Incremental"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Incremental"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#34d399", fontSize: "11px" } },
           String(metrics.incrementalUpdates)
         )
       ),
-      metrics.fullRescans !== void 0 && React__default.default.createElement(
+      metrics.fullRescans !== void 0 && import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Full rescans"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Full rescans"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#fbbf24", fontSize: "11px" } },
           String(metrics.fullRescans)
@@ -1271,15 +1314,15 @@ function TracePanel() {
       )
     ),
     // ── Memory ───────────────────────────────────────────────────────────
-    metrics.memoryMb && React__default.default.createElement(
+    metrics.memoryMb && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement("div", { style: { ...S.sectionTitle, marginBottom: "6px" } }, "Memory"),
-      React__default.default.createElement(
+      import_react.default.createElement("div", { style: { ...S.sectionTitle, marginBottom: "6px" } }, "Memory"),
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Heap used"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Heap used"),
+        import_react.default.createElement(
           "span",
           {
             style: {
@@ -1290,21 +1333,21 @@ function TracePanel() {
           `${metrics.memoryMb.heapUsed.toFixed(1)}MB`
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Heap total"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Heap total"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           `${metrics.memoryMb.heapTotal.toFixed(1)}MB`
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "RSS"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "RSS"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           `${metrics.memoryMb.rss.toFixed(1)}MB`
@@ -1312,49 +1355,49 @@ function TracePanel() {
       )
     ),
     // ── Workspace Summary ────────────────────────────────────────────────
-    summary && React__default.default.createElement(
+    summary && import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.sectionTitle, marginBottom: "6px" } },
         "Workspace"
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Packages"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Packages"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(summary.workspace?.totalPackages ?? "\u2014")
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Files"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Files"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(summary.workspace?.totalFiles ?? "\u2014")
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Classes"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Classes"),
+        import_react.default.createElement(
           "span",
           { style: { color: "#a1a1aa", fontSize: "11px" } },
           String(summary.workspace?.totalClasses ?? "\u2014")
         )
       ),
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.row },
-        React__default.default.createElement("span", { style: S.varKey }, "Cache hit rate"),
-        React__default.default.createElement(
+        import_react.default.createElement("span", { style: S.varKey }, "Cache hit rate"),
+        import_react.default.createElement(
           "span",
           {
             style: {
@@ -1367,10 +1410,10 @@ function TracePanel() {
       )
     ),
     // ── Build Time History ───────────────────────────────────────────────
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       { style: S.section },
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: { ...S.sectionTitle, marginBottom: "6px" } },
         `Build History (${history.length} snapshots)`
@@ -1378,7 +1421,7 @@ function TracePanel() {
       renderHistoryChart()
     ),
     // ── Timestamp ────────────────────────────────────────────────────────
-    metrics.generatedAt && React__default.default.createElement(
+    metrics.generatedAt && import_react.default.createElement(
       "div",
       {
         style: {
@@ -1394,16 +1437,16 @@ function TracePanel() {
 }
 function TwDevTools() {
   if (process.env.NODE_ENV === "production") return null;
-  const [state, setState] = React.useState({
+  const [state, setState] = (0, import_react.useState)({
     open: false,
     panel: "inspector",
     pinned: false,
     inspected: null,
     position: { x: 0, y: 0 }
   });
-  const overlayRef = React.useRef(null);
+  const overlayRef = (0, import_react.useRef)(null);
   const isInspecting = state.open && state.panel === "inspector";
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     const onKey = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
@@ -1421,7 +1464,7 @@ function TwDevTools() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, []);
-  const onMouseMove = React.useCallback(
+  const onMouseMove = (0, import_react.useCallback)(
     (e) => {
       if (!isInspecting || state.pinned) return;
       const twEl = findNearestTwElement(e.target);
@@ -1449,7 +1492,7 @@ function TwDevTools() {
     },
     [isInspecting, state.pinned]
   );
-  const onClick = React.useCallback(
+  const onClick = (0, import_react.useCallback)(
     (e) => {
       if (!isInspecting) return;
       if (overlayRef.current?.contains(e.target)) return;
@@ -1457,7 +1500,7 @@ function TwDevTools() {
     },
     [isInspecting]
   );
-  React.useEffect(() => {
+  (0, import_react.useEffect)(() => {
     if (!isInspecting) return;
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("click", onClick);
@@ -1467,7 +1510,7 @@ function TwDevTools() {
     };
   }, [isInspecting, onMouseMove, onClick]);
   if (!state.open) {
-    return React__default.default.createElement(
+    return import_react.default.createElement(
       "button",
       {
         onClick: () => setState((s) => ({ ...s, open: true })),
@@ -1485,11 +1528,11 @@ function TwDevTools() {
     { id: "analyzer", label: "Analyzer", icon: "\u{1F4CA}" },
     { id: "trace", label: "Trace", icon: "\u{1F52C}" }
   ];
-  return React__default.default.createElement(
+  return import_react.default.createElement(
     "div",
     { style: S.root },
     // ── Element highlight (inspector only) ──────────────────────────────
-    isInspecting && state.inspected && React__default.default.createElement("div", {
+    isInspecting && state.inspected && import_react.default.createElement("div", {
       style: {
         ...S.highlight,
         top: state.inspected.rect.top + window.scrollY,
@@ -1499,7 +1542,7 @@ function TwDevTools() {
       }
     }),
     // ── Component name label ────────────────────────────────────────────
-    isInspecting && state.inspected && React__default.default.createElement(
+    isInspecting && state.inspected && import_react.default.createElement(
       "div",
       {
         style: {
@@ -1519,7 +1562,7 @@ function TwDevTools() {
       state.inspected.componentName
     ),
     // ── Main DevTools panel ─────────────────────────────────────────────
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       {
         ref: overlayRef,
@@ -1536,19 +1579,19 @@ function TwDevTools() {
         }
       },
       // Header
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.header },
-        React__default.default.createElement(
+        import_react.default.createElement(
           "span",
           { style: S.componentName },
           state.inspected && state.panel === "inspector" ? state.inspected.componentName : "tailwind-styled-v4"
         ),
-        React__default.default.createElement(
+        import_react.default.createElement(
           "div",
           { style: S.headerActions },
-          state.pinned && React__default.default.createElement("span", { style: S.pinBadge }, "\u{1F4CC}"),
-          React__default.default.createElement(
+          state.pinned && import_react.default.createElement("span", { style: S.pinBadge }, "\u{1F4CC}"),
+          import_react.default.createElement(
             "button",
             {
               style: S.closeBtn,
@@ -1559,11 +1602,11 @@ function TwDevTools() {
         )
       ),
       // Tab bar
-      React__default.default.createElement(
+      import_react.default.createElement(
         "div",
         { style: S.tabBar },
         PANELS.map(
-          (p) => React__default.default.createElement(
+          (p) => import_react.default.createElement(
             "button",
             {
               key: p.id,
@@ -1581,23 +1624,23 @@ function TwDevTools() {
         )
       ),
       // Panel content
-      state.panel === "inspector" && React__default.default.createElement(InspectorPanel, {
+      state.panel === "inspector" && import_react.default.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 === "trace" && React__default.default.createElement(TracePanel, null)
+      state.panel === "state" && import_react.default.createElement(StatePanel, null),
+      state.panel === "container" && import_react.default.createElement(ContainerPanel, null),
+      state.panel === "tokens" && import_react.default.createElement(TokensPanel, null),
+      state.panel === "analyzer" && import_react.default.createElement(AnalyzerPanel, null),
+      state.panel === "trace" && import_react.default.createElement(TracePanel, null)
     ),
     // ── Status bar ──────────────────────────────────────────────────────
-    React__default.default.createElement(
+    import_react.default.createElement(
       "div",
       { style: S.statusBar },
-      React__default.default.createElement("span", null, "\u{1F3A8} tailwind-styled-v4 DevTools"),
-      React__default.default.createElement(
+      import_react.default.createElement("span", null, "\u{1F3A8} tailwind-styled-v4 DevTools"),
+      import_react.default.createElement(
         "span",
         { style: { opacity: 0.6, fontSize: "10px" } },
         state.pinned ? "Click to unpin" : isInspecting ? "Hover to inspect \xB7 Click to pin \xB7 1-6 switch panel \xB7 Esc close" : "Ctrl+Shift+D close \xB7 1-6 switch panel"
@@ -1779,20 +1822,21 @@ var S = {
 };
 function DevToolsProvider() {
   if (process.env.NODE_ENV === "production") return null;
-  return React__default.default.createElement(TwDevTools);
+  return import_react.default.createElement(TwDevTools);
 }
-
-exports.DevToolsProvider = DevToolsProvider;
-exports.TwDevTools = TwDevTools;
-exports.fetchClassInspection = fetchClassInspection;
-exports.formatClassInspectionCli = formatClassInspectionCli;
-exports.formatClassInspectionJson = formatClassInspectionJson;
-exports.formatDuration = formatDuration;
-exports.formatMemory = formatMemory;
-exports.getBuildTimeColor = getBuildTimeColor;
-exports.getHealthColor = getHealthColor;
-exports.getMemoryColor = getMemoryColor;
-exports.getModeColor = getModeColor;
-exports.getPipelinePercentages = getPipelinePercentages;
-//# sourceMappingURL=devtools.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevToolsProvider,
+  TwDevTools,
+  fetchClassInspection,
+  formatClassInspectionCli,
+  formatClassInspectionJson,
+  formatDuration,
+  formatMemory,
+  getBuildTimeColor,
+  getHealthColor,
+  getMemoryColor,
+  getModeColor,
+  getPipelinePercentages
+});
 //# sourceMappingURL=devtools.js.map