@rahmantech/litedesign 0.0.0-stage → 0.2.0

package/dist/extension/content.js

@@ -0,0 +1,874 @@
+"use strict";
+(() => {
+  // packages/extension/src/labels.ts
+  var STORE_KEY = "litedesign-labels";
+  function pageKey() {
+    return `${location.origin}${location.pathname}`;
+  }
+  function hasStorage() {
+    return typeof chrome !== "undefined" && chrome.storage?.local !== void 0;
+  }
+  function sanitize(value) {
+    if (!Array.isArray(value)) return [];
+    const labels = [];
+    for (const entry of value) {
+      if (typeof entry !== "object" || entry === null) continue;
+      const record = entry;
+      if (typeof record.id !== "string" || record.id === "") continue;
+      if (typeof record.text !== "string" || record.text.trim() === "") continue;
+      if (typeof record.selector !== "string" || record.selector === "") continue;
+      labels.push({ id: record.id, text: record.text, selector: record.selector });
+    }
+    return labels;
+  }
+  async function readStore() {
+    if (!hasStorage()) return {};
+    try {
+      const stored = await chrome.storage.local.get(STORE_KEY);
+      const pages = stored[STORE_KEY];
+      return typeof pages === "object" && pages !== null ? pages : {};
+    } catch (error) {
+      console.warn("[litedesign] could not read labels", error);
+      return {};
+    }
+  }
+  async function writeStore(store) {
+    if (!hasStorage()) return;
+    try {
+      await chrome.storage.local.set({ [STORE_KEY]: store });
+    } catch (error) {
+      console.warn("[litedesign] could not save labels", error);
+    }
+  }
+  async function loadLabels() {
+    const store = await readStore();
+    return sanitize(store[pageKey()]);
+  }
+  async function replaceOnPage(next) {
+    const store = await readStore();
+    store[pageKey()] = next;
+    await writeStore(store);
+    return next;
+  }
+  async function addLabel(text, selector) {
+    const labels = await loadLabels();
+    const label = {
+      id: crypto.randomUUID(),
+      text: text.trim(),
+      selector
+    };
+    return replaceOnPage([...labels, label]);
+  }
+  async function removeLabel(id) {
+    const labels = await loadLabels();
+    return replaceOnPage(labels.filter((label) => label.id !== id));
+  }
+  async function renameLabel(id, text) {
+    const labels = await loadLabels();
+    return replaceOnPage(labels.map((label) => label.id === id ? { ...label, text } : label));
+  }
+
+  // packages/extension/src/observer.ts
+  var DEFAULT_DEBOUNCE = 150;
+  function observeChanges(options) {
+    const debounceMs = options.debounceMs ?? DEFAULT_DEBOUNCE;
+    let timer;
+    const schedule = () => {
+      if (timer !== void 0) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = void 0;
+        options.onChange();
+      }, debounceMs);
+    };
+    const mutation = new MutationObserver(schedule);
+    mutation.observe(options.root, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class", "style", "hidden"]
+    });
+    const resize = new ResizeObserver(schedule);
+    resize.observe(options.root);
+    const onResize = () => schedule();
+    const onNavigate = () => schedule();
+    window.addEventListener("resize", onResize);
+    window.addEventListener("popstate", onNavigate);
+    window.addEventListener("hashchange", onNavigate);
+    return {
+      stop() {
+        if (timer !== void 0) clearTimeout(timer);
+        mutation.disconnect();
+        resize.disconnect();
+        window.removeEventListener("resize", onResize);
+        window.removeEventListener("popstate", onNavigate);
+        window.removeEventListener("hashchange", onNavigate);
+      }
+    };
+  }
+
+  // packages/extension/src/types.ts
+  var LAYER_NAMES = {
+    grid: true,
+    guide: true,
+    gap: true,
+    issue: true,
+    dim: true,
+    focus: true,
+    hover: true
+  };
+  var LAYERS = Object.keys(LAYER_NAMES);
+  var TOGGLE_LAYERS = [
+    "grid",
+    "guide",
+    "gap",
+    "issue",
+    "dim",
+    "focus"
+  ];
+  var GRID_STEPS = [8, 12, 16, 24, 32, 48, 64, 96, 128];
+
+  // packages/extension/src/store.ts
+  var STORAGE_KEY = "litedesign";
+  var DEFAULT_LAYERS = [...LAYERS];
+  var DEFAULT_GRID = { step: 8, axis: "both" };
+  var AXES = ["vertical", "horizontal", "both"];
+  function defaultLayers() {
+    return [...DEFAULT_LAYERS];
+  }
+  async function loadState() {
+    if (!hasStorage2())
+      return { enabled: false, layers: defaultLayers(), focus: null, grid: DEFAULT_GRID };
+    try {
+      const stored = await chrome.storage.local.get(STORAGE_KEY);
+      return parseState(stored[STORAGE_KEY]);
+    } catch (error) {
+      console.warn("[litedesign] could not read preferences", error);
+      return { enabled: false, layers: defaultLayers(), focus: null, grid: DEFAULT_GRID };
+    }
+  }
+  async function saveState(state) {
+    if (!hasStorage2()) return;
+    try {
+      await chrome.storage.local.set({ [STORAGE_KEY]: state });
+    } catch (error) {
+      console.warn("[litedesign] could not save preferences", error);
+    }
+  }
+  function hasStorage2() {
+    return typeof chrome !== "undefined" && chrome.storage?.local !== void 0;
+  }
+  function parseState(value) {
+    if (typeof value !== "object" || value === null) {
+      return { enabled: false, layers: defaultLayers(), focus: null, grid: DEFAULT_GRID };
+    }
+    const record = value;
+    return {
+      // A value written before this flag existed means "not known to be on".
+      enabled: record.enabled === true,
+      layers: parseLayers(record.layers),
+      focus: typeof record.focus === "string" && record.focus !== "" ? record.focus : null,
+      grid: parseGrid(record.grid)
+    };
+  }
+  function parseGrid(value) {
+    if (typeof value !== "object" || value === null) return DEFAULT_GRID;
+    const record = value;
+    return {
+      step: GRID_STEPS.includes(record.step) ? record.step : DEFAULT_GRID.step,
+      axis: AXES.includes(record.axis) ? record.axis : DEFAULT_GRID.axis
+    };
+  }
+  function parseLayers(value) {
+    if (!Array.isArray(value)) return defaultLayers();
+    const valid = [...new Set(value.filter(isLayerName))];
+    return valid.includes("hover") ? valid : [...valid, "hover"];
+  }
+  function isLayerName(value) {
+    return typeof value === "string" && LAYERS.includes(value);
+  }
+
+  // packages/extension/src/toolbar.ts
+  var STYLE = `
+  .bar {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 10px;
+    background: rgba(17, 17, 17, 0.94);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+    color: #e5e5e5;
+    font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    pointer-events: auto;
+    user-select: none;
+  }
+  .brand {
+    padding: 0 2px;
+    color: #ffffff;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+  .stats {
+    padding: 0 4px;
+    color: #a3a3a3;
+    white-space: nowrap;
+  }
+  button {
+    padding: 5px 8px;
+    border: 0;
+    border-radius: 6px;
+    background: #262626;
+    color: #d4d4d4;
+    font: inherit;
+    cursor: pointer;
+  }
+  button:hover {
+    background: #404040;
+  }
+  button.on {
+    background: #3b82f6;
+    color: #ffffff;
+  }
+  button[data-action='close'] {
+    padding: 5px 7px;
+    background: transparent;
+    color: #a3a3a3;
+    font-size: 14px;
+  }
+  button[data-action='close']:hover {
+    background: #404040;
+    color: #ffffff;
+  }
+  .grid-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding-left: 6px;
+    margin-left: 2px;
+    border-left: 1px solid #404040;
+  }
+  .grid-group button {
+    padding: 4px 5px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .grid-group svg {
+    display: block;
+  }
+  .grid-step {
+    padding: 0 3px;
+    color: #a3a3a3;
+    font-variant-numeric: tabular-nums;
+    min-width: 22px;
+    text-align: center;
+  }
+  .label-popup {
+    position: fixed;
+    box-sizing: border-box;
+    width: 164px;
+    padding: 4px;
+    border: 1px solid #d97706;
+    border-radius: 8px;
+    background: rgba(17, 17, 17, 0.96);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+    pointer-events: auto;
+    align-items: center;
+    gap: 4px;
+    display: none;
+  }
+  .label-popup input {
+    box-sizing: border-box;
+    flex: 1;
+    min-width: 0;
+    padding: 4px 6px;
+    border: 0;
+    border-radius: 5px;
+    background: #111111;
+    color: #e5e5e5;
+    font: inherit;
+  }
+  .label-popup button {
+    padding: 4px 7px;
+    border: 0;
+    border-radius: 5px;
+    background: #262626;
+    color: #d4d4d4;
+    font: inherit;
+    cursor: pointer;
+  }
+  .label-popup button:hover {
+    background: #7f1d1d;
+    color: #ffffff;
+  }
+`;
+  var LABEL_INPUT = { width: 164, height: 34 };
+  function placeInput(rect, viewport) {
+    const margin = 8;
+    const gap = 8;
+    const left = Math.min(
+      Math.max(rect.left, margin),
+      Math.max(margin, viewport.width - LABEL_INPUT.width - margin)
+    );
+    const above = rect.top > LABEL_INPUT.height + gap * 2;
+    return { left, top: above ? rect.top - gap : rect.bottom + gap, above };
+  }
+  function createToolbar(options) {
+    const root2 = document.createElement("div");
+    root2.dataset.litedesignUi = "";
+    const style = document.createElement("style");
+    style.textContent = STYLE;
+    const bar = document.createElement("div");
+    bar.className = "bar";
+    const brand = document.createElement("span");
+    brand.className = "brand";
+    brand.textContent = "litedesign";
+    const stats = document.createElement("span");
+    stats.className = "stats";
+    stats.textContent = "measuring\u2026";
+    let enabled = new Set(options.layers);
+    const isEnabled = (layer) => enabled.has(layer);
+    bar.append(brand, stats);
+    const labelButton = document.createElement("button");
+    labelButton.type = "button";
+    labelButton.dataset.action = "label";
+    labelButton.textContent = "label";
+    labelButton.title = "Mark a part of the page with a name the agent can read";
+    labelButton.addEventListener("click", () => options.onLabelToggle());
+    const popup = document.createElement("div");
+    popup.className = "label-popup";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.placeholder = "label name";
+    const removeButton = document.createElement("button");
+    removeButton.type = "button";
+    removeButton.textContent = "\xD7";
+    removeButton.title = "Remove this label";
+    removeButton.hidden = true;
+    let committing = false;
+    let commit;
+    let remove;
+    const closeInput = () => {
+      popup.style.display = "none";
+    };
+    removeButton.addEventListener("mousedown", (event) => event.preventDefault());
+    removeButton.addEventListener("click", () => {
+      committing = true;
+      closeInput();
+      remove?.();
+    });
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        committing = true;
+        const value = input.value;
+        closeInput();
+        commit?.(value);
+      } else if (event.key === "Escape") {
+        closeInput();
+      }
+    });
+    input.addEventListener("blur", () => {
+      if (!committing) closeInput();
+      committing = false;
+    });
+    const buttons = /* @__PURE__ */ new Map();
+    for (const layer of TOGGLE_LAYERS) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.layer = layer;
+      button.textContent = layer;
+      button.title = `Toggle ${layer} layer`;
+      button.addEventListener("click", () => options.onToggle(layer, !isEnabled(layer)));
+      buttons.set(layer, button);
+      bar.append(button);
+    }
+    let grid = options.grid;
+    const gridButtons = /* @__PURE__ */ new Map();
+    const line = (d) => `<svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="${d}"/></svg>`;
+    const axes = [
+      ["vertical", "M3 1v10M9 1v10", "Grid: vertical lines only"],
+      ["horizontal", "M1 3h10M1 9h10", "Grid: horizontal lines only"],
+      ["both", "M3 1v10M9 1v10M1 3h10M1 9h10", "Grid: both directions"]
+    ];
+    const gridGroup = document.createElement("span");
+    gridGroup.className = "grid-group";
+    for (const [axis, path, title] of axes) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.axis = axis;
+      button.title = title;
+      button.innerHTML = line(path);
+      button.addEventListener("click", () => {
+        grid = { ...grid, axis };
+        setGrid(grid);
+        options.onGrid(grid);
+      });
+      gridButtons.set(axis, button);
+      gridGroup.append(button);
+    }
+    const stepLabel = document.createElement("span");
+    stepLabel.className = "grid-step";
+    const stepDown = document.createElement("button");
+    stepDown.type = "button";
+    stepDown.dataset.axis = "step-down";
+    stepDown.textContent = "\u2212";
+    stepDown.title = "Smaller grid spacing";
+    stepDown.addEventListener("click", () => {
+      const index = GRID_STEPS.indexOf(grid.step);
+      if (index > 0) {
+        grid = { ...grid, step: GRID_STEPS[index - 1] ?? grid.step };
+        setGrid(grid);
+        options.onGrid(grid);
+      }
+    });
+    const stepUp = document.createElement("button");
+    stepUp.type = "button";
+    stepUp.dataset.axis = "step-up";
+    stepUp.textContent = "+";
+    stepUp.title = "Larger grid spacing";
+    stepUp.addEventListener("click", () => {
+      const index = GRID_STEPS.indexOf(grid.step);
+      if (index !== -1 && index < GRID_STEPS.length - 1) {
+        grid = { ...grid, step: GRID_STEPS[index + 1] ?? grid.step };
+        setGrid(grid);
+        options.onGrid(grid);
+      }
+    });
+    gridGroup.append(stepDown, stepLabel, stepUp);
+    bar.append(labelButton, gridGroup);
+    const close = document.createElement("button");
+    close.type = "button";
+    close.dataset.action = "close";
+    close.textContent = "\xD7";
+    close.title = "Close litedesign";
+    close.setAttribute("aria-label", "Close litedesign");
+    close.addEventListener("click", () => options.onClose());
+    bar.append(close);
+    popup.append(input, removeButton);
+    root2.append(style, bar, popup);
+    const setLayers = (layers) => {
+      enabled = new Set(layers);
+      for (const [layer, button] of buttons) {
+        const on = enabled.has(layer);
+        button.setAttribute("aria-pressed", String(on));
+        button.classList.toggle("on", on);
+      }
+    };
+    const setGrid = (next) => {
+      grid = next;
+      for (const [axis, button] of gridButtons) {
+        const on = axis === grid.axis;
+        button.setAttribute("aria-pressed", String(on));
+        button.classList.toggle("on", on);
+      }
+      stepLabel.textContent = String(grid.step);
+    };
+    setLayers(options.layers);
+    setGrid(grid);
+    return {
+      element: root2,
+      setStats(nodes, issues, truncated) {
+        stats.textContent = `${nodes} nodes \xB7 ${issues} issues${truncated ? " \xB7 truncated" : ""}`;
+      },
+      setLayers,
+      setGrid,
+      setLabelMode(on) {
+        labelButton.classList.toggle("on", on);
+        labelButton.setAttribute("aria-pressed", String(on));
+        if (!on) closeInput();
+      },
+      askLabel(rect, initial, fn, onRemove) {
+        commit = fn;
+        remove = onRemove;
+        committing = false;
+        const placement = placeInput(rect, { width: window.innerWidth, height: window.innerHeight });
+        popup.style.left = `${placement.left}px`;
+        popup.style.top = `${placement.top}px`;
+        popup.style.transform = placement.above ? "translateY(-100%)" : "none";
+        removeButton.hidden = onRemove === void 0;
+        popup.style.display = "flex";
+        input.value = initial;
+        input.focus();
+        if (initial !== "") input.select();
+      }
+    };
+  }
+
+  // packages/extension/src/boot.ts
+  var mountedHost;
+  function overlayHost() {
+    return mountedHost;
+  }
+  async function boot(core2) {
+    if (window.__litedesign_state__ === "active") {
+      window.__litedesign_teardown__?.();
+      return;
+    }
+    if (window.__litedesign_state__ === "starting") return;
+    window.__litedesign_state__ = "starting";
+    const state = await loadState();
+    if (window.__litedesign_state__ !== "starting") return;
+    try {
+      mount(core2, state.layers, state.grid);
+    } catch (error) {
+      window.__litedesign_state__ = void 0;
+      throw error;
+    }
+  }
+  async function applyOverlay(core2, options) {
+    if (!options.enabled) {
+      window.__litedesign_teardown__?.();
+      return { enabled: false, layers: [], focus: null };
+    }
+    const stored = await loadState();
+    const layers = options.layers ?? stored.layers;
+    if (window.__litedesign_state__ === "active") {
+      window.__litedesign_layers__?.(layers);
+    } else {
+      window.__litedesign_state__ = "starting";
+      try {
+        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);
+    return {
+      enabled: overlayHost() !== void 0,
+      layers,
+      focus: window.__litedesign_focus_selector__?.() ?? null
+    };
+  }
+  function mount(core2, initial, initialGrid) {
+    const root2 = document.body ?? document.documentElement;
+    let layers = initial;
+    let grid = initialGrid;
+    let graph = core2.buildGraph(root2);
+    let handle;
+    let observer;
+    let focusSelector = null;
+    let focusId = null;
+    let labels = [];
+    let labelMode = false;
+    let toolbar;
+    const teardown = () => {
+      observer?.stop();
+      handle?.destroy();
+      handle = void 0;
+      observer = void 0;
+      mountedHost = void 0;
+      focusSelector = null;
+      focusId = null;
+      if (labelMode) document.removeEventListener("click", onLabelClick, true);
+      labelMode = false;
+      window.__litedesign_teardown__ = void 0;
+      window.__litedesign_layers__ = void 0;
+      window.__litedesign_set_focus__ = void 0;
+      window.__litedesign_focus_selector__ = void 0;
+      window.__litedesign_state__ = void 0;
+      void saveState({ enabled: false, layers, focus: null, grid });
+    };
+    const refresh = () => {
+      graph = core2.buildGraph(root2);
+      if (focusId !== null && !graph.nodes.some((node) => node.id === focusId)) {
+        focusSelector = null;
+        focusId = null;
+        handle?.setFocus(null);
+      }
+      handle?.update(graph);
+      toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
+    };
+    const setLayers = (next) => {
+      layers = next;
+      handle?.setLayers(layers);
+      toolbar.setLayers(layers);
+      void saveState({ enabled: true, layers, focus: focusSelector, grid });
+    };
+    const setGrid = (next) => {
+      grid = next;
+      handle?.setGrid(grid);
+      toolbar.setGrid(grid);
+      void saveState({ enabled: true, layers, focus: focusSelector, grid });
+    };
+    const setFocus = (selector) => {
+      if (selector === null) {
+        focusSelector = null;
+        focusId = null;
+        handle?.setFocus(null);
+        void saveState({ enabled: true, layers, focus: null, grid });
+        return;
+      }
+      const node = core2.resolveNode(graph, selector);
+      if (node === null) {
+        focusSelector = null;
+        focusId = null;
+        handle?.setFocus(null);
+        void saveState({ enabled: true, layers, focus: null, grid });
+        return;
+      }
+      focusSelector = node.selector;
+      focusId = node.id;
+      handle?.setFocus(node.id);
+      let element = null;
+      try {
+        element = document.querySelector(node.selector);
+      } catch {
+        element = null;
+      }
+      element?.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+      void saveState({ enabled: true, layers, focus: focusSelector, grid });
+    };
+    const applyMarks = () => {
+      handle?.setMarks(labels.map((label) => ({ selector: label.selector, text: label.text })));
+    };
+    const onLabelClick = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (target === handle?.host) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const selector = core2.pathOf(target);
+      const existing = labels.find((label) => label.selector === selector);
+      if (existing !== void 0) {
+        toolbar.askLabel(
+          target.getBoundingClientRect(),
+          existing.text,
+          (text) => {
+            const trimmed = text.trim();
+            if (trimmed === "" || trimmed === existing.text) return;
+            void renameLabel(existing.id, trimmed).then((next) => {
+              labels = next;
+              applyMarks();
+            });
+          },
+          () => {
+            void removeLabel(existing.id).then((next) => {
+              labels = next;
+              applyMarks();
+            });
+          }
+        );
+        return;
+      }
+      toolbar.askLabel(target.getBoundingClientRect(), "", (text) => {
+        const trimmed = text.trim();
+        if (trimmed === "") return;
+        void addLabel(trimmed, selector).then((next) => {
+          labels = next;
+          applyMarks();
+        });
+      });
+    };
+    const toggleLabelMode = () => {
+      labelMode = !labelMode;
+      toolbar.setLabelMode(labelMode);
+      if (labelMode) {
+        document.addEventListener("click", onLabelClick, true);
+      } else {
+        document.removeEventListener("click", onLabelClick, true);
+      }
+    };
+    toolbar = createToolbar({
+      layers,
+      grid,
+      onToggle(layer, enabled) {
+        setLayers(
+          enabled ? [.../* @__PURE__ */ new Set([...layers, layer])] : layers.filter((name) => name !== layer)
+        );
+      },
+      onLabelToggle: toggleLabelMode,
+      onGrid: setGrid,
+      onClose: teardown
+    });
+    toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
+    handle = core2.render(graph, { layers, toolbar: toolbar.element, grid });
+    observer = observeChanges({ root: root2, onChange: refresh });
+    void loadLabels().then((next) => {
+      labels = next;
+      applyMarks();
+    });
+    mountedHost = handle.host;
+    window.__litedesign_layers__ = setLayers;
+    window.__litedesign_set_focus__ = setFocus;
+    window.__litedesign_focus_selector__ = () => focusSelector;
+    window.__litedesign_teardown__ = teardown;
+    window.__litedesign_state__ = "active";
+    void saveState({ enabled: true, layers, focus: focusSelector, grid });
+  }
+
+  // packages/extension/src/bridge.ts
+  var TEMP_LAYERS = ["grid", "guide", "gap", "issue"];
+  var FULL_PAGE = "full-page screenshots need the Playwright driver. The extension can only capture the visible viewport.";
+  var suspended;
+  function installBridge(core2) {
+    window.__litedesign_toggle__ = () => void boot(core2);
+    if (window.__litedesign_bridge__ === true) return;
+    window.__litedesign_bridge__ = true;
+    if (typeof chrome === "undefined" || chrome.runtime?.onMessage === void 0) return;
+    chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+      void respond(core2, message).then(sendResponse, (error) => {
+        sendResponse({ ok: false, error: messageOf(error) });
+      });
+      return true;
+    });
+  }
+  async function respond(core2, raw) {
+    if (typeof raw !== "object" || raw === null) throw new Error("invalid message");
+    const message = raw;
+    const action = typeof message.action === "string" ? message.action : "";
+    const payload = message.payload ?? {};
+    switch (action) {
+      case "ping":
+        return { ok: true, result: true };
+      case "toggle":
+        await boot(core2);
+        return { ok: true };
+      case "overlay":
+        return {
+          ok: true,
+          result: await applyOverlay(core2, {
+            enabled: payload.enabled !== false,
+            layers: payload.layers,
+            focus: payload.focus
+          })
+        };
+      case "labels":
+        return { ok: true, result: { labels: await loadLabels() } };
+      case "graph":
+        return { ok: true, result: core2.buildGraph(root()) };
+      case "measure":
+        return { ok: true, result: measure(core2, payload.selector) };
+      case "screenshot_prepare":
+        return { ok: true, result: await prepareScreenshot(core2, payload) };
+      case "annotate_prepare":
+        return { ok: true, result: await prepareAnnotation(core2, payload) };
+      case "capture_cleanup":
+        await cleanup();
+        return { ok: true };
+      default:
+        throw new Error(`unknown action: ${action || "(none)"}`);
+    }
+  }
+  function measure(core2, selector) {
+    if (selector === void 0 || selector === "") throw new Error("measure needs a selector");
+    const graph = core2.buildGraph(root());
+    const node = core2.resolveNode(graph, selector);
+    if (node === null) throw new Error(`selector "${selector}" did not match any element on the page`);
+    const gaps = graph.gaps.filter((gap) => gap.a === node.id || gap.b === node.id).map((gap) => ({
+      to: gap.a === node.id ? gap.b : gap.a,
+      axis: gap.axis,
+      distance: gap.distance,
+      kind: gap.kind
+    }));
+    return {
+      id: node.id,
+      selector: node.selector,
+      tag: node.tag,
+      rect: node.rect,
+      styles: node.styles,
+      gaps
+    };
+  }
+  async function prepareScreenshot(core2, payload) {
+    if (payload.fullPage === true) throw new Error(FULL_PAGE);
+    const dpr = window.devicePixelRatio || 1;
+    const rect = await prepareElement(core2, payload.selector);
+    suspend();
+    return { rect, dpr };
+  }
+  async function prepareAnnotation(core2, payload) {
+    if (payload.fullPage === true) throw new Error(FULL_PAGE);
+    const dpr = window.devicePixelRatio || 1;
+    const rect = await prepareElement(core2, payload.selector);
+    let graph = core2.buildGraph(root());
+    if (payload.rules !== void 0 && payload.rules.length > 0) {
+      const wanted = new Set(payload.rules);
+      graph = { ...graph, issues: graph.issues.filter((issue) => wanted.has(issue.rule)) };
+    }
+    const handle = core2.render(graph, { layers: payload.layers ?? TEMP_LAYERS });
+    suspend(handle);
+    await frames(2);
+    return { rect, dpr };
+  }
+  async function cleanup() {
+    const current = suspended;
+    if (current === void 0) return;
+    suspended = void 0;
+    current.handle?.destroy();
+    showUserOverlay(current.hidden);
+  }
+  function suspend(handle) {
+    const previous = suspended;
+    previous?.handle?.destroy();
+    showUserOverlay(previous?.hidden);
+    suspended = handle === void 0 ? { hidden: hideUserOverlay() } : { handle, hidden: hideUserOverlay() };
+  }
+  function hideUserOverlay() {
+    const element = overlayHost();
+    if (element === void 0) return void 0;
+    const display = element.style.display;
+    element.style.display = "none";
+    return { element, display };
+  }
+  function showUserOverlay(hidden) {
+    if (hidden !== void 0) hidden.element.style.display = hidden.display;
+  }
+  async function prepareElement(core2, selector) {
+    if (selector === void 0 || selector === "") return void 0;
+    const graph = core2.buildGraph(root());
+    const node = core2.resolveNode(graph, selector);
+    if (node === null) throw new Error(`selector "${selector}" did not match any element on the page`);
+    let element = null;
+    try {
+      element = document.querySelector(node.selector);
+    } catch {
+      element = null;
+    }
+    if (element === null) {
+      throw new Error(
+        `selector "${selector}" is inside a shadow root. Measure it, but capture the whole viewport instead.`
+      );
+    }
+    element.scrollIntoView({ block: "center", inline: "center" });
+    await frames(1);
+    const rect = element.getBoundingClientRect();
+    return { x: rect.left, y: rect.top, w: rect.width, h: rect.height };
+  }
+  function root() {
+    return document.body ?? document.documentElement;
+  }
+  function frames(count) {
+    return new Promise((resolve) => {
+      let left = count;
+      const tick = () => {
+        left -= 1;
+        if (left <= 0) resolve();
+        else requestAnimationFrame(tick);
+      };
+      requestAnimationFrame(tick);
+    });
+  }
+  function messageOf(error) {
+    if (error instanceof Error && error.message !== "") return error.message;
+    if (typeof error === "string" && error !== "") return error;
+    return "unexpected error";
+  }
+
+  // packages/extension/src/content.ts
+  var core = window.__litedesign;
+  if (core === void 0) {
+    console.warn("[litedesign] core not found; core.iife.js must be injected first");
+  } else {
+    installBridge(core);
+    void restore(core);
+  }
+  async function restore(core2) {
+    const state = await loadState();
+    if (!state.enabled) return;
+    await applyOverlay(core2, { enabled: true, layers: state.layers, focus: state.focus });
+  }
+})();
+//# sourceMappingURL=content.js.map