tailwind-styled-v4 4.0.0 → 5.0.0

package/dist/devtools.js

@@ -1,25 +1,7 @@
+import './chunk-VZEJV27B.js';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 /* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function parseDataTw(dataTw) {
   if (!dataTw) return { name: "Unknown", classes: [] };
   const colonIdx = dataTw.indexOf(":");
@@ -32,15 +14,14 @@ function parseVariantAttr(v) {
   if (!v) return {};
   try {
     return JSON.parse(v);
-  } catch (e) {
+  } catch {
     return {};
   }
 }
 function findNearestTwElement(el) {
-  var _a;
   let cur = el;
   while (cur) {
-    if ((_a = cur.dataset) == null ? void 0 : _a.tw) return cur;
+    if (cur.dataset?.tw) return cur;
     cur = cur.parentElement;
   }
   return null;
@@ -119,8 +100,8 @@ function InspectorPanel({
         ([k, v]) => React.createElement(
           "div",
           { key: k, style: S.row },
-          React.createElement("code", { style: __spreadProps(__spreadValues({}, S.varKey), { color: "#f59e0b" }) }, `data-${k}`),
-          React.createElement("span", { style: __spreadProps(__spreadValues({}, S.varValue), { color: "#34d399" }) }, `"${v}"`)
+          React.createElement("code", { style: { ...S.varKey, color: "#f59e0b" } }, `data-${k}`),
+          React.createElement("span", { style: { ...S.varValue, color: "#34d399" } }, `"${v}"`)
         )
       )
     ),
@@ -137,10 +118,11 @@ function InspectorPanel({
             "code",
             {
               key: s,
-              style: __spreadProps(__spreadValues({}, S.classChip), {
+              style: {
+                ...S.classChip,
                 background: inspected.activeStates[s] === "true" ? "#065f46" : "#18181b",
                 borderColor: inspected.activeStates[s] === "true" ? "#34d399" : "#27272a"
-              })
+              }
             },
             s
           )
@@ -158,7 +140,7 @@ function InspectorPanel({
         inspected.containerBps.map(
           (bp) => React.createElement(
             "code",
-            { key: bp, style: __spreadProps(__spreadValues({}, S.classChip), { color: "#818cf8" }) },
+            { key: bp, style: { ...S.classChip, color: "#818cf8" } },
             bp
           )
         )
@@ -187,8 +169,7 @@ function InspectorPanel({
       {
         style: S.copyBtn,
         onClick: () => {
-          var _a;
-          (_a = navigator.clipboard) == null ? void 0 : _a.writeText(
+          navigator.clipboard?.writeText(
             JSON.stringify(
               {
                 component: inspected.componentName,
@@ -257,21 +238,22 @@ function StatePanel() {
           entry.states.map(
             (s) => React.createElement(
               "code",
-              { key: s, style: __spreadProps(__spreadValues({}, S.classChip), { color: "#f59e0b" }) },
+              { key: s, style: { ...S.classChip, color: "#f59e0b" } },
               `data-${s}`
             )
           )
         ),
         React.createElement(
           "div",
-          { style: __spreadProps(__spreadValues({}, S.row), { marginTop: "4px" }) },
+          { style: { ...S.row, marginTop: "4px" } },
           React.createElement(
             "span",
             {
-              style: __spreadProps(__spreadValues({}, S.sectionTitle), {
+              style: {
+                ...S.sectionTitle,
                 marginBottom: 0,
                 color: entry.cssInjected ? "#34d399" : "#ef4444"
-              })
+              }
             },
             entry.cssInjected ? "\u25CF CSS injected" : "\u25CB CSS pending"
           )
@@ -336,7 +318,7 @@ function ContainerPanel() {
           entry.breakpoints.map(
             (bp, i) => React.createElement(
               "div",
-              { key: i, style: __spreadProps(__spreadValues({}, S.row), { marginBottom: "2px" }) },
+              { key: i, style: { ...S.row, marginBottom: "2px" } },
               React.createElement(
                 "code",
                 { style: { color: "#818cf8", fontSize: "11px" } },
@@ -360,7 +342,7 @@ function TokensPanel() {
     const engine = window.__TW_TOKEN_ENGINE__;
     if (!engine) return;
     setTokens_(engine.getTokens());
-    const unsub = engine.subscribe((t) => setTokens_(__spreadValues({}, t)));
+    const unsub = engine.subscribe((t) => setTokens_({ ...t }));
     return unsub;
   }, []);
   const entries = Object.entries(tokens);
@@ -382,14 +364,14 @@ function TokensPanel() {
     { style: S.scrollArea },
     React.createElement(
       "div",
-      { style: __spreadProps(__spreadValues({}, S.sectionTitle), { padding: "8px 12px 4px", color: "#52525b" }) },
+      { style: { ...S.sectionTitle, padding: "8px 12px 4px", color: "#52525b" } },
       "Click color to edit \xB7 Changes apply instantly"
     ),
     entries.map(([name, value]) => {
       const isColor = value.startsWith("#") || value.startsWith("rgb") || value.startsWith("hsl");
       return React.createElement(
         "div",
-        { key: name, style: __spreadProps(__spreadValues({}, S.row), { padding: "6px 12px", borderBottom: "1px solid #18181b" }) },
+        { key: name, style: { ...S.row, padding: "6px 12px", borderBottom: "1px solid #18181b" } },
         React.createElement(
           "div",
           { style: { display: "flex", alignItems: "center", gap: "8px" } },
@@ -444,16 +426,35 @@ function TokensPanel() {
 function AnalyzerPanel() {
   const [scanning, setScanning] = useState(false);
   const [results, setResults] = useState(null);
+  const [engineMetrics, setEngineMetrics] = useState(null);
+  const [metricsFetching, setMetricsFetching] = useState(false);
+  const [metricsError, setMetricsError] = useState(null);
+  const loadEngineMetrics = useCallback(async () => {
+    setMetricsFetching(true);
+    setMetricsError(null);
+    try {
+      const res = await fetch("http://localhost:3000/metrics", { signal: AbortSignal.timeout(2e3) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setEngineMetrics(data);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setMetricsError(
+        msg.includes("Failed to fetch") || msg.includes("NetworkError") ? "Dashboard tidak berjalan. Jalankan: tw dashboard" : msg
+      );
+      setEngineMetrics(null);
+    } finally {
+      setMetricsFetching(false);
+    }
+  }, []);
   const runScan = useCallback(() => {
     setScanning(true);
     setTimeout(() => {
-      var _a, _b, _c, _d;
       const twEls = document.querySelectorAll("[data-tw]");
       const classMap = /* @__PURE__ */ new Map();
       for (const el of twEls) {
         const { name, classes } = (() => {
-          var _a2;
-          const dTw = (_a2 = el.dataset.tw) != null ? _a2 : null;
+          const dTw = el.dataset.tw ?? null;
           if (!dTw) return { name: "?", classes: [] };
           const ci = dTw.indexOf(":");
           return {
@@ -471,9 +472,9 @@ function AnalyzerPanel() {
       const tokenEngine = window.__TW_TOKEN_ENGINE__;
       setResults({
         duplicates,
-        stateCount: (_a = stateReg == null ? void 0 : stateReg.size) != null ? _a : 0,
-        containerCount: (_b = containerReg == null ? void 0 : containerReg.size) != null ? _b : 0,
-        tokenCount: Object.keys((_d = (_c = tokenEngine == null ? void 0 : tokenEngine.getTokens) == null ? void 0 : _c.call(tokenEngine)) != null ? _d : {}).length
+        stateCount: stateReg?.size ?? 0,
+        containerCount: containerReg?.size ?? 0,
+        tokenCount: Object.keys(tokenEngine?.getTokens?.() ?? {}).length
       });
       setScanning(false);
     }, 100);
@@ -484,19 +485,131 @@ function AnalyzerPanel() {
     React.createElement(
       "div",
       { style: { padding: "10px 12px" } },
+      // ── DOM Scan ──────────────────────────────────────────────────────────
       React.createElement(
         "button",
         {
-          style: __spreadProps(__spreadValues({}, S.copyBtn), { borderTop: "none", color: "#60a5fa", fontWeight: "600" }),
+          style: { ...S.copyBtn, borderTop: "none", color: "#60a5fa", fontWeight: "600" },
           onClick: runScan,
           disabled: scanning
         },
         scanning ? "Scanning DOM..." : "\u25B6 Run DOM Scan"
       ),
+      // ── Engine Metrics (dari dashboard) ───────────────────────────────────
+      React.createElement(
+        "div",
+        { style: { ...S.section, marginTop: "8px" } },
+        React.createElement(
+          "div",
+          { style: { ...S.sectionTitle, marginBottom: "6px" } },
+          "\u26A1 Engine Metrics"
+        ),
+        engineMetrics ? React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Build"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              engineMetrics.buildMs != null ? `${engineMetrics.buildMs}ms` : "\u2014"
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Classes"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              String(engineMetrics.classCount ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Files"),
+            React.createElement(
+              "span",
+              { style: { ...S.varValue, color: "#34d399" } },
+              String(engineMetrics.fileCount ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "div",
+            { style: S.row },
+            React.createElement("span", { style: S.varKey }, "Mode"),
+            React.createElement(
+              "span",
+              { style: { color: "#a1a1aa", fontSize: "11px" } },
+              String(engineMetrics.mode ?? "\u2014")
+            )
+          ),
+          React.createElement(
+            "button",
+            {
+              style: {
+                ...S.copyBtn,
+                borderTop: "none",
+                color: "#52525b",
+                fontSize: "10px",
+                padding: "4px 0"
+              },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            "\u21BB Refresh"
+          )
+        ) : metricsError ? React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            { style: { color: "#f87171", fontSize: "11px", marginBottom: "6px" } },
+            metricsError
+          ),
+          React.createElement(
+            "button",
+            {
+              style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            metricsFetching ? "Connecting..." : "\u21BB Retry"
+          )
+        ) : React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "div",
+            {
+              style: { color: "#71717a", fontSize: "11px", lineHeight: 1.6, marginBottom: "6px" }
+            },
+            "Rust analyzer hanya tersedia via CLI atau dashboard.",
+            React.createElement("br", null),
+            React.createElement(
+              "code",
+              { style: { color: "#52525b", fontSize: "10px" } },
+              "tw analyze . | tw dashboard"
+            )
+          ),
+          React.createElement(
+            "button",
+            {
+              style: { ...S.copyBtn, borderTop: "none", color: "#34d399", fontWeight: "600" },
+              onClick: loadEngineMetrics,
+              disabled: metricsFetching
+            },
+            metricsFetching ? "Connecting..." : "\u26A1 Load from Dashboard"
+          )
+        )
+      ),
+      // ── DOM Scan Results ──────────────────────────────────────────────────
       results && React.createElement(
         "div",
         null,
-        // Summary
         React.createElement(
           "div",
           { style: S.section },
@@ -520,7 +633,6 @@ function AnalyzerPanel() {
             React.createElement("span", { style: S.varValue }, String(results.tokenCount))
           )
         ),
-        // Duplicates
         results.duplicates.length > 0 ? React.createElement(
           "div",
           { style: S.section },
@@ -547,7 +659,7 @@ function AnalyzerPanel() {
               )
             )
           )
-        ) : results && React.createElement(
+        ) : React.createElement(
           "div",
           { style: S.section },
           React.createElement(
@@ -575,56 +687,52 @@ function TwDevTools() {
     const onKey = (e) => {
       if (e.ctrlKey && e.shiftKey && e.key === "D") {
         e.preventDefault();
-        setState((s) => __spreadProps(__spreadValues({}, s), { open: !s.open, inspected: null }));
+        setState((s) => ({ ...s, open: !s.open, inspected: null }));
       }
       if (e.key === "Escape")
-        setState((s) => __spreadProps(__spreadValues({}, s), { open: false, pinned: false, inspected: null }));
-      if (e.key === "1") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "inspector" }) : s);
-      if (e.key === "2") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "state" }) : s);
-      if (e.key === "3") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "container" }) : s);
-      if (e.key === "4") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "tokens" }) : s);
-      if (e.key === "5") setState((s) => s.open ? __spreadProps(__spreadValues({}, s), { panel: "analyzer" }) : s);
+        setState((s) => ({ ...s, open: false, pinned: false, inspected: null }));
+      if (e.key === "1") setState((s) => s.open ? { ...s, panel: "inspector" } : s);
+      if (e.key === "2") setState((s) => s.open ? { ...s, panel: "state" } : s);
+      if (e.key === "3") setState((s) => s.open ? { ...s, panel: "container" } : s);
+      if (e.key === "4") setState((s) => s.open ? { ...s, panel: "tokens" } : s);
+      if (e.key === "5") setState((s) => s.open ? { ...s, panel: "analyzer" } : s);
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, []);
   const onMouseMove = useCallback(
     (e) => {
-      var _a;
       if (!isInspecting || state.pinned) return;
       const twEl = findNearestTwElement(e.target);
       if (!twEl) {
-        setState((s) => __spreadProps(__spreadValues({}, s), { inspected: null, position: { x: e.clientX, y: e.clientY } }));
+        setState((s) => ({ ...s, inspected: null, position: { x: e.clientX, y: e.clientY } }));
         return;
       }
-      const { name, classes } = parseDataTw((_a = twEl.dataset.tw) != null ? _a : null);
-      setState((s) => {
-        var _a2;
-        return __spreadProps(__spreadValues({}, s), {
-          position: { x: e.clientX, y: e.clientY },
-          inspected: {
-            componentName: name,
-            element: twEl,
-            rect: twEl.getBoundingClientRect(),
-            twClasses: classes,
-            variantProps: parseVariantAttr((_a2 = twEl.dataset.twVariants) != null ? _a2 : null),
-            atomicMap: getAtomicMap(classes),
-            rawClassName: twEl.className,
-            stateNames: getStateNames(twEl),
-            activeStates: getActiveStates(twEl),
-            containerBps: getContainerBps(twEl)
-          }
-        });
-      });
+      const { name, classes } = parseDataTw(twEl.dataset.tw ?? null);
+      setState((s) => ({
+        ...s,
+        position: { x: e.clientX, y: e.clientY },
+        inspected: {
+          componentName: name,
+          element: twEl,
+          rect: twEl.getBoundingClientRect(),
+          twClasses: classes,
+          variantProps: parseVariantAttr(twEl.dataset.twVariants ?? null),
+          atomicMap: getAtomicMap(classes),
+          rawClassName: twEl.className,
+          stateNames: getStateNames(twEl),
+          activeStates: getActiveStates(twEl),
+          containerBps: getContainerBps(twEl)
+        }
+      }));
     },
     [isInspecting, state.pinned]
   );
   const onClick = useCallback(
     (e) => {
-      var _a;
       if (!isInspecting) return;
-      if ((_a = overlayRef.current) == null ? void 0 : _a.contains(e.target)) return;
-      setState((s) => __spreadProps(__spreadValues({}, s), { pinned: !s.pinned && !!s.inspected }));
+      if (overlayRef.current?.contains(e.target)) return;
+      setState((s) => ({ ...s, pinned: !s.pinned && !!s.inspected }));
     },
     [isInspecting]
   );
