rpc-agent 0.0.0-stage → 0.3.1

package/CHANGELOG.md

@@ -0,0 +1,103 @@
+# Changelog
+
+## 0.3.1
+
+Published to npm as `rpc-agent`.
+
+### Added
+
+- Install with `npx rpc-agent …` or `npm i -g rpc-agent`. MCP setup for
+  Claude Code is `claude mcp add --scope user rpc -- npx -y rpc-agent mcp`;
+  Cursor uses `"command": "npx", "args": ["-y", "rpc-agent", "mcp"]`.
+- Package metadata (repository, homepage, bugs, keywords, author) and a
+  `prepublishOnly` check that typechecks, builds and runs the tests.
+
+### Changed
+
+- The missing-Chromium message now says `npx rpc-agent install` (or
+  `rpc install`) and names the Playwright version, instead of pointing at
+  `npx playwright install chromium` inside the package folder, which under
+  npx is a cache directory and could pull a different Playwright.
+- `rpc install` run through npx no longer shows Playwright's "install your
+  project's dependencies" warning box, which didn't apply.
+- `rpc install` downloads only Chromium's headless shell (`--only-shell`),
+  which is all rpc launches: about 210 MB on disk instead of about 580 MB.
+- Requires Node 20.12 or newer (what `@clack/prompts` needs).
+- Chromium is still never downloaded on install: run `rpc install` once.
+
+## 0.3.0
+
+A terminal UI modelled on the `skills` CLI (skills.sh). Nothing changes for
+agents, scripts or CI.
+
+### Added
+
+- `rpc` with no arguments, in a terminal, is an interactive capture: URL
+  (defaults to a running dev server on localhost), a grouped device picker,
+  bezels / full page / dark mode / reduced motion, a summary and a confirm.
+  It ends with the equivalent `rpc shot` command.
+- `rpc shot` in a terminal: `RPC` banner, a capture summary, a spinner per
+  device that resolves to status and time, a results table (status, time,
+  console errors), the files written with pixel and file sizes, failures
+  grouped with their hint, and `Done!  Open with: open .rpc-shots`.
+- `--open` opens the output folder when the capture finishes.
+- `rpc devices` in a terminal: aligned, coloured by category, with each
+  device's aliases. `rpc doctor` in a terminal: a checklist with the fix in
+  a box.
+- Per-command help: `rpc help shot`, `rpc shot --help` (also devices,
+  doctor, install, mcp). `rpc --help` in a terminal has sections and
+  examples.
+- `docs/cli-design.md`: what rpc borrows from the `skills` CLI and when the
+  rich output is used.
+
+### Unchanged
+
+- Output to pipes, files and CI (`CI` set, `TERM=dumb`) is the 0.2 output.
+  `--json` output, exit codes and the MCP server are untouched; `rpc mcp`
+  and `--json` don't load the UI code. `NO_COLOR` turns colour off and
+  `FORCE_COLOR` turns it on for the plain output.
+
+### Dependencies
+
+- `@clack/prompts` and `picocolors`.
+
+## 0.2.0
+
+From the first real use: an agent reviewing a deployed site on iphone-15,
+ipad and desktop-1440 with bezels and full page.
+
+### Added
+
+- Full pages of any height. Pages taller than Chromium's 16,384 px capture
+  limit are taken as clipped full-page segments and stitched in Node (no
+  native dependencies). Sticky headers and fixed elements appear once. New
+  `maxHeight` / `--max-height` cap (60,000 CSS px), reported as `clipped`,
+  with `capturedHeight` and `segments` in the result.
+- Full-page review in one MCP call. With `fullPage`, `screenshot` returns the
+  framed first screen and then the whole page as labelled, viewport-tall JPEG
+  slices (`iphone-15 · slice 2/7 · y=852–1704 css px`). New params
+  `maxSlices` (10), `saveSlices` and `sliceWidth` (768). When slices are cut,
+  the result says which range was skipped, and every slice is saved to disk
+  with its path listed. CLI: `--slices`, `--slice-width`.
+- Actionable errors. Navigation failures come back per device as `error`,
+  `code` (`ERR_NAME_NOT_RESOLVED`, `TIMEOUT`, ...) and `hint`, covering
+  sandbox / network allowlists, dev servers not running, proxies, TLS and
+  timeouts. MCP results lead with the failures in plain text.
+- `reducedMotion` / `--reduced-motion` emulates
+  `prefers-reduced-motion: reduce`.
+- Missing-browser check. If Playwright's Chromium isn't installed, the CLI and
+  the MCP tool say so with the fix (`npx playwright install chromium`, or
+  `rpc install`) instead of Playwright's raw error; the MCP server keeps
+  running. New `rpc doctor` and `rpc install` commands.
+
+### Changed
+
+- The warm-up scroll covers the whole capped height (up to 100 steps) rather
+  than stopping at 30,000 px.
+- `pnpm smoke:mcp` takes `--full-page`, `--devices`, `--max-slices`, `--out`.
+
+## 0.1.0
+
+First version: CLI and stdio MCP server, 49 devices and bezels from
+Responsive Point Check, Playwright Chromium capture, bezel compositing in a
+Playwright page.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Akintola Tope
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,16 @@
+rpc-agent
+Derived from responsive-point-check (https://github.com/akintola4/responsive-point-check),
+MIT License, Copyright (c) 2026 Akintola Tope.
+
+Device catalog (src/devices.ts) and bezel layout logic (src/bezel.ts) are ported
+from lib/devices.ts and lib/bezel-asset.ts in that repository.
+
+Bezel artwork (assets/bezels/*.svg) is copied unchanged from public/bezels/ in
+that repository and distributed under its MIT license. The SVGs carry no author
+or license metadata of their own; their element ids indicate Figma exports, but
+the original Figma source is not recorded in the upstream repo. Confirm the
+artwork's origin before any public release.
+
+The artwork depicts hardware made by Apple, Google, Samsung and Microsoft.
+Device names and product designs are trademarks of their respective owners.
+This project is not affiliated with or endorsed by any of them.

package/README.md

@@ -1,3 +1,303 @@
-# Temporary Holding Version
+# rpc-agent
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/hero-dark.png">
+  <img alt="A site captured by rpc on an iPhone 15, an iPad Air 11 and a 1440 px desktop, each framed in its device bezel" src="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/hero-light.png">
+</picture>
+
+Screenshot a URL at real device viewports, optionally framed in a device
+bezel, so an AI coding agent can look at the UI it just built. It's a CLI and
+an MCP server in one package, with Playwright (Chromium) doing the capture.
+
+The device catalog (49 phones, tablets, laptops and monitors) and the SVG
+bezels come from the [Responsive Point Check](https://github.com/akintola4/responsive-point-check)
+Chrome extension. See `NOTICE` for where the artwork comes from.
+
+## Install
+
+Requires Node 20.12 or newer. Run it without installing:
+
+```sh
+npx rpc-agent install          # first run: download headless Chromium (~210 MB on disk)
+npx rpc-agent shot localhost:3000 -d iphone-15,desktop-1440 --bezels
+```
+
+Or install it globally to get the `rpc` command:
+
+```sh
+npm i -g rpc-agent
+rpc install                    # first run: download Chromium
+rpc doctor                     # checks Chromium is installed and launches
+rpc shot https://example.com --bezels
+```
+
+Chromium is not downloaded when the package installs. `rpc install` (or
+`npx rpc-agent install`) fetches it with rpc's own Playwright version, so
+the browser always matches the one rpc launches. It installs only
+Chromium's headless shell (plus Playwright's small ffmpeg), not the full
+Chrome for Testing build, since rpc never opens a visible window. Until you run it, every
+command says Chromium is missing and prints that command, instead of
+failing with Playwright's own error. Browsers go to Playwright's usual
+cache, so other Playwright projects on the same version share them.
+
+### From source
+
+```sh
+git clone https://github.com/akintola4/rpc-agent.git
+cd rpc-agent
+pnpm install && pnpm build
+node dist/cli.js install
+pnpm link --global             # optional: puts this build's `rpc` on your PATH
+```
+
+Without the link, run `node /absolute/path/to/rpc-agent/dist/cli.js` where
+these docs say `rpc`, or `pnpm rpc` from inside the repo.
+
+## CLI
+
+![rpc run with no arguments: the banner, prompts for the URL, devices and bezels, a spinner per device, a results table and the list of files written, then the three framed screenshots](https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/demo.gif)
+
+```sh
+rpc                    # interactive: pick a URL, devices and options
+rpc shot <url> [options]
+rpc devices [--json]
+rpc doctor [--json]    # is Chromium installed, and does it launch?
+rpc install            # download Chromium with rpc's own Playwright version
+rpc mcp
+rpc help <command>     # options and examples for one command
+```
+
+Run `rpc` with no arguments in a terminal and it asks for the URL
+(defaulting to a dev server on localhost:3000, 5173, 4321 or 8080 if one is
+running), lets you tick devices from a grouped list (iPhone 15 Pro, iPad Air
+11" and Desktop 1440 are preselected) and pick bezels, full page, dark mode
+or reduced motion. It shows a summary, asks before capturing, and prints the
+equivalent `rpc shot` command at the end so you can re-run it.
+
+`rpc shot` in a terminal shows each device's progress, a results table and
+the files it wrote:
+
+<img alt="rpc shot in a terminal: a capture summary, one line per device with HTTP status and time, a results table, and the list of files written" src="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/terminal-shot.png" width="720">
+
+| Option | Meaning |
+| --- | --- |
+| `-d, --devices <ids>` | Comma-separated device ids or aliases. Default `iphone-15-pro,desktop-1440` |
+| `-b, --bezels` | Also write a copy framed in the device bezel |
+| `-f, --full-page` | Capture the full scroll height, however tall (up to `--max-height`) |
+| `--slices` | With `--full-page`, also write viewport-tall JPEG review slices |
+| `--slice-width <px>` | Maximum slice width. Default 768 |
+| `--max-height <px>` | Full-page cap in CSS px. Default 60000 |
+| `--reduced-motion` | Emulate `prefers-reduced-motion: reduce` |
+| `-o, --out <dir>` | Output directory. Default `./.rpc-shots` |
+| `--wait-for <selector>` | Wait for a visible element before capturing |
+| `--wait <ms>` | Extra settle delay after load |
+| `--color-scheme <s>` | `light`, `dark` or `no-preference` |
+| `--timeout <ms>` | Navigation timeout. Default 30000 |
+| `--no-emulate` | Viewport and DPR only: no mobile user agent or touch |
+| `--json` | Print the result as JSON |
+| `--open` | Open the output folder when done (`open`, `xdg-open` or `explorer`) |
+
+The URL can be a full URL, a bare local host (`localhost:3000` becomes
+`http://`), a bare domain (`example.com` becomes `https://`) or a path to a
+local `.html` file.
+
+```sh
+rpc shot localhost:3000 -d iphone-15,ipad,desktop-1440 --bezels
+rpc shot https://example.com/pricing --full-page --slices --color-scheme dark
+rpc shot localhost:5173 -d pixel --wait-for '[data-ready]' --json
+```
+
+Output files are named `<host>[-<path>]-<device>.png`, with `-framed.png`
+for bezel copies and `-slice-NN.jpg` for slices, for example
+`.rpc-shots/localhost-3000-iphone-15.png`. Re-running overwrites them, so the
+paths stay the same between runs.
+
+Aliases: `iphone`, `mobile`, `phone` (iphone-15-pro), `android`, `pixel`
+(pixel-8), `galaxy` (galaxy-s24), `ipad`, `tablet` (ipad-air-11), `macbook`
+(macbook-air-13), `laptop` (laptop-1280), `desktop` (desktop-1440), `imac`
+(imac-24). Run `rpc devices` for the full list.
+
+### What a capture does
+
+Each device gets a fresh browser context with its CSS viewport, device pixel
+ratio and, for phones and tablets, a mobile user agent plus touch. The page
+loads, then rpc waits for network idle (up to 10 s, so dev servers with HMR
+sockets don't hang it), web fonts and pending images. CSS animations,
+transitions and Web Animations are finished before the shot.
+
+With `--full-page`, rpc first scrolls through the page one viewport at a time
+so lazy images and IntersectionObserver content load, then scrolls back to
+the top. A page that fits in one Chromium capture (16,384 device px) is taken
+in one pass. A taller one is taken as clipped segments of about 8,000 device
+px and stitched into one PNG in Node, with no height limit apart from
+`--max-height` (60,000 CSS px by default; taller pages are cut there and
+marked `clipped`). Both paths render the page as if the viewport were the
+whole document, so sticky headers and fixed elements appear once, at the top,
+and `100vh` sections keep their real height.
+
+Bezels frame the above-the-fold viewport. With `--bezels --full-page` you get
+both: the full page raw, and the first screen framed.
+
+### Terminal, pipes and CI
+
+The banner, spinners, prompts and boxes only appear when stdout is an
+interactive terminal. When output goes to a pipe or a file, when `CI` is
+set, when `TERM=dumb`, and always with `--json`, rpc prints the same plain
+lines as 0.2 (`ok …`, `x …` plus `hint:`), so agents and scripts that read
+them see no change. `NO_COLOR` turns colour off; `FORCE_COLOR=1` adds colour
+to the plain lines. `rpc mcp` never prints anything but MCP messages.
+
+### When a capture fails
+
+Each device fails on its own, with an `error`, a `code` and usually a `hint`.
+In a terminal, devices that fail the same way share one hint:
+
+<img alt="rpc shot against a host that doesn't resolve: both devices fail with ERR_NAME_NOT_RESOLVED and one hint explains what to check" src="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/terminal-error.png" width="720">
+
+Plain output (pipes, agents, CI):
+
+```
+x iphone-15 (393x852 @3x): Could not resolve host example.dev (net::ERR_NAME_NOT_RESOLVED)
+   hint: Check the URL for typos. If the host works in a normal browser, this process may be
+   blocked by a sandbox or network allowlist (e.g. the Claude Code sandbox: add the domain to
+   the allowed hosts, or run outside the sandbox). ...
+```
+
+Covered: DNS failures, refused connections (on localhost: "nothing is
+listening on port N"), proxy, tunnel and offline errors, TLS errors (https
+against a plain-http dev server), missing files, redirect loops, navigation
+and `--wait-for` timeouts.
+
+## MCP server
+
+`rpc mcp` runs an MCP server on stdio with two tools.
+
+### `screenshot`
+
+| Param | Default | |
+| --- | --- | --- |
+| `url` | required | http(s), file, bare host or local path |
+| `devices` | `["iphone-15-pro", "desktop-1440"]` | ids or aliases |
+| `bezels` | false | framed copy of the first screen |
+| `fullPage` | false | whole page, stitched past 16,384 px |
+| `maxSlices` | 10 | full page: slices returned inline per device |
+| `saveSlices` | auto | full page: `true` always writes slice JPEGs, `false` never; by default they are written only when some were cut by `maxSlices` |
+| `sliceWidth` | 768 | full page: max slice width in px (raise it for small text on desktop) |
+| `maxHeight` | 60000 | full page: CSS px cap |
+| `reducedMotion` | false | emulate `prefers-reduced-motion: reduce` |
+| `waitFor`, `waitMs`, `colorScheme`, `outDir`, `timeoutMs` | | as in the CLI |
+| `inline` | true | return images, not just paths |
+
+The result starts with a plain-text block: one line per device (or the error
+and hint), followed by the JSON summary (file paths, pixel sizes,
+`scrollHeight`, `capturedHeight`, `segments`, `clipped`, `slices`, HTTP status,
+final URL, title, console errors, `error`/`code`/`hint`).
+
+Then the images:
+
+- Without `fullPage`: one JPEG preview per device (the framed shot when
+  `bezels`), at most 1024 px on the long side.
+- With `fullPage`: the framed first screen when `bezels`, labelled
+  `iphone-15 · first screen in bezel`, then the whole page as top-to-bottom
+  slices, each one viewport tall and labelled
+  `iphone-15 · slice 2/7 · y=852–1704 css px`. A three-device review of a
+  typical marketing page is roughly 0.5 MB of JPEG.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/mcp-slices-dark.png">
+  <img alt="The first five labelled full-page slices returned for an iPhone 15 capture" src="https://raw.githubusercontent.com/akintola4/rpc-agent/main/docs/media/mcp-slices-light.png">
+</picture>
+
+When a page has more slices than `maxSlices`, the text says which ones were
+skipped (`slices 11-26 (y=8520-21656 css px) skipped inline`), all slices are
+written to disk and the summary gives their paths and the full PNG, so the
+agent can Read the rest without slicing anything itself.
+
+### `list_devices`
+
+Takes an optional `category` (`apple-phone`, `android-phone`, `tablet`,
+`laptop`) and returns ids, sizes and aliases.
+
+Files go to `outDir`, which is resolved against the server's working
+directory. Claude Code and Cursor start the server in the project root.
+
+### Claude Code
+
+```sh
+claude mcp add --scope user rpc -- npx -y rpc-agent mcp
+```
+
+Drop `--scope user` to add it to the current project only. Run
+`npx rpc-agent install` once first so the server has a browser. If
+`rpc-agent` is installed globally, `claude mcp add --scope user rpc -- rpc
+mcp` skips the npx lookup on each start.
+
+From a clone, point it at the build instead (the path must be absolute,
+and Claude Code needs a restart or `/mcp` reconnect after rebuilding):
+
+```sh
+claude mcp add --scope user rpc -- node "$(pwd)/dist/cli.js" mcp
+```
+
+If you use the Claude Code sandbox, pages on hosts outside its network
+allowlist fail with `ERR_NAME_NOT_RESOLVED` or a proxy error; the hint says
+so. Add the domain to the allowlist.
+
+### Cursor
+
+`~/.cursor/mcp.json` (global) or `.cursor/mcp.json` (per project):
+
+```json
+{
+  "mcpServers": {
+    "rpc": {
+      "command": "npx",
+      "args": ["-y", "rpc-agent", "mcp"]
+    }
+  }
+}
+```
+
+From a clone, use `"command": "node"` and
+`"args": ["/absolute/path/to/rpc-agent/dist/cli.js", "mcp"]`.
+
+## Development
+
+```sh
+pnpm test        # vitest: unit tests plus e2e captures of local fixtures
+pnpm typecheck
+pnpm build
+pnpm smoke:mcp [url] [--full-page] [--devices a,b] [--max-slices n]
+pnpm media       # regenerate the README images and GIF (needs ffmpeg)
+```
+
+The e2e tests serve `test/fixtures` locally. `tall.html` is 21,656 CSS px
+(64,968 px at DPR 3): the test checks every row of the stitched PNG against
+the known layout across all seams, that the sticky header and a fixed badge
+appear once, that the IntersectionObserver section rendered, and the slice
+count and labels, including through the MCP server. The missing-browser tests
+point `PLAYWRIGHT_BROWSERS_PATH` at an empty temp dir.
+
+The README media are built from real captures by `scripts/media/build.ts`;
+`docs/media.md` explains how. The CLI's design notes, and what it borrows
+from the `skills` CLI, are in `docs/cli-design.md`.
+
+## Limitations
+
+- Chromium only, portrait only. There is no landscape mode, and none of RPC's
+  fake browser chrome bars.
+- Scroll-driven animations are captured in their scroll-top state. Entrance
+  animations that run once are usually fine after the warm-up scroll; ones
+  that reverse when scrolled back (GSAP `toggleActions` with reverse, scrubbed
+  timelines) may show their initial state. `reducedMotion` helps on sites that
+  respect it.
+- Very tall stitched PNGs are big files; review them through the slices.
+- The bezel geometry is RPC's, unchanged. On kind-default phones the page
+  covers the dynamic island or notch, and generic monitors are drawn edge to
+  edge with only the stand showing.
+- No auth, cookies, custom headers or scripted interaction before capture.
+- Every MCP call launches a fresh Chromium, which adds about a second.
+
+## License
+
+MIT. Bezel artwork and device data come from Responsive Point Check; see `NOTICE`.

package/assets/bezels/imac.svg

@@ -0,0 +1,63 @@
+<svg width="1442" height="1230" viewBox="0 0 1442 1230" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="553" y="1223" width="44" height="7" rx="1" fill="url(#paint0_linear_3_131)"/>
+<rect x="843" y="1223" width="44" height="7" rx="1" fill="url(#paint1_linear_3_131)"/>
+<rect width="346" height="223" transform="matrix(-1 0 0 1 893 993)" fill="url(#paint2_linear_3_131)"/>
+<rect width="1440" height="997" rx="24" transform="matrix(-1 0 0 1 1442 1)" fill="#505254"/>
+<rect width="1440" height="999" rx="24" transform="matrix(-1 0 0 1 1440 0)" fill="url(#paint3_linear_3_131)"/>
+<path d="M1440 851H0V975C0 988.255 10.7451 999 24 999H1416C1429.25 999 1440 988.255 1440 975V851Z" fill="url(#paint4_linear_3_131)"/>
+<circle cx="8" cy="8" r="8" transform="matrix(-1 0 0 1 752 9)" fill="#343747"/>
+<g filter="url(#filter0_i_3_131)">
+<circle cx="4" cy="4" r="4" transform="matrix(-1 0 0 1 748 13)" fill="url(#paint5_radial_3_131)"/>
+</g>
+<rect width="346" height="15" transform="matrix(-1 0 0 1 893 1212)" fill="url(#paint6_linear_3_131)"/>
+<defs>
+<filter id="filter0_i_3_131" x="740" y="12" width="8" height="9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0431373 0 0 0 0 0.0509804 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3_131"/>
+</filter>
+<linearGradient id="paint0_linear_3_131" x1="575" y1="1223" x2="575" y2="1230" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191A"/>
+<stop offset="1" stop-color="#636569"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3_131" x1="865" y1="1223" x2="865" y2="1230" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19191A"/>
+<stop offset="1" stop-color="#636569"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3_131" x1="173" y1="0" x2="173" y2="223" gradientUnits="userSpaceOnUse">
+<stop stop-color="#303236"/>
+<stop offset="0.873392" stop-color="#8C8F93"/>
+<stop offset="0.924622" stop-color="#BABABA"/>
+<stop offset="0.957999" stop-color="#999B9E"/>
+<stop offset="0.992152" stop-color="#4D4D4D"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3_131" x1="1399.5" y1="-0.000109302" x2="483" y2="862.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28282A"/>
+<stop offset="1" stop-color="#18191B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3_131" x1="720" y1="851" x2="720" y2="999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#535457"/>
+<stop offset="1" stop-color="#43464C"/>
+</linearGradient>
+<radialGradient id="paint5_radial_3_131" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(90) scale(4)">
+<stop stop-color="#55A0FF"/>
+<stop offset="0.513343" stop-color="#214D89"/>
+<stop offset="1" stop-color="#10182A"/>
+</radialGradient>
+<linearGradient id="paint6_linear_3_131" x1="346" y1="15.0001" x2="-1.64163e-05" y2="16.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#727476"/>
+<stop offset="0.0196622" stop-color="#B6B6B9"/>
+<stop offset="0.0393102" stop-color="#66696D"/>
+<stop offset="0.0913451" stop-color="#898A8F"/>
+<stop offset="0.948172" stop-color="#898A8F"/>
+<stop offset="0.977921" stop-color="#66696D"/>
+<stop offset="0.991869" stop-color="#B6B6B9"/>
+<stop offset="1" stop-color="#727476"/>
+</linearGradient>
+</defs>
+</svg>

package/assets/bezels/ipad.svg

@@ -0,0 +1,27 @@
+<svg width="633" height="908" viewBox="0 0 633 908" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_40_479)">
+<path d="M4 37C4 17.67 19.67 2 39 2H594C613.33 2 629 17.67 629 37V867C629 886.33 613.33 902 594 902H39C19.67 902 4 886.33 4 867V37Z" fill="#3A4245"/>
+</g>
+<path d="M8 38C8 20.3269 22.3269 6 40 6H593C610.673 6 625 20.3269 625 38V866C625 883.673 610.673 898 593 898H40C22.3269 898 8 883.673 8 866V38Z" fill="#121515"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M296 867.5C296 878.822 305.178 888 316.5 888C327.822 888 337 878.822 337 867.5C337 856.178 327.822 847 316.5 847C305.178 847 296 856.178 296 867.5ZM334.397 867.5C334.397 877.384 326.384 885.397 316.5 885.397C306.616 885.397 298.603 877.384 298.603 867.5C298.603 857.616 306.616 849.603 316.5 849.603C326.384 849.603 334.397 857.616 334.397 867.5Z" fill="#262C2D"/>
+<path d="M27 68C27 66.8954 27.8954 66 29 66H604C605.105 66 606 66.8954 606 68V835C606 836.105 605.105 837 604 837H29C27.8954 837 27 836.105 27 835V68Z" fill="#262C2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M316.5 40C318.985 40 321 37.9853 321 35.5C321 33.0147 318.985 31 316.5 31C314.015 31 312 33.0147 312 35.5C312 37.9853 314.015 40 316.5 40Z" fill="#262C2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M316.5 38.3125C318.053 38.3125 319.312 37.0533 319.312 35.5C319.312 33.9467 318.053 32.6875 316.5 32.6875C314.947 32.6875 313.688 33.9467 313.688 35.5C313.688 37.0533 314.947 38.3125 316.5 38.3125Z" fill="#121515"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M316.5 34.9375C316.811 34.9375 317.062 34.6857 317.062 34.375C317.062 34.0643 316.811 33.8125 316.5 33.8125C316.189 33.8125 315.938 34.0643 315.938 34.375C315.938 34.6857 316.189 34.9375 316.5 34.9375Z" fill="#636F73"/>
+<defs>
+<filter id="filter0_dd_40_479" x="0" y="0" width="633" height="908" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0823529 0 0 0 0 0.25098 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_40_479"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0823529 0 0 0 0 0.25098 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_40_479" result="effect2_dropShadow_40_479"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_40_479" result="shape"/>
+</filter>
+</defs>
+</svg>

package/assets/bezels/iphone-11-pro.svg

@@ -0,0 +1,35 @@
+<svg width="427" height="858" viewBox="0 0 427 858" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_4689)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M424 197H425C426.105 197 427 197.895 427 199V295C427 296.105 426.105 297 425 297H424V197Z" fill="#121515"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 257C0 255.895 0.895431 255 2 255H3V318H2C0.895431 318 0 317.105 0 316V257Z" fill="#121515"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 178C0 176.895 0.895431 176 2 176H3V239H2C0.895431 239 0 238.105 0 237V178Z" fill="#121515"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 117C0 115.895 0.895431 115 2 115H3V148H2C0.895431 148 0 147.105 0 146V117Z" fill="#121515"/>
+<g filter="url(#filter0_dd_4_4689)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 63C3 28.2061 31.2061 0 66 0H361C395.794 0 424 28.2061 424 63V795C424 829.794 395.794 858 361 858H66C31.2061 858 3 829.794 3 795V63Z" fill="#3A4245"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 63C8 30.9675 33.9675 5 66 5H361C393.033 5 419 30.9675 419 63V795C419 827.033 393.033 853 361 853H66C33.9675 853 8 827.033 8 795V63Z" fill="#121515"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259 40C263.418 40 267 36.4183 267 32C267 27.5817 263.418 24 259 24C254.582 24 251 27.5817 251 32C251 36.4183 254.582 40 259 40Z" fill="#262C2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259 37C261.761 37 264 34.7614 264 32C264 29.2386 261.761 27 259 27C256.239 27 254 29.2386 254 32C254 34.7614 256.239 37 259 37Z" fill="#121515"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M259 31C259.552 31 260 30.5523 260 30C260 29.4477 259.552 29 259 29C258.448 29 258 29.4477 258 30C258 30.5523 258.448 31 259 31Z" fill="#636F73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M188 32C188 30.3431 189.343 29 191 29H236C237.657 29 239 30.3431 239 32C239 33.6569 237.657 35 236 35H191C189.343 35 188 33.6569 188 32Z" fill="#262C2D"/>
+</g>
+<defs>
+<filter id="filter0_dd_4_4689" x="-1" y="-2" width="429" height="866" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0823529 0 0 0 0 0.25098 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_4689"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.0823529 0 0 0 0 0.25098 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_4_4689" result="effect2_dropShadow_4_4689"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4_4689" result="shape"/>
+</filter>
+<clipPath id="clip0_4_4689">
+<rect width="427" height="858" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/bezels/iphone-12-mini.svg

@@ -0,0 +1,26 @@
+<svg width="423" height="858" viewBox="0 0 423 858" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_382_904)">
+<path d="M420 230H421.5C422.328 230 423 230.672 423 231.5V341.5C423 342.328 422.328 343 421.5 343H420V230Z" fill="#446087"/>
+<path d="M2.99988 366L1.49987 366C0.671445 366 -0.000127257 365.328 -0.000127184 364.5L-0.000121414 298.5C-0.000121342 297.672 0.671452 297 1.49988 297L2.99988 297L2.99988 366Z" fill="#446087"/>
+<path d="M2.99988 275L1.49987 275C0.671445 275 -0.000127257 274.328 -0.000127184 273.5L-0.000121414 207.5C-0.000121342 206.672 0.671452 206 1.49988 206L2.99988 206L2.99988 275Z" fill="#446087"/>
+<path d="M2.99988 170L1.49988 170C0.671449 170 -0.000124396 169.328 -0.000124323 168.5L-0.000121613 137.5C-0.000121541 136.672 0.671451 136 1.49988 136L2.99988 136L2.99988 170Z" fill="#446087"/>
+<path d="M3 91C3 66.8033 3 54.705 6.18133 44.9139C12.611 25.1254 28.1254 9.61099 47.9139 3.18133C57.705 0 69.8033 0 94 0H329C353.197 0 365.295 0 375.086 3.18133C394.875 9.61099 410.389 25.1254 416.819 44.9139C420 54.705 420 66.8033 420 91V767C420 791.197 420 803.295 416.819 813.086C410.389 832.875 394.875 848.389 375.086 854.819C365.295 858 353.197 858 329 858H94C69.8033 858 57.705 858 47.9139 854.819C28.1254 848.389 12.611 832.875 6.18133 813.086C3 803.295 3 791.197 3 767V91Z" fill="#102948"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M329.4 3H93.6C69.6199 3 58.1042 3.02467 48.8409 6.0345C29.9658 12.1674 15.1674 26.9658 9.0345 45.8409C6.02467 55.1042 6 66.6199 6 90.6V767.4C6 791.38 6.02467 802.896 9.0345 812.159C15.1674 831.034 29.9658 845.833 48.8409 851.966C58.1042 854.975 69.6199 855 93.6 855H329.4C353.38 855 364.896 854.975 374.159 851.966C393.034 845.833 407.833 831.034 413.966 812.159C416.975 802.896 417 791.38 417 767.4V90.6C417 66.6199 416.975 55.1042 413.966 45.8409C407.833 26.9658 393.034 12.1674 374.159 6.0345C364.896 3.02467 353.38 3 329.4 3ZM7.13238 45.2229C4 54.8634 4 66.7756 4 90.6V767.4C4 791.224 4 803.137 7.13238 812.777C13.4631 832.261 28.7389 847.537 48.2229 853.868C57.8634 857 69.7756 857 93.6 857H329.4C353.224 857 365.137 857 374.777 853.868C394.261 847.537 409.537 832.261 415.868 812.777C419 803.137 419 791.224 419 767.4V90.6C419 66.7756 419 54.8634 415.868 45.2229C409.537 25.7389 394.261 10.4631 374.777 4.13238C365.137 1 353.224 1 329.4 1H93.6C69.7756 1 57.8634 1 48.2229 4.13238C28.7389 10.4631 13.4631 25.7389 7.13238 45.2229Z" fill="#446087"/>
+<path d="M8 89C8 66.6646 8 55.4969 10.9366 46.459C16.8717 28.1927 31.1927 13.8717 49.459 7.93661C58.4969 5 69.6646 5 92 5H331C353.335 5 364.503 5 373.541 7.93661C391.807 13.8717 406.128 28.1927 412.063 46.459C415 55.4969 415 66.6646 415 89V769C415 791.335 415 802.503 412.063 811.541C406.128 829.807 391.807 844.128 373.541 850.063C364.503 853 353.335 853 331 853H92C69.6646 853 58.4969 853 49.459 850.063C31.1927 844.128 16.8717 829.807 10.9366 811.541C8 802.503 8 791.335 8 769V89Z" fill="#121515"/>
+<path d="M329 0H338V5H329V0Z" fill="#48627E"/>
+<path d="M415 86H420V95H415V86Z" fill="#48627E"/>
+<path d="M3 86H8V95H3V86Z" fill="#48627E"/>
+<path d="M3 763H8V772H3V763Z" fill="#48627E"/>
+<path d="M415 763H420V772H415V763Z" fill="#48627E"/>
+<path d="M85 853H94V858H85V853Z" fill="#48627E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258 44C262.418 44 266 40.4183 266 36C266 31.5817 262.418 28 258 28C253.582 28 250 31.5817 250 36C250 40.4183 253.582 44 258 44Z" fill="#262C2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M258 41C260.761 41 263 38.7614 263 36C263 33.2386 260.761 31 258 31C255.239 31 253 33.2386 253 36C253 38.7614 255.239 41 258 41Z" fill="#121515"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M258 35C258.552 35 259 34.5523 259 34C259 33.4477 258.552 33 258 33C257.448 33 257 33.4477 257 34C257 34.5523 257.448 35 258 35Z" fill="#636F73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M185 36C185 34.3431 186.343 33 188 33H235C236.657 33 238 34.3431 238 36C238 37.6569 236.657 39 235 39H188C186.343 39 185 37.6569 185 36Z" fill="#262C2D"/>
+</g>
+<defs>
+<clipPath id="clip0_382_904">
+<rect width="423" height="858" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/bezels/iphone-12-pro-max.svg

@@ -0,0 +1,26 @@
+<svg width="423" height="858" viewBox="0 0 423 858" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_348_1)">
+<path d="M420 240H421.5C422.328 240 423 240.672 423 241.5V331.5C423 332.328 422.328 333 421.5 333H420V240Z" fill="#213744"/>
+<path d="M3 353L1.49999 353C0.671567 353 -5.1865e-06 352.328 -5.11407e-06 351.5L-2.18399e-07 295.5C-1.45976e-07 294.672 0.671573 294 1.5 294L3.00001 294L3 353Z" fill="#213744"/>
+<path d="M3 278L1.49999 278C0.671567 278 -5.1865e-06 277.328 -5.11407e-06 276.5L-2.18399e-07 220.5C-1.45976e-07 219.672 0.671573 219 1.5 219L3.00001 219L3 278Z" fill="#213744"/>
+<path d="M3 193L1.5 193C0.671571 193 -2.32548e-06 192.328 -2.25305e-06 191.5L-6.7482e-08 166.5C4.94129e-09 165.672 0.671573 165 1.5 165L3 165L3 193Z" fill="#213744"/>
+<path d="M3 91C3 66.8033 3 54.705 6.18133 44.9139C12.611 25.1254 28.1254 9.61099 47.9139 3.18133C57.705 0 69.8033 0 94 0H329C353.197 0 365.295 0 375.086 3.18133C394.875 9.61099 410.389 25.1254 416.819 44.9139C420 54.705 420 66.8033 420 91V767C420 791.197 420 803.295 416.819 813.086C410.389 832.875 394.875 848.389 375.086 854.819C365.295 858 353.197 858 329 858H94C69.8033 858 57.705 858 47.9139 854.819C28.1254 848.389 12.611 832.875 6.18133 813.086C3 803.295 3 791.197 3 767V91Z" fill="#213744"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M329.4 2H93.6C69.6978 2 57.9838 2.01234 48.5319 5.08344C29.3523 11.3153 14.3153 26.3523 8.08344 45.5319C5.01234 54.9838 5 66.6978 5 90.6V767.4C5 791.302 5.01234 803.016 8.08344 812.468C14.3153 831.648 29.3523 846.685 48.5319 852.917C57.9838 855.988 69.6978 856 93.6 856H329.4C353.302 856 365.016 855.988 374.468 852.917C393.648 846.685 408.685 831.648 414.917 812.468C417.988 803.016 418 791.302 418 767.4V90.6C418 66.6978 417.988 54.9838 414.917 45.5319C408.685 26.3523 393.648 11.3153 374.468 5.08344C365.016 2.01234 353.302 2 329.4 2ZM7.13238 45.2229C4 54.8634 4 66.7756 4 90.6V767.4C4 791.224 4 803.137 7.13238 812.777C13.4631 832.261 28.7389 847.537 48.2229 853.868C57.8634 857 69.7756 857 93.6 857H329.4C353.224 857 365.137 857 374.777 853.868C394.261 847.537 409.537 832.261 415.868 812.777C419 803.137 419 791.224 419 767.4V90.6C419 66.7756 419 54.8634 415.868 45.2229C409.537 25.7389 394.261 10.4631 374.777 4.13238C365.137 1 353.224 1 329.4 1H93.6C69.7756 1 57.8634 1 48.2229 4.13238C28.7389 10.4631 13.4631 25.7389 7.13238 45.2229Z" fill="#8EADC1"/>
+<path d="M8 89C8 66.6646 8 55.4969 10.9366 46.459C16.8717 28.1927 31.1927 13.8717 49.459 7.93661C58.4969 5 69.6646 5 92 5H331C353.335 5 364.503 5 373.541 7.93661C391.807 13.8717 406.128 28.1927 412.063 46.459C415 55.4969 415 66.6646 415 89V769C415 791.335 415 802.503 412.063 811.541C406.128 829.807 391.807 844.128 373.541 850.063C364.503 853 353.335 853 331 853H92C69.6646 853 58.4969 853 49.459 850.063C31.1927 844.128 16.8717 829.807 10.9366 811.541C8 802.503 8 791.335 8 769V89Z" fill="#121515"/>
+<path d="M331 0H337V5H331V0Z" fill="#36454C"/>
+<path d="M415 86H420V92H415V86Z" fill="#36454C"/>
+<path d="M3 86H8V92H3V86Z" fill="#36454C"/>
+<path d="M3 766H8V772H3V766Z" fill="#36454C"/>
+<path d="M415 766H420V772H415V766Z" fill="#36454C"/>
+<path d="M86 853H92V858H86V853Z" fill="#36454C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250 37C253.866 37 257 33.866 257 30C257 26.134 253.866 23 250 23C246.134 23 243 26.134 243 30C243 33.866 246.134 37 250 37Z" fill="#262C2D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250 34.375C252.416 34.375 254.375 32.4162 254.375 30C254.375 27.5838 252.416 25.625 250 25.625C247.584 25.625 245.625 27.5838 245.625 30C245.625 32.4162 247.584 34.375 250 34.375Z" fill="#121515"/>
+<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M250 29.125C250.483 29.125 250.875 28.7332 250.875 28.25C250.875 27.7668 250.483 27.375 250 27.375C249.517 27.375 249.125 27.7668 249.125 28.25C249.125 28.7332 249.517 29.125 250 29.125Z" fill="#636F73"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M190 30C190 28.3431 191.343 27 193 27H230C231.657 27 233 28.3431 233 30C233 31.6569 231.657 33 230 33H193C191.343 33 190 31.6569 190 30Z" fill="#262C2D"/>
+</g>
+<defs>
+<clipPath id="clip0_348_1">
+<rect width="423" height="858" fill="white"/>
+</clipPath>
+</defs>
+</svg>