@1agh/maude 0.40.0 → 0.42.0

package/apps/studio/contextual-toolbar.tsx

@@ -28,10 +28,19 @@
  *             the 180 ms position tween per the plan note.
  */
 
-import { useEffect, useRef } from 'react';
-
+import { type ReactNode, useEffect, useRef } from 'react';
 import { resolveSelectionEl } from './dom-selection.ts';
-import { useSelectionSet } from './use-selection-set.tsx';
+import { isElementDragActive } from './drag-state.ts';
+import {
+  type AlignAxisMode,
+  computeAlign,
+  computeDistribute,
+  computeTidyGrid,
+  type KeyedRect,
+  type MovedRect,
+  type SpacingAxis,
+} from './equal-spacing-detector.ts';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
 
 const CTX_TOOLBAR_CSS = `
 .dc-elem-ctx-tb {
@@ -66,11 +75,17 @@ const CTX_TOOLBAR_CSS = `
   font: inherit;
   cursor: pointer;
   color: inherit;
+  display: inline-flex;
+  align-items: center;
   transition: background-color 80ms linear;
 }
-.dc-elem-ctx-tb button:hover {
+.dc-elem-ctx-tb button:hover:not(:disabled) {
   background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
 }
+.dc-elem-ctx-tb button:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
 .dc-elem-ctx-tb .dc-elem-ctx-count {
   padding: 4px 8px 4px 10px;
   color: var(--maude-chrome-fg-1, rgba(40,30,20,0.7));
@@ -78,6 +93,17 @@ const CTX_TOOLBAR_CSS = `
   margin-right: 2px;
   font-variant-numeric: tabular-nums;
 }
+.dc-elem-ctx-tb .dc-elem-ctx-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.dc-elem-ctx-tb .dc-elem-ctx-divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--maude-chrome-border, rgba(0,0,0,0.10));
+  margin: 0 4px;
+}
 @media (prefers-reduced-motion: reduce) {
   .dc-elem-ctx-tb, .dc-elem-ctx-tb button { transition: none; }
 }
@@ -133,6 +159,98 @@ function openComposerForSelection(
   }
 }
 
+interface AlignTarget {
+  sel: Selection;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/**
+ * Resolve every selection to its current world-space box, gated on
+ * absolute/fixed positioning — align/distribute/tidy-up write `left`/`top`,
+ * which is only meaningful for out-of-flow elements (this codebase
+ * deliberately never does an implicit convert-to-absolute-on-drag; see the
+ * Stage-D dogfood notes). Returns `null` (all-or-nothing) if any selection
+ * doesn't resolve, or isn't out-of-flow, or has a non-numeric `left`/`top`
+ * (e.g. positioned via `right`/`bottom` instead — a known v1 limit).
+ */
+function resolveAlignTargets(sels: Selection[]): AlignTarget[] | null {
+  const out: AlignTarget[] = [];
+  for (const sel of sels) {
+    const node = resolveSelectionEl(document, sel);
+    if (!node) return null;
+    const cs = getComputedStyle(node as HTMLElement);
+    if (cs.position !== 'absolute' && cs.position !== 'fixed') return null;
+    const left = Number.parseFloat(cs.left);
+    const top = Number.parseFloat(cs.top);
+    if (!Number.isFinite(left) || !Number.isFinite(top)) return null;
+    out.push({
+      sel,
+      x: left,
+      y: top,
+      w: (node as HTMLElement).offsetWidth,
+      h: (node as HTMLElement).offsetHeight,
+    });
+  }
+  return out;
+}
+
+/** Post one `reposition-request` per moved rect — the same message shape +
+ *  write lane (`repositionElement` → `/_api/edit-css` ×2, per-prop undo) an
+ *  in-canvas element drag already posts. No new endpoint, no new trust
+ *  boundary; Cmd+Z steps back one element at a time (same N-step precedent
+ *  as Task L4's paste-style). */
+function commitMoves(targets: AlignTarget[], moved: MovedRect[]): void {
+  for (const m of moved) {
+    const t = targets[Number(m.key)];
+    if (!t?.sel.id) continue;
+    try {
+      window.parent.postMessage(
+        {
+          dgn: 'reposition-request',
+          id: t.sel.id,
+          left: m.x,
+          top: m.y,
+          beforeLeft: Math.round(t.x),
+          beforeTop: Math.round(t.y),
+          idIndex: t.sel.index ?? 0,
+        },
+        '*'
+      );
+    } catch {
+      /* detached / cross-origin */
+    }
+  }
+}
+
+function toKeyedRects(targets: AlignTarget[]): KeyedRect[] {
+  return targets.map((t, i) => ({ key: String(i), x: t.x, y: t.y, w: t.w, h: t.h }));
+}
+
+function CtxIconButton({
+  label,
+  title,
+  onClick,
+  disabled,
+  children,
+}: {
+  label: string;
+  title: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <button type="button" title={title} aria-label={label} onClick={onClick} disabled={disabled}>
+      <span className="dc-elem-ctx-icon" aria-hidden="true">
+        {children}
+      </span>
+    </button>
+  );
+}
+
 export function ContextualToolbar() {
   ensureStyles();
   const { selected } = useSelectionSet();
@@ -154,6 +272,18 @@ export function ContextualToolbar() {
     }
     const tick = () => {
       rafRef.current = null;
+      // Dogfood 2026-07-07 — "hrozně zavaší ten toolbar" during a reorder drag:
+      // the floating pill has nothing useful to say mid-drag anyway (Inspect /
+      // Copy CSS / Copy ID on an element that's about to move), and its own
+      // per-frame resolveSelectionEl + getBoundingClientRect work was
+      // compounding with the drag's own DOM churn + the resize/spacing
+      // overlays' rAF loops. Hide it for the duration, like Figma/Webflow do.
+      if (isElementDragActive()) {
+        div.style.display = 'none';
+        div.setAttribute('data-on', 'false');
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
       let xMin = Number.POSITIVE_INFINITY;
       let yMin = Number.POSITIVE_INFINITY;
       let xMax = Number.NEGATIVE_INFINITY;
@@ -204,6 +334,30 @@ export function ContextualToolbar() {
   const primary = elementSelections[0];
   const count = elementSelections.length;
 
+  // Task L5 — align (≥2) / distribute (≥3) / tidy-up (≥2) for a multi-element
+  // selection. Button enablement is count-gated (matching MultiArtboardToolbar's
+  // G7 cluster); the absolute/fixed-positioning eligibility check happens lazily
+  // on click via `resolveAlignTargets` (a silent no-op otherwise, rather than a
+  // per-frame DOM scan just to grey out a button).
+  const alignOk = count >= 2;
+  const distributeOk = count >= 3;
+
+  const runAlign = (mode: AlignAxisMode) => {
+    const targets = resolveAlignTargets(elementSelections);
+    if (!targets) return;
+    commitMoves(targets, computeAlign(toKeyedRects(targets), mode));
+  };
+  const runDistribute = (axis: SpacingAxis) => {
+    const targets = resolveAlignTargets(elementSelections);
+    if (!targets) return;
+    commitMoves(targets, computeDistribute(toKeyedRects(targets), axis));
+  };
+  const runTidyUp = () => {
+    const targets = resolveAlignTargets(elementSelections);
+    if (!targets) return;
+    commitMoves(targets, computeTidyGrid(toKeyedRects(targets)));
+  };
+
   return (
     <div ref={ref} className="dc-elem-ctx-tb" role="toolbar" aria-label="Element actions">
       <span className="dc-elem-ctx-count">{count === 1 ? '1 element' : `${count} elements`}</span>
@@ -247,6 +401,110 @@ export function ContextualToolbar() {
       >
         Comment
       </button>
+      {alignOk && (
+        <>
+          <span className="dc-elem-ctx-divider" aria-hidden="true" />
+          <CtxIconButton label="Align left" title="Align left" onClick={() => runAlign('left')}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="0.5" y1="0.5" x2="0.5" y2="13.5" stroke="currentColor" />
+              <rect x="1" y="2" width="7" height="3" fill="currentColor" />
+              <rect x="1" y="9" width="11" height="3" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton
+            label="Align center horizontally"
+            title="Align center (horizontal)"
+            onClick={() => runAlign('center-x')}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="7" y1="0.5" x2="7" y2="13.5" stroke="currentColor" />
+              <rect x="3.5" y="2" width="7" height="3" fill="currentColor" />
+              <rect x="1.5" y="9" width="11" height="3" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton label="Align right" title="Align right" onClick={() => runAlign('right')}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="13.5" y1="0.5" x2="13.5" y2="13.5" stroke="currentColor" />
+              <rect x="6" y="2" width="7" height="3" fill="currentColor" />
+              <rect x="2" y="9" width="11" height="3" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton label="Align top" title="Align top" onClick={() => runAlign('top')}>
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="0.5" y1="0.5" x2="13.5" y2="0.5" stroke="currentColor" />
+              <rect x="2" y="1" width="3" height="7" fill="currentColor" />
+              <rect x="9" y="1" width="3" height="11" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton
+            label="Align center vertically"
+            title="Align center (vertical)"
+            onClick={() => runAlign('center-y')}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="0.5" y1="7" x2="13.5" y2="7" stroke="currentColor" />
+              <rect x="2" y="3.5" width="3" height="7" fill="currentColor" />
+              <rect x="9" y="1.5" width="3" height="11" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton
+            label="Align bottom"
+            title="Align bottom"
+            onClick={() => runAlign('bottom')}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <line x1="0.5" y1="13.5" x2="13.5" y2="13.5" stroke="currentColor" />
+              <rect x="2" y="6" width="3" height="7" fill="currentColor" />
+              <rect x="9" y="2" width="3" height="11" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <span className="dc-elem-ctx-divider" aria-hidden="true" />
+          <CtxIconButton
+            label="Distribute horizontally"
+            title={
+              distributeOk
+                ? 'Distribute horizontally — equal gaps between elements'
+                : 'Select at least 3 elements to distribute'
+            }
+            disabled={!distributeOk}
+            onClick={() => runDistribute('x')}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <rect x="0.5" y="3" width="3" height="8" fill="currentColor" />
+              <rect x="5.5" y="3" width="3" height="8" fill="currentColor" />
+              <rect x="10.5" y="3" width="3" height="8" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton
+            label="Distribute vertically"
+            title={
+              distributeOk
+                ? 'Distribute vertically — equal gaps between elements'
+                : 'Select at least 3 elements to distribute'
+            }
+            disabled={!distributeOk}
+            onClick={() => runDistribute('y')}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <rect x="3" y="0.5" width="8" height="3" fill="currentColor" />
+              <rect x="3" y="5.5" width="8" height="3" fill="currentColor" />
+              <rect x="3" y="10.5" width="8" height="3" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+          <CtxIconButton
+            label="Tidy up into a grid"
+            title="Tidy up — snap into a clean grid"
+            onClick={runTidyUp}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <rect x="0.5" y="0.5" width="5.5" height="5.5" fill="currentColor" />
+              <rect x="8" y="0.5" width="5.5" height="5.5" fill="currentColor" />
+              <rect x="0.5" y="8" width="5.5" height="5.5" fill="currentColor" />
+              <rect x="8" y="8" width="5.5" height="5.5" fill="currentColor" />
+            </svg>
+          </CtxIconButton>
+        </>
+      )}
     </div>
   );
 }

package/apps/studio/cursors-overlay.tsx

@@ -55,7 +55,7 @@ const CURSOR_CSS = `
   top: 14px;
   left: 10px;
   padding: 1px 8px;
-  font-family: var(--font-mono, ui-monospace, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-weight: 500;
   font-size: 10px;
   line-height: 1.4;
@@ -72,7 +72,7 @@ const CURSOR_CSS = `
   left: 0;
   pointer-events: none;
   border: 2px solid;
-  border-radius: var(--radius-sm, 2px);
+  border-radius: 2px;
   box-sizing: border-box;
   will-change: transform, width, height;
 }
@@ -81,12 +81,12 @@ const CURSOR_CSS = `
   top: -18px;
   left: -2px;
   padding: 1px 5px;
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  font-family: system-ui, -apple-system, sans-serif;
   font-weight: 600;
   font-size: 10px;
   line-height: 1.3;
   color: var(--maude-hud-accent-fg, #fff);
-  border-radius: var(--radius-sm, 2px) var(--radius-sm, 2px) 0 0;
+  border-radius: 2px 2px 0 0;
   white-space: nowrap;
 }
 /* Phase 30 / DDR-120 — soft editing-presence. When a peer (human or a bridged