@coframe-gtm/annotations 1.1.0 → 1.2.0

package/src/ui/styles.ts

@@ -6,6 +6,12 @@
  */
 
 export const STYLES = `
+/* Box-sizing reset — the host page's reset is scoped to its own tree and
+   doesn't reach the overlay, so width:100% controls + padding would
+   otherwise overflow their popups. Keep everything border-box. */
+.cf-overlay, .cf-overlay *, .cf-overlay *::before, .cf-overlay *::after {
+  box-sizing: border-box;
+}
 .cf-overlay {
   position: fixed;
   inset: 0;
@@ -17,12 +23,18 @@ export const STYLES = `
   --cf-border: rgba(255, 255, 255, 0.1);
   --cf-muted: rgba(255, 255, 255, 0.55);
   --cf-accent: #a78bfa;
+  /* Liquid-glass fill for popups/panels — low alpha so the backdrop blur
+     actually reads as frosted glass instead of a solid black box. */
+  --cf-glass: rgba(24, 24, 34, 0.55);
+  --cf-glass-border: rgba(255, 255, 255, 0.14);
 }
 .cf-overlay[data-theme="light"] {
   color: #18181b;
   --cf-bg: rgba(252, 252, 253, 0.97);
   --cf-border: rgba(0, 0, 0, 0.1);
   --cf-muted: rgba(0, 0, 0, 0.5);
+  --cf-glass: rgba(252, 252, 253, 0.60);
+  --cf-glass-border: rgba(0, 0, 0, 0.10);
 }
 
 /* Hover highlight + multi-select boxes */
@@ -77,8 +89,29 @@ export const STYLES = `
 .cf-cursor-agent .cf-cursor-label { color: #0b0b0f; }
 
 /* Pins */
-.cf-pin {
+/* Outline box hugging the annotated element (so it's obvious what the
+   annotation refers to). Colour-coded per author via --cf-pin. */
+/* A multi-element annotation renders several .cf-anno outlines wrapped in
+   one group — display:contents so the wrapper itself adds no layout box and
+   the fixed-positioned outlines anchor straight to the viewport. */
+.cf-anno-group { display: contents; }
+.cf-anno {
   position: fixed;
+  pointer-events: none;
+  border: 1.5px solid var(--cf-pin, #a78bfa);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--cf-pin, #a78bfa) 9%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-pin, #a78bfa) 15%, transparent);
+  z-index: 2;
+}
+/* Entrance animation plays only on first render (.cf-fresh), never on the
+   scroll/resize re-renders — otherwise the box flickers while scrolling. */
+.cf-anno.cf-fresh { animation: cf-rise .18s cubic-bezier(.16,1,.3,1) both; }
+.cf-anno.agent { border-style: dashed; }
+.cf-anno.resolved { opacity: 0.4; }
+.cf-pin {
+  position: absolute;
+  top: -11px; left: -11px;
   width: 22px; height: 22px;
   border-radius: 50% 50% 50% 2px;
   background: var(--cf-pin, #a78bfa);
@@ -92,21 +125,14 @@ export const STYLES = `
   z-index: 3;
   transition: transform .12s cubic-bezier(.34,1.56,.64,1);
   padding: 0;
-  /* Pop in when a pin first renders so new annotations are obvious. */
-  animation: cf-pin-pop .32s cubic-bezier(.34,1.56,.64,1) both;
 }
+/* Pop in only when a pin first renders (.cf-fresh) — not on the scroll
+   re-renders, which would otherwise replay the pop on every tick. */
+.cf-pin.cf-fresh { animation: cf-pin-pop .32s cubic-bezier(.34,1.56,.64,1) both; }
 .cf-pin:hover { transform: scale(1.2); }
 .cf-pin.resolved { opacity: 0.45; }
