@1agh/maude 0.15.0

package/plugins/design/dev-server/examples/README.md

@@ -0,0 +1,9 @@
+# dev-server/examples/
+
+Fixtures used by dev-server perf + smoke tests. Not user content — for actual
+canvas surfaces refer to a project's `.design/ui/` directory and the DS
+specimens under `.design/system/<ds>/preview/`.
+
+Files here ship with the dev-server install and serve as reference workloads
+for engine perf measurements (e.g. driver selection, hover recompute, viewport
+HMR cycles).

package/plugins/design/dev-server/examples/perf-100-artboards.tsx

@@ -0,0 +1,113 @@
+/**
+ * @canvas      Perf Lab — 100 DCArtboards × 30 nodes (Phase 4 T6)
+ * @ds          project
+ * @platform    web-desktop
+ * @opt_out     full
+ * @brief       Throwaway canvas for measuring pan/zoom FPS at scale. 100
+ *              DCArtboards arranged on the default 3-col grid, each holding
+ *              30 inert DOM nodes. No real CSS bling — solid background,
+ *              hairline border, monospace label, that's it. The point is
+ *              to stress the world-transform path, not to look pretty.
+ *
+ * Usage:
+ *              1. Open in the dev-server, fit-to-screen (Cmd+0).
+ *              2. Hold space and drag for 5 s; record FPS via window
+ *                 `__perf__.fps()` (instrumentation below) or via Chrome
+ *                 DevTools Performance panel.
+ *              3. Zoom around the cursor with wheel for 5 s; record FPS.
+ *              4. Compare against the Phase 3.4 perf budget targets.
+ *
+ * Results land in .ai/decisions/DDR-024 + .ai/logs/phase-4-perf-<date>.md.
+ */
+
+import { useEffect } from 'react';
+
+import { DCArtboard, DCSection, DesignCanvas } from '@maude/canvas-lib';
+
+const ARTBOARD_COUNT = 100;
+const NODES_PER_ARTBOARD = 30;
+
+/**
+ * Tiny RAF-FPS sampler exposed on `window.__perf__` so the harness (or a
+ * human at the DevTools console) can grab a 1 s rolling average without
+ * installing anything. Idempotent — no-op on the second mount.
+ */
+function installFpsSampler(): void {
+  if (typeof window === 'undefined') return;
+  const w = window as unknown as { __perf__?: { fps: () => number } };
+  if (w.__perf__) return;
+  let last = performance.now();
+  const samples: number[] = [];
+  const SAMPLE_WINDOW = 60; // ~1 s at 60 fps
+  function tick(now: number) {
+    const dt = now - last;
+    last = now;
+    if (dt > 0) {
+      samples.push(1000 / dt);
+      if (samples.length > SAMPLE_WINDOW) samples.shift();
+    }
+    requestAnimationFrame(tick);
+  }
+  requestAnimationFrame(tick);
+  w.__perf__ = {
+    fps: () => {
+      if (samples.length === 0) return 0;
+      const sum = samples.reduce((a, b) => a + b, 0);
+      return Math.round((sum / samples.length) * 10) / 10;
+    },
+  };
+}
+
+function PerfArtboardBody({ index }: { index: number }) {
+  const nodes = Array.from({ length: NODES_PER_ARTBOARD }, (_, i) => i);
+  return (
+    <div
+      style={{
+        padding: 16,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(5, 1fr)',
+        gap: 8,
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        fontSize: 11,
+        color: '#444',
+      }}
+    >
+      {nodes.map((n) => (
+        <div
+          key={n}
+          style={{
+            padding: 8,
+            border: '1px solid rgba(0,0,0,0.12)',
+            borderRadius: 3,
+            background: index % 2 === 0 ? '#fff' : '#fafafa',
+            minHeight: 48,
+          }}
+        >
+          AB{index.toString().padStart(3, '0')}·N{n.toString().padStart(2, '0')}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function Perf100Artboards() {
+  useEffect(() => {
+    installFpsSampler();
+  }, []);
+  const ids = Array.from({ length: ARTBOARD_COUNT }, (_, i) => i);
+  return (
+    <DesignCanvas>
+      <DCSection id="perf-lab" title="Perf — 100 × 30">
+        {ids.map((i) => {
+          const id = `ab-${i.toString().padStart(3, '0')}`;
+          const label = `AB-${i.toString().padStart(3, '0')} · ${NODES_PER_ARTBOARD}n`;
+          return (
+            <DCArtboard key={id} id={id} label={label} width={1280} height={820}>
+              <PerfArtboardBody index={i} />
+            </DCArtboard>
+          );
+        })}
+      </DCSection>
+    </DesignCanvas>
+  );
+}

package/plugins/design/dev-server/fs-watch.ts

@@ -0,0 +1,63 @@
+// Recursive filesystem watcher.
+// Bun ships a working recursive fs.watch on macOS/Linux/Windows out of the box;
+// no @parcel/watcher needed. We debounce per-path so a single editor save (which
+// often emits ~3 events on macOS) collapses to one bus notification.
+
+import { watch } from 'node:fs';
+import path from 'node:path';
+
+import type { Context } from './context.ts';
+
+export interface FsWatch {
+  start(): void;
+  stop(): void;
+}
+
+const DEBOUNCE_MS = 50;
+
+export function createFsWatch(ctx: Context): FsWatch {
+  let watcher: ReturnType<typeof watch> | null = null;
+  const seen = new Map<string, number>();
+
+  function emit(filename: string) {
+    const now = Date.now();
+    const prev = seen.get(filename) ?? 0;
+    if (now - prev < DEBOUNCE_MS) return;
+    seen.set(filename, now);
+    const ext = path.extname(filename).toLowerCase();
+    const rel = filename.replace(/\\/g, '/');
+    if (ext === '.html') ctx.bus.emit('fs:html', rel);
+    else if (ext === '.css') ctx.bus.emit('fs:css', rel);
+    else if (ext === '.json') ctx.bus.emit('fs:json', rel);
+    ctx.bus.emit('fs:any', rel);
+  }
+
+  function start() {
+    if (watcher) return;
+    try {
+      watcher = watch(ctx.paths.designRoot, { recursive: true }, (_event, filename) => {
+        if (!filename) return;
+        // Skip our own runtime artifacts.
+        if (filename.startsWith('_server.json')) return;
+        if (filename.startsWith('_active.json')) return;
+        if (filename.startsWith(`_history${path.sep}`) || filename.startsWith('_history/')) return;
+        emit(filename);
+      });
+    } catch (err) {
+      console.warn('[fs-watch] failed to start:', err instanceof Error ? err.message : err);
+    }
+  }
+
+  function stop() {
+    if (!watcher) return;
+    try {
+      watcher.close();
+    } catch {
+      /* ignore */
+    }
+    watcher = null;
+    seen.clear();
+  }
+
+  return { start, stop };
+}