Skip to content

Preview: type an exact zoom % and see a pixel grid at high zoom #5587

New issue
New issue
Closed
#5708
Closed
Preview: type an exact zoom % and see a pixel grid at high zoom#5587
#5708
Labels
desktop-candidateShared Studio code that the HyperFrames Desktop app also usesdifficulty/mediumBounded work requiring subsystem knowledge, related paths, or additional regression fixtures.enhancementNew feature or requesthelp wantedReady, available work with maintainer review support; any difficulty.triage/readyAccepted scope, current evidence, acceptance criteria, and validation path are recorded.

Description

@miguel-heygen
miguel-heygen
opened on Oct 14, 2026

The preview shows its zoom as a percentage (packages/studio/src/components/nle/NLEPreview.tsx, PreviewZoomOverlay.tsx) but you cannot type a value, and at high zoom there is no way to see individual pixels.

Done when

  • Clicking the zoom readout lets you type a percentage (clamped to the existing limits); Enter applies, Esc cancels.
  • Above 800% a one-pixel grid is drawn over the preview. It is never part of a render or a snapshot.
  • Tests for the parsing and clamping and for the grid threshold.

Desktop candidate: this component is also used by the HyperFrames Desktop app, so the change reaches it with the next version bump.

Reviewer: @miguel-heygen. New to the repo? Start with CONTRIBUTING.md; run bun install, then the package's tests, before opening a PR.

Activity

  1. miguel-heygen
    added
    difficulty/mediumBounded work requiring subsystem knowledge, related paths, or additional regression fixtures.
    enhancementNew feature or request
    help wantedReady, available work with maintainer review support; any difficulty.
    triage/readyAccepted scope, current evidence, acceptance criteria, and validation path are recorded.
    desktop-candidateShared Studio code that the HyperFrames Desktop app also uses
    on Oct 14, 2026

  2. mrmenon23 commented on Oct 16, 2026

    @mrmenon23
    mrmenon23
    on Oct 16, 2026
    Contributor

    I'd like to take this for my CS146S OSS contribution. Plan: make the zoom readout in PreviewZoomOverlay.tsx an editable input (Enter applies, Esc/blur cancels), parsing input like 250, 250% and clamping with clampPreviewZoomPercent. Then draw a CSS 1px grid overlay outside the composition iframe, so it never reaches renders or snapshots. Parsing, clamping and the threshold go in previewZoom.ts with tests in previewZoom.test.ts. One question: MAX_PREVIEW_ZOOM_PERCENT is currently 400, so a grid "above 800%" could never show. Should I raise the max (say to 3200%), or use a lower grid threshold?

  3. mrmenon23
    added 2 commits that reference this issue on Oct 16, 2026

    feat(studio): type an exact preview zoom and see a pixel grid at high…

    5c8f96c

    feat(studio): type an exact preview zoom and see a pixel grid at high…

    0ec5472
  4. mrmenon23
    added a commit that references this issue on Nov 6, 2026

    feat(studio): type an exact preview zoom and see a pixel grid at high…

    74db11e
  5. jrusso1020
    closed this as completedin #5708on Nov 7, 2026
  6. PaprikaChen
    added a commit that references this issue on Nov 7, 2026

    feat(studio): type an exact preview zoom and see a pixel grid at high…

    25a6101
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    desktop-candidateShared Studio code that the HyperFrames Desktop app also usesdifficulty/mediumBounded work requiring subsystem knowledge, related paths, or additional regression fixtures.enhancementNew feature or requesthelp wantedReady, available work with maintainer review support; any difficulty.triage/readyAccepted scope, current evidence, acceptance criteria, and validation path are recorded.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions