@comty.io/core 0.1.3 → 0.1.5

package/src/style.js

@@ -11,7 +11,8 @@ export function getComtyStyle() {
         --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-error: #ef7676;
-        --comty-outline: oklch(0.62 0.18 255);
+        --comty-outline: var(--comty-toolbar-muted);
+        --comty-comment-focus: var(--comty-toolbar-muted);
         --comty-paper: #fff;
         --comty-ink: #171717;
         --comty-border: #434649;
@@ -35,6 +36,10 @@ export function getComtyStyle() {
         --comty-magnifier-gray: #999;
         --comty-magnifier-shadow: 0 .0625rem .375rem rgb(0 0 0 / .5);
         --comty-property-width: 16rem;
+        --comty-inspector-width: 18rem;
+        --comty-inspector-label-width: 5rem;
+        --comty-inspector-row-height: 1.5rem;
+        --comty-copy-size: 1.5rem;
         --comty-property-swatch: 2rem;
         --comty-property-font-size: .6875rem;
         --comty-property-row-height: 1.375rem;
@@ -48,7 +53,6 @@ export function getComtyStyle() {
         --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;
@@ -323,11 +327,11 @@ export function getComtyStyle() {
       .comty-pin {
         position: fixed;
         z-index: 2147483645;
-        width: 34px;
-        height: 34px;
+        width: 28px;
+        height: 28px;
         padding: 0;
         border: none;
-        border-radius: 999px 999px 999px 12px;
+        border-radius: 999px 999px 999px 10px;
         background: #0078FF;
         color: white;
         display: grid;
@@ -337,17 +341,17 @@ export function getComtyStyle() {
         transform: translate(-50%, -50%);
         appearance: none;
         font-family: sans-serif;
-        filter: drop-shadow(0 8px 18px rgba(0, 120, 255, .28));
+        filter: drop-shadow(0 8px 16px rgba(0, 120, 255, .28));
         display: none;
         overflow: visible;
       }
 
-      #comty-root > .comty-temp-pin { pointer-events: none; }
+      #comty-root > .comty-temp-pin { pointer-events: none; z-index: 2147483647; }
 
       .comty-pin-icon {
         display: block;
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         pointer-events: none;
       }
 
@@ -356,11 +360,11 @@ export function getComtyStyle() {
         top: -4px;
         right: -4px;
         display: inline-flex;
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
         border: 1px solid rgba(255,255,255,.82);
         border-radius: 999px;
-        box-shadow: 0 8px 18px rgba(15,23,42,.18);
+        box-shadow: 0 8px 16px rgba(15,23,42,.18);
         pointer-events: none;
       }
 
@@ -368,7 +372,7 @@ export function getComtyStyle() {
         background: var(--comty-surface);
         color: var(--comty-foreground);
         border: 2px solid var(--comty-border);
-        box-shadow: 0 2px 6px rgba(0,0,0,.18);
+        box-shadow: 0 2px 4px rgba(0,0,0,.18);
         filter: none;
         transition:
           border-color 160ms ease,
@@ -418,14 +422,14 @@ export function getComtyStyle() {
         background: var(--comty-surface);
         color: var(--comty-foreground);
         border: 0;
-        box-shadow: 0 10px 28px rgba(0,0,0,.2);
+        box-shadow: 0 8px 24px rgba(0,0,0,.2);
         padding: 0;
-        border-radius: 14px;
-        width: min(360px, calc(100vw - 32px));
+        border-radius: 12px;
+        width: min(288px, calc(100vw - 24px));
         overflow: hidden;
         box-sizing: border-box;
         font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-        font-size: 14px;
+        font-size: 12px;
         display: none;
         animation: comty-bubble-in 200ms cubic-bezier(.23,1,.32,1) forwards;
         transform-origin: top left;
@@ -453,37 +457,53 @@ export function getComtyStyle() {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
-        min-height: 40px;
-        padding: 0 16px;
-        border-bottom: 1px solid var(--comty-border);
-      }
-
-      .comty-bubble-title {
-        margin: 0;
-        color: var(--comty-foreground);
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 1;
-      }
-
-      .comty-bubble-header-actions {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        margin-left: auto;
+        gap: 10px;
+        min-height: 1.5rem;
+        padding: .625rem .625rem 0;
       }
 
       .comty-bubble-content {
         flex: 1;
         color: var(--comty-foreground);
-        font-size: 14px;
+        font-size: .75rem;
         line-height: 1.45;
         overflow-wrap: anywhere;
         cursor: text;
         white-space: pre-wrap;
       }
 
+      .comty-bubble-content a {
+        color: var(--comty-comment-focus);
+        text-decoration: underline;
+        text-underline-offset: .15em;
+      }
+
+      .comty-bubble-content a:focus-visible {
+        outline: .125rem solid var(--comty-comment-focus);
+        outline-offset: .125rem;
+      }
+
+      .comty-comment-link {
+        display: inline-block;
+        box-sizing: border-box;
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        padding: .375rem .625rem;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: .75rem/1.25 var(--comty-font);
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .comty-thread-item .comty-comment-link,
+      .comty-capture-annotation .comty-comment-link { margin-top: .5rem; }
+      .comty-comment-link:hover { text-decoration: underline; }
+      .comty-comment-link:focus-visible { outline: .125rem solid var(--comty-comment-focus); outline-offset: .125rem; }
+
       .comty-bubble-content-editor {
         display: block;
         flex: 1;
@@ -495,7 +515,7 @@ export function getComtyStyle() {
         background: transparent;
         color: var(--comty-foreground);
         cursor: text;
-        font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: .75rem/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
         resize: none;
         overflow: hidden;
@@ -505,15 +525,15 @@ export function getComtyStyle() {
       }
 
       .comty-thread {
-        padding: 18px 16px 16px;
+        padding: .625rem;
       }
 
       .comty-thread-list {
         display: grid;
         width: 100%;
         min-width: 0;
-        gap: 20px;
-        max-height: min(360px, calc(100vh - 152px));
+        gap: 16px;
+        max-height: min(288px, calc(100vh - 120px));
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: contain;
@@ -526,9 +546,9 @@ export function getComtyStyle() {
         display: grid;
         width: 100%;
         min-width: 0;
-        grid-template-columns: 24px minmax(0, 1fr);
+        grid-template-columns: 1.5rem minmax(0, 1fr);
         align-items: start;
-        gap: 12px;
+        gap: 10px;
       }
 
       .comty-thread-item-body {
@@ -543,15 +563,15 @@ export function getComtyStyle() {
         display: flex;
         align-items: center;
         min-width: 0;
-        min-height: 20px;
-        gap: 7px;
+        min-height: 16px;
+        gap: 6px;
       }
 
       .comty-comment-author-name {
         min-width: 0;
         overflow: hidden;
         color: var(--comty-foreground);
-        font-size: 14px;
+        font-size: .75rem;
         font-weight: 600;
         line-height: 1.25;
         text-overflow: ellipsis;
@@ -561,7 +581,7 @@ export function getComtyStyle() {
       .comty-comment-time {
         flex: 0 0 auto;
         color: var(--comty-muted);
-        font-size: 13px;
+        font-size: .6875rem;
         font-weight: 400;
         line-height: 1.25;
       }
@@ -569,13 +589,13 @@ export function getComtyStyle() {
       .comty-comment-avatar {
         display: grid;
         place-items: center;
-        width: 24px;
-        height: 24px;
+        width: 1.5rem;
+        height: 1.5rem;
         overflow: hidden;
         border-radius: 50%;
         background: var(--comty-field-surface);
         color: var(--comty-foreground);
-        font-size: 10px;
+        font-size: 8px;
         font-weight: 600;
         line-height: 1;
       }
@@ -587,8 +607,8 @@ export function getComtyStyle() {
       }
 
       .comty-pin-avatar {
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
       }
 
       .comty-thread-item .comty-bubble-content,
@@ -603,12 +623,12 @@ export function getComtyStyle() {
       .comty-icon-button {
         display: inline-grid;
         place-items: center;
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
         flex: 0 0 auto;
         padding: 0;
         border: 0;
-        border-radius: 6px;
+        border-radius: 4px;
         background: transparent;
         color: var(--comty-foreground);
         cursor: pointer;
@@ -638,24 +658,24 @@ export function getComtyStyle() {
       }
 
       .comty-icon-button svg {
-        width: 18px;
-        height: 18px;
+        width: 16px;
+        height: 16px;
         pointer-events: none;
       }
 
       .comty-status-trigger {
         display: inline-flex;
         align-items: center;
-        gap: 6px;
-        min-height: 28px;
+        gap: 4px;
+        min-height: 24px;
         padding: 0 8px;
         border: 0;
-        border-radius: 6px;
+        border-radius: 4px;
         background: transparent;
         color: var(--comty-foreground);
         cursor: pointer;
         appearance: none;
-        font: 600 12px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: 600 .6875rem/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         transition:
           background-color 160ms ease,
           transform 140ms ease-out;
@@ -684,14 +704,14 @@ export function getComtyStyle() {
       }
 
       .comty-thread-more {
-        width: 24px;
-        height: 24px;
-        margin: -2px -4px -2px auto;
+        width: 20px;
+        height: 20px;
+        margin: 0 0 0 auto;
       }
 
       .comty-thread-more svg {
-        width: 16px;
-        height: 16px;
+        width: 12px;
+        height: 12px;
       }
 
       .comty-entry-actions-popover {
@@ -710,38 +730,57 @@ export function getComtyStyle() {
 
       .comty-reply-form {
         display: grid;
-        grid-template-columns: 24px minmax(0, 1fr);
+        grid-template-columns: 1.5rem minmax(0, 1fr);
         align-items: center;
-        gap: 12px;
-        margin-top: 20px;
+        gap: 10px;
+        margin-top: 16px;
       }
 
       .comty-reply-field {
         display: flex;
         align-items: center;
-        min-height: 36px;
-        padding: 4px 8px 4px 16px;
-        border-radius: 14px;
+        min-height: 1.875rem;
+        padding: .25rem .25rem .25rem .625rem;
+        border-radius: 1.25rem;
         background: var(--comty-field-surface);
         box-sizing: border-box;
-        transition: box-shadow 160ms ease;
+        transition: border-radius var(--comty-motion-duration) var(--comty-ease-in-out), box-shadow 160ms ease;
+      }
+
+      .comty-reply-field.comty-reply-expanded { border-radius: .75rem; }
+
+      .comty-reply-form:has(.comty-reply-expanded) > .comty-comment-avatar {
+        align-self: start;
+      }
+
+      .comty-reply-expanded .comty-reply-button {
+        align-self: flex-end;
       }
 
       .comty-reply-field:focus-within {
-        box-shadow: inset 0 0 0 1px #a3a3a3;
+        box-shadow: inset 0 0 0 .0625rem var(--comty-comment-focus);
       }
 
       .comty-reply-input {
         min-width: 0;
+        min-height: 0;
         flex: 1;
         padding: 0;
         border: 0;
+        height: 1.125rem;
+        max-height: 5rem;
         background: transparent;
         color: var(--comty-foreground);
-        font: 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: .6875rem/1.125rem Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         outline: none;
+        resize: none;
+        overflow-y: hidden;
+        box-sizing: border-box;
+        transition: height var(--comty-motion-duration) var(--comty-ease-in-out);
       }
 
+      .comty-reply-expanded .comty-reply-input { overflow-y: auto; }
+
       .comty-reply-input::placeholder {
         color: var(--comty-muted);
       }
@@ -749,14 +788,14 @@ export function getComtyStyle() {
       .comty-reply-button {
         display: inline-grid;
         place-items: center;
-        width: 28px;
-        height: 28px;
+        width: 1.375rem;
+        height: 1.375rem;
         flex: 0 0 auto;
         padding: 0;
         border: 0;
         border-radius: 50%;
-        background: #0d99ff;
-        color: #fff;
+        background: var(--comty-foreground);
+        color: var(--comty-surface);
         cursor: pointer;
         transition:
           background-color 160ms ease,
@@ -765,7 +804,7 @@ export function getComtyStyle() {
       }
 
       .comty-reply-button:hover:not(:disabled) {
-        background: #0b87e3;
+        background: var(--comty-muted);
       }
 
       .comty-reply-button:active:not(:disabled) {
@@ -773,13 +812,14 @@ export function getComtyStyle() {
       }
 
       .comty-reply-button:disabled {
+        color: var(--comty-muted);
         background: var(--comty-hover-surface);
         cursor: default;
       }
 
       .comty-reply-button svg {
-        width: 16px;
-        height: 16px;
+        width: 12px;
+        height: 12px;
       }
 
       .comty-reply-form-guest { display: block; }
@@ -787,20 +827,20 @@ export function getComtyStyle() {
       .comty-sign-in-reply {
         display: block;
         width: 100%;
-        min-height: 36px;
-        padding: 4px 16px;
+        min-height: 32px;
+        padding: 4px 12px;
         border: 0;
-        border-radius: 14px;
+        border-radius: 12px;
         background: var(--comty-field-surface);
-        color: #0d99ff;
+        color: var(--comty-foreground);
         text-align: left;
-        font: 600 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font: 600 12px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         cursor: pointer;
         transition: background-color 160ms ease;
       }
 
       .comty-sign-in-reply:hover { background: var(--comty-hover-surface); }
-      .comty-sign-in-reply:focus-visible { outline: 2px solid #0d99ff; outline-offset: 2px; }
+      .comty-sign-in-reply:focus-visible { outline: .0625rem solid var(--comty-comment-focus); outline-offset: .0625rem; }
 
       .comty-hover-bubble {
         width: min(240px, calc(100vw - 32px));
@@ -826,10 +866,6 @@ export function getComtyStyle() {
         height: 24px;
       }
 
-      .comty-hover-bubble .comty-comment-author-name {
-        font-size: 12px;
-      }
-
       .comty-hover-bubble .comty-comment-author {
         min-height: 0;
       }
@@ -838,11 +874,6 @@ export function getComtyStyle() {
         font-size: 12px;
       }
 
-      .comty-hover-bubble .comty-thread-item .comty-bubble-content {
-        margin-top: 0;
-        font-size: 12px;
-      }
-
       .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; }
@@ -853,13 +884,23 @@ export function getComtyStyle() {
       .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 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; }
       .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-guest-form { display: grid; gap: .5rem; margin-top: 1.5rem; }
+      .comty-guest-form label { color: var(--comty-dialog-soft); font: 500 .875rem/1.5 var(--comty-font); }
+      .comty-guest-form input { width: 100%; height: 2.75rem; padding: 0 1rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-dialog-field); color: var(--comty-dialog-ink); font: 400 .875rem/1.5 var(--comty-font); outline: none; }
+      .comty-guest-form input::placeholder { color: var(--comty-dialog-soft); }
+      .comty-guest-form input:focus-visible { border-color: var(--comty-dialog-ink); box-shadow: 0 0 0 .0625rem var(--comty-dialog-ink); }
+      .comty-guest-form [role="alert"] { margin: 0; color: var(--comty-error); }
+      .comty-guest-actions { display: grid; justify-content: stretch; gap: .75rem; margin-top: 1rem; }
+      .comty-guest-actions button { width: 100%; }
+      .comty-guest-actions [data-comty-login] { background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
+      .comty-auth-or { color: var(--comty-dialog-soft); font: .75rem/1.5 var(--comty-font); text-align: center; }
       .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; }
@@ -925,8 +966,6 @@ export function getComtyStyle() {
         justify-content: space-between;
         gap: 8px;
         margin-top: 12px;
-        padding-top: 10px;
-        border-top: 1px solid var(--comty-border);
       }
 
       .comty-status-label {
@@ -1008,6 +1047,12 @@ export function getComtyStyle() {
         transform-origin: top right;
       }
 
+      .comty-popover.comty-comment-popover {
+        background: var(--comty-field-surface);
+        border: .0625rem solid var(--comty-border);
+        box-shadow: var(--comty-floating-shadow);
+      }
+
       .comty-popover-item {
         display: flex;
         align-items: center;
@@ -1123,11 +1168,11 @@ export function getComtyStyle() {
       .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-row button:hover .comty-property-copy-icon, .comty-property-row button[data-copied] .comty-property-copy-icon, .comty-inspector-copy:hover .comty-property-copy-icon, .comty-inspector-copy[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); }
+      .comty-property-copy-icon svg:last-child { opacity: 0; transform: scale(.9); }
+      .comty-property-row button[data-copied] svg:first-child, .comty-inspector-copy[data-copied] svg:first-child { opacity: 0; transform: scale(.9); }
+      .comty-property-row button[data-copied] svg:last-child, .comty-inspector-copy[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; }
@@ -1178,29 +1223,29 @@ export function getComtyStyle() {
       .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-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-foreground); background: var(--comty-surface);
-        box-shadow: var(--comty-floating-shadow); font: .625rem/1.5 ui-sans-serif, system-ui, sans-serif;
+        position: fixed; width: var(--comty-inspector-width); max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem);
+        padding: .25rem; border-radius: .75rem; overflow-y: auto;
+        color: var(--comty-foreground); background: var(--comty-toolbar-group);
+        box-shadow: var(--comty-floating-shadow); font: var(--comty-property-font-size)/1.4 var(--comty-font);
         pointer-events: none; box-sizing: border-box;
       }
       .comty-inspector[data-selected] { pointer-events: auto; user-select: text; }
-      .comty-inspector-head, .comty-inspector-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-inline: .5rem; }
-      .comty-inspector-head { margin-bottom: .5rem; }
-      .comty-inspector-head button:last-child { flex-shrink: 0; }
-      .comty-inspector-head button:first-child { flex: 1; font-family: ui-monospace, monospace; font-weight: 500; text-align: left; }
-      .comty-inspector-row span { color: var(--comty-muted); flex-shrink: 0; }
-      .comty-inspector button { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; }
-      .comty-inspector button:hover { text-decoration: underline; }
+      .comty-inspector-head { display: flex; align-items: center; gap: .25rem; padding: 0 .125rem 0 .375rem; min-height: 1.75rem; }
+      .comty-inspector-selector { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--comty-muted); font-family: ui-monospace, monospace; }
+      .comty-inspector-details { padding: .25rem .25rem .25rem .5rem; border-radius: .5rem; background: var(--comty-toolbar-surface); }
+      .comty-inspector-row { display: grid; grid-template-columns: var(--comty-inspector-label-width) minmax(0, 1fr) var(--comty-copy-size); align-items: center; gap: .25rem; min-height: var(--comty-inspector-row-height); }
+      .comty-inspector-label, .comty-inspector-secondary { color: var(--comty-muted); }
+      .comty-inspector-label { overflow-wrap: anywhere; }
+      .comty-inspector button { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
       .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; }
-      .comty-inspector .comty-inspector-expand { display: block; margin: .5rem auto 0; color: var(--comty-muted); }
+      .comty-inspector-value { display: flex; align-items: center; gap: .3125rem; min-width: 0; padding-block: .125rem; text-align: left; font-variant-numeric: tabular-nums; }
+      .comty-inspector button.comty-inspector-value { padding-block: .125rem; }
+      .comty-inspector-text { min-width: 0; overflow-wrap: anywhere; }
+      .comty-inspector-text:has(.comty-inspector-tokens) { display: flex; flex-wrap: wrap; gap: 0 .3125rem; }
+      .comty-inspector-swatch { display: inline-block; flex: 0 0 .6875rem; width: .6875rem; height: .6875rem; border-radius: .1875rem; }
+      .comty-inspector .comty-inspector-copy { display: grid; place-items: center; flex: 0 0 var(--comty-copy-size); width: var(--comty-copy-size); height: var(--comty-copy-size); border-radius: .375rem; }
+      @media (hover: hover) and (pointer: fine) { .comty-inspector-copy:hover { background: var(--comty-hover-surface); } }
+      @media (pointer: coarse) { .comty-inspector { --comty-copy-size: 2.75rem; } }
       .comty-measure-line { position: fixed; background: var(--comty-outline); pointer-events: none; }
       .comty-measure-tag { position: fixed; padding: .125rem .375rem; border-radius: .25rem; background: var(--comty-ink); color: var(--comty-paper); font: .625rem/1.4 ui-monospace, monospace; white-space: nowrap; pointer-events: none; }
 
@@ -1209,85 +1254,235 @@ export function getComtyStyle() {
         z-index: 2147483647;
         background: var(--comty-surface);
         border: 0;
-        box-shadow: 0 4px 20px rgba(0,0,0,.1);
-        border-radius: 999px;
-        width: 320px;
-        font-family: sans-serif;
-        display: flex;
-        align-items: center;
-        padding: 4px 4px 4px 16px;
-        gap: 8px;
+        box-shadow: var(--comty-floating-shadow);
+        border-radius: 1.125rem;
+        width: min(16rem, calc(100vw - 1rem));
+        height: 2.25rem;
+        overflow: hidden;
+        font: .75rem/1.25rem var(--comty-font);
         box-sizing: border-box;
-        animation: comty-bubble-in 220ms cubic-bezier(.2,.8,.2,1) forwards;
+        animation: comty-bubble-in 200ms var(--comty-ease-out) forwards;
         transform-origin: top left;
+        transition: height var(--comty-motion-duration) var(--comty-ease-in-out), border-radius var(--comty-motion-duration) var(--comty-ease-in-out), box-shadow 160ms var(--comty-ease-out);
       }
 
-      .comty-create-bubble.comty-bubble-left {
-        animation-name: comty-bubble-in-left;
-        transform-origin: top right;
+      .comty-create-bubble.comty-create-expanded {
+        height: 5.75rem;
+        border-radius: .75rem;
       }
 
+      .comty-create-bubble.comty-create-has-attachment { height: 7.5rem; }
+      .comty-create-bubble.comty-bubble-left { transform-origin: top right; }
+
       .comty-create-textarea {
-        flex: 1;
-        height: 24px;
-        min-height: 24px;
-        max-height: 150px;
+        position: absolute;
+        top: .5rem;
+        left: .75rem;
+        width: calc(100% - 3.25rem);
+        height: 1.25rem;
         border: none;
         padding: 0;
-        font-family: inherit;
-        font-size: 14px;
-        line-height: 24px;
+        font: inherit;
         resize: none;
         box-sizing: border-box;
         outline: none;
         background: transparent;
-        overflow-y: auto;
+        overflow-y: hidden;
         color: var(--comty-foreground);
         scrollbar-width: thin;
-        scrollbar-color: gray transparent;
+        scrollbar-color: var(--comty-muted) transparent;
+        transition: width var(--comty-motion-duration) var(--comty-ease-in-out), height var(--comty-motion-duration) var(--comty-ease-in-out);
       }
 
-      .comty-create-textarea::placeholder {
+      .comty-create-expanded .comty-create-textarea {
+        width: calc(100% - 1.5rem);
+        height: 2.5rem;
+        overflow-y: auto;
+      }
+
+      .comty-create-attachment {
+        position: absolute;
+        top: 3.25rem;
+        left: .75rem;
+        right: .75rem;
+        display: none;
+        min-width: 0;
+      }
+
+      .comty-create-has-attachment .comty-create-attachment { display: flex; }
+      .comty-create-attachment-chip {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+        max-width: 100%;
+        padding: .125rem .125rem .125rem 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+      }
+      .comty-create-attachment .comty-comment-link { flex: 0 1 auto; padding: 0 .5rem; line-height: 1.25rem; background: transparent; }
+      .comty-create-attachment button {
+        flex: 0 0 auto;
+        width: 1.25rem;
+        height: 1.25rem;
+        padding: 0;
+        border: 0;
+        border-radius: .25rem;
+        background: transparent;
         color: var(--comty-muted);
+        cursor: pointer;
       }
 
+      .comty-create-textarea::placeholder { color: var(--comty-muted); }
+
       .comty-create-actions {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
         display: flex;
         align-items: center;
+        justify-content: space-between;
+        height: 2.25rem;
+        padding: .375rem .375rem .375rem .5rem;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+      .comty-create-actions::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: .0625rem;
+        background: var(--comty-border);
+        opacity: 0;
+        transition: opacity 110ms var(--comty-ease-out);
+      }
+      .comty-create-expanded .comty-create-actions::before { opacity: 1; transition-delay: 110ms; }
+      .comty-create-actions > button { pointer-events: auto; }
+
+      .comty-create-link-button {
+        display: grid;
+        place-items: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0;
+        border: 0;
+        border-radius: .375rem;
+        background: transparent;
+        color: var(--comty-muted);
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(.25rem);
+        transition: opacity 110ms var(--comty-ease-out), transform 110ms var(--comty-ease-out), visibility 0s linear 110ms;
+      }
+      .comty-create-expanded .comty-create-link-button {
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        transition-delay: 110ms, 110ms, 0s;
+      }
+      .comty-create-link-button svg { width: .75rem; height: .75rem; }
+
+      @media (hover: hover) and (pointer: fine) {
+        .comty-create-link-button:hover,
+        .comty-create-link-editor button:hover,
+        .comty-create-attachment button:hover {
+          background: var(--comty-hover-surface);
+          color: var(--comty-foreground);
+        }
+      }
+      .comty-create-link-button:focus-visible,
+      .comty-create-link-editor button:focus-visible,
+      .comty-create-attachment button:focus-visible,
+      .comty-btn-submit:focus-visible {
+        outline: .0625rem solid var(--comty-comment-focus);
+        outline-offset: .0625rem;
+      }
+
+      .comty-create-link-editor {
+        position: absolute;
+        inset: .375rem;
+        display: flex;
+        align-items: center;
+        gap: .375rem;
+        background: var(--comty-surface);
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(.25rem);
+        pointer-events: none;
+        transition: opacity 160ms var(--comty-ease-out), transform 160ms var(--comty-ease-out), visibility 0s linear 160ms;
+      }
+      .comty-create-link-open .comty-create-link-editor {
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        pointer-events: auto;
+        transition-delay: 0s;
+      }
+      .comty-create-link-field { position: relative; flex: 1; min-width: 0; }
+      .comty-create-link-editor input {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        height: 1.5rem;
+        padding: 0 1.75rem 0 .5rem;
+        border: 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: inherit;
+        outline: none;
+      }
+      .comty-create-link-editor input:focus-visible { background: var(--comty-hover-surface); }
+      .comty-create-link-editor input[aria-invalid="true"] { box-shadow: inset 0 0 0 .0625rem var(--comty-error); }
+      .comty-create-link-editor button {
         flex: 0 0 auto;
+        height: 1.5rem;
+        padding: 0 .5rem;
+        border: 0;
+        border-radius: .375rem;
+        background: var(--comty-field-surface);
+        color: var(--comty-foreground);
+        font: inherit;
+        cursor: pointer;
       }
+      .comty-create-link-field button {
+        position: absolute;
+        top: .125rem;
+        right: .125rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        padding: 0;
+        background: transparent;
+      }
+      .comty-create-link-open .comty-create-link-button,
+      .comty-create-link-open .comty-btn-submit { opacity: 0; visibility: hidden; pointer-events: none; }
 
       .comty-btn-submit {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 32px;
-        height: 32px;
+        width: 1.5rem;
+        height: 1.5rem;
         padding: 0;
         border-radius: 50%;
         background: var(--comty-border);
-        color: white;
+        color: var(--comty-muted);
         border: none;
         cursor: pointer;
-        transition: background 150ms ease, opacity 150ms ease;
+        transition: background-color 160ms var(--comty-ease-out), color 160ms var(--comty-ease-out), opacity 160ms var(--comty-ease-out);
       }
+      .comty-btn-submit svg { width: .875rem; height: .875rem; }
+      .comty-btn-submit.comty-btn-active { background: var(--comty-foreground); color: var(--comty-surface); }
+      .comty-btn-submit:disabled { opacity: .6; cursor: not-allowed; }
 
-      .comty-btn-submit svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .comty-btn-submit.comty-btn-active {
-        background: #0078FF;
-      }
-
-      .comty-btn-submit.comty-btn-active:hover {
-        background: #0062d1;
-      }
-
-      .comty-btn-submit:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
+      @media (prefers-reduced-motion: reduce) {
+        .comty-create-bubble, .comty-create-actions::before, .comty-create-textarea, .comty-create-link-button, .comty-create-link-editor, .comty-reply-field, .comty-reply-input {
+          transition-duration: 0ms;
+          transition-delay: 0ms;
+        }
+        .comty-create-bubble { animation: none; }
       }
     `;
 }