@1agh/maude 1.4.3 → 1.4.5

package/apps/studio/client/panels/SourceConflictPanel.jsx

@@ -12,7 +12,8 @@
 //
 // No hashes, epochs or lane names: "Your version" / "The project's version".
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useLinkDialogFocus } from '../share-dialog.jsx';
 
 /** Line diff by longest common subsequence — bounded, for a canvas source. */
 export function lineDiff(a, b, max = 2000) {
@@ -63,7 +64,7 @@ export default function SourceConflictPanel({ slug, onClose }) {
   const [sides, setSides] = useState(null);
   const [error, setError] = useState('');
   const [busy, setBusy] = useState('');
-  const ref = useRef(null);
+  const ref = useLinkDialogFocus(onClose);
 
   useEffect(() => {
     let alive = true;
@@ -80,19 +81,6 @@ export default function SourceConflictPanel({ slug, onClose }) {
     };
   }, [slug]);
 
-  useEffect(() => {
-    const prev = document.activeElement;
-    ref.current?.querySelector('button')?.focus();
-    const onKey = (e) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('keydown', onKey);
-      prev?.focus?.();
-    };
-  }, [onClose]);
-
   const rows = useMemo(() => (sides ? withContext(lineDiff(sides.mine ?? '', sides.theirs ?? '')) : []), [sides]);
 
   async function choose(choice) {
@@ -120,8 +108,8 @@ export default function SourceConflictPanel({ slug, onClose }) {
       <div className="gi-dialog scp-dialog" ref={ref} data-testid="source-conflict-panel">
         <div className="tp-dialog-head">
           <div>
-            <h2 id="scp-title">Two versions of {slug}</h2>
-            <p>Your change and a teammate’s touched the same lines. Nothing is lost — choose which one the project keeps.</p>
+            <h2 id="scp-title">Review changes to {slug}</h2>
+            <p>Your draft has not been shared. Compare it with the project’s version before choosing what to keep.</p>
           </div>
           <button type="button" className="btn btn--ghost btn--sm" onClick={() => onClose()} aria-label="Close" data-testid="source-conflict-close">
             ×
@@ -129,6 +117,20 @@ export default function SourceConflictPanel({ slug, onClose }) {
         </div>
         {sides && (
           <>
+            <div className="scp-recovery">
+              <details>
+                <summary>Original draft</summary>
+                {sides.original !== null && sides.original !== undefined ? (
+                  <pre tabIndex={0} role="region" aria-label="Original draft" data-testid="source-conflict-original">{sides.original}</pre>
+                ) : <p>The original draft is not available on this device.</p>}
+              </details>
+              <details>
+                <summary>Starting version</summary>
+                {sides.base !== null && sides.base !== undefined ? (
+                  <pre tabIndex={0} role="region" aria-label="Starting version" data-testid="source-conflict-base">{sides.base}</pre>
+                ) : <p>The version this draft started from is not known.</p>}
+              </details>
+            </div>
             <div className="scp-legend" aria-hidden="true">
               <span className="scp-key scp-key--mine">Your version</span>
               <span className="scp-key scp-key--theirs">The project’s version</span>

package/apps/studio/client/styles/3-shell-maude.css

@@ -80,7 +80,7 @@
 .st-mb-file b { color: var(--fg-0); font-weight: 600; }
 .st-mb-sep { width: 1px; height: 16px; background: var(--border-default); }
 .st-mb-count { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); }
-.st-mb-proj { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--status-success); }
+.st-mb-proj { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); }
 .st-reportbug {
   appearance: none; border: 0; background: transparent; cursor: pointer;
   width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-sm);
@@ -193,7 +193,7 @@
   font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); z-index: 30;
 }
 .st-sb-slot { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
-.st-sb-slot .lbl { color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; flex: none; }
+.st-sb-slot .lbl { color: var(--fg-2); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: 10px; flex: none; }
 .st-sb-slot .val { color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .st-sb-slot + .st-sb-slot { padding-left: var(--space-4); border-left: 1px solid var(--border-subtle); }
 .st-sb-active { font-weight: 500; }
@@ -225,7 +225,7 @@
 
 /* The running release. Ambient, not a state to act on — so it sits at the same
    weight as a slot label rather than at .val's foreground. No new tokens. */
-.st-sb-version .val { color: var(--fg-3); }
+.st-sb-version .val { color: var(--fg-2); }
 
 /* ═══ Task 4 — body row · sidebar · tree · rail ═══════════════════════════════ */
 
@@ -243,7 +243,7 @@
 .st-dockslot > .st-rpanel,
 .st-dockslot > .st-sidebar { flex: 1 1 auto; width: 100%; min-height: 0; }
 .st-docktabs { display: flex; gap: 2px; padding: var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg-1); flex: none; }
-.st-docktab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); transition: color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.st-docktab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); transition: color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
 .st-docktab:hover { color: var(--fg-1); background: var(--bg-2); }
 .st-docktab.is-active { color: var(--fg-0); background: var(--bg-2); box-shadow: inset 0 -2px 0 var(--accent); }
 .st-docktab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@@ -308,8 +308,10 @@
    accent language as .st-row.is-drop-target. */
 .st-tree-sec-hd.is-drop-target { background: var(--accent-tint); color: var(--fg-0); box-shadow: inset 2px 0 0 var(--accent); }
 .st-tree-sec-hd .st-sec-name { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
+/* --fg-2, not --fg-3: a 10px count is text, and --fg-3 is 3.0:1 on the
+   sidebar — below WCAG AA (axe on the cloud cell, F3 S19, 2026-09-24). */
 .st-tree-sec-hd .st-pill {
-  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
+  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
   padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
 }
 .st-tree-empty { padding: var(--space-2) var(--space-5); color: var(--fg-3); font-size: var(--type-xs); font-style: italic; }
@@ -357,6 +359,8 @@
 }
 /* delete affordance — sibling of the row button (can't nest buttons). */
 .st-row-wrap { position: relative; display: flex; align-items: center; }
