collavre 0.12.3 → 0.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 61eb7c1c09136cc7e5e15121a76f89f27da2232fe9202a3d909488fe0df5045e
-  data.tar.gz: b2fa13c57e9394a2d9736361c2bb13f62dd5122fde785a8c885ab7ae88e84dd2
+  metadata.gz: e56759c8d6833552a9d5e49b19745aca7d0a58d56ad3c3a7e6d502ea54d6b156
+  data.tar.gz: 37a2481e6fc5abc1077167d481abb51b118f256de05c704cdd64381eb090562a
 SHA512:
-  metadata.gz: 3a0a984f9b5074aefd2f95819c28df6421445bb26a39ae0cf69a395df1b72334037a0917cc3790b164beb29d95998dcf51fb3958f8cd8b3b5832a646a3ba9dc6
-  data.tar.gz: 4a1552462be73e3aeb0deba68260da717a101368130bc984a82ebff2bf78e6ec46dc363332632f976cb82535d083d279bcd33a5b208116e90c0ecb0358ae1362
+  metadata.gz: 9261164e029e28e9303f30879740f5dbd3ccbb6779b0767cd8488920e56f0037f63159fcdf64bd12dbb7788a22f5e1718fc468f616a02f59553a67713dfa422c
+  data.tar.gz: 5856204cfe3ff27016d1e0f5a54f3de43cf839911fae1dba656200679c941c837b4f30ded9e9f94153ecea2972c8797a0554f81c58df27123f1dc0d66ed7b30a

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

@@ -279,15 +279,51 @@
 }
 
 /* stylelint-disable color-no-hex -- syntax highlight theme colors are intentionally hardcoded */
+:root {
+  --lexical-token-comment: #6a737d;
+  --lexical-token-punctuation: #393a34;
+  --lexical-token-property: #b31d28;
+  --lexical-token-string: #1a7f37;
+  --lexical-token-operator: #9a6e3a;
+  --lexical-token-keyword: #0550ae;
+  --lexical-token-function: #bc4c00;
+  --lexical-token-regex: #1a7f37;
+}
+
+body.dark-mode {
+  --lexical-token-comment: #8b949e;
+  --lexical-token-punctuation: #c9d1d9;
+  --lexical-token-property: #ff7b72;
+  --lexical-token-string: #7ee787;
+  --lexical-token-operator: #ffa657;
+  --lexical-token-keyword: #79c0ff;
+  --lexical-token-function: #d2a8ff;
+  --lexical-token-regex: #7ee787;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode):not(.dark-mode) {
+    --lexical-token-comment: #8b949e;
+    --lexical-token-punctuation: #c9d1d9;
+    --lexical-token-property: #ff7b72;
+    --lexical-token-string: #7ee787;
+    --lexical-token-operator: #ffa657;
+    --lexical-token-keyword: #79c0ff;
+    --lexical-token-function: #d2a8ff;
+    --lexical-token-regex: #7ee787;
+  }
+}
+/* stylelint-enable color-no-hex */
+
 .lexical-token-comment,
 .lexical-token-prolog,
 .lexical-token-doctype,
 .lexical-token-cdata {
-  color: #6a737d;
+  color: var(--lexical-token-comment);
 }
 
 .lexical-token-punctuation {
-  color: #393a34;
+  color: var(--lexical-token-punctuation);
 }
 
 .lexical-token-property,
@@ -297,7 +333,7 @@
 .lexical-token-deleted,
 .lexical-token-boolean,
 .lexical-token-number {
-  color: #b31d28;
+  color: var(--lexical-token-property);
 }
 
 .lexical-token-selector,
@@ -306,14 +342,14 @@
 .lexical-token-char,
 .lexical-token-builtin,
 .lexical-token-inserted {
-  color: #1a7f37;
+  color: var(--lexical-token-string);
 }
 
 .lexical-token-operator,
 .lexical-token-entity,
 .lexical-token-url,
 .lexical-token-variable {
-  color: #9a6e3a;
+  color: var(--lexical-token-operator);
 }
 
 .lexical-token-atrule,
@@ -321,16 +357,16 @@
 .lexical-token-class,
 .lexical-token-classname,
 .lexical-token-namespace {
-  color: #0550ae;
+  color: var(--lexical-token-keyword);
 }
 
 .lexical-token-function,
 .lexical-token-important {
-  color: #bc4c00;
+  color: var(--lexical-token-function);
 }
 
 .lexical-token-regex {
-  color: #1a7f37;
+  color: var(--lexical-token-regex);
 }
 
 .lexical-token-tag,
