collavre 0.11.1 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 827b436efe65b08a5c9e523f49835e24a2bf137af670dd00d0892627f46baace
-  data.tar.gz: a29b7075c71eeee5da6a674ea9e7e8943cd013a060f278f875bcd61b169897da
+  metadata.gz: bfb336e9ba2c33ae2bebe02cb641ca55078e8a9e7b7534a2296fb9fe344e8ab8
+  data.tar.gz: 92446cc1f6e94e96c85bb3d623675671b3a1c918dbe18f365ea4cadcf9844a8f
 SHA512:
-  metadata.gz: 5dfa7f4059f316c5e6193129ad37266f1bd17d0ad68a5d8558f695c5f313de043e7aec78a76343708500328ed055902051df8dd0feb670f29193ee5e9d4a566a
-  data.tar.gz: 4bd468cdc42fa97398fca215d242b74138ebdf5afd1898361d30b691b789caa7f920da6c5942f22c4dd4935714b78cab4b2cfcb147a4b8c0424690d76fe6df87
+  metadata.gz: ef40b534cba46f348398f4097be26d8398dade4008cbef542fb8faaccebe5a7bc2647ba3666e5020cf1e32d29e8c9e4d37d877036c6b443c67247735221e68c0
+  data.tar.gz: 5dd19bdf5053beea83aeba18edc324df6fc86f429abf4f3e2a160d4728cc4c35a638adaace885d87855d0e5f71c8c578aa8280877126fada04b2e9ec29d0ca3b

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

