collavre 0.8.1 → 0.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0aedb88d33b98dd9c3e2d94a658e1671c88cf30b4523a82173f9bff2f797ce29
-  data.tar.gz: 0336125a76db7678bd3fc9f4ddd9d9342c9914142017eabbf0a42c15b7485022
+  metadata.gz: 82e806ce0c2a6e03029c43d817fb83a6c8114e04bf13be10b05b16fefbeb253c
+  data.tar.gz: bfa7142c80cd7868c4ad9375a7b9f96ceed0b9b35ad031a6962f92a9d655f029
 SHA512:
-  metadata.gz: d044363cf61f8a6f6beaac085592e8330fa000f251809b56bb7a4f89fa5b0147a606df80a62f3b473dca35b17de893d0226df6cf8c7ec9f8d4c8b9d0ae2dc7a6
-  data.tar.gz: 7aaf420fef891252b43ec4a968fcba35b84e3fc4c4cf07507568a9a4976fa33f3176683b409c3dc4f3c1392ac52ba3016a00d51537882f7649bbc38513d000b4
+  metadata.gz: e443416101117e0e3440f60d889f4c317fc19d59e5d3e92fdc511f1caf0fee52470e3e37b036709fbc63eea01d266c622e25ded80dc584d77c7fd0e2feed257b
+  data.tar.gz: 33e264807609298b92f8786f755bce2ef7846e653d6d5b4c7ff0eb1c267cf0273a56753d8e3758cf99e8300d14f1f6cfbde99b21e9f99e39645e44d3a0ec58e6

data/app/assets/stylesheets/collavre/actiontext.css

@@ -61,7 +61,7 @@
   padding: 0.4rem 0.5rem;
   background: var(--surface-bg);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-2);
   box-shadow: var(--shadow-3);
 }
 
@@ -208,7 +208,7 @@
   display: block;
   background: var(--color-code-bg);
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-2);
   color: var(--color-code-text);
   font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.9em;
