@rahmantech/litedesign 0.2.0 → 0.2.1

package/README.md

@@ -74,6 +74,11 @@ scrolled viewport.
 toolbar. When the human refers to a part by name, look it up there instead of
 guessing a selector. Labels are read-only for the agent.
 
+The server also serves its workflow as the MCP resource
+`skill://litedesign/workflow` — an agent that supports resources can read the
+flow (inspect first, resolve names through labels, spotlight edits with focus)
+without a file in the repository.
+
 ## Drivers
 
 The server prefers Playwright when `playwright-core` is installed. It launches

package/dist/extension/content.js

@@ -553,6 +553,7 @@
     let focusId = null;
     let labels = [];
     let labelMode = false;
+    let marksInteractive = false;
     let toolbar;
     const teardown = () => {
       observer?.stop();
@@ -622,7 +623,30 @@
       void saveState({ enabled: true, layers, focus: focusSelector, grid });
     };
     const applyMarks = () => {
-      handle?.setMarks(labels.map((label) => ({ selector: label.selector, text: label.text })));
+      handle?.setMarks(
+        labels.map((label) => ({ selector: label.selector, text: label.text })),
+        marksInteractive
+      );
+    };
+    const editLabel = (existing, rect) => {
+      toolbar.askLabel(
+        rect,
+        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();
+          });
+        }
+      );
     };
     const onLabelClick = (event) => {
       const target = event.target;
@@ -633,24 +657,7 @@
       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();
-            });
-          }
-        );
+        editLabel(existing, target.getBoundingClientRect());
         return;
       }
       toolbar.askLabel(target.getBoundingClientRect(), "", (text) => {
@@ -670,6 +677,8 @@
       } else {
         document.removeEventListener("click", onLabelClick, true);
       }
+      marksInteractive = labelMode;
+      applyMarks();
     };
     toolbar = createToolbar({
       layers,
@@ -684,7 +693,15 @@
       onClose: teardown
     });
     toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
