@1agh/maude 0.27.0 → 0.28.1

package/plugins/design/dev-server/canvas-comment-mount.tsx

@@ -27,9 +27,12 @@
  */
 
 import {
+  Component,
   type ComponentType,
-  type ReactNode,
   createElement,
+  Fragment,
+  type ReactNode,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -347,6 +350,27 @@ export interface MountCanvasOptions {
   commentsEnabled: boolean;
 }
 
+// The lite provider tree wrapping a canvas component (tool + selection +
+// comment layer). Pulled out so both the live render and the error-fallback
+// render build the identical envelope.
+//
+// NB: the CanvasActivityProvider (Phase 13 / DDR-029) is NOT mounted here — it
+// lives inside `DesignCanvas` (canvas-lib). comment-mount.js and canvas-lib are
+// SEPARATE bundles, so a context provided here would be a different instance
+// from the one DCArtboard (canvas-lib) consumes. Same reasoning the real
+// ToolProvider lives in DesignCanvas, not in this layer's MaybeToolProvider.
+function buildCanvasTree(Canvas: ComponentType, file: string | undefined): ReactNode {
+  return createElement(
+    MaybeToolProvider,
+    null,
+    createElement(
+      MaybeSelectionSetProvider,
+      null,
+      createElement(CommentHost, { file }, createElement(Canvas))
+    )
+  );
+}
+
 export function mountCanvas(Canvas: ComponentType, opts: MountCanvasOptions): void {
   const root = createRoot(opts.rootEl);
   if (!opts.commentsEnabled) {
@@ -354,15 +378,146 @@ export function mountCanvas(Canvas: ComponentType, opts: MountCanvasOptions): vo
     return;
   }
   const file = opts.file ?? deriveFile();
-  root.render(
+  root.render(createElement(CanvasHmrRuntime, { initialCanvas: Canvas, file }));
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Phase 13.1 / DDR-077 — HMR error resilience during agent editing.
+//
+// When an agent (`/design:edit` / `/design:new`) live-edits a canvas, a
+// half-saved file (missing import, undefined symbol, transpile error) used to
+// blank the canvas to white: the shell did `location.reload()` straight into the
+// broken module. The shell now soft-reloads (import-before-swap, see
+// `templates/_shell.html`) so a build/import error never tears down the good
+// render. This runtime closes the remaining gap — a *render-time* throw — by
+// keeping the last good canvas mounted via an error boundary and surfacing a
+// "holding last good" toast instead of a white screen. Strictly gated by the
+// shell on agent-active; manual edits keep the plain reload (so this is inert
+// for solo hand-editing). The runtime exposes its swap/hold API on
+// `window.__maudeCanvasRuntime` (the same window-handshake style the shell
+// already uses for `__canvas_rel__` etc.).
+
+export interface CanvasRuntimeApi {
+  /** Swap in a freshly-imported canvas module's default export (success path). */
+  remount: (next: ComponentType) => void;
+  /** Show/hide the "holding last good" toast (build-error path from the shell). */
+  setHolding: (on: boolean, message?: string) => void;
+}
+
+const RUNTIME_KEY = '__maudeCanvasRuntime';
+
+/**
+ * Fires `onOk` only when its subtree COMMITS — i.e. renders without throwing. A
+ * render-time throw in the canvas unwinds to the boundary before this commits,
+ * so `onOk` never runs and `lastGood` is not advanced to a broken module.
+ */
+function OkSignal({
+  Canvas,
+  file,
+  onOk,
+}: {
+  Canvas: ComponentType;
+  file: string | undefined;
+  onOk: () => void;
+}) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: fire once per mount (key=attempt remounts this).
+  useEffect(() => {
+    onOk();
+  }, []);
+  return buildCanvasTree(Canvas, file);
+}
+
+export class CanvasErrorBoundary extends Component<
+  {
+    attempt: number;
+    onError: () => void;
+    fallback: () => ReactNode;
+    children: ReactNode;
+  },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+  static getDerivedStateFromError(): { hasError: boolean } {
+    return { hasError: true };
+  }
+  componentDidCatch(): void {
+    this.props.onError();
+  }
+  componentDidUpdate(prev: { attempt: number }): void {
+    // A new canvas (new attempt) arrived → clear the error and try rendering it.
+    if (prev.attempt !== this.props.attempt && this.state.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+  render(): ReactNode {
+    if (this.state.hasError) return this.props.fallback();
+    return this.props.children;
+  }
+}
+
+function HmrHoldingToast({ message }: { message?: string }): ReactNode {
+  return createElement(
+    'div',
+    {
+      className: 'dc-hmr-holding',
+      role: 'status',
+      'aria-live': 'polite',
+      title: message ? `Holding last working render — ${message}` : 'Holding last working render',
+    },
+    '⏸ build error — držím poslední funkční verzi'
+  );
+}
+
+function CanvasHmrRuntime({
+  initialCanvas,
+  file,
+}: {
+  initialCanvas: ComponentType;
+  file: string | undefined;
+}): ReactNode {
+  const [{ canvas, attempt }, setCanvasState] = useState({ canvas: initialCanvas, attempt: 0 });
+  const [holding, setHoldingState] = useState<{ on: boolean; message?: string }>({ on: false });
+  const lastGood = useRef<ComponentType | null>(null);
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
+
+  // Publish the runtime API for the shell HMR client.
+  useEffect(() => {
+    const api: CanvasRuntimeApi = {
+      remount: (next) => setCanvasState((s) => ({ canvas: next, attempt: s.attempt + 1 })),
+      setHolding: (on, message) => setHoldingState(on ? { on: true, message } : { on: false }),
+    };
+    (window as unknown as Record<string, unknown>)[RUNTIME_KEY] = api;
+    return () => {
+      (window as unknown as Record<string, unknown>)[RUNTIME_KEY] = undefined;
+    };
+  }, []);
+
+  const handleOk = useCallback(() => {
+    lastGood.current = canvasRef.current;
+    // The new canvas rendered clean → drop any holding state.
+    setHoldingState((h) => (h.on ? { on: false } : h));
+  }, []);
+
+  const handleError = useCallback(() => {
+    setHoldingState({ on: true, message: 'render error' });
+  }, []);
+
+  const fallback = useCallback((): ReactNode => {
+    const LG = lastGood.current;
+    return LG ? buildCanvasTree(LG, file) : null;
+  }, [file]);
+
+  return createElement(
+    Fragment,
+    null,
     createElement(
-      MaybeToolProvider,
-      null,
-      createElement(
-        MaybeSelectionSetProvider,
-        null,
-        createElement(CommentHost, { file }, createElement(Canvas))
-      )
-    )
+      CanvasErrorBoundary,
+      { attempt, onError: handleError, fallback },
+      // key=attempt → each soft-reload remounts a fresh subtree (and resets the
+      // boundary's child), matching the clean-slate semantics of a full reload.
+      createElement(OkSignal, { key: attempt, Canvas: canvas, file, onOk: handleOk })
+    ),
+    holding.on ? createElement(HmrHoldingToast, { message: holding.message }) : null
   );
 }

package/plugins/design/dev-server/canvas-cursors.ts

@@ -168,6 +168,6 @@ export const TOOL_CURSORS: Record<Tool, string> = Object.freeze({
  */
 export function resolveToolCursor(token: unknown): string | null {
   if (typeof token !== 'string' || !/^[a-z-]+$/.test(token)) return null;
-  if (!Object.prototype.hasOwnProperty.call(TOOL_CURSORS, token)) return null;
+  if (!Object.hasOwn(TOOL_CURSORS, token)) return null;
   return TOOL_CURSORS[token as Tool];
 }

package/plugins/design/dev-server/canvas-lib.tsx

@@ -67,14 +67,19 @@
  * deprecation log at dev-server boot.
  */
 
+import {
+  AnimatePresence as _MotionAnimatePresence,
+  motion as _motionImpl,
+  useReducedMotion as _useReducedMotion,
+} from 'motion/react';
 import {
   type CSSProperties,
+  createContext,
   Fragment,
+  isValidElement,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
   type RefObject,
-  createContext,
-  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -84,18 +89,19 @@ import {
   useState,
 } from 'react';
 
-import {
-  AnimatePresence as _MotionAnimatePresence,
-  motion as _motionImpl,
-  useReducedMotion as _useReducedMotion,
-} from 'motion/react';
-
+import { ArtboardActivityOverlay } from './artboard-activity-overlay.tsx';
 import { CanvasShell } from './canvas-shell.tsx';
 import {
   buildMoveArtboardsRecord,
   diffLayoutPositions,
 } from './commands/move-artboards-command.ts';
+import { AgentPresenceProvider, useAgentPresence } from './use-agent-presence.tsx';
 import { type DragState, useArtboardDrag } from './use-artboard-drag.tsx';
+import {
+  CanvasActivityProvider,
+  matchesArtboard,
+  useCanvasActivity,
+} from './use-canvas-activity.tsx';
 import { CollabProvider, canvasSlugFromPath } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { MaybeToolProvider, useToolModeOptional } from './use-tool-mode.tsx';
@@ -1192,9 +1198,22 @@ export function DesignCanvas(props: DesignCanvasProps) {
     </MaybeToolProvider>
   );
   return (
-    <UndoStackProvider canvasFile={canvasFile}>
-      {collabSlug ? <CollabProvider slug={collabSlug}>{inner}</CollabProvider> : inner}
-    </UndoStackProvider>
+    // Phase 13 / DDR-029 — the activity context MUST be provided here (canvas-lib
+    // bundle) so DCArtboard's `useCanvasActivity()` reads the SAME context
+    // instance. Providing it from comment-mount.js (a separate bundle) would
+    // create a second ActivityContext the consumer never sees. `canvasFile` is
+    // normalized to the server's design-root-relative activity key inside the
+    // provider (falls back to window.__canvas_rel__).
+    <CanvasActivityProvider file={canvasFile}>
+      {/* Phase 13.2 / DDR-078 — agent presence. Same canvas-lib-bundle rule as
+          the activity context: provided here so DCArtboard + ParticipantsChrome
+          (both canvas-lib) read one context instance. */}
+      <AgentPresenceProvider file={canvasFile}>
+        <UndoStackProvider canvasFile={canvasFile}>
+          {collabSlug ? <CollabProvider slug={collabSlug}>{inner}</CollabProvider> : inner}
+        </UndoStackProvider>
+      </AgentPresenceProvider>
+    </CanvasActivityProvider>
   );
 }
 DesignCanvas.displayName = 'DesignCanvas';
@@ -1510,6 +1529,12 @@ export function DCArtboard({
   const toolMode = useToolModeOptional();
   const selSet = useSelectionSetOptional();
   const dragBus = useDragStateContext();
+  // Phase 13 / DDR-029 — live "agent works here" overlay. Inert (present=false)
+  // outside CanvasActivityProvider, so specimens / legacy mounts never show it.
+  const activity = useCanvasActivity();
+  // Phase 13.2 / DDR-078 — when an agent is the editor, tint the overlay with
+  // its presence color + show its funny name instead of the generic file label.
+  const agent = useAgentPresence();
   const rect = ctx ? ctx.rectFor(id) : null;
 
   // Drag hook — always called (hook rules). Inert outside DesignCanvas
@@ -1583,19 +1608,40 @@ export function DCArtboard({
 
   const handleProps = dragHook.bindHandle();
 
+  // Phase 13 — overlay when THIS canvas is active and the change scope includes
+  // this artboard (null scope = file-level = every artboard). Rendered as a
+  // world-coord sibling of the <article> so it pans/zooms with the artboard.
+  const showActivity = activity.present && matchesArtboard(activity.artboardIds, id);
+  // Agent-driven → funny name + agent color; manual edit → file label + default hue.
+  const activityLabel = agent
+    ? agent.name
+    : activity.artboardIds
+      ? `${activity.fileLabel}:${label}`
+      : activity.fileLabel;
+
   return (
-    <article
-      className={`dc-artboard dc-positioned${isInDrag ? ' dc-dragging' : ''}`}
-      data-dc-screen={id}
-      aria-current={isActive ? 'true' : undefined}
-      style={{ left: liveX, top: liveY, width: rect.w, height: rect.h }}
-      {...handleProps}
-    >
-      <button type="button" className="dc-artboard-label sku" aria-label={`Artboard ${label}`}>
-        {label}
-      </button>
-      <div className="dc-artboard-body">{children}</div>
-    </article>
+    <>
+      <article
+        className={`dc-artboard dc-positioned${isInDrag ? ' dc-dragging' : ''}`}
+        data-dc-screen={id}
+        aria-current={isActive ? 'true' : undefined}
+        style={{ left: liveX, top: liveY, width: rect.w, height: rect.h }}
+        {...handleProps}
+      >
+        <button type="button" className="dc-artboard-label sku" aria-label={`Artboard ${label}`}>
+          {label}
+        </button>
+        <div className="dc-artboard-body">{children}</div>
+      </article>
+      {showActivity ? (
+        <ArtboardActivityOverlay
+          rect={{ x: liveX, y: liveY, w: rect.w, h: rect.h }}
+          label={activityLabel}
+          active={activity.active}
+          color={agent?.color}
+        />
+      ) : null}
+    </>
   );
 }
 DCArtboard.displayName = 'DCArtboard';
@@ -2157,11 +2203,7 @@ export function SpecimenHeader({
 }
 
 /** `<dl class="specimen-meta">` ladder. */
-export function SpecimenMeta({
-  entries,
-}: {
-  entries: Array<{ label: string; value: ReactNode }>;
-}) {
+export function SpecimenMeta({ entries }: { entries: Array<{ label: string; value: ReactNode }> }) {
   return (
     <dl className="specimen-meta">
       {entries.map(({ label, value }) => (
@@ -2180,13 +2222,7 @@ export function KbdHint({ children }: { children: ReactNode }) {
 }
 
 /** Inline `var(--name)` value visualiser — small chip + token name. */
-export function TokenChip({
-  name,
-  swatch,
-}: {
-  name: string;
-  swatch?: boolean;
-}) {
+export function TokenChip({ name, swatch }: { name: string; swatch?: boolean }) {
   return (
     <span className="token-chip" data-token={name}>
       {swatch ? (
@@ -2716,7 +2752,7 @@ export function ReducedMotionToggle() {
 }
 
 export {
+  _MotionAnimatePresence as AnimatePresence,
   _motionImpl as motion,
   _useReducedMotion as useReducedMotion,
-  _MotionAnimatePresence as AnimatePresence,
 };

package/plugins/design/dev-server/canvas-shell.tsx

@@ -42,10 +42,10 @@ import { ArtboardMarqueeOverlay } from './artboard-marquee.tsx';
 import {
   type ArtboardRect,
   SnapGuideOverlay,
-  type ViewportControllerHandle,
   useArtboardsContext,
   useDragStateContext,
   useViewportControllerContext,
+  type ViewportControllerHandle,
 } from './canvas-lib.tsx';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import {

package/plugins/design/dev-server/collab/awareness-bridge.ts

@@ -27,8 +27,8 @@
 // originating clientID — the random 32-bit ids make local↔remote collisions
 // negligible.
 
-import { applyAwarenessUpdate, encodeAwarenessUpdate } from 'y-protocols/awareness';
 import type { Awareness } from 'y-protocols/awareness';
+import { applyAwarenessUpdate, encodeAwarenessUpdate } from 'y-protocols/awareness';
 
 interface AwarenessChange {
   added: number[];

package/plugins/design/dev-server/collab/index.ts

@@ -7,13 +7,13 @@ import path from 'node:path';
 import type { Api } from '../api.ts';
 import type { Context } from '../context.ts';
 
-import { Y_TYPES, createPersistence } from './persistence.ts';
-import { type Registry, createRegistry } from './registry.ts';
+import { createPersistence, Y_TYPES } from './persistence.ts';
+import { createRegistry, type Registry } from './registry.ts';
 
-export { Y_TYPES };
+export type { CollabConn } from './protocol.ts';
 export type { Registry } from './registry.ts';
 export type { Room, RoomConn } from './room.ts';
-export type { CollabConn } from './protocol.ts';
+export { Y_TYPES };
 
 export interface Collab {
   registry: Registry;

package/plugins/design/dev-server/collab/persistence.ts

@@ -8,7 +8,7 @@ import * as Y from 'yjs';
 
 import type { Api } from '../api.ts';
 import type { Context } from '../context.ts';
-import { type RoomCallbacks, ensureStateDir } from './room.ts';
+import { ensureStateDir, type RoomCallbacks } from './room.ts';
 
 /**
  * Y.Doc shared-type names. Frozen on Task 1 so client + server agree even

package/plugins/design/dev-server/config.schema.json

@@ -206,7 +206,8 @@
         },
         "syncTsx": {
           "type": "boolean",
-          "description": "DDR-072 — project-level TSX sync opt-in. When true, ALL .tsx canvases sync to this hub without a per-canvas .meta.json \"syncable\": true. A per-canvas \"syncable\": false still excludes individual canvases (the sidecar always wins). Inert unless the cross-origin sandbox is active (MAUDE_CANVAS_ORIGIN_SPLIT != 0) — the DDR-060 Lock-2 coupling is preserved. Broadens the WebRTC/self-nav exfil residual to every synced canvas, so only enable for hubs you operate or fully trust; the dev-server prints a loud boot banner against non-loopback hubs."
+          "default": true,
+          "description": "DDR-079 (supersedes DDR-072) — project-level TSX sync, ON BY DEFAULT. Omit the field to sync ALL .tsx canvases to this hub (the common case: a linked teammate sees the project's TSX without a hidden opt-in). Set false to opt the whole project OUT. A per-canvas .meta.json \"syncable\": false still excludes one canvas (the sidecar always wins). Inert unless the cross-origin sandbox is active (MAUDE_CANVAS_ORIGIN_SPLIT != 0) — the DDR-060 Lock-2 coupling is preserved. TSX bodies execute, so syncing broadens a WebRTC/self-nav exfil residual to every synced canvas — link only hubs you operate or trust; the dev-server prints a loud boot banner against non-loopback hubs."
         }
       },
       "additionalProperties": false

package/plugins/design/dev-server/context-menu.tsx

@@ -20,8 +20,8 @@
  */
 
 import {
-  type ReactNode,
   createContext,
+  type ReactNode,
   useCallback,
   useContext,
   useEffect,