@1agh/maude 0.28.0 → 0.29.0

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,356 @@
   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;
+}
+.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);
+}

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

@@ -0,0 +1,123 @@
+/* @layer components — maude redesign of the remaining legacy shell surfaces (Plan B).
+ *
+ * The HelpModal, in-app tour, what's-new (toast/panel), SystemView and CommentBar
+ * still carry their original project-DS "industrial catalogue" structure — hard
+ * offset shadows (`8px 8px 0`), full-contrast `--u-fg-0` borders, all-mono type,
+ * square edges, far-right-pushed description columns. Even after the `--u-*`
+ * bridge made them maude-COLORED, the STRUCTURE read as old. These overrides
+ * restyle them to the maude material (soft elevation, hairline borders, soft
+ * radii, Inter body + mono labels) WITHOUT rewriting their JSX. Scoped under
+ * `.maude` so they win over the legacy `@layer components` rules and only apply
+ * inside the studio shell. Remove a block once its surface is ported to `.st-*`.
+ */
+
+@layer components {
+
+/* ─── HelpModal ────────────────────────────────────────────────────────────── */
+.maude .help-modal {
+  background: var(--bg-2);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  font-family: var(--font-body);
+}
+.maude .help-modal-backdrop { background: color-mix(in oklab, var(--bg-0) 62%, transparent); }
+.maude .help-modal-hd {
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-1);
+}
+.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); }
+.maude .help-modal-close { color: var(--fg-2); border-radius: var(--radius-sm); }
+.maude .help-modal-close:hover { background: var(--bg-3); color: var(--fg-0); }
+.maude .help-modal-body details { border-bottom: 1px solid var(--border-subtle); }
+.maude .help-modal-body details > summary { color: var(--fg-2); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }
+.maude .help-modal-body details[open] > summary { color: var(--fg-0); }
+.maude .help-modal-body ul, .maude .help-modal-body ol { font-family: var(--font-body); }
+/* the load-bearing fix — descriptions sat far-right (margin-left:auto). Pull them
+   inline-left next to the key so each row reads as a definition, maude-style. */
+.maude .help-modal-body li { gap: var(--space-3); }
+.maude .help-modal-body li > span { margin-left: 0; text-align: left; color: var(--fg-2); font-size: var(--type-xs); }
+.maude .help-modal-body li > code,
+.maude .help-modal-body .cmds code { font-family: var(--font-mono); background: var(--bg-3); color: var(--accent); border-radius: var(--radius-xs); }
+.maude .help-modal-body kbd {
+  font-family: var(--font-mono); background: var(--bg-2); color: var(--fg-1);
+  border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-xs);
+}
+.maude .mdcc-tour__back { background: var(--bg-3); color: var(--fg-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-body); }
+.maude .mdcc-tour__back:hover { background: var(--bg-4); color: var(--fg-0); }
+
+/* ─── In-app tour ──────────────────────────────────────────────────────────── */
+.maude .mdcc-tour__card, .mdcc-tour__card {
+  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg); font-family: var(--font-body); color: var(--fg-0);
+}
+.mdcc-tour__title { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--fg-0); }
+.mdcc-tour__body { color: var(--fg-1); font-family: var(--font-body); }
+.mdcc-tour__step { font-family: var(--font-mono); color: var(--fg-3); }
+.mdcc-tour__spot { border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px color-mix(in oklab, var(--bg-0) 55%, transparent); }
+.mdcc-tour__next { background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; }
+.mdcc-tour__next:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.mdcc-tour__skip { background: transparent; color: var(--fg-2); border: 0; font-family: var(--font-body); }
+.mdcc-tour__skip:hover { color: var(--fg-0); }
+
+/* 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);
+}
+.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); }
+.maude .mdcc-tour-nudge__skip { color: var(--fg-3); }
+.maude .mdcc-tour-nudge__skip:hover { color: var(--fg-0); }
+
+/* ─── What's-new (toast / panel) ───────────────────────────────────────────── */
+.maude .mdcc-wn-toast, .mdcc-wn-toast {
+  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);
+}
+.mdcc-wn-toast__mark { color: var(--accent); }
+.mdcc-wn-toast__title { font-family: var(--font-display); font-weight: 600; color: var(--fg-0); }
+.mdcc-wn-toast__summary { color: var(--fg-1); }
+.mdcc-wn-toast__cta { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 500; }
+.mdcc-wn-toast__cta:hover { background: var(--accent-hover); }
+.mdcc-wn-toast__close { color: var(--fg-3); border-radius: var(--radius-sm); }
+.mdcc-wn-toast__close:hover { background: var(--bg-3); color: var(--fg-0); }
+.maude .mdcc-wn-panel, .mdcc-wn-panel {
+  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg); font-family: var(--font-body); color: var(--fg-0);
+}
+.mdcc-wn-item { border-bottom: 1px solid var(--border-subtle); }
+.mdcc-wn-item__title { font-family: var(--font-display); font-weight: 600; color: var(--fg-0); }
+.mdcc-wn-item__ver { font-family: var(--font-mono); color: var(--fg-3); }
+.mdcc-wn-item__summary { color: var(--fg-1); }
+.mdcc-wn-kind { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 10px; color: var(--accent); background: var(--accent-tint); border-radius: var(--radius-pill); padding: 1px 7px; }
+.mdcc-wn-item__tour, .mdcc-wn-item__more { color: var(--accent); font-family: var(--font-body); background: transparent; border: 0; }
+.mdcc-wn-empty { color: var(--fg-3); }
+
+/* ─── SystemView (DS overview) ─────────────────────────────────────────────── */
+.maude .sv { font-family: var(--font-body); color: var(--fg-0); }
+.maude .sv-header { border-bottom: 1px solid var(--border-subtle); }
+.maude .sv-sku { font-family: var(--font-mono); color: var(--accent); letter-spacing: var(--tracking-wide); }
+.maude .sv-title { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--fg-0); text-transform: none; }
+.maude .sv-loc code { font-family: var(--font-mono); color: var(--fg-3); }
+.maude .sv-ds-picker { font-family: var(--font-mono); color: var(--fg-2); }
+.maude .sv-ds-picker select { background: var(--bg-3); color: var(--fg-0); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-mono); padding: 2px 6px; }
+.maude .sv-ds-description { color: var(--fg-1); font-family: var(--font-body); }
+.maude .sv-section h2 { font-family: var(--font-mono); color: var(--fg-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); }
+.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); }
+.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); }
+.maude .sv-preview-card:hover { border-color: var(--border-default); box-shadow: var(--shadow-md); }
+.maude .sv-preview-foot { font-family: var(--font-mono); }
+.maude .sv-preview-foot strong { color: var(--fg-0); font-family: var(--font-body); }
+.maude .sv-preview-foot code { color: var(--fg-3); }
+.maude .sv-empty { color: var(--fg-3); }
+.maude .sv-empty code { font-family: var(--font-mono); background: var(--bg-3); color: var(--accent); border-radius: var(--radius-xs); padding: 1px 5px; }
+
+}

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

