@1agh/maude 0.28.1 → 0.30.0

package/{plugins/design/dev-server → apps/studio}/client/styles/3-shell.css

@@ -46,6 +46,96 @@
 }
 .tree-panel-hd .live-dot.connected { background: var(--u-status-success); }
 
+/* Phase 22 — "+ board" composer in the tree header (create a blank brief board). */
+.tree-panel-hd .tp-hd-left {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.tp-new-board {
+  appearance: none;
+  border: 1px solid var(--u-border);
+  background: var(--u-bg-0);
+  color: var(--u-fg-1);
+  font-family: var(--u-font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: var(--tracking-sku);
+  text-transform: uppercase;
+  padding: 2px 6px;
+  cursor: pointer;
+  line-height: 1.4;
+  transition:
+    color var(--dur-flip) var(--ease-out),
+    border-color var(--dur-flip) var(--ease-out);
+}
+.tp-new-board:hover,
+.tp-new-board[aria-expanded='true'] {
+  color: var(--u-fg-0);
+  border-color: var(--u-border-strong);
+}
+.tp-new-board[aria-expanded='true'] { background: var(--u-bg-1); }
+.tp-new-board:focus-visible {
+  outline: none;
+  border-color: var(--u-border-strong);
+  box-shadow: var(--shadow-focus);
+}
+
+.tp-new-board-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px var(--u-s-3);
+  background: var(--u-bg-1);
+  border-bottom: 1px solid var(--u-border-subtle);
+  flex: none;
+}
+.tp-new-board-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--u-bg-0);
+  border: 1px solid var(--u-border);
+  color: var(--u-fg-0);
+  font-size: 11px;
+  font-family: var(--u-font-mono);
+  outline: none;
+  padding: 3px 8px;
+  transition: border-color var(--dur-flip) var(--ease-out);
+}
+.tp-new-board-input::placeholder { color: var(--u-fg-3); }
+.tp-new-board-input:focus-visible {
+  border-color: var(--u-border-strong);
+  box-shadow: var(--shadow-focus);
+}
+.tp-new-board-go {
+  appearance: none;
+  flex: none;
+  border: 1px solid var(--u-border);
+  background: var(--u-bg-0);
+  color: var(--u-fg-1);
+  font-family: var(--u-font-mono);
+  font-size: 12px;
+  line-height: 1;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition:
+    color var(--dur-flip) var(--ease-out),
+    border-color var(--dur-flip) var(--ease-out);
+}
+.tp-new-board-go:hover:not(:disabled) {
+  color: var(--u-fg-0);
+  border-color: var(--u-border-strong);
+}
+.tp-new-board-go:disabled { opacity: 0.45; cursor: default; }
+.tp-new-board-err {
+  padding: 4px var(--u-s-3) 6px;
+  font-size: 10px;
+  font-family: var(--u-font-mono);
+  color: var(--u-status-error, #e5484d);
+  background: var(--u-bg-1);
+  border-bottom: 1px solid var(--u-border-subtle);
+}
+
 .tree-panel-search {
   padding: 5px var(--u-s-3);
   display: flex;
@@ -157,6 +247,45 @@
   z-index: 1;
   position: relative;
 }
+
+/* Phase 22 — per-row delete affordance. The wrapper is relative so the trash
+   button sits at the row's right edge; it reveals on hover / focus-within and
+   never shifts the row's layout (the row reserves right padding for it). */
+.tp-row-wrap { position: relative; }
+.tp-row-wrap > .tp-row { padding-right: 26px; }
+.tp-del {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--u-fg-3);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--dur-flip) var(--ease-out),
+    color var(--dur-flip) var(--ease-out),
+    background var(--dur-flip) var(--ease-out);
+}
+.tp-row-wrap:hover .tp-del,
+.tp-del:focus-visible { opacity: 1; }
+.tp-del:hover { color: var(--u-status-error, #e5484d); background: var(--u-bg-3); }
+.tp-del:focus-visible {
+  opacity: 1;
+  outline: none;
+  box-shadow: var(--shadow-focus);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tp-del { transition: none; }
+}
 .tp-row .glyph {
   width: 12px;
   display: inline-block;

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

@@ -0,0 +1,74 @@
+/* @layer components — maude DS shared component anatomy (Plan B).
+ *
+ * Lifted from `.design/system/maude/preview/_components.css` (.btn / .kbd /
+ * .callout + variants) — the shared classes the ported `.st-*` chrome in
+ * `Studio.css` composes with. Scoped under `.maude` so they resolve the maude
+ * token ladder (1-tokens-maude.css) and never collide with the legacy shell's
+ * own chrome during the slice-by-slice rewrite. Per CLAUDE.md "Lift, don't
+ * reinvent"; DDR-014 @layer order preserved.
+ */
+
+@layer components {
+
+/* ─── Buttons ───────────────────────────────────────────────────────────── */
+.maude .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-family: var(--font-body);
+  font-size: var(--type-sm);
+  font-weight: 500;
+  line-height: 1;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-2);
+  color: var(--fg-0);
+  cursor: pointer;
+  transition: background var(--dur-soft) var(--ease-out),
+              border-color var(--dur-soft) var(--ease-out),
+              color var(--dur-soft) var(--ease-out);
+}
+.maude .btn:hover { background: var(--bg-3); border-color: var(--border-strong); }
+.maude .btn:active { background: var(--bg-4); }
+.maude .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.maude .btn:disabled { color: var(--fg-3); cursor: not-allowed; background: var(--bg-1); }
+
+.maude .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.maude .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.maude .btn--primary:active { background: var(--accent-active); }
+
+.maude .btn--ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
+.maude .btn--ghost:hover { background: var(--bg-2); color: var(--fg-0); }
+
+.maude .btn--danger { background: transparent; border-color: var(--border-default); color: var(--status-error); }
+.maude .btn--danger:hover { background: color-mix(in oklab, var(--status-error) 14%, transparent); border-color: var(--status-error); }
+
+.maude .btn--icon { padding: var(--space-3); width: 28px; height: 28px; justify-content: center; }
+.maude .btn--sm { font-size: var(--type-xs); padding: var(--space-2) var(--space-3); }
+
+/* ─── Keyboard hint ─────────────────────────────────────────────────────── */
+.maude .kbd {
+  font-family: var(--font-mono);
+  font-size: var(--type-xs);
+  line-height: 1;
+  padding: 3px 6px;
+  border: 1px solid var(--border-default);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  background: var(--bg-2);
+  color: var(--fg-1);
+}
+
+/* ─── Callout ───────────────────────────────────────────────────────────── */
+.maude .callout {
+  display: flex; gap: var(--space-3); padding: var(--space-4);
+  border: 1px solid var(--border-default); border-left-width: 3px;
+  border-radius: var(--radius-sm); background: var(--bg-1); color: var(--fg-1);
+}
+.maude .callout--info    { border-left-color: var(--status-info); }
+.maude .callout--success { border-left-color: var(--status-success); }
+.maude .callout--warn    { border-left-color: var(--status-warn); }
+.maude .callout--error   { border-left-color: var(--status-error); }
+
+}

package/{plugins/design/dev-server → apps/studio}/client/styles/4-components.css

@@ -460,40 +460,10 @@
   max-width: 100%;
 }
 
-/* ----- Comment bar ----- */
-.comment-bar {
-  background: var(--u-bg-1);
-  border-top: 1px solid var(--u-border);
-  padding: 6px var(--u-s-3);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-}
-.cb-row {
-  display: flex;
-  align-items: center;
-  gap: var(--u-s-2);
-  flex-wrap: wrap;
-}
-/* Composer — stacked vertically so the textarea has real estate */
-/* 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-label {
-  color: var(--u-fg-3);
-  font-size: 11px;
-  flex: none;
-  align-self: center;
-}
-
-.cb-row.strip {
-  font-size: 11px;
-  color: var(--u-fg-3);
-}
+/* The shell-side comment bar was removed — the iframe overlay
+ * (apps/studio/comments-overlay.tsx) owns the composer + pin bubbles + thread
+ * popover, and the StatusBar's "comments N open" slot covers the open-count
+ * summary, so the standalone `.comment-bar` strip was redundant. */
 
 /* ----- Right sidebar — Comments panel (CV-10) ----- */
 .rsidebar {
@@ -1140,3 +1110,395 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* ───────── What's New (badge · toast · panel) — feature-in-app-whats-new-tour ───────── */
+.mdcc-wn-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  margin-right: 8px;
+  background: transparent;
+  color: var(--u-fg-2);
+  border: 1px solid var(--u-bg-3);
+  border-radius: var(--radius-md);
+  font: 500 11px/1.2 var(--font-sans, system-ui, sans-serif);
+  letter-spacing: 0.02em;
+  cursor: pointer;
+}
+.mdcc-wn-badge:hover {
+  color: var(--u-fg-0);
+  background: var(--u-bg-2);
+}
+.mdcc-wn-badge__label {
+  text-transform: uppercase;
+}
+.mdcc-wn-badge__dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  background: var(--u-accent);
+  color: var(--u-accent-fg);
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.mdcc-wn-toast {
+  position: fixed;
+  left: 16px;
+  bottom: 16px;
+  z-index: 9000;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  max-width: 360px;
+  padding: 12px 14px;
+  background: var(--u-bg-1);
+  color: var(--u-fg-0);
+  border: 1px solid var(--u-bg-3);
+  border-left: 3px solid var(--u-accent);
+  border-radius: var(--radius-md);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+  font: 400 12px/1.4 var(--font-sans, system-ui, sans-serif);
+  animation: mdcc-wn-rise 0.28s ease both;
+}
+@keyframes mdcc-wn-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+.mdcc-wn-toast__mark {
+  color: var(--u-accent);
+  font-size: 14px;
+  line-height: 1.2;
+  flex: none;
+}
+.mdcc-wn-toast__body {
+  min-width: 0;
+  flex: 1;
+}
+.mdcc-wn-toast__title {
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.mdcc-wn-toast__summary {
+  color: var(--u-fg-2);
+}
+.mdcc-wn-toast__cta {
+  flex: none;
+  align-self: center;
+  padding: 4px 10px;
+  background: var(--u-accent);
+  color: var(--u-accent-fg);
+  border: none;
+  border-radius: var(--radius-md);
+  font: 600 11px/1 var(--font-sans, system-ui, sans-serif);
+  cursor: pointer;
+}
+.mdcc-wn-toast__close {
+  flex: none;
+  background: transparent;
+  border: none;
+  color: var(--u-fg-3);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.mdcc-wn-toast__close:hover {
+  color: var(--u-fg-0);
+}
+
+.mdcc-wn-panel {
+  width: min(560px, 92vw);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--u-bg-1);
+  color: var(--u-fg-0);
+  border: 1px solid var(--u-bg-3);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+.mdcc-wn-panel__body {
+  overflow-y: auto;
+  padding: 8px 14px 16px;
+}
+.mdcc-wn-empty {
+  color: var(--u-fg-3);
+  padding: 16px 0;
+}
+.mdcc-wn-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.mdcc-wn-item {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--u-bg-3);
+}
+.mdcc-wn-item:last-child {
+  border-bottom: none;
+}
+.mdcc-wn-item__hd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.mdcc-wn-item__title {
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+}
+.mdcc-wn-item__ver {
+  color: var(--u-fg-3);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.mdcc-wn-item__summary {
+  color: var(--u-fg-2);
+  margin: 0 0 4px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.mdcc-wn-item__more {
+  color: var(--u-accent);
+  font-size: 11px;
+  text-decoration: none;
+}
+.mdcc-wn-item__more:hover {
+  text-decoration: underline;
+}
+.mdcc-wn-item.is-unseen .mdcc-wn-item__title::after {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-left: 6px;
+  background: var(--u-accent);
+  border-radius: 50%;
+  vertical-align: middle;
+}
+.mdcc-wn-kind {
+  text-transform: uppercase;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 2px 5px;
+  border-radius: var(--radius-sm, 2px);
+  background: var(--u-accent-bg);
+  color: var(--u-accent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .mdcc-wn-toast {
+    animation: none;
+  }
+}
+
+/* ───────── Guided tour (overlay) — feature-in-app-whats-new-tour Phase 3 ───────── */
+.mdcc-tour {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
+}
+.mdcc-tour__scrim {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+}
+.mdcc-tour__spot {
+  position: fixed;
+  border-radius: 6px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
+  outline: 2px solid var(--u-accent);
+  outline-offset: 0;
+  pointer-events: none;
+  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
+}
+.mdcc-tour__card {
+  position: fixed;
+  z-index: 10051;
+  background: var(--u-bg-1);
+  color: var(--u-fg-0);
+  border: 1px solid var(--u-bg-3);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
+  padding: 16px;
+  font: 400 13px/1.5 var(--font-sans, system-ui, sans-serif);
+}
+.mdcc-tour__step {
+  font-size: 10px;
+  color: var(--u-fg-3);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+.mdcc-tour__title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+.mdcc-tour__body {
+  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;
+  justify-content: space-between;
+  gap: 12px;
+}
+.mdcc-tour__nav {
+  display: flex;
+  gap: 8px;
+}
+.mdcc-tour__skip {
+  background: transparent;
+  border: none;
+  color: var(--u-fg-3);
+  cursor: pointer;
+  font-size: 12px;
+}
+.mdcc-tour__skip:hover {
+  color: var(--u-fg-1);
+}
+.mdcc-tour__back {
+  background: transparent;
+  border: 1px solid var(--u-bg-3);
+  color: var(--u-fg-1);
+  border-radius: var(--radius-md);
+  padding: 5px 12px;
+  cursor: pointer;
+  font-size: 12px;
+}
+.mdcc-tour__next {
+  background: var(--u-accent);
+  color: var(--u-accent-fg);
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 5px 14px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+/* First-run nudge (offers the usage tour) — reuses toast positioning. */
+.mdcc-tour-nudge {
+  position: fixed;
+  left: 16px;
+  bottom: 16px;
+  z-index: 9001;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 360px;
+  padding: 12px 14px;
+  background: var(--u-bg-1);
+  color: var(--u-fg-0);
+  border: 1px solid var(--u-bg-3);
+  border-left: 3px solid var(--u-accent);
+  border-radius: var(--radius-md);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
+  font: 400 12px/1.4 var(--font-sans, system-ui, sans-serif);
+}
+.mdcc-tour-nudge__body {
+  flex: 1;
+  min-width: 0;
+}
+.mdcc-tour-nudge__cta {
+  flex: none;
+  padding: 4px 10px;
+  background: var(--u-accent);
+  color: var(--u-accent-fg);
+  border: none;
+  border-radius: var(--radius-md);
+  font: 600 11px/1 var(--font-sans, system-ui, sans-serif);
+  cursor: pointer;
+}
+.mdcc-tour-nudge__skip {
+  flex: none;
+  background: transparent;
+  border: none;
+  color: var(--u-fg-3);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 2px;
+}
+.mdcc-tour-nudge__skip:hover {
+  color: var(--u-fg-0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .mdcc-tour__spot {
+    transition: none;
+  }
+}
+
+/* "Take tour" affordance inside the What's New panel. */
+.mdcc-wn-item__tour {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px;
+  background: var(--u-accent-bg);
+  color: var(--u-accent);
+  border: none;
+  border-radius: var(--radius-sm, 2px);
+  font: 600 10px/1.4 var(--font-sans, system-ui, sans-serif);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+}
+.mdcc-wn-item__tour:hover {
+  background: var(--u-accent);
+  color: var(--u-accent-fg);
+}