+.st-tree-item:focus-visible { outline: none; }
+.st-tree-item:focus-visible > .st-row-wrap { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
 .st-row-wrap .st-row { flex: 1; }
 .st-row-del {
   position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%);
@@ -564,6 +568,10 @@
 .st-banner-close:hover { background: color-mix(in oklab, var(--fg-0) 12%, transparent); color: var(--fg-0); }
 
 /* ─── Command palette (⌘K) ───────────────────────────────────────────────── */
+/* The informational role notice sits BELOW a modal's scrim (9000): it covered
+   the preview dialog's own header (S19). Warnings and errors keep
+   .st-banner's 9100 and stay visible over a dialog. */
+.st-banner.st-banner--info { z-index: 8990; }
 .st-scrim { position: fixed; inset: 0; background: color-mix(in oklab, var(--bg-0) 62%, transparent); z-index: 9000; display: grid; place-items: start center; padding-top: 12vh; }
 .st-palette {
   width: 560px; max-width: 92vw; background: var(--bg-2); border: 1px solid var(--border-default);
@@ -1563,7 +1571,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 }
 .st-skel-cap {
   font-size: var(--type-xs); letter-spacing: var(--tracking-wide);
-  text-transform: uppercase; color: var(--fg-3);
+  text-transform: uppercase; color: var(--fg-2);
 }
 .skel {
   display: block;
@@ -1744,7 +1752,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gp-panel-title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-md); color: var(--fg-0); flex: none; }
 .gp-count { font-family: var(--font-mono); font-size: var(--type-xs); font-weight: 600; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-muted); white-space: nowrap; flex: none; }
 .gp-spacer { flex: 1; min-width: var(--space-2); }
-.gp-draft { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); white-space: nowrap; min-width: 0; flex: 0 1 auto; }
+.gp-draft { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-1); display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); white-space: nowrap; min-width: 0; flex: 0 1 auto; }
 .gp-draft b { color: var(--fg-0); font-weight: 600; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
 .gp-draft .gp-sep { color: var(--fg-3); }
 .gp-x { appearance: none; border: none; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: var(--radius-xs); }
@@ -2263,7 +2271,7 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .dv-zoom-btn:hover { background: var(--bg-3); color: var(--fg-0); }
 .dv-zoom-val { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); min-width: 44px; text-align: center; cursor: pointer; appearance: none; border: none; background: transparent; }
 .dv-zoom-val:hover { color: var(--fg-0); }
-.dv-zoom-sync { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-3); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); margin-left: var(--space-1); }
+.dv-zoom-sync { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); padding-left: var(--space-2); border-left: 1px solid var(--border-subtle); margin-left: var(--space-1); }
 
 /* overlay / slider compare (shares the locked view; frozen layers for the wipe) */
 .dv-overlay { --dv-split: 52%; position: relative; flex: 1; min-height: 0; margin: 0 auto; width: 100%; max-width: 900px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
@@ -2639,7 +2647,11 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .sp-ai-held { display: flex; flex-direction: column; gap: var(--space-2); }
 .sp-ai-actions { display: flex; gap: var(--space-2); }
 /* ── SourceConflictPanel (plan T28) — two versions, line by line. ── */
-.gi-dialog.scp-dialog { width: min(760px, 94vw); max-height: min(820px, 90vh); overflow: hidden; display: flex; flex-direction: column; padding: var(--space-6); gap: var(--space-4); }
+.gi-dialog.scp-dialog { width: min(760px, 94vw); max-height: min(820px, 90vh); overflow: auto; display: flex; flex-direction: column; padding: var(--space-6); gap: var(--space-4); }
+.scp-recovery { display: grid; gap: var(--space-2); font-size: var(--type-xs); color: var(--fg-1); }
+.scp-recovery summary { cursor: pointer; padding: var(--space-2) 0; }
+.scp-recovery pre { margin: 0; padding: var(--space-3); max-height: 160px; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-1); font: var(--type-xs)/1.55 var(--font-mono); }
+.scp-recovery summary:focus-visible, .scp-recovery pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .scp-legend { display: flex; gap: var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
 .scp-key::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--space-2); vertical-align: -1px; }
 .scp-key--mine::before { background: color-mix(in oklch, var(--status-warn) 45%, transparent); }

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

@@ -1614,7 +1614,9 @@
   position: fixed;
   left: 16px;
   bottom: 16px;
-  z-index: 9001;
+  /* below a modal's scrim (.st-scrim 9000): it sat on top of the history
+     preview dialog (S19). */
+  z-index: 8990;
   display: flex;
   align-items: center;
   gap: 12px;
@@ -2030,7 +2032,7 @@
 .st-cloudwho-out {
   font: inherit;
   font-size: 12px;
-  color: var(--u-fg-3);
+  color: var(--u-fg-2);
   background: none;
   border: 0;
   cursor: pointer;