Skip to content

examples(surface): comprehensive Surface demo on a single screen#91

Merged
re-marked merged 1 commit into
mainfrom
examples/surface-improved
May 17, 2026
Merged

examples(surface): comprehensive Surface demo on a single screen#91
re-marked merged 1 commit into
mainfrom
examples/surface-improved

Conversation

@re-marked

Copy link
Copy Markdown
Owner

A rewrite of `examples/surface/surface.tsx` (now `pnpm demo:surface`) that puts every Surface aspect on one labeled screen, with interactive controls that exercise the edge cases and the codex-driven fixes from #90:

# Section What it shows
1 LAYERS All 8 named bands (`base / docked / overlay / dropdown / modal / popover / tooltip / drag-ghost`) painted in a diagonal stack — paint order matches band ascending. Each surface is labeled with its layer name + numeric z.
2 ELEVATION (0…5) Six surfaces side-by-side at each elevation level. Shadow band grows wider as the level rises.
3 BOUNDARY Two overlapping clickable Surfaces with click counters. The boundary surface (top, `hitTestBoundary`) occludes the sibling everywhere it covers, but click-through works on the sibling's exposed left + right edges.
4 COMPOSITION `` inside an elevated `` — drag-time z boost still wins paint over the parent's chrome and elevation shadow.
5 BOX/SURFACE PARITY Bare `` next to a bare `` with identical props — visually indistinguishable (regression guard for the codex P1 Box-defaults fix).
6 STRESS Movable / resizable / elevation-adjustable Surface (arrows / -+= / [] keys). Exercises the shadow-clear-on-move/shrink path (codex P2 fix on #90).
7 MODAL+BACKDROP Press `m` to toggle a modal with auto-rendered backdrop. `n` toggles a nested modal at `z=3010` — each modal pairs with its own scrim at `(z - 1)`, demonstrating peer-modal layering.

Keys

```
q · Esc · Ctrl+C quit
m toggle modal (with backdrop)
n toggle a nested modal (peer above the first)
←→↑↓ move the stress-test surface

  • / = shrink / grow the stress-test surface
    [ / ] decrease / increase its elevation
    ```

Notes

  • One screen, no tabs / scrolling — every aspect visible at once.
  • Interactive controls intentionally exercise the codex-fixed paths (shadow clean-up on move/shrink, Box flex defaults via parity demo).
  • Boundary section has live click counters so you can verify occlusion + click-through with a few real clicks rather than trusting the test pin.

Test plan

  • `pnpm typecheck` / `pnpm lint` / `pnpm test` all clean (863 tests pass, unchanged)
  • `pnpm build` clean
  • Demo boots in a real TTY (verified through to AlternateScreen mount; piped stdin can't enter raw mode, expected)

…position/parity/stress/modal

Co-Authored-By: Mark <psyhik17@gmail.com>
Co-Authored-By: Claude <noreply@anthropic.com>
@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

@re-marked
re-marked merged commit 89d4f90 into main May 17, 2026
1 check passed
@re-marked
re-marked deleted the examples/surface-improved branch May 17, 2026 20:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant