@comty.io/core 0.1.5 → 0.1.7

package/src/style.js

@@ -1,7 +1,7 @@
 export 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 commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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 {
@@ -11,7 +11,7 @@ export function getComtyStyle() {
         --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-error: #ef7676;
-        --comty-outline: var(--comty-toolbar-muted);
+        --comty-outline: var(--comty-accent);
         --comty-comment-focus: var(--comty-toolbar-muted);
         --comty-paper: #fff;
         --comty-ink: #171717;
@@ -48,6 +48,10 @@ export function getComtyStyle() {
         --comty-toolbar-selected: #505457;
         --comty-toolbar-muted: ${toolbarMuted};
         --comty-measure: #ff3b30;
+        --comty-markup-yellow: #facc15;
+        --comty-markup-green: #22c55e;
+        --comty-color-black: #000;
+        --comty-color-spectrum: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
         --comty-font: "Inter", ui-sans-serif, system-ui, sans-serif;
         --comty-dialog-surface: var(--comty-surface);
         --comty-dialog-ink: var(--comty-foreground);
@@ -58,6 +62,8 @@ export function getComtyStyle() {
         --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;
@@ -69,13 +75,80 @@ export function getComtyStyle() {
         font-family: var(--comty-font);
         color-scheme: dark;
       }
-
+      #comty-root :is(button, .comty-comment-avatar) { user-select: none; -webkit-user-select: none; }
+      #comty-root .comty-comment-avatar img { -webkit-user-drag: none; }
+      #comty-root .comty-pin .comty-comment-avatar { pointer-events: none; }
+      #comty-root > .comty-agent-panel { position: fixed; right: 1rem; bottom: 5rem; z-index: 2147483647; width: min(22rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 6rem)); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; border: .0625rem solid var(--comty-border); border-radius: 1rem; 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; transform: translateY(0); opacity: 1; transition: transform var(--comty-motion-duration) var(--comty-ease-out), opacity var(--comty-motion-duration) ease; color-scheme: dark; }
+      #comty-root > .comty-agent-panel[data-side="left"] { left: 1rem; right: auto; }
+      #comty-root > .comty-agent-panel[data-closed] { transform: translateY(.5rem); opacity: 0; pointer-events: none; }
+      #comty-root > .comty-agent-panel[hidden] { display: none; }
+      .comty-agent-panel *, .comty-agent-panel *::before { box-sizing: border-box; }
+      .comty-agent-panel-header { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-brand { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; flex-shrink: 0; border-radius: .6875rem; color: var(--comty-accent); background: var(--comty-hover-surface); }
+      .comty-agent-brand.comty-agent-avatar { width: 2.375rem; height: 2.375rem; border-radius: 0; background: transparent; }
+      .comty-agent-panel svg { display: block; width: 1rem; height: 1rem; flex-shrink: 0; }
+      .comty-agent-brand svg { width: 1.25rem; height: 1.25rem; }
+      .comty-agent-brand.comty-agent-avatar svg { width: 100%; height: 100%; }
+      .comty-agent-answer { display: flex; align-items: flex-start; gap: .5rem; padding: .375rem .5rem .875rem; }
+      .comty-agent-answer .comty-agent-brand { width: 1.5rem; height: 1.5rem; }
+      .comty-agent-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--comty-foreground); }
+      .comty-agent-heading { flex: 1; min-width: 0; }
+      .comty-agent-heading strong { display: block; font-weight: 600; font-size: .875rem; }
+      .comty-agent-panel-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--comty-hover-surface) transparent; padding: .375rem .5rem 2rem; }
+      .comty-agent-item { padding: .375rem .25rem; overflow-wrap: anywhere; }
+      .comty-agent-item + .comty-agent-item { border-top: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-item h3 { margin: 0 0 .25rem; color: var(--comty-foreground); font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; }
+      .comty-agent-list { display: grid; gap: .125rem; }
+      .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-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; }
+      .comty-agent-row-state { flex: 0 0 auto; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-row-actions { display: flex; flex-shrink: 0; gap: .25rem; }
+      .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-root > .comty-agent-task-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 2147483647; width: min(20rem, calc(100vw - 2rem)); box-sizing: border-box; padding: .75rem 2rem .75rem .875rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .75rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms var(--comty-ease-out); animation: comty-agent-toast-in 200ms var(--comty-ease-out); color-scheme: dark; }
+      #comty-root > .comty-agent-task-toast[data-toolbar] { right: auto; bottom: auto; }
+      #comty-root > .comty-agent-task-toast[data-leaving] { opacity: 0; transform: translateY(.25rem); pointer-events: none; }
+      .comty-agent-task-toast strong { display: block; font-size: .8125rem; font-weight: 600; }
+      .comty-agent-task-toast p { margin: .25rem 0 0; color: var(--comty-muted); overflow-wrap: anywhere; }
+      .comty-agent-task-toast button { position: absolute; top: .5rem; right: .375rem; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--comty-muted); cursor: pointer; }
+      .comty-agent-task-toast button:hover { background: var(--comty-hover-surface); color: var(--comty-foreground); }
+      .comty-agent-task-toast button:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-agent-task-toast svg { width: .875rem; height: .875rem; }
+      @keyframes comty-agent-toast-in { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }
+      .comty-agent-panel p { margin: .5rem 0 0; font: inherit; color: var(--comty-muted); }
+      .comty-agent-error { margin-top: .75rem; }
+      .comty-agent-error strong { display: block; font-weight: 500; color: var(--comty-foreground); }
+      .comty-agent-error p { margin-top: .25rem; }
+      .comty-agent-banner { margin-bottom: 1rem; }
+      .comty-agent-banner .comty-agent-error { margin-top: 0; }
+      .comty-agent-task-actions { display: flex; justify-content: flex-end; gap: .375rem; padding: .375rem .625rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-agent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; margin: 0; padding: .375rem .625rem; border: 0; border-radius: .5rem; font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; color: var(--comty-foreground); background: var(--comty-hover-surface); transition: background-color 150ms ease; }
+      .comty-agent-task-thread .comty-agent-action { min-height: 1.5rem; padding: .125rem .5rem; border-radius: .375rem; font-size: .75rem; }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action:hover { background: color-mix(in srgb, var(--comty-foreground) 12%, var(--comty-hover-surface)); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action[data-primary] { color: var(--comty-paper); background: var(--comty-accent); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action:disabled { opacity: .5; cursor: wait; }
+      .comty-agent-panel .comty-agent-close { width: 1.5rem; min-height: 1.5rem; padding: 0; background: transparent; color: var(--comty-muted); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) :is(button, summary):focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .1875rem; }
+      .comty-agent-details { margin-top: .625rem; }
+      .comty-agent-panel summary { cursor: pointer; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-panel pre { margin: .5rem 0 0; padding: .625rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; border-radius: .5rem; background: var(--comty-surface); color: var(--comty-muted); font: .875rem/1.4 ui-monospace, monospace; }
+      .comty-agent-working { position: fixed; z-index: 1; box-sizing: border-box; border: 2px solid var(--comty-accent); border-radius: 0; pointer-events: none; }
+      .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,
       html.comty-comment-placement body,
       html.comty-comment-placement body *:not(#comty-root):not(#comty-root *) {
-        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 20 20, crosshair !important;
+        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 16 16, crosshair !important;
       }
       #comty-root > .comty-sidepanel-open, #comty-root > .comty-pin, #comty-root > .comty-bubble, #comty-root > .comty-create-bubble, #comty-root > .comty-popover, #comty-root > .comty-auth-backdrop, #comty-root > .comty-auth-toast { pointer-events: auto; }
       .comty-toolbar {
@@ -142,7 +215,7 @@ export function getComtyStyle() {
       #comty-root [hidden] { display: none !important; }
       [data-comty-anchor-hidden] { visibility: hidden !important; pointer-events: none !important; }
       @media (prefers-reduced-motion: reduce) {
-        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble { 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, #comty-root > .comty-agent-task-toast { transition: none !important; animation: none !important; }
       }
 
       .comty-sidepanel {
@@ -324,6 +397,16 @@ export function getComtyStyle() {
         white-space: nowrap;
       }
 
+      .comty-anchor-badge {
+        display: inline-block;
+        margin-top: .375rem;
+        padding: .125rem .375rem;
+        border: 1px solid var(--comty-border);
+        border-radius: 999rem;
+        color: var(--comty-muted);
+        font: .6875rem/1.4 sans-serif;
+      }
+
       .comty-pin {
         position: fixed;
         z-index: 2147483645;
@@ -605,6 +688,8 @@ export function getComtyStyle() {
         height: 100%;
         object-fit: cover;
       }
+      .comty-comment-avatar.comty-agent-avatar { overflow: visible; border-radius: 0; background: transparent; color: var(--comty-paper); }
+      .comty-comment-avatar.comty-agent-avatar svg { display: block; width: 100%; height: 100%; }
 
       .comty-pin-avatar {
         width: 24px;
@@ -719,12 +804,12 @@ export function getComtyStyle() {
       }
 
       .comty-popover-item.comty-popover-item-destructive {
-        color: var(--comty-error);
+        color: var(--comty-agent-error);
       }
 
       .comty-popover-item.comty-popover-item-destructive:hover,
       .comty-popover-item.comty-popover-item-destructive:focus-visible {
-        background: color-mix(in srgb, var(--comty-error) 12%, var(--comty-surface));
+        background: color-mix(in srgb, var(--comty-agent-error) 12%, var(--comty-surface));
         outline: none;
       }
 
@@ -853,6 +938,8 @@ export function getComtyStyle() {
       }
 
       .comty-hover-bubble .comty-thread {
+        display: grid;
+        gap: 1rem;
         padding: 12px;
       }
 
@@ -1095,19 +1182,23 @@ export function getComtyStyle() {
         margin: 4px 0;
       }
 
-      html.comty-comments-active .comty-pin {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin {
         display: grid;
       }
 
-      html.comty-comments-active .comty-pin.comty-filtered-out {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin.comty-filtered-out {
         display: none;
       }
 
-      html.comty-comments-active .comty-bubble {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-bubble {
         display: block;
       }
 
       .comty-inspection-layer { position: relative; z-index: 2147483647; pointer-events: none; }
+      .comty-markup-layer, .comty-markup-surface { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
+      .comty-markup-surface { pointer-events: auto; cursor: crosshair; touch-action: none; user-select: none; }
+      .comty-markup-surface[aria-busy="true"] { cursor: progress; }
+      .comty-capture-selection { position: absolute; box-sizing: border-box; border: .0625rem solid var(--comty-accent); box-shadow: 0 0 0 100vmax var(--comty-dialog-backdrop); color: var(--comty-paper); text-shadow: 0 .0625rem .125rem var(--comty-ink); font: .6875rem/1.5 var(--comty-font); padding: .25rem; white-space: nowrap; }
       .comty-overlay-tools, .comty-layout-guides, .comty-layout-guide { position: fixed; inset: 0; pointer-events: none; }
       .comty-overlay-tools { overflow: hidden; }
       .comty-layout-guide { display: grid; box-sizing: border-box; }
@@ -1133,6 +1224,38 @@ export function getComtyStyle() {
       .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: 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-tool-panel.comty-markup-panel { width: max-content; padding: .375rem; border-radius: .875rem; background: var(--comty-toolbar-group); }
+      .comty-markup-controls, .comty-markup-options, .comty-markup-strokes, .comty-markup-colors { display: flex; align-items: center; gap: .125rem; }
+      .comty-markup-controls { justify-content: space-between; }
+      .comty-markup-options { margin-top: .375rem; padding-top: .375rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-markup-divider { flex: 0 0 .0625rem; height: 1rem; margin-inline: .25rem; background: var(--comty-border); }
+      .comty-markup-panel button { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; color: var(--comty-toolbar-muted); border-radius: .5rem; }
+      .comty-markup-panel button svg { display: block; flex: 0 0 auto; width: 1rem; height: 1rem; }
+      .comty-markup-panel button[aria-pressed="false"] { opacity: 1; }
+      .comty-markup-panel button[aria-pressed="true"] { color: var(--comty-foreground); background: var(--comty-hover-surface); }
+      .comty-markup-panel button:disabled { opacity: .35; cursor: default; }
+      .comty-markup-panel button:disabled:hover { background: transparent; }
+      .comty-markup-panel button:not(:disabled):active { transform: scale(.97); }
+      .comty-markup-strokes button { width: 1.5rem; height: 1.5rem; }
+      .comty-markup-colors button { width: 1.375rem; height: 1.5rem; background: transparent; }
+      .comty-markup-colors button[aria-pressed="true"] { background: transparent; }
+      .comty-markup-swatch { display: block; width: .875rem; height: .875rem; border-radius: 50%; background: var(--markup-swatch); box-shadow: inset 0 0 0 .0625rem color-mix(in srgb, var(--comty-paper) 15%, transparent); }
+      .comty-markup-colors button[aria-pressed="true"] .comty-markup-swatch { outline: .0625rem solid var(--comty-foreground); outline-offset: .125rem; }
+      .comty-markup-panel button.comty-markup-picker { width: 1rem; padding: 0; position: relative; flex: 0 0 1rem; height: 1rem; margin-inline: .25rem; border-radius: 50%; background: conic-gradient(var(--comty-measure), var(--comty-markup-yellow), var(--comty-markup-green), var(--comty-accent), var(--comty-error), var(--comty-measure)); }
+      .comty-markup-picker[data-selected] { outline: .0625rem solid var(--comty-foreground); outline-offset: .125rem; }
+      .comty-markup-picker:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-markup-color { display: grid; gap: .625rem; margin-top: .375rem; padding: .625rem .25rem .25rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-markup-color-field { position: relative; height: 8rem; border-radius: .5rem; background: linear-gradient(to top, var(--comty-color-black), transparent), linear-gradient(to right, var(--comty-paper), transparent), var(--markup-hue); touch-action: none; cursor: crosshair; }
+      .comty-markup-color-field:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-markup-color-field > span { position: absolute; width: .625rem; height: .625rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-color); box-shadow: 0 0 0 .0625rem var(--comty-ink); transform: translate(-50%, -50%); pointer-events: none; }
+      .comty-markup-color input.comty-markup-hue { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 1rem; margin: 0; padding: 0; border-radius: 1rem; background: var(--comty-color-spectrum); cursor: pointer; }
+      .comty-markup-hue::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: .875rem; height: .875rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-hue); box-shadow: 0 0 0 .0625rem var(--comty-ink); }
+      .comty-markup-hue::-moz-range-thumb { width: .875rem; height: .875rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-hue); box-shadow: 0 0 0 .0625rem var(--comty-ink); }
+      .comty-markup-hex { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: .5rem; background: var(--comty-surface); color: var(--comty-muted); font: .6875rem/1.5 var(--comty-font); }
+      .comty-markup-color-preview { flex: 0 0 1rem; height: 1rem; border-radius: .25rem; background: var(--markup-color); box-shadow: inset 0 0 0 .0625rem var(--comty-border); }
+      .comty-markup-hex input { flex: 1; width: 0; text-align: right; font-family: ui-monospace, monospace; }
+      .comty-markup-hex input[aria-invalid="true"] { outline: .0625rem solid var(--comty-error); }
+
       .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; }
@@ -1207,16 +1330,16 @@ export function getComtyStyle() {
       .comty-motion-panel button[aria-pressed="true"] { opacity: 1; color: var(--comty-paper); background: var(--comty-hover-surface); }
       .comty-motion-panel button[aria-pressed="false"] { opacity: 1; }
       .comty-motion-panel [data-motion-status] { margin: .5rem; font-size: .75rem; color: var(--comty-muted); }
-      @media (max-width: 25rem) { #comty-root { --comty-tool-size: 2rem; --comty-toolbar-padding: .25rem; } .comty-toolbar { right: .5rem; bottom: .5rem; max-width: calc(100vw - 1rem); flex-wrap: wrap; justify-content: center; row-gap: .25rem; } .comty-tool-divider { display: none; } }
+      @media (max-width: 38rem) { #comty-root { --comty-tool-size: 2rem; --comty-toolbar-padding: .25rem; } .comty-toolbar { right: .5rem; bottom: .5rem; max-width: calc(100vw - 1rem); flex-wrap: wrap; justify-content: center; row-gap: .25rem; } .comty-tool-divider { display: none; } }
 
       .comty-inspection-box {
         position: fixed;
         box-sizing: border-box;
         border: .0625rem solid var(--comty-outline);
-        background: color-mix(in oklch, var(--comty-outline) 8%, transparent);
+        background: transparent;
+        border-radius: 0;
         pointer-events: none;
       }
-      .comty-inspection-box[data-selected] { background: color-mix(in oklch, var(--comty-outline) 5%, transparent); }
       .comty-inspect-spacing { position: fixed; pointer-events: none; background: var(--comty-spacing-color); }
       .comty-inspect-margin { --comty-spacing-color: var(--comty-margin-fill); }
       .comty-inspect-padding { --comty-spacing-color: var(--comty-padding-fill); }
@@ -1270,6 +1393,15 @@ export function getComtyStyle() {
         height: 5.75rem;
         border-radius: .75rem;
       }
+      .comty-agent-scope { display: inline-flex; align-items: center; gap: .375rem; color: var(--comty-muted); font: .6875rem/1.25 var(--comty-font); white-space: nowrap; cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; }
+      .comty-create-expanded .comty-agent-scope { opacity: 1; visibility: visible; }
+      .comty-agent-scope input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+      .comty-agent-scope-track { position: relative; width: 1.5rem; height: .875rem; flex: 0 0 auto; border-radius: 999rem; background: var(--comty-border); transition: background-color 160ms ease; }
+      .comty-agent-scope-track::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--comty-paper); transition: transform 160ms ease; }
+      .comty-agent-scope input:checked + .comty-agent-scope-track { background: var(--comty-accent); }
+      .comty-agent-scope input:checked + .comty-agent-scope-track::after { transform: translateX(.625rem); }
+      .comty-agent-scope input:focus-visible + .comty-agent-scope-track { outline: .125rem solid var(--comty-comment-focus); outline-offset: .125rem; }
+      .comty-agent-thread-error { grid-column: 2; margin: .25rem 0 0; color: var(--comty-agent-error); font: .6875rem/1.3 var(--comty-font); }
 
       .comty-create-bubble.comty-create-has-attachment { height: 7.5rem; }
       .comty-create-bubble.comty-bubble-left { transform-origin: top right; }

package/src/vite.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+import type { ComtyOptions } from './browser.js';
+
+/** Development only: leaves production builds untouched. */
+export function comty(options?: Pick<ComtyOptions, 'projectKey' | 'apiUrl'> & { agent?: 'codex' | 'claude' | 'cursor' | 'gemini' | 'grok'; model?: string }): Plugin;

package/src/vite.mjs

@@ -0,0 +1,69 @@
+import { readFile } from 'node:fs/promises';
+import { createCompanion, isLoopback } from './companion.mjs';
+
+/** Starts the local companion on Vite's own origin, without a second port. */
+export function comty(options = {}) {
+  let companion, origin, start;
+  return {
+    name: 'comty', apply: 'serve',
+    configureServer(server) {
+      const host = server.config.server.host;
+      if (host === true || (typeof host === 'string' && !isLoopback(host))) {
+        throw new Error('Comty Agent requires Vite to bind localhost or 127.0.0.1');
+      }
+      if (!server.httpServer) throw new Error('Comty requires a Vite HTTP server (middleware mode is unsupported)');
+      const runtime = new URL('./browser.js', import.meta.url);
+      const style = new URL('./style.js', import.meta.url);
+      const anchors = new URL('./anchors.js', import.meta.url);
+      const capture = new URL('./capture.js', import.meta.url);
+      const captureEngine = new URL('./capture-engine.js', import.meta.url);
+      const captureResources = new URL('./capture-resources.js', import.meta.url);
+      const comments = new URL('./comments.js', import.meta.url);
+      const measurements = new URL('./measurements.js', import.meta.url);
+      const markup = new URL('./inspect-markup.js', import.meta.url);
+      start = new Promise((resolve, reject) => {
+        const onError = error => {
+          // Vite retries the next port after EADDRINUSE unless strictPort is set.
+          if (error.code !== 'EADDRINUSE' || server.config.server.strictPort) reject(error);
+        };
+        server.httpServer.on('error', onError);
+        server.httpServer.once('listening', () => {
+          server.httpServer.off('error', onError);
+          try {
+            const address = server.httpServer.address();
+            const hostname = typeof host === 'string' ? host : 'localhost';
+            origin = `${server.config.server.https ? 'https' : 'http'}://${hostname}:${address.port}`;
+            companion = createCompanion({ cwd: server.config.root, origin, provider: options.agent, model: options.model });
+            server.httpServer.once('close', () => { void companion.close().catch(error => server.config.logger.error(`Comty: ${error.message}`)); });
+            resolve();
+          } catch (error) { reject(error); }
+        });
+      });
+      start.catch(error => server.config.logger.error(`Comty: ${error.message}`));
+      server.middlewares.use(async (request, response, next) => {
+        if (!request.url?.startsWith('/__comty/')) return next();
+        try {
+          await start;
+          if (request.headers.host !== new URL(origin).host || (request.headers.origin && request.headers.origin !== origin)) {
+            response.writeHead(403); response.end(); return;
+          }
+          const path = new URL(request.url, origin).pathname;
+          if (request.method === 'GET' && ['/__comty/browser.js', '/__comty/style.js', '/__comty/anchors.js', '/__comty/capture.js', '/__comty/capture-engine.js', '/__comty/capture-resources.js', '/__comty/comments.js', '/__comty/measurements.js', '/__comty/inspect-markup.js', '/__comty/start.js'].includes(path)) {
+            response.setHeader('Content-Type', 'text/javascript'); response.setHeader('Cache-Control', 'no-store');
+            response.setHeader('X-Content-Type-Options', 'nosniff');
+            response.end(path.endsWith('/browser.js') ? await readFile(runtime) : path.endsWith('/style.js') ? await readFile(style) : path.endsWith('/anchors.js') ? await readFile(anchors) : path.endsWith('/capture.js') ? await readFile(capture) : path.endsWith('/capture-engine.js') ? await readFile(captureEngine) : path.endsWith('/capture-resources.js') ? await readFile(captureResources) : path.endsWith('/comments.js') ? await readFile(comments) : path.endsWith('/measurements.js') ? await readFile(measurements) : path.endsWith('/inspect-markup.js') ? await readFile(markup) :
+              `import { initComty } from '/__comty/browser.js';\ninitComty(${JSON.stringify({ projectKey: options.projectKey, apiUrl: options.apiUrl, agent: { url: `${origin}/__comty`, token: companion.token } })}).catch(console.error);`);
+          } else await companion.handle(request, response);
+        } catch (error) { next(error); }
+      });
+    },
+    transformIndexHtml: {
+      order: 'pre',
+      async handler() {
+        await start;
+        return [{ tag: 'script', attrs: { type: 'module', src: '/__comty/start.js', 'vite-ignore': '' }, injectTo: 'head-prepend' }];
+      },
+    },
+    async closeBundle() { await companion?.close(); },
+  };
+}