#!/usr/bin/env bash # draw-proof.sh — Phase 25 render/verify harness driver for the draw engine. # Generates a throwaway proof canvas under /_draw/.proof.tsx # that mounts the given SVG mark through the canvas-lib `DrawProof` component # (size ladder 16/24/48/256 × {light, dark, single-color flatten}), then # screenshots every artboard via the canonical screenshot helper. One run # operationalizes the whole graphic rubric: per-size legibility, dark-mode # currentColor flip, and the single-color flatten test. # # Reached via `maude design draw-proof` (never a raw bin path — DDR-062). # # Usage: # draw-proof.sh --asset --slug # [--root ] [--out-dir ] [--name ] # [--engine auto|agent-browser|playwright] [--timeout ] # [--motion] [--motion-selector ] [--motion-gap ] # # Requires a running dev server (caller runs `maude design server-up` first); # reads the port from /_server.json. # # --motion: after the still ladder, run the LIVE-MOTION proof — sample the # animated element at two wall-clock times and assert it changed. A still # screenshot can't prove animation (DDR-094 M1); a freeze-frame pass + an # over-time NO-CHANGE is a HARD FAIL (dead mechanism, e.g. CSS d:path()). # --motion-selector targets a specific element (default: auto-detect the # parent of the first /). --motion-gap sets the # sample interval in ms (default 600). # # Stdout (last line): the screenshot output directory (capturable in $(...)). # Stderr: progress / diagnostics. # Exit: 0 success / 1 missing input or server / 2 bad args / 3 capture failed # / 4 motion HARD FAIL (still ladder OK but no over-time change). ASSET="" SLUG="" REPO="" OUT_DIR="" NAME="" ENGINE="auto" TIMEOUT=10 MOTION=0 MOTION_SELECTOR="" MOTION_GAP=600 while [ $# -gt 0 ]; do case "$1" in --asset) ASSET="$2"; shift 2 ;; --slug) SLUG="$2"; shift 2 ;; --root) REPO="$2"; shift 2 ;; --out-dir) OUT_DIR="$2"; shift 2 ;; --name) NAME="$2"; shift 2 ;; --engine) ENGINE="$2"; shift 2 ;; --timeout) TIMEOUT="$2"; shift 2 ;; --motion) MOTION=1; shift ;; --motion-selector) MOTION_SELECTOR="$2"; shift 2 ;; --motion-gap) MOTION_GAP="$2"; shift 2 ;; --help|-h) sed -n '2,37p' "$0" | sed 's/^# \?//' exit 0 ;; *) echo "draw-proof.sh: unknown arg '$1' (try --help)" >&2 exit 2 ;; esac done [ -n "$ASSET" ] || { echo "draw-proof.sh: --asset required" >&2; exit 2; } [ -n "$SLUG" ] || { echo "draw-proof.sh: --slug required" >&2; exit 2; } [ -f "$ASSET" ] || { echo "draw-proof.sh: asset not found: $ASSET" >&2; exit 1; } # Normalize slug to a filesystem-safe token (reuse the canonical slug helper). SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" SLUG=$(bash "$SCRIPT_DIR/slug.sh" "$SLUG" 2>/dev/null || printf '%s' "$SLUG" | tr '/ ' '__' | tr '[:upper:]' '[:lower:]') [ -n "$NAME" ] || NAME="$SLUG" # ---------- resolve repo + design root + port ---------- if [ -z "$REPO" ]; then REPO="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null || pwd)}" fi DESIGN_ROOT="$REPO/.design" [ -d "$DESIGN_ROOT" ] || { echo "draw-proof.sh: no .design/ under $REPO" >&2; exit 1; } STATE="$DESIGN_ROOT/_server.json" [ -f "$STATE" ] || { echo "draw-proof.sh: $STATE missing — run \`maude design server-up\` first" >&2; exit 1; } if command -v jq >/dev/null 2>&1; then PORT=$(jq -r .port "$STATE" 2>/dev/null) else PORT=$(sed -nE 's/.*"port"[[:space:]]*:[[:space:]]*([0-9]+).*/\1/p' "$STATE" | head -n1) fi [ -n "$PORT" ] || { echo "draw-proof.sh: no port in $STATE" >&2; exit 1; } # ---------- generate the proof canvas ---------- DRAW_DIR="$DESIGN_ROOT/_draw" mkdir -p "$DRAW_DIR" PROOF_TSX="$DRAW_DIR/$SLUG.proof.tsx" # Escape the SVG for embedding in a JS template literal: backslash, backtick, # and ${ (in that order). Newlines are fine inside a template literal. ESCAPED=$(sed -e 's/\\/\\\\/g' -e 's/`/\\`/g' -e 's/\$/\\$/g' "$ASSET") { echo "import { DrawProof } from '@maude/canvas-lib';" echo echo "// AUTO-GENERATED by \`maude design draw-proof\` — render/verify harness for one" echo "// mark. Lives under _draw/ (gitignored); safe to delete + regenerate." printf 'const MARK = `%s`;\n' "$ESCAPED" echo echo "export default function DrawProofCanvas() {" echo " return (" printf ' } />\n' "\"$NAME\"" echo " );" echo "}" } > "$PROOF_TSX" echo "→ proof canvas: ${PROOF_TSX#$REPO/}" >&2 # ---------- resolve out-dir ---------- if [ -z "$OUT_DIR" ]; then OUT_DIR="$DESIGN_ROOT/_history/_draw-proof/$SLUG" fi mkdir -p "$OUT_DIR" OUT_DIR="$(cd "$OUT_DIR" && pwd)" # ---------- screenshot every artboard ---------- REL="_draw/$SLUG.proof.tsx" URL="http://localhost:$PORT/_canvas-shell.html?canvas=$REL" echo "→ screenshotting proof ladder ($URL)" >&2 bash "$SCRIPT_DIR/screenshot.sh" \ --all-screens \ --url "$URL" \ --out-dir "$OUT_DIR" \ --engine "$ENGINE" \ --timeout "$TIMEOUT" >&2 RC=$? if [ "$RC" -ne 0 ]; then echo "draw-proof.sh: screenshot capture failed (rc=$RC)" >&2 exit 3 fi COUNT=$(find "$OUT_DIR" -maxdepth 1 -type f -name '*.png' 2>/dev/null | wc -l | tr -d ' ') echo "→ captured $COUNT proof image(s) in $OUT_DIR" >&2 # ---------- live-motion proof (--motion) ---------- # The still ladder above is the freeze-frame; it cannot prove the mark ANIMATES. # Sample the animated element at two wall-clock times and require a delta. if [ "$MOTION" -eq 1 ]; then echo "→ live-motion proof (over-time delta) …" >&2 MOTION_ARGS=(--url "$URL" --gap "$MOTION_GAP" --timeout "$TIMEOUT") [ -n "$MOTION_SELECTOR" ] && MOTION_ARGS+=(--selector "$MOTION_SELECTOR") node "$SCRIPT_DIR/_motion-sample-playwright.mjs" "${MOTION_ARGS[@]}" >&2 MRC=$? case "$MRC" in 0) echo "→ motion proven (over-time delta confirmed)" >&2 ;; 4) echo "draw-proof.sh: MOTION HARD FAIL — still ladder OK but the mark does NOT animate over time (dead mechanism). See DDR-094 M1/M2." >&2 exit 4 ;; *) echo "draw-proof.sh: motion sampler error (rc=$MRC) — could not verify animation" >&2 exit 3 ;; esac fi # Last stdout line = the output dir, for $(maude design draw-proof ...) capture. printf '%s\n' "$OUT_DIR"