@cfbender/cesium 0.6.2 → 0.7.1

package/src/render/theme.ts

@@ -972,14 +972,463 @@ textarea.cs-text { font-family: var(--mono); }
 
 /* session-ended banner */
 .cs-banner-ended {
-  position: sticky;
+  max-width: var(--content-width, 70ch);
+  margin: 16px auto 24px;
+  padding: 0.5rem 0.875rem;
+  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
+  border-radius: 8px;
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+/* ─── annotate affordances (.cs-anchor-*) ─────────────────────────────────── */
+
+/* annotatable blocks establish a positioning context for the absolute buttons */
+[data-cesium-anchor] { position: relative; }
+
+/* affordance base — shared styles for both block and line buttons */
+.cs-anchor-affordance {
+  cursor: pointer;
+  border: 1px solid var(--rule);
+  background: var(--surface);
+  padding: 4px 8px;
+  line-height: 1;
+  color: var(--muted);
+  transition: color 120ms, background 120ms, opacity 120ms, border-color 120ms;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-family: inherit;
+  font-weight: 500;
+  gap: 4px;
+}
+.cs-anchor-affordance:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+}
+/* show hover rule still needed for line affordances */
+[data-cesium-anchor]:hover > .cs-anchor-affordance-line,
+[data-cesium-anchor]:focus-within > .cs-anchor-affordance-line {
+  visibility: visible;
+}
+
+/* line affordance — gutter icon, hidden until line hover */
+.cs-anchor-affordance-line {
+  display: inline-flex;
+  position: absolute;
+  left: -28px;
   top: 0;
-  padding: 0.75rem 1.25rem;
-  background: color-mix(in srgb, var(--accent) 20%, var(--bg));
-  border-bottom: 1.5px solid var(--accent);
-  text-align: center;
+  visibility: hidden;
+  padding: 2px 4px;
+  min-width: 20px;
+  min-height: 20px;
+  border-radius: 4px;
+}
+
+/* block affordance — always-visible "Comment" button, top-right corner */
+.cs-anchor-affordance-block {
+  display: inline-flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 36px;
+  min-height: 28px;
+  z-index: 1;
+}
+
+/* ─── annotate comment popup (.cs-comment-popup) ───────────────────────────── */
+
+.cs-comment-popup {
+  position: absolute;
+  z-index: 100;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  background: var(--surface);
+  border: 1.5px solid var(--rule);
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 18%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cs-comment-popup-quote {
+  font-size: 0.85rem;
+  color: var(--muted);
+  font-style: italic;
+  border-left: 3px solid var(--rule);
+  padding: 4px 10px;
+  margin: 0;
+  white-space: pre-wrap;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+}
+.cs-comment-input {
+  display: block;
+  width: 100%;
+  min-height: 80px;
+  padding: 0.625rem 0.875rem;
+  background: var(--surface-2);
+  border: 1.5px solid var(--rule);
+  border-radius: 8px;
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  resize: vertical;
+  transition: border-color 120ms;
+}
+.cs-comment-input:focus { border-color: var(--accent); outline: none; }
+.cs-comment-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.cs-comment-save {
+  padding: 0.45rem 1.1rem;
+  background: var(--accent);
+  color: var(--bg);
+  border: 1.5px solid var(--accent);
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 120ms;
+}
+.cs-comment-save:hover:not(:disabled) { opacity: 0.85; }
+.cs-comment-save:disabled { opacity: 0.4; cursor: not-allowed; }
+.cs-comment-cancel {
+  padding: 0.45rem 1rem;
+  background: var(--surface-2);
+  color: var(--muted);
+  border: 1.5px solid var(--rule);
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 120ms, border-color 120ms;
+}
+.cs-comment-cancel:hover:not(:disabled) { opacity: 0.85; border-color: var(--muted); }
+.cs-comment-cancel:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ─── comment rail (.cs-comment-rail) ─────────────────────────────────────── */
+
+/* Body is the absolute-positioning context for the rail */
+body { position: relative; }
+
+.cs-comment-rail {
+  position: absolute;
+  right: 24px;
+  top: 0;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  z-index: 50;
+}
+/* When annotate is active and viewport has room for page + rail side-by-side,
+   shift .page leftward so its right edge (and the .cs-anchor-affordance-block
+   button parked at right: 8px of each annotatable block) does not slide under
+   the rail. Required viewport width: 1120 (page) + 24 (gap) + 280 (rail) +
+   24 (right gutter) = 1448px. */
+@media (min-width: 1448px) {
+  body.cs-annotate-active .page,
+  body:has(.cs-annotate-scaffold) .page {
+    margin-right: 328px; /* rail width (280) + outer gutter (24) + inner gap (24) */
+    margin-left: auto;
+  }
+}
+/* Below 1448px, fall back to a static rail below content. The previous
+   breakpoint at 900px left a wide intermediate zone where the absolute rail
+   overlapped the right edge of .page and covered the per-block Comment button. */
+@media (max-width: 1447px) {
+  .cs-comment-rail {
+    position: static;
+    width: 100%;
+    max-height: none;
+    margin-top: 24px;
+  }
+  /* In static-rail mode, bubbles flow naturally; positionBubbles() sets
+     top: <px> which we override since bubbles should stack normally. */
+  .cs-comment-rail .cs-comment-bubble {
+    position: static;
+    margin-bottom: 12px;
+  }
+  .cs-comment-rail .cs-comment-bubble::before {
+    display: none;
+  }
+}
+.cs-comment-bubble {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1.5px solid var(--rule);
+  border-radius: 10px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  transition: border-color 120ms;
+}
+/* connector pseudo-element: dotted line from bubble leading edge leftward */
+.cs-comment-bubble::before {
+  content: "";
+  position: absolute;
+  top: 14px;
+  left: -24px;
+  width: 24px;
+  border-top: 1px dotted var(--rule);
+  opacity: 0;
+  transition: opacity 120ms;
+}
+.cs-comment-bubble:hover::before,
+.cs-comment-bubble-active::before {
+  opacity: 1;
+}
+.cs-comment-bubble:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
+.cs-comment-bubble-active {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
+}
+/* anchor highlight when its bubble is active */
+.cs-anchor-active {
+  background-color: color-mix(in srgb, var(--accent) 8%, transparent) !important;
+  transition: background-color 120ms;
+}
+.cs-comment-bubble-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+.cs-comment-anchor-label {
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cs-comment-delete {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1.5px solid transparent;
+  background: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 120ms, background 120ms, border-color 120ms;
+  padding: 0;
+  line-height: 1;
+}
+.cs-comment-delete:hover {
+  color: #c93b3b;
+  background: color-mix(in srgb, #c93b3b 10%, transparent);
+  border-color: #c93b3b;
+}
+.cs-comment-text {
+  font-size: 0.9rem;
+  color: var(--ink);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.cs-comment-bubble-quote {
+  font-size: 0.8rem;
+  color: var(--muted);
+  font-style: italic;
+  border-left: 2px solid var(--rule);
+  padding: 2px 8px;
+  margin: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+/* ─── floating selection menu (.cs-selection-menu) ───────────────────────── */
+
+.cs-selection-menu {
+  position: fixed;
+  z-index: 100;
+  background: var(--surface);
+  border: 1.5px solid var(--rule);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 18%, transparent);
+  pointer-events: none;
+}
+.cs-selection-comment-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+  color: var(--ink-soft);
+  font-family: inherit;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background 120ms, border-color 120ms, color 120ms;
+  min-width: 36px;
+  min-height: 32px;
+  white-space: nowrap;
+}
+.cs-selection-comment-btn:hover {
+  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ─── verdict footer (.cs-verdict-footer) ─────────────────────────────────── */
+
+/* extra body padding when annotate scaffold is present, so footer doesn't
+   cover content. Fallback class .cs-annotate-active added by client JS. */
+body:has(.cs-annotate-scaffold),
+body.cs-annotate-active {
+  padding-bottom: 80px;
+}
+.cs-verdict-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: var(--bg);
+  border-top: 1.5px solid var(--rule);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 clamp(16px, 4vw, 48px);
+  z-index: 60;
+  gap: 12px;
+}
+.cs-comment-count {
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.cs-verdict-btn {
+  padding: 0.5rem 1.2rem;
+  border-radius: 8px;
+  border: 1.5px solid var(--rule);
+  background: var(--surface);
+  color: var(--ink);
+  font-family: inherit;
+  font-size: 0.9rem;
   font-weight: 600;
-  z-index: 10;
+  cursor: pointer;
+  transition: opacity 120ms, border-color 120ms, background 120ms, color 120ms;
+  min-width: 36px;
+  min-height: 36px;
+}
+.cs-verdict-btn:hover:not(:disabled) { opacity: 0.85; }
+.cs-verdict-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+.cs-verdict-approve {
+  background: color-mix(in srgb, var(--olive) 16%, var(--surface));
+  border-color: var(--olive);
+  color: var(--olive);
+}
+.cs-verdict-approve:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--olive) 28%, var(--surface));
+}
+.cs-verdict-request_changes {
+  background: color-mix(in srgb, #c93b3b 10%, var(--surface));
+  border-color: #c93b3b;
+  color: #c93b3b;
+}
+.cs-verdict-request_changes:hover:not(:disabled) {
+  background: color-mix(in srgb, #c93b3b 20%, var(--surface));
+}
+.cs-verdict-comment {
+  background: var(--surface-2);
+  border-color: var(--rule);
+  color: var(--ink-soft);
+}
+.cs-verdict-comment:hover:not(:disabled) {
+  border-color: var(--muted);
+}
+
+/* ─── frozen verdict pill ──────────────────────────────────────────────────── */
+.cs-verdict-pill {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.6rem;
+  padding: 0.55rem 0.9rem;
+  margin: 16px 0 24px;
+  border: 1.5px solid var(--rule);
+  border-radius: 999px;
+  font-size: 0.9rem;
+  background: var(--surface);
+}
+.cs-verdict-pill .eyebrow {
+  /* matches existing .eyebrow tokens */
+}
+.cs-verdict-pill time {
+  color: var(--muted);
+  font-size: 0.85em;
+  font-family: var(--mono);
+}
+
+/* per-verdict variant colors — borrow from existing .cs-verdict-approve etc. */
+.cs-verdict-pill-approve {
+  border-color: color-mix(in srgb, var(--accent) 60%, var(--rule));
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
+}
+.cs-verdict-pill-request_changes {
+  border-color: color-mix(in srgb, #c93b3b 60%, var(--rule));
+  background: color-mix(in srgb, #c93b3b 8%, var(--surface));
+}
+.cs-verdict-pill-comment {
+  border-color: var(--rule);
+  background: var(--surface);
+}
+
+/* ─── frozen-state suppression ─────────────────────────────────────────────── */
+/* hide all interactive affordances once the scaffold is closed */
+[data-cesium-status="complete"] .cs-anchor-affordance,
+[data-cesium-status="complete"] .cs-verdict-footer,
+[data-cesium-status="complete"] .cs-comment-delete {
+  display: none !important;
+}
+
+/* remove the bottom padding reserved for the verdict footer once it's hidden */
+body:has([data-cesium-annotate-scaffold][data-cesium-status="complete"]) {
+  padding-bottom: 0;
+}
+
+/* ─── banner for annotate offline mode ────────────────────────────────────── */
+.cs-banner-offline {
+  max-width: var(--content-width, 70ch);
+  margin: 16px auto 24px;
+  padding: 0.5rem 0.875rem;
+  background: color-mix(in srgb, var(--muted) 8%, var(--bg));
+  border-radius: 8px;
+  text-align: left;
+  font-size: 0.9rem;
+  color: var(--ink-soft);
 }
 
 /* diff block */