{"args":["\n\n\n\nBlinking cursor fixture\n\n\n\n\n
\n

Terminal-flavored landing hero

\n
\n

user@host:~$ run demo

\n

user@host:~$ tail -f logs ▌

\n

user@host:~$ next up

\n
\n\n

Status \n loading \n and a LIVE badge word\n plus a big panel

\n\n
\n

editable prompt

\n
\n\n
\n

textbox prompt

\n
\n
\n\n
\n\n
\n

deep footer terminal

\n
\n\n\n\n",{"styleText":"\n * { margin: 0; padding: 0; box-sizing: border-box; }\n body { font-family: monospace, monospace; font-size: 16px; }\n .hero { padding: 40px; }\n .terminal { background: #111; color: #eee; padding: 24px; width: 600px; }\n\n @keyframes blink-anim { 50% { opacity: 0; } }\n @keyframes flicker { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }\n @keyframes caret-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n /* FLAG: solid block cursor in the hero terminal */\n .flag-block-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a; vertical-align: text-bottom;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* FLAG: glyph cursor, animation name says nothing but keyframes toggle opacity */\n .flag-glyph-cursor { animation: flicker 1s steps(2) infinite; }\n\n /* FLAG: underscore bar cursor */\n .flag-underscore-cursor {\n display: inline-block; width: 12px; height: 3px;\n background: #eee; vertical-align: baseline;\n animation: caret-blink 0.9s steps(1) infinite;\n }\n\n /* PASS: same block cursor shape, but deep below the landing region */\n .pass-below-fold-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #33d17a;\n animation: blink-anim 1.1s steps(1) infinite;\n }\n\n /* PASS: cursor inside real editable surfaces */\n .pass-editable-cursor, .pass-textbox-cursor {\n display: inline-block; width: 10px; height: 18px;\n background: #444;\n animation: blink-anim 1s steps(1) infinite;\n }\n\n /* PASS: round pulsing dot stays with the pulsing-dot rule */\n .pass-round-dot {\n display: inline-block; width: 8px; height: 8px;\n background: #33d17a; border-radius: 50%;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n /* PASS: spinner animates transform, not visibility */\n .pass-spinner {\n display: inline-block; width: 16px; height: 16px;\n border: 2px solid #999; border-top-color: #333; border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n /* PASS: a blinking word is not a cursor shape */\n .pass-blinking-word { animation: flicker 1s steps(2) infinite; }\n\n /* PASS: large blinking panel fails the caret-size gates */\n .pass-blinking-panel {\n display: inline-block; width: 200px; height: 90px;\n background: #222;\n animation: blink-anim 2s steps(1) infinite;\n }\n\n .spacer { height: 1400px; }\n\nstyle=\"margin-top: 24px;\"\nstyle=\"margin-top: 24px;\"\nstyle=\"margin-top: 24px;\"","classText":"hero\nterminal\nflag-block-cursor\nflag-glyph-cursor\nflag-underscore-cursor\npass-round-dot\npass-spinner\npass-blinking-word\npass-blinking-panel\nterminal\npass-editable-cursor\nterminal\npass-textbox-cursor\nspacer\nterminal\npass-below-fold-cursor"}],"result":[{"id":"pulsing-dot","snippet":".pass-round-dot — 8x8px dot with infinite \"blink-anim\" animation","selector":".pass-round-dot"}]} {"args":["\n\n\n \n \n Body text viewport edge — Should Flag vs Should Pass\n \n\n\n\n \n
\n

Lucia opened this place in 1978. She cooked every night for fifty years, making the same dishes: spaghetti carbonara, eggplant parmigiana, veal saltimbocca, fresh lasagna. She did not change a single recipe in all that time. Her grandson Anthony runs the kitchen now, using the same recipes with the same care.

\n
\n
\n

This second flush-to-edge paragraph confirms the rule fires on every body paragraph that touches the viewport, not just one. The rendered width should be the full viewport, with text starting essentially at x=0.

\n
\n
\n \n
\n\n \n
\n
\n

Should pass

\n\n paragraph in centered container with 32px padding\n
\n

This paragraph sits inside a max-width container that's centered and has 32px horizontal padding. It does not touch the viewport edges and should not trigger the rule.

\n
\n\n paragraph inside <nav> (excluded — nav can bleed)\n \n\n paragraph inside <header> (excluded — header can bleed)\n
\n

Banner headers commonly bleed to viewport edges with their own internal layout. The rule excludes <header> descendants.

\n
\n\n paragraph inside full-bleed section with own background\n
\n

This paragraph sits in a full-bleed section that has its own background-color set (intentional design move). The rule excludes paragraphs whose element has its own background-color.

\n
\n\n short label / button-ish text (excluded — < 40 chars)\n

Short label.

\n
\n\n
\n

Notes

\n

The flag cases above (rendered outside this grid) demonstrate the failure. The pass cases here show acceptable patterns. The rule gates aggressively to avoid false positives: it only flags <p> and <li> with >40 chars whose width spans more than 50% of the viewport AND whose rect.left or rect.right is within 16px of a viewport edge AND which are not inside nav/header AND which have no own background-color AND which are in normal flow (not position:fixed/absolute).

\n
\n
\n\n \n\n\n",{"styleText":"\n /* Fixture for the body-text-viewport-edge rule. The rule fires\n when a

or

  • with substantial text content has rect.left\n within 16px of the viewport edge (or rect.right within 16px\n of viewport.width) AND the element has no own background-color\n AND is not inside