@1agh/maude 0.18.2 → 0.19.1

package/cli/bin/maude.mjs

@@ -1,7 +1,9 @@
 #!/usr/bin/env node
+import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 // maude — Maude CLI. Scaffold .ai workspace, run dev servers, manage config.
 import { fileURLToPath } from 'node:url';
+import { runUpdateCheck } from '../lib/update-check.mjs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -16,10 +18,24 @@ const COMMANDS = {
   version: () => import('../commands/version.mjs'),
 };
 
+function readCurrentVersion() {
+  try {
+    const raw = readFileSync(resolve(PKG_ROOT, 'package.json'), 'utf8');
+    return JSON.parse(raw).version || null;
+  } catch {
+    return null;
+  }
+}
+
 async function main(argv) {
   const args = argv.slice(2);
   const cmd = args[0];
 
+  // Print "update available" notice (from cached registry data) before
+  // dispatch, so it lands on stderr ahead of any subcommand output. Hot
+  // path is sync + non-blocking — the stale-cache refresh is detached.
+  runUpdateCheck(readCurrentVersion());
+
   if (!cmd || cmd === '--help' || cmd === '-h') {
     const { run } = await COMMANDS.help();
     return run({ args: args.slice(1), pkgRoot: PKG_ROOT });

package/cli/lib/update-check.mjs

@@ -0,0 +1,145 @@
+// Update-availability notifier for the `maude` CLI.
+//
+// Design (intentional, see PR discussion):
+//   • Hot path reads ONLY the local cache. Never blocks on a network fetch.
+//   • A detached child process refreshes the cache when stale (>24h). The
+//     notice for a freshly published version therefore appears on the run
+//     AFTER the cache rolls — same pattern as `update-notifier`.
+//   • Opt-out via MAUDE_NO_UPDATE_CHECK=1, NO_UPDATE_NOTIFIER=1, CI=true,
+//     or any non-TTY stderr (pipes, CI logs, etc.).
+//   • Best-effort everywhere: cache read/write, registry fetch, and spawn
+//     all swallow errors. The CLI must never fail because of this module.
+
+import { spawn } from 'node:child_process';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const PKG_NAME = '@1agh/maude';
+const REGISTRY_URL = `https://registry.npmjs.org/${PKG_NAME}/latest`;
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+const FETCH_TIMEOUT_MS = 3000;
+
+function cachePath() {
+  const base = process.env.XDG_CACHE_HOME || join(homedir(), '.cache');
+  return join(base, 'maude', 'update-check.json');
+}
+
+function shouldSkip() {
+  if (process.env.MAUDE_NO_UPDATE_CHECK) return true;
+  if (process.env.NO_UPDATE_NOTIFIER) return true;
+  if (process.env.CI) return true;
+  if (!process.stderr.isTTY) return true;
+  return false;
+}
+
+// Compare semver x.y.z (ignoring prerelease/build metadata). Returns
+// positive if a > b, negative if a < b, 0 if equal.
+export function cmpSemver(a, b) {
+  const parse = (v) =>
+    String(v)
+      .split(/[-+]/)[0]
+      .split('.')
+      .map((n) => Number(n) || 0);
+  const pa = parse(a);
+  const pb = parse(b);
+  for (let i = 0; i < 3; i += 1) {
+    const x = pa[i] || 0;
+    const y = pb[i] || 0;
+    if (x !== y) return x - y;
+  }
+  return 0;
+}
+
+function readCacheSync() {
+  try {
+    const raw = readFileSync(cachePath(), 'utf8');
+    const parsed = JSON.parse(raw);
+    if (typeof parsed?.latest === 'string' && typeof parsed?.checkedAt === 'number') {
+      return parsed;
+    }
+  } catch {
+    /* missing or corrupt — treat as no cache */
+  }
+  return null;
+}
+
+function writeCacheSync(data) {
+  const path = cachePath();
+  try {
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, JSON.stringify(data), 'utf8');
+  } catch {
+    /* read-only fs / no permission — non-fatal */
+  }
+}
+
+function printNotice(current, latest) {
+  const msg = [
+    '',
+    `  ⚠ maude update available: ${current} → ${latest}`,
+    `    Run: npm i -g ${PKG_NAME}@latest   (or pnpm add -g / bun add -g)`,
+    '',
+    '',
+  ].join('\n');
+  process.stderr.write(msg);
+}
+
+function spawnDetachedRefresh() {
+  try {
+    const self = fileURLToPath(import.meta.url);
+    const child = spawn(process.execPath, [self, '--refresh'], {
+      detached: true,
+      stdio: 'ignore',
+      windowsHide: true,
+      env: { ...process.env, MAUDE_UPDATE_CHECK_CHILD: '1' },
+    });
+    child.unref();
+  } catch {
+    /* spawn failed — skip the refresh, will retry next run */
+  }
+}
+
+async function refreshCache() {
+  const ac = new AbortController();
+  const timer = setTimeout(() => ac.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(REGISTRY_URL, {
+      headers: { accept: 'application/json' },
+      signal: ac.signal,
+    });
+    if (!res.ok) return;
+    const json = await res.json();
+    if (typeof json?.version === 'string') {
+      writeCacheSync({ latest: json.version, checkedAt: Date.now() });
+    }
+  } catch {
+    /* offline, DNS failure, registry down — ignore */
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/**
+ * Run the update check from the CLI entry. Synchronous-fast: reads cache,
+ * prints notice if outdated, kicks off a detached refresh when the cache
+ * is stale, returns immediately.
+ */
+export function runUpdateCheck(currentVersion) {
+  if (shouldSkip()) return;
+  if (!currentVersion) return;
+
+  const cache = readCacheSync();
+  if (cache?.latest && cmpSemver(cache.latest, currentVersion) > 0) {
+    printNotice(currentVersion, cache.latest);
+  }
+  const isStale = !cache || Date.now() - cache.checkedAt > CACHE_TTL_MS;
+  if (isStale) spawnDetachedRefresh();
+}
+
+// Entrypoint when invoked as a detached refresh child:
+//   node cli/lib/update-check.mjs --refresh
+if (process.argv[1]?.endsWith('update-check.mjs') && process.argv.includes('--refresh')) {
+  refreshCache().catch(() => process.exit(0));
+}

package/cli/lib/update-check.test.mjs

@@ -0,0 +1,32 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { cmpSemver } from './update-check.mjs';
+
+test('cmpSemver: equal versions return 0', () => {
+  assert.equal(cmpSemver('0.18.2', '0.18.2'), 0);
+  assert.equal(cmpSemver('1.0.0', '1.0.0'), 0);
+});
+
+test('cmpSemver: newer patch > older', () => {
+  assert.ok(cmpSemver('0.18.3', '0.18.2') > 0);
+  assert.ok(cmpSemver('0.18.2', '0.18.3') < 0);
+});
+
+test('cmpSemver: newer minor > older', () => {
+  assert.ok(cmpSemver('0.19.0', '0.18.99') > 0);
+  assert.ok(cmpSemver('0.18.99', '0.19.0') < 0);
+});
+
+test('cmpSemver: newer major > older', () => {
+  assert.ok(cmpSemver('1.0.0', '0.99.99') > 0);
+});
+
+test('cmpSemver: prerelease tags stripped (compares core only)', () => {
+  assert.equal(cmpSemver('0.18.2-beta.1', '0.18.2'), 0);
+  assert.ok(cmpSemver('0.19.0-rc.0', '0.18.2') > 0);
+});
+
+test('cmpSemver: missing components default to 0', () => {
+  assert.equal(cmpSemver('1', '1.0.0'), 0);
+  assert.equal(cmpSemver('1.2', '1.2.0'), 0);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1agh/maude",
-  "version": "0.18.2",
+  "version": "0.19.1",
   "description": "Marketplace of Claude Code plugins by Michal Dovrtěl: `design` (canvas-first design iteration) + `flow` (generic agentic workflow loop with .ai second brain). Ships the `maude` CLI (with `mdcc` legacy alias) to scaffold workspace, run the design dev server, and manage configs.",
   "type": "module",
   "engines": {
@@ -41,13 +41,13 @@
     "prepublishOnly": "bash scripts/check-version-parity.sh"
   },
   "optionalDependencies": {
-    "@1agh/maude-darwin-arm64": "0.18.2",
-    "@1agh/maude-darwin-x64": "0.18.2",
-    "@1agh/maude-linux-arm64": "0.18.2",
-    "@1agh/maude-linux-arm64-musl": "0.18.2",
-    "@1agh/maude-linux-x64": "0.18.2",
-    "@1agh/maude-linux-x64-musl": "0.18.2",
-    "@1agh/maude-win32-x64": "0.18.2"
+    "@1agh/maude-darwin-arm64": "0.19.1",
+    "@1agh/maude-darwin-x64": "0.19.1",
+    "@1agh/maude-linux-arm64": "0.19.1",
+    "@1agh/maude-linux-arm64-musl": "0.19.1",
+    "@1agh/maude-linux-x64": "0.19.1",
+    "@1agh/maude-linux-x64-musl": "0.19.1",
+    "@1agh/maude-win32-x64": "0.19.1"
   },
   "files": [
     "cli",

package/plugins/design/dev-server/annotations-context-toolbar.tsx

@@ -36,11 +36,11 @@ const TOOLBAR_CSS = `
   display: flex;
   align-items: center;
   gap: 6px;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, rgba(255,255,255,0.98)));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
+  border-radius: 8px;
   padding: 6px 8px;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
   color: var(--u-fg-0, var(--fg-0, #1a1a1a));
@@ -147,7 +147,10 @@ export function AnnotationContextToolbar() {
       return { color: false, fill: false, thickness: false, fontSize: false };
     }
     const allFillable = selectedStrokes.every((s) => s.tool === 'rect' || s.tool === 'ellipse');
-    const allThickness = selectedStrokes.every((s) => s.tool === 'pen' || s.tool === 'arrow');
+    // T20 — rect + ellipse now carry stroke weight too.
+    const allThickness = selectedStrokes.every(
+      (s) => s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse'
+    );
     const anyText = selectedStrokes.some((s) => s.tool === 'text');
     return {
       color: true,
@@ -226,7 +229,8 @@ export function AnnotationContextToolbar() {
     (w: number) => {
       if (!store) return;
       for (const s of selectedStrokes) {
-        if (s.tool === 'pen' || s.tool === 'arrow') {
+        // T20 — rect + ellipse now carry stroke weight.
+        if (s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse') {
           store.updateStroke(s.id, { width: w } as Partial<Stroke>);
         }
       }
@@ -263,7 +267,11 @@ export function AnnotationContextToolbar() {
     : undefined;
   const uniqThickness = caps.thickness
     ? uniformValue(
-        selectedStrokes.map((s) => (s.tool === 'pen' || s.tool === 'arrow' ? s.width : undefined))
+        selectedStrokes.map((s) =>
+          s.tool === 'pen' || s.tool === 'arrow' || s.tool === 'rect' || s.tool === 'ellipse'
+            ? s.width
+            : undefined
+        )
       )
     : undefined;
   const uniqFontSize = caps.fontSize

package/plugins/design/dev-server/annotations-layer.tsx

@@ -35,6 +35,7 @@ import { createPortal } from 'react-dom';
 
 import { AnnotationContextToolbar } from './annotations-context-toolbar.tsx';
 import { useViewportControllerContext, useWorldRefContext } from './canvas-lib.tsx';
+import { AnnotationResizeOverlay } from './use-annotation-resize.tsx';
 import { useAnnotationSelectionOptional } from './use-annotation-selection.tsx';
 import { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
@@ -457,15 +458,15 @@ const ANNOT_CSS = `
   display: flex;
   align-items: center;
   gap: 8px;
-  background: var(--u-bg-2, var(--bg-1, rgba(255,255,255,0.98)));
+  background: var(--u-bg-0, var(--bg-0, rgba(255,255,255,0.98)));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
+  border-radius: 8px;
   padding: 6px 10px;
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   color: var(--u-fg-0, rgba(40,30,20,0.85));
   z-index: 6;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   user-select: none;
 }
 .dc-annot-chrome .dc-annot-swatches { display: flex; gap: 4px; }
@@ -618,7 +619,7 @@ export { useAnnotationsVisibility } from './use-annotations-visibility.tsx';
 
 export function AnnotationsLayer() {
   ensureAnnotStyles();
-  const { tool } = useToolMode();
+  const { tool, setTool, sticky } = useToolMode();
   const controller = useViewportControllerContext();
   const vp = controller?.viewport ?? null;
   const worldRef = useWorldRefContext();
@@ -653,7 +654,11 @@ export function AnnotationsLayer() {
   const isDraw = tool === 'pen' || tool === 'rect' || tool === 'arrow' || tool === 'ellipse';
   const isErase = tool === 'eraser';
   const isActive = isDraw || isErase;
-  const supportsThickness = tool === 'pen' || tool === 'arrow';
+  // T20 — rect + ellipse expose stroke weight too (FigJam ships thickness on
+  // every shape). The annotation toolbar reads supportsThickness to decide
+  // whether to render the Thin / Thick chips.
+  const supportsThickness =
+    tool === 'pen' || tool === 'arrow' || tool === 'rect' || tool === 'ellipse';
   const supportsFill = tool === 'rect' || tool === 'ellipse';
 
   // Load existing annotations on mount.
@@ -839,7 +844,7 @@ export function AnnotationsLayer() {
           id,
           tool: 'rect',
           color,
-          width: STROKE_WIDTH_THIN,
+          width,
           x: wx,
           y: wy,
           w: 0,
@@ -851,7 +856,7 @@ export function AnnotationsLayer() {
           id,
           tool: 'ellipse',
           color,
-          width: STROKE_WIDTH_THIN,
+          width,
           cx: wx,
           cy: wy,
           rx: 0,
@@ -935,9 +940,38 @@ export function AnnotationsLayer() {
         scheduleSave(next);
         return next;
       });
+      // T18 — auto-select the freshly drawn shape so the user can immediately
+      // see + adjust it. annotSel is optional (some test harnesses mount
+      // AnnotationsLayer without the provider), so guard the call.
+      if (annotSel) annotSel.replace(committed.id);
     }
+    // T18 / T19 — flip the tool back to Move after every commit UNLESS sticky
+    // mode is locked on this tool. Sticky lets the user draw many shapes in a
+    // row (canonical pattern: tldraw double-click to lock). Eraser stays
+    // armed by default — that tool is destructive, not constructive.
+    const toolJustUsed = cur.tool;
+    if (toolJustUsed !== 'eraser') {
+      const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
+      if (!stickyOnThis) setTool('move');
+    }
+    setDrawing(null);
+  }, [isActive, isErase, visible, scheduleSave, annotSel, setTool, sticky]);
+
+  // T21 — abort a mid-stroke draw without committing. Dispatched by the
+  // canvas-shell Esc handler (`maude:cancel-stroke`). Safe to call when
+  // nothing is being drawn — the early-return on drawingRef keeps it
+  // a no-op.
+  const cancelStroke = useCallback(() => {
+    if (!drawingRef.current) return;
     setDrawing(null);
-  }, [isActive, isErase, visible, scheduleSave]);
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const onCancel = () => cancelStroke();
+    document.addEventListener('maude:cancel-stroke', onCancel);
+    return () => document.removeEventListener('maude:cancel-stroke', onCancel);
+  }, [cancelStroke]);
 
   const renderStrokes = useMemo(
     () => (drawing ? [...strokes, drawing] : strokes),
@@ -1064,8 +1098,9 @@ export function AnnotationsLayer() {
         return;
       }
 
-      // Empty world — start a drag-select gesture. A small movement falls
-      // back to a "click on empty world → clear selection" (Figma-style).
+      // Empty world — start a drag-select gesture. A bare click without
+      // moving is a no-op (post-Wave-2 feedback: click-on-empty-space
+      // does NOT clear selection; Esc is the canonical deselect).
       const addToSelection = e.shiftKey;
       let moved = false;
       const onMove = (mv: PointerEvent) => {
@@ -1080,8 +1115,8 @@ export function AnnotationsLayer() {
         document.removeEventListener('pointerup', onUp, true);
         document.removeEventListener('pointercancel', onUp, true);
         if (!moved) {
-          // True click on empty world → clear (unless modifier add-mode).
-          if (!addToSelection && annotSel.selectedIds.length > 0) annotSel.clear();
+          // Click without movement on empty world → no-op. Selection
+          // survives accidental misses; Esc is how the user deselects.
           return;
         }
         const final = marqueeRef.current;
@@ -1100,13 +1135,10 @@ export function AnnotationsLayer() {
             hits.push(s.id);
           }
         }
-        if (addToSelection) {
-          annotSel.add(hits);
-        } else if (hits.length === 0) {
-          annotSel.clear();
-        } else {
-          annotSel.replace(hits);
-        }
+        // Marquee that captured no strokes — preserve existing selection.
+        if (hits.length === 0) return;
+        if (addToSelection) annotSel.add(hits);
+        else annotSel.replace(hits);
       };
       document.addEventListener('pointermove', onMove, true);
       document.addEventListener('pointerup', onUp, true);
@@ -1257,6 +1289,7 @@ export function AnnotationsLayer() {
           />
         ) : null}
         <AnnotationContextToolbar />
+        {visible && tool === 'move' ? <AnnotationResizeOverlay store={strokesStore} /> : null}
         {isActive ? (
           <AnnotationsChrome
             color={color}
@@ -1382,8 +1415,14 @@ function AnnotationsSvg({
         <StrokeNode key={s.id} stroke={s} anchorsById={anchorsById} interactive={selectMode} />
       ))}
       {selectedStrokes.map((s) => (
-        <SelectionHalo key={`halo-${s.id}`} stroke={s} anchorsById={anchorsById} />
+        <SelectionHalo
+          key={`halo-${s.id}`}
+          stroke={s}
+          anchorsById={anchorsById}
+          multi={selectedStrokes.length > 1}
+        />
       ))}
+      <AnnotGroupBbox selectedStrokes={selectedStrokes} anchorsById={anchorsById} />
       {marquee ? (
         <rect
           className="dc-annot-marquee"
@@ -1507,12 +1546,26 @@ function TextEditor({
 function SelectionHalo({
   stroke,
   anchorsById,
+  multi,
 }: {
   stroke: Stroke;
   anchorsById: Map<string, RectStroke | EllipseStroke>;
+  multi: boolean;
 }) {
   const bbox = strokeBBox(stroke, anchorsById);
   if (!bbox) return null;
+  // T17 + post-Wave-2 fix — annotation halo idioms:
+  //   * Single select → 2 px solid border, NO ring, NO corner ticks.
+  //     The resize overlay (T23) renders the corner handles in screen-space,
+  //     so painting SVG ticks here too would duplicate them. The element
+  //     halo uses CSS box-shadow for the 18% ring; the SVG equivalent (a
+  //     second outline rect) reads as "double frame" rather than a halo —
+  //     user feedback flagged this immediately. Solid 2 px is enough signal
+  //     once the resize handles claim the corners.
+  //   * Multi member → 1.5 px solid full accent, no ring, no ticks (group
+  //     bbox above carries the container affordance).
+  // Marquee STAYS dashed (drawn elsewhere) — dashed is reserved for the
+  // ambient group-container + active-gesture idioms per DDR-046 rev 2.
   const pad = 4;
   return (
     <rect
@@ -1522,8 +1575,7 @@ function SelectionHalo({
       height={bbox.h + pad * 2}
       fill="none"
       stroke="var(--accent, #d63b1f)"
-      strokeWidth={1.5}
-      strokeDasharray="4 3"
+      strokeWidth={multi ? 1.5 : 2}
       vectorEffect="non-scaling-stroke"
       pointerEvents="none"
       rx={2}
@@ -1531,6 +1583,76 @@ function SelectionHalo({
   );
 }
 
+// T17 — group bbox dashed rect for multi-stroke annotation selection. Mirrors
+// the element-side GroupBbox idiom (1 px dashed accent + 6 × 6 corner handles).
+function AnnotGroupBbox({
+  selectedStrokes,
+  anchorsById,
+}: {
+  selectedStrokes: readonly Stroke[];
+  anchorsById: Map<string, RectStroke | EllipseStroke>;
+}) {
+  if (selectedStrokes.length < 2) return null;
+  let xMin = Number.POSITIVE_INFINITY;
+  let yMin = Number.POSITIVE_INFINITY;
+  let xMax = Number.NEGATIVE_INFINITY;
+  let yMax = Number.NEGATIVE_INFINITY;
+  let any = false;
+  for (const s of selectedStrokes) {
+    const b = strokeBBox(s, anchorsById);
+    if (!b) continue;
+    any = true;
+    if (b.x < xMin) xMin = b.x;
+    if (b.y < yMin) yMin = b.y;
+    if (b.x + b.w > xMax) xMax = b.x + b.w;
+    if (b.y + b.h > yMax) yMax = b.y + b.h;
+  }
+  if (!any) return null;
+  const pad = 6;
+  const x = xMin - pad;
+  const y = yMin - pad;
+  const w = xMax - xMin + pad * 2;
+  const h = yMax - yMin + pad * 2;
+  const handle = 6;
+  const inset = 3;
+  const handles = [
+    { corner: 'nw', x: x - inset, y: y - inset },
+    { corner: 'ne', x: x + w - handle + inset, y: y - inset },
+    { corner: 'sw', x: x - inset, y: y + h - handle + inset },
+    { corner: 'se', x: x + w - handle + inset, y: y + h - handle + inset },
+  ];
+  return (
+    <g pointerEvents="none">
+      <rect
+        x={x}
+        y={y}
+        width={w}
+        height={h}
+        fill="none"
+        stroke="var(--accent, #d63b1f)"
+        strokeWidth={1}
+        strokeDasharray="4 3"
+        vectorEffect="non-scaling-stroke"
+        rx={2}
+      />
+      {handles.map((c) => (
+        <rect
+          key={c.corner}
+          x={c.x}
+          y={c.y}
+          width={handle}
+          height={handle}
+          fill="var(--accent, #d63b1f)"
+          stroke="var(--bg-0, #ffffff)"
+          strokeWidth={1}
+          vectorEffect="non-scaling-stroke"
+          rx={1}
+        />
+      ))}
+    </g>
+  );
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Stroke renderer