-/* Agent-pushed pins pulse a ring so reviewers spot what the agent added. */
-.cf-pin.agent { border-style: dashed; }
-.cf-pin.agent::after {
-  content: "";
-  position: absolute; inset: -4px;
-  border-radius: inherit;
-  border: 2px solid var(--cf-pin, #a78bfa);
-  animation: cf-pin-ring 1.6s ease-out 3;
-  pointer-events: none;
-}
+/* Human vs agent reads from the box outline (solid vs dashed) + the pin
+   glyph (number vs initial) + colour — no extra per-pin chrome. */
 
 /* Hover-to-preview card — shown next to a pin on mouseenter. */
 .cf-pin-preview {
@@ -115,8 +141,8 @@ export const STYLES = `
   max-width: 240px;
   width: max-content;
   pointer-events: none;
-  background: var(--cf-bg);
-  border: 1px solid var(--cf-border);
+  background: var(--cf-glass);
+  border: 1px solid var(--cf-glass-border);
   border-radius: 9px;
   padding: 7px 10px;
   font: 500 12px -apple-system, system-ui;
@@ -124,8 +150,11 @@ export const STYLES = `
   color: #f4f4f5;
   white-space: normal;
   overflow-wrap: anywhere;
-  backdrop-filter: blur(16px) saturate(140%);
-  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  box-shadow:
+    0 8px 28px rgba(0,0,0,0.4),
+    inset 0 1px 0 rgba(255,255,255,0.18);
   z-index: 7;
   animation: cf-rise .14s cubic-bezier(.16,1,.3,1) both;
 }
@@ -146,24 +175,83 @@ export const STYLES = `
   position: fixed;
   left: 16px; bottom: 16px;
   pointer-events: auto;
-  background: var(--cf-bg);
-  border: 1px solid var(--cf-border);
-  border-radius: 14px;
-  padding: 10px;
+  /* Liquid glass — translucent, frosted, with a bright top edge. */
+  background: rgba(24,24,34,0.52);
+  border: 1px solid rgba(255,255,255,0.14);
+  border-radius: 17px;
+  padding: 9px;
   display: flex; flex-direction: column; gap: 8px;
-  backdrop-filter: blur(16px) saturate(140%);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
-  min-width: 220px;
+  -webkit-backdrop-filter: blur(30px) saturate(185%);
+  backdrop-filter: blur(30px) saturate(185%);
+  box-shadow:
+    0 18px 50px rgba(0,0,0,0.34),
+    inset 0 1px 0 rgba(255,255,255,0.22),
+    inset 0 -1px 0 rgba(0,0,0,0.22);
   z-index: 4;
 }
 .cf-toolbar-head {
   display: flex; align-items: center; gap: 7px;
-  font-weight: 700; letter-spacing: 0.02em;
+  cursor: grab; user-select: none; touch-action: none;
+}
+.cf-toolbar-head:active { cursor: grabbing; }
+/* Visible drag affordance — signals the panel can be moved. */
+.cf-grip {
+  flex: 0 0 auto; color: var(--cf-muted);
+  font-size: 13px; line-height: 1; letter-spacing: -2px; opacity: 0.5;
+}
+.cf-toolbar-head:hover .cf-grip { opacity: 0.85; }
+/* Logo button — tap to collapse back to the puck. */
+.cf-collapse {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; flex: 0 0 auto; padding: 0;
+  border: 0; border-radius: 8px; cursor: pointer;
+  /* Light tile so a dark brand logo reads on the dark panel. */
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+}
+.cf-collapse:hover { filter: brightness(0.94); }
+.cf-brand {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; flex: 0 0 auto; pointer-events: none;
+}
+.cf-brand svg { width: 18px; height: 18px; display: block; }
+.cf-toolbar.cf-dragging {
+  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+  transition: none;
 }
 .cf-logo-dot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--cf-accent);
-  box-shadow: 0 0 10px var(--cf-accent);
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--cf-accent); box-shadow: 0 0 10px var(--cf-accent);
+}
+
+/* Collapsed FAB — a draggable logo puck; tap to expand. */
+.cf-fab {
+  position: fixed; left: 16px; bottom: 16px;
+  width: 48px; height: 48px; border-radius: 16px;
+  pointer-events: auto; cursor: grab; user-select: none; touch-action: none;
+  display: flex; align-items: center; justify-content: center;
+  /* Liquid glass puck — frosted light so the dark mark reads. */
+  background: rgba(255,255,255,0.66);
+  -webkit-backdrop-filter: blur(22px) saturate(185%);
+  backdrop-filter: blur(22px) saturate(185%);
+  box-shadow:
+    0 12px 34px rgba(0,0,0,0.20),
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    0 0 0 0.5px rgba(0,0,0,0.06);
+  z-index: 4;
+  transition: transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
+}
+.cf-fab:hover { transform: scale(1.06); }
+.cf-fab.cf-dragging { cursor: grabbing; transition: none; box-shadow: 0 18px 44px rgba(0,0,0,0.42); }
+.cf-fab .cf-brand { width: 28px; height: 28px; cursor: inherit; }
+.cf-fab .cf-brand svg { width: 24px; height: 24px; }
+.cf-fab-badge {
+  position: absolute; top: -5px; right: -5px;
+  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
+  border-radius: 9px; background: var(--cf-accent); color: #fff;
+  font: 800 10px -apple-system, system-ui;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 0 0 2px var(--cf-bg);
 }
 .cf-count {
   margin-left: auto;
@@ -174,24 +262,45 @@ export const STYLES = `
 }
 .cf-overlay[data-theme="light"] .cf-count { background: rgba(0,0,0,0.06); }
 
