npm - @comty.io/core - Versions diffs - 0.1.0 → 0.1.1 - Mend

@comty.io/core 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/comty-sdk.js CHANGED Viewed

@@ -1,13 +1,16 @@
 // Generated by npm run build in sdk/. Edit src/browser.js and its imported modules instead.
 (function () {
 function getComtyStyle() {
+    const toolbarSurface = "#2b2d2f";
+    const toolbarMuted = "#b8babb";
     const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
+    const typographyCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="8" y="8" width="23" height="23" rx="7" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width=".75"/><path d="m14 25 5.5-12L25 25m-8.5-4h6M13 25h4m5 0h4" fill="none" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 2 2 15 4-5 6-3Z" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
     return `
       #comty-root {
-        --comty-surface: #262626;
-        --comty-hover-surface: #393939;
+        --comty-surface: var(--comty-toolbar-surface);
+        --comty-hover-surface: var(--comty-toolbar-selected);
         --comty-foreground: #fafafa;
-        --comty-muted: #a3a3a3;
+        --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-agent-warning: #e9b86d;
         --comty-agent-success: #80c9a4;
@@ -15,8 +18,8 @@ function getComtyStyle() {
         --comty-outline: oklch(0.62 0.18 255);
         --comty-paper: #fff;
         --comty-ink: #171717;
-        --comty-border: #e5e5e5;
-        --comty-field-surface: #f5f5f5;
+        --comty-border: #434649;
+        --comty-field-surface: var(--comty-toolbar-group);
         --comty-xray: #0000ff;
         --comty-guide: #ff0000;
         --comty-margin-fill: rgb(246 172 88 / .45);
@@ -25,15 +28,48 @@ function getComtyStyle() {
         --comty-floating-shadow: 0 .25rem 1rem rgb(0 0 0 / .16);
         --comty-tool-size: 2.375rem;
         --comty-toolbar-padding: .375rem;
+        --comty-toolbar-gap: .375rem;
+        --comty-toolbar-grip-width: .6rem;
+        --comty-toolbar-grip-gap: .25rem;
+        --comty-magnifier-size: 5.375rem;
+        --comty-magnifier-rim: .625rem;
+        --comty-magnifier-line: .125rem;
+        --comty-magnifier-grid-line: .03125rem;
+        --comty-magnifier-dark: #111;
+        --comty-magnifier-gray: #999;
+        --comty-magnifier-shadow: 0 .0625rem .375rem rgb(0 0 0 / .5);
+        --comty-property-width: 16rem;
+        --comty-property-swatch: 2rem;
+        --comty-property-font-size: .6875rem;
+        --comty-property-row-height: 1.375rem;
+        --comty-toolbar-surface: ${toolbarSurface};
+        --comty-toolbar-group: #202224;
+        --comty-toolbar-selected: #505457;
+        --comty-toolbar-muted: ${toolbarMuted};
+        --comty-measure: #ff3b30;
+        --comty-font: "Inter", ui-sans-serif, system-ui, sans-serif;
+        --comty-dialog-surface: var(--comty-surface);
+        --comty-dialog-ink: var(--comty-foreground);
+        --comty-dialog-soft: var(--comty-muted);
+        --comty-dialog-field: var(--comty-field-surface);
+        --comty-dialog-line: var(--comty-border);
+        --comty-dialog-backdrop: rgb(0 0 0 / .4);
+        --comty-dialog-radius: 2rem;
+        --comty-dialog-width: 32rem;
+        --comty-dialog-shadow: 0 1.5rem 4rem rgb(0 0 0 / .16);
         --comty-motion-duration: 220ms;
+        --comty-working-dot-size: .25em;
+        --comty-working-dot-gap: .125em;
         --comty-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+        --comty-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
         position: fixed;
         inset: 0;
         width: 100%; height: 100%; max-width: none; max-height: none;
         margin: 0; padding: 0; border: 0; overflow: visible; background: transparent;
         z-index: 2147483647;
         pointer-events: none;
-        font-family: ui-sans-serif, system-ui, sans-serif;
+        font-family: var(--comty-font);
+        color-scheme: dark;
       }
       html.comty-agent-enabled body { transition: margin-left 220ms cubic-bezier(0.23, 1, 0.32, 1), margin-right 220ms cubic-bezier(0.23, 1, 0.32, 1); }
       html.comty-agent-docked[data-comty-agent-side="left"] body { margin-left: 22rem; }
@@ -59,7 +95,9 @@ function getComtyStyle() {
       .comty-agent-row { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2rem; padding: .25rem .5rem; border-radius: .5rem; color: var(--comty-foreground); }
       .comty-agent-row:hover { background: var(--comty-hover-surface); }
       .comty-agent-dot { width: .4375rem; height: .4375rem; flex: 0 0 auto; border-radius: 50%; background: var(--comty-muted); }
-      .comty-agent-dot[data-status="working"] { background: var(--comty-accent); animation: comty-agent-pulse 1.4s ease-in-out infinite; }
+      .comty-working-indicator { display: inline-grid; grid-template-columns: repeat(3, var(--comty-working-dot-size)); gap: var(--comty-working-dot-gap); flex: 0 0 auto; color: var(--comty-foreground); }
+      .comty-working-indicator > i { display: block; width: var(--comty-working-dot-size); height: var(--comty-working-dot-size); border-radius: 50%; background: currentColor; opacity: .25; transition: opacity 150ms linear; }
+      .comty-working-indicator > i[data-active] { opacity: 1; }
       .comty-agent-dot[data-status="success"] { background: var(--comty-agent-success); }
       .comty-agent-dot[data-status="error"] { background: var(--comty-agent-error); }
       .comty-agent-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@@ -69,7 +107,7 @@ function getComtyStyle() {
       @media (hover: none) { .comty-agent-row-actions { position: static; opacity: 1; pointer-events: auto; transform: none; background: transparent; } }
       .comty-agent-panel .comty-agent-row-actions .comty-agent-action { min-height: 1.5rem; padding: .125rem .375rem; border-radius: .25rem; background: transparent; color: var(--comty-muted); font-size: .875rem; }
       .comty-agent-panel .comty-agent-row-actions .comty-agent-action:hover { color: var(--comty-foreground); background: var(--comty-surface); }
-      .comty-agent-error-popover { position: fixed; z-index: 2147483647; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: .75rem .875rem; border: .0625rem solid var(--comty-hover-surface); border-radius: .625rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; pointer-events: none; color-scheme: dark; }
+      .comty-agent-error-popover { position: fixed; z-index: 2147483647; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: .75rem .875rem; border: 0; border-radius: .625rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; pointer-events: none; color-scheme: dark; }
       .comty-agent-error-popover strong { display: block; font-weight: 600; }
       .comty-agent-error-popover p { margin: .375rem 0 0; color: var(--comty-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
       .comty-agent-panel p { margin: .5rem 0 0; font: inherit; color: var(--comty-muted); }
@@ -93,10 +131,8 @@ function getComtyStyle() {
       .comty-agent-empty strong { font-size: .875rem; font-weight: 500; }
       .comty-agent-empty p { max-width: 15rem; margin: .5rem auto 0; font-size: .875rem; }
       .comty-agent-working { position: fixed; z-index: 1; box-sizing: border-box; border: 2px solid var(--comty-accent); border-radius: .25rem; pointer-events: none; }
-      .comty-agent-working span { position: absolute; left: -.125rem; bottom: 100%; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-accent); color: var(--comty-paper); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
-      .comty-agent-working[data-badge-below] span { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
-      .comty-agent-working span::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: currentColor; animation: comty-agent-pulse 1.4s ease-in-out infinite; }
-      @keyframes comty-agent-pulse { 50% { opacity: .3; } }
+      .comty-agent-working-badge { position: absolute; left: -.125rem; bottom: 100%; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-surface); color: var(--comty-foreground); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
+      .comty-agent-working[data-badge-below] .comty-agent-working-badge { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
       #comty-root { cursor: default; }
       #comty-root::backdrop { background: transparent; pointer-events: none; }
       html.comty-comment-placement,
@@ -114,22 +150,24 @@ function getComtyStyle() {
         z-index: 2147483647;
         display: flex;
         align-items: center;
-        gap: .125rem;
+        gap: var(--comty-toolbar-gap);
         max-width: calc(100vw - 2rem);
         padding: var(--comty-toolbar-padding);
-        border-radius: .9375rem;
-        color: var(--comty-foreground);
+        border-radius: 1.125rem;
+        color: var(--comty-toolbar-muted);
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
         touch-action: none;
         user-select: none;
-        cursor: pointer;
+        cursor: default;
         isolation: isolate;
         transition: opacity 180ms ease, visibility 0s linear 180ms;
       }
       #comty-root.comty-active .comty-toolbar { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
-      .comty-toolbar-surface { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); transform-origin: top left; pointer-events: none; }
+      .comty-toolbar-surface { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--comty-toolbar-surface); box-shadow: var(--comty-floating-shadow); transform-origin: top left; pointer-events: none; }
+      .comty-toolbar-grip { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--comty-toolbar-grip-width); height: var(--comty-tool-size); margin-inline-end: calc(var(--comty-toolbar-grip-gap) - var(--comty-toolbar-gap)); color: inherit; cursor: grab; }
+      .comty-toolbar-grip svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
       .comty-toolbar[data-dragging], .comty-toolbar[data-dragging] * { cursor: grabbing; }
       .comty-toolbar:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
       .comty-control-button {
@@ -153,13 +191,14 @@ function getComtyStyle() {
       }
       .comty-control-button svg { width: 1.125rem; height: 1.125rem; }
       .comty-control-button:hover { background: var(--comty-hover-surface); }
-      .comty-control-button[aria-pressed="true"] { background: var(--comty-accent); color: var(--comty-paper); }
+      .comty-control-button[aria-pressed="true"] { background: var(--comty-toolbar-selected); color: var(--comty-foreground); }
       .comty-control-button:focus-visible, .comty-filter-dot:focus-visible {
-        outline: .125rem solid var(--comty-accent);
+        outline: .125rem solid var(--comty-foreground);
         outline-offset: .125rem;
       }
-      .comty-tool-context { display: flex; align-items: center; gap: .125rem; }
-      .comty-tool-divider { width: .0625rem; height: 1.25rem; margin-inline: .375rem; background: var(--comty-hover-surface); }
+      .comty-tool-primary, .comty-tool-context { display: flex; align-items: center; gap: .125rem; padding: .125rem; border-radius: .875rem; background: var(--comty-toolbar-group); }
+      .comty-tool-primary { position: relative; z-index: 1; }
+      .comty-tool-divider { display: none; }
       .comty-filter-controls { display: flex; align-items: center; gap: .375rem; padding-inline: .5rem; }
       .comty-filter-dot { flex-shrink: 0; width: .625rem; height: .625rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
       .comty-filter-dot-muted { opacity: .35; }
@@ -167,7 +206,7 @@ function getComtyStyle() {
       [data-comty-anchor-hidden] { visibility: hidden !important; pointer-events: none !important; }
       @media (prefers-reduced-motion: reduce) {
         html.comty-agent-enabled body { transition: none; }
-        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-agent-working span::before { transition: none !important; animation: none !important; }
+        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-working-indicator > i { transition: none !important; animation: none !important; }
       }
       .comty-sidepanel {
@@ -182,9 +221,9 @@ function getComtyStyle() {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        background: white;
-        color: #111;
-        border: 1px solid rgba(17,24,39,.12);
+        background: var(--comty-surface);
+        color: var(--comty-foreground);
+        border: 1px solid var(--comty-border);
         border-radius: 18px;
         box-shadow: 0 1.5rem 4rem rgb(23 32 29 / 0.12);
         font-family: sans-serif;
@@ -207,7 +246,7 @@ function getComtyStyle() {
         align-items: center;
         gap: 12px;
         padding: 8px;
-        border-bottom: 1px solid rgba(17,24,39,.1);
+        border-bottom: 1px solid var(--comty-border);
       }
       .comty-sidepanel-header-filters {
@@ -224,15 +263,15 @@ function getComtyStyle() {
         height: 32px;
         border: none;
         border-radius: 8px;
-        background: #f4f4f5;
-        color: #111;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
         padding: 0 12px;
         font: 14px/1 sans-serif;
         outline: none;
       }
       .comty-sidepanel-search::placeholder {
-        color: #9ca3af;
+        color: var(--comty-muted);
       }
       .comty-sidepanel-search::-webkit-search-cancel-button {
@@ -251,14 +290,14 @@ function getComtyStyle() {
         border: none;
         border-radius: 8px;
         background: transparent;
-        color: #111;
+        color: var(--comty-foreground);
         cursor: pointer;
         appearance: none;
       }
       .comty-sidepanel-icon-button:hover,
       .comty-sidepanel-icon-button:focus-visible {
-        background: #f4f4f5;
+        background: var(--comty-field-surface);
         outline: none;
       }
@@ -284,7 +323,7 @@ function getComtyStyle() {
       .comty-sidepanel-empty {
         display: flex;
         gap: 14px;
-        color: #111;
+        color: var(--comty-foreground);
         padding: 22px 12px;
         font: 14px/1.45 sans-serif;
       }
@@ -304,7 +343,7 @@ function getComtyStyle() {
         border: none;
         border-radius: 10px;
         background: transparent;
-        color: #111;
+        color: var(--comty-foreground);
         font: 14px/1.35 sans-serif;
         text-align: left;
         cursor: pointer;
@@ -314,7 +353,7 @@ function getComtyStyle() {
       .comty-sidepanel-item:hover,
       .comty-sidepanel-item:focus-visible {
-        background: #f4f4f5;
+        background: var(--comty-field-surface);
         outline: none;
       }
@@ -342,7 +381,7 @@ function getComtyStyle() {
       .comty-sidepanel-item-meta {
         display: block;
         margin-top: 6px;
-        color: #6b7280;
+        color: var(--comty-muted);
         font: 11px/1.2 sans-serif;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -394,9 +433,9 @@ function getComtyStyle() {
       }
       .comty-pin.comty-pin-with-avatar {
-        background: #fff;
-        color: #1f1f1f;
-        border: 2px solid #fff;
+        background: var(--comty-surface);
+        color: var(--comty-foreground);
+        border: 2px solid var(--comty-border);
         box-shadow: 0 2px 6px rgba(0,0,0,.18);
         filter: none;
         transition:
@@ -444,9 +483,9 @@ function getComtyStyle() {
       .comty-bubble {
         position: fixed;
         z-index: 2147483646;
-        background: white;
-        color: #1f1f1f;
-        border: 1px solid rgba(0,0,0,.08);
+        background: var(--comty-surface);
+        color: var(--comty-foreground);
+        border: 0;
         box-shadow: 0 10px 28px rgba(0,0,0,.2);
         padding: 0;
         border-radius: 14px;
@@ -485,12 +524,12 @@ function getComtyStyle() {
         gap: 12px;
         min-height: 40px;
         padding: 0 16px;
-        border-bottom: 1px solid rgba(0,0,0,.1);
+        border-bottom: 1px solid var(--comty-border);
       }
       .comty-bubble-title {
         margin: 0;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         font-size: 12px;
         font-weight: 600;
         line-height: 1;
@@ -505,7 +544,7 @@ function getComtyStyle() {
       .comty-bubble-content {
         flex: 1;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         font-size: 14px;
         line-height: 1.45;
         overflow-wrap: anywhere;
@@ -522,7 +561,7 @@ function getComtyStyle() {
         border: none;
         padding: 0;
         background: transparent;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         cursor: text;
         font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
@@ -547,7 +586,7 @@ function getComtyStyle() {
         overflow-y: auto;
         overscroll-behavior: contain;
         scrollbar-width: thin;
-        scrollbar-color: rgba(0,0,0,.22) transparent;
+        scrollbar-color: var(--comty-hover-surface) transparent;
         box-sizing: border-box;
       }
@@ -579,7 +618,7 @@ function getComtyStyle() {
       .comty-comment-author-name {
         min-width: 0;
         overflow: hidden;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         font-size: 14px;
         font-weight: 600;
         line-height: 1.25;
@@ -589,7 +628,7 @@ function getComtyStyle() {
       .comty-comment-time {
         flex: 0 0 auto;
-        color: #b3b3b3;
+        color: var(--comty-muted);
         font-size: 13px;
         font-weight: 400;
         line-height: 1.25;
@@ -602,8 +641,8 @@ function getComtyStyle() {
         height: 24px;
         overflow: hidden;
         border-radius: 50%;
-        background: #e6e6e6;
-        color: #404040;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
         font-size: 10px;
         font-weight: 600;
         line-height: 1;
@@ -639,7 +678,7 @@ function getComtyStyle() {
         border: 0;
         border-radius: 6px;
         background: transparent;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         cursor: pointer;
         appearance: none;
         transition:
@@ -649,7 +688,7 @@ function getComtyStyle() {
       .comty-icon-button:hover,
       .comty-icon-button:focus-visible {
-        background: #f2f2f2;
+        background: var(--comty-hover-surface);
         outline: none;
       }
@@ -658,7 +697,7 @@ function getComtyStyle() {
       }
       .comty-icon-button:disabled {
-        color: #b3b3b3;
+        color: var(--comty-muted);
         cursor: default;
       }
@@ -681,7 +720,7 @@ function getComtyStyle() {
         border: 0;
         border-radius: 6px;
         background: transparent;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         cursor: pointer;
         appearance: none;
         font: 600 12px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -692,7 +731,7 @@ function getComtyStyle() {
       .comty-status-trigger:hover,
       .comty-status-trigger:focus-visible {
-        background: #f2f2f2;
+        background: var(--comty-hover-surface);
         outline: none;
       }
@@ -701,7 +740,7 @@ function getComtyStyle() {
       }
       .comty-status-trigger:disabled {
-        color: #8c8c8c;
+        color: var(--comty-muted);
         cursor: default;
       }
@@ -728,12 +767,12 @@ function getComtyStyle() {
       }
       .comty-popover-item.comty-popover-item-destructive {
-        color: #dc2626;
+        color: var(--comty-agent-error);
       }
       .comty-popover-item.comty-popover-item-destructive:hover,
       .comty-popover-item.comty-popover-item-destructive:focus-visible {
-        background: #fef2f2;
+        background: color-mix(in srgb, var(--comty-agent-error) 12%, var(--comty-surface));
         outline: none;
       }
@@ -751,7 +790,7 @@ function getComtyStyle() {
         min-height: 36px;
         padding: 4px 8px 4px 16px;
         border-radius: 14px;
-        background: #f5f5f5;
+        background: var(--comty-field-surface);
         box-sizing: border-box;
         transition: box-shadow 160ms ease;
       }
@@ -766,13 +805,13 @@ function getComtyStyle() {
         padding: 0;
         border: 0;
         background: transparent;
-        color: #1f1f1f;
+        color: var(--comty-foreground);
         font: 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
       }
       .comty-reply-input::placeholder {
-        color: #b3b3b3;
+        color: var(--comty-muted);
       }
       .comty-reply-button {
@@ -802,7 +841,7 @@ function getComtyStyle() {
       }
       .comty-reply-button:disabled {
-        background: #d9d9d9;
+        background: var(--comty-hover-surface);
         cursor: default;
       }
@@ -820,7 +859,7 @@ function getComtyStyle() {
         padding: 4px 16px;
         border: 0;
         border-radius: 14px;
-        background: #f5f5f5;
+        background: var(--comty-field-surface);
         color: #0d99ff;
         text-align: left;
         font: 600 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -828,7 +867,7 @@ function getComtyStyle() {
         transition: background-color 160ms ease;
       }
-      .comty-sign-in-reply:hover { background: #ececec; }
+      .comty-sign-in-reply:hover { background: var(--comty-hover-surface); }
       .comty-sign-in-reply:focus-visible { outline: 2px solid #0d99ff; outline-offset: 2px; }
       .comty-hover-bubble {
@@ -872,15 +911,32 @@ function getComtyStyle() {
         font-size: 12px;
       }
-      .comty-auth-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.35); font-family: sans-serif; }
-      .comty-auth-dialog { width: min(360px, 100%); padding: 20px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #111; box-shadow: 0 16px 48px rgba(0,0,0,.2); }
-      .comty-auth-dialog h2 { margin: 0; font-size: 18px; line-height: 1.2; }
-      .comty-auth-dialog p { margin: 7px 0 0; color: #6b7280; font-size: 14px; line-height: 1.45; }
-      .comty-auth-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
-      .comty-auth-actions button { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111; font: 600 13px/1 sans-serif; cursor: pointer; }
-      .comty-auth-actions .comty-auth-primary { border-color: #111; background: #111; color: #fff; }
-      .comty-auth-actions button:disabled { opacity: .6; cursor: wait; }
-      .comty-auth-toast { position: fixed; top: 16px; left: 50%; z-index: 2147483647; transform: translateX(-50%); padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.15); font: 600 12px/1 sans-serif; }
+      .comty-auth-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 1rem; background: var(--comty-dialog-backdrop); font-family: var(--comty-font); }
+      .comty-auth-dialog { box-sizing: border-box; width: min(var(--comty-dialog-width), 100%); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.75rem; border: 0; border-radius: var(--comty-dialog-radius); background: var(--comty-dialog-surface); color: var(--comty-dialog-ink); box-shadow: var(--comty-dialog-shadow); text-align: left; outline: none; }
+      .comty-auth-dialog *, .comty-auth-dialog *::before, .comty-auth-dialog *::after { box-sizing: border-box; }
+      .comty-auth-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+      .comty-auth-icon, .comty-auth-close { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
+      .comty-auth-icon { border-radius: .75rem; }
+      .comty-auth-close { border-radius: 50%; cursor: pointer; }
+      .comty-auth-header svg { width: 1.25rem; height: 1.25rem; }
+      .comty-auth-dialog h2 { margin: 0; color: inherit; font: 600 1.5rem/1.25 var(--comty-font); letter-spacing: -.025em; }
+      .comty-auth-dialog p { margin: 1rem 0 0; color: var(--comty-dialog-soft); font: 400 .875rem/1.65 var(--comty-font); }
+      .comty-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: .0625rem solid var(--comty-dialog-line); }
+      .comty-auth-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; margin: 0; padding: .625rem 1rem; border: 0; border-radius: 999rem; background: transparent; color: var(--comty-dialog-soft); font: 500 .875rem/1.25 var(--comty-font); cursor: pointer; }
+      .comty-auth-actions button:hover, .comty-auth-close:hover { background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
+      .comty-auth-actions .comty-auth-primary { border-color: transparent; background: var(--comty-dialog-ink); color: var(--comty-dialog-surface); }
+      .comty-auth-actions .comty-auth-primary:hover { background: var(--comty-dialog-soft); color: var(--comty-dialog-surface); }
+      .comty-auth-dialog button:focus-visible { outline: .125rem solid var(--comty-dialog-ink); outline-offset: .1875rem; }
+      .comty-auth-dialog button:disabled { opacity: .5; cursor: wait; }
+      .comty-distance-layer { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--comty-measure); }
+      .comty-distance-line, .comty-distance-extension { stroke: currentColor; stroke-width: 1; fill: none; shape-rendering: crispEdges; }
+      .comty-distance-extension { stroke-dasharray: 3 3; opacity: .65; }
+      .comty-distance-arrow, .comty-distance-label, .comty-distance-snap { fill: currentColor; }
+      .comty-distance-value { fill: var(--comty-paper); font: 500 .75rem var(--comty-font); }
+      .comty-distance-announcement { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+      html.comty-measure-vertical, html.comty-measure-vertical body *:not(#comty-root):not(#comty-root *) { cursor: ns-resize !important; }
+      html.comty-measure-horizontal, html.comty-measure-horizontal body *:not(#comty-root):not(#comty-root *) { cursor: ew-resize !important; }
+      .comty-auth-toast { position: fixed; top: 16px; left: 50%; z-index: 2147483647; transform: translateX(-50%); padding: 9px 12px; border: 0; border-radius: 8px; background: var(--comty-surface); color: var(--comty-foreground); box-shadow: 0 8px 24px rgba(0,0,0,.15); font: 600 12px/1 sans-serif; }
       .comty-auth-toast button { margin-left: .5rem; padding: .375rem .5rem; border: 0; border-radius: .375rem; background: var(--comty-accent); color: var(--comty-paper); cursor: pointer; font: inherit; }
       .comty-close {
@@ -893,7 +949,7 @@ function getComtyStyle() {
         border: none;
         border-radius: 6px;
         background: transparent;
-        color: #555;
+        color: var(--comty-muted);
         cursor: pointer;
         appearance: none;
         font: 18px/1 sans-serif;
@@ -901,8 +957,8 @@ function getComtyStyle() {
       .comty-close:hover,
       .comty-close:focus-visible {
-        background: #f3f4f6;
-        color: #111;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
         outline: none;
       }
@@ -919,10 +975,10 @@ function getComtyStyle() {
         max-width: 100%;
         min-height: 18px;
         padding: 2px 7px;
-        border: 1px solid #e5e7eb;
+        border: 0;
         border-radius: 6px;
-        background: #f8fafc;
-        color: #475569;
+        background: var(--comty-field-surface);
+        color: var(--comty-muted);
         font-size: 11px;
         font-weight: 500;
         line-height: 1;
@@ -938,11 +994,11 @@ function getComtyStyle() {
         gap: 8px;
         margin-top: 12px;
         padding-top: 10px;
-        border-top: 1px solid #eef2f7;
+        border-top: 1px solid var(--comty-border);
       }
       .comty-status-label {
-        color: #64748b;
+        color: var(--comty-muted);
         font-size: 11px;
         font-weight: 600;
       }
@@ -967,10 +1023,10 @@ function getComtyStyle() {
         align-items: center;
         gap: 6px;
         min-height: 30px;
-        border: 1px solid #e5e7eb;
+        border: 0;
         border-radius: 7px;
-        background: white;
-        color: #111827;
+        background: var(--comty-surface);
+        color: var(--comty-foreground);
         padding: 4px 8px;
         font: 600 12px/1.2 sans-serif;
         cursor: pointer;
@@ -978,8 +1034,8 @@ function getComtyStyle() {
       .comty-status-button:hover,
       .comty-status-button:focus-visible {
-        border-color: #d1d5db;
-        background: #f9fafb;
+        border-color: var(--comty-muted);
+        background: var(--comty-hover-surface);
         outline: none;
       }
@@ -1002,8 +1058,8 @@ function getComtyStyle() {
       .comty-popover {
         position: fixed;
         z-index: 2147483646;
-        background: white;
-        border: 1px solid rgba(0,0,0,0.05);
+        background: var(--comty-surface);
+        border: 0;
         box-shadow: 0 4px 20px rgba(0,0,0,.1);
         border-radius: 8px;
         padding: 4px;
@@ -1030,7 +1086,7 @@ function getComtyStyle() {
         border-radius: 6px;
         cursor: pointer;
         font-size: 13px;
-        color: #111827;
+        color: var(--comty-foreground);
         text-align: left;
         position: relative;
       }
@@ -1040,25 +1096,25 @@ function getComtyStyle() {
         right: 8px;
         width: 14px;
         height: 14px;
-        color: #111827;
+        color: var(--comty-foreground);
       }
       .comty-popover-item:hover {
-        background: #f3f4f6;
+        background: var(--comty-field-surface);
       }
       .comty-popover-header {
         padding: 6px 8px;
         font-size: 11px;
         font-weight: 600;
-        color: #6b7280;
+        color: var(--comty-muted);
         text-transform: uppercase;
         letter-spacing: 0.05em;
       }
       .comty-popover-divider {
         height: 1px;
-        background: #e5e7eb;
+        background: var(--comty-border);
         margin: 4px 0;
       }
@@ -1080,9 +1136,14 @@ function getComtyStyle() {
       .comty-layout-guide { display: grid; box-sizing: border-box; }
       .comty-layout-guide > span { background: var(--guide-color); min-width: 0; min-height: 0; }
       .comty-layout-grid { background-image: linear-gradient(to right, var(--guide-color) 1px, transparent 1px), linear-gradient(to bottom, var(--guide-color) 1px, transparent 1px); }
-      .comty-tool-panel { position: fixed; right: 1rem; bottom: 5rem; width: 18rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 7rem); overflow: auto; box-sizing: border-box; padding: .75rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-paper); color: var(--comty-ink); box-shadow: var(--comty-floating-shadow); font: .8125rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; z-index: 2147483647; }
+      .comty-tool-panel { position: fixed; right: 1rem; bottom: 5rem; width: 18rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 7rem); overflow: auto; box-sizing: border-box; padding: .75rem; border: 0; border-radius: .75rem; background: var(--comty-surface); color: var(--comty-foreground); box-shadow: var(--comty-floating-shadow); font: .8125rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; z-index: 2147483647; }
       .comty-tool-panel-header, .comty-guide-row { display: flex; align-items: center; gap: .5rem; }
       .comty-tool-panel-header { margin-bottom: .5rem; }
+      .comty-tool-panel .comty-guide-select { justify-content: space-between; gap: .75rem; min-width: 6.5rem; padding: .375rem .5rem; border: 0; border-radius: .375rem; background: var(--comty-field-surface); }
+      .comty-guide-select:focus-visible, .comty-guide-popover .comty-popover-item:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-guide-popover .comty-popover-item { justify-content: flex-start; padding: .375rem 2rem .375rem .5rem; }
+      .comty-guide-popover .comty-popover-item-check svg { width: 100%; height: 100%; }
+      .comty-guide-align { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
       .comty-tool-panel-header strong { flex: 1; white-space: nowrap; }
       .comty-tool-panel button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .375rem; border: 0; border-radius: .375rem; color: inherit; background: transparent; font: inherit; cursor: pointer; }
       .comty-tool-panel button:hover { background: var(--comty-border); }
@@ -1093,9 +1154,9 @@ function getComtyStyle() {
       .comty-guide-item + .comty-guide-item { margin-top: .375rem; }
       .comty-guide-fields { display: grid; gap: .5rem; margin-block: .5rem; padding: .5rem; border-radius: .375rem; background: var(--comty-field-surface); }
       .comty-guide-fields label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
-      .comty-tool-panel input, .comty-tool-panel select { min-width: 0; width: 6rem; box-sizing: border-box; border: .0625rem solid var(--comty-border); border-radius: .25rem; padding: .25rem; background: var(--comty-paper); color: var(--comty-ink); font: inherit; }
+      .comty-tool-panel input, .comty-tool-panel select { min-width: 0; width: 6rem; box-sizing: border-box; border: 0; border-radius: .25rem; padding: .25rem; background: var(--comty-surface); color: var(--comty-foreground); font: inherit; }
       .comty-tool-panel input[type="color"] { height: 1.75rem; padding: .125rem; }
-      .comty-ruler { position: fixed; background: var(--comty-paper); pointer-events: auto; touch-action: none; }
+      .comty-ruler { position: fixed; background: var(--comty-surface); pointer-events: auto; touch-action: none; }
       .comty-ruler-horizontal { left: 0; top: 0; width: 100vw; height: 1.125rem; border-bottom: .0625rem solid var(--comty-border); cursor: ns-resize; }
       .comty-ruler-vertical { left: 0; top: 0; height: 100vh; width: 1.125rem; border-right: .0625rem solid var(--comty-border); cursor: ew-resize; }
       .comty-ruler-guide { position: fixed; padding: 0; margin: 0; border: 0; background: transparent; color: var(--comty-outline); pointer-events: auto; touch-action: none; }
@@ -1109,14 +1170,43 @@ function getComtyStyle() {
       .comty-ruler-guide span { position: absolute; padding: .125rem .375rem; border-radius: .25rem; color: var(--comty-paper); background: var(--comty-ink); font: .625rem/1.5 ui-monospace, monospace; }
       .comty-ruler-guide-horizontal span { left: 1.5rem; top: .5rem; }
       .comty-ruler-guide-vertical span { top: 1.5rem; left: .5rem; }
-      .comty-tool-panel.comty-color-toast { display: flex; align-items: center; gap: .75rem; width: max-content; max-width: calc(100vw - 1rem); padding: .75rem; border: 0; border-radius: .9375rem; overflow: hidden; background: var(--comty-surface); color: var(--comty-foreground); }
-      .comty-color-toast[hidden] { display: none; }
-      .comty-color-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
-      .comty-color-token { color: var(--comty-muted); font: .75rem/1.5 ui-monospace, monospace; }
-      .comty-color-values { display: flex; align-items: center; gap: .375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
-      .comty-color-rgb, .comty-color-separator, .comty-color-status { color: var(--comty-muted); }
-      .comty-color-status { font-size: .75rem; }
-      .comty-color-swatch { flex: 0 0 2.375rem; width: 2.375rem; height: 2.375rem; border: 0; border-radius: .375rem; }
+      .comty-property-panel { position: fixed; z-index: 2147483646; width: max-content; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); box-sizing: border-box; margin: 0; padding: .375rem; border: 0; border-radius: 1rem; background: var(--comty-toolbar-group); color: var(--comty-foreground); box-shadow: var(--comty-floating-shadow); font: var(--comty-property-font-size)/1.4 var(--comty-font); pointer-events: auto; overflow-x: hidden; overflow-y: auto; }
+      html[data-comty-property-picking="color"], html[data-comty-property-picking="color"] body, html[data-comty-property-picking="color"] body :not(#comty-root):not(#comty-root *) { cursor: none !important; }
+      html[data-comty-property-picking="font"] body :not(#comty-root):not(#comty-root *) { cursor: url("data:image/svg+xml,${encodeURIComponent(typographyCursor)}") 2 2, default !important; }
+      .comty-property-panel[data-expanded] { width: var(--comty-property-width); }
+      .comty-property-panel[hidden] { display: none; }
+      .comty-color-magnifier { --comty-lens-rim: var(--comty-paper); --comty-lens-line: var(--comty-magnifier-gray); position: fixed; z-index: 2147483647; width: var(--comty-magnifier-size); height: var(--comty-magnifier-size); padding: var(--comty-magnifier-rim); box-sizing: border-box; border-radius: 50%; background: var(--comty-lens-rim); box-shadow: var(--comty-magnifier-shadow); transform: translate(-50%, -50%); pointer-events: none; }
+      .comty-color-magnifier[data-tone="dark"] { --comty-lens-rim: var(--comty-magnifier-dark); --comty-lens-line: var(--comty-paper); }
+      .comty-color-magnifier-glass { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: var(--comty-magnifier-line) solid var(--comty-lens-line); border-radius: 50%; }
+      .comty-color-magnifier canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
+      .comty-color-magnifier-glass::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--comty-lens-line) var(--comty-magnifier-grid-line), transparent var(--comty-magnifier-grid-line)), linear-gradient(to bottom, var(--comty-lens-line) var(--comty-magnifier-grid-line), transparent var(--comty-magnifier-grid-line)); background-size: calc(100% / 9) calc(100% / 9); opacity: .8; }
+      .comty-color-magnifier-glass > span { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(100% / 9); height: calc(100% / 9); box-sizing: content-box; border: var(--comty-magnifier-line) solid var(--comty-lens-line); border-radius: .125rem; transform: translate(-50%, -50%); }
+      .comty-property-panel button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
+      .comty-property-panel button:focus-visible { outline: .0625rem solid var(--comty-accent); outline-offset: .0625rem; }
+      .comty-property-detail { margin-bottom: .375rem; }
+      .comty-property-rows { padding: .25rem .625rem .375rem; border-radius: .5rem; background: var(--comty-toolbar-surface); }
+      .comty-property-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: .5rem; min-height: var(--comty-property-row-height); }
+      .comty-property-row > span { color: var(--comty-muted); }
+      .comty-property-row button { justify-content: space-between; gap: .5rem; text-align: left; }
+      .comty-property-row button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+      .comty-property-row button[aria-label^="Copy Colour"] > span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .375rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; background: var(--comty-picked-color); vertical-align: -.0625rem; }
+      .comty-property-copy-icon { position: relative; flex: 0 0 .75rem; width: .75rem; height: .75rem; color: var(--comty-muted); opacity: .65; }
+      .comty-property-row button:hover .comty-property-copy-icon, .comty-property-row button[data-copied] .comty-property-copy-icon { opacity: 1; }
+      .comty-property-copy-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 150ms var(--comty-ease-out), transform 150ms var(--comty-ease-out); }
+      .comty-property-copy-icon svg:last-child { opacity: 0; transform: scale(.5); }
+      .comty-property-row button[data-copied] svg:first-child { opacity: 0; transform: scale(.5); }
+      .comty-property-row button[data-copied] svg:last-child { opacity: 1; transform: scale(1); }
+      @media (prefers-reduced-motion: reduce) { .comty-property-copy-icon svg { transition: none; } }
+      .comty-property-row button[disabled] { cursor: default; opacity: .5; }
+      .comty-property-strip { display: flex; align-items: center; justify-content: center; gap: .375rem; }
+      .comty-property-recent, .comty-property-empty { flex: 0 0 var(--comty-property-swatch); width: var(--comty-property-swatch); height: var(--comty-property-swatch); box-sizing: border-box; border-radius: .5rem; }
+      .comty-property-panel .comty-property-recent { border: .0625rem solid var(--comty-border); font: 600 .875rem/1 var(--comty-font); }
+      .comty-property-panel[data-kind="font"] .comty-property-recent { background: var(--comty-toolbar-surface); }
+      .comty-property-panel .comty-property-recent[aria-pressed="true"] { outline: .0625rem solid var(--comty-muted); outline-offset: .0625rem; }
+      .comty-property-panel .comty-property-recent[aria-pressed="true"]:focus-visible { outline-color: var(--comty-accent); }
+      .comty-property-empty { border: .0625rem dashed var(--comty-border); }
+      .comty-font-target { position: fixed; box-sizing: border-box; border: .0625rem solid var(--comty-accent); pointer-events: none; }
+      .comty-property-feedback { display: block; height: 0; overflow: hidden; }
       .comty-motion-panel { width: 17.5rem; max-width: calc(100vw - 1rem); padding: var(--comty-toolbar-padding); border: 0; border-radius: .9375rem; background: var(--comty-surface); color: var(--comty-foreground); }
       .comty-motion-panel [hidden] { display: none !important; }
       .comty-motion-row { display: flex; align-items: center; gap: .375rem; }
@@ -1154,11 +1244,11 @@ function getComtyStyle() {
       .comty-inspect-margin { --comty-spacing-color: var(--comty-margin-fill); }
       .comty-inspect-padding { --comty-spacing-color: var(--comty-padding-fill); }
       .comty-inspect-gap { --comty-spacing-color: var(--comty-gap-fill); }
-      .comty-inspect-spacing span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-inline: .2rem; border-radius: .2rem; background: var(--comty-spacing-color); color: var(--comty-ink); font: 600 .625rem/1.3 ui-monospace, monospace; white-space: nowrap; }
+      .comty-inspect-spacing span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-inline: .2rem; border-radius: .2rem; background: var(--comty-spacing-color); color: var(--comty-foreground); font: 600 .625rem/1.3 ui-monospace, monospace; white-space: nowrap; }
       .comty-inspector {
         position: fixed; width: 15rem; max-width: calc(100vw - 1rem);
         padding-block: .5rem; border-radius: .5rem;
-        color: var(--comty-ink); background: var(--comty-paper);
+        color: var(--comty-foreground); background: var(--comty-surface);
         box-shadow: var(--comty-floating-shadow); font: .625rem/1.5 ui-sans-serif, system-ui, sans-serif;
         pointer-events: none; box-sizing: border-box;
       }
@@ -1173,6 +1263,8 @@ function getComtyStyle() {
       .comty-inspector button:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
       .comty-inspector-value { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
       .comty-inspector-value > button, .comty-inspector-tokens button { max-width: 100%; }
+      .comty-inspector-picker { display: inline-flex; align-items: center; gap: .25rem; }
+      .comty-inspector-swatch { display: inline-block; flex: 0 0 .625rem; width: .625rem; height: .625rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; }
       .comty-inspector-tokens { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
       .comty-inspector-tokens button { font-family: ui-monospace, monospace; color: var(--comty-muted); }
       .comty-inspector-details { max-height: 50vh; overflow-y: auto; }
@@ -1183,8 +1275,8 @@ function getComtyStyle() {
       .comty-create-bubble {
         position: fixed;
         z-index: 2147483647;
-        background: white;
-        border: 1px solid rgba(0,0,0,0.05);
+        background: var(--comty-surface);
+        border: 0;
         box-shadow: 0 4px 20px rgba(0,0,0,.1);
         border-radius: 999px;
         width: 320px;
@@ -1218,13 +1310,13 @@ function getComtyStyle() {
         outline: none;
         background: transparent;
         overflow-y: auto;
-        color: #111827;
+        color: var(--comty-foreground);
         scrollbar-width: thin;
         scrollbar-color: gray transparent;
       }
       .comty-create-textarea::placeholder {
-        color: #9ca3af;
+        color: var(--comty-muted);
       }
       .comty-create-actions {
@@ -1241,7 +1333,7 @@ function getComtyStyle() {
         height: 32px;
         padding: 0;
         border-radius: 50%;
-        background: #e5e7eb;
+        background: var(--comty-border);
         color: white;
         border: none;
         cursor: pointer;
@@ -2097,7 +2189,7 @@ function createScreenshotCapture() {
       const clonedBody = clone.querySelector("body");
       if (clonedBody instanceof HTMLElement) {
-        clonedBody.style.width = `${captureWidth}px`;
+        clonedBody.style.width = getComputedStyle(document.body).width;
         clonedBody.style.minHeight = `${documentHeight}px`;
         clonedBody.style.margin = clonedBody.style.margin || "0";
       }
@@ -2128,6 +2220,109 @@ function createScreenshotCapture() {
     return { waitForPaint, waitForCustomElements, captureViewportScreenshot };
 }
+// Page-local counterpart of the native eyedropper; never captures outside the page.
+function createColorMagnifier({ root, isComtyElement, capture }) {
+  const lens = document.createElement('div');
+  lens.className = 'comty-color-magnifier';
+  lens.setAttribute('aria-hidden', 'true');
+  lens.hidden = true;
+  lens.innerHTML = '<div class="comty-color-magnifier-glass"><canvas width="9" height="9"></canvas><span></span></div>';
+  root.appendChild(lens);
+  const canvas = lens.querySelector('canvas');
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  let enabled = false, image = null, point = null, revision = 0, timer = 0;
+  let sampledHex = null;
+  function paint() {
+    if (!enabled || !point || !context) return;
+    const { x, y, element } = point;
+    if (!element.isConnected) { lens.hidden = true; return; }
+    // An unavailable/unsafe page capture falls back to the element's CSS colour.
+    let background = element;
+    while (background.parentElement && getComputedStyle(background).backgroundColor === 'rgba(0, 0, 0, 0)') background = background.parentElement;
+    const color = getComputedStyle(background).backgroundColor;
+    context.clearRect(0, 0, 9, 9);
+    context.fillStyle = getComputedStyle(root).getPropertyValue('--comty-paper');
+    context.fillRect(0, 0, 9, 9);
+    context.fillStyle = color;
+    context.fillRect(0, 0, 9, 9);
+    if (image) context.drawImage(image, Math.floor(x) - 4, Math.floor(y) - 4, 9, 9, 0, 0, 9, 9);
+    lens.dataset.preview = image ? 'pixels' : 'color';
+    sampledHex = null;
+    try {
+      const [r, g, b] = context.getImageData(4, 4, 1, 1).data;
+      if (image) sampledHex = '#' + [r, g, b].map(channel => channel.toString(16).padStart(2, '0')).join('');
+      lens.dataset.tone = .2126 * r + .7152 * g + .0722 * b < 128 ? 'dark' : 'light';
+    } catch { lens.dataset.tone = 'light'; }
+    lens.style.left = `${x}px`;
+    lens.style.top = `${y}px`;
+    lens.hidden = false;
+  }
+  async function refresh() {
+    const version = ++revision;
+    image = null;
+    sampledHex = null;
+    if (!enabled) return;
+    try {
+      const { blob } = await capture();
+      if (!enabled || version !== revision) return;
+      const dataUrl = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+      const next = new Image();
+      next.src = dataUrl;
+      await next.decode();
+      if (!enabled || version !== revision) return;
+      // Verify the bitmap can be sampled before using it for both preview and pick.
+      const probe = document.createElement('canvas').getContext('2d');
+      probe.drawImage(next, 0, 0);
+      probe.getImageData(0, 0, 1, 1);
+      image = next;
+      paint();
+    } catch { /* The CSS-colour fallback remains available without screen permission. */ }
+  }
+  function setEnabled(value) {
+    if (enabled === value) return;
+    enabled = value;
+    lens.hidden = true;
+    point = null;
+    clearTimeout(timer);
+    if (enabled) refresh();
+    else { revision++; image = null; sampledHex = null; }
+  }
+  document.addEventListener('pointermove', event => {
+    if (!enabled) return;
+    if (!(event.target instanceof Element) || isComtyElement(event.target)) {
+      point = null;
+      sampledHex = null;
+      lens.hidden = true;
+      return;
+    }
+    point = { x: event.clientX, y: event.clientY, element: event.target };
+    paint();
+  }, true);
+  document.documentElement.addEventListener('pointerleave', () => { point = null; lens.hidden = true; });
+  function invalidate(event) {
+    if (!enabled || event.target instanceof Element && isComtyElement(event.target)) return;
+    revision++;
+    image = null;
+    sampledHex = null;
+    point = null;
+    lens.hidden = true;
+    clearTimeout(timer);
+    timer = setTimeout(refresh, 120);
+  }
+  document.addEventListener('scroll', invalidate, true);
+  window.addEventListener('resize', invalidate);
+  return { setEnabled, sample: () => sampledHex };
+}
 // Comment thread UI and actions. The browser shell supplies the shared comment state.
 function createCommentThread(context) {
   const {
@@ -2631,6 +2826,216 @@ function createCommentThread(context) {
     }
 }
+const edgeAxis = { top: "y", bottom: "y", left: "x", right: "x" };
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+/** Pick a nearby border segment, including when the pointer is just outside it. */
+function nearestMeasurementEdge(candidates, point, { axis, exclude, tolerance = 10 } = {}) {
+  let nearest = null;
+  let distance = tolerance;
+  for (const { element, rect } of candidates) {
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    for (const edge of ["top", "bottom", "left", "right"]) {
+      if (axis && edgeAxis[edge] !== axis) continue;
+      if (exclude?.element === element && exclude.edge === edge) continue;
+      const vertical = edgeAxis[edge] === "y";
+      const x = vertical ? clamp(point.x, rect.left, rect.right) : rect[edge];
+      const y = vertical ? rect[edge] : clamp(point.y, rect.top, rect.bottom);
+      const nextDistance = Math.hypot(point.x - x, point.y - y);
+      if (nextDistance > distance || (nearest && nextDistance === distance)) continue;
+      distance = nextDistance;
+      nearest = { element, edge, axis: edgeAxis[edge], offset: vertical ? (x - rect.left) / rect.width : (y - rect.top) / rect.height };
+    }
+  }
+  return nearest;
+}
+function measurementPoint(anchor, rect, scroll = { x: 0, y: 0 }) {
+  if (!anchor.element) return { x: anchor.x - scroll.x, y: anchor.y - scroll.y };
+  return anchor.axis === "y"
+    ? { x: rect.left + rect.width * anchor.offset, y: rect[anchor.edge] }
+    : { x: rect[anchor.edge], y: rect.top + rect.height * anchor.offset };
+}
+/** Border measurements live for one activation of the existing ruler tool. */
+function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit }) {
+  let enabled = false;
+  let hover = null;
+  let drag = null;
+  let pointer = null;
+  let signature = "";
+  const measurements = [];
+  const svgNS = "http://www.w3.org/2000/svg";
+  const layer = document.createElementNS(svgNS, "svg");
+  layer.classList.add("comty-distance-layer");
+  layer.setAttribute("aria-hidden", "true");
+  root.prepend(layer);
+  const announcement = document.createElement("span");
+  announcement.className = "comty-distance-announcement";
+  announcement.setAttribute("role", "status");
+  root.appendChild(announcement);
+  function rectOf(element) {
+    if (element === document.documentElement) {
+      const width = Math.max(element.clientWidth, element.scrollWidth);
+      const height = Math.max(element.clientHeight, element.scrollHeight);
+      return { left: -scrollX, top: -scrollY, right: width - scrollX, bottom: height - scrollY, width, height };
+    }
+    return element.getBoundingClientRect();
+  }
+  function pointOf(anchor) {
+    return measurementPoint(anchor, anchor.element && rectOf(anchor.element), { x: scrollX, y: scrollY });
+  }
+  function candidatesAt(point) {
+    const elements = new Set();
+    // Sample around the cursor as well as underneath it to catch an outside edge.
+    for (const [dx, dy] of [[0, 0], [-10, 0], [10, 0], [0, -10], [0, 10]]) {
+      for (const hit of document.elementsFromPoint(clamp(point.x + dx, 0, innerWidth - 1), clamp(point.y + dy, 0, innerHeight - 1))) {
+        if (isComtyElement(hit)) continue;
+        for (let element = hit; element; element = element.parentElement) elements.add(element);
+      }
+    }
+    return [...elements].filter(element => !isElementTreeHidden(element)).map(element => ({ element, rect: rectOf(element) }));
+  }
+  function findEdge(point, start) {
+    return nearestMeasurementEdge(candidatesAt(point), point, { axis: start?.axis, exclude: start });
+  }
+  function setCursor(axis) {
+    document.documentElement.classList.toggle("comty-measure-vertical", axis === "y");
+    document.documentElement.classList.toggle("comty-measure-horizontal", axis === "x");
+  }
+  function updatePointer(event) {
+    pointer = { x: event.clientX, y: event.clientY };
+    hover = findEdge(pointer, drag?.start);
+    if (drag) {
+      drag.end = hover || { x: pointer.x + scrollX, y: pointer.y + scrollY };
+      // Keep the two anchors perpendicular when both borders share that coordinate.
+      if (hover) {
+        const start = pointOf(drag.start), rect = rectOf(hover.element);
+        drag.end = { ...hover, offset: drag.start.axis === "y"
+          ? clamp((start.x - rect.left) / rect.width, 0, 1)
+          : clamp((start.y - rect.top) / rect.height, 0, 1) };
+      }
+    }
+    setCursor(drag?.start.axis || hover?.axis);
+    render();
+  }
+  function node(tag, attributes, parent = layer) {
+    const element = document.createElementNS(svgNS, tag);
+    for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+    parent.appendChild(element);
+    return element;
+  }
+  function valid(anchor) {
+    return !anchor.element || (anchor.element.isConnected && !isElementTreeHidden(anchor.element));
+  }
+  function render() {
+    if (!enabled) return;
+    const visible = [...measurements, ...(drag ? [drag] : [])].filter(item => valid(item.start) && valid(item.end));
+    const geometry = visible.map(item => ({ start: pointOf(item.start), end: pointOf(item.end), axis: item.start.axis }));
+    const hoverPoint = hover && valid(hover) ? pointOf(hover) : null;
+    const next = JSON.stringify([geometry, hoverPoint]);
+    if (signature === next) return;
+    signature = next;
+    layer.replaceChildren();
+    for (const { start, end, axis } of geometry) {
+      const vertical = axis === "y";
+      const distance = Math.round(Math.abs(end[axis] - start[axis]));
+      if (distance < 1) continue;
+      const x2 = vertical ? start.x : end.x, y2 = vertical ? end.y : start.y;
+      const group = node("g", { "data-comty-distance": distance });
+      node("path", { d: `M${start.x} ${start.y}L${x2} ${y2}`, class: "comty-distance-line" }, group);
+      if (Math.hypot(end.x - x2, end.y - y2) > 1) node("path", { d: `M${x2} ${y2}L${end.x} ${end.y}`, class: "comty-distance-extension" }, group);
+      const direction = Math.sign(end[axis] - start[axis]);
+      for (const [x, y, inward] of [[start.x, start.y, direction], [x2, y2, -direction]]) {
+        const points = vertical ? `${x},${y} ${x - 3},${y + inward * 6} ${x + 3},${y + inward * 6}` : `${x},${y} ${x + inward * 6},${y - 3} ${x + inward * 6},${y + 3}`;
+        node("polygon", { points, class: "comty-distance-arrow" }, group);
+      }
+      const text = String(distance), width = text.length * 7.5 + 12;
+      const labelX = vertical ? start.x - width - 8 : (start.x + x2 - width) / 2;
+      const labelY = vertical ? (start.y + y2) / 2 - 10 : start.y - 28;
+      const label = node("g", { transform: `translate(${clamp(labelX, 2, innerWidth - width - 2)} ${clamp(labelY, 2, innerHeight - 22)})` }, group);
+      node("rect", { width, height: 20, rx: 3, class: "comty-distance-label" }, label);
+      node("text", { x: width / 2, y: 14, "text-anchor": "middle", class: "comty-distance-value" }, label).textContent = text;
+    }
+    if (hoverPoint) node("circle", { cx: hoverPoint.x, cy: hoverPoint.y, r: 4, class: "comty-distance-snap" });
+  }
+  function cancel() {
+    const pointerId = drag?.pointerId;
+    drag = null;
+    if (pointerId !== undefined && document.documentElement.hasPointerCapture(pointerId)) document.documentElement.releasePointerCapture(pointerId);
+    hover = null;
+    pointer = null;
+    setCursor(null);
+    render();
+  }
+  function setEnabled(value) {
+    if (enabled === value) return;
+    enabled = value;
+    layer.style.display = value ? "" : "none";
+    if (!value) {
+      measurements.length = 0;
+      cancel();
+      layer.replaceChildren();
+      announcement.textContent = "";
+      signature = "";
+    }
+  }
+  function isHostEvent(event) {
+    if (!enabled || !(event.target instanceof Element)) return false;
+    if (!isComtyElement(event.target)) return true;
+    // The outer ruler strip must still let us anchor to the page's top/left edge.
+    return event.target.matches(".comty-ruler") && (event.clientX + scrollX <= 10 || event.clientY + scrollY <= 10);
+  }
+  document.addEventListener("pointermove", event => {
+    if (!enabled) return;
+    if (drag && event.pointerId !== drag.pointerId) return;
+    if (!isHostEvent(event) && !drag) { hover = null; setCursor(null); render(); return; }
+    event.stopImmediatePropagation();
+    updatePointer(event);
+  }, true);
+  document.addEventListener("pointerdown", event => {
+    if (!isHostEvent(event) || event.button !== 0) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    updatePointer(event);
+    if (hover) {
+      drag = { start: hover, end: hover, pointerId: event.pointerId };
+      if (event.isTrusted) document.documentElement.setPointerCapture(event.pointerId);
+    }
+  }, true);
+  document.addEventListener("pointerup", event => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    updatePointer(event);
+    const distance = Math.round(Math.abs(pointOf(drag.end)[drag.start.axis] - pointOf(drag.start)[drag.start.axis]));
+    if (distance > 0) {
+      measurements.push(drag);
+      announcement.textContent = `${distance} pixels ${drag.start.axis === "y" ? "vertically" : "horizontally"}`;
+    }
+    drag = null;
+    if (document.documentElement.hasPointerCapture(event.pointerId)) document.documentElement.releasePointerCapture(event.pointerId);
+    render();
+  }, true);
+  document.addEventListener("click", event => {
+    if (isHostEvent(event)) { event.preventDefault(); event.stopImmediatePropagation(); }
+  }, true);
+  document.addEventListener("keydown", event => {
+    if (!enabled || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
+    event.preventDefault(); event.stopImmediatePropagation();
+    if (drag) cancel(); else onExit();
+  }, true);
+  document.addEventListener("pointercancel", cancel, true);
+  document.documentElement.addEventListener("lostpointercapture", event => { if (drag?.pointerId === event.pointerId) cancel(); });
+  document.documentElement.addEventListener("pointerleave", () => { if (!drag) cancel(); });
+  window.addEventListener("blur", cancel);
+  document.addEventListener("scroll", () => {
+    if (!enabled) return;
+    if (pointer) updatePointer({ clientX: pointer.x, clientY: pointer.y });
+    else render();
+  }, { capture: true, passive: true });
+  return { setEnabled, render };
+}
 // Shared browser runtime. Both npm and the standalone CDN script use this file.
 const instanceKey = Symbol.for("comty.sdk.instance");
@@ -2768,6 +3173,13 @@ 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";
@@ -2781,6 +3193,12 @@ 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";
@@ -2828,6 +3246,10 @@ 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;
@@ -2841,11 +3263,24 @@ 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);
@@ -2857,6 +3292,11 @@ 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; }`;
@@ -2865,10 +3305,17 @@ 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();
@@ -2876,10 +3323,16 @@ 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');
@@ -2928,6 +3381,9 @@ 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();
@@ -3031,32 +3487,101 @@ 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");
@@ -3069,8 +3594,14 @@ 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;
@@ -3086,7 +3617,7 @@ 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));
         };
@@ -3106,12 +3637,14 @@ 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);
@@ -3237,45 +3770,221 @@ 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(', ')})`;
@@ -3293,53 +4002,42 @@ 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");
@@ -3400,11 +4098,56 @@ 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,
@@ -3432,20 +4175,26 @@ 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 => {
@@ -3505,8 +4254,11 @@ 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;
@@ -3516,8 +4268,8 @@ 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));
         }
       });
     }
@@ -3714,8 +4466,10 @@ 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;
@@ -3775,31 +4529,52 @@ 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) {
@@ -3909,7 +4684,7 @@ 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);
         }
@@ -4114,7 +4889,29 @@ 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;
       }
@@ -4189,13 +4986,26 @@ 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);
@@ -5343,7 +6153,8 @@ 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'));
@@ -6197,7 +7008,9 @@ 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);
         }
@@ -6219,6 +7032,7 @@ 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() {
@@ -6310,6 +7124,14 @@ 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) {
@@ -6341,7 +7163,7 @@ 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;
       }
@@ -6371,6 +7193,19 @@ 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;
@@ -6442,15 +7277,16 @@ 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; }
       }