@@ -338,7 +374,6 @@
 .lexical-token-keyword {
   font-weight: var(--weight-6);
 }
-/* stylelint-enable color-no-hex */
 
 .lexical-attachment {
   position: relative;
@@ -626,3 +661,62 @@
   flex-basis: 50%;
   max-width: 50%;
 }
+
+/* ── Lexical Image Resizer ── */
+
+.lexical-image-container {
+  position: relative;
+  display: inline-block;
+  cursor: default;
+  user-select: none;
+  line-height: 0;
+}
+
+.lexical-image-container img {
+  display: block;
+}
+
+.lexical-image-selected {
+  outline: 2px solid var(--color-active, #3b82f6);
+  outline-offset: 2px;
+  border-radius: var(--radius-1, 2px);
+}
+
+.lexical-image-resizing {
+  cursor: nwse-resize;
+}
+
+.lexical-image-handle {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--surface-bg, #fff);
+  border: 2px solid var(--color-active, #3b82f6);
+  border-radius: var(--radius-1, 2px);
+  z-index: 2;
+  box-sizing: border-box;
+}
+
+.lexical-image-handle--nw {
+  top: -5px;
+  left: -5px;
+  cursor: nwse-resize;
+}
+
+.lexical-image-handle--ne {
+  top: -5px;
+  right: -5px;
+  cursor: nesw-resize;
+}
+
+.lexical-image-handle--sw {
+  bottom: -5px;
+  left: -5px;
+  cursor: nesw-resize;
+}
+
+.lexical-image-handle--se {
+  bottom: -5px;
+  right: -5px;
+  cursor: nwse-resize;
+}

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

@@ -189,6 +189,10 @@ body.dark-mode {
   color: var(--syntax-meta);
 }
 
+.comment-content .hljs-punctuation {
+  color: var(--color-code-text);
+}
+
 .comment-content .hljs-deletion {
   color: var(--syntax-deletion-text);
   background: var(--syntax-deletion-bg);

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

@@ -43,7 +43,7 @@ body.chat-fullscreen {
     border-radius: 0;
     box-shadow: none;
     border: none;
-    z-index: 9999;
+    z-index: var(--layer-fullscreen);
     box-sizing: border-box;
     padding: 0.5em;
 }
@@ -478,6 +478,11 @@ body.chat-fullscreen {
     white-space: nowrap;
 }
 
+.inbox-reply-btn {
+    font-size: var(--text-0) !important;
+    white-space: nowrap;
+}
+
 .comment-highlight {
     background: color-mix(in srgb, var(--color-active) 15%, transparent) !important;
     transition: background 0.3s ease;
@@ -599,7 +604,7 @@ body.chat-fullscreen {
     border: 1px solid var(--color-border);
     border-radius: 8px;
     box-shadow: var(--shadow-3);
-    z-index: 9999;
+    z-index: var(--layer-fullscreen);
 }
 
 #global-reaction-picker {
@@ -1030,6 +1035,33 @@ body.chat-fullscreen {
     filter: grayscale(1);
 }
 
+.agent-stop-btn {
+    background: var(--surface-btn);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-2);
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: var(--text-00);
+    padding: var(--space-px-1) var(--space-px-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-px-1);
+    margin-right: var(--space-px-1);
+    flex-shrink: 0;
+    transition: background 0.15s, color 0.15s;
+    white-space: nowrap;
+    line-height: 1;
+}
+
+.agent-stop-btn .agent-stop-icon {
+    font-size: var(--text-00);
+}
+
+.agent-stop-btn:hover {
+    background: var(--color-danger);
+    color: var(--text-on-btn);
+}
+
 /* --- Context Chips --- */
 .comment-contexts-list {
     display: flex;
@@ -1365,19 +1397,6 @@ body.chat-fullscreen {
     opacity: 0.5;
 }
 
-.comment-drag-image {
-    position: fixed;
-    top: -1000px;
-    left: -1000px;
-    padding: var(--space-2) var(--space-3);
-    background-color: var(--color-active);
-    color: var(--color-badge-text);
-    border-radius: var(--radius-2);
-    font-size: 0.9em;
-    font-weight: 500;
-    white-space: nowrap;
-}
-
 /* Hide the topic link if the message is displayed within that topic's context */
 /* Use Javascript to set data-current-topic-id on the list container */
 .comment-topic-link {
@@ -1496,6 +1515,15 @@ body.chat-fullscreen {
     opacity: 0.5;
     font-style: italic;
 }
+.topic-branch-icon {
+    font-size: 0.75em;
+    opacity: 0.6;
+    margin-right: 1px;
+    cursor: pointer;
+}
+.topic-branch-icon:hover {
+    opacity: 1;
+}
 .archive-topic-btn,
 .unarchive-topic-btn {
     background: none;

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

@@ -976,3 +976,67 @@ creative-tree-row.is-being-edited .creative-tree {
 .creative-progress-area {
     display: contents;
 }
+
+/* ─── Bundle drag image (shared by creatives + comments) ─── */
+
+.drag-bundle-image {
+    position: fixed;
+    top: -1000px;
+    left: -1000px;
+    width: 220px;
+    pointer-events: none;
+}
+
+.drag-bundle-card {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 42px;
+    border-radius: var(--radius-2);
+    border: var(--border-1) solid var(--border-muted);
+    background-color: var(--surface-base);
+    box-shadow: var(--shadow-2);
+}
+
+.drag-bundle-card--back {
+    transform: translate(6px, -6px) rotate(2deg);
+    opacity: 0.5;
+}
+
+.drag-bundle-card--mid {
+    transform: translate(3px, -3px) rotate(1deg);
+    opacity: 0.75;
+}
+
+.drag-bundle-card--front {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-3);
+    font-size: var(--text-1);
+    font-weight: 500;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: var(--surface-base);
+}
+
+.drag-bundle-badge {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 6px;
+    border-radius: var(--radius-round);
+    background-color: var(--color-active);
+    color: var(--color-badge-text);
+    font-size: var(--text-0);
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-2);
+}

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

@@ -145,6 +145,7 @@
   --layer-popup: 100;
   --layer-modal: 1000;
   --layer-toast: 2000;
+  --layer-fullscreen: 9999;
   --layer-important: 2147483647;
 
   /* ============================================================================

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

@@ -0,0 +1,340 @@
+/* ── Modal Dialog ──
+ * Shared centered-panel style for command palette, forms, and dialogs.
+ * Used by: search-popup, command-args-form, and any future centered modal.
+ *
+ * Structure:
+ *   .modal-dialog-overlay        (backdrop)
+ *   .modal-dialog                (centered panel)
+ *     .modal-dialog-header       (title area, border-bottom)
+ *     .modal-dialog-body         (scrollable content)
+ *     .modal-dialog-footer       (actions / hints, border-top)
+ *     .modal-dialog-input        (standard text input inside dialog)
+ */
+
+/* ── Overlay ── */
+.modal-dialog-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--layer-modal, 1000) + 1);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  animation: modal-dialog-fade-in 0.15s var(--ease-out-3, ease-out);
+}
+
+.modal-dialog-overlay.open {
+  display: block;
+}
+
+@keyframes modal-dialog-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Panel ── */
+.modal-dialog {
+  display: none;
+  position: fixed;
+  top: 15vh;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: calc(var(--layer-modal, 1000) + 2);
+  width: 520px;
+  max-width: calc(100vw - 2rem);
+  max-height: 70vh;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-4, 16px);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  padding: 0;
+  font-size: initial;
+  line-height: normal;
+  text-align: left;
+  animation: modal-dialog-slide-up 0.2s var(--ease-out-3, ease-out);
+}
+
+.modal-dialog.open {
+  display: block;
+}
+
+/* Compact variant — narrower for small forms */
+.modal-dialog.modal-dialog-compact {
+  width: 400px;
+}
+
+@keyframes modal-dialog-slide-up {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+/* ── Header ── */
+.modal-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.modal-dialog-title {
+  font-weight: var(--weight-6);
+  font-size: var(--text-2, 1.125rem);
+  color: var(--text-primary);
+}
+
+.modal-dialog-desc {
+  font-size: var(--text-0);
+  color: var(--text-muted);
+}
+
+/* ── Body ── */
+.modal-dialog-body {
+  padding: var(--space-3) var(--space-4);
+}
+
+/* ── Footer ── */
+.modal-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--color-border);
+  gap: var(--space-2);
+}
+
+/* ── Input ── */
+.modal-dialog-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2);
+  background: var(--surface-input, var(--color-bg));
+  color: var(--text-primary);
+  font-size: var(--text-1);
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.15s var(--ease-2);
+}
+
+.modal-dialog-input:focus {
+  border-color: var(--color-active);
+  box-shadow: 0 0 0 1px var(--color-active);
+}
+
+.modal-dialog-input::placeholder {
+  color: var(--text-muted);
+}
+
+.modal-dialog-input.modal-dialog-error {
+  border-color: var(--color-danger);
+  box-shadow: 0 0 0 1px var(--color-danger);
+}
+
+textarea.modal-dialog-input {
+  resize: none;
+  overflow: hidden;
+  min-height: 1.6em;
+  max-height: 8em;
+  line-height: var(--leading-3);
+  field-sizing: content;
+}
+
+/* ── Buttons ── */
+.modal-dialog-btn {
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-2);
+  font-size: var(--text-0);
+  font-family: inherit;
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+  transition: background 0.15s var(--ease-2);
+}
+
+.modal-dialog-btn-secondary {
+  background: var(--surface-section);
+  color: var(--text-muted);
+}
+
+.modal-dialog-btn-secondary:hover {
+  background: var(--surface-hover);
+}
+
+.modal-dialog-btn-primary {
+  background: var(--color-active);
+  color: var(--text-on-badge);
+  border-color: var(--color-active);
+}
+
+.modal-dialog-btn-primary:hover {
+  opacity: 0.9;
+}
+
+/* ── Footer hints (keyboard shortcuts) ── */
+.modal-dialog-hints {
+  display: flex;
+  gap: var(--space-3);
+  font-size: var(--text-0);
+  color: var(--text-muted);
+}
+
+.modal-dialog-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.modal-dialog-hint kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--space-1);
+  background: var(--surface-input, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-1, 4px);
+  font-size: var(--text-00, 11px);
+  font-family: inherit;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+/* ── Field layout (for form dialogs) ── */
+.modal-dialog-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.modal-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.modal-dialog-label {
+  font-size: var(--text-0);
+  font-weight: var(--weight-5);
+  color: var(--text-muted);
+}
+
+.modal-dialog-required {
+  color: var(--color-danger);
+  margin-left: 0.15em;
+}
+
+/* ── Mention dropdown (inside form fields) ── */
+.modal-dialog-mention-field {
+  position: relative;
+}
+
+.modal-dialog-mention-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  margin: var(--space-1) 0 0;
+  padding: var(--space-1) 0;
+  list-style: none;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-2, 0 4px 12px rgba(0, 0, 0, 0.15));
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.modal-dialog-mention-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  cursor: pointer;
+  font-size: var(--text-1);
+  color: var(--text-primary);
+}
+
+.modal-dialog-mention-item:hover,
+.modal-dialog-mention-item.active {
+  background: var(--surface-hover);
+}
+
+.modal-dialog-mention-item .avatar {
+  border-radius: var(--radius-round, 50%);
+  flex-shrink: 0;
+}
+
+.modal-dialog-mention-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Scoped variant ──
+ * When a container element is specified, the modal is rendered inside that
+ * element instead of the full viewport. The container gets `position: relative`
+ * so overlay + dialog stay contained within it.
+ */
+.modal-dialog-container {
+  position: relative;
+}
+
+.modal-dialog-overlay--scoped {
+  position: absolute;
+  z-index: 1;                /* relative to the container, not the page */
+  border-radius: inherit;    /* match container shape */
+}
+
+.modal-dialog--scoped {
+  position: absolute;
+  z-index: 2;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 80%;
+  animation: modal-dialog-scoped-slide 0.15s var(--ease-out-3, ease-out);
+}
+
+.modal-dialog--scoped.open {
+  display: block;
+}
+
+@keyframes modal-dialog-scoped-slide {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+
+/* ── Mobile ── */
+@media (max-width: 768px) {
+  .modal-dialog {
+    width: calc(100vw - 2rem);
+    top: 10vh;
+    border-radius: var(--radius-3, 12px);
+  }
+
+  .modal-dialog--scoped {
+    top: 10%;
+  }
+
+  .modal-dialog-hints {
+    display: none;
+  }
+}

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

@@ -86,6 +86,12 @@
   z-index: calc(var(--layer-modal) + 10);
 }
 
+/* When chat is fullscreen, these modals must sit above it */
+body.chat-fullscreen #link-creative-modal,
+body.chat-fullscreen #topic-search-modal {
+  z-index: calc(var(--layer-fullscreen) + 1);
+}
+
 .common-popup {
   position: absolute;
   z-index: var(--layer-modal);