+/* View / Comment reads as a pill switch — rounded track + sliding pill. */
 .cf-seg {
   display: flex; gap: 2px;
-  background: rgba(255,255,255,0.06);
-  border-radius: 9px; padding: 2px;
+  background: rgba(255,255,255,0.07);
+  border-radius: 999px; padding: 3px;
 }
 .cf-overlay[data-theme="light"] .cf-seg { background: rgba(0,0,0,0.05); }
 .cf-seg-btn {
   flex: 1; border: none; background: transparent; color: var(--cf-muted);
-  padding: 5px 10px; border-radius: 7px; font: 600 12px -apple-system, system-ui;
+  padding: 5px 14px; border-radius: 999px; cursor: pointer;
+  font: 600 12px -apple-system, system-ui;
+  transition: color .15s ease, background .2s ease;
 }
+.cf-seg-btn:hover { color: #fff; }
 .cf-seg-btn.on {
   background: var(--cf-accent); color: #fff;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 5px rgba(124,92,255,0.45);
+}
+/* Suggestions navigator — count + jump to each annotation. */
+.cf-nav {
+  display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  background: rgba(255,255,255,0.05); border-radius: 10px; padding: 2px 3px;
 }
+.cf-nav-btn {
+  border: 0; background: transparent; color: var(--cf-muted); cursor: pointer;
+  width: 24px; height: 22px; border-radius: 7px; font-size: 16px; line-height: 1; padding: 0;
+}
+.cf-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
+.cf-nav-label { font: 700 11px -apple-system, system-ui; color: var(--cf-muted); }
 .cf-tools .cf-seg-btn.on { background: rgba(255,255,255,0.16); color: #fff; }
 .cf-overlay[data-theme="light"] .cf-tools .cf-seg-btn.on { background: rgba(0,0,0,0.12); color: #111; }
 .cf-hint { font-size: 11px; color: var(--cf-muted); padding: 0 2px; }
 .cf-commit { width: 100%; }
+.cf-launch {
+  width: 100%; border: 0; margin-top: 2px;
+  background: linear-gradient(135deg, #7c5cff, #3ecf8e);
+  box-shadow: 0 6px 18px rgba(124,92,255,0.35);
+}
+.cf-launch:hover { filter: brightness(1.07); }
 
 /* Buttons */
 .cf-btn {
@@ -213,13 +322,20 @@ export const STYLES = `
   left: 16px; bottom: 92px;
   width: 320px;
   pointer-events: auto;
-  background: var(--cf-bg);
-  border: 1px solid var(--cf-border);
-  border-radius: 14px;
+  /* Liquid glass — translucent + heavily frosted with a bright top edge,
+     matching the toolbar/FAB. The low-alpha fill is what lets the blur
+     read as glass rather than a solid black box. */
+  background: var(--cf-glass);
+  border: 1px solid var(--cf-glass-border);
+  border-radius: 16px;
   padding: 12px;
   display: flex; flex-direction: column; gap: 10px;
-  backdrop-filter: blur(16px) saturate(140%);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
+  -webkit-backdrop-filter: blur(30px) saturate(185%);
+  backdrop-filter: blur(30px) saturate(185%);
+  box-shadow:
+    0 18px 50px rgba(0,0,0,0.40),
+    inset 0 1px 0 rgba(255,255,255,0.22),
+    inset 0 -1px 0 rgba(0,0,0,0.22);
   z-index: 5;
   animation: cf-rise .2s cubic-bezier(.16,1,.3,1) both;
 }
@@ -241,6 +357,13 @@ export const STYLES = `
   width: 22px; height: 22px; border-radius: 6px;
 }
 .cf-icon-btn:hover { background: rgba(255,255,255,0.08); }
+/* Clear / erase-board — small text button after the count. */
+.cf-clear {
+  margin-left: 4px; width: auto; height: auto; padding: 3px 8px;
+  font: 700 10px -apple-system, system-ui; text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.cf-clear:hover { color: #fff; }
 
 .cf-textarea {
   width: 100%; min-height: 72px; resize: vertical;
@@ -269,7 +392,29 @@ export const STYLES = `
   border-color: var(--cf-chip, var(--cf-accent));
   color: #fff;
 }
-.cf-popup-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.cf-popup-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
+
+/* Composer grows out of the floater — the WAAPI morph drives it, so drop
+   the CSS keyframe to avoid a double animation. */
+.cf-popup.cf-morph { animation: none; }
+/* The logo in the popup head — the floater mark that flew over + opened. */
+.cf-popup-brand {
+  width: 20px; height: 20px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+}
+.cf-popup-brand svg { width: 15px; height: 15px; display: block; }
+/* Intent/severity disclosure — minimal by default. */
+.cf-details { display: flex; flex-direction: column; gap: 10px; }
+.cf-details[hidden] { display: none; }
+.cf-disclose {
+  margin-right: auto; border: 0; background: transparent; color: var(--cf-muted);
+  font: 600 11px -apple-system, system-ui; cursor: pointer;
+  padding: 6px 6px; border-radius: 7px;
+}
+.cf-disclose:hover, .cf-disclose.on { color: #fff; background: rgba(255,255,255,0.06); }
+.cf-overlay[data-theme="light"] .cf-disclose:hover,
+.cf-overlay[data-theme="light"] .cf-disclose.on { color: #111; background: rgba(0,0,0,0.05); }
 
 /* Thread */
 .cf-thread-body {
@@ -278,7 +423,17 @@ export const STYLES = `
 }
 .cf-msg { display: flex; flex-direction: column; gap: 3px; }
 .cf-msg-meta { display: flex; align-items: center; gap: 6px; }
-.cf-avatar { font-size: 12px; }
+.cf-avatar {
+  width: 20px; height: 20px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50%; overflow: hidden;
+  font: 800 9px -apple-system, system-ui; letter-spacing: 0.02em;
+  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
+  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.3);
+}
+/* Agents read as a distinct rounded "logo" tile; humans stay round. */
+.cf-avatar-agent { border-radius: 7px; }
+.cf-avatar-img { width: 100%; height: 100%; object-fit: cover; }
 .cf-msg-name {
   font: 700 11px -apple-system, system-ui; color: var(--cf-muted);
 }