@rahmantech/litedesign 0.0.0-stage → 0.2.0

package/dist/extension/manifest.json

@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "name": "litedesign",
+  "version": "0.1.0",
+  "description": "Grid, gap, and alignment on the real web page.",
+  "permissions": ["activeTab", "scripting", "storage"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "background": {
+    "service_worker": "sw.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "litedesign: watch this tab",
+    "default_popup": "popup.html"
+  }
+}

package/dist/extension/popup.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>litedesign</title>
+    <style>
+      :root {
+        color-scheme: dark;
+      }
+      body {
+        width: 264px;
+        margin: 0;
+        padding: 12px;
+        background: #111111;
+        color: #e5e5e5;
+        font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      h1 {
+        margin: 0 0 8px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+      }
+      .page {
+        margin: 0 0 10px;
+        color: #a3a3a3;
+        word-break: break-all;
+      }
+      button {
+        display: block;
+        width: 100%;
+        margin-bottom: 6px;
+        padding: 7px 9px;
+        border: 0;
+        border-radius: 6px;
+        background: #262626;
+        color: #d4d4d4;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+      }
+      button:hover:enabled {
+        background: #404040;
+      }
+      button.primary {
+        background: #3b82f6;
+        color: #ffffff;
+      }
+      button.primary:hover:enabled {
+        background: #2563eb;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+      .status {
+        margin: 8px 0 0;
+        color: #a3a3a3;
+      }
+      .status.bad {
+        color: #f87171;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>litedesign</h1>
+    <p class="page" id="page">reading the active tab…</p>
+    <button type="button" id="watch" class="primary">Watch this tab</button>
+    <button type="button" id="overlay">Toggle overlay</button>
+    <p class="status" id="status">checking the bridge…</p>
+    <script src="popup.js"></script>
+  </body>
+</html>

package/dist/extension/popup.js

@@ -0,0 +1,71 @@
+"use strict";
+(() => {
+  // packages/extension/src/popup.ts
+  var pageLine = element("page");
+  var statusLine = element("status");
+  var watchButton = element("watch");
+  var overlayButton = element("overlay");
+  var tab;
+  watchButton.addEventListener("click", () => void watchThisTab());
+  overlayButton.addEventListener("click", () => void toggleOverlay());
+  void init();
+  async function init() {
+    const [active] = await chrome.tabs.query({ active: true, currentWindow: true });
+    tab = active;
+    pageLine.textContent = active?.url ?? "no active tab";
+    watchButton.disabled = active?.id === void 0;
+    overlayButton.disabled = active?.id === void 0;
+    await refresh();
+  }
+  async function watchThisTab() {
+    if (tab?.id === void 0) return;
+    const reply = await ask({ type: "watch", tabId: tab.id });
+    if (!reply.ok) {
+      setStatus(reply.error, true);
+      return;
+    }
+    pageLine.textContent = reply.result.url;
+    await refresh();
+  }
+  async function toggleOverlay() {
+    if (tab?.id === void 0) return;
+    const reply = await ask({ type: "overlay", tabId: tab.id });
+    if (!reply.ok) {
+      setStatus(reply.error, true);
+      return;
+    }
+    window.close();
+  }
+  async function refresh() {
+    const reply = await ask({ type: "status" });
+    if (!reply.ok) {
+      setStatus(reply.error, true);
+      return;
+    }
+    const status = reply.result;
+    const watching = tab?.id !== void 0 && status.page?.tabId === tab.id;
+    watchButton.textContent = watching ? "Watching this tab" : "Watch this tab";
+    watchButton.disabled = tab?.id === void 0 || watching;
+    setStatus(
+      status.bridge ? `bridge online \xB7 port ${status.port}` : "bridge offline \xB7 run: litedesign ws start",
+      !status.bridge
+    );
+  }
+  function setStatus(text, bad = false) {
+    statusLine.textContent = text;
+    statusLine.classList.toggle("bad", bad);
+  }
+  async function ask(message) {
+    try {
+      return await chrome.runtime.sendMessage(message);
+    } catch (error) {
+      return { ok: false, error: error instanceof Error ? error.message : String(error) };
+    }
+  }
+  function element(id) {
+    const found = document.getElementById(id);
+    if (found === null) throw new Error(`missing element: ${id}`);
+    return found;
+  }
+})();
+//# sourceMappingURL=popup.js.map

package/dist/extension/sw.js

@@ -0,0 +1,349 @@
+// packages/extension/src/backoff.ts
+var RECONNECT_MIN = 1e3;
+var RECONNECT_MAX = 3e4;
+var OFFLINE_AFTER = 3;
+function backoffDelay(failures2) {
+  const step = Math.max(failures2 - 1, 0);
+  return Math.min(RECONNECT_MIN * 2 ** step, RECONNECT_MAX);
+}
+
+// packages/extension/src/sw.ts
+var DEFAULT_PORT = 8787;
+var PING_INTERVAL = 2e4;
+var SESSION_KEY = "page";
+var ONLINE_TITLE = "litedesign: watch this tab";
+var socket;
+var current;
+var port = DEFAULT_PORT;
+var failures = 0;
+var offline = false;
+var reconnectTimer;
+var pingTimer;
+var ready = start();
+async function start() {
+  port = await readPort();
+  current = await readPage();
+  connect();
+}
+function wake() {
+  retry();
+}
+chrome.tabs.onActivated.addListener(wake);
+chrome.windows.onFocusChanged.addListener(wake);
+chrome.runtime.onMessage.addListener((message, _sender, respond) => {
+  void answer(message).then(respond, (error) => {
+    respond({ ok: false, error: messageOf(error) });
+  });
+  return true;
+});
+async function answer(message) {
+  await ready;
+  if (typeof message !== "object" || message === null) throw new Error("invalid message");
+  const request = message;
+  switch (request.type) {
+    case "status":
+      return { ok: true, result: status() };
+    case "watch":
+      if (typeof request.tabId !== "number") throw new Error("watch needs a tab id");
+      return { ok: true, result: await watch(request.tabId) };
+    case "overlay":
+      if (typeof request.tabId !== "number") throw new Error("overlay needs a tab id");
+      return { ok: true, result: await toggleOverlay(request.tabId) };
+    default:
+      throw new Error(`unknown message: ${String(request.type)}`);
+  }
+}
+function status() {
+  return {
+    bridge: socket?.readyState === WebSocket.OPEN,
+    port,
+    page: current ?? null
+  };
+}
+async function watch(tabId) {
+  const tab = await chrome.tabs.get(tabId);
+  if (!isSupported(tab.url)) {
+    throw new Error("this tab is not an http(s) page. Open the page you want to measure.");
+  }
+  const page = { tabId, url: tab.url ?? "", title: tab.title ?? "" };
+  await ensureContent(tabId);
+  current = page;
+  await savePage(page);
+  send({ type: "hello", ...page, version: chrome.runtime.getManifest().version });
+  retry();
+  await applyStatus(tabId);
+  return page;
+}
+async function toggleOverlay(tabId) {
+  if (current?.tabId !== tabId) await watch(tabId);
+  return toTab("toggle");
+}
+chrome.tabs.onRemoved.addListener((tabId) => {
+  if (current?.tabId !== tabId) return;
+  current = void 0;
+  void savePage(void 0);
+  send({ type: "bye" });
+});
+chrome.tabs.onUpdated.addListener((tabId, info) => {
+  if (info.status !== "complete" || current?.tabId !== tabId) return;
+  void ensureContent(tabId).catch(() => void 0);
+});
+function connect() {
+  if (socket !== void 0 && socket.readyState <= WebSocket.OPEN) return;
+  const next = new WebSocket(`ws://127.0.0.1:${port}`);
+  socket = next;
+  next.addEventListener("open", () => {
+    failures = 0;
+    void setOnline();
+    if (current !== void 0) {
+      send({ type: "hello", ...current, version: chrome.runtime.getManifest().version });
+    }
+    startPing();
+  });
+  next.addEventListener("message", (event) => {
+    void onMessage(event.data);
+  });
+  next.addEventListener("close", () => {
+    if (socket === next) socket = void 0;
+    stopPing();
+    failures += 1;
+    if (current !== void 0 && failures >= OFFLINE_AFTER) void setOffline();
+    scheduleReconnect();
+  });
+  next.addEventListener("error", () => {
+  });
+}
+function retry() {
+  failures = 0;
+  if (reconnectTimer !== void 0) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = void 0;
+  }
+  connect();
+}
+function scheduleReconnect() {
+  if (reconnectTimer !== void 0) return;
+  const delay = backoffDelay(failures) + Math.round(Math.random() * 250);
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = void 0;
+    connect();
+  }, delay);
+}
+async function setOffline() {
+  const first = !offline;
+  offline = true;
+  if (first) {
+    console.info(
+      `[litedesign] no MCP server on ws://127.0.0.1:${port} after ${OFFLINE_AFTER} attempts. Start "litedesign mcp"; the bridge reconnects by itself.`
+    );
+  }
+  await applyStatus();
+}
+async function setOnline() {
+  if (!offline) return;
+  offline = false;
+  await applyStatus();
+}
+function offlineTitle() {
+  return `litedesign: no MCP server on port ${port} \u2014 start "litedesign mcp"`;
+}
+async function applyStatus(tabId = current?.tabId) {
+  const badge = offline ? "!" : "";
+  const title = offline ? offlineTitle() : ONLINE_TITLE;
+  try {
+    await chrome.action.setBadgeText({ text: badge });
+    await chrome.action.setBadgeBackgroundColor({ color: "#dc2626" });
+    await chrome.action.setTitle({ title });
+    if (tabId !== void 0) {
+      await chrome.action.setBadgeText({ tabId, text: badge });
+      await chrome.action.setTitle({ tabId, title });
+    }
+  } catch {
+  }
+}
+function startPing() {
+  stopPing();
+  pingTimer = setInterval(() => send({ type: "ping" }), PING_INTERVAL);
+}
+function stopPing() {
+  if (pingTimer !== void 0) clearInterval(pingTimer);
+  pingTimer = void 0;
+}
+function send(message) {
+  if (socket?.readyState !== WebSocket.OPEN) return;
+  socket.send(JSON.stringify(message));
+}
+async function onMessage(raw) {
+  let message;
+  try {
+    const parsed = JSON.parse(String(raw));
+    if (typeof parsed !== "object" || parsed === null) return;
+    message = parsed;
+  } catch {
+    return;
+  }
+  if (message.type === "ping") {
+    send({ type: "pong" });
+    return;
+  }
+  if (message.type === "request" && typeof message.id === "string" && typeof message.action === "string") {
+    await handleRequest(message.id, message.action, message.payload);
+  }
+}
+async function handleRequest(id, action, payload) {
+  try {
+    const result = await route(action, payload);
+    send({ type: "response", id, ok: true, result });
+  } catch (error) {
+    send({ type: "response", id, ok: false, error: messageOf(error) });
+  }
+}
+async function route(action, payload) {
+  switch (action) {
+    case "attach":
+      return attach();
+    case "graph":
+    case "measure":
+    case "overlay":
+    case "labels":
+      return toTab(action, payload);
+    case "screenshot":
+      return capture("screenshot_prepare", payload);
+    case "annotate":
+      return capture("annotate_prepare", payload);
+    default:
+      throw new Error(`unknown action: ${action}`);
+  }
+}
+async function attach() {
+  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+  if (tab?.id === void 0 || !isSupported(tab.url)) {
+    throw new Error(
+      "the active tab is not an http(s) page. Switch to the page you want to measure."
+    );
+  }
+  const page = { tabId: tab.id, url: tab.url ?? "", title: tab.title ?? "" };
+  await ensureContent(page.tabId);
+  current = page;
+  await savePage(page);
+  send({ type: "hello", ...page, version: chrome.runtime.getManifest().version });
+  return page;
+}
+async function capture(action, payload) {
+  const page = requirePage();
+  const tab = await chrome.tabs.get(page.tabId);
+  if (tab.active !== true) {
+    throw new Error("the page is not the active tab. Switch to it and try again.");
+  }
+  if (tab.windowId === void 0) throw new Error("the page has no window.");
+  const prepared = await toTabRaw(action, payload);
+  if (!prepared.ok) throw new Error(prepared.error);
+  const prep = prepared.result ?? {};
+  try {
+    const dataUrl = await chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" });
+    const base64 = dataUrl.slice(dataUrl.indexOf(",") + 1);
+    return {
+      data: prep.rect === void 0 ? base64 : await crop(base64, prep.rect, prep.dpr ?? 1)
+    };
+  } finally {
+    await toTabRaw("capture_cleanup").catch(() => void 0);
+  }
+}
+async function toTab(action, payload) {
+  const response = await toTabRaw(action, payload);
+  if (!response.ok) throw new Error(response.error);
+  return response.result;
+}
+async function toTabRaw(action, payload) {
+  const page = requirePage();
+  await ensureContent(page.tabId);
+  const response = await chrome.tabs.sendMessage(page.tabId, { action, payload });
+  if (response === void 0) throw new Error("the content script did not respond");
+  return response;
+}
+async function ensureContent(tabId) {
+  try {
+    const response = await chrome.tabs.sendMessage(tabId, { action: "ping" });
+    if (response?.ok === true) return;
+  } catch {
+  }
+  await chrome.scripting.executeScript({
+    target: { tabId },
+    files: ["core.iife.js", "content.js"]
+  });
+}
+async function crop(base64, rect, dpr) {
+  const bitmap = await createImageBitmap(toBlob(base64));
+  const x = clamp(Math.round(rect.x * dpr), 0, bitmap.width);
+  const y = clamp(Math.round(rect.y * dpr), 0, bitmap.height);
+  const w = clamp(Math.round(rect.w * dpr), 1, bitmap.width - x);
+  const h = clamp(Math.round(rect.h * dpr), 1, bitmap.height - y);
+  if (w <= 0 || h <= 0) throw new Error("the element is outside the visible viewport.");
+  const canvas = new OffscreenCanvas(w, h);
+  const context = canvas.getContext("2d");
+  if (context === null) throw new Error("could not create an offscreen canvas.");
+  context.drawImage(bitmap, x, y, w, h, 0, 0, w, h);
+  bitmap.close();
+  const blob = await canvas.convertToBlob({ type: "png" });
+  return toBase64(await blob.arrayBuffer());
+}
+function toBlob(base64) {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  return new Blob([bytes], { type: "image/png" });
+}
+function toBase64(buffer) {
+  const bytes = new Uint8Array(buffer);
+  const chunk = 32768;
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return btoa(binary);
+}
+function requirePage() {
+  if (current === void 0) {
+    throw new Error("no page is attached. Call inspect first so the extension can attach to it.");
+  }
+  return current;
+}
+function isSupported(url) {
+  return url !== void 0 && /^(https?|file):/.test(url);
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function messageOf(error) {
+  if (error instanceof Error && error.message !== "") return error.message;
+  if (typeof error === "string" && error !== "") return error;
+  return "unexpected error";
+}
+async function readPort() {
+  try {
+    const response = await fetch(chrome.runtime.getURL("config.json"), { cache: "no-store" });
+    if (!response.ok) return DEFAULT_PORT;
+    const config = await response.json();
+    const value = config.port;
+    return typeof value === "number" && Number.isInteger(value) && value > 0 && value < 65536 ? value : DEFAULT_PORT;
+  } catch {
+    return DEFAULT_PORT;
+  }
+}
+async function readPage() {
+  try {
+    const stored = await chrome.storage.session.get(SESSION_KEY);
+    const value = stored[SESSION_KEY];
+    return value !== void 0 && typeof value.tabId === "number" && typeof value.url === "string" ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+async function savePage(page) {
+  try {
+    if (page === void 0) await chrome.storage.session.remove(SESSION_KEY);
+    else await chrome.storage.session.set({ [SESSION_KEY]: page });
+  } catch {
+  }
+}
+//# sourceMappingURL=sw.js.map