snapshot-flags.ts
30 lines · browse/src/snapshot-flags.ts at 3f79d81
1export interface SnapshotOptions {
2 interactive?: boolean;
3 compact?: boolean;
4 depth?: number;
5 selector?: string;
6 diff?: boolean;
7 annotate?: boolean;
8 outputPath?: string;
9 cursorInteractive?: boolean;
10 heatmap?: string;
11}
13export const SNAPSHOT_FLAGS: Array<{
14 short: string;
15 long: string;
16 description: string;
17 takesValue?: boolean;
18 valueHint?: string;
19 optionKey: keyof SnapshotOptions;
20}> = [
21 { short: '-i', long: '--interactive', description: 'Interactive elements only (buttons, links, inputs) with @e refs. Also auto-enables cursor-interactive scan (-C) to capture dropdowns and popovers.', optionKey: 'interactive' },
22 { short: '-c', long: '--compact', description: 'Compact (no empty structural nodes)', optionKey: 'compact' },
23 { short: '-d', long: '--depth', description: 'Limit tree depth (0 = root only, default: unlimited)', takesValue: true, valueHint: '<N>', optionKey: 'depth' },
24 { short: '-s', long: '--selector', description: 'Scope to CSS selector', takesValue: true, valueHint: '<sel>', optionKey: 'selector' },
25 { short: '-D', long: '--diff', description: 'Unified diff against previous snapshot (first call stores baseline)', optionKey: 'diff' },
26 { short: '-a', long: '--annotate', description: 'Annotated screenshot with red overlay boxes and ref labels', optionKey: 'annotate' },
27 { short: '-o', long: '--output', description: 'Output path for annotated screenshot (default: <temp>/browse-annotated.png)', takesValue: true, valueHint: '<path>', optionKey: 'outputPath' },
28 { short: '-C', long: '--cursor-interactive', description: 'Cursor-interactive elements (@c refs — divs with pointer, onclick). Auto-enabled when -i is used.', optionKey: 'cursorInteractive' },
29 { short: '-H', long: '--heatmap', description: 'Color-coded overlay screenshot from JSON map: \'{"@e1":"green","@e3":"red"}\'. Valid colors: green, yellow, red, blue, orange, gray.', takesValue: true, valueHint: '<json>', optionKey: 'heatmap' },
30];