@bitovi/vybit 0.4.6 → 0.4.8

package/overlay/dist/overlay.js

@@ -1331,249 +1331,25 @@
     }
     return bestResult;
   }
-
-  // overlay/src/class-parser.ts
-  function deriveValueType(themeKey) {
-    if (themeKey === "colors") return "color";
-    if (themeKey !== null) return "scalar";
-    return "enum";
-  }
-  var PREFIX_MAP = [
-    // Spacing
-    { prefix: "px-", category: "spacing", themeKey: "spacing" },
-    { prefix: "py-", category: "spacing", themeKey: "spacing" },
-    { prefix: "pt-", category: "spacing", themeKey: "spacing" },
-    { prefix: "pr-", category: "spacing", themeKey: "spacing" },
-    { prefix: "pb-", category: "spacing", themeKey: "spacing" },
-    { prefix: "pl-", category: "spacing", themeKey: "spacing" },
-    { prefix: "ps-", category: "spacing", themeKey: "spacing" },
-    { prefix: "pe-", category: "spacing", themeKey: "spacing" },
-    { prefix: "p-", category: "spacing", themeKey: "spacing" },
-    { prefix: "mx-", category: "spacing", themeKey: "spacing" },
-    { prefix: "my-", category: "spacing", themeKey: "spacing" },
-    { prefix: "mt-", category: "spacing", themeKey: "spacing" },
-    { prefix: "mr-", category: "spacing", themeKey: "spacing" },
-    { prefix: "mb-", category: "spacing", themeKey: "spacing" },
-    { prefix: "ml-", category: "spacing", themeKey: "spacing" },
-    { prefix: "ms-", category: "spacing", themeKey: "spacing" },
-    { prefix: "me-", category: "spacing", themeKey: "spacing" },
-    { prefix: "m-", category: "spacing", themeKey: "spacing" },
-    { prefix: "gap-x-", category: "spacing", themeKey: "spacing" },
-    { prefix: "gap-y-", category: "spacing", themeKey: "spacing" },
-    { prefix: "gap-", category: "spacing", themeKey: "spacing" },
-    { prefix: "space-x-", category: "spacing", themeKey: "spacing" },
-    { prefix: "space-y-", category: "spacing", themeKey: "spacing" },
-    // Sizing
-    { prefix: "min-w-", category: "sizing", themeKey: "spacing" },
-    { prefix: "max-w-", category: "sizing", themeKey: "spacing" },
-    { prefix: "min-h-", category: "sizing", themeKey: "spacing" },
-    { prefix: "max-h-", category: "sizing", themeKey: "spacing" },
-    { prefix: "size-", category: "sizing", themeKey: "spacing" },
-    { prefix: "w-", category: "sizing", themeKey: "spacing" },
-    { prefix: "h-", category: "sizing", themeKey: "spacing" },
-    // Color
-    { prefix: "bg-", category: "color", themeKey: "colors" },
-    { prefix: "ring-", category: "color", themeKey: "colors" },
-    { prefix: "outline-", category: "color", themeKey: "colors" },
-    { prefix: "fill-", category: "color", themeKey: "colors" },
-    { prefix: "stroke-", category: "color", themeKey: "colors" },
-    { prefix: "decoration-", category: "color", themeKey: "colors" },
-    // Typography
-    { prefix: "font-", category: "typography", themeKey: "fontWeight" },
-    { prefix: "leading-", category: "typography", themeKey: "lineHeight" },
-    { prefix: "tracking-", category: "typography", themeKey: "letterSpacing" },
-    // Borders
-    { prefix: "rounded-tl-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-tr-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-br-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-bl-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-t-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-r-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-b-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-l-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "rounded-", category: "borders", themeKey: "borderRadius" },
-    { prefix: "border-t-", category: "borders", themeKey: "borderWidth" },
-    { prefix: "border-r-", category: "borders", themeKey: "borderWidth" },
-    { prefix: "border-b-", category: "borders", themeKey: "borderWidth" },
-    { prefix: "border-l-", category: "borders", themeKey: "borderWidth" },
-    // Effects
-    { prefix: "opacity-", category: "effects", themeKey: null },
-    { prefix: "shadow-", category: "effects", themeKey: null },
-    // Layout
-    { prefix: "inset-", category: "layout", themeKey: "spacing" },
-    { prefix: "top-", category: "layout", themeKey: "spacing" },
-    { prefix: "right-", category: "layout", themeKey: "spacing" },
-    { prefix: "bottom-", category: "layout", themeKey: "spacing" },
-    { prefix: "left-", category: "layout", themeKey: "spacing" },
-    { prefix: "z-", category: "layout", themeKey: null },
-    // Flexbox & Grid
-    { prefix: "basis-", category: "flexbox", themeKey: "spacing" },
-    { prefix: "grid-cols-", category: "flexbox", themeKey: null },
-    { prefix: "grid-rows-", category: "flexbox", themeKey: null },
-    { prefix: "col-span-", category: "flexbox", themeKey: null },
-    { prefix: "row-span-", category: "flexbox", themeKey: null },
-    { prefix: "order-", category: "flexbox", themeKey: null }
-  ].sort((a, b) => b.prefix.length - a.prefix.length);
-  var BORDER_WIDTH_VALUES = /* @__PURE__ */ new Set(["0", "2", "4", "8"]);
-  var BORDER_STYLE_KEYWORDS = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
-  var FONT_SIZE_TOKENS = /* @__PURE__ */ new Set(["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"]);
-  var TEXT_ALIGN_KEYWORDS = /* @__PURE__ */ new Set(["left", "center", "right", "justify", "start", "end"]);
-  var EXACT_MATCH_MAP = {
-    // Borders
-    "rounded": { category: "borders", themeKey: "borderRadius" },
-    "border": { category: "borders", themeKey: "borderWidth" },
-    // Effects
-    "shadow": { category: "effects", themeKey: null },
-    // Typography
-    "underline": { category: "typography", themeKey: null },
-    "overline": { category: "typography", themeKey: null },
-    "line-through": { category: "typography", themeKey: null },
-    "no-underline": { category: "typography", themeKey: null },
-    "uppercase": { category: "typography", themeKey: null },
-    "lowercase": { category: "typography", themeKey: null },
-    "capitalize": { category: "typography", themeKey: null },
-    "normal-case": { category: "typography", themeKey: null },
-    "truncate": { category: "typography", themeKey: null },
-    "italic": { category: "typography", themeKey: null },
-    "not-italic": { category: "typography", themeKey: null },
-    // Layout
-    "block": { category: "layout", themeKey: null },
-    "inline-block": { category: "layout", themeKey: null },
-    "inline": { category: "layout", themeKey: null },
-    "flex": { category: "layout", themeKey: null },
-    "inline-flex": { category: "layout", themeKey: null },
-    "grid": { category: "layout", themeKey: null },
-    "inline-grid": { category: "layout", themeKey: null },
-    "hidden": { category: "layout", themeKey: null },
-    "table": { category: "layout", themeKey: null },
-    "contents": { category: "layout", themeKey: null },
-    "static": { category: "layout", themeKey: null },
-    "fixed": { category: "layout", themeKey: null },
-    "absolute": { category: "layout", themeKey: null },
-    "relative": { category: "layout", themeKey: null },
-    "sticky": { category: "layout", themeKey: null },
-    // Flexbox
-    "flex-row": { category: "flexbox", themeKey: null },
-    "flex-row-reverse": { category: "flexbox", themeKey: null },
-    "flex-col": { category: "flexbox", themeKey: null },
-    "flex-col-reverse": { category: "flexbox", themeKey: null },
-    "flex-wrap": { category: "flexbox", themeKey: null },
-    "flex-wrap-reverse": { category: "flexbox", themeKey: null },
-    "flex-nowrap": { category: "flexbox", themeKey: null },
-    "flex-1": { category: "flexbox", themeKey: null },
-    "flex-auto": { category: "flexbox", themeKey: null },
-    "flex-initial": { category: "flexbox", themeKey: null },
-    "flex-none": { category: "flexbox", themeKey: null },
-    "grow": { category: "flexbox", themeKey: null },
-    "grow-0": { category: "flexbox", themeKey: null },
-    "shrink": { category: "flexbox", themeKey: null },
-    "shrink-0": { category: "flexbox", themeKey: null },
-    "justify-start": { category: "flexbox", themeKey: null },
-    "justify-end": { category: "flexbox", themeKey: null },
-    "justify-center": { category: "flexbox", themeKey: null },
-    "justify-between": { category: "flexbox", themeKey: null },
-    "justify-around": { category: "flexbox", themeKey: null },
-    "justify-evenly": { category: "flexbox", themeKey: null },
-    "justify-stretch": { category: "flexbox", themeKey: null },
-    "items-start": { category: "flexbox", themeKey: null },
-    "items-end": { category: "flexbox", themeKey: null },
-    "items-center": { category: "flexbox", themeKey: null },
-    "items-baseline": { category: "flexbox", themeKey: null },
-    "items-stretch": { category: "flexbox", themeKey: null },
-    "self-auto": { category: "flexbox", themeKey: null },
-    "self-start": { category: "flexbox", themeKey: null },
-    "self-end": { category: "flexbox", themeKey: null },
-    "self-center": { category: "flexbox", themeKey: null },
-    "self-stretch": { category: "flexbox", themeKey: null },
-    "self-baseline": { category: "flexbox", themeKey: null }
-  };
-  var VARIANT_PREFIXES = /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|active:|disabled:|visited:|first:|last:|odd:|even:|group-hover:|focus-within:|focus-visible:|dark:|motion-safe:|motion-reduce:)+/;
-  function hasVariantPrefix(cls) {
-    return VARIANT_PREFIXES.test(cls);
-  }
-  function parseTextClass(value) {
-    if (FONT_SIZE_TOKENS.has(value)) {
-      return { category: "typography", valueType: "scalar", prefix: "text-", value, fullClass: `text-${value}`, themeKey: "fontSize" };
-    }
-    if (TEXT_ALIGN_KEYWORDS.has(value)) {
-      return { category: "typography", valueType: "enum", prefix: "text-", value, fullClass: `text-${value}`, themeKey: null };
-    }
-    return { category: "color", valueType: "color", prefix: "text-", value, fullClass: `text-${value}`, themeKey: "colors" };
-  }
-  function parseBorderClass(value) {
-    if (BORDER_WIDTH_VALUES.has(value)) {
-      return { category: "borders", valueType: "scalar", prefix: "border-", value, fullClass: `border-${value}`, themeKey: "borderWidth" };
-    }
-    if (BORDER_STYLE_KEYWORDS.has(value)) {
-      return { category: "borders", valueType: "enum", prefix: "border-", value, fullClass: `border-${value}`, themeKey: null };
-    }
-    return { category: "color", valueType: "color", prefix: "border-", value, fullClass: `border-${value}`, themeKey: "colors" };
-  }
-  function parseClasses(classString) {
-    const results = [];
-    const classes = classString.trim().split(/\s+/).filter(Boolean);
-    for (const cls of classes) {
-      if (hasVariantPrefix(cls)) continue;
-      const exact = EXACT_MATCH_MAP[cls];
-      if (exact) {
-        results.push({
-          category: exact.category,
-          valueType: deriveValueType(exact.themeKey),
-          prefix: cls,
-          value: "",
-          fullClass: cls,
-          themeKey: exact.themeKey
-        });
-        continue;
-      }
-      if (cls.startsWith("text-")) {
-        const value = cls.slice(5);
-        const parsed = parseTextClass(value);
-        if (parsed) results.push(parsed);
-        continue;
-      }
-      if (cls.startsWith("border-")) {
-        const value = cls.slice(7);
-        let longerMatch = false;
-        for (const entry of PREFIX_MAP) {
-          if (entry.prefix !== "border-" && cls.startsWith(entry.prefix)) {
-            longerMatch = true;
-            results.push({
-              category: entry.category,
-              valueType: deriveValueType(entry.themeKey),
-              prefix: entry.prefix,
-              value: cls.slice(entry.prefix.length),
-              fullClass: cls,
-              themeKey: entry.themeKey
-            });
-            break;
-          }
-        }
-        if (!longerMatch) {
-          const parsed = parseBorderClass(value);
-          if (parsed) results.push(parsed);
-        }
-        continue;
-      }
-      let matched = false;
-      for (const entry of PREFIX_MAP) {
-        if (cls.startsWith(entry.prefix)) {
-          results.push({
-            category: entry.category,
-            valueType: deriveValueType(entry.themeKey),
-            prefix: entry.prefix,
-            value: cls.slice(entry.prefix.length),
-            fullClass: cls,
-            themeKey: entry.themeKey
-          });
-          matched = true;
-          break;
-        }
-      }
-      if (!matched) {
-      }
-    }
-    return results;
+  function findDOMEquivalents(el) {
+    const classes = typeof el.className === "string" ? el.className.trim() : "";
+    if (!classes) return [el];
+    const exactMatches = Array.from(
+      document.querySelectorAll(el.tagName.toLowerCase())
+    ).filter((n) => n.className === el.className);
+    if (exactMatches.length >= 2) return exactMatches;
+    const parent = el.parentElement;
+    if (!parent) return [el];
+    const siblings = Array.from(parent.children).filter(
+      (c) => c instanceof HTMLElement && c.tagName === el.tagName
+    );
+    if (siblings.length < 2) return [el];
+    const majorityClass = siblings.map((n) => n.className).sort(
+      (a, b) => siblings.filter((n) => n.className === b).length - siblings.filter((n) => n.className === a).length
+    )[0];
+    const outliers = siblings.filter((n) => n.className !== majorityClass);
+    if (outliers.length > 1) return [el];
+    return siblings.filter((n) => n.className === majorityClass);
   }
 
   // overlay/src/context.ts
@@ -2497,16 +2273,9 @@ ${pad}</${tag}>`;
       return;
     }
     const fiber = getFiber(target);
-    if (!fiber) {
-      clearHoverPreview();
-      return;
-    }
-    const boundary = findComponentBoundary(fiber);
-    if (!boundary) {
-      clearHoverPreview();
-      return;
-    }
-    showHoverPreview(target, boundary.componentName);
+    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const label = boundary?.componentName ?? target.tagName.toLowerCase();
+    showHoverPreview(target, label);
   }
   var PENCIL_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
@@ -2795,26 +2564,27 @@ ${pad}</${tag}>`;
     e.stopPropagation();
     const target = e.target;
     const fiber = getFiber(target);
-    if (!fiber) {
-      showToast("Could not detect a React component for this element.");
-      return;
-    }
-    const boundary = findComponentBoundary(fiber);
-    if (!boundary) {
-      showToast("Could not detect a React component for this element.");
-      return;
-    }
-    const rootFiber = getRootFiber();
-    if (!rootFiber) {
-      showToast("Could not find React root.");
-      return;
-    }
-    const instances = findAllInstances(rootFiber, boundary.componentType);
-    const path = getChildPath(boundary.componentFiber, fiber);
+    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const hasFiber = fiber !== null && boundary !== null;
     const newNodes = [];
-    for (const inst of instances) {
-      const node = resolvePathToDOM(inst, path);
-      if (node) newNodes.push(node);
+    let componentName;
+    if (hasFiber) {
+      const rootFiber = getRootFiber();
+      if (!rootFiber) {
+        showToast("Could not find React root.");
+        return;
+      }
+      const instances = findAllInstances(rootFiber, boundary.componentType);
+      const path = getChildPath(boundary.componentFiber, fiber);
+      for (const inst of instances) {
+        const node = resolvePathToDOM(inst, path);
+        if (node) newNodes.push(node);
+      }
+      componentName = boundary.componentName;
+    } else {
+      const targetEl2 = target;
+      newNodes.push(...findDOMEquivalents(targetEl2));
+      componentName = targetEl2.tagName.toLowerCase();
     }
     if (addingMode && currentEquivalentNodes.length > 0) {
       addingMode = false;
@@ -2827,7 +2597,7 @@ ${pad}</${tag}>`;
       currentEquivalentNodes = merged;
       selectedInstanceIndices = /* @__PURE__ */ new Set();
       if (currentTargetEl) showDrawButton(currentTargetEl);
-      sendTo("panel", { type: "ELEMENT_SELECTED", componentName: currentBoundary?.componentName ?? boundary.componentName, instanceCount: merged.length, classes: currentTargetEl?.className ?? "", tailwindConfig: await fetchTailwindConfig() });
+      sendTo("panel", { type: "ELEMENT_SELECTED", componentName: currentBoundary?.componentName ?? componentName, instanceCount: merged.length, classes: currentTargetEl?.className ?? "", tailwindConfig: await fetchTailwindConfig() });
       return;
     }
     clearHighlights();
@@ -2836,7 +2606,7 @@ ${pad}</${tag}>`;
       equivalentNodes.push(node);
       highlightElement(node);
     }
-    if (equivalentNodes.length <= 1) {
+    if (hasFiber && equivalentNodes.length <= 1) {
       const repeated = findInlineRepeatedNodes(fiber, boundary.componentFiber);
       if (repeated.length > 0) {
         clearHighlights();
@@ -2847,24 +2617,32 @@ ${pad}</${tag}>`;
         }
       }
     }
-    console.log(`[overlay] ${boundary.componentName} \u2014 ${instances.length} instances, ${equivalentNodes.length} highlighted`);
+    console.log(`[overlay] ${componentName} \u2014 ${equivalentNodes.length} highlighted`);
     const config = await fetchTailwindConfig();
     const targetEl = target;
     const classString = targetEl.className;
     if (typeof classString !== "string") return;
-    const parsedClasses = parseClasses(classString);
-    if (parsedClasses.length === 0) return;
     currentEquivalentNodes = equivalentNodes;
     currentTargetEl = targetEl;
-    currentBoundary = { componentName: boundary.componentName };
+    currentBoundary = { componentName };
     selectedInstanceIndices = /* @__PURE__ */ new Set();
-    currentInstances = instances.map((inst, i) => {
-      const domNode = inst.stateNode instanceof HTMLElement ? inst.stateNode : null;
-      const label = domNode ? (domNode.innerText || "").trim().slice(0, 40) || `#${i + 1}` : `#${i + 1}`;
-      const parentFiber = inst.return;
-      const parent = parentFiber?.type?.name ?? "";
-      return { index: i, label, parent };
-    });
+    if (hasFiber) {
+      const rootFiber = getRootFiber();
+      const instances = rootFiber ? findAllInstances(rootFiber, boundary.componentType) : [];
+      currentInstances = instances.map((inst, i) => {
+        const domNode = inst.stateNode instanceof HTMLElement ? inst.stateNode : null;
+        const label = domNode ? (domNode.innerText || "").trim().slice(0, 40) || `#${i + 1}` : `#${i + 1}`;
+        const parentFiber = inst.return;
+        const parent = parentFiber?.type?.name ?? "";
+        return { index: i, label, parent };
+      });
+    } else {
+      currentInstances = equivalentNodes.map((node, i) => ({
+        index: i,
+        label: (node.innerText || "").trim().slice(0, 40) || `#${i + 1}`,
+        parent: node.parentElement?.tagName.toLowerCase() ?? ""
+      }));
+    }
     clearHoverPreview();
     setSelectMode(false);
     showDrawButton(targetEl);
@@ -2874,7 +2652,7 @@ ${pad}</${tag}>`;
     }
     sendTo("panel", {
       type: "ELEMENT_SELECTED",
-      componentName: boundary.componentName,
+      componentName,
       instanceCount: equivalentNodes.length,
       classes: classString,
       tailwindConfig: config
@@ -3211,6 +2989,12 @@ ${pad}</${tag}>`;
         currentEquivalentNodes.forEach((n) => highlightElement(n));
       }
     });
+    window.addEventListener("scroll", () => {
+      if (currentEquivalentNodes.length > 0) {
+        shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
+        currentEquivalentNodes.forEach((n) => highlightElement(n));
+      }
+    }, { capture: true, passive: true });
     window.addEventListener("overlay-ws-connected", () => {
       if (wasConnected) {
         showToast("Reconnected");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitovi/vybit",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "Browser overlay + inspector panel + MCP server for visually editing Tailwind CSS classes on a running React app",
   "keywords": [
     "tailwind",