@marver-design/marver 0.3.0 → 0.4.0

package/dist/sync-CkBk-tUk.mjs

@@ -0,0 +1,248 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
+import { i as readLog, r as listBoards, t as appendEvents } from "./comments-Ba8mU600.mjs";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+//#region src/shared/events.ts
+/** Events the other side lacks, by id - the sync payload in either direction. */
+function diffEvents(mine, theirIds) {
+	const have = new Set(theirIds);
+	return mine.filter((e) => !have.has(e.id));
+}
+/** Replay a board's events into current thread state. Deterministic: replay order is
+*  (ts, id) so two stores holding the same event SET always derive the same state.
+*  TWO passes - creates first, then everything else - so a reply whose author's clock
+*  ran ahead of the creator's still lands instead of being dropped forever. */
+function replay(events) {
+	const ordered = [...events].sort((a, b) => a.ts - b.ts || (a.id < b.id ? -1 : 1));
+	const threads = /* @__PURE__ */ new Map();
+	for (const ev of ordered) {
+		if (ev.type !== "create") continue;
+		if (!ev.commentId || threads.has(ev.commentId)) continue;
+		threads.set(ev.commentId, {
+			id: ev.commentId,
+			board: ev.board,
+			nodeKey: ev.nodeKey,
+			frame: ev.frame,
+			anchor: ev.anchor,
+			author: ev.author,
+			body: ev.body,
+			ts: ev.ts,
+			resolved: false,
+			replies: [],
+			reactions: {}
+		});
+	}
+	for (const ev of ordered) switch (ev.type) {
+		case "reply": {
+			const t = ev.parentId ? threads.get(ev.parentId) : void 0;
+			if (!t || !ev.commentId || t.replies.some((r) => r.id === ev.commentId)) break;
+			t.replies.push({
+				id: ev.commentId,
+				author: ev.author,
+				body: ev.body,
+				ts: ev.ts
+			});
+			break;
+		}
+		case "edit": {
+			if (!ev.commentId || ev.body === void 0) break;
+			const t = threads.get(ev.commentId);
+			if (t) {
+				t.body = ev.body;
+				break;
+			}
+			for (const th of threads.values()) {
+				const r = th.replies.find((r) => r.id === ev.commentId);
+				if (r) {
+					r.body = ev.body;
+					break;
+				}
+			}
+			break;
+		}
+		case "resolve": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			if (t) {
+				t.resolved = true;
+				if (ev.addressedIn) t.addressedIn = ev.addressedIn;
+			}
+			break;
+		}
+		case "reopen": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			if (t) {
+				t.resolved = false;
+				t.addressedIn = void 0;
+			}
+			break;
+		}
+		case "react": {
+			const t = ev.commentId ? threads.get(ev.commentId) : void 0;
+			const who = ev.author?.email;
+			if (!t || !who || !ev.emoji) break;
+			const users = t.reactions[ev.emoji] ??= [];
+			const at = users.indexOf(who);
+			if (at === -1) users.push(who);
+			else {
+				users.splice(at, 1);
+				if (!users.length) delete t.reactions[ev.emoji];
+			}
+			break;
+		}
+	}
+	return [...threads.values()];
+}
+//#endregion
+//#region src/server/sync.ts
+/**
+* Dev ↔ published comment sync (SPEC-M3 §2) - one merge rule, run from the dev side.
+*
+* The published serve is the canonical home; the repo's design/comments/ is the
+* mirror the agent reads. Each exchange is: pull remote events → union into local
+* files; push the local events the remote lacks (chunked - the server unions too).
+* Idempotent and retry-safe by construction, so a dropped exchange costs nothing.
+*
+* Credentials: design/.local/collab.json {url, token} written by `comments connect`.
+* The token is a server session held by the DEV PROCESS only - pages never see it.
+*/
+var sync_exports = /* @__PURE__ */ __exportAll({
+	connect: () => connect,
+	connectClaim: () => connectClaim,
+	loadCollab: () => loadCollab,
+	saveCollab: () => saveCollab,
+	syncOnce: () => syncOnce
+});
+const collabFile = (root) => join(root, "design", ".local", "collab.json");
+function loadCollab(root) {
+	try {
+		const c = JSON.parse(readFileSync(collabFile(root), "utf8"));
+		return typeof c?.url === "string" && typeof c?.token === "string" ? c : null;
+	} catch {
+		return null;
+	}
+}
+function saveCollab(root, collab) {
+	mkdirSync(join(root, "design", ".local"), { recursive: true });
+	writeFileSync(collabFile(root), JSON.stringify(collab, null, 2) + "\n", { mode: 384 });
+}
+/** One full exchange. Returns per-board counts, or throws on auth/network failure. */
+async function syncOnce(root, collab) {
+	const dir = join(root, "design", "comments");
+	const auth = { authorization: `Bearer ${collab.token}` };
+	const base = collab.url.replace(/\/+$/, "");
+	const bres = await fetch(`${base}/__mv/api/boards`, { headers: auth });
+	if (bres.status === 401) throw new Error("the connect token was rejected - run `comments connect` again");
+	if (!bres.ok) throw new Error(`published canvas answered ${bres.status} - is it up?`);
+	const { rights } = await bres.json();
+	const boards = [.../* @__PURE__ */ new Set([...Object.keys(rights), ...listBoards(dir)])];
+	const out = {};
+	const failures = [];
+	for (const board of boards) {
+		if (!(board in rights)) continue;
+		const res = await fetch(`${base}/__mv/api/comments/${board}`, { headers: auth });
+		if (!res.ok) {
+			failures.push(`${board}: pull ${res.status}`);
+			continue;
+		}
+		const { events: remote } = await res.json();
+		const pulled = appendEvents(dir, board, remote).length;
+		let pushed = 0;
+		if (rights[board] === "comment") {
+			const missing = diffEvents(readLog(dir, board), remote.map((e) => e.id));
+			for (let i = 0; i < missing.length; i += 100) {
+				const r = await fetch(`${base}/__mv/api/comments/${board}`, {
+					method: "POST",
+					headers: {
+						...auth,
+						"content-type": "application/json"
+					},
+					body: JSON.stringify({ events: missing.slice(i, i + 100) })
+				});
+				if (r.ok) pushed += (await r.json()).accepted ?? 0;
+				else failures.push(`${board}: push ${r.status} ${(await r.json().catch(() => null))?.error ?? ""}`.trim());
+			}
+		}
+		out[board] = {
+			pulled,
+			pushed
+		};
+	}
+	if (failures.length) throw new Error(`sync incomplete - ${failures.join(" · ")}`);
+	return out;
+}
+/** The account endpoints live BEHIND the canvas gate (the outer READ boundary), so
+*  connecting passes the gate first when a canvas password is set. */
+async function gateCookie(base, canvasPassword) {
+	if (!canvasPassword) return "";
+	const cookie = (await fetch(`${base}/__mv/auth`, {
+		method: "POST",
+		redirect: "manual",
+		headers: { "content-type": "application/x-www-form-urlencoded" },
+		body: `password=${encodeURIComponent(canvasPassword)}&next=`
+	})).headers.getSetCookie?.().find((c) => c.startsWith("mv_a=")) ?? "";
+	const tok = /^mv_a=([^;]+)/.exec(cookie)?.[1];
+	if (!tok) throw new Error("the canvas password was not accepted");
+	return `mv_a=${tok}`;
+}
+async function sessionFrom(res, ctx) {
+	if (!res.ok) {
+		const err = (await res.json().catch(() => null))?.error;
+		throw new Error(err ?? `${ctx} failed (${res.status})`);
+	}
+	const cookie = res.headers.getSetCookie?.().find((c) => c.startsWith("mv_s=")) ?? "";
+	const token = /^mv_s=([\w-]+)/.exec(cookie)?.[1];
+	if (!token) throw new Error("the canvas did not issue a session - is collaboration enabled on it (MARVER_DATA_DIR)?");
+	return token;
+}
+/** Sign in against a published canvas and persist the device credential. The account's
+*  identity rides along: locally-born events carry it as their author snapshot (the
+*  server validates the claim against the session - it never rewrites events). */
+async function connect(root, url, email, password, canvasPassword) {
+	const base = url.replace(/\/+$/, "");
+	const gate = await gateCookie(base, canvasPassword);
+	const res = await fetch(`${base}/__mv/api/auth/signin`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			...gate ? { cookie: gate } : {}
+		},
+		body: JSON.stringify({
+			email,
+			password
+		})
+	});
+	const token = await sessionFrom(res, "sign-in");
+	const user = (await res.clone().json().catch(() => null))?.user;
+	saveCollab(root, {
+		url: base,
+		token,
+		email: user?.email ?? email,
+		name: user?.name
+	});
+}
+/** Claim an invite from the CLI (the dev-first path - no published UI needed). */
+async function connectClaim(root, url, invite, profile, canvasPassword) {
+	const base = url.replace(/\/+$/, "");
+	const gate = await gateCookie(base, canvasPassword);
+	const res = await fetch(`${base}/__mv/api/auth/claim`, {
+		method: "POST",
+		headers: {
+			"content-type": "application/json",
+			...gate ? { cookie: gate } : {}
+		},
+		body: JSON.stringify({
+			token: invite,
+			...profile
+		})
+	});
+	const token = await sessionFrom(res, "claim");
+	const user = (await res.clone().json().catch(() => null))?.user;
+	saveCollab(root, {
+		url: base,
+		token,
+		email: user?.email,
+		name: user?.name ?? profile.name
+	});
+}
+//#endregion
+export { sync_exports as a, syncOnce as i, connectClaim as n, replay as o, loadCollab as r, connect as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components. The tool ships no AI - your coding agent is the designer.",
   "type": "module",
   "private": false,
@@ -11,6 +11,7 @@
   "files": [
     "dist",
     "src/client",
+    "src/shared",
     "templates",
     "README.md",
     "LICENSE",

package/src/client/frame-host/bridge.js

@@ -16,6 +16,9 @@ if (isHtmlFrame) {
 }
 
 document.addEventListener('click', (e) => {
+  // laser/comment mode owns every click - a goto link must not ALSO navigate
+  // (both handlers capture on document, so stopPropagation can't referee)
+  if (modeActive()) return
   const el = e.target instanceof Element ? e.target.closest('[data-goto]') : null
   if (!el) return
   e.preventDefault()
@@ -41,3 +44,231 @@ if (isHtmlFrame) {
 // iframe's document, so the shell's blocker cannot see them). Keyboard cmd +/- untouched.
 window.addEventListener('wheel', (e) => { if (e.ctrlKey || e.metaKey) e.preventDefault() }, { passive: false })
 document.addEventListener('gesturestart', (e) => e.preventDefault())
+
+// ---- laser mode + element picking (SPEC-M3 §5, §7) ----------------------------------
+// Laser: one injected stylesheet, outline only (zero layout shift), depth-based hue -
+// each nesting level steps 60° around the wheel, cycling at 6. Picking: laser plus a
+// click interception that captures the anchor bundle and posts it to the shell.
+
+const LASER_ID = 'mv-laser-style'
+// comment-mode cursor: the pin's teardrop in the comment green, duotone (dark rim,
+// lighter inner) with a white halo ring so it pops on any content; hotspot at the tail
+const PICK_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 256 256'%3E%3Cpath d='M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Z' fill='none' stroke='%23fff' stroke-width='40'/%3E%3Cpath d='M132,24A100.11,100.11,0,0,0,32,124v84a16,16,0,0,0,16,16h84a100,100,0,0,0,0-200Z' fill='%2334c759' stroke='%231f8a3d' stroke-width='12'/%3E%3Ccircle cx='138' cy='118' r='46' fill='%23fff' opacity='.32'/%3E%3C/svg%3E") 4 21, crosshair`
+// laser-mode cursor: the crosshair reticle in accent blue with a white halo ring,
+// hotspot dead center
+const LASER_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 256 256'%3E%3Cg stroke='%23fff' stroke-width='46' fill='none'%3E%3Ccircle cx='128' cy='128' r='56'/%3E%3Cpath d='M128 24 V56 M128 200 V232 M24 128 H56 M200 128 H232' stroke-linecap='round'/%3E%3C/g%3E%3Cg stroke='%230088ff' stroke-width='20' fill='none'%3E%3Ccircle cx='128' cy='128' r='56'/%3E%3Cpath d='M128 24 V56 M128 200 V232 M24 128 H56 M200 128 H232' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='128' cy='128' r='16' fill='%230088ff' stroke='%23fff' stroke-width='8'/%3E%3C/svg%3E") 12 12, crosshair`
+const laserCss = () => {
+  // depth via unrolled descendant combinators - CSS custom properties cannot cycle
+  let rules = 'body { --mv-hue: 0 }\n'
+  for (let d = 1; d <= 12; d++)
+    rules += `body ${'> * '.repeat(d)}{ --mv-hue: ${(d % 6) * 60} }\n`
+  // full rainbow only in laser mode; comment mode keeps just the hover highlight
+  // (understand what you'd click without the whole board shouting). The label and
+  // its children are chrome, never subjects - no outlines on them.
+  if (laserOn)
+    rules += 'body *:not(script):not(style):not(#mv-laser-label):not(#mv-laser-label *) { outline: 1px solid hsl(var(--mv-hue) 85% 55% / .75); outline-offset: -1px }\n'
+  // comment cursor wins when both modes are on (comment owns the click)
+  if (pickOn || laserOn)
+    rules += `body, body * { cursor: ${pickOn ? PICK_CURSOR : LASER_CURSOR} !important }\n`
+  return rules + `
+body [data-mv-hover] { outline: 2px solid hsl(var(--mv-hue) 95% 45%); outline-offset: -2px;
+  background-image: linear-gradient(hsl(var(--mv-hue) 95% 50% / .08), hsl(var(--mv-hue) 95% 50% / .08)) }
+#mv-laser-label { position: fixed; z-index: 2147483647; pointer-events: none; outline: none !important;
+  display: flex; align-items: center; gap: 5px; width: max-content;
+  font: 600 10px -apple-system, system-ui, sans-serif; color: #fff; background: rgba(20, 20, 24, .92);
+  padding: 3px 7px; border-radius: 5px; max-width: 340px; white-space: nowrap; overflow: hidden;
+  text-overflow: ellipsis; letter-spacing: .01em }
+#mv-laser-label svg { flex: none; display: block; outline: none !important }
+#mv-laser-label.mv-copied { animation: mv-pop .22s cubic-bezier(.32, .72, .35, 1) }
+@keyframes mv-pop { from { transform: scale(.85); opacity: .5 } }
+`
+}
+
+// filled clipboard with a check inside (Phosphor clipboard-fill + check): the label
+// wears this while confirming a copy
+const COPIED_HTML = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor"><path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Z"/><path d="M92 150l26 26 48-54" fill="none" stroke="rgba(20,20,24,.92)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/></svg><span>Element path copied</span>`
+
+let laserOn = false, pickOn = false, hoverEl = null, labelEl = null
+const modeActive = () => laserOn || pickOn
+
+// laser and pick are independent looks over shared hover machinery: the stylesheet
+// is regenerated on every flip so each mode contributes exactly its own rules
+const applyModes = () => {
+  const cur = document.getElementById(LASER_ID)
+  if (!modeActive()) {
+    if (cur) cur.remove()
+    clearHover()
+    return
+  }
+  const s = cur ?? document.createElement('style')
+  s.id = LASER_ID
+  s.textContent = laserCss()
+  if (!cur) document.head.appendChild(s)
+}
+
+let copiedTimer = null
+
+const clearHover = () => {
+  if (hoverEl) { delete hoverEl.dataset.mvHover; hoverEl = null }
+  if (labelEl) { labelEl.remove(); labelEl = null }
+  clearTimeout(copiedTimer)
+}
+
+// the shell confirmed the clipboard write - the hover label ITSELF says so (a
+// corner toast is too far from where the eyes are), then reverts after 2s.
+// The seq + element check keeps a slow ack from decorating a DIFFERENT label
+// (pointer moved on, or laser was retoggled, before writeText resolved).
+const showCopied = (seq) => {
+  if (seq !== copySeq || hoverEl !== copyEl) return
+  if (!labelEl) return
+  labelEl.classList.add('mv-copied')
+  labelEl.innerHTML = COPIED_HTML
+  clearTimeout(copiedTimer)
+  copiedTimer = setTimeout(() => {
+    if (!labelEl) return
+    labelEl.classList.remove('mv-copied')
+    if (hoverEl) labelEl.textContent = describe(hoverEl)
+    else { labelEl.remove(); labelEl = null }
+  }, 2000)
+}
+
+const describe = (el) => {
+  const tag = el.tagName.toLowerCase()
+  const loc = el.dataset.mvLoc
+  const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ').slice(0, 40)
+  return loc ? `${tag} · ${loc}` : text ? `${tag} · “${text}”` : tag
+}
+
+document.addEventListener('mousemove', (e) => {
+  if (!modeActive()) return
+  const el = e.target instanceof Element && e.target.closest('body *:not(#mv-laser-label)')
+  if (!el || el === hoverEl) { if (labelEl && hoverEl) place(labelEl, e); return }
+  clearHover()
+  hoverEl = el
+  el.dataset.mvHover = '1'
+  labelEl = document.createElement('div')
+  labelEl.id = 'mv-laser-label'
+  labelEl.textContent = describe(el)
+  document.body.appendChild(labelEl)
+  place(labelEl, e)
+}, true)
+// label rides to the RIGHT of the cursor, vertically centered on it - below-right
+// hid the pointer's target; flips to the left when the right edge runs out
+const place = (label, e) => {
+  const pad = 18
+  const w = label.offsetWidth, h = label.offsetHeight
+  let x = e.clientX + pad
+  if (x + w > innerWidth - 4) x = Math.max(4, e.clientX - pad - w)
+  label.style.left = x + 'px'
+  label.style.top = Math.min(Math.max(4, e.clientY - h / 2), innerHeight - h - 4) + 'px'
+}
+
+// the anchor bundle (SPEC-M3 §5): every rung captured at pick time
+const cssPath = (el) => {
+  const seg = []
+  for (let cur = el; cur && cur !== document.body; cur = cur.parentElement) {
+    if (cur.id) { seg.unshift(`#${CSS.escape(cur.id)}`); break }
+    const tag = cur.tagName.toLowerCase()
+    let n = 1
+    for (let sib = cur.previousElementSibling; sib; sib = sib.previousElementSibling)
+      if (sib.tagName === cur.tagName) n++
+    seg.unshift(n > 1 ? `${tag}:nth-of-type(${n})` : tag)
+  }
+  return seg.join(' > ')
+}
+const anchorBundle = (el, e) => {
+  const r = el.getBoundingClientRect()
+  const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ')
+  return {
+    el: {
+      semantics: {
+        tag: el.tagName.toLowerCase(),
+        role: el.getAttribute('role') ?? undefined,
+        ariaLabel: el.getAttribute('aria-label') ?? undefined,
+        testId: el.getAttribute('data-testid') ?? undefined,
+        quote: text.slice(0, 200) || undefined,
+      },
+      cssPath: cssPath(el),
+      source: el.dataset.mvLoc ?? undefined,
+    },
+    pos: {
+      fx: r.width ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : .5,
+      fy: r.height ? Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)) : .5,
+    },
+    rect: { x: r.left, y: r.top, w: r.width, h: r.height },   // frame-viewport coords for the shell's pin math
+  }
+}
+
+// every press is reported (tiny message, capture, nothing prevented): the shell
+// uses it to close an open thread card when the click lands INSIDE a frame -
+// shell-document listeners can never see those
+document.addEventListener('pointerdown', () => post({ type: 'sh:frame-down', id }), true)
+
+let copySeq = 0, copyEl = null
+document.addEventListener('click', (e) => {
+  if (!modeActive()) return
+  e.preventDefault()
+  e.stopPropagation()
+  const el = e.target instanceof Element && e.target.closest('body *:not(#mv-laser-label)')
+  if (!el) return
+  // comment mode wins when both are on; plain laser click hands the agent an
+  // exact address - frame file + css path (+ source loc when the build stamps one)
+  if (pickOn) post({ type: 'sh:picked', id, anchor: anchorBundle(el, e) })
+  else {
+    copyEl = el
+    post({ type: 'sh:laser-copy', id, seq: ++copySeq, path: cssPath(el), source: el.dataset.mvLoc ?? null })
+  }
+}, true)
+
+/** Resolve a stored anchor back to a rect (the ladder, §5): semantics-verified CSS
+ *  path first, then testId, then a quote scan; null = orphan. Every check compares
+ *  the FULL captured semantics - two textless buttons must not swap silently. */
+const resolveAnchor = (anchor) => {
+  const want = anchor?.el?.semantics ?? {}
+  const match = (el) => {
+    if (want.tag && el.tagName.toLowerCase() !== want.tag) return false
+    if (want.role && el.getAttribute('role') !== want.role) return false
+    if (want.ariaLabel && el.getAttribute('aria-label') !== want.ariaLabel) return false
+    if (want.testId && el.getAttribute('data-testid') !== want.testId) return false
+    const text = (el.textContent ?? '').trim().replace(/\s+/g, ' ')
+    if (want.quote && !(text.startsWith(want.quote.slice(0, 60)) || text.includes(want.quote.slice(0, 40)))) return false
+    return true
+  }
+  try {
+    const byPath = anchor?.el?.cssPath && document.querySelector(anchor.el.cssPath)
+    if (byPath && match(byPath)) return byPath
+  } catch { /* stale selector */ }
+  try {
+    if (want.testId) {
+      const el = document.querySelector(`[data-testid="${CSS.escape(want.testId)}"]`)
+      if (el && match(el)) return el
+    }
+    if (want.quote && typeof want.tag === 'string' && /^[a-z][a-z0-9-]*$/.test(want.tag)) {
+      for (const el of document.querySelectorAll(want.tag))
+        if (match(el)) return el
+    }
+  } catch { /* malformed semantics must not sink the whole batch */ }
+  return null
+}
+
+window.addEventListener('message', (e) => {
+  // commands come from the SHELL only - the parent window. Anything else (nested
+  // third-party iframes, a hijacked opener) is ignored.
+  if (e.source !== window.parent || window.parent === window) return
+  const m = e?.data
+  if (!m || typeof m !== 'object') return
+  // independent toggles - each mode contributes its own rules, applyModes composes
+  if (m.type === 'sh:laser') { laserOn = !!m.on; applyModes() }
+  if (m.type === 'sh:pick') { pickOn = !!m.on; applyModes() }
+  if (m.type === 'sh:copy-ok') showCopied(m.seq)
+  if (m.type === 'sh:resolve-anchors' && Array.isArray(m.anchors)) {
+    const rects = m.anchors.slice(0, 200).map((a) => {
+      let el = null
+      try { el = resolveAnchor(a.anchor) } catch { /* one bad anchor, not the batch */ }
+      if (!el) return { key: a.key, orphan: true }
+      const r = el.getBoundingClientRect()
+      return { key: a.key, rect: { x: r.left, y: r.top, w: r.width, h: r.height } }
+    })
+    post({ type: 'sh:anchor-rects', id, rects })
+  }
+})

package/src/client/shell/App.tsx

@@ -6,7 +6,11 @@ import { PKG, ROUTE } from '../const.ts'
 import { animateLayout, Canvas, canvasCtl } from './canvas/Canvas.tsx'
 import { enterPlay, playCtl, PlayOverlay } from './Play.tsx'
 import { bootHash, parseHash, writeHash } from './hash.ts'
-import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, DevicesIcon, FrameRectIcon, GridIcon, IntentGlyph, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CardsIcon, CardsThreeIcon, CaretIcon, CheckIcon, ColumnsIcon, CommentIcon, DevicesIcon, FrameRectIcon, IntentGlyph, LaserIcon, MoonIcon, PanelFilledIcon, PanelHollowIcon, ParallelogramDuoIcon, PlayIcon, PlusIcon, SignpostIcon, SunIcon, VariantsIcon, XIcon, deviceIcon } from './icons.tsx'
+import { CommentsController } from './Comments.tsx'
+import { useComments } from './comments-store.ts'
+
+const commentsStore = () => useComments.getState()
 
 let booted = false                             // survives Fast Refresh; see the boot effect
 
@@ -375,7 +379,8 @@ function ThemeMenu() {
 }
 
 export function App() {
-  const { manifest, nodes, panelOpen, toasts, selection } = useStore()
+  const { manifest, nodes, panelOpen, toasts, selection, laser } = useStore()
+  const commentMode = useComments((s) => s.commentMode)
   const { boot, applyManifest, togglePanel, select, setInteract, runTidy, toast, spawn } = useStore.getState()
   const [pillOpen, setPillOpen] = useState(true)
 
@@ -539,6 +544,31 @@ export function App() {
         // measureNode does the rest of the admission (content frames only,
         // frame-id match, finite positive, clamped)
         s.measureNode(nodeKey, String(data.frame ?? ''), Number(data.ownWidth), Number(data.measuredWidth), Number(data.height))
+      } else if (data.type === 'sh:laser-copy') {
+        // laser click = copy the element's full address for the agent:
+        // frame source file + css path inside it (+ jsx source loc when stamped)
+        const n = s.nodes.find((x) => x.key === nodeKey)
+        const f = n && s.frameFor(n)
+        if (f) {
+          const addr = `${f.file} · ${String(data.path ?? '')}${data.source ? ` (${String(data.source)})` : ''}`
+          // success confirms IN the frame's hover label (right where the eyes are);
+          // only failure needs the toast
+          navigator.clipboard.writeText(addr).then(
+            () => el.contentWindow?.postMessage({ type: 'sh:copy-ok', seq: data.seq }, location.origin),
+            () => toast('copy blocked - click the canvas first'))
+        }
+      } else if (data.type === 'sh:frame-down') {
+        // clicks INSIDE a frame never reach the shell document - the frame reports
+        // them so an open thread card dismisses modal-style from anywhere
+        const c = commentsStore()
+        if (c.active) c.setActive(null)
+      } else if (data.type === 'sh:picked') {
+        // comment mode: the frame reports the picked element - stage the draft on
+        // that node (picking while a thread is open replaces it, modal-style);
+        // the CommentLayer opens the composer at the pin
+        const c = commentsStore()
+        if (c.active) c.setActive(null)
+        if (c.commentMode) c.setDraft({ nodeKey, frame: String(data.id ?? ''), anchor: data.anchor })
       } else if (data.type === 'sh:go') {
         const target = String(data.target ?? '')
         const existing = s.nodes.find((n) => n.frame === target && !n.missing)
@@ -565,10 +595,29 @@ export function App() {
       if ((e.metaKey || e.ctrlKey) && e.key === '/') { e.preventDefault(); setPillOpen((o) => !o); return }
       if ((e.metaKey || e.ctrlKey) && e.key === 'a') { e.preventDefault(); s.selectAll(); return }
       if (e.metaKey || e.ctrlKey) return
-      if (e.key === 'Escape') s.interact ? setInteract(null) : select(null)
+      if (e.key === 'Escape') {
+        const c = commentsStore()
+        if (c.commentMode || c.active || c.draft) { c.setMode(false); c.setActive(null); c.setDraft(null) }
+        else s.interact ? setInteract(null) : select(null)
+      }
       if (e.key === 'p') enterPlay()
       if (e.key === 't') { animateLayout(); runTidy() }
-      if (e.key === 'c' && s.selection.length) {
+      // laser and comment mode are one-at-a-time: comment mode already highlights
+      // what you'd click, so stacking the full rainbow on top only adds noise
+      if (e.key === 'l') {
+        if (!s.laser) commentsStore().setMode(false)
+        s.setLaser(!s.laser)
+      }
+      // C = comment mode (SPEC-M3 §6, the Figma/Miro convention) · Shift+C = hide/show
+      // pins · copy-file-paths moved to Y (changelog 0.4.0)
+      if (e.key === 'c' && !e.shiftKey) {
+        const c = commentsStore()
+        if (!c.commentMode) s.setLaser(false)
+        c.setMode(!c.commentMode)
+        toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
+      }
+      if (e.key === 'C' && e.shiftKey) { const c = commentsStore(); c.setShow(!c.show) }
+      if (e.key === 'y' && s.selection.length) {
         const files = s.selection
           .map((k) => { const n = s.nodes.find((x) => x.key === k); return n ? s.frameFor(n)?.file : undefined })
           .filter((f): f is string => !!f)
@@ -763,13 +812,29 @@ export function App() {
 
       {/* floating pill nav, top right; collapses to a chip (same ladder as panel/fab) */}
       <nav className={`sh-pill${pillOpen ? '' : ' closed'}`} aria-hidden={!pillOpen}>
+        {/* far-left section: single actions - comment mode, laser, tidy */}
+        <Tip side="bottom" label={<><b>Comment</b><span>C · ⇧C hides pins</span></>}>
+          <button className={`sh-pill-btn${commentMode ? ' on' : ''}`} onClick={() => {
+            const c = commentsStore()
+            if (!c.commentMode) useStore.getState().setLaser(false)
+            c.setMode(!c.commentMode)
+            toast(c.commentMode ? 'comment mode off' : 'comment mode - click an element in a frame')
+          }}><CommentIcon size={16} /></button>
+        </Tip>
+        <Tip side="bottom" label={<><b>Laser mode</b><span>L</span></>}>
+          <button className={`sh-pill-btn${laser ? ' on' : ''}`} onClick={() => {
+            if (!laser) commentsStore().setMode(false)
+            useStore.getState().setLaser(!laser)
+          }}><LaserIcon size={16} /></button>
+        </Tip>
+        <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
+          <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><ColumnsIcon size={16} /></button>
+        </Tip>
+        <i className="sep" />
         <DeviceMenu />
         <ThemeMenu />
         <i className="sep" />
         <ZoomMenu />
-        <Tip side="bottom" label={<><b>Tidy layout</b><span>T</span></>}>
-          <button className="sh-pill-btn" onClick={() => { animateLayout(); runTidy() }}><GridIcon size={16} /></button>
-        </Tip>
         <i className="sep" />
         <Tip side="bottom" label={<><b>Prototype view</b><span>P</span></>}>
           <button className="sh-pill-btn" onClick={() => enterPlay()}><PlayIcon size={15} /></button>
@@ -786,6 +851,7 @@ export function App() {
       </Tip>
 
       <PlayOverlay />
+      <CommentsController />
 
       {CONFIG.setup
         ? <div className="sh-banner">no app detected - designs would be built from nothing. See design/instructions/setup.md, then restart</div>