@@ -404,7 +404,7 @@
 .lexical-attachment__caption-input {
   width: 100%;
   border: 1px solid var(--border-color);
-  border-radius: 6px;
+  border-radius: var(--radius-2);
   padding: var(--space-2) 0.6rem;
   font-size: 0.9rem;
   background: var(--surface-section);

data/app/assets/stylesheets/collavre/comments_popup.css

@@ -9,6 +9,14 @@
     max-height: 80vh;
     min-width: 200px;
     min-height: 200px;
+    background: var(--surface-bg);
+    border: var(--border-1) solid var(--color-active);
+    border-radius: var(--radius-3);
+    box-shadow: var(--shadow-3),
+                0 0 6px color-mix(in srgb, var(--color-active) 25%, transparent),
+                0 0 14px color-mix(in srgb, var(--color-active) 12%, transparent);
+    padding: 1em;
+    flex-direction: column;
     transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease,
                 right 0.25s ease, bottom 0.25s ease, border-radius 0.25s ease,
                 box-shadow 0.25s ease, padding 0.25s ease;
@@ -45,6 +53,7 @@ body.chat-fullscreen {
     align-items: center;
     justify-content: space-between;
     gap: 0.75em;
+    padding-bottom: var(--space-1);
 }
 
 .comments-popup-header h3 {
@@ -119,8 +128,7 @@ body.chat-fullscreen {
     flex-wrap: nowrap;
     align-items: center;
     gap: 0.5em;
-    padding: 0.5em 0;
-    margin-bottom: 0.5em;
+    padding: var(--space-1) 0;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none; /* Firefox */
@@ -365,7 +373,7 @@ body.chat-fullscreen {
     padding: 0.3em 0.8em;
     font-size: 0.85em;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     white-space: nowrap;
 }
 
@@ -570,7 +578,7 @@ body.chat-fullscreen {
 .comment-action-json {
     background: var(--color-section-bg);
     border: 1px solid var(--color-border);
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     margin-top: 0.4em;
     padding: 0.5em;
     white-space: pre-wrap;
@@ -588,7 +596,7 @@ body.chat-fullscreen {
 .comment-action-edit-textarea {
     width: 100%;
     border: 1px solid var(--color-border);
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     padding: 0.5em;
     font-family: var(--font-family-monospace, 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace);
     font-size: 0.9em;
@@ -657,8 +665,8 @@ body.chat-fullscreen {
 }
 
 .comment-status-label.pending-label {
-    background-color: color-mix(in srgb, orange 20%, transparent);
-    color: orange;
+    background-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
+    color: var(--color-warning);
 }
 
 .comment-action-container {
@@ -731,7 +739,7 @@ body.chat-fullscreen {
     background: var(--color-section-bg);
     color: var(--color-text);
     border: 1px solid var(--color-border);
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     padding: 0.2em 0.6em;
     font-size: 0.75em;
     opacity: 0;
@@ -753,7 +761,7 @@ body.chat-fullscreen {
     gap: 0.35em;
     background: var(--color-section-bg);
     border: 1px solid var(--color-border);
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     padding: 0.2em 0.4em;
     margin-right: 0.25em;
     margin-top: 0.2em;
@@ -784,7 +792,7 @@ body.chat-fullscreen {
 .comment-attachment-image {
     max-width: 100%;
     height: auto;
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     border: 1px solid var(--color-border);
 }
 
@@ -839,7 +847,7 @@ body.chat-fullscreen {
 }
 
 #comment-participants {
-    margin-bottom: 0.3em;
+    padding: var(--space-1) 0;
     min-height: 20px;
     display: flex;
     align-items: center;
@@ -909,7 +917,7 @@ body.chat-fullscreen {
     flex-wrap: nowrap;
     align-items: center;
     gap: 0.4em;
-    padding: 0.25em 0;
+    padding: var(--space-1) 0;
     overflow-x: auto;
     overflow-y: visible;
     scrollbar-width: none;
@@ -943,8 +951,14 @@ body.chat-fullscreen {
     box-sizing: border-box;
 }
 
+.context-chip svg,
+.context-toggle-btn svg {
+    vertical-align: middle;
+    flex-shrink: 0;
+}
+
 .context-chip:hover {
-    background: var(--color-border);
+    background: var(--surface-hover);
 }
 
 .context-chip.context-disabled {
@@ -1047,7 +1061,7 @@ body.chat-fullscreen {
 
 .context-toggle-btn.context-toggle-active {
     background: var(--color-secondary-active);
-    color: white;
+    color: var(--color-badge-text);
     border-color: var(--color-secondary-active);
 }
 
@@ -1056,8 +1070,7 @@ body.chat-fullscreen {
     flex-wrap: nowrap;
     align-items: center;
     gap: 0.5em;
-    padding: 0.5em 0;
-    margin-bottom: 0.5em;
+    padding: var(--space-1) 0;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none; /* Firefox */
@@ -1088,12 +1101,12 @@ body.chat-fullscreen {
 }
 
 .topic-tag:hover {
-    background: var(--color-border);
+    background: var(--surface-hover);
 }
 
 .topic-tag.active {
     background: var(--color-secondary-active);
-    color: white;
+    color: var(--color-badge-text);
     border-color: var(--color-secondary-active);
 }
 
@@ -1108,7 +1121,7 @@ body.chat-fullscreen {
     top: -8px;
     right: -10px;
     background-color: var(--color-danger);
-    color: white;
+    color: var(--color-badge-text);
     font-size: 0.6em;
     padding: 0.1em 0.4em;
     border-radius: 8px;
@@ -1118,7 +1131,7 @@ body.chat-fullscreen {
 /* Drag and drop styles for moving comments to topics */
 .topic-tag.drag-over {
     background-color: var(--color-active);
-    color: white;
+    color: var(--color-badge-text);
     border-color: var(--color-active);
     transform: scale(1.05);
     transition: all 0.15s ease;
@@ -1169,8 +1182,8 @@ body.chat-fullscreen {
     left: -1000px;
     padding: var(--space-2) var(--space-3);
     background-color: var(--color-active);
-    color: white;
-    border-radius: 4px;
+    color: var(--color-badge-text);
+    border-radius: var(--radius-2);
     font-size: 0.9em;
     font-weight: 500;
     white-space: nowrap;
@@ -1279,6 +1292,7 @@ body.chat-fullscreen {
 .topic-archived-toggle {
     display: inline-flex;
     align-items: center;
+    gap: 0.3em;
     padding: 0.15em var(--space-2);
     border-radius: var(--radius-3);
     font-size: var(--text-0);
@@ -1298,10 +1312,11 @@ body.chat-fullscreen {
     background: none;
     border: none;
     cursor: pointer;
-    font-size: var(--text-00);
     padding: 0 var(--space-1);
     opacity: 0.6;
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
+    color: var(--text-secondary);
 }
 .archive-topic-btn:hover,
 .unarchive-topic-btn:hover {
@@ -1349,7 +1364,7 @@ body.chat-fullscreen {
 }
 
 .selection-action-bar-btn:hover {
-    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
+    background: var(--surface-hover);
 }
 
 .selection-action-delete:hover {
@@ -1441,7 +1456,7 @@ body.chat-fullscreen {
 /* Blinking cursor inline at the end of streaming content */
 .streaming-cursor {
     animation: streaming-blink 1s infinite;
-    color: var(--color-text, #333);
+    color: var(--text-primary);
     margin-left: 1px;
     font-weight: normal;
 }
@@ -1452,11 +1467,11 @@ body.chat-fullscreen {
 }
 
 .review-hint {
-    background: var(--surface-3, #333);
-    color: var(--text-1, #fff);
-    padding: var(--space-2, 4px) var(--space-3, 8px);
-    border-radius: var(--radius-2, 4px);
-    font-size: var(--text-0, 0.75rem);
+    background: var(--surface-btn);
+    color: var(--text-on-btn);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-2);
+    font-size: var(--text-0);
     white-space: nowrap;
     z-index: var(--layer-important, 999);
     animation: review-hint-fade 3s ease-out forwards;

data/app/assets/stylesheets/collavre/creatives.css

@@ -64,7 +64,8 @@ html.creative-alignment-ready .page-title {
     background: var(--surface-section);
     border: 1px solid var(--border-color);
     padding: 0.5em;
-    box-shadow: 0 2px 8px var(--border-color);
+    box-shadow: var(--shadow-3);
+    border-radius: var(--radius-2);
     min-width: 220px;
 }
 
@@ -104,11 +105,11 @@ creative-tree-row.show-edit .creative-row {
     position: fixed;
     display: none;
     pointer-events: none;
-    background: rgba(33, 150, 243, 0.9);
+    background: color-mix(in srgb, var(--color-active) 90%, transparent);
     color: var(--text-on-badge);
     font-size: var(--text-0);
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: var(--radius-2);
     transform: translate(-50%, -170%);
     z-index: 9999;
     font-weight: var(--weight-6);
@@ -165,7 +166,8 @@ creative-tree-row.show-edit .creative-row {
 .creative-row:hover .creative-content {
     text-decoration: underline;
     text-decoration-color: var(--color-link);
-    text-decoration-thickness: 4px;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
     cursor: pointer;
 }
 
@@ -307,20 +309,23 @@ creative-tree-row.show-edit .creative-row {
 #voice-comments-btn.voice-input-active {
     background-color: var(--color-brand);
     color: var(--surface-bg);
-    border-radius: 6px;
+    border-radius: var(--radius-2);
     padding: 4px 8px;
 }
 
 .creative-toggle-btn {
     width: 16px;
     height: 16px;
-    font-size: 14px;
     margin-right: 4px;
     margin-top: 4px;
     /* Align with text */
     visibility: hidden;
     /* Hidden by default on desktop */
     /* Total width is 20px (16 + 4) */
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 
@@ -435,11 +440,18 @@ creative-tree-row:not([expanded]) .creative-toggle-btn {
     background-color: var(--border-drag-over);
 }
 
+creative-tree-row.chat-active .creative-row {
+    border: var(--border-1) solid var(--color-active);
+    border-radius: var(--radius-2);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--color-active) 25%, transparent),
+                0 0 14px color-mix(in srgb, var(--color-active) 12%, transparent);
+}
+
 .creative-row:hover,
 .creative-row.level-1:hover,
 .creative-row.level-2:hover,
 .creative-row.level-3:hover {
-    background-color: var(--border-color);
+    background-color: var(--surface-hover);
 }
 
 .creative-progress {
@@ -474,7 +486,7 @@ creative-tree-row:not([expanded]) .creative-toggle-btn {
 
 .creative-origin-link:hover,
 .creative-origin-link:focus {
-    background-color: var(--border-color);
+    background-color: var(--surface-hover);
 }
 
 .creative-origin-link-icon {
@@ -682,20 +694,24 @@ creative-tree-row:not([expanded]) .creative-toggle-btn {
 /* Archive toggle button */
 .archive-toggle-btn {
     background: none;
-    border: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-2);
     cursor: pointer;
-    font-size: var(--text-2);
     padding: var(--space-1) var(--space-2);
-    opacity: 0.5;
-    transition: opacity 0.2s var(--ease-2);
+    color: var(--text-secondary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
 }
 .archive-toggle-btn:hover {
-    opacity: 0.8;
+    background: var(--surface-input);
+    color: var(--text-primary);
 }
 .archive-toggle-btn.active {
-    opacity: 1.0;
-    background: var(--surface-input);
-    border-radius: var(--radius-2);
+    background: var(--color-active);
+    color: var(--color-badge-text);
+    border-color: var(--color-active);
 }
 
 /* Archived creative row */

data/app/assets/stylesheets/collavre/dark_mode.css

@@ -79,6 +79,35 @@ body.dark-mode {
 /* ============================================================================
  * BASE ELEMENT STYLES
  * ============================================================================ */
+@media (prefers-reduced-motion: reduce) {
+
+  /* Collapse decorative transitions to instant; state changes still
+     apply but without visible motion (hover bg, theme switch, etc.). */
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+  }
+
+  /* Disable decorative/non-essential animations entirely so that
+     elements styled with animation end up in their *final* keyframe
+     state (via forwards fill) rather than flickering.
+     Infinite animations (spinners, streaming dots) stop on their
+     current frame and become static — which is the correct reduced-
+     motion behaviour. */
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+
+  /* Keep timed-visibility elements (toasts, hints) fully visible
+     instead of letting the collapsed fade-out hide them instantly. */
+  .share-modal-message,
+  .review-hint,
+  .comment-copy-notice.visible {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+}
+
 body {
   background: var(--surface-bg);
   color: var(--text-primary);
@@ -96,6 +125,7 @@ nav {
 
 a {
   color: var(--color-link);
+  transition: color 0.15s;
 }
 
 main,
@@ -107,9 +137,27 @@ button,
 input[type="button"],
 input[type="submit"] {
   border: none;
-  border-radius: 1px;
+  border-radius: var(--radius-2);
   padding: 2px 4px;
-  transition: background 0.3s, color 0.3s;
+  transition: background 0.15s, color 0.15s, transform 0.1s;
+}
+
+/* --- Global active press feedback --- */
+button:active:not(:disabled),
+input[type="button"]:active:not(:disabled),
+input[type="submit"]:active:not(:disabled),
+.btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+/* --- Global focus-visible ring --- */
+button:focus-visible,
+input[type="button"]:focus-visible,
+input[type="submit"]:focus-visible,
+a:focus-visible,
+.btn:focus-visible {
+  outline: 2px solid var(--color-active);
+  outline-offset: 2px;
 }
 
 /* ============================================================================
@@ -127,7 +175,7 @@ input[type="submit"] {
   font-weight: 500;
   line-height: 1.4;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-2, 4px);
+  border-radius: var(--radius-2);
   background: var(--surface-btn);
   color: var(--text-on-btn);
   cursor: pointer;
@@ -249,3 +297,28 @@ input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
 .inline-block {
   display: inline-block;
 }
+
+/* --- Dark mode: stronger glow for visibility on dark backgrounds --- */
+body.dark-mode #comments-popup {
+  box-shadow: var(--shadow-3),
+              0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent),
+              0 0 20px color-mix(in srgb, var(--color-active) 25%, transparent);
+}
+
+body.dark-mode creative-tree-row.chat-active .creative-row {
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent),
+              0 0 20px color-mix(in srgb, var(--color-active) 25%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode):not(.dark-mode) #comments-popup {
+    box-shadow: var(--shadow-3),
+                0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent),
+                0 0 20px color-mix(in srgb, var(--color-active) 25%, transparent);
+  }
+
+  body:not(.light-mode):not(.dark-mode) creative-tree-row.chat-active .creative-row {
+    box-shadow: 0 0 8px color-mix(in srgb, var(--color-active) 45%, transparent),
+                0 0 20px color-mix(in srgb, var(--color-active) 25%, transparent);
+  }
+}

data/app/assets/stylesheets/collavre/design_tokens.css

@@ -194,6 +194,9 @@
   --color-code-bg: #f6f8fa;          /* code block background */
   --color-code-text: #1f2328;        /* code block text */
 
+  /* -- Surfaces (hover) -- */
+  --surface-hover: rgba(0, 0, 0, 0.06); /* hover background overlay */
+
   /* -- Borders & Dividers -- */
   --border-color: #e0e0e0;           /* default borders */
   --border-drag-over: #e0e0e0;       /* drag target highlight */
@@ -245,7 +248,7 @@ body.dark-mode {
   --text-input: #eaeaea;
 
   /* -- Interactive -- */
-  --color-link: #185ABC;
+  --color-link: #6EA8FE;
   --color-brand: oklch(50% 0.4 145);
   --color-active: #6a9eff;
   --color-badge-bg: red;
@@ -255,6 +258,9 @@ body.dark-mode {
   --color-code-bg: #2d2d2d;
   --color-code-text: #e0e0e0;
 
+  /* -- Surfaces (hover) -- */
+  --surface-hover: rgba(255, 255, 255, 0.08);
+
   /* -- Borders & Dividers -- */
   --border-color: #333333;
   --border-drag-over: #383a40;
@@ -292,7 +298,7 @@ body.dark-mode {
     --text-on-badge: white;
     --text-input: #eaeaea;
 
-    --color-link: #185ABC;
+    --color-link: #6EA8FE;
     --color-brand: oklch(50% 0.4 145);
     --color-active: #6a9eff;
     --color-badge-bg: red;
@@ -302,6 +308,8 @@ body.dark-mode {
     --color-code-bg: #2d2d2d;
     --color-code-text: #e0e0e0;
 
+    --surface-hover: rgba(255, 255, 255, 0.08);
+
     --border-color: #333333;
     --border-drag-over: #383a40;
     --border-drag-edge: #777777;

data/app/assets/stylesheets/collavre/mention_menu.css

@@ -5,7 +5,7 @@
   background: var(--surface-section);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadow-2);
-  border-radius: 6px;
+  border-radius: var(--radius-2);
   padding: 0.35em;
   max-width: min(420px, 90vw);
 }
@@ -38,7 +38,7 @@
 .mention-item.active,
 .common-popup-item:hover,
 .common-popup-item.active {
-  background: var(--border-drag-over);
+  background: var(--surface-hover);
 }
 
 .common-popup-item {