-    handle = core2.render(graph, { layers, toolbar: toolbar.element, grid });
+    handle = core2.render(graph, {
+      layers,
+      toolbar: toolbar.element,
+      grid,
+      onMarkClick: (mark, anchor) => {
+        const existing = labels.find((label) => label.selector === mark.selector);
+        if (existing !== void 0) editLabel(existing, anchor);
+      }
+    });
     observer = observeChanges({ root: root2, onChange: refresh });
     void loadLabels().then((next) => {
       labels = next;

package/dist/extension/core.iife.js

@@ -980,9 +980,10 @@ var __litedesign = (() => {
     return layer;
   }
   var MARK_COLOR = "rgba(217, 119, 6, 0.95)";
-  function drawMarks(layer, marks, bySelector) {
+  function drawMarks(layer, marks, bySelector, interactive = false) {
     layer.replaceChildren();
-    if (marks.length === 0) return;
+    const badges = /* @__PURE__ */ new Map();
+    if (marks.length === 0) return badges;
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
     for (const mark of marks) {
@@ -990,10 +991,12 @@ var __litedesign = (() => {
       if (node === void 0) continue;
       const badge = box(
         layer,
-        `left:${node.rect.x - scrollX}px;top:${node.rect.y - scrollY}px;transform:translateY(-100%);padding:2px 6px;border-radius:4px;background:${MARK_COLOR};color:#fff;font:10px/1.4 ui-monospace,monospace;white-space:nowrap`
+        `left:${node.rect.x - scrollX}px;top:${node.rect.y - scrollY}px;transform:translateY(-100%);padding:2px 6px;border-radius:4px;background:${MARK_COLOR};color:#fff;font:10px/1.4 ui-monospace,monospace;white-space:nowrap` + (interactive ? ";pointer-events:auto;cursor:pointer" : "")
       );
       badge.textContent = mark.text;
+      badges.set(badge, mark);
     }
+    return badges;
   }
   function drawRadius(layer, node) {
     layer.replaceChildren();
@@ -1117,6 +1120,19 @@ var __litedesign = (() => {
     const layers = createLayers(shadow);
     const radiusLayer = createSubLayer("radius", layers.hover);
     const marksLayer = createSubLayer("marks", layers.hover);
+    if (options.onMarkClick !== void 0) {
+      const onMarkClick = options.onMarkClick;
+      marksLayer.addEventListener("click", (event) => {
+        if (!marksInteractive) return;
+        const badge = event.target;
+        if (!(badge instanceof HTMLDivElement)) return;
+        const mark = badgeMarks.get(badge);
+        if (mark === void 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onMarkClick(mark, badge.getBoundingClientRect());
+      });
+    }
     if (options.toolbar !== void 0) shadow.append(options.toolbar);
     document.documentElement.append(host);
     let current = graph;
@@ -1127,6 +1143,8 @@ var __litedesign = (() => {
     let focusId = null;
     let visible = new Set(options.layers ?? LAYERS);
     let marks = options.marks ?? [];
+    let marksInteractive = false;
+    let badgeMarks = /* @__PURE__ */ new Map();
     let grid = options.grid ?? { step: GRID_STEP, axis: "both" };
     let frame = 0;
     const draw = () => {
@@ -1144,7 +1162,12 @@ var __litedesign = (() => {
       drawDim(layers.dim, dimNode);
       drawFocus(layers.focus, outlineNode);
       drawRadius(radiusLayer, outlineNode);
-      drawMarks(marksLayer, marks, new Map(current.nodes.map((node) => [node.selector, node])));
+      badgeMarks = drawMarks(
+        marksLayer,
+        marks,
+        new Map(current.nodes.map((node) => [node.selector, node])),
+        marksInteractive
+      );
       drawHover(layers.hover, hovered === null ? null : byId.get(hovered) ?? null);
     };
     const schedule = () => {
@@ -1200,8 +1223,9 @@ var __litedesign = (() => {
         focusId = id;
         draw();
       },
-      setMarks(next) {
+      setMarks(next, interactive = false) {
         marks = next;
+        marksInteractive = interactive;
         draw();
       },
       setGrid(next) {
@@ -1224,7 +1248,7 @@ var __litedesign = (() => {
   }
 
   // packages/core/src/index.ts
-  var VERSION = "0.2.0";
+  var VERSION = "0.2.1";
   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.1.0",
+  "version": "0.2.1",
   "description": "Grid, gap, and alignment on the real web page.",
   "permissions": ["activeTab", "scripting", "storage"],
   "host_permissions": ["http://*/*", "https://*/*"],

package/dist/index.js

@@ -44,7 +44,7 @@ function isMode(value) {
 }
 
 // packages/cli/src/version.ts
-var VERSION = "0.1.0";
+var VERSION = "0.2.1";
 
 // packages/cli/src/ws.ts
 import { spawn } from "node:child_process";
@@ -1790,6 +1790,13 @@ function formatTree(graph, maxLines = MAX_TREE_LINES) {
   }
   return lines.join("\n");
 }
+function labelsSummary(marks) {
+  const names = [];
+  for (const mark of marks) {
+    if (!names.includes(mark.label)) names.push(mark.label);
+  }
+  return { count: marks.length, names };
+}
 function issuePayload(issues, limit) {
   return {
     issues: issues.slice(0, limit).map((issue2) => ({
@@ -1867,6 +1874,7 @@ async function inspectTool(input) {
     throw error;
   }
   const graph = await driver.graph();
+  const labels = labelsSummary(await driver.labels());
   const payload = {
     status: "ready",
     url: graph.url,
@@ -1874,7 +1882,8 @@ async function inspectTool(input) {
     summary: {
       nodes: graph.nodes.length,
       issues: graph.issues.length,
-      truncated: graph.truncated
+      truncated: graph.truncated,
+      labels
     },
     tree: formatTree(graph)
   };
@@ -1937,6 +1946,17 @@ async function screenshotAnnotatedTool(input) {
   return imageResult({ ...pngSize(image), bytes: image.length }, image);
 }
 
+// packages/cli/src/mcp/workflow.ts
+var WORKFLOW_URI = "skill://litedesign/workflow";
+var WORKFLOW_TEXT = `# litedesign workflow
+
+- Call \`inspect\` first, always. Its summary includes the labels the human pinned on the page.
+- If the human refers to a part of the page by name ("the login button", "the altcha box"), call \`labels\` and use the pinned selector \u2014 never guess CSS selectors.
+- Labels are read-only: you read them; the human creates, renames, and removes them.
+- To show the human what you are editing, call \`overlay\` with \`focus\`. Set \`layers\` once at the start if needed; after that, send \`focus\` only \u2014 the human owns the layer toggles in the toolbar.
+- Findings carry kind: "violation" is a measured fact; "candidate" is a heuristic that can be a false positive \u2014 verify it with \`measure\` before changing code.
+`;
+
 // packages/cli/src/mcp/server.ts
 async function guard(run2) {
   try {
@@ -1960,6 +1980,18 @@ async function runMcpServer() {
     console.error(`[litedesign] extension bridge disabled: ${reason}`);
   }
   const server = new McpServer({ name: "litedesign", version: VERSION });
+  server.registerResource(
+    "workflow",
+    WORKFLOW_URI,
+    {
+      title: "Workflow",
+      description: "How the agent should work with this server: inspect first, resolve the human's names through labels, spotlight edits with focus.",
+      mimeType: "text/markdown"
+    },
+    async () => ({
+      contents: [{ uri: WORKFLOW_URI, text: WORKFLOW_TEXT, mimeType: "text/markdown" }]
+    })
+  );
   const viewport = z.object({
     w: z.number().int().positive().describe("Viewport width in CSS pixels"),
     h: z.number().int().positive().describe("Viewport height in CSS pixels")
@@ -1992,7 +2024,7 @@ async function runMcpServer() {
     "inspect",
     {
       title: "Inspect page",
-      description: 'Open a page and return a tree summary. Call this before measure, find_issues, overlay, screenshot, or screenshot_annotated. No image by default: the numbers the agent needs come from the DOM, so set screenshot to true only when you really need to see the page. With the extension driver this attaches to the active tab by itself; returns "awaiting_user" when no extension is connected and "mismatch" when the active tab is a different page.',
+      description: 'Open a page and return a tree summary. Call this before measure, find_issues, overlay, screenshot, or screenshot_annotated. The summary includes labels: the count and unique names the human pinned onto parts of the page \u2014 when the human refers to a part by name, get its selector from the labels tool. The full workflow is available as the resource skill://litedesign/workflow. No image by default: the numbers the agent needs come from the DOM, so set screenshot to true only when you really need to see the page. With the extension driver this attaches to the active tab by itself; returns "awaiting_user" when no extension is connected and "mismatch" when the active tab is a different page.',
       inputSchema: {
         url: z.string().url(),
         viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rahmantech/litedesign",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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.0",
+    "@litedesign/core": "0.2.1",
     "@types/ws": "^8.18.2"
   },
   "publishConfig": {