Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,15 @@ jobs:
node-version: 22
cache: npm
- run: npm ci
- run: npm audit --audit-level=high
- run: npm run check
- run: npm run format:check
- run: npm run worker:check
env:
WRANGLER_LOG_PATH: /tmp/wallpect-wrangler-ci.log
WRANGLER_LOG_SANITIZE: "true"
WRANGLER_SEND_ERROR_REPORTS: "false"
WRANGLER_SEND_METRICS: "false"

browser:
runs-on: ubuntu-latest
Expand Down
46 changes: 45 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,49 @@ All notable changes to Wallpect are recorded in this file. The format follows [K

## [Unreleased]

## [0.4.0] - 2026-08-11

### Added

- Added a bounded 50-step undo/redo history for each device and orientation, with continuous drag, pinch, wheel, slider, and number-field edits grouped into meaningful steps.
- Added visible composition-history controls, `Command`/`Ctrl` keyboard shortcuts, and one-pixel directional nudging on desktop and mobile.
- Added an accessible original-composition comparison that leaves the edited transform and export result unchanged, then returns to the edit automatically when adjustment resumes.
- Added a distraction-free focus preview that enlarges the existing Canvas on desktop and mobile, preserves the active composition, and restores the editor by button or `Escape`.
- Added an accessible mobile workspace-size control that gives long editing panels more room and restores the balanced preview without changing the composition.
- Added an immediate composition check beside Fill/Fit that explains the current crop in plain language on desktop and mobile.
- Added an undoable “Show whole image” action for noticeable or heavy crop, and moved the composition check to the start of Adjust so the result is visible before manual controls.
- Added a first-screen quick-position row for centering or moving an image by 10% of the active canvas, while retaining exact X/Y fields and one-pixel nudging.
- Added undoable content-position controls that expose useful left/centre/right or top/middle/bottom alignments only when the image geometry has room to move, giving touch and keyboard users an alternative to repeated dragging.
- Added a live-value Precise controls disclosure for exact X/Y, one-pixel nudging, and rotation on desktop and mobile.
- Added source-pixel enlargement feedback to the composition check, device information, and exact-output summary using the same geometry as preview and export.
- Added progressive export options so exact output and the primary download stay visible before optional format, filename, quality, and guide controls.
- Added a one-tap preview orientation control that remains available in the mobile editing flow and distraction-free focus preview.

### Changed

- Made device search span iPhone, iPad, Mac, and Apple display configurations without requiring users to choose the correct category first.
- Kept desktop and mobile device selectors aligned with the selected device family and improved pasted-resolution and multi-term matching.
- Kept desktop adjustment controls in reach by collapsing the full device browser until requested and automatically returning to the compact device summary after selection; the dedicated mobile device panel remains fully expanded.
- Increased key mobile editor controls to comfortable 44 px touch targets while preserving the compact scrollable workspace.
- Replaced the non-interactive mobile sheet grabber with explicit “More controls” and “More preview” actions, and kept the header within 320 px-wide viewports with 44 px language and menu targets.
- Made Adjust the mobile starting panel and return target after successful image or device selection; removing the image returns to Image.
- Reordered the desktop reference rail to keep the common export action within the first 1280 × 720 viewport while retaining complete device information below it.
- Kept solid, transparent, and blurred-extension backgrounds close to Fill/Fit and the new content-position controls so uncovered areas can be handled immediately on desktop and mobile.
- Made estimated crop account for zoom, normalized position, and rotation by clipping the transformed image bounds against the wallpaper canvas.
- Replaced the generic loaded-image icon with the active local thumbnail and reset all per-device/orientation transforms and histories when the image is replaced or removed.
- Made zoom, rotation, and export-quality tracks reflect their actual range position instead of a fixed fill, with matching unit-aware accessible values.
- Reordered common adjustment controls ahead of advanced precision fields and folded the latter by default to reduce scanning and scrolling without removing editing accuracy.
- Made mode-specific overlay changes open their matching Lock Screen/Desktop or Safe area preview automatically, while keeping the composition grid and device cutout independent of preview mode.

### Security

- Kept local thumbnails on bundled same-origin or browser-generated `blob:` URLs; enlargement feedback and content positioning use dimensions and rendering geometry without pixel analysis, persistence, or image network requests.
- Added a deterministic public-safety check for high-confidence credentials, private paths, personal email addresses, Cloudflare resource identifiers, sensitive file types, and generated/private state without printing matched values.
- Added deployed third-party licence notices and a privacy-safe security reporting policy that uses GitHub private vulnerability reporting instead of a public email address.
- Disabled Wrangler usage metrics, deployment dependency metadata instrumentation, and Worker observability explicitly in the project configuration.
- Updated the affected Vite, jsdom, and Wrangler development dependency chains so both production-only and complete dependency audits report no known vulnerabilities.
- Added a CI gate for high- or critical-severity dependency advisories and made the Wrangler CI privacy settings explicit.

## [0.3.0] - 2026-08-10

### Added
Expand Down Expand Up @@ -114,7 +157,8 @@ All notable changes to Wallpect are recorded in this file. The format follows [K
- Uploaded images remain in browser memory and are not sent to an upload API or analytics service.
- Local secrets, credentials, build output, browser reports, and editor/OS metadata are excluded from version control.

[Unreleased]: https://github.com/kyeunga25/wallpect/compare/v0.3.0...HEAD
[Unreleased]: https://github.com/kyeunga25/wallpect/compare/v0.4.0...HEAD
[0.4.0]: https://github.com/kyeunga25/wallpect/compare/v0.3.0...v0.4.0
[0.3.0]: https://github.com/kyeunga25/wallpect/compare/v0.2.3...v0.3.0
[0.2.3]: https://github.com/kyeunga25/wallpect/compare/v0.2.2...v0.2.3
[0.2.2]: https://github.com/kyeunga25/wallpect/compare/v0.2.1...v0.2.2
Expand Down
37 changes: 28 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,25 @@ Wallpect helps you compose an image for a selected Apple device, inspect likely
### Highlights

- 47 distinct canvas configurations: 19 iPhone, 11 iPad, and 17 Mac/Apple-display configurations covering 191 named models from 2007–2026
- Devices with the same wallpaper canvas and obstruction geometry share one option; every model name, year, diagonal, and resolution remains searchable
- Devices with the same wallpaper canvas and obstruction geometry share one option; one search spans iPhone, iPad, and Mac model names, years, diagonals, and resolutions
- The desktop device browser stays compact after selection so composition controls remain in reach; the mobile device tab keeps the complete searchable catalogue visible
- Local PNG, JPEG, and WebP decoding, limited to 30 MB, 12,000 px on the longest edge, and 72 megapixels
- The bundled demo is synthetic project artwork with its content-authenticity provenance preserved; it contains no Apple product asset or user image
- The image card shows the active local thumbnail; replacing an image clears old composition histories for every device and orientation so a previous image's position is not reused accidentally
- Portrait and landscape compositions stored independently for each device
- Per-device/orientation undo and redo with grouped gestures, keyboard shortcuts, and one-pixel position nudging
- First-screen quick positioning to center an image or move it by 10% of the active canvas without entering X/Y values
- Contextual **Content position** controls expose useful left/centre/right or top/middle/bottom alignments when the image has room to move, bringing people, logos, or text into view without repeated dragging; every alignment remains undoable
- A live-value **Precise controls** disclosure keeps exact X/Y, one-pixel nudging, and rotation available without crowding the everyday adjustment flow
- Zoom, rotation, and export-quality tracks fill to the actual current value and expose the same value with its unit to assistive technology
- One-tap original-composition comparison without replacing edited values or export output
- Distraction-free focus preview that temporarily hides editing panels without changing the composition
- One-tap portrait/landscape switching directly on the preview, including while Adjust or focus preview remains active
- Mode-specific guide switches automatically open the matching Lock Screen/Desktop or Safe area preview so every change is immediately visible; the composition grid and device cutout remain mode-independent
- A mobile “More controls / More preview” switch for balancing long editing panels against the live preview, including compact 320 px-wide screens
- Mobile opens directly on Adjust and returns there after a local image or device is selected, avoiding repeated switches between a long catalogue and composition controls
- First-in-panel plain-language crop and source-pixel enlargement feedback on desktop and mobile, with undoable **Show whole image** and content-position actions for either preserving the whole source or choosing which part to show; solid, transparent, and blurred-extension choices remain nearby for uncovered areas
- Exact output and the primary download remain in the first desktop viewport at common MacBook heights; format, filename, and guide controls remain available under Export options
- Solid, transparent, or blurred-extension backgrounds
- Shared transform and Canvas rendering calculations for preview and export
- Responsive desktop and mobile workspaces
Expand All @@ -39,12 +55,13 @@ Wallpect helps you compose an image for a selected Apple device, inspect likely
## Try it

1. Open [wallpect.k-y.cc](https://wallpect.k-y.cc).
2. Use the bundled sample or choose an image from your device.
3. Select a device profile and orientation.
4. Adjust the composition and enable the guides you want to inspect.
5. Choose PNG, JPEG, or WebP and export at the displayed resolution.
2. Use the bundled sample or choose an image from your device. The image-card thumbnail confirms what is being edited. Choosing another image starts a fresh composition instead of reusing the previous image's offsets or undo history.
3. Select a device profile and orientation. On desktop, use **Change** to reopen the full device browser whenever needed. Mobile returns to **Adjust** after an image or device is selected; use the rotate action on the preview to switch orientation without leaving the current editing view.
4. Check the current crop and estimated enlargement at the start of **Adjust**. If important content is heavily cropped, use **Show whole image** for an undoable automatic fit or **Content position** to reveal the source's left/centre/right or top/middle/bottom without repeated dragging. Both use dimensions and shared rendering geometry only; they do not analyse the image. Choose the nearby solid, transparent, or blurred-extension background for uncovered areas. Use **Quick position** to center the image or move it in 10% steps when composing manually. Open **Precise controls** for exact X/Y values, one-pixel nudging, and rotation; its summary keeps the current values visible while folded. Drag and undo/redo remain directly available. On mobile, use **More controls** when a long panel needs space, compare the original framing, or enter focus preview as needed.
5. In **Overlays**, change Safe area, lock-screen, menu-bar, or Dock guides directly; Wallpect opens the matching preview mode so you can see the result immediately. The composition grid and device cutout stay in the current mode.
6. Use **Download wallpaper** below the exact output to keep the current format. Open **Export options** first when you need JPEG, WebP, a custom filename, or exported guides.

Your image stays in browser memory and is released when it is replaced, the page is refreshed, or the page is closed. Only the selected locale (`wallpect:locale:v1`) and up to four recent device identifiers (`wallpect:recent-devices:v1`) are saved in versioned `localStorage`. Normal requests for public site files still pass through Cloudflare, but they do not contain your selected image bytes.
Your image and its thumbnail stay in browser memory and are released when the image is replaced or removed, the page is refreshed, or the page is closed. The enlargement estimate is calculated only from image dimensions, the selected canvas, and the shared rendering geometry; it does not inspect or transmit image pixels. Only the selected locale (`wallpect:locale:v1`) and up to four recent device identifiers (`wallpect:recent-devices:v1`) are saved in versioned `localStorage`. Normal requests for public site files still pass through Cloudflare, but they do not contain your selected image bytes.

The website provides directly accessible Traditional Chinese and English privacy, terms, disclaimer, and data-source notices. Maintenance and third-party source/API rules are documented in the [Terms, Privacy, and Data Policy](docs/LEGAL_PRIVACY_AND_DATA_POLICY.md).

Expand Down Expand Up @@ -134,7 +151,7 @@ You can self-deploy a fork to your own Cloudflare account without a database, st
PLAYWRIGHT_BASE_URL=https://<your-worker-url> npm run test:e2e
```

Wrangler credentials stay outside the repository. Never add API tokens, account or zone identifiers, deployment IDs, private domains, production data, local paths, logs, or screenshots containing private content to source control. The [deployment and self-hosting guide](docs/DEPLOYMENT.md) contains the safe configuration template, Workers Builds setup, Custom Domain steps, validation checklist, and rollback procedure. The [release guide](docs/RELEASING.md) covers the versioned release workflow.
Wrangler credentials stay outside the repository. Never add API tokens, account or zone identifiers, deployment IDs, private domains, production data, local paths, logs, or screenshots containing private content to source control. The checked-in configuration explicitly disables Wrangler usage metrics, deployment dependency metadata instrumentation, and Worker observability. The [deployment and self-hosting guide](docs/DEPLOYMENT.md) contains the safe configuration template, Workers Builds setup, Custom Domain steps, validation checklist, and rollback procedure. The [release guide](docs/RELEASING.md) covers the versioned release workflow.

## Architecture

Expand All @@ -147,7 +164,7 @@ Wrangler credentials stay outside the repository. Never add API tokens, account
| `src/i18n` | Locale selection, persistence, and translations |
| `tests` | Unit, integration, and end-to-end coverage |

Preview and export both call `renderWallpaper`. Pan offsets use the target canvas's normalized coordinate space, so a scaled preview and full-resolution export preserve the same composition.
Preview and export both call `renderWallpaper`. Pan offsets use the target canvas's normalized coordinate space, so a scaled preview and full-resolution export preserve the same composition. Composition check derives the visible area from those same image dimensions, canvas dimensions, and transforms without creating another rendering state.

See the [architecture document](docs/ARCHITECTURE.md) for the runtime boundary, local-data lifecycle, storage migration, offline behavior, and verification invariants.

Expand All @@ -159,6 +176,8 @@ See the [architecture document](docs/ARCHITECTURE.md) for the runtime boundary,
- [Deployment and self-hosting guide](docs/DEPLOYMENT.md)
- [Release guide](docs/RELEASING.md)
- [Legal, privacy, and data policy](docs/LEGAL_PRIVACY_AND_DATA_POLICY.md)
- [Security policy](SECURITY.md)
- [Production third-party licence notices](public/THIRD_PARTY_NOTICES.txt)
- [Changelog](CHANGELOG.md)

## Contributing
Expand All @@ -167,7 +186,7 @@ Issues and focused pull requests are welcome. Read [CONTRIBUTING.md](CONTRIBUTIN

## License and disclaimer

Wallpect is available under the [MIT License](LICENSE).
Wallpect is available under the [MIT License](LICENSE). Third-party code included in the production browser bundle is listed with its applicable licence text in the [third-party notices](public/THIRD_PARTY_NOTICES.txt).

Wallpect is an independent tool. It is not affiliated with or endorsed by Apple Inc. Apple product names are used only to identify compatible device profiles.

Expand Down
Loading
Loading