@@ -641,7 +749,7 @@ function TwDevTools() {
     return React.createElement(
       "button",
       {
-        onClick: () => setState((s) => __spreadProps(__spreadValues({}, s), { open: true })),
+        onClick: () => setState((s) => ({ ...s, open: true })),
         style: S.toggleBtn,
         title: "tailwind-styled-v4 DevTools (Ctrl+Shift+D)"
       },
@@ -660,12 +768,13 @@ function TwDevTools() {
     { style: S.root },
     // ── Element highlight (inspector only) ──────────────────────────────
     isInspecting && state.inspected && React.createElement("div", {
-      style: __spreadProps(__spreadValues({}, S.highlight), {
+      style: {
+        ...S.highlight,
         top: state.inspected.rect.top + window.scrollY,
         left: state.inspected.rect.left + window.scrollX,
         width: state.inspected.rect.width,
         height: state.inspected.rect.height
-      })
+      }
     }),
     // ── Component name label ────────────────────────────────────────────
     isInspecting && state.inspected && React.createElement(
@@ -692,15 +801,17 @@ function TwDevTools() {
       "div",
       {
         ref: overlayRef,
-        style: state.panel === "inspector" && state.inspected ? __spreadProps(__spreadValues({}, S.panel), {
+        style: state.panel === "inspector" && state.inspected ? {
+          ...S.panel,
           top: Math.min(state.position.y + 16, window.innerHeight - 460),
           left: Math.min(state.position.x + 16, window.innerWidth - 320)
-        }) : __spreadProps(__spreadValues({}, S.panel), {
+        } : {
+          ...S.panel,
           top: "auto",
           bottom: "40px",
           right: "12px",
           left: "auto"
-        })
+        }
       },
       // Header
       React.createElement(
@@ -719,7 +830,7 @@ function TwDevTools() {
             "button",
             {
               style: S.closeBtn,
-              onClick: () => setState((s) => __spreadProps(__spreadValues({}, s), { open: false, pinned: false, inspected: null }))
+              onClick: () => setState((s) => ({ ...s, open: false, pinned: false, inspected: null }))
             },
             "\u2715"
           )
@@ -734,12 +845,13 @@ function TwDevTools() {
             "button",
             {
               key: p.id,
-              style: __spreadProps(__spreadValues({}, S.tab), {
+              style: {
+                ...S.tab,
                 background: state.panel === p.id ? "#18181b" : "none",
                 color: state.panel === p.id ? "#e4e4e7" : "#52525b",
                 borderBottom: state.panel === p.id ? "2px solid #3b82f6" : "2px solid transparent"
-              }),
-              onClick: () => setState((s) => __spreadProps(__spreadValues({}, s), { panel: p.id })),
+              },
+              onClick: () => setState((s) => ({ ...s, panel: p.id })),
               title: `${p.label} (${PANELS.findIndex((x) => x.id === p.id) + 1})`
             },
             `${p.icon} ${p.label}`