@@ -18,7 +18,16 @@
 
 @import url('./0-reset.css');
 @import url('./1-tokens.css');
+/* Plan B — maude DS token ladder, scoped under `.maude[data-theme]` (additive;
+   drives the rewritten `.st-*` chrome without disturbing the legacy amber tokens). */
+@import url('./1-tokens-maude.css');
 @import url('./2-layout.css');
 @import url('./3-shell.css');
+/* Plan B — maude DS studio chrome (.st-* ported from Studio.css), grown per slice. */
+@import url('./3-shell-maude.css');
 @import url('./4-components.css');
+/* Plan B — maude DS shared component classes (.btn/.kbd/.callout), scoped under `.maude`. */
+@import url('./4-components-maude.css');
+/* Plan B — maude redesign of remaining legacy shell surfaces (HelpModal, tour, what's-new, SystemView, CommentBar). */
+@import url('./5-maude-overrides.css');
 @import url('./5-utilities.css');

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

@@ -974,7 +974,7 @@ button { font: inherit; }
 }
 /* Phase 6 — the shell-side composer / focused-row / pin-strip surfaces are
  * gone; pins + composer + thread popover live inside the canvas iframe
- * (plugins/design/dev-server/comments-overlay.{tsx,css}). The remaining
+ * (apps/studio/comments-overlay.{tsx,css}). The remaining
  * `.comment-bar` and `.cb-row.strip` rules below render the residual
  * open-count summary the shell still surfaces in the BottomBar. */