livestylesync-overlay 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+interface MountOptions {
+    port?: number;
+}
+declare function mount(options?: MountOptions): void;
+
+export { mount };

package/dist/index.js

@@ -0,0 +1,411 @@
+// src/index.ts
+import { createRoot } from "react-dom/client";
+import { createElement } from "react";
+
+// src/Overlay.tsx
+import { useState, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/useWebSocket.ts
+import { useEffect, useRef } from "react";
+function useWebSocket(url) {
+  const ws = useRef(null);
+  useEffect(() => {
+    ws.current = new WebSocket(url);
+    ws.current.onopen = () => {
+      console.log("[LSS] connected");
+    };
+    ws.current.onclose = () => {
+      console.log("[LSS] disconnected");
+    };
+    return () => {
+      ws.current?.close();
+    };
+  }, [url]);
+  const send = (data) => {
+    if (ws.current?.readyState === WebSocket.OPEN) {
+      ws.current.send(JSON.stringify(data));
+    }
+  };
+  return { send };
+}
+
+// src/Overlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function rgbToHex(rgb) {
+  if (!rgb || rgb === "transparent") return "#ffffff";
+  const match = rgb.match(/\d+/g);
+  if (!match || match.length < 3) return "#000000";
+  return "#" + match.slice(0, 3).map((n) => parseInt(n).toString(16).padStart(2, "0")).join("");
+}
+function getComputed(el, prop) {
+  return window.getComputedStyle(el).getPropertyValue(prop).trim();
+}
+function findSourceStyle(el) {
+  for (const sheet of Array.from(document.styleSheets)) {
+    let fileUrl = sheet.href;
+    if (!fileUrl && sheet.ownerNode instanceof HTMLElement) {
+      fileUrl = sheet.ownerNode.getAttribute("data-vite-dev-id");
+    }
+    if (!fileUrl) continue;
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      try {
+        if (el.matches(rule.selectorText)) {
+          return { fileUrl, selector: rule.selectorText };
+        }
+      } catch {
+        continue;
+      }
+    }
+  }
+  return null;
+}
+function Overlay({ port = 3100 }) {
+  const [open, setOpen] = useState(false);
+  const [picking, setPicking] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const highlightRef = useRef2(null);
+  const overlayRootRef = useRef2(null);
+  const [padding, setPadding] = useState("0");
+  const [margin, setMargin] = useState("0");
+  const [color, setColor] = useState("#000000");
+  const [bg, setBg] = useState("#ffffff");
+  const [source, setSource] = useState(null);
+  const [origValues, setOrigValues] = useState({});
+  const [pendingChanges, setPendingChanges] = useState({});
+  const { send } = useWebSocket(`ws://localhost:${port}`);
+  useEffect2(() => {
+    if (!selected) return;
+    const p = getComputed(selected, "padding-top").replace("px", "");
+    const m = getComputed(selected, "margin-top").replace("px", "");
+    const c = rgbToHex(getComputed(selected, "color"));
+    const b = rgbToHex(getComputed(selected, "background-color"));
+    setPadding(p);
+    setMargin(m);
+    setColor(c);
+    setBg(b);
+    setSource(findSourceStyle(selected));
+    setOrigValues({ padding: p + "px", margin: m + "px", color: c, "background-color": b });
+    setPendingChanges({});
+  }, [selected]);
+  const apply = (prop, value) => {
+    if (!selected) return;
+    selected.style[prop] = value;
+  };
+  const applyToFile = () => {
+    if (!source) return;
+    Object.entries(pendingChanges).forEach(([prop, value]) => {
+      send({ ...source, prop, value });
+    });
+    setOrigValues((prev) => ({ ...prev, ...pendingChanges }));
+    setPendingChanges({});
+  };
+  const row = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    fontSize: 11,
+    color: "#aaa"
+  };
+  const numInput = {
+    background: "#2d2d4e",
+    border: "1px solid #555",
+    borderRadius: 4,
+    color: "#fff",
+    fontFamily: "monospace",
+    fontSize: 11,
+    padding: "2px 6px",
+    width: 60,
+    textAlign: "right"
+  };
+  const sectionLabel = {
+    margin: "12px 0 6px",
+    color: "#555",
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: 1
+  };
+  useEffect2(() => {
+    if (!picking) {
+      if (highlightRef.current) highlightRef.current.style.display = "none";
+      return;
+    }
+    document.body.style.cursor = "crosshair";
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (overlayRootRef.current?.contains(target)) return;
+      const rect = target.getBoundingClientRect();
+      const h = highlightRef.current;
+      if (!h) return;
+      h.style.display = "block";
+      h.style.top = rect.top + window.scrollY + "px";
+      h.style.left = rect.left + window.scrollX + "px";
+      h.style.width = rect.width + "px";
+      h.style.height = rect.height + "px";
+    };
+    const handleClick = (e) => {
+      const target = e.target;
+      if (overlayRootRef.current?.contains(target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setSelected(target);
+      setPicking(false);
+    };
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.body.style.cursor = "";
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [picking]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: highlightRef,
+        style: {
+          display: "none",
+          position: "absolute",
+          pointerEvents: "none",
+          outline: "2px solid #3B82F6",
+          background: "rgba(59,130,246,0.08)",
+          zIndex: 9998
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        style: {
+          position: "fixed",
+          bottom: 20,
+          right: 20,
+          width: 12,
+          height: 12,
+          borderRadius: "50%",
+          background: open ? "#5B21B6" : "#7C3AED",
+          border: "none",
+          cursor: "pointer",
+          zIndex: 9999,
+          padding: 0
+        }
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRootRef,
+        style: {
+          position: "fixed",
+          bottom: 44,
+          right: 20,
+          width: 280,
+          background: "#1a1a2e",
+          border: "1px solid #7C3AED",
+          borderRadius: 8,
+          padding: 16,
+          zIndex: 9999,
+          color: "#fff",
+          fontFamily: "monospace",
+          fontSize: 13
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: "0 0 12px" }, children: "LiveStyleSync" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setPicking((v) => !v),
+              style: {
+                width: "100%",
+                padding: "8px 0",
+                background: picking ? "#3B82F6" : "#2d2d4e",
+                color: "#fff",
+                border: "1px solid " + (picking ? "#3B82F6" : "#555"),
+                borderRadius: 6,
+                cursor: "pointer",
+                fontFamily: "monospace",
+                fontSize: 12
+              },
+              children: picking ? "\u2299 \u041A\u043B\u0438\u043A\u043D\u0438 \u043D\u0430 \u044D\u043B\u0435\u043C\u0435\u043D\u0442..." : "\u2196 \u0412\u044B\u0431\u0440\u0430\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442"
+            }
+          ),
+          selected && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("p", { style: { margin: "8px 0 4px", color: "#7C3AED", fontSize: 11 }, children: [
+              selected.tagName.toLowerCase(),
+              selected.className ? "." + String(selected.className).split(" ")[0] : ""
+            ] }),
+            /* @__PURE__ */ jsx("p", { style: sectionLabel, children: "Spacing" }),
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { children: "Padding" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: padding,
+                    style: numInput,
+                    onChange: (e) => {
+                      setPadding(e.target.value);
+                      apply("padding", e.target.value + "px");
+                      setPendingChanges((prev) => ({ ...prev, padding: e.target.value + "px" }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "#555" }, children: "px" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { children: "Margin" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: margin,
+                    style: numInput,
+                    onChange: (e) => {
+                      setMargin(e.target.value);
+                      apply("margin", e.target.value + "px");
+                      setPendingChanges((prev) => ({ ...prev, margin: e.target.value + "px" }));
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "#555" }, children: "px" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { style: sectionLabel, children: "Colors" }),
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { children: "Color" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: color,
+                  style: { ...numInput, width: 40, padding: 2, cursor: "pointer" },
+                  onChange: (e) => {
+                    setColor(e.target.value);
+                    apply("color", e.target.value);
+                    setPendingChanges((prev) => ({ ...prev, color: e.target.value }));
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: row, children: [
+              /* @__PURE__ */ jsx("span", { children: "Background" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: bg,
+                  style: { ...numInput, width: 40, padding: 2, cursor: "pointer" },
+                  onChange: (e) => {
+                    setBg(e.target.value);
+                    apply("backgroundColor", e.target.value);
+                    setPendingChanges((prev) => ({ ...prev, "background-color": e.target.value }));
+                  }
+                }
+              )
+            ] }),
+            Object.keys(pendingChanges).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { style: { ...sectionLabel, color: "#f59e0b" }, children: "Pending" }),
+              Object.entries(pendingChanges).map(([prop, value]) => /* @__PURE__ */ jsxs("div", { style: { ...row, color: "#f59e0b", marginBottom: 4 }, children: [
+                /* @__PURE__ */ jsx("span", { children: prop }),
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 10 }, children: [
+                  origValues[prop],
+                  " \u2192 ",
+                  value
+                ] })
+              ] }, prop)),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: applyToFile,
+                  style: {
+                    width: "100%",
+                    padding: "6px 0",
+                    marginTop: 8,
+                    background: source ? "#065f46" : "#2d2d4e",
+                    color: source ? "#6ee7b7" : "#555",
+                    border: "1px solid " + (source ? "#059669" : "#444"),
+                    borderRadius: 6,
+                    cursor: source ? "pointer" : "not-allowed",
+                    fontFamily: "monospace",
+                    fontSize: 11
+                  },
+                  children: source ? "\u2713 Apply to file" : "\u2717 No CSS source found"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ErrorBoundary.tsx
+import { Component } from "react";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            bottom: 20,
+            right: 20,
+            background: "#7f1d1d",
+            border: "1px solid #ef4444",
+            borderRadius: 8,
+            padding: "8px 12px",
+            color: "#fca5a5",
+            fontFamily: "monospace",
+            fontSize: 11,
+            zIndex: 9999,
+            maxWidth: 280
+          },
+          children: [
+            "LSS error: ",
+            this.state.error.message
+          ]
+        }
+      );
+    }
+    return this.props.children;
+  }
+};
+
+// src/index.ts
+function mount(options = {}) {
+  const container = document.createElement("div");
+  container.id = "livestylesync-root";
+  document.body.appendChild(container);
+  createRoot(container).render(
+    createElement(
+      ErrorBoundary,
+      null,
+      createElement(Overlay, { port: options.port ?? 3100 })
+    )
+  );
+}
+export {
+  mount
+};

package/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "livestylesync-overlay",
+	"version": "0.1.0",
+	"description": "Browser overlay for LiveStyleSync",
+	"license": "MIT",
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": ["dist"],
+	"scripts": {
+		"build": "tsup src/index.ts --format esm --dts --external react --external react-dom"
+	},
+	"peerDependencies": {
+		"react": ">=18",
+		"react-dom": ">=18"
+	},
+	"devDependencies": {
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^6.0.1",
+		"tsup": "^8.5.1",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.11"
+	}
+}