@1agh/maude 0.15.0 → 0.17.1

package/plugins/design/dev-server/client/comments-overlay.css

@@ -0,0 +1,381 @@
+/* Phase 6 — in-place comments overlay
+ *
+ * Lives inside the canvas iframe; portaled into `.dc-world` so CSS zoom on the
+ * world plane scales the entire layer (pins + composer + thread popover)
+ * uniformly with the artboards.
+ *
+ * DS-token only. No raw hex literals, no glow shadows, no rounded > 4px, no
+ * gradients. The design-system-guard subagent enforces this on PR — keep edits
+ * inside the token vocabulary.
+ */
+
+.cm-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  /* Pins / composer / thread sit ABOVE the SelectionHalos chrome (z-index 5
+   * in canvas-shell HALO_CSS). Rendered as a sibling of `.dc-canvas` (NOT
+   * portaled into `.dc-world`) so we share the root stacking context with
+   * the halos — z-index here directly competes with theirs. Bonus: pins stay
+   * fixed 24px regardless of canvas zoom, FigJam-style. */
+  z-index: 10;
+}
+
+/* ─── Pin badge ───────────────────────────────────────────────────────────── */
+.cm-pin {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+  border: 1px solid var(--border-strong, #2a2520);
+  border-radius: 0;
+  font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
+  letter-spacing: var(--tracking-sku, 0.04em);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+  will-change: transform;
+}
+
+.cm-pin:hover,
+.cm-pin[aria-expanded='true'] {
+  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+}
+
+.cm-pin:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-pin[data-resolved='true'] {
+  background: var(--bg-3, #1c1916);
+  color: var(--fg-2, #6e6660);
+  opacity: 0.6;
+}
+
+.cm-pin[data-focused='true'] {
+  /* Subtle ring — DS hard-edges discipline: no glow, just a hairline outline. */
+  outline: 1px solid var(--fg-0, #2a2520);
+  outline-offset: 1px;
+}
+
+/* ─── Composer card ───────────────────────────────────────────────────────── */
+.cm-composer {
+  position: absolute;
+  width: 300px;
+  background: var(--bg-1, #faf6ef);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: var(--radius-sm, 2px);
+  padding: var(--space-4, 12px);
+  box-shadow: none;
+  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  pointer-events: auto;
+  z-index: 4;
+}
+
+.cm-composer__head {
+  font-size: var(--type-xs, 11px);
+  color: var(--fg-2, #6e6660);
+  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  text-transform: uppercase;
+  margin: 0 0 var(--space-2, 4px) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 4px);
+}
+
+.cm-composer__selector {
+  color: var(--fg-1, #4a4540);
+  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
+  padding: 0 var(--space-2, 4px);
+  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
+  font-size: var(--type-xs, 11px);
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.cm-composer__textarea {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  background: var(--bg-0, #ffffff);
+  color: var(--fg-0, #2a2520);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: var(--space-3, 8px);
+  font: inherit;
+  box-sizing: border-box;
+}
+
+.cm-composer__textarea:focus-visible {
+  outline: none;
+  border-color: var(--accent, #d63b1f);
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-composer__actions {
+  display: flex;
+  gap: var(--space-2, 4px);
+  justify-content: flex-end;
+  margin-top: var(--space-3, 8px);
+}
+
+.cm-btn {
+  font: 500 var(--type-xs, 11px) / 1.4 var(--font-mono, ui-monospace, monospace);
+  letter-spacing: var(--tracking-eyebrow, 0.08em);
+  text-transform: uppercase;
+  padding: var(--space-2, 4px) var(--space-3, 8px);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  cursor: pointer;
+  background: transparent;
+  color: var(--fg-0, #2a2520);
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+}
+
+.cm-btn:hover {
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+}
+
+.cm-btn--primary {
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+  border-color: var(--accent, #d63b1f);
+}
+
+.cm-btn--primary:hover {
+  background: var(--accent-hover, color-mix(in oklab, var(--accent, #d63b1f) 90%, white));
+}
+
+.cm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cm-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+/* ─── Thread popover ──────────────────────────────────────────────────────── */
+.cm-thread {
+  position: absolute;
+  width: 340px;
+  max-height: 60vh;
+  overflow: auto;
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: var(--radius-sm, 2px);
+  padding: var(--space-4, 12px);
+  box-shadow: none;
+  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  pointer-events: auto;
+  z-index: 5;
+}
+
+.cm-thread__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 4px);
+  padding-bottom: var(--space-3, 8px);
+  border-bottom: var(--rule-thin, 1px solid #2a2520);
+}
+
+.cm-thread__head-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__close {
+  background: transparent;
+  color: var(--fg-2, #6e6660);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: 0 var(--space-2, 4px);
+  font: 600 var(--type-xs, 11px) / 1.2 var(--font-mono, ui-monospace, monospace);
+  cursor: pointer;
+  align-self: flex-start;
+  margin-left: var(--space-2, 4px);
+  transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
+}
+
+.cm-thread__close:hover {
+  background: var(--bg-3, #1c1916);
+  color: var(--fg-0, #2a2520);
+}
+
+.cm-thread__close:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-thread__author {
+  color: var(--fg-0, #2a2520);
+  font-weight: 600;
+}
+
+.cm-thread__time {
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-thread__selector {
+  display: inline-block;
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+  border: 1px solid var(--mono-rule, var(--border-subtle, #c8bfb4));
+  padding: 0 var(--space-2, 4px);
+  background: var(--mono-cell-bg, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--accent, #d63b1f) 6%));
+  align-self: flex-start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-thread__body {
+  padding: var(--space-3, 8px) 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cm-thread__body strong,
+.cm-thread__reply-body strong {
+  /* @mention tokens — bold, accent color. Inserted by `renderBodyWithMentions`. */
+  color: var(--accent, #d63b1f);
+  font-weight: 600;
+}
+
+.cm-thread__reply {
+  padding: var(--space-3, 8px) 0;
+  border-top: 1px solid var(--border-subtle, #c8bfb4);
+}
+
+.cm-thread__reply-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2, 4px);
+  margin-bottom: var(--space-2, 4px);
+}
+
+.cm-thread__reply-author {
+  color: var(--fg-1, #4a4540);
+  font-weight: 600;
+}
+
+.cm-thread__reply-time {
+  color: var(--fg-3, var(--fg-2, #6e6660));
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-thread__reply-body {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.cm-thread__reply-form {
+  padding-top: var(--space-3, 8px);
+  border-top: var(--rule-thin, 1px solid #2a2520);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__reply-textarea {
+  width: 100%;
+  min-height: 56px;
+  resize: vertical;
+  background: var(--bg-0, #ffffff);
+  color: var(--fg-0, #2a2520);
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  padding: var(--space-3, 8px);
+  font: inherit;
+  box-sizing: border-box;
+}
+
+.cm-thread__reply-textarea:focus-visible {
+  outline: none;
+  border-color: var(--accent, #d63b1f);
+  box-shadow: var(--shadow-focus, 0 0 0 2px var(--accent, #d63b1f));
+}
+
+.cm-thread__reply-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2, 4px);
+}
+
+.cm-thread__actions {
+  display: flex;
+  gap: var(--space-2, 4px);
+  padding-top: var(--space-3, 8px);
+  margin-top: var(--space-3, 8px);
+  border-top: var(--rule-thin, 1px solid #2a2520);
+}
+
+.cm-thread__actions .cm-btn--danger {
+  margin-left: auto;
+  color: var(--status-error, #c0392b);
+  border-color: var(--status-error, #c0392b);
+}
+
+.cm-thread__actions .cm-btn--danger:hover {
+  background: color-mix(in oklab, var(--status-error, #c0392b) 12%, transparent);
+}
+
+/* ─── @mention autocomplete ──────────────────────────────────────────────── */
+.cm-mention-popup {
+  position: absolute;
+  background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
+  border: var(--rule-thin, 1px solid #2a2520);
+  border-radius: 0;
+  font: var(--type-xs, 11px) / var(--lh-xs, 1.3) var(--font-mono, ui-monospace, monospace);
+  color: var(--fg-0, #2a2520);
+  max-height: 180px;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: none;
+  pointer-events: auto;
+  z-index: 6;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.cm-mention-popup__item {
+  padding: var(--space-2, 4px) var(--space-3, 8px);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3, 8px);
+}
+
+.cm-mention-popup__item[aria-selected='true'] {
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #faf6ef);
+}
+
+.cm-mention-popup__name {
+  font-weight: 600;
+}
+
+.cm-mention-popup__email {
+  color: var(--fg-2, #6e6660);
+  font-size: var(--type-xs, 11px);
+}
+
+.cm-mention-popup__item[aria-selected='true'] .cm-mention-popup__email {
+  color: var(--accent-fg, #faf6ef);
+  opacity: 0.85;
+}

package/plugins/design/dev-server/client/styles/3-shell.css

@@ -758,8 +758,7 @@
   flex: 1;
   min-width: 0;
 }
-.sb-clear-sel,
-.sb-add-comment {
+.sb-clear-sel {
   background: transparent;
   color: var(--u-fg-2);
   border: 1px solid var(--u-border);
@@ -772,19 +771,11 @@
   text-transform: uppercase;
   cursor: pointer;
 }
-.sb-add-comment {
-  color: var(--u-accent);
-  border-color: var(--u-accent);
-}
 .sb-clear-sel:hover {
   color: var(--u-fg-0);
   background: var(--u-bg-2);
   border-color: var(--u-border-strong);
 }
-.sb-add-comment:hover {
-  background: var(--u-accent);
-  color: var(--u-accent-fg);
-}
 .sb-unread .sb-count {
   font-family: var(--u-font-mono);
   font-size: 10px;

package/plugins/design/dev-server/client/styles/4-components.css

@@ -447,179 +447,23 @@
   flex-wrap: wrap;
 }
 /* Composer — stacked vertically so the textarea has real estate */
-.composer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--u-s-2);
-  padding: var(--u-s-3);
-  background: var(--u-bg-2);
-  border: 1px solid var(--u-accent-line);
-  border-radius: var(--u-r-md);
-  margin: 4px 0;
-}
-.composer-head {
-  display: flex;
-  align-items: baseline;
-  gap: var(--u-s-2);
-  font-size: 11px;
-  color: var(--u-fg-3);
-}
-.composer-selector {
-  font-family: var(--u-font-mono);
-  font-size: 11px;
-  color: var(--u-fg-1);
-  background: var(--u-bg-1);
-  padding: 2px 8px;
-  border-radius: var(--u-r-sm);
-  border: 1px solid var(--u-border);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-}
-.comment-bar textarea.composer-textarea {
-  width: 100%;
-  background: var(--u-bg-1);
-  border: 1px solid var(--u-border);
-  border-radius: var(--u-r-sm);
-  color: var(--u-fg-0);
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-  padding: var(--u-s-3);
-  resize: vertical;
-  min-height: 100px;
-  outline: none;
-}
-.comment-bar textarea.composer-textarea:focus { border-color: var(--u-accent-line); }
-.comment-bar textarea.composer-textarea::placeholder { color: var(--u-fg-3); }
-.composer-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-}
+/* Phase 6 — the shell-side composer / focused-row / pin-strip surfaces moved
+ * into the canvas iframe (see plugins/design/dev-server/comments-overlay.tsx
+ * + .css). Only the residual BottomBar open-count label survives. The legacy
+ * `.composer*` / `.cb-pin-chip` / `.cb-row.focused` / `.cb-text` / `.cb-target`
+ * / `.cb-pinno` / `.cb-more` rules were removed in the same change. */
 
-.cb-row.composer {
-  align-items: stretch;
-  flex-wrap: nowrap;
-}
 .cb-label {
   color: var(--u-fg-3);
   font-size: 11px;
   flex: none;
   align-self: center;
 }
-.cb-label code {
-  font-family: var(--u-font-mono);
-  font-size: 10px;
-  background: var(--u-bg-2);
-  padding: 1px 4px;
-  border-radius: var(--u-r-xs);
-  color: var(--u-fg-1);
-}
-.comment-bar textarea {
-  flex: 1;
-  background: var(--u-bg-2);
-  border: 1px solid var(--u-border);
-  border-radius: var(--u-r-sm);
-  color: var(--u-fg-0);
-  font-family: inherit;
-  font-size: 12px;
-  padding: var(--u-s-2);
-  resize: vertical;
-  min-height: 40px;
-  outline: none;
-}
-.comment-bar textarea:focus { border-color: var(--u-accent-line); }
-.cb-actions {
-  display: flex;
-  gap: 4px;
-  align-self: flex-end;
-}
-.cb-primary, .cb-secondary {
-  border: 1px solid var(--u-border);
-  background: var(--u-bg-2);
-  color: var(--u-fg-1);
-  border-radius: var(--u-r-sm);
-  padding: 4px var(--u-s-3);
-  font-family: var(--u-font-mono);
-  font-size: 11px;
-  cursor: pointer;
-}
-.cb-primary {
-  background: var(--u-accent);
-  color: var(--u-bg-0);
-  border-color: var(--u-accent);
-  font-weight: 600;
-}
-.cb-primary:hover { background: var(--u-accent-strong); border-color: var(--u-accent-strong); }
-.cb-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.cb-secondary:hover { background: var(--u-bg-3); color: var(--u-fg-0); }
-
-.cb-row.focused {
-  background: var(--u-bg-2);
-  border-radius: var(--u-r-sm);
-  padding: 4px var(--u-s-2);
-}
-.cb-pinno {
-  font-family: var(--u-font-mono);
-  font-size: 11px;
-  background: var(--u-accent);
-  color: var(--u-accent-fg);
-  border-radius: var(--u-r-sm);
-  padding: 1px 6px;
-  font-weight: 700;
-  flex: none;
-  letter-spacing: var(--tracking-sku);
-}
-.cb-text {
-  flex: 1;
-  color: var(--u-fg-0);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-}
-.cb-target code {
-  font-family: var(--u-font-mono);
-  font-size: 10px;
-  background: var(--u-bg-3);
-  padding: 1px 6px;
-  border-radius: var(--u-r-xs);
-  color: var(--u-fg-2);
-  max-width: 240px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-}
 
 .cb-row.strip {
   font-size: 11px;
   color: var(--u-fg-3);
 }
-.cb-pin-strip {
-  display: flex;
-  gap: 4px;
-  flex: 1;
-  flex-wrap: wrap;
-}
-.cb-pin-chip {
-  font-family: var(--u-font-mono);
-  font-size: 10px;
-  background: var(--u-accent);
-  color: var(--u-accent-fg);
-  border: 0;
-  border-radius: var(--u-r-sm);
-  padding: 2px 7px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 100ms;
-  letter-spacing: var(--tracking-sku);
-}
-.cb-pin-chip:hover { transform: scale(1.1); }
-.cb-more { font-family: var(--u-font-mono); font-size: 10px; color: var(--u-fg-3); align-self: center; }
 
 /* ----- Right sidebar — Comments panel (CV-10) ----- */
 .rsidebar {