@@ -39,6 +39,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
+  height: 30px;
 }
 
 .lexical-toolbar-color__swatch {
@@ -77,29 +78,35 @@
 
 .lexical-toolbar-btn--small {
   min-width: auto;
-  padding: 0.2rem 0.4rem;
-  font-size: var(--text-0);
+  height: 24px;
+  padding: 0 var(--space-1);
+  font-size: var(--text-00);
 }
 
 .lexical-toolbar-btn {
   appearance: none;
-  background: var(--surface-btn);
+  background: transparent;
   border: 1px solid var(--border-color);
-  border-radius: var(--radius-1);
-  color: var(--text-on-btn);
+  border-radius: var(--radius-2);
+  color: var(--text-secondary);
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: var(--text-0);
   font-weight: var(--weight-6);
-  line-height: 1.2;
-  min-width: var(--space-7);
-  padding: var(--space-1) 0.4rem;
-  text-align: center;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  line-height: 1;
+  height: 30px;
+  min-width: 30px;
+  padding: 0 var(--space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s var(--ease-out-2), color 0.15s var(--ease-out-2), border-color 0.15s var(--ease-out-2);
 }
 
 .lexical-toolbar-btn:hover,
 .lexical-toolbar-btn:focus-visible {
-  filter: brightness(var(--hover-brightness, 0.95));
+  background: var(--surface-hover);
+  color: var(--text-primary);
+  border-color: var(--text-muted);
   outline: none;
 }
 
@@ -109,6 +116,13 @@
   color: var(--color-accent-text);
 }
 
+.lexical-toolbar-btn:disabled {
+  opacity: 0.4;
+  color: var(--text-muted);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .lexical-toolbar-separator {
   align-self: stretch;
   border-left: 1px solid var(--border-color);

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

@@ -0,0 +1,208 @@
+/*
+ * Code Syntax Highlighting Theme
+ *
+ * Uses Collavre design tokens (--color-code-bg, --color-code-text, --font-mono).
+ * Syntax color tokens defined as CSS variables — overridden per theme context.
+ * Based on GitHub-style highlighting.
+ */
+
+/* ============================================================================
+ * SYNTAX COLOR TOKENS (light mode defaults)
+ * ============================================================================ */
+:root {
+  --syntax-comment: #6a737d;
+  --syntax-keyword: #d73a49;
+  --syntax-string: #032f62;
+  --syntax-number: #005cc5;
+  --syntax-builtin: #6f42c1;
+  --syntax-title: #6f42c1;
+  --syntax-attr: #005cc5;
+  --syntax-variable: #e36209;
+  --syntax-regexp: #032f62;
+  --syntax-tag: #22863a;
+  --syntax-name: #22863a;
+  --syntax-selector: #6f42c1;
+  --syntax-meta: #6a737d;
+  --syntax-deletion-text: #b31d28;
+  --syntax-deletion-bg: #ffeef0;
+  --syntax-addition-text: #22863a;
+  --syntax-addition-bg: #f0fff4;
+}
+
+/* ============================================================================
+ * DARK MODE SYNTAX TOKENS
+ * ============================================================================ */
+body.dark-mode {
+  --syntax-comment: #8b949e;
+  --syntax-keyword: #ff7b72;
+  --syntax-string: #a5d6ff;
+  --syntax-number: #79c0ff;
+  --syntax-builtin: #d2a8ff;
+  --syntax-title: #d2a8ff;
+  --syntax-attr: #79c0ff;
+  --syntax-variable: #ffa657;
+  --syntax-regexp: #a5d6ff;
+  --syntax-tag: #7ee787;
+  --syntax-name: #7ee787;
+  --syntax-selector: #d2a8ff;
+  --syntax-meta: #8b949e;
+  --syntax-deletion-text: #ffa198;
+  --syntax-deletion-bg: rgba(248, 81, 73, 0.15);
+  --syntax-addition-text: #7ee787;
+  --syntax-addition-bg: rgba(63, 185, 80, 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode):not(.dark-mode) {
+    --syntax-comment: #8b949e;
+    --syntax-keyword: #ff7b72;
+    --syntax-string: #a5d6ff;
+    --syntax-number: #79c0ff;
+    --syntax-builtin: #d2a8ff;
+    --syntax-title: #d2a8ff;
+    --syntax-attr: #79c0ff;
+    --syntax-variable: #ffa657;
+    --syntax-regexp: #a5d6ff;
+    --syntax-tag: #7ee787;
+    --syntax-name: #7ee787;
+    --syntax-selector: #d2a8ff;
+    --syntax-meta: #8b949e;
+    --syntax-deletion-text: #ffa198;
+    --syntax-deletion-bg: rgba(248, 81, 73, 0.15);
+    --syntax-addition-text: #7ee787;
+    --syntax-addition-bg: rgba(63, 185, 80, 0.15);
+  }
+}
+
+/* ============================================================================
+ * CODE BLOCK CONTAINER
+ * ============================================================================ */
+.comment-content pre {
+  background: var(--color-code-bg);
+  color: var(--color-code-text);
+  border: var(--border-1) solid var(--border-color);
+  border-radius: var(--radius-2);
+  padding: var(--space-2) var(--space-3);
+  margin: var(--space-2) 0;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: var(--text-0);
+  line-height: var(--leading-3);
+}
+
+.comment-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Inline code */
+.comment-content code {
+  background: var(--color-code-bg);
+  color: var(--color-code-text);
+  border-radius: var(--radius-1);
+  padding: 0.15em 0.35em;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+/* ============================================================================
+ * SYNTAX HIGHLIGHTING RULES (token-based, theme-agnostic)
+ * ============================================================================ */
+.comment-content .hljs-comment,
+.comment-content .hljs-quote {
+  color: var(--syntax-comment);
+  font-style: italic;
+}
+
+.comment-content .hljs-keyword,
+.comment-content .hljs-selector-tag,
+.comment-content .hljs-type {
+  color: var(--syntax-keyword);
+}
+
+.comment-content .hljs-string {
+  color: var(--syntax-string);
+}
+
+.comment-content .hljs-number,
+.comment-content .hljs-literal {
+  color: var(--syntax-number);
+}
+
+.comment-content .hljs-built_in,
+.comment-content .hljs-builtin-name {
+  color: var(--syntax-builtin);
+}
+
+.comment-content .hljs-title,
+.comment-content .hljs-title.function_ {
+  color: var(--syntax-title);
+}
+
+.comment-content .hljs-attr,
+.comment-content .hljs-attribute {
+  color: var(--syntax-attr);
+}
+
+.comment-content .hljs-variable,
+.comment-content .hljs-template-variable {
+  color: var(--syntax-variable);
+}
+
+.comment-content .hljs-params {
+  color: var(--color-code-text);
+}
+
+.comment-content .hljs-regexp {
+  color: var(--syntax-regexp);
+}
+
+.comment-content .hljs-tag {
+  color: var(--syntax-tag);
+}
+
+.comment-content .hljs-name {
+  color: var(--syntax-name);
+}
+
+.comment-content .hljs-selector-class,
+.comment-content .hljs-selector-id {
+  color: var(--syntax-selector);
+}
+
+.comment-content .hljs-selector-attr,
+.comment-content .hljs-selector-pseudo {
+  color: var(--syntax-attr);
+}
+
+.comment-content .hljs-symbol,
+.comment-content .hljs-bullet {
+  color: var(--syntax-number);
+}
+
+.comment-content .hljs-meta {
+  color: var(--syntax-meta);
+}
+
+.comment-content .hljs-deletion {
+  color: var(--syntax-deletion-text);
+  background: var(--syntax-deletion-bg);
+}
+
+.comment-content .hljs-addition {
+  color: var(--syntax-addition-text);
+  background: var(--syntax-addition-bg);
+}
+
+.comment-content .hljs-emphasis {
+  font-style: italic;
+}
+
+.comment-content .hljs-strong {
+  font-weight: var(--weight-7);
+}

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

@@ -0,0 +1,26 @@
+.comment-snapshot-restore {
+  margin-top: var(--space-2);
+}
+
+.restore-snapshot-btn {
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-1);
+  cursor: pointer;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  color: var(--text-muted);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.restore-snapshot-btn:hover:not(:disabled) {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+  border-color: var(--color-accent-border);
+}
+
+.restore-snapshot-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}

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

@@ -52,13 +52,126 @@ body.chat-fullscreen {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.75em;
+    gap: var(--space-1);
     padding-bottom: var(--space-1);
 }
 
 .comments-popup-header h3 {
     margin: 0;
     line-height: 1.3;
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+}
+
+/* Chat navigation back/forward buttons */
+.chat-nav-buttons {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex-shrink: 0;
+    position: relative;
+}
+
+.chat-nav-btn {
+    background: none;
+    border: none;
+    color: var(--color-text);
+    cursor: pointer;
+    padding: var(--space-1);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-1);
+    transition: opacity 0.15s var(--ease-out-2), background-color 0.15s var(--ease-out-2);
+}
+
+.chat-nav-btn:hover:not(:disabled) {
+    background-color: var(--surface-hover);
+}
+
+.chat-nav-btn:disabled {
+    opacity: 0.25;
+    cursor: default;
+    pointer-events: none;
+}
+
+.chat-nav-icon {
+    width: var(--space-px-4);
+    height: var(--space-px-4);
+    stroke: currentColor;
+    fill: none;
+}
+
+/* Recent chats dropdown */
+.chat-nav-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 200px;
+    max-width: 300px;
+    max-height: 320px;
+    overflow-y: auto;
+    background: var(--surface-section);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-3);
+    z-index: var(--layer-modal);
+    padding: var(--space-1) 0;
+}
+
+.chat-nav-dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0;
+    background: none;
+    border: none;
+    font-size: var(--text-1);
+    color: var(--color-text);
+    line-height: 1.4;
+}
+
+.chat-nav-dropdown-item:hover {
+    background-color: var(--surface-hover);
+}
+
+.chat-nav-dropdown-item.current {
+    font-weight: var(--weight-7);
+}
+
+.chat-nav-dropdown-label {
+    flex: 1;
+    min-width: 0;
+    padding: var(--space-1) var(--space-3);
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.chat-nav-dropdown-remove {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: var(--color-muted);
+    cursor: pointer;
+    font-size: var(--text-2);
+    padding: var(--space-1) var(--space-2);
+    line-height: 1;
+    transition: color 0.15s var(--ease-out-2);
+}
+
+.chat-nav-dropdown-remove:hover {
+    color: var(--color-text);
 }
 
 .comments-popup-actions {
@@ -187,6 +300,8 @@ body.chat-fullscreen {
 .comment-item.selected-for-move {
     background-color: var(--color-section-bg);
     border-color: var(--color-border);
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .comment-select {
@@ -208,7 +323,6 @@ body.chat-fullscreen {
 .comment-content pre {
     white-space: pre-wrap;
     word-break: break-word;
-    overflow-x: auto;
 }
 
 .comment-content pre code {
@@ -957,7 +1071,8 @@ body.chat-fullscreen {
 }
 
 .context-chip svg,
-.context-toggle-btn svg {
+.context-toggle-btn svg,
+.drop-trigger-toggle-btn svg {
     vertical-align: middle;
     flex-shrink: 0;
 }
@@ -1076,6 +1191,34 @@ body.chat-fullscreen {
     border-color: var(--color-secondary-active);
 }
 
+/* Drop trigger toggle button */
+.drop-trigger-toggle-btn {
+    font-size: 0.75em;
+    padding: 0.15em 0.4em;
+    border-radius: 8px;
+    background: none;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.drop-trigger-toggle-btn:hover {
+    background: var(--color-secondary-background);
+}
+
+.drop-trigger-toggle-btn.drop-trigger-active {
+    background: color-mix(in srgb, var(--color-warning) 20%, transparent);
+    color: var(--color-warning);
+    border-color: var(--color-warning);
+}
+
+.drop-trigger-toggle-btn.drop-trigger-active svg {
+    stroke: var(--color-warning);
+    fill: var(--color-warning);
+    fill-opacity: 0.2;
+}
+
 .comment-topics-list {
     display: flex;
     flex-wrap: nowrap;
@@ -1111,6 +1254,13 @@ body.chat-fullscreen {
     box-sizing: border-box;
 }
 
+.topic-agent-avatar-wrapper {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    vertical-align: middle;
+}
+
 .topic-agent-avatar {
     width: 16px;
     height: 16px;
@@ -1119,6 +1269,10 @@ body.chat-fullscreen {
     flex-shrink: 0;
 }
 
+.topic-agent-avatar-wrapper .avatar-initial {
+    font-size: var(--text-00);
+}
+
 .ai-agent-draggable {
     cursor: grab;
 }
@@ -1452,6 +1606,7 @@ body.chat-fullscreen {
     margin-top: var(--space-1);
 }
 
+/* Hide drag hint on touch devices (no touch drag-and-drop) */
 @media (pointer: coarse) {
     .selection-action-bar-hint.no-touch {
         display: none;

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

@@ -142,35 +142,12 @@ html.creative-alignment-ready .page-title {
 }
 
 /* === Overflow popup menu — GNB style === */
+/* #creative-overflow-menu inherits base styles from .popup-menu in popup.css */
 #creative-overflow-menu {
     min-width: 200px;
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-3);
-    box-shadow: var(--shadow-2);
-    padding: var(--space-1);
-    background: var(--surface-section);
 }
 
-#creative-overflow-menu .popup-menu-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    width: 100%;
-    text-align: left;
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-2);
-    border: none;
-    background: none;
-    color: var(--text-primary);
-    font-size: var(--text-1);
-    cursor: pointer;
-    transition: background 0.15s var(--ease-out-2);
-    white-space: nowrap;
-}
-
-#creative-overflow-menu .popup-menu-item:hover {
-    background: var(--surface-hover);
-}
+/* popup-menu-item base styles are now in popup.css */
 
 #creative-overflow-menu .popup-menu-item.active {
     background: color-mix(in srgb, var(--color-active) 15%, transparent);
@@ -912,3 +889,85 @@ creative-tree-row[archived] .creative-row {
     border-color: var(--color-accent-border);
     background-color: var(--surface-input);
 }
+
+/* --- Creative Presence Avatars --- */
+.creative-presence-avatars {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: var(--space-2, 8px);
+    vertical-align: middle;
+}
+
+.creative-presence-user {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.creative-presence-user .avatar {
+    border: 2px solid var(--color-active, #4caf50);
+    width: 20px;
+    height: 20px;
+}
+
+/* --- Editing Conflict Indicator --- */
+creative-tree-row.is-being-edited {
+    position: relative;
+}
+
+creative-tree-row.is-being-edited .creative-tree {
+    border-left: 3px solid var(--color-warning, #ff9800);
+}
+
+.creative-editing-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 4px);
+    font-size: var(--text-xs, 0.75rem);
+    color: var(--color-warning, #ff9800);
+    margin-left: var(--space-2, 8px);
+    white-space: nowrap;
+    animation: editing-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes editing-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* Editing presence avatars */
+.creative-editing-avatars {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1, 2px);
+    margin-left: var(--space-1, 4px);
+}
+
+.creative-editing-avatar-img {
+    border-radius: var(--radius-round, 50%);
+    border: 2px solid var(--color-accent, #4a9eff);
+    object-fit: cover;
+}
+
+.creative-editing-avatar-initials {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-round, 50%);
+    background: var(--color-accent, #4a9eff);
+    color: var(--color-on-accent, white);
+    font-size: var(--text-xs, 11px);
+    font-weight: var(--weight-semibold, 600);
+    border: 2px solid var(--color-accent, #4a9eff);
+}
+
+/* Wrapper for progressHtml so DOM can be synced back to Lit state
+   after Turbo Streams mutations (e.g. badge count updates).
+   display:contents ensures no layout impact. */
+.creative-progress-area {
+    display: contents;
+}