@comty.io/core 0.1.0 → 0.1.2

package/src/browser.js

@@ -1,7 +1,8 @@
 import { getComtyStyle } from "./style.js";
 import { createAnchorMatcher } from "./anchors.js";
-import { createScreenshotCapture } from "./capture.js";
+import { createScreenshotCapture, createColorMagnifier } from "./capture.js";
 import { createCommentThread } from "./comments.js";
+import { createMeasurements } from "./measurements.js";
 // Shared browser runtime. Both npm and the standalone CDN script use this file.
 const instanceKey = Symbol.for("comty.sdk.instance");
 
@@ -139,6 +140,13 @@ export function initComty(options = {}) {
     const style = document.createElement("style");
     style.innerHTML = getComtyStyle();
     document.head.appendChild(style);
+    if (!document.querySelector('link[data-comty-font]')) {
+      const font = document.createElement('link');
+      font.rel = 'stylesheet';
+      font.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap';
+      font.dataset.comtyFont = '';
+      document.head.appendChild(font);
+    }
 
     const toolbar = document.createElement("div");
     toolbar.className = "comty-toolbar";
@@ -152,6 +160,12 @@ export function initComty(options = {}) {
     toolbarSurface.className = "comty-toolbar-surface";
     toolbar.appendChild(toolbarSurface);
     const icon = (paths) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+    const dragHandle = document.createElement("span");
+    dragHandle.className = "comty-toolbar-grip";
+    dragHandle.title = "Drag to move";
+    dragHandle.setAttribute("aria-hidden", "true");
+    dragHandle.innerHTML = icon('<g fill="currentColor" stroke="none"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></g>');
+    toolbar.appendChild(dragHandle);
     function toolButton(label, paths, action) {
       const button = document.createElement("button");
       button.className = "comty-control-button";
@@ -199,6 +213,10 @@ export function initComty(options = {}) {
       agentHistoryBtn.setAttribute("aria-expanded", "false");
       agentTools.appendChild(agentHistoryBtn);
     }
+    const primaryTools = document.createElement("div");
+    primaryTools.className = "comty-tool-primary";
+    toolbar.insertBefore(primaryTools, browseBtn);
+    for (const button of [browseBtn, inspectorBtn, btn, agentBtn].filter(Boolean)) primaryTools.appendChild(button);
     const inspectorTools = document.createElement("div");
     inspectorTools.className = "comty-tool-context";
     inspectorTools.hidden = true;
@@ -212,11 +230,24 @@ export function initComty(options = {}) {
     let rulerDrag = null;
     const rulerGuides = [];
     let colorPickerController = null;
-    let colorToastTimer = null;
-    let colorToastAnimation = null;
+    const recentColors = [];
+    const recentFonts = [];
+    let propertyKind = null;
+    let propertySelection = null;
+    let propertyOpener = null;
+    let propertyAnimation = null;
+    let propertyStripAnimation = null;
+    let propertyPicking = null;
+    const colorMagnifier = createColorMagnifier({ root, isComtyElement, capture: () => captureViewportScreenshot() });
     const overlayTools = document.createElement("div");
     overlayTools.className = "comty-overlay-tools";
     root.prepend(overlayTools);
+    const measurements = createMeasurements({
+      root,
+      isComtyElement,
+      isElementTreeHidden,
+      onExit() { rulersEnabled = false; syncInspectorTools(); },
+    });
     const gridLayer = document.createElement("div");
     gridLayer.className = "comty-layout-guides";
     overlayTools.appendChild(gridLayer);
@@ -228,6 +259,11 @@ export function initComty(options = {}) {
     toolPanel.className = "comty-tool-panel";
     toolPanel.hidden = true;
     root.appendChild(toolPanel);
+    const propertyPanel = document.createElement("section");
+    propertyPanel.className = "comty-property-panel";
+    propertyPanel.id = "comty-property-panel";
+    propertyPanel.hidden = true;
+    root.appendChild(propertyPanel);
     const xrayStyle = document.createElement("style");
     // Use an outline overlay: geometry and the page's existing styles stay intact.
     xrayStyle.textContent = `body *:not(#comty-root):not(#comty-root *) { outline: 1px solid ${getComputedStyle(root).getPropertyValue('--comty-xray').trim()} !important; }`;
@@ -236,10 +272,17 @@ export function initComty(options = {}) {
       syncInspectorTools();
     });
     const rulersBtn = toolButton("Rulers · R", '<path d="M3 3h18v6H9v12H3Z"/><path d="M7 3v3m4-3v3m4-3v3M3 11h3m-3 4h3m-3 4h3"/>', () => {
+      closePropertyPanel();
+      if (motion.enabled) setMotionEnabled(false);
       rulersEnabled = !rulersEnabled;
+      selectedElement = null;
+      measuredRegion = null;
+      inspectDrag = null;
+      hideInspector();
       syncInspectorTools();
     });
     const gridBtn = toolButton("Layout guides · G", '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 10h18M10 3v18"/>', () => {
+      closePropertyPanel();
       if (motion.enabled) setMotionEnabled(false);
       gridPanelOpen = !gridPanelOpen;
       if (gridPanelOpen && !layoutGuides.length) addLayoutGuide();
@@ -247,10 +290,16 @@ export function initComty(options = {}) {
       syncInspectorTools();
     });
     gridBtn.setAttribute("aria-expanded", "false");
-    const pipetteBtn = toolButton("Sample color · P", '<path d="m16 3 5 5-4 4-5-5Zm-3 5L4 17v3h3l9-9M11 6l7 7"/>', sampleColor);
+    const pipetteBtn = toolButton("Sample color · P", '<path d="m16 3 5 5-4 4-5-5Zm-3 5L4 17v3h3l9-9M11 6l7 7"/>', event => togglePropertyPanel("color", pipetteBtn, event.shiftKey));
+    pipetteBtn.title = "Sample color · P · Shift-click to sample the screen";
+    const typographyBtn = toolButton("Typography · T", '<path d="m5 20 7-16 7 16M8 14h8M3 20h5m8 0h5M10 4h4"/>', () => togglePropertyPanel("font", typographyBtn));
+    for (const button of [pipetteBtn, typographyBtn]) {
+      button.setAttribute("aria-controls", propertyPanel.id);
+      button.setAttribute("aria-expanded", "false");
+    }
     const motionBtn = toolButton("Motion · M", '<circle cx="12" cy="14" r="8"/><path d="M9 2h6m-3 4V2m6 5 2-2m-8 5v4l3 2"/>', () => setMotionEnabled(!motion.enabled));
     motionBtn.setAttribute("aria-expanded", "false");
-    for (const button of [xrayBtn, rulersBtn, gridBtn, pipetteBtn, motionBtn]) inspectorTools.appendChild(button);
+    for (const button of [xrayBtn, rulersBtn, gridBtn, pipetteBtn, typographyBtn, motionBtn]) inspectorTools.appendChild(button);
 
     const motion = { enabled: false, speed: 1, paused: false, managed: new Map(), shadowRoots: [], nextRootScan: 0 };
     const motionPanel = document.createElement('section');
@@ -299,6 +348,9 @@ export function initComty(options = {}) {
       motion.enabled = enabled; motionPanel.hidden = !enabled;
       motionBtn.setAttribute('aria-pressed', String(enabled)); motionBtn.setAttribute('aria-expanded', String(enabled));
       if (enabled) {
+        closePropertyPanel();
+        rulersEnabled = false;
+        syncInspectorTools();
         gridPanelOpen = false; toolPanel.hidden = true; gridBtn.setAttribute('aria-expanded', 'false');
         measuredRegion = null; inspectDrag = null; selectedElement = null; hideInspector();
         motion.nextRootScan = 0; updateMotion(); renderMotionPanel(); positionToolbar(); ensureLiveTracking();
@@ -402,32 +454,101 @@ export function initComty(options = {}) {
       }
     }
 
+    let closeGuideMenu = () => {};
+    function guideSelect(label, options, value, onChange) {
+      const trigger = document.createElement("button");
+      trigger.type = "button";
+      trigger.className = "comty-guide-select";
+      trigger.setAttribute("aria-label", label);
+      trigger.setAttribute("aria-haspopup", "menu");
+      trigger.setAttribute("aria-expanded", "false");
+      function setValue(next) {
+        trigger.value = next;
+        trigger.innerHTML = `${options.find(option => option[0] === next)[1]}${icon('<path d="m8 10 4 4 4-4"/>')}`;
+      }
+      setValue(value);
+      function open() {
+        const wasOpen = trigger.getAttribute("aria-expanded") === "true";
+        closeGuideMenu();
+        if (wasOpen) return;
+        root.querySelectorAll('.comty-popover').forEach(popover => popover.remove());
+        const menu = document.createElement("div");
+        menu.className = "comty-popover comty-guide-popover";
+        menu.setAttribute("role", "menu");
+        menu.setAttribute("aria-label", label);
+        const controller = new AbortController();
+        const close = (focus = false) => {
+          controller.abort(); menu.remove();
+          trigger.setAttribute("aria-expanded", "false");
+          if (focus && trigger.isConnected) trigger.focus();
+          closeGuideMenu = () => {};
+        };
+        closeGuideMenu = close;
+        const items = options.map(([key, name]) => {
+          const item = document.createElement("button");
+          item.type = "button";
+          item.className = "comty-popover-item";
+          item.setAttribute("role", "menuitemradio");
+          item.setAttribute("aria-checked", String(key === trigger.value));
+          item.textContent = name;
+          if (key === trigger.value) {
+            const check = document.createElement("span");
+            check.className = "comty-popover-item-check";
+            check.innerHTML = icon('<path d="m5 12 4 4 10-10"/>');
+            item.appendChild(check);
+          }
+          item.onclick = () => { close(); setValue(key); onChange(key); if (trigger.isConnected) trigger.focus(); };
+          menu.appendChild(item);
+          return item;
+        });
+        toolPanel.appendChild(menu);
+        trigger.setAttribute("aria-expanded", "true");
+        const rect = trigger.getBoundingClientRect();
+        menu.style.left = `${Math.max(8, Math.min(rect.right - menu.offsetWidth, innerWidth - menu.offsetWidth - 8))}px`;
+        menu.style.top = `${rect.bottom + menu.offsetHeight + 4 <= innerHeight - 8 ? rect.bottom + 4 : Math.max(8, rect.top - menu.offsetHeight - 4)}px`;
+        items[options.findIndex(option => option[0] === trigger.value)].focus();
+        menu.onkeydown = event => {
+          const index = items.indexOf(document.activeElement);
+          if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+            event.preventDefault(); event.stopPropagation();
+            items[event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length].focus();
+          } else if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(true); }
+          else if (event.key === "Tab") close();
+        };
+        document.addEventListener("pointerdown", event => {
+          if (!menu.contains(event.target) && !trigger.contains(event.target)) close();
+        }, {capture: true, signal: controller.signal});
+        window.addEventListener("resize", () => close(), {signal: controller.signal});
+      }
+      trigger.onclick = open;
+      trigger.onkeydown = event => {
+        if (["ArrowDown", "ArrowUp"].includes(event.key)) { event.preventDefault(); open(); }
+      };
+      return { trigger, setValue };
+    }
+
     function renderGridPanel() {
-      clearTimeout(colorToastTimer);
-      colorToastAnimation?.cancel();
-      colorToastAnimation = null;
-      toolPanel.classList.remove("comty-color-toast");
+      closeGuideMenu();
       toolPanel.hidden = !gridPanelOpen || !session.inspect;
       gridBtn.setAttribute("aria-expanded", String(gridPanelOpen && session.inspect));
       if (toolPanel.hidden) return;
       toolPanel.setAttribute("aria-label", "Layout guides");
-      toolPanel.innerHTML = `<div class="comty-tool-panel-header"><strong>Layout guides</strong><select aria-label="Guide type"><option value="columns">Columns</option><option value="rows">Rows</option><option value="grid">Grid</option></select><button type="button" data-add aria-label="Add layout guide">${icon('<path d="M12 5v14M5 12h14"/>')}</button></div><div class="comty-guide-list"></div>`;
+      toolPanel.innerHTML = `<div class="comty-tool-panel-header"><strong>Layout guides</strong><span data-guide-type></span><button type="button" data-add aria-label="Add layout guide">${icon('<path d="M12 5v14M5 12h14"/>')}</button></div><div class="comty-guide-list"></div>`;
       const selectedGuide = layoutGuides.find(guide => guide.id === selectedGuideId) || layoutGuides[0];
       selectedGuideId = selectedGuide?.id ?? null;
-      const typeSelect = toolPanel.querySelector("select");
-      typeSelect.value = selectedGuide?.kind ?? "columns";
-      typeSelect.onchange = () => {
+      const typeSelect = guideSelect("Guide type", [["columns", "Columns"], ["rows", "Rows"], ["grid", "Grid"]], selectedGuide?.kind ?? "columns", value => {
         const guide = layoutGuides.find(guide => guide.id === selectedGuideId);
         if (guide) {
-          if ((guide.kind === "grid") !== (typeSelect.value === "grid")) guide.size = typeSelect.value === "grid" ? 8 : 72;
-          guide.kind = typeSelect.value;
-        } else addLayoutGuide(typeSelect.value);
+          if ((guide.kind === "grid") !== (value === "grid")) guide.size = value === "grid" ? 8 : 72;
+          guide.kind = value;
+        } else addLayoutGuide(value);
         renderGridPanel();
         syncInspectorTools();
-        toolPanel.querySelector("select").focus();
-      };
+        toolPanel.querySelector('[aria-label="Guide type"]').focus();
+      });
+      toolPanel.querySelector("[data-guide-type]").replaceWith(typeSelect.trigger);
       toolPanel.querySelector("[data-add]").onclick = () => {
-        addLayoutGuide(toolPanel.querySelector("select").value);
+        addLayoutGuide(typeSelect.trigger.value);
         renderGridPanel();
       };
       const list = toolPanel.querySelector(".comty-guide-list");
@@ -440,8 +561,14 @@ export function initComty(options = {}) {
         item.innerHTML = `<div class="comty-guide-row"><button type="button" data-edit aria-expanded="false">${escapeInspectorText(name)} <span aria-hidden="true">›</span></button><button type="button" data-visible aria-label="Show ${guide.kind}" aria-pressed="${guide.visible}">${icon('<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/>')}</button><button type="button" data-remove aria-label="Remove ${guide.kind}">${icon('<path d="M5 12h14"/>')}</button></div><div class="comty-guide-fields" hidden></div>`;
         const fields = item.querySelector(".comty-guide-fields");
         const numberField = (label, key, min, max) => `<label>${label}<input type="number" data-field="${key}" value="${guide[key]}" min="${min}" max="${max}" step="1"></label>`;
-        fields.innerHTML = `${guide.kind !== "grid" ? numberField("Count", "count", 1, 24) : ""}<label>Color<input type="color" data-field="color" value="${guide.color}"></label>${numberField("Opacity %", "opacity", 0, 100)}${guide.kind !== "grid" ? `<label>Type<select data-field="align"><option value="stretch">Stretch</option><option value="start">Start</option><option value="center">Center</option><option value="end">End</option></select></label>` : ""}${numberField(guide.kind === "grid" ? "Size" : guide.kind === "rows" ? "Height" : "Width", "size", 1, 4096)}${numberField("Offset", "offset", 0, 4096)}${guide.kind !== "grid" ? numberField("Gutter", "gutter", 0, 800) : ""}`;
-        if (guide.kind !== "grid") fields.querySelector("select").value = guide.align;
+        fields.innerHTML = `${guide.kind !== "grid" ? numberField("Count", "count", 1, 24) : ""}<label>Color<input type="color" data-field="color" value="${guide.color}"></label>${numberField("Opacity %", "opacity", 0, 100)}${guide.kind !== "grid" ? `<div class="comty-guide-align"><span>Type</span><span data-guide-align></span></div>` : ""}${numberField(guide.kind === "grid" ? "Size" : guide.kind === "rows" ? "Height" : "Width", "size", 1, 4096)}${numberField("Offset", "offset", 0, 4096)}${guide.kind !== "grid" ? numberField("Gutter", "gutter", 0, 800) : ""}`;
+        if (guide.kind !== "grid") {
+          const alignment = guideSelect("Guide alignment", [["stretch", "Stretch"], ["start", "Start"], ["center", "Center"], ["end", "End"]], guide.align, value => {
+            guide.align = value;
+            renderLayoutGuides();
+          });
+          fields.querySelector("[data-guide-align]").replaceWith(alignment.trigger);
+        }
         fields.oninput = (event) => {
           const input = event.target, key = input.dataset.field;
           if (!key) return;
@@ -457,7 +584,7 @@ export function initComty(options = {}) {
         };
         item.querySelector("[data-edit]").onclick = (event) => {
           selectedGuideId = guide.id;
-          typeSelect.value = guide.kind;
+          typeSelect.setValue(guide.kind);
           fields.hidden = !fields.hidden;
           event.currentTarget.setAttribute("aria-expanded", String(!fields.hidden));
         };
@@ -477,12 +604,14 @@ export function initComty(options = {}) {
 
     function syncInspectorTools() {
       const visible = session.inspect;
+      measurements.setEnabled(visible && rulersEnabled && !motion.enabled);
       overlayTools.hidden = !visible;
       xrayBtn.setAttribute("aria-pressed", String(visible && xrayEnabled));
       rulersBtn.setAttribute("aria-pressed", String(visible && rulersEnabled));
       gridBtn.setAttribute("aria-pressed", String(visible && layoutGuides.some(guide => guide.visible)));
       gridBtn.setAttribute("aria-expanded", String(visible && gridPanelOpen));
       toolPanel.hidden = !visible || !gridPanelOpen;
+      if (toolPanel.hidden) closeGuideMenu();
       rulerLayer.hidden = !visible || !rulersEnabled;
       if (visible && xrayEnabled) {
         if (!xrayStyle.isConnected) document.head.appendChild(xrayStyle);
@@ -608,45 +737,221 @@ export function initComty(options = {}) {
     }
     document.addEventListener("pointercancel", cancelRulerDrag, true);
 
-    function animateColorToast(closing = false) {
-      colorToastAnimation?.cancel();
-      colorToastAnimation = null;
-      if (toolPanel.hidden) return;
-      if (reducedMotion.matches || !toolPanel.classList.contains("comty-color-toast")) {
-        if (closing) toolPanel.hidden = true;
-        return;
+    function colorDetails(value, token = "") {
+      const channels = /^#([\da-f]{6})$/i.exec(value)
+        ? value.slice(1).match(/../g).map(part => parseInt(part, 16))
+        : /^rgba?\((.*)\)$/i.exec(value)?.[1].replace(/\s*\/\s*/g, " ").split(/[\s,]+/).filter(Boolean);
+      if (!channels || channels.length < 3) return null;
+      const [r, g, b] = channels.slice(0, 3).map(part => Math.max(0, Math.min(255, Math.round(part.endsWith?.("%") ? parseFloat(part) * 2.55 : Number(part)))));
+      if (![r, g, b].every(Number.isFinite)) return null;
+      const alpha = channels[3] == null ? 1 : Math.max(0, Math.min(1, channels[3].endsWith("%") ? parseFloat(channels[3]) / 100 : Number(channels[3])));
+      const hex = `#${[r, g, b].map(n => n.toString(16).padStart(2, "0")).join("").toUpperCase()}${alpha < 1 ? Math.round(alpha * 255).toString(16).padStart(2, "0").toUpperCase() : ""}`;
+      const [red, green, blue] = [r, g, b].map(n => n / 255);
+      const max = Math.max(red, green, blue), min = Math.min(red, green, blue), delta = max - min;
+      let hue = 0;
+      if (delta) hue = max === red ? ((green - blue) / delta) % 6 : max === green ? (blue - red) / delta + 2 : (red - green) / delta + 4;
+      hue = (hue * 60 + 360) % 360;
+      const lightness = (max + min) / 2;
+      const saturation = delta ? delta / (1 - Math.abs(2 * lightness - 1)) : 0;
+      const linear = [red, green, blue].map(n => n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4);
+      const l = Math.cbrt(.4122214708 * linear[0] + .5363325363 * linear[1] + .0514459929 * linear[2]);
+      const m = Math.cbrt(.2119034982 * linear[0] + .6806995451 * linear[1] + .1073969566 * linear[2]);
+      const s = Math.cbrt(.0883024619 * linear[0] + .2817188376 * linear[1] + .6299787005 * linear[2]);
+      const L = .2104542553 * l + .793617785 * m - .0040720468 * s;
+      const a = 1.9779984951 * l - 2.428592205 * m + .4505937099 * s;
+      const bLab = .0259040371 * l + .7827717662 * m - .808675766 * s;
+      const chroma = Math.hypot(a, bLab);
+      const okHue = chroma < .001 ? 0 : (Math.atan2(bLab, a) * 180 / Math.PI + 360) % 360;
+      const suffix = alpha < 1 ? ` / ${Number(alpha.toFixed(2))}` : "";
+      return {
+        key: `${hex}|${token}`, hex, token,
+        name: ({ "#FFFFFF": "White", "#000000": "Black" })[hex] || (token ? token.replace(/^--/, "").replace(/[-_]/g, " ") : "Selected colour"),
+        rgb: alpha < 1 ? `rgba(${r}, ${g}, ${b}, ${Number(alpha.toFixed(2))})` : `rgb(${r}, ${g}, ${b})`,
+        hsl: `hsl(${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%${suffix})`,
+        oklch: `oklch(${(L * 100).toFixed(1)}% ${chroma.toFixed(3)} ${Math.round(okHue)}${suffix})`,
+      };
+    }
+
+    function fontDetails(element) {
+      const css = getComputedStyle(element);
+      const color = colorDetails(css.color);
+      const values = [css.fontFamily, css.fontSize, css.fontWeight, css.lineHeight, css.letterSpacing, css.color];
+      return {
+        key: values.join("|"), family: css.fontFamily,
+        size: css.fontSize, weight: css.fontWeight, leading: css.lineHeight,
+        tracking: css.letterSpacing === "normal" ? "0px" : css.letterSpacing,
+        color,
+        css: `font-family: ${css.fontFamily};\nfont-size: ${css.fontSize};\nfont-weight: ${css.fontWeight};\nline-height: ${css.lineHeight};\nletter-spacing: ${css.letterSpacing};\ncolor: ${css.color};`,
+      };
+    }
+
+    function rememberProperty(list, item) {
+      const previous = list.findIndex(entry => entry.key === item.key);
+      if (previous !== -1) list.splice(previous, 1);
+      list.unshift(item);
+      list.length = Math.min(list.length, 4);
+    }
+
+    const copyIcon = icon('<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/>');
+    const checkIcon = icon('<path d="m5 12 4 4 10-10"/>');
+    const copyFeedbackTimers = new WeakMap();
+    function propertyRow(label, value, display = value) {
+      const unavailable = value === "—";
+      return `<div class="comty-property-row"><span>${label}</span><button type="button" data-copy="${escapeInspectorText(value)}" aria-label="Copy ${label}: ${escapeInspectorText(display)}" ${unavailable ? "disabled" : ""}><span>${escapeInspectorText(display)}</span>${unavailable ? "" : `<i class="comty-property-copy-icon" aria-hidden="true">${copyIcon}${checkIcon}</i>`}</button></div>`;
+    }
+
+    function propertyVisibleRect() {
+      const rect = propertyPanel.getBoundingClientRect();
+      const inset = getComputedStyle(propertyPanel).clipPath.match(/^inset\(([^)]+?)(?: round|\))/)?.[1].split(/\s+/).map(parseFloat) || [0];
+      const [top, right = top, bottom = top, left = right] = inset;
+      return { top: rect.top + top, right: rect.right - right, bottom: rect.bottom - bottom, left: rect.left + left };
+    }
+
+    function renderPropertyPanel(morph = false) {
+      if (!propertyKind) return;
+      const before = morph && !propertyPanel.hidden ? propertyVisibleRect() : null;
+      const oldDetail = propertyPanel.querySelector(".comty-property-detail")?.cloneNode(true);
+      const oldStrip = propertyPanel.querySelector(".comty-property-strip > :first-child")?.getBoundingClientRect();
+      propertyAnimation?.cancel(); propertyAnimation = null;
+      propertyStripAnimation?.cancel(); propertyStripAnimation = null;
+      propertyPanel.style.width = "";
+      const expanded = Boolean(propertySelection);
+      propertyPanel.dataset.kind = propertyKind;
+      propertyPanel.toggleAttribute("data-expanded", expanded);
+      propertyPanel.setAttribute("aria-label", propertyKind === "color" ? "Recent colours" : "Recent typography");
+      const recent = propertyKind === "color" ? recentColors : recentFonts;
+      const details = propertyKind === "color" && expanded
+        ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("HEX", propertySelection.hex)}${propertyRow("RGB", propertySelection.rgb)}${propertyRow("HSL", propertySelection.hsl)}${propertyRow("OKLCH", propertySelection.oklch)}${propertyRow("Token", propertySelection.token ? `var(${propertySelection.token})` : "—")}</div></div>`
+        : propertyKind === "font" && expanded
+          ? `<div class="comty-property-detail"><div class="comty-property-rows">${propertyRow("Family", propertySelection.family)}${propertyRow("Size", propertySelection.size)}${propertyRow("Weight", propertySelection.weight)}${propertyRow("Leading", propertySelection.leading)}${propertyRow("Tracking", propertySelection.tracking)}${propertyRow("Colour", propertySelection.color?.hex || "—")}${propertyRow("CSS", propertySelection.css, "All of the above")}</div></div>`
+          : "";
+      const slots = Array.from({ length: 4 }, (_, index) => {
+        const item = recent[index];
+        if (!item) return '<span class="comty-property-empty" aria-hidden="true"></span>';
+        const label = propertyKind === "color" ? `${item.name}, ${item.hex}` : `Font ${index + 1}: ${item.family}`;
+        return `<button type="button" class="comty-property-recent" data-recent="${index}" aria-label="${escapeInspectorText(label)}" aria-pressed="${String(propertySelection?.key === item.key)}">${propertyKind === "font" ? "Aa" : ""}</button>`;
+      }).join("");
+      propertyPanel.innerHTML = `${details}<div class="comty-property-strip">${slots}</div><span class="comty-property-feedback" role="status"></span>`;
+      propertyPanel.hidden = false;
+      if (propertyKind === "color") {
+        propertyPanel.querySelectorAll(".comty-property-recent").forEach((button, index) => { button.style.backgroundColor = recent[index].hex; });
+      } else {
+        propertyPanel.querySelectorAll(".comty-property-recent").forEach((button, index) => { button.style.fontFamily = recent[index].family; button.style.fontWeight = recent[index].weight; });
+        const colourRow = propertyPanel.querySelector('.comty-property-row button[aria-label^="Copy Colour"]');
+        if (colourRow && propertySelection.color) colourRow.querySelector("span").style.setProperty("--comty-picked-color", propertySelection.color.hex);
       }
       positionToolbar();
-      const above = toolPanel.getBoundingClientRect().bottom <= toolbar.getBoundingClientRect().top;
-      toolPanel.style.transformOrigin = above ? "bottom right" : "top right";
-      const content = toolPanel.firstChild;
-      const style = getComputedStyle(root);
-      const animation = toolPanel.animate([
-        { opacity: 0, transform: `translateY(${above ? ".375rem" : "-.375rem"}) scale(.96)` },
-        { opacity: 1, transform: "translateY(0) scale(1)" },
-      ], {
-        duration: parseFloat(style.getPropertyValue("--comty-motion-duration")),
-        easing: style.getPropertyValue("--comty-ease-out").trim(),
-        direction: closing ? "reverse" : "normal",
-        fill: "both",
-      });
-      colorToastAnimation = animation;
+      if (reducedMotion.matches || !pointerInput || !morph || !before) return;
+      const target = propertyPanel.getBoundingClientRect();
+      const targetStrip = propertyPanel.querySelector(".comty-property-strip > :first-child").getBoundingClientRect();
+      // Keep the outgoing detail until the frame has contracted around the recent values.
+      if (!expanded && oldDetail) {
+        propertyPanel.prepend(oldDetail);
+        propertyPanel.style.width = getComputedStyle(root).getPropertyValue("--comty-property-width").trim();
+        positionToolbar();
+      }
+      const layout = propertyPanel.getBoundingClientRect();
+      const strip = propertyPanel.querySelector(".comty-property-strip");
+      const stripRect = strip.firstElementChild.getBoundingClientRect();
+      const radius = getComputedStyle(propertyPanel).borderRadius;
+      const clip = rect => `inset(${Math.max(0, rect.top - layout.top)}px ${Math.max(0, layout.right - rect.right)}px ${Math.max(0, layout.bottom - rect.bottom)}px ${Math.max(0, rect.left - layout.left)}px round ${radius})`;
+      const css = getComputedStyle(root);
+      const timing = { duration: parseFloat(css.getPropertyValue("--comty-motion-duration")), easing: css.getPropertyValue("--comty-ease-in-out").trim(), fill: "forwards" };
+      propertyAnimation = propertyPanel.animate([{ clipPath: clip(before) }, { clipPath: clip(target) }], timing);
+      propertyStripAnimation = strip.animate([
+        { transform: `translate(${oldStrip.left - stripRect.left}px, ${oldStrip.top - stripRect.top}px)` },
+        { transform: `translate(${targetStrip.left - stripRect.left}px, ${targetStrip.top - stripRect.top}px)` },
+      ], timing);
+      const animation = propertyAnimation;
       animation.onfinish = () => {
-        if (colorToastAnimation !== animation) return;
-        if (closing && toolPanel.firstChild === content) toolPanel.hidden = true;
+        if (propertyAnimation !== animation) return;
+        propertyAnimation = null;
+        if (!expanded) { oldDetail?.remove(); propertyPanel.style.width = ""; }
+        propertyStripAnimation?.cancel(); propertyStripAnimation = null;
         animation.cancel();
-        colorToastAnimation = null;
+        positionToolbar();
       };
     }
 
-    function dismissColorResultLater() {
-      clearTimeout(colorToastTimer);
-      const content = toolPanel.firstChild;
-      colorToastTimer = setTimeout(() => {
-        if (toolPanel.firstChild === content) animateColorToast(true);
-      }, 4000);
+    function openPropertyPanel(kind, element, property, opener = null, sampledColor = null) {
+      propertyPicking = null;
+      colorMagnifier.setEnabled(false);
+      delete document.documentElement.dataset.comtyPropertyPicking;
+      if (motion.enabled) setMotionEnabled(false);
+      gridPanelOpen = false;
+      toolPanel.hidden = true;
+      gridBtn.setAttribute("aria-expanded", "false");
+      const item = kind === "color" && element
+        ? sampledColor ? colorDetails(sampledColor, inspectedBackgroundToken(sampledColor, element) || "") : colorDetails(getComputedStyle(element)[property === "background" ? "backgroundColor" : "color"], getColorTokens(element)[property === "background" ? "background" : "color"].at(0) || "")
+        : kind === "font" && element ? fontDetails(element) : null;
+      if (item) rememberProperty(kind === "color" ? recentColors : recentFonts, item);
+      propertyOpener = opener;
+      propertyKind = kind;
+      propertySelection = null;
+      for (const [button, active] of [[pipetteBtn, kind === "color"], [typographyBtn, kind === "font"]]) {
+        button.setAttribute("aria-pressed", String(active));
+        button.setAttribute("aria-expanded", String(active));
+      }
+      renderPropertyPanel();
     }
 
+    function togglePropertyPanel(kind, opener, screenSampling = false) {
+      if (!screenSampling && !propertyPanel.hidden && propertyKind === kind) { closePropertyPanel(); return; }
+      openPropertyPanel(kind, null, "color", opener);
+      rulersEnabled = false;
+      syncInspectorTools();
+      if (kind === "color" && screenSampling && window.EyeDropper) sampleColor();
+      else {
+        propertyPicking = kind;
+        colorMagnifier.setEnabled(kind === "color");
+        document.documentElement.dataset.comtyPropertyPicking = kind;
+        selectedElement = null;
+        hideInspector();
+      }
+    }
+
+    function closePropertyPanel(restoreFocus = false) {
+      if (propertyPanel.hidden) return;
+      if (propertyPicking === "font") hideInspector();
+      propertyAnimation?.cancel(); propertyAnimation = null;
+      propertyStripAnimation?.cancel(); propertyStripAnimation = null;
+      colorPickerController?.abort();
+      propertyPanel.hidden = true;
+      propertyKind = null; propertySelection = null; propertyPicking = null;
+      colorMagnifier.setEnabled(false);
+      delete document.documentElement.dataset.comtyPropertyPicking;
+      for (const button of [pipetteBtn, typographyBtn]) {
+        button.setAttribute("aria-pressed", "false");
+        button.setAttribute("aria-expanded", "false");
+      }
+      if (restoreFocus && propertyOpener?.isConnected) propertyOpener.focus({ preventScroll: true });
+      propertyOpener = null;
+    }
+
+    propertyPanel.onclick = async event => {
+      const button = event.target.closest("button");
+      if (!button) return;
+      if (button.dataset.recent != null) {
+        const item = (propertyKind === "color" ? recentColors : recentFonts)[Number(button.dataset.recent)];
+        propertySelection = propertySelection?.key === item.key ? null : item;
+        renderPropertyPanel(true);
+        propertyPanel.querySelector(`button[data-recent="${button.dataset.recent}"]`)?.focus({ preventScroll: true });
+      } else if (button.dataset.copy != null && button.dataset.copy !== "—") {
+        clearTimeout(copyFeedbackTimers.get(button));
+        try {
+          await navigator.clipboard.writeText(button.dataset.copy);
+          if (!button.isConnected || propertyPanel.hidden) return;
+          button.dataset.copied = "";
+          propertyPanel.querySelector(".comty-property-feedback").textContent = `${button.getAttribute("aria-label").slice(5)} copied`;
+          clearTimeout(copyFeedbackTimers.get(button));
+          copyFeedbackTimers.set(button, setTimeout(() => { delete button.dataset.copied; }, 1200));
+        } catch {
+          delete button.dataset.copied;
+          if (button.isConnected && !propertyPanel.hidden) propertyPanel.querySelector(".comty-property-feedback").textContent = "Clipboard unavailable";
+        }
+      }
+    };
+
     function inspectedBackgroundToken(hex, element) {
       if (!element?.isConnected || isElementTreeHidden(element)) return null;
       const sampled = `rgb(${hex.slice(1).match(/../g).map(part => parseInt(part, 16)).join(', ')})`;
@@ -664,53 +969,42 @@ export function initComty(options = {}) {
     async function sampleColor() {
       if (colorPickerController) return;
       const inspectedBackground = selectedElement?.isConnected && !isElementTreeHidden(selectedElement) ? selectedElement : inspectedElement;
-      setMotionEnabled(false);
-      gridPanelOpen = false;
-      renderGridPanel();
-      toolPanel.hidden = false;
-      toolPanel.setAttribute("aria-label", "Color sampler");
       if (!window.EyeDropper) {
-        toolPanel.textContent = "Screen color sampling is not supported by this browser. Open this page in Chrome or Edge.";
-        dismissColorResultLater();
+        propertyPanel.querySelector(".comty-property-feedback").textContent = "Screen sampling requires Chrome or Edge";
         return;
       }
       colorPickerController = new AbortController();
-      pipetteBtn.setAttribute("aria-pressed", "true");
       // Hide every overlay so the sampler reads the page's original pixels.
       const previousVisibility = root.style.visibility;
       root.style.visibility = "hidden";
       xrayStyle.remove();
       try {
         const { sRGBHex } = await new window.EyeDropper().open({ signal: colorPickerController.signal });
+        if (colorPickerController.signal.aborted || propertyKind !== "color") return;
         if (!/^#[0-9a-f]{6}$/i.test(sRGBHex)) throw new Error("Invalid sampled color");
-        const rgb = sRGBHex.slice(1).match(/../g).map(part => parseInt(part, 16));
         const token = inspectedBackgroundToken(sRGBHex, inspectedBackground);
-        toolPanel.classList.add("comty-color-toast");
-        toolPanel.innerHTML = `<div class="comty-color-content">${token ? `<div class="comty-color-token">Element token · ${token}</div>` : ""}<div class="comty-color-values"><span class="comty-color-hex">${sRGBHex.toUpperCase()}</span><span class="comty-color-separator" aria-hidden="true">–</span><span class="comty-color-rgb">rgb(${rgb.join(", ")})</span></div><div class="comty-color-status" role="status">Copying…</div></div><span class="comty-color-swatch" aria-hidden="true"></span>`;
-        toolPanel.querySelector(".comty-color-swatch").style.backgroundColor = sRGBHex;
-        const status = toolPanel.querySelector(".comty-color-status");
-        dismissColorResultLater();
-        try {
-          await navigator.clipboard.writeText(sRGBHex.toUpperCase());
-          status.textContent = "Copied";
-        } catch { status.textContent = "Select to copy"; }
+        const item = colorDetails(sRGBHex, token || "");
+        rememberProperty(recentColors, item);
+        propertyKind = "color";
+        propertySelection = null;
+        renderPropertyPanel();
+        try { await navigator.clipboard.writeText(item.hex); propertyPanel.querySelector(".comty-property-feedback").textContent = "HEX copied"; }
+        catch { propertyPanel.querySelector(".comty-property-feedback").textContent = "Select a value to copy"; }
       } catch (error) {
-        if (error.name === "AbortError") toolPanel.hidden = true;
-        else { toolPanel.textContent = "Unable to sample a color. Please try again."; dismissColorResultLater(); }
+        if (error.name !== "AbortError") propertyPanel.querySelector(".comty-property-feedback").textContent = "Unable to sample a colour";
       } finally {
         root.style.visibility = previousVisibility;
-        if (toolPanel.classList.contains("comty-color-toast")) animateColorToast();
         colorPickerController = null;
-        pipetteBtn.setAttribute("aria-pressed", "false");
         if (session.inspect && xrayEnabled) document.head.appendChild(xrayStyle);
       }
     }
     document.addEventListener("pointerdown", event => {
       if (!toolPanel.hidden && !toolPanel.contains(event.target) && !toolbar.contains(event.target)) {
         gridPanelOpen = false;
-        animateColorToast(true);
+        toolPanel.hidden = true;
         gridBtn.setAttribute("aria-expanded", "false");
       }
+      if (!propertyPicking && !propertyPanel.hidden && !propertyPanel.contains(event.target) && !pipetteBtn.contains(event.target) && !typographyBtn.contains(event.target) && !event.target.closest?.(".comty-inspector-picker")) closePropertyPanel();
     }, true);
 
     const sidepanelBtn = document.createElement("button");
@@ -771,11 +1065,56 @@ export function initComty(options = {}) {
     let toolbarMotionFrame = 0;
     let toolbarAnimations = [];
     const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+    let workingIndicatorTimer = 0;
+    function scheduleWorkingIndicators() {
+      if (workingIndicatorTimer || reducedMotion.matches || document.hidden) return;
+      workingIndicatorTimer = setTimeout(() => {
+        workingIndicatorTimer = 0;
+        if (!root.isConnected) return;
+        const indicators = root.querySelectorAll('.comty-working-indicator');
+        if (!indicators.length) return;
+        for (const indicator of indicators) {
+          const previous = Number(indicator.dataset.activeDots.split(',')[0]);
+          const first = (previous + 1 + Math.floor(Math.random() * 8)) % 9;
+          const second = (first + 1 + Math.floor(Math.random() * 8)) % 9;
+          indicator.dataset.activeDots = `${first},${second}`;
+          [...indicator.children].forEach((dot, index) => dot.toggleAttribute('data-active', index === first || index === second));
+        }
+        scheduleWorkingIndicators();
+      }, 600);
+    }
+    function createWorkingIndicator() {
+      const indicator = document.createElement('span');
+      indicator.className = 'comty-working-indicator';
+      indicator.setAttribute('aria-hidden', 'true');
+      indicator.dataset.activeDots = '3,5';
+      for (let index = 0; index < 9; index++) {
+        const dot = document.createElement('i');
+        dot.toggleAttribute('data-active', index === 3 || index === 5);
+        indicator.appendChild(dot);
+      }
+      scheduleWorkingIndicators();
+      return indicator;
+    }
+    function resetWorkingIndicators() {
+      clearTimeout(workingIndicatorTimer);
+      workingIndicatorTimer = 0;
+      if (reducedMotion.matches) {
+        for (const indicator of root.querySelectorAll('.comty-working-indicator')) {
+          indicator.dataset.activeDots = '3,5';
+          [...indicator.children].forEach((dot, index) => dot.toggleAttribute('data-active', index === 3 || index === 5));
+        }
+      }
+      if (root.querySelector('.comty-working-indicator')) scheduleWorkingIndicators();
+    }
+    reducedMotion.addEventListener('change', resetWorkingIndicators);
+    document.addEventListener('visibilitychange', resetWorkingIndicators);
     const clampToolbar = (value, size, viewport) => Math.max(8, Math.min(value, viewport - size - 8));
     function rememberToolbarPosition(left, top) {
       const width = toolbar.offsetWidth, height = toolbar.offsetHeight;
       const centerX = left + width / 2, centerY = top + height / 2;
-      const horizontal = centerX < innerWidth / 3 ? "left" : centerX > innerWidth * 2 / 3 ? "right" : "center";
+      const availableWidth = innerWidth - width;
+      const horizontal = left < availableWidth / 3 ? "left" : left > availableWidth * 2 / 3 ? "right" : "center";
       const vertical = centerY < innerHeight / 2 ? "top" : "bottom";
       toolbarPosition = {
         horizontal, vertical,
@@ -803,20 +1142,26 @@ export function initComty(options = {}) {
         });
       }
       const rect = toolbar.getBoundingClientRect();
-      for (const panel of [toolPanel, sidepanel, motionPanel]) {
+      for (const panel of [toolPanel, propertyPanel, sidepanel, motionPanel]) {
         if (panel.hidden || (panel === sidepanel && !sidepanelOpen)) continue;
         const above = rect.top - 16;
         const below = innerHeight - rect.bottom - 16;
-        const useAbove = above >= panel.scrollHeight || above >= below;
+        const useAbove = panel === propertyPanel ? above >= below : above >= panel.scrollHeight || above >= below;
         panel.style.maxHeight = `${Math.max(0, useAbove ? above : below)}px`;
-        panel.style.left = `${Math.max(8, Math.min(rect.right - panel.offsetWidth, innerWidth - panel.offsetWidth - 8))}px`;
+        const edgeThreshold = toolbar.offsetHeight;
+        const alignment = rect.left <= edgeThreshold ? "left" : innerWidth - rect.right <= edgeThreshold ? "right" : "center";
+        const left = panel === propertyPanel
+          ? alignment === "left" ? rect.left : alignment === "right" ? rect.right - panel.offsetWidth : rect.left + (rect.width - panel.offsetWidth) / 2
+          : rect.right - panel.offsetWidth;
+        if (panel === propertyPanel) panel.dataset.alignment = alignment;
+        panel.style.left = `${Math.max(8, Math.min(left, innerWidth - panel.offsetWidth - 8))}px`;
         panel.style.right = "auto";
         panel.style.top = `${useAbove ? rect.top - panel.offsetHeight - 8 : rect.bottom + 8}px`;
         panel.style.bottom = "auto";
       }
     }
     const toolbarResize = new ResizeObserver(positionToolbar);
-    [toolbar, toolPanel, sidepanel, motionPanel].forEach(node => toolbarResize.observe(node));
+    [toolbar, toolPanel, propertyPanel, sidepanel, motionPanel].forEach(node => toolbarResize.observe(node));
     window.addEventListener("resize", positionToolbar);
 
     toolbar.addEventListener("pointerdown", event => {
@@ -876,8 +1221,11 @@ export function initComty(options = {}) {
 
     function prepareToolbarMotion() {
       if (toolbarMotionFrame) return;
-      const nodes = [toolbarSurface, browseBtn, inspectorBtn, btn, agentBtn, divider, commentTools, agentTools, inspectorTools].filter(Boolean);
-      const before = new Map(nodes.filter(node => !node.hidden).map(node => [node, node.getBoundingClientRect()]));
+      const nodes = [toolbarSurface, dragHandle, primaryTools, commentTools, agentTools, inspectorTools].filter(Boolean);
+      // Move each group's background with its icons, including when interrupted.
+      const before = new Map(nodes.filter(node => !node.hidden).map(node => [node, {
+        rect: node.getBoundingClientRect(), opacity: getComputedStyle(node).opacity,
+      }]));
       stopToolbarMotion();
       toolbarMotionFrame = requestAnimationFrame(() => {
         toolbarMotionFrame = 0;
@@ -887,8 +1235,8 @@ export function initComty(options = {}) {
         const timing = { duration: parseFloat(css.getPropertyValue("--comty-motion-duration")), easing: css.getPropertyValue("--comty-ease-out").trim() };
         for (const node of nodes.filter(node => !node.hidden)) {
           const next = node.getBoundingClientRect(), previous = before.get(node);
-          const transform = previous ? `translate(${previous.left - next.left}px, ${previous.top - next.top}px)${node === toolbarSurface ? ` scale(${previous.width / next.width}, ${previous.height / next.height})` : ""}` : "translateY(.25rem)";
-          toolbarAnimations.push(node.animate([{ transform, opacity: previous ? 1 : 0 }, { transform: "none", opacity: 1 }], timing));
+          const transform = previous ? `translate(${previous.rect.left - next.left}px, ${previous.rect.top - next.top}px)${node === toolbarSurface ? ` scale(${previous.rect.width / next.width}, ${previous.rect.height / next.height})` : ""}` : "none";
+          toolbarAnimations.push(node.animate([{ transform, opacity: previous?.opacity ?? 0 }, { transform: "none", opacity: 1 }], timing));
         }
       });
     }
@@ -1085,8 +1433,10 @@ export function initComty(options = {}) {
       if (mode === "off" || mode === "inspect" || session.inspect) {
         if (mode === "inspect" && session.inspect) return;
         setMotionEnabled(false);
+        closePropertyPanel();
         colorPickerController?.abort();
         cancelRulerDrag();
+        rulersEnabled = false;
         gridPanelOpen = false;
         toolPanel.hidden = true;
         measuredRegion = null;
@@ -1146,31 +1496,52 @@ export function initComty(options = {}) {
         return;
       }
       document.querySelector(".comty-auth-backdrop")?.remove();
+      const opener = document.activeElement;
       const backdrop = document.createElement("div");
       backdrop.className = "comty-auth-backdrop";
       backdrop.innerHTML = `
-        <div class="comty-auth-dialog" role="dialog" aria-modal="true" aria-labelledby="comty-auth-title">
+        <div class="comty-auth-dialog" role="dialog" aria-modal="true" aria-labelledby="comty-auth-title" aria-describedby="comty-auth-description" tabindex="-1">
+          <div class="comty-auth-header">
+            <span class="comty-auth-icon">${icon('<path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.5 8.5 0 1 1 16.1-3.8Z"/>')}</span>
+            <button type="button" class="comty-auth-close" data-comty-close aria-label="Close sign-in dialog">${icon('<path d="m6 6 12 12M6 18 18 6"/>')}</button>
+          </div>
           <h2 id="comty-auth-title">${forbidden ? "Project access required" : "Sign in to comment"}</h2>
-          <p>${forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Comments are shared with the project team, so we need to know who is writing."}</p>
+          <p id="comty-auth-description">${forbidden ? "This account is not a member of this project. Ask the project owner for an invite." : "Sign in to share feedback with your team and keep the conversation in one place."}</p>
           <div class="comty-auth-actions">
-            <button type="button" data-comty-close>Close</button>
+            <button type="button" data-comty-close>${forbidden ? "Close" : "Cancel"}</button>
             ${forbidden ? "" : '<button type="button" class="comty-auth-primary" data-comty-login>Continue to sign in</button>'}
           </div>
         </div>`;
-      backdrop.querySelector("[data-comty-close]").onclick = () => backdrop.remove();
+      const close = () => {
+        backdrop.remove();
+        if (opener?.isConnected) opener.focus({ preventScroll: true });
+      };
+      backdrop.querySelectorAll("[data-comty-close]").forEach(button => { button.onclick = close; });
+      backdrop.addEventListener("keydown", event => {
+        event.stopPropagation();
+        if (event.key === "Escape") { event.preventDefault(); close(); }
+        if (event.key === "Tab") {
+          const buttons = [...backdrop.querySelectorAll("button:not(:disabled)")];
+          if (!buttons.length) { event.preventDefault(); return; }
+          const first = buttons[0], last = buttons.at(-1);
+          if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
+          else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+        }
+      });
       const loginButton = backdrop.querySelector("[data-comty-login]");
       if (loginButton) {
         loginButton.onclick = () => {
           loginButton.disabled = true;
           loginButton.innerText = "Connecting…";
-          backdrop.querySelector("[data-comty-close]").disabled = true;
+          backdrop.querySelectorAll("[data-comty-close]").forEach(button => { button.disabled = true; });
           setTimeout(() => window.location.assign(loginUrl), 50);
         };
       }
       backdrop.onclick = (event) => {
-        if (event.target === backdrop) backdrop.remove();
+        if (event.target === backdrop) close();
       };
       root.appendChild(backdrop);
+      (loginButton || backdrop.querySelector("[data-comty-close]")).focus({ preventScroll: true });
     }
 
     function formatBoxValue(value) {
@@ -1280,7 +1651,7 @@ export function initComty(options = {}) {
       };
       try {
         for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) {
-          if (sheet.disabled || sheet.ownerNode?.closest?.('#comty-root') || sheet.ownerNode === style) continue;
+          if (sheet.disabled || sheet.ownerNode?.closest?.('#comty-root') || sheet.ownerNode === style || sheet.ownerNode?.matches?.('link[data-comty-font]')) continue;
           if (sheet.media?.mediaText && !matchMedia(sheet.media.mediaText).matches) continue;
           visit(sheet.cssRules);
         }
@@ -1485,7 +1856,29 @@ export function initComty(options = {}) {
     }
 
     function renderInspector() {
-      if (motion.enabled) {
+      if (propertyPicking === "font") {
+        if (!inspectedElement?.isConnected || isElementTreeHidden(inspectedElement)) { hideInspector(); return; }
+        let box = inspectionLayer.querySelector(".comty-font-target");
+        if (!box) {
+          box = document.createElement("div");
+          box.className = "comty-font-target";
+          inspectionLayer.replaceChildren(box);
+        }
+        const rect = inspectedElement.getBoundingClientRect();
+        // Tight line-height can leave glyphs outside the element's layout box.
+        const range = document.createRange();
+        range.selectNodeContents(inspectedElement);
+        const text = range.getBoundingClientRect();
+        const left = Math.min(rect.left, text.width ? text.left : rect.left);
+        const top = Math.min(rect.top, text.height ? text.top : rect.top);
+        setMeasuredRect(box, {
+          left, top,
+          width: Math.max(rect.right, text.width ? text.right : rect.right) - left,
+          height: Math.max(rect.bottom, text.height ? text.bottom : rect.bottom) - top,
+        });
+        return;
+      }
+      if (propertyPicking || motion.enabled || (session.inspect && rulersEnabled)) {
         if (inspectionLayer.childNodes.length) hideInspector();
         return;
       }
@@ -1560,13 +1953,26 @@ export function initComty(options = {}) {
       panel.setAttribute("aria-label", "Element properties");
       if (selected) panel.dataset.selected = "";
       const copyable = (value) => `<button type="button" title="Copy ${escapeInspectorText(value)}" data-copy="${escapeInspectorText(value)}">${escapeInspectorText(value)}</button>`;
-      panel.innerHTML = `<div class="comty-inspector-head">${copyable(selector)}${copyable(`${formatBoxValue(rect.width)} × ${formatBoxValue(rect.height)}`)}</div><div class="comty-inspector-details">${(inspectExpanded ? rows : rows.slice(0, 6)).map(([key, value, tokens]) => `<div class="comty-inspector-row"><span>${key}</span><div class="comty-inspector-value">${tokens?.length ? `<div class="comty-inspector-tokens">${tokens.map(token => copyable(token)).join("")}</div>` : ""}${copyable(value)}</div></div>`).join("")}</div>${rows.length > 6 && selected ? `<button type="button" class="comty-inspector-expand">${inspectExpanded ? "Show less" : `Show ${rows.length - 6} more`}</button>` : ""}`;
+      const featured = new Set(["background", "color", "font", "font-family"]);
+      const visibleRows = inspectExpanded ? rows : selected ? [...rows.filter(([key]) => featured.has(key)), ...rows.filter(([key]) => !featured.has(key))].slice(0, 6) : rows.slice(0, 6);
+      panel.innerHTML = `<div class="comty-inspector-head">${copyable(selector)}${copyable(`${formatBoxValue(rect.width)} × ${formatBoxValue(rect.height)}`)}</div><div class="comty-inspector-details">${visibleRows.map(([key, value, tokens]) => {
+        const picker = key === "background" || key === "color" ? "color" : key === "font" || key === "font-family" ? "font" : "";
+        const valueButton = picker && selected
+          ? `<button type="button" class="comty-inspector-picker" data-picker="${picker}" data-property="${key}" aria-label="Open ${picker === "color" ? key + " colour" : "typography"} details">${picker === "color" ? '<span class="comty-inspector-swatch" aria-hidden="true"></span>' : ""}${escapeInspectorText(value)}</button>`
+          : copyable(value);
+        return `<div class="comty-inspector-row"><span>${key}</span><div class="comty-inspector-value">${tokens?.length ? `<div class="comty-inspector-tokens">${tokens.map(token => copyable(token)).join("")}</div>` : ""}${valueButton}</div></div>`;
+      }).join("")}</div>${rows.length > 6 && selected ? `<button type="button" class="comty-inspector-expand">${inspectExpanded ? "Show less" : `Show ${rows.length - 6} more`}</button>` : ""}`;
+      for (const button of panel.querySelectorAll('.comty-inspector-picker[data-picker="color"]')) {
+        button.querySelector(".comty-inspector-swatch").style.backgroundColor = getComputedStyle(target)[button.dataset.property === "background" ? "backgroundColor" : "color"];
+      }
       panel.onclick = async (event) => {
         const button = event.target.closest("button");
         if (!button) return;
         if (button.classList.contains("comty-inspector-expand")) {
           inspectExpanded = !inspectExpanded;
           renderInspector();
+        } else if (button.dataset.picker) {
+          openPropertyPanel(button.dataset.picker, target, button.dataset.property, button);
         } else {
           try {
             await navigator.clipboard.writeText(button.dataset.copy);
@@ -2714,7 +3120,8 @@ export function initComty(options = {}) {
         const failed = Boolean(task.error) || task.status === 'in_review';
         const state = failed ? 'error' : task.status === 'done' ? 'success' : task.status === 'cancel' ? 'cancel' : 'working';
         const row = node('div', 'comty-agent-row'); row.dataset.taskId = task.id;
-        const dot = node('span', 'comty-agent-dot'); dot.dataset.status = state; dot.setAttribute('aria-hidden', 'true');
+        const dot = state === 'working' ? createWorkingIndicator() : node('span', 'comty-agent-dot');
+        dot.dataset.status = state; dot.setAttribute('aria-hidden', 'true');
         const name = node('span', 'comty-agent-row-name', task.content);
         row.append(dot, name);
         if (state === 'working') row.appendChild(node('span', 'comty-agent-row-state', task.status === 'todo' ? 'Starting' : 'Working'));
@@ -3568,7 +3975,9 @@ export function initComty(options = {}) {
           outline = document.createElement("div");
           outline.className = "comty-agent-working";
           outline.setAttribute("aria-label", "Agent working on this element");
-          const badge = document.createElement("span"); badge.textContent = "Working";
+          const badge = document.createElement("span");
+          badge.className = "comty-agent-working-badge";
+          badge.append(createWorkingIndicator(), "Working");
           outline.appendChild(badge); root.appendChild(outline);
           workingOutlines.set(id, outline);
         }
@@ -3590,6 +3999,7 @@ export function initComty(options = {}) {
       }
       if (session.inspect || session.edit || inspectionLayer.childNodes.length) renderInspector();
       if (session.inspect && rulersEnabled) renderRulers();
+      if (session.inspect && rulersEnabled) measurements.render();
     }
 
     function ensureLiveTracking() {
@@ -3681,6 +4091,14 @@ export function initComty(options = {}) {
     document.addEventListener("pointermove", (event) => {
       if (!session.edit && !session.inspect) return;
       if (motion.enabled) return;
+      if (propertyPicking) {
+        const target = event.target;
+        if (propertyPicking === "font" && target instanceof Element && !isComtyElement(target) && getElementOwnTextSignature(target)) {
+          inspectedElement = target;
+          renderInspector();
+        } else hideInspector();
+        return;
+      }
       if (inspectDrag) {
         const dx = event.clientX - inspectDrag.x, dy = event.clientY - inspectDrag.y;
         if (Math.hypot(dx, dy) > 4) {
@@ -3712,7 +4130,7 @@ export function initComty(options = {}) {
       if ((!session.inspect && !session.edit) || !(event.target instanceof Element) || isComtyElement(event.target)) return;
       if (event.button !== 0) return;
       if (motion.enabled) return;
-      if (session.inspect) {
+      if (session.inspect && !propertyPicking) {
         inspectDrag = { x: event.clientX, y: event.clientY };
         measuredRegion = null;
       }
@@ -3742,6 +4160,19 @@ export function initComty(options = {}) {
           e.preventDefault();
           e.stopImmediatePropagation();
           if (ignoreInspectClick) return;
+          if (propertyPicking) {
+            const kind = propertyPicking;
+            let element = target;
+            const property = getElementOwnTextSignature(element) ? "color" : "background";
+            if (kind === "color" && property === "background") {
+              while (element.parentElement && getComputedStyle(element).backgroundColor === "rgba(0, 0, 0, 0)") element = element.parentElement;
+            }
+            openPropertyPanel(kind, element, property, kind === "color" ? pipetteBtn : typographyBtn, kind === "color" ? colorMagnifier.sample() : null);
+            propertyPicking = kind;
+            colorMagnifier.setEnabled(kind === "color");
+            document.documentElement.dataset.comtyPropertyPicking = kind;
+            return;
+          }
           measuredRegion = null;
           selectedElement = getAnchorElement(target);
           inspectExpanded = false;
@@ -3813,15 +4244,16 @@ export function initComty(options = {}) {
         setMotionEnabled(false); motionBtn.focus({ preventScroll: true });
         return;
       }
-      if (e.key === "Escape" && (!toolPanel.hidden || rulerDrag || colorPickerController)) {
+      if (e.key === "Escape" && (!propertyPanel.hidden || !toolPanel.hidden || rulerDrag || colorPickerController)) {
         e.preventDefault();
-        gridPanelOpen = false; animateColorToast(true);
+        closePropertyPanel(true);
+        gridPanelOpen = false; toolPanel.hidden = true;
         gridBtn.setAttribute("aria-expanded", "false");
         cancelRulerDrag(); colorPickerController?.abort();
         return;
       }
       if (session.inspect && !isEditable && !e.repeat && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) {
-        const button = { x: xrayBtn, r: rulersBtn, g: gridBtn, p: pipetteBtn, m: motionBtn }[e.key.toLowerCase()];
+        const button = { x: xrayBtn, r: rulersBtn, g: gridBtn, p: pipetteBtn, t: typographyBtn, m: motionBtn }[e.key.toLowerCase()];
         if (button) { e.preventDefault(); button.click(); return; }
       }