hyperframes 0.7.49 → 0.7.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +3825 -1757
- package/dist/commands/contrast-audit.browser.js +16 -0
- package/dist/commands/layout-audit.browser.js +212 -29
- package/dist/hyperframe-runtime.js +16 -16
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +16 -16
- package/dist/skills/hyperframes/SKILL.md +1 -1
- package/dist/skills/hyperframes-cli/SKILL.md +12 -15
- package/dist/skills/hyperframes-cli/references/lint-validate-inspect.md +67 -51
- package/dist/studio/assets/{index-HvbbjzDK.js → index-CWraNKMN.js} +3 -3
- package/dist/studio/assets/{index-BYSlsVGG.js → index-CdhJLcJc.js} +1 -1
- package/dist/studio/assets/{index-369h3UdR.js → index-VhK_L4WR.js} +1 -1
- package/dist/studio/index.html +1 -1
- package/dist/templates/_shared/AGENTS.md +2 -2
- package/dist/templates/_shared/CLAUDE.md +2 -2
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ Atomic capabilities you load **on demand** — not full workflows; they never ow
|
|
|
32
32
|
| **Author seek-safe keyframes** — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth, plus `hyperframes keyframes` diagnostics | `/hyperframes-keyframes` |
|
|
33
33
|
| **Creative direction** — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive | `/hyperframes-creative` |
|
|
34
34
|
| **Media** — resolve/generate BGM, SFX, image, icon, brand logo, voice, color grade, LUT; TTS voiceover, transcription, background removal, captions; cross-project reuse | `/media-use` |
|
|
35
|
-
| **CLI dev loop** — init, lint,
|
|
35
|
+
| **CLI dev loop** — init, lint, check, snapshot, preview, render, publish, doctor | `/hyperframes-cli` |
|
|
36
36
|
| **Install registry blocks / components** (`hyperframes add`) | `/hyperframes-registry` |
|
|
37
37
|
| **Import Figma content** — assets, tokens, components, storyboards→reconstructed motion (REST/CLI); Motion (MCP), shaders (MCP source / native export) | `/figma` |
|
|
38
38
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: hyperframes-cli
|
|
3
|
-
description: HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint,
|
|
3
|
+
description: HyperFrames CLI dev loop. Use when running npx hyperframes init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, render, publish, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, tts, or remove-background (validate/inspect/layout are deprecated aliases covered by check), or when troubleshooting the HyperFrames build/render environment. Entry point for AWS Lambda cloud rendering (`hyperframes lambda deploy / render / progress / destroy / policies / sites`).
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# HyperFrames CLI
|
|
@@ -11,18 +11,17 @@ Everything runs through `npx hyperframes` unless project instructions specify a
|
|
|
11
11
|
|
|
12
12
|
1. **Scaffold** — `npx hyperframes init my-video` (or `capture` from a URL). `init` also checks the installed skills against the latest on GitHub and updates the global set if any are out of date. The `--skip-skills` flag is currently neutered (temporary, while the skills.sh registry catches up), so every `init` runs this check and pulls our latest skills regardless.
|
|
13
13
|
2. **Write** — author HTML composition (see the `hyperframes-core` skill)
|
|
14
|
-
3. **Lint** — `npx hyperframes lint`
|
|
15
|
-
4. **
|
|
16
|
-
5. **
|
|
17
|
-
6. **
|
|
18
|
-
7. **Render** — pick the variant:
|
|
14
|
+
3. **Lint** — `npx hyperframes lint` (static, fast — run it early while iterating)
|
|
15
|
+
4. **Check** — `npx hyperframes check` (the browser gate; add `--snapshots` for annotated frames + per-finding crops)
|
|
16
|
+
5. **Preview / edit** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
|
|
17
|
+
6. **Render** — pick the variant:
|
|
19
18
|
- Iterate: `npx hyperframes render --quality draft`
|
|
20
19
|
- Deliver: `npx hyperframes render --quality high --output out.mp4`
|
|
21
20
|
- CI / cross-host repro: `npx hyperframes render --docker --strict --output out.mp4`
|
|
22
21
|
- Cloud (long / large): `npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait` (see Lambda below)
|
|
23
|
-
|
|
22
|
+
7. **Report feedback** — after verifying the output, `npx hyperframes feedback --rating <1-5> --comment "..."` once per task (see Agent Conventions).
|
|
24
23
|
|
|
25
|
-
Run
|
|
24
|
+
Run `check` before preview. It runs the linter first (and skips the browser entirely on lint errors), then does everything the old validate → inspect → snapshot sequence did in **one** browser session and one seek pass: runtime console errors and failed requests, layout defects (text spilling out of bubbles/containers or off canvas, held overlaps, occlusion), motion-sidecar verification (`*.motion.json` — entrances under seek, stagger order, in-frame, liveness), and WCAG contrast. Contrast failures are errors and carry the sampled fg/bg colors, measured vs required ratio, and a suggested compliant color, so most contrast fixes need no screenshot. Every finding carries a selector, `data-*` identity, composition source file, bbox, and sample time — jump straight to the HTML. Single-sample transients demote to info; findings held across samples gate the exit code (`--strict` gates warnings too). `validate`, `inspect`, and `layout` still work but are deprecated aliases of parts of `check`.
|
|
26
25
|
|
|
27
26
|
For motion-heavy work, prefer snapshot-driven iteration and a `*.motion.json` sidecar — see `references/lint-validate-inspect.md` for the discipline and motion-verification spec. To compare agent-authored candidate variants, use `npx hyperframes compare <path...> [--at <sec>] [--labels a,b,c] [--out compare.png] [--cols n] [--json]` to render each composition through its own runtime, assemble one labeled sheet, inspect it side by side, and choose. For color-grade selection, use the color-specific sibling `npx hyperframes grade-compare --for <frame> --grades grades.json` (or `--luts a.cube,b.cube`) to render every grading candidate through the real WebGL grading runtime into one labeled PNG before choosing the winner.
|
|
28
27
|
|
|
@@ -34,6 +33,7 @@ Cross-cutting rules that hold for every command:
|
|
|
34
33
|
- **`doctor --json` always exits 0**, even when the environment is broken. Gate on the payload's `ok` field: `npx hyperframes doctor --json | jq -e '.ok' > /dev/null`. This insulates pipelines from CLI release churn.
|
|
35
34
|
- **Non-TTY mode is auto-detected.** When `stdout` is not a TTY (CI, agents, piped output) the CLI auto-switches to non-interactive; `init` then **requires `--example`**. Pass `--non-interactive` to force this mode even on a TTY.
|
|
36
35
|
- **CI gating on render**: `--strict` fails on lint errors, `--strict-all` fails on warnings too, `--strict-variables` fails on undeclared `--variables` keys.
|
|
36
|
+
- **Correlate a verify loop with `HYPERFRAMES_RUN_ID`.** Orchestrators driving the CLI per task/design element should set this env var once per unit of work; every command invocation attaches it to telemetry, and `check` emits a per-gate breakdown, making roundtrips-per-task measurable.
|
|
37
37
|
- **Paths in `--json` are redacted** — `$HOME` becomes the literal `$HOME` so output is safe to paste into bug reports and agent contexts.
|
|
38
38
|
- **Render is user-gated.** Never auto-render once the checks pass. Pause at `preview`, tell the user the video is editable in Studio, and render only after they approve.
|
|
39
39
|
- **Use Studio context for user-directed edits.** When the user says "this selected element", "the thing I clicked", "current selection", or similar, ask them to select it in Studio, then run `npx hyperframes preview --context --json --context-fields selection`. Use the returned `selection.target.hfId` / `selector`, `selection.sourceFile`, `selection.currentTime`, and `selection.thumbnailUrl` to anchor the edit. If `selection` is `null` and `errors.selection.code` is `no-selection`, ask the user to click the element and rerun; do not guess from screenshots.
|
|
@@ -46,7 +46,7 @@ Cross-cutting rules that hold for every command:
|
|
|
46
46
|
| Want to… | Read |
|
|
47
47
|
| ---------------------------------------------------------------------------------------------------------- | ------------------------------------- |
|
|
48
48
|
| Scaffold a project (`init`, `capture`, `skills`) | `references/init-and-scaffold.md` |
|
|
49
|
-
| Check correctness (`lint`, `
|
|
49
|
+
| Check correctness (`lint`, `check`, `snapshot`, deprecated `validate`/`inspect`) | `references/lint-validate-inspect.md` |
|
|
50
50
|
| Preview or render (`preview`, `play`, `render`, `publish`) | `references/preview-render.md` |
|
|
51
51
|
| Diagnose the environment (`doctor`, `browser`) | `references/doctor-browser.md` |
|
|
52
52
|
| Cloud render on AWS Lambda (`lambda deploy / sites / render / progress / destroy / policies`) | `references/lambda.md` |
|
|
@@ -75,18 +75,15 @@ See `references/lambda.md` for prerequisites, all 6 subcommands (`deploy`, `site
|
|
|
75
75
|
|
|
76
76
|
## Minimum Completion Gate
|
|
77
77
|
|
|
78
|
-
### Static gates
|
|
79
|
-
|
|
80
78
|
```bash
|
|
81
|
-
npx hyperframes
|
|
82
|
-
npx hyperframes validate
|
|
79
|
+
npx hyperframes check
|
|
83
80
|
```
|
|
84
81
|
|
|
85
|
-
Add `
|
|
82
|
+
One command covers the old lint + validate + inspect sequence in one browser session. Add `--strict` to gate warnings and `render --strict` in CI to fail on lint errors. `--caption-zone "<x0=..;y0=..;x1=..;y1=..>"` and `--frame-check` add opt-in band/bounds gates for pipelines that need them.
|
|
86
83
|
|
|
87
84
|
### Visual smoke test — required when the project uses sub-compositions
|
|
88
85
|
|
|
89
|
-
|
|
86
|
+
The audits evaluate the bundled composition; they cannot catch every cross-file mount failure when `index.html` mounts sub-compositions via `data-composition-src` (see `hyperframes-core` → `references/sub-compositions.md`, "Common pitfalls"). The gate that catches those is one that actually loads `index.html` the way `render` does and seeks the timeline.
|
|
90
87
|
|
|
91
88
|
Use `hyperframes snapshot` — it loads the project the same way `render` does (so it exercises the same mount path) but only captures the timestamps you request, so it's seconds instead of a full render:
|
|
92
89
|
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
# lint,
|
|
1
|
+
# lint, check, snapshot
|
|
2
2
|
|
|
3
|
-
The correctness pipeline
|
|
3
|
+
The correctness pipeline: `lint` (static, fast) while iterating, then `check` (one browser session: runtime + layout + motion + contrast) as the gate. `snapshot` is the standalone utility for capturing still frames and zoomed crops. `validate`, `inspect`, and `layout` still run but are deprecated: `check` covers all of them in one invocation.
|
|
4
4
|
|
|
5
5
|
## Discipline (motion-heavy work)
|
|
6
6
|
|
|
7
7
|
When the composition is animation-driven, run the checks before you reach for `preview` or `render`:
|
|
8
8
|
|
|
9
|
-
- Run `lint` after the first HTML pass
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
- Treat layout
|
|
13
|
-
- State motion intent in a `*.motion.json` sidecar so `
|
|
9
|
+
- Run `lint` after the first HTML pass, earlier rather than later.
|
|
10
|
+
- Run `check --snapshots` at the first full pass: the overview frames and per-finding crops show you what the auditor saw.
|
|
11
|
+
- Look at the PNGs before tuning automated warnings: your eye catches what the auditor misses, and the auditor catches what your eye misses.
|
|
12
|
+
- Treat layout errors as defects unless a snapshot proves the layering is intentional, in which case mark it with `data-layout-allow-overflow` / `data-layout-allow-overlap` / `data-layout-allow-occlusion`.
|
|
13
|
+
- State motion intent in a `*.motion.json` sidecar so `check` verifies it automatically (entrances firing under seek, stagger order, in-frame, liveness). This is the closest automated proxy for "watch the MP4" and catches render-vs-preview bugs the eye misses (see **Motion verification** below).
|
|
14
14
|
|
|
15
15
|
## lint
|
|
16
16
|
|
|
@@ -21,9 +21,9 @@ npx hyperframes lint --verbose # info-level findings
|
|
|
21
21
|
npx hyperframes lint --json # machine-readable
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). Catches missing `data-composition-id`, overlapping tracks on the same `data-track-index`, and
|
|
24
|
+
Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). Catches missing `data-composition-id`, overlapping tracks on the same `data-track-index`, unregistered timelines, and GSAP/CSS transform conflicts.
|
|
25
25
|
|
|
26
|
-
**Blind spot — media inside a sub-composition (not yet a lint rule).** A `<video>`/`<audio>` inside a `compositions/*.html` `<template>` (or nested in a wrapper `<div>` anywhere) is never seeked/decoded and renders blank/black;
|
|
26
|
+
**Blind spot — media inside a sub-composition (not yet a lint rule).** A `<video>`/`<audio>` inside a `compositions/*.html` `<template>` (or nested in a wrapper `<div>` anywhere) is never seeked/decoded and renders blank/black; the automated checks all pass. Media must be a direct child of the host root (`index.html`) — see `hyperframes-core` → `variables-and-media.md`. Until a rule exists, check manually before render:
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
29
|
grep -nE '<(video|audio)\b' compositions/*.html # expect NO matches; media belongs in index.html
|
|
@@ -31,63 +31,56 @@ grep -nE '<(video|audio)\b' compositions/*.html # expect NO matches; media bel
|
|
|
31
31
|
|
|
32
32
|
A non-empty result is a defect. Then `snapshot` each scene that has a video and confirm the panel actually shows footage (a blank/black panel where a clip should play is a bug, not a placeholder — treat it as render-blocking).
|
|
33
33
|
|
|
34
|
-
##
|
|
34
|
+
## check
|
|
35
35
|
|
|
36
36
|
```bash
|
|
37
|
-
npx hyperframes
|
|
38
|
-
npx hyperframes
|
|
39
|
-
npx hyperframes
|
|
40
|
-
npx hyperframes
|
|
41
|
-
npx hyperframes
|
|
37
|
+
npx hyperframes check # current directory: the full browser gate
|
|
38
|
+
npx hyperframes check ./my-project # specific project
|
|
39
|
+
npx hyperframes check --json # agent-readable envelope {ok, lint, runtime, layout, motion, contrast, snapshots}
|
|
40
|
+
npx hyperframes check --snapshots # also write overview frames (annotated) + per-finding crops
|
|
41
|
+
npx hyperframes check --samples 15 # denser timeline sweep (default 9)
|
|
42
|
+
npx hyperframes check --at 1.5,4,7.25 # explicit hero-frame timestamps
|
|
43
|
+
npx hyperframes check --at-transitions # also sample every tween start/end boundary
|
|
44
|
+
npx hyperframes check --tolerance 4 # allowed overflow px before reporting (default 2)
|
|
45
|
+
npx hyperframes check --timeout 5000 # ms for the initial settle (default 3000)
|
|
46
|
+
npx hyperframes check --no-contrast # skip the WCAG audit while iterating
|
|
47
|
+
npx hyperframes check --strict # exit non-zero on warnings too (default: only errors)
|
|
42
48
|
```
|
|
43
49
|
|
|
44
|
-
|
|
50
|
+
One command, one Chrome boot. `check` runs the linter first and skips the browser entirely when lint reports errors. Then it loads the bundled composition once, wires runtime listeners before navigation, and sweeps one seek grid running every audit per sample:
|
|
45
51
|
|
|
46
|
-
- JavaScript console errors
|
|
47
|
-
-
|
|
48
|
-
-
|
|
52
|
+
- **Runtime**: JavaScript console errors, unhandled exceptions, failed network requests (media-file `ERR_ABORTED` filtered out), HTTP 4xx/5xx.
|
|
53
|
+
- **Layout**: text extending outside its container or the canvas, text clipped by its own box, held text overlaps and occlusion (with an approximate covered fraction), children escaping clipping containers.
|
|
54
|
+
- **Motion**: `*.motion.json` sidecar assertions against the same seeked timeline (see below).
|
|
55
|
+
- **Contrast**: WCAG AA on visible text, sampled at 5 grid points. Failures are **errors** and each finding carries the sampled fg/bg colors, measured vs required ratio, and a suggested compliant color in the same palette direction, so most contrast fixes need no screenshot at all.
|
|
49
56
|
|
|
50
|
-
|
|
57
|
+
Every finding carries a selector, the element's `data-*` identity, the composition source file, a bbox, and the sample time: jump straight from the JSON to the HTML you must edit and re-run.
|
|
51
58
|
|
|
52
|
-
-
|
|
53
|
-
- Stay within the palette family — don't invent a new color, adjust the existing one.
|
|
54
|
-
- Re-run `validate` until clean.
|
|
59
|
+
**Severity is persistence-aware.** A dynamic issue observed at a single grid sample (an entrance/exit transient) demotes to info and never gates. Issues held across samples gate the exit code, and a held `content_overlap` is an error. If a 3s+ composition shows zero geometry change across every sample, `check` fails with `sweep_static`: a frozen timeline makes every green verdict unreliable, so it refuses to pass.
|
|
55
60
|
|
|
56
|
-
|
|
61
|
+
**Escape hatches** (mark intent in the HTML, then re-run):
|
|
57
62
|
|
|
58
|
-
|
|
63
|
+
- `data-layout-allow-overflow` — overflow is intentional (entrance/exit travel).
|
|
64
|
+
- `data-layout-allow-overlap` — deliberate text layering (e.g. a demo cursor label over a heading).
|
|
65
|
+
- `data-layout-allow-occlusion` — an element is meant to cover text.
|
|
66
|
+
- `data-layout-ignore` — decorative element that should never be audited.
|
|
67
|
+
|
|
68
|
+
**Opt-in pipeline gates** (used by orchestrators; off by default):
|
|
59
69
|
|
|
60
70
|
```bash
|
|
61
|
-
npx hyperframes
|
|
62
|
-
npx hyperframes
|
|
63
|
-
npx hyperframes inspect --json # agent-readable findings (schemaVersion, samples, issues, bboxes)
|
|
64
|
-
npx hyperframes inspect --samples 15 # denser timeline sweep (default 9)
|
|
65
|
-
npx hyperframes inspect --at 1.5,4,7.25 # explicit hero-frame timestamps
|
|
66
|
-
npx hyperframes inspect --tolerance 4 # allowed overflow in px before reporting (default 2)
|
|
67
|
-
npx hyperframes inspect --strict # exit non-zero on warnings too (default: only errors)
|
|
71
|
+
npx hyperframes check --caption-zone "x0=0;y0=.82;x1=1;y1=1;severity=error;seek=.25,1"
|
|
72
|
+
npx hyperframes check --frame-check # media (img/svg/video/canvas) out-of-frame detection
|
|
68
73
|
```
|
|
69
74
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
- Text extending outside the nearest visual container or bubble
|
|
73
|
-
- Text clipped by its own fixed-width/fixed-height box
|
|
74
|
-
- Text extending outside the composition canvas
|
|
75
|
-
- Children escaping clipping containers
|
|
76
|
-
|
|
77
|
-
Errors should be fixed before rendering. Warnings are surfaced for agent review; add `--strict` to fail on warnings too. Repeated static issues are collapsed by default so JSON output stays compact for LLM context windows.
|
|
78
|
-
|
|
79
|
-
**Escape hatches:**
|
|
75
|
+
`--caption-zone` takes fractional band geometry (`x0/y0/x1/y1` required, 0-1 fractions of the composition's own canvas, portrait included) with optional `severity` and comma-separated `seek` fractions; it flags content whose center sits inside the band. `--frame-check` reports media elements breaching the canvas beyond `max(120px, 6% of the min canvas dimension)`.
|
|
80
76
|
|
|
81
|
-
|
|
82
|
-
- `data-layout-ignore` — mark a decorative element that should never be audited.
|
|
77
|
+
**Fixing contrast errors** — thresholds are 4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold). The finding's `suggestedColor` already picks the nearest compliant color in the right direction (brighten on dark backgrounds, darken on light); apply it or adjust within the palette family, then re-run `check`.
|
|
83
78
|
|
|
84
|
-
|
|
79
|
+
## Motion verification (`*.motion.json` sidecar)
|
|
85
80
|
|
|
86
|
-
|
|
81
|
+
`check` verifies **motion intent** against the same seeked timeline the renderer uses — the closest automated proxy for "render the MP4 and watch it". It catches render-vs-preview bugs layout sampling can't: an entrance reveal the seek lands past, a broken stagger order, an element drifting off-frame mid-tween, a frozen shot.
|
|
87
82
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
Drop a `*.motion.json` sidecar next to the composition (matching the html basename when several compositions share a dir). `inspect` discovers it automatically — no flag, no authoring-framework changes. With no sidecar, `inspect` behaves exactly as before.
|
|
83
|
+
Drop a `*.motion.json` sidecar next to the composition (matching the html basename when several compositions share a dir). `check` discovers it automatically — no flag, no authoring-framework changes. With no sidecar, `check` behaves exactly as before.
|
|
91
84
|
|
|
92
85
|
```json
|
|
93
86
|
{
|
|
@@ -108,7 +101,7 @@ Drop a `*.motion.json` sidecar next to the composition (matching the html basena
|
|
|
108
101
|
| `staysInFrame(selector)` | once visible, its box leaves the canvas — `motion_off_frame` |
|
|
109
102
|
| `keepsMoving(withinSelector?)` | a fully-static window exceeds `maxStaticSec` (default 2s) — `motion_frozen` |
|
|
110
103
|
|
|
111
|
-
`duration`, `withinSelector`, and `maxStaticSec` are optional. Findings are **errors by default**
|
|
104
|
+
`duration`, `withinSelector`, and `maxStaticSec` are optional. Findings are **errors by default** and appear in the same human and `--json` output as layout findings. A selector that matches nothing is reported as `motion_selector_missing` rather than silently passing — a typo'd selector fails loudly. Use this in the feedback loop instead of eyeballing the render: assert what the motion is supposed to do, and let `check` tell you when the seek diverges from intent.
|
|
112
105
|
|
|
113
106
|
## snapshot
|
|
114
107
|
|
|
@@ -118,4 +111,27 @@ npx hyperframes snapshot ./my-project # specific project
|
|
|
118
111
|
npx hyperframes snapshot --frames 10 # evenly-spaced N frames
|
|
119
112
|
```
|
|
120
113
|
|
|
121
|
-
Captures still PNGs from the composition for visual diffing, thumbnails, or attaching to a PR. Faster than rendering a video when you only need a few hero frames. Output lands in the project's snapshots directory.
|
|
114
|
+
Captures still PNGs from the composition for visual diffing, thumbnails, or attaching to a PR. Faster than rendering a video when you only need a few hero frames. Output lands in the project's snapshots directory. Not deprecated: it remains the standalone capture utility, while `check --snapshots` covers the gate's needs (overview frames annotated with labeled finding boxes, plus `finding-NN-<code>.png` crops for every error finding with a bbox).
|
|
115
|
+
|
|
116
|
+
### Zooming into a reported finding
|
|
117
|
+
|
|
118
|
+
`hyperframes check --snapshots` already writes a `finding-NN-<code>.png` crop for every error finding that carries a bbox, but the same zoom is available standalone once you know what to look at:
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
npx hyperframes check --snapshots # reports a finding, e.g. content_overlap on "#cta"
|
|
122
|
+
npx hyperframes snapshot --zoom "#cta" # crop the element to verify the defect, at 3x density
|
|
123
|
+
npx hyperframes snapshot --zoom "100,50,400,300" --zoom-scale 2 # or an exact pixel region
|
|
124
|
+
# fix the composition HTML, then re-check:
|
|
125
|
+
npx hyperframes check
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
`--zoom` takes a CSS selector or an exact `x,y,w,h` pixel region and always produces a real high-density crop (a raised `deviceScaleFactor`, never CSS zoom or a viewport resize), so the composition's layout — and its render determinism — is untouched. A selector matching nothing is a loud error, not a silent full-frame fallback, and a frame where the target has no visible box (collapsed or animated off-canvas) is skipped with a note instead of written as a sliver.
|
|
129
|
+
|
|
130
|
+
## Deprecated: validate, inspect, layout
|
|
131
|
+
|
|
132
|
+
All three keep working, print a deprecation notice on stderr, and mark `_meta.deprecated: true` in `--json`. Their functionality lives in `check`:
|
|
133
|
+
|
|
134
|
+
- `validate` (runtime errors + contrast) → `check` (contrast failures are now gating errors with fix payloads, not warnings).
|
|
135
|
+
- `inspect` / `layout` (layout sweep + motion sidecar) → `check` (same flags: `--samples`, `--at`, `--at-transitions`, `--tolerance`, `--strict`).
|
|
136
|
+
|
|
137
|
+
Migrate scripts by replacing the sequence with the single `check` invocation; scaffolded projects' `npm run check` already points there.
|