@1agh/maude 0.29.0 → 0.31.0

package/apps/studio/client/styles/4-components.css

@@ -1353,6 +1353,45 @@
   color: var(--u-fg-2);
   margin-bottom: 14px;
 }
+/* "Do this one thing" hint — shown when a step needs a canvas open or an element
+   ⌘-clicked (the cross-origin canvas means the tour can't do it for you). */
+.mdcc-tour__hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: -4px 0 14px;
+  padding: 8px 10px;
+  border-radius: var(--radius-md);
+  background: color-mix(in oklab, var(--u-accent) 12%, transparent);
+  border: 1px solid color-mix(in oklab, var(--u-accent) 35%, transparent);
+  color: var(--u-fg-1);
+  font-size: 12px;
+  line-height: 1.4;
+}
+.mdcc-tour__hint-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--u-accent);
+  animation: mdcc-tour-pulse 1.4s ease-in-out infinite;
+}
+@keyframes mdcc-tour-pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mdcc-tour__hint-dot {
+    animation: none;
+  }
+}
 .mdcc-tour__actions {
   display: flex;
   align-items: center;

package/apps/studio/client/styles/5-maude-overrides.css

@@ -25,6 +25,9 @@
 .maude .help-modal-hd {
   border-bottom: 1px solid var(--border-subtle);
   background: var(--bg-1);
+  /* title + SKU sat glued together (flex space-between, no gap) */
+  justify-content: flex-start;
+  gap: var(--space-4);
 }
 .maude .help-modal-hd .title { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); text-transform: none; color: var(--fg-0); }
 .maude .help-modal-hd .sku { font-family: var(--font-mono); color: var(--fg-3); }
@@ -61,10 +64,37 @@
 .mdcc-tour__skip { background: transparent; color: var(--fg-2); border: 0; font-family: var(--font-body); }
 .mdcc-tour__skip:hover { color: var(--fg-0); }
 
+/* ─── Phase 29 (E4) — collab tour: the two-layer infographic step ──────────────
+   A step with a `render` graphic widens the card so the diagram breathes. cm-*
+   classes draw the live layer floating over the Save → Publish → Pull cycle. */
+.mdcc-tour__card--graphic { width: min(580px, 92vw) !important; }
+.mdcc-tour__graphic { margin: var(--space-2) 0 var(--space-4); }
+.cm-info { display: flex; flex-direction: column; gap: var(--space-3); }
+.cm-live { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid color-mix(in oklab, var(--presence-online) 32%, var(--border-default)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--presence-online) 8%, var(--bg-2)); }
+.cm-live-hd { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-sm); color: var(--fg-1); }
+.cm-live-hd b { color: var(--fg-0); }
+.cm-live-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--presence-online); box-shadow: 0 0 0 4px color-mix(in oklab, var(--presence-online) 22%, transparent); flex: 0 0 auto; }
+.cm-live-items { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.cm-live-item { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-1); border: 1px solid var(--border-subtle); color: var(--fg-2); font-size: var(--type-xs); }
+.cm-live-item svg { color: var(--presence-online); }
+.cm-live-note { color: var(--fg-2); font-size: var(--type-xs); }
+.cm-bridge { display: flex; align-items: center; gap: var(--space-3); }
+.cm-bridge-line { flex: 1; height: 1px; background: var(--border-default); }
+.cm-bridge-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }
+.cm-cycle { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: var(--space-2); }
+.cm-cycle::before { content: ""; position: absolute; top: 30px; left: 14%; right: 14%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-muted) 18%, var(--accent-muted) 82%, transparent); border-radius: var(--radius-pill); }
+.cm-step { position: relative; flex: 1 1 0; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-1); text-align: center; }
+.cm-step-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent); }
+.cm-step-label { font-weight: 600; color: var(--fg-0); font-size: var(--type-xs); }
+.cm-step-sub { color: var(--fg-2); font-size: 10px; line-height: var(--lh-sm); }
+.cm-cyc-arrow { color: var(--accent); align-self: center; padding-top: 14px; }
+
 /* tour nudge (first-run) */
 .maude .mdcc-tour-nudge {
   background: var(--bg-2); border: 1px solid var(--border-default); border-left: 3px solid var(--accent);
   border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-family: var(--font-body); color: var(--fg-1);
+  /* raised above the in-canvas zoom pill (bottom-left), same as .st-toast */
+  bottom: 84px;
 }
 .maude .mdcc-tour-nudge__cta { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; }
 .maude .mdcc-tour-nudge__cta:hover { background: var(--accent-hover); }
@@ -108,8 +138,17 @@
 .maude .sv-h-num, .maude .sv-count { font-family: var(--font-mono); color: var(--fg-3); }
 .maude .sv-tok-cell { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-1); overflow: hidden; }
 .maude .sv-tok-swatch { border-radius: 0; }
-.maude .sv-tok-name { font-family: var(--font-mono); color: var(--fg-0); }
-.maude .sv-tok-value { font-family: var(--font-mono); color: var(--fg-2); }
+/* token meta — the legacy side-by-side row wrapped long names across 3 lines
+ * ("--presence-" / "offline"); stack name over value, each on one nowrap line. */
+.maude .sv-tok-meta {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 1px;
+  padding: var(--space-2) var(--space-3);
+}
+.maude .sv-tok-name { font-family: var(--font-mono); color: var(--fg-0); white-space: nowrap; max-width: 100%; }
+.maude .sv-tok-value { font-family: var(--font-mono); color: var(--fg-2); max-width: 100%; }
 .maude .sv-type-row { border-bottom: 1px solid var(--border-subtle); }
 .maude .sv-type-tok { font-family: var(--font-mono); color: var(--fg-2); }
 .maude .sv-preview-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-1); overflow: hidden; box-shadow: var(--shadow-sm); }