@rahmantech/litedesign 0.2.1 → 0.2.2

package/dist/extension/content.js

@@ -1,5 +1,25 @@
 "use strict";
 (() => {
+  // packages/extension/src/diff.ts
+  function signatureOf(node) {
+    return `${node.tag}|${node.text}`;
+  }
+  function nodeSignatures(graph) {
+    return graph.nodes.map(signatureOf);
+  }
+  function changedNodes(before, after) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const signature of before) counts.set(signature, (counts.get(signature) ?? 0) + 1);
+    const changed = [];
+    for (const node of after.nodes) {
+      const signature = signatureOf(node);
+      const seen = counts.get(signature) ?? 0;
+      if (seen > 0) counts.set(signature, seen - 1);
+      else changed.push(node);
+    }
+    return changed;
+  }
+
   // packages/extension/src/labels.ts
   var STORE_KEY = "litedesign-labels";
   function pageKey() {
@@ -129,6 +149,7 @@
 
   // packages/extension/src/store.ts
   var STORAGE_KEY = "litedesign";
+  var SNAPSHOT_KEY = "litedesign-snapshot";
   var DEFAULT_LAYERS = [...LAYERS];
   var DEFAULT_GRID = { step: 8, axis: "both" };
   var AXES = ["vertical", "horizontal", "both"];
@@ -186,6 +207,30 @@
   function isLayerName(value) {
     return typeof value === "string" && LAYERS.includes(value);
   }
+  function loadSnapshot() {
+    try {
+      const raw = sessionStorage.getItem(SNAPSHOT_KEY);
+      if (raw === null) return null;
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return null;
+      const signatures = parsed.filter((entry) => typeof entry === "string");
+      return signatures.length === parsed.length ? signatures : null;
+    } catch {
+      return null;
+    }
+  }
+  function saveSnapshot(graph) {
+    try {
+      sessionStorage.setItem(SNAPSHOT_KEY, JSON.stringify(nodeSignatures(graph)));
+    } catch {
+    }
+  }
+  function clearSnapshot() {
+    try {
+      sessionStorage.removeItem(SNAPSHOT_KEY);
+    } catch {
+    }
+  }
 
   // packages/extension/src/toolbar.ts
   var STYLE = `
@@ -524,18 +569,21 @@
     }
     const stored = await loadState();
     const layers = options.layers ?? stored.layers;
+    let autoFocus = null;
     if (window.__litedesign_state__ === "active") {
       window.__litedesign_layers__?.(layers);
     } else {
       window.__litedesign_state__ = "starting";
       try {
-        mount(core2, layers, stored.grid);
+        autoFocus = mount(core2, layers, stored.grid);
       } catch (error) {
         window.__litedesign_state__ = void 0;
         throw error;
       }
     }
-    if (options.focus !== void 0) window.__litedesign_set_focus__?.(options.focus);
+    if (options.focus !== void 0 && autoFocus === null) {
+      window.__litedesign_set_focus__?.(options.focus);
+    }
     return {
       enabled: overlayHost() !== void 0,
       layers,
@@ -570,17 +618,22 @@
       window.__litedesign_set_focus__ = void 0;
       window.__litedesign_focus_selector__ = void 0;
       window.__litedesign_state__ = void 0;
+      clearSnapshot();
       void saveState({ enabled: false, layers, focus: null, grid });
     };
     const refresh = () => {
+      const before2 = nodeSignatures(graph);
       graph = core2.buildGraph(root2);
       if (focusId !== null && !graph.nodes.some((node) => node.id === focusId)) {
         focusSelector = null;
         focusId = null;
         handle?.setFocus(null);
       }
+      const [firstChanged2] = changedNodes(before2, graph);
+      if (firstChanged2 !== void 0) setFocus(firstChanged2.selector);
       handle?.update(graph);
       toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
+      saveSnapshot(graph);
     };
     const setLayers = (next) => {
       layers = next;
@@ -707,6 +760,15 @@
       labels = next;
       applyMarks();
     });
+    const before = loadSnapshot();
+    const changed = before !== null ? changedNodes(before, graph) : [];
+    let autoFocus = null;
+    const [firstChanged] = changed;
+    if (firstChanged !== void 0) {
+      autoFocus = firstChanged.selector;
+      setFocus(firstChanged.selector);
+    }
+    saveSnapshot(graph);
     mountedHost = handle.host;
     window.__litedesign_layers__ = setLayers;
     window.__litedesign_set_focus__ = setFocus;
@@ -714,6 +776,7 @@
     window.__litedesign_teardown__ = teardown;
     window.__litedesign_state__ = "active";
     void saveState({ enabled: true, layers, focus: focusSelector, grid });
+    return autoFocus;
   }
 
   // packages/extension/src/bridge.ts
@@ -740,9 +803,10 @@
     switch (action) {
       case "ping":
         return { ok: true, result: true };
-      case "toggle":
+      case "toggle": {
         await boot(core2);
-        return { ok: true };
+        return { ok: true, result: { enabled: window.__litedesign_state__ === "active" } };
+      }
       case "overlay":
         return {
           ok: true,

package/dist/extension/core.iife.js

@@ -1248,7 +1248,7 @@ var __litedesign = (() => {
   }
 
   // packages/core/src/index.ts
-  var VERSION = "0.2.1";
+  var VERSION = "0.2.2";
   return __toCommonJS(index_exports);
 })();
 //# sourceMappingURL=core.iife.js.map

package/dist/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "litedesign",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Grid, gap, and alignment on the real web page.",
   "permissions": ["activeTab", "scripting", "storage"],
   "host_permissions": ["http://*/*", "https://*/*"],

package/dist/extension/popup.js

@@ -6,9 +6,12 @@
   var watchButton = element("watch");
   var overlayButton = element("overlay");
   var tab;
-  watchButton.addEventListener("click", () => void watchThisTab());
+  watchButton.addEventListener("click", () => void toggleWatch());
   overlayButton.addEventListener("click", () => void toggleOverlay());
   void init();
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) void init();
+  });
   async function init() {
     const [active] = await chrome.tabs.query({ active: true, currentWindow: true });
     tab = active;
@@ -17,14 +20,22 @@
     overlayButton.disabled = active?.id === void 0;
     await refresh();
   }
-  async function watchThisTab() {
+  async function toggleWatch() {
     if (tab?.id === void 0) return;
-    const reply = await ask({ type: "watch", tabId: tab.id });
+    const status = await ask({ type: "status" });
+    if (!status.ok) {
+      setStatus(status.error, true);
+      return;
+    }
+    const watching = status.result.page?.tabId === tab.id;
+    const reply = await ask(
+      watching ? { type: "unwatch", tabId: tab.id } : { type: "watch", tabId: tab.id }
+    );
     if (!reply.ok) {
       setStatus(reply.error, true);
       return;
     }
-    pageLine.textContent = reply.result.url;
+    if (!watching && reply.result !== null) pageLine.textContent = reply.result.url;
     await refresh();
   }
   async function toggleOverlay() {
@@ -34,7 +45,12 @@
       setStatus(reply.error, true);
       return;
     }
-    window.close();
+    await refresh();
+    if (reply.result.enabled) {
+      window.close();
+      return;
+    }
+    setStatus("overlay off");
   }
   async function refresh() {
     const reply = await ask({ type: "status" });
@@ -43,14 +59,23 @@
       return;
     }
     const status = reply.result;
+    if (!status.bridge) scheduleRecheck();
     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;
+    watchButton.textContent = watching ? "Unwatch this tab" : "Watch this tab";
+    watchButton.disabled = tab?.id === void 0;
     setStatus(
       status.bridge ? `bridge online \xB7 port ${status.port}` : "bridge offline \xB7 run: litedesign ws start",
       !status.bridge
     );
   }
+  function scheduleRecheck() {
+    if (recheckTimer !== void 0) return;
+    recheckTimer = setTimeout(() => {
+      recheckTimer = void 0;
+      void refresh();
+    }, 1e3);
+  }
+  var recheckTimer;
   function setStatus(text, bad = false) {
     statusLine.textContent = text;
     statusLine.classList.toggle("bad", bad);

package/dist/extension/sw.js

@@ -46,6 +46,9 @@ async function answer(message) {
     case "watch":
       if (typeof request.tabId !== "number") throw new Error("watch needs a tab id");
       return { ok: true, result: await watch(request.tabId) };
+    case "unwatch":
+      if (typeof request.tabId !== "number") throw new Error("unwatch needs a tab id");
+      return { ok: true, result: await unwatch(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) };
@@ -74,6 +77,18 @@ async function watch(tabId) {
   await applyStatus(tabId);
   return page;
 }
+async function unwatch(tabId) {
+  if (current?.tabId !== tabId) return null;
+  try {
+    await chrome.tabs.sendMessage(tabId, { action: "overlay", payload: { enabled: false } });
+  } catch {
+  }
+  current = void 0;
+  await savePage(void 0);
+  send({ type: "bye" });
+  await applyStatus();
+  return null;
+}
 async function toggleOverlay(tabId) {
   if (current?.tabId !== tabId) await watch(tabId);
   return toTab("toggle");
@@ -87,7 +102,25 @@ chrome.tabs.onRemoved.addListener((tabId) => {
 chrome.tabs.onUpdated.addListener((tabId, info) => {
   if (info.status !== "complete" || current?.tabId !== tabId) return;
   void ensureContent(tabId).catch(() => void 0);
+  void refreshWatchedPage(tabId).catch(() => void 0);
 });
+async function refreshWatchedPage(tabId) {
+  const tab = await chrome.tabs.get(tabId);
+  if (current?.tabId !== tabId) return;
+  if (tab.url === current.url) return;
+  if (!isSupported(tab.url)) {
+    current = void 0;
+    await savePage(void 0);
+    send({ type: "bye" });
+    await applyStatus();
+    return;
+  }
+  const page = { tabId, url: tab.url ?? "", title: tab.title ?? "" };
+  current = page;
+  await savePage(page);
+  send({ type: "hello", ...page, version: chrome.runtime.getManifest().version });
+  await applyStatus();
+}
 function connect() {
   if (socket !== void 0 && socket.readyState <= WebSocket.OPEN) return;
   const next = new WebSocket(`ws://127.0.0.1:${port}`);

package/dist/index.js

@@ -44,7 +44,7 @@ function isMode(value) {
 }
 
 // packages/cli/src/version.ts
-var VERSION = "0.2.1";
+var VERSION = "0.2.2";
 
 // packages/cli/src/ws.ts
 import { spawn } from "node:child_process";
@@ -1089,6 +1089,7 @@ function contrastRatio(a, b) {
   return (lighter + 0.05) / (darker + 0.05);
 }
 var SPACING_SCALE = 4;
+var OVERLAY_HOST_ID = "__litedesign_overlay__";
 function defineRule(id, run2) {
   return Object.assign(run2, { id });
 }
@@ -1329,7 +1330,14 @@ var ExtensionDriver = class {
   }
   async open(url) {
     this.#target = url;
-    if (this.#hub.find(url) !== void 0) return;
+    const cached = this.#hub.find(url);
+    if (cached !== void 0) {
+      try {
+        await this.#hub.request(cached.tabId, "ping", void 0);
+        return;
+      } catch {
+      }
+    }
     if (!this.#hub.hasClient()) throw new AwaitingUserError(url);
     const page = await this.#hub.requestAny("attach");
     if (!sameUrl(page.url, url)) throw new MismatchError(url, page.url);
@@ -1413,6 +1421,10 @@ import { existsSync as existsSync5 } from "node:fs";
 import path4 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 var DEFAULT_VIEWPORT = { width: 1280, height: 800 };
+var POLL_MS = 150;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 var PlaywrightDriver = class {
   #playwright;
   #corePath;
@@ -1431,6 +1443,25 @@ var PlaywrightDriver = class {
     await page.goto(url, { waitUntil: "load" });
     await this.#inject(page);
   }
+  /**
+   * "Ready" means the page was read, not that `open` once succeeded: the tab
+   * can be closed or navigated away after that. The loop checks liveness and
+   * the URL the session asked for.
+   */
+  async waitForPage(url, timeoutMs) {
+    for (let waited = 0; waited < timeoutMs; waited += POLL_MS) {
+      const page = this.#page;
+      if (page !== void 0 && !page.isClosed() && sameUrl(page.url(), url)) {
+        return { status: "ready", url: page.url() };
+      }
+      const current2 = this.#page;
+      if (current2 !== void 0 && !current2.isClosed()) {
+        return { status: "mismatch", url: current2.url() };
+      }
+      await sleep(POLL_MS);
+    }
+    return { status: "timeout" };
+  }
   async graph() {
     const page = await this.#requirePage();
     await this.#inject(page);
@@ -1520,10 +1551,11 @@ var PlaywrightDriver = class {
   }
   /**
    * Labels are marks the human makes through the toolbar; a headless page has
-   * no human in it, so there is nothing to read.
+   * no human in it. `null` says "cannot know", so `inspect` can report the
+   * truth instead of a `count: 0` that reads as "no labels pinned".
    */
   async labels() {
-    return [];
+    return null;
   }
   async overlay(options) {
     const page = await this.#requirePage();
@@ -1536,7 +1568,7 @@ var PlaywrightDriver = class {
         target.__litedesign_handle__ = void 0;
         if (!input.enabled) {
           target.__litedesign_focus__ = null;
-          return { enabled: false, layers: [], focus: null };
+          return { applied: false, focus: null };
         }
         const graph = target.__litedesign.buildGraph(document.body);
         const handle = target.__litedesign.render(graph, { layers: input.layers });
@@ -1553,11 +1585,19 @@ var PlaywrightDriver = class {
             element?.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
           }
         }
-        return { enabled: true, layers: input.layers, focus };
+        return { applied: true, focus };
       },
       { enabled: options.enabled, layers, focus: options.focus }
     );
-    return result;
+    const attached = await page.evaluate(
+      (hostId) => document.getElementById(hostId) !== null,
+      OVERLAY_HOST_ID
+    );
+    return {
+      enabled: attached,
+      layers: attached ? layers : [],
+      focus: attached ? result.focus : null
+    };
   }
   async close() {
     await this.#context?.close().catch(() => void 0);
@@ -1723,9 +1763,6 @@ async function waitForPage(timeoutMs) {
   }
   const expected = session.url;
   const driver = session.driver;
-  if (driver.waitForPage === void 0) {
-    return { status: "ready", url: expected, expected };
-  }
   const result = await driver.waitForPage(expected, timeoutMs);
   if (result.status === "ready") {
     session.ready = true;
@@ -1791,6 +1828,7 @@ function formatTree(graph, maxLines = MAX_TREE_LINES) {
   return lines.join("\n");
 }
 function labelsSummary(marks) {
+  if (marks === null) return null;
   const names = [];
   for (const mark of marks) {
     if (!names.includes(mark.label)) names.push(mark.label);
@@ -1883,7 +1921,7 @@ async function inspectTool(input) {
       nodes: graph.nodes.length,
       issues: graph.issues.length,
       truncated: graph.truncated,
-      labels
+      labels: labels ?? "unknown: this driver cannot read the toolbar"
     },
     tree: formatTree(graph)
   };
@@ -1896,6 +1934,12 @@ async function inspectTool(input) {
 async function labelsTool() {
   const driver = requirePage();
   const labels = await driver.labels();
+  if (labels === null) {
+    return textResult({
+      labels: null,
+      message: "the active driver cannot see the toolbar (headless page). Open the page in your own Chrome to read labels."
+    });
+  }
   return textResult({
     labels,
     count: labels.length

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rahmantech/litedesign",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Grid, gap, and alignment on the real web page, plus an MCP bridge for agents.",
   "license": "Apache-2.0",
   "author": "Muhammad Abdurrahman",
@@ -22,7 +22,7 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@litedesign/core": "0.2.1",
+    "@litedesign/core": "0.2.2",
     "@types/ws": "^8.18.2"
   },
   "publishConfig": {