@humanforest/nuxt-layer 0.1.0

package/packages/frames/src/art/pixel-9-pro-xl.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="771" height="1628" version="1.1" viewBox="0 0 771 1628" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g transform="translate(0 207.28)">
+  <g>
+   <rect x="761" y="215.72" width="10" height="120" rx="5" ry="5" fill="#343434"/>
+   <rect x="761" y="405.72" width="10" height="220" rx="4.3333" ry="5" fill="#343434"/>
+   <rect x="6.25" y="-201.03" width="753.5" height="1615.5" rx="115" ry="115" fill="#333" stroke="#525252" stroke-linecap="round" stroke-linejoin="round" stroke-width="12.5"/>
+  </g>
+  <g fill="none" stroke="#000" stroke-opacity=".2" stroke-width="12.5">
+   <path d="m6.25 25.717v15"/>
+   <path d="m375.5-201.03h15"/>
+   <path d="m759.75 25.717v15"/>
+   <path d="m6.25 1250.6v15"/>
+   <path d="m759.75 1250.6v15"/>
+   <path d="m462.5 1414.5h15"/>
+  </g>
+  <rect x="31.25" y="-181.03" width="705" height="1568" rx="90" ry="90" fill="#ddd"/>
+  <circle cx="383" cy="-128.53" r="24" fill="#333"/>
+  <circle cx="383" cy="-128.53" r="15" fill="#ddf" fill-opacity=".13333"/>
+  <circle cx="383" cy="-128.53" r="15" fill="#08f" fill-opacity=".13333"/>
+ </g>
+</svg>

package/packages/frames/src/art/pixel-9-pro.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="725" height="1528" version="1.1" viewBox="0 0 725 1528" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g transform="translate(0 107.28)">
+  <g fill="#969a98">
+   <rect x="715" y="308.22" width="10" height="120" rx="5" ry="5" opacity=".301"/>
+   <rect x="715" y="498.22" width="10" height="220" rx="4.3333" ry="5" opacity=".301"/>
+   <rect x="715" y="308.22" width="10" height="120" rx="5" ry="5"/>
+   <rect x="715" y="498.22" width="10" height="220" rx="4.3333" ry="5"/>
+  </g>
+  <rect x="6.25" y="-101.03" width="707.5" height="1515.5" rx="115" ry="115" fill="#333" stroke="#a4b4ac" stroke-linecap="round" stroke-linejoin="round" stroke-width="12.5"/>
+  <g fill="none" stroke="#000" stroke-opacity=".2" stroke-width="12.5">
+   <path d="m713.75 130.72v15"/>
+   <path d="m6.25 130.72v15"/>
+   <path d="m437.5 1414.5h15"/>
+   <path d="m352.5-101.03h15"/>
+   <path d="m713.75 1253.2v15"/>
+   <path d="m6.25 1253.2v15"/>
+  </g>
+  <rect x="33.75" y="-73.533" width="652.5" height="1460.5" rx="90" ry="90" fill="#ddd"/>
+  <circle cx="360" cy="-20.533" r="24" fill="#333"/>
+  <circle cx="360" cy="-20.533" r="15" fill="#ddf" fill-opacity=".13333"/>
+  <circle cx="360" cy="-20.533" r="15" fill="#08f" fill-opacity=".13333"/>
+ </g>
+</svg>

package/packages/frames/src/art/pixel-9a.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 800 1687" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="1687px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g><path style="opacity:1" fill="#fd9ca8" d="M 127.5,-0.5 C 196.167,-0.5 264.833,-0.5 333.5,-0.5C 333.5,4.16667 333.5,8.83333 333.5,13.5C 261.166,13.3333 188.833,13.5 116.5,14C 55.5922,26.5748 21.4255,63.7415 14,125.5C 13.5,170.832 13.3333,216.165 13.5,261.5C 8.83333,261.5 4.16667,261.5 -0.5,261.5C -0.5,212.833 -0.5,164.167 -0.5,115.5C 8.51828,63.8189 37.1849,27.8189 85.5,7.5C 99.5389,3.96909 113.539,1.30243 127.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#ca6374" d="M 333.5,-0.5 C 339.5,-0.5 345.5,-0.5 351.5,-0.5C 351.5,4.16667 351.5,8.83333 351.5,13.5C 345.5,13.5 339.5,13.5 333.5,13.5C 333.5,8.83333 333.5,4.16667 333.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#fe9ca8" d="M 351.5,-0.5 C 381.167,-0.5 410.833,-0.5 440.5,-0.5C 440.5,4.16667 440.5,8.83333 440.5,13.5C 410.833,13.5 381.167,13.5 351.5,13.5C 351.5,8.83333 351.5,4.16667 351.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#ca6474" d="M 440.5,-0.5 C 446.5,-0.5 452.5,-0.5 458.5,-0.5C 458.5,4.16667 458.5,8.83333 458.5,13.5C 452.5,13.5 446.5,13.5 440.5,13.5C 440.5,8.83333 440.5,4.16667 440.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#fd9ca8" d="M 458.5,-0.5 C 532.833,-0.5 607.167,-0.5 681.5,-0.5C 727.094,8.56526 760.594,33.8986 782,75.5C 788.651,89.7881 792.651,104.788 794,120.5C 794.5,167.499 794.667,214.499 794.5,261.5C 789.833,261.5 785.167,261.5 780.5,261.5C 780.832,214.33 780.499,167.33 779.5,120.5C 771.352,66.5177 741.019,32.0177 688.5,17C 681.898,15.5664 675.232,14.5664 668.5,14C 598.501,13.5 528.501,13.3333 458.5,13.5C 458.5,8.83333 458.5,4.16667 458.5,-0.5 Z"/></g>
+<g><path style="opacity:0.99" fill="#d48e97" d="M 111.5,-0.5 C 116.833,-0.5 122.167,-0.5 127.5,-0.5C 113.539,1.30243 99.5389,3.96909 85.5,7.5C 85.8807,6.06888 86.8807,5.23555 88.5,5C 96.2487,2.95516 103.915,1.12183 111.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#343434" d="M 333.5,13.5 C 339.5,13.5 345.5,13.5 351.5,13.5C 381.167,13.5 410.833,13.5 440.5,13.5C 446.5,13.5 452.5,13.5 458.5,13.5C 528.501,13.3333 598.501,13.5 668.5,14C 675.232,14.5664 681.898,15.5664 688.5,17C 741.019,32.0177 771.352,66.5177 779.5,120.5C 779.5,580.5 779.5,1040.5 779.5,1500.5C 779.5,1521.83 779.5,1543.17 779.5,1564.5C 770.723,1620.11 739.056,1654.94 684.5,1669C 679.201,1669.93 673.867,1670.6 668.5,1671C 612.168,1671.5 555.834,1671.67 499.5,1671.5C 493.5,1671.5 487.5,1671.5 481.5,1671.5C 362.5,1671.67 243.5,1671.5 124.5,1671C 63.6174,1663.45 27.1174,1629.62 15,1569.5C 13.6594,1552.2 13.1594,1534.86 13.5,1517.5C 13.5,1511.83 13.5,1506.17 13.5,1500.5C 13.5,1093.17 13.5,685.833 13.5,278.5C 13.5,272.833 13.5,267.167 13.5,261.5C 13.3333,216.165 13.5,170.832 14,125.5C 21.4255,63.7415 55.5922,26.5748 116.5,14C 188.833,13.5 261.166,13.3333 333.5,13.5 Z"/></g>
+<g><path style="opacity:1" fill="#dcdcdc" d="M 126.5,46.5 C 305.5,46.3333 484.5,46.5 663.5,47C 707.705,54.2042 735.871,79.3709 748,122.5C 748.93,127.799 749.597,133.133 750,138.5C 750.667,607.167 750.667,1075.83 750,1544.5C 746.203,1583.62 726.703,1611.78 691.5,1629C 682.783,1632.43 673.783,1634.76 664.5,1636C 485.5,1636.67 306.5,1636.67 127.5,1636C 88.6405,1630.15 61.8071,1608.98 47,1572.5C 44.7019,1565.31 43.0352,1557.97 42,1550.5C 41.3333,1077.83 41.3333,605.167 42,132.5C 47.9019,95.5124 67.7353,69.0124 101.5,53C 109.878,50.4758 118.211,48.3091 126.5,46.5 Z"/></g>
+<g><path style="opacity:1" fill="#353535" d="M 390.5,75.5 C 406.443,74.3853 416.943,81.3853 422,96.5C 422.463,119.37 411.297,129.87 388.5,128C 370.641,119.786 365.474,106.619 373,88.5C 377.603,82.3812 383.437,78.0478 390.5,75.5 Z"/></g>
+<g><path style="opacity:1" fill="#2c3d4d" d="M 391.5,85.5 C 401.823,84.4078 408.656,88.7411 412,98.5C 412.486,113.345 405.32,119.845 390.5,118C 379.683,112.216 376.85,103.716 382,92.5C 384.79,89.535 387.957,87.2016 391.5,85.5 Z"/></g>
+<g><path style="opacity:1" fill="#c96273" d="M -0.5,261.5 C 4.16667,261.5 8.83333,261.5 13.5,261.5C 13.5,267.167 13.5,272.833 13.5,278.5C 8.83333,278.5 4.16667,278.5 -0.5,278.5C -0.5,272.833 -0.5,267.167 -0.5,261.5 Z"/></g>
+<g><path style="opacity:1" fill="#cc7280" d="M 779.5,120.5 C 780.499,167.33 780.832,214.33 780.5,261.5C 785.167,261.5 789.833,261.5 794.5,261.5C 794.5,267.167 794.5,272.833 794.5,278.5C 794.167,278.5 793.833,278.5 793.5,278.5C 789.167,278.5 784.833,278.5 780.5,278.5C 780.5,685.833 780.5,1093.17 780.5,1500.5C 780.167,1500.5 779.833,1500.5 779.5,1500.5C 779.5,1040.5 779.5,580.5 779.5,120.5 Z"/></g>
+<g><path style="opacity:1" fill="#fd9ba7" d="M -0.5,278.5 C 4.16667,278.5 8.83333,278.5 13.5,278.5C 13.5,685.833 13.5,1093.17 13.5,1500.5C 8.83333,1500.5 4.16667,1500.5 -0.5,1500.5C -0.5,1093.17 -0.5,685.833 -0.5,278.5 Z"/></g>
+<g><path style="opacity:1" fill="#fe9da8" d="M 793.5,278.5 C 793.5,685.833 793.5,1093.17 793.5,1500.5C 789.167,1500.5 784.833,1500.5 780.5,1500.5C 780.5,1093.17 780.5,685.833 780.5,278.5C 784.833,278.5 789.167,278.5 793.5,278.5 Z"/></g>
+<g><path style="opacity:1" fill="#fb97a5" d="M 793.5,278.5 C 793.833,278.5 794.167,278.5 794.5,278.5C 794.5,338.167 794.5,397.833 794.5,457.5C 796.514,457.392 798.18,458.058 799.5,459.5C 799.5,502.5 799.5,545.5 799.5,588.5C 798.18,589.942 796.514,590.608 794.5,590.5C 794.5,616.167 794.5,641.833 794.5,667.5C 796.292,667.366 797.958,667.699 799.5,668.5C 799.5,669.5 799.5,670.5 799.5,671.5C 798.626,669.31 796.959,668.31 794.5,668.5C 794.5,748.833 794.5,829.167 794.5,909.5C 795.833,909.5 797.167,909.5 798.5,909.5C 797.432,910.434 796.099,910.768 794.5,910.5C 794.5,1107.17 794.5,1303.83 794.5,1500.5C 794.167,1500.5 793.833,1500.5 793.5,1500.5C 793.5,1093.17 793.5,685.833 793.5,278.5 Z"/></g>
+<g><path style="opacity:1" fill="#fe9ca8" d="M 799.5,671.5 C 799.5,750.833 799.5,830.167 799.5,909.5C 799.167,909.5 798.833,909.5 798.5,909.5C 797.167,909.5 795.833,909.5 794.5,909.5C 794.5,829.167 794.5,748.833 794.5,668.5C 796.959,668.31 798.626,669.31 799.5,671.5 Z"/></g>
+<g><path style="opacity:1" fill="#c96273" d="M -0.5,1500.5 C 4.16667,1500.5 8.83333,1500.5 13.5,1500.5C 13.5,1506.17 13.5,1511.83 13.5,1517.5C 8.83333,1517.5 4.16667,1517.5 -0.5,1517.5C -0.5,1511.83 -0.5,1506.17 -0.5,1500.5 Z"/></g>
+<g><path style="opacity:1" fill="#c96676" d="M 779.5,1500.5 C 779.833,1500.5 780.167,1500.5 780.5,1500.5C 784.833,1500.5 789.167,1500.5 793.5,1500.5C 793.833,1500.5 794.167,1500.5 794.5,1500.5C 794.5,1506.17 794.5,1511.83 794.5,1517.5C 789.833,1517.5 785.167,1517.5 780.5,1517.5C 780.83,1533.34 780.496,1549.01 779.5,1564.5C 779.5,1543.17 779.5,1521.83 779.5,1500.5 Z"/></g>
+<g><path style="opacity:1" fill="#fd9ba7" d="M -0.5,1517.5 C 4.16667,1517.5 8.83333,1517.5 13.5,1517.5C 13.1594,1534.86 13.6594,1552.2 15,1569.5C 27.1174,1629.62 63.6174,1663.45 124.5,1671C 243.5,1671.5 362.5,1671.67 481.5,1671.5C 481.5,1676.5 481.5,1681.5 481.5,1686.5C 363.833,1686.5 246.167,1686.5 128.5,1686.5C 66.1785,1681.02 24.6785,1648.69 4,1589.5C 2.37825,1582.72 0.878249,1576.06 -0.5,1569.5C -0.5,1552.17 -0.5,1534.83 -0.5,1517.5 Z"/></g>
+<g><path style="opacity:1" fill="#fd9ba7" d="M 794.5,1517.5 C 794.667,1533.17 794.5,1548.84 794,1564.5C 786.458,1621.7 755.625,1660.2 701.5,1680C 689.57,1683.38 677.57,1685.54 665.5,1686.5C 610.167,1686.5 554.833,1686.5 499.5,1686.5C 499.5,1681.5 499.5,1676.5 499.5,1671.5C 555.834,1671.67 612.168,1671.5 668.5,1671C 673.867,1670.6 679.201,1669.93 684.5,1669C 739.056,1654.94 770.723,1620.11 779.5,1564.5C 780.496,1549.01 780.83,1533.34 780.5,1517.5C 785.167,1517.5 789.833,1517.5 794.5,1517.5 Z"/></g>
+<g><path style="opacity:1" fill="#c86273" d="M 481.5,1671.5 C 487.5,1671.5 493.5,1671.5 499.5,1671.5C 499.5,1676.5 499.5,1681.5 499.5,1686.5C 493.5,1686.5 487.5,1686.5 481.5,1686.5C 481.5,1681.5 481.5,1676.5 481.5,1671.5 Z"/></g>
+</svg>

package/packages/frames/src/art.ts

@@ -0,0 +1,29 @@
+// Device art lives INSIDE the package, not on a consumer's public path.
+//
+// The registry used to name each render as `/devices/<id>.svg`, an absolute URL that only resolved
+// because the docs app happened to serve `public/devices/`. A package cannot make that promise: the
+// moment a second app consumed the frame it would render a broken `<img>` until someone copied 784KB
+// of SVG into the right directory. So the art ships here and the bundler resolves it — `?url` emits
+// each file as an asset and hands back its hashed, base-aware URL, which works under any base path,
+// any dev server, and any deploy.
+//
+// Eager, not lazy: the glob is 25 URL strings (not the SVG bodies), so resolving them up front costs
+// nothing and keeps `artUrl` synchronous — a computed in the frame's template cannot await.
+import { DEVICES, type DeviceModel } from './devices';
+
+const ART = import.meta.glob<string>('./art/*.svg', {
+  eager: true,
+  query: '?url',
+  import: 'default',
+});
+
+/** Bundled URL for a device's hardware render. */
+export function artUrl(device: DeviceModel): string {
+  return ART[`./art/${device.art.file}`] ?? '';
+}
+
+/**
+ * Attribution for the bundled renders — CC BY-SA 4.0 REQUIRES this to be displayed wherever the art
+ * is. Deduped and sorted, so a page can print the whole list without knowing which devices it drew.
+ */
+export const ART_CREDITS: string[] = [...new Set(DEVICES.map((d) => d.art.credit))].sort();

package/packages/frames/src/devices.ts

@@ -0,0 +1,337 @@
+// Device-shell registry — every entry is PHOTOREAL: an unmodified Wikimedia Commons vector render is
+// the hardware, the live screen is sized to the model's TRUE logical points (CSS px, Apple/GSMArena
+// spec — verified, NOT screensizechecker) and clipped to the SVG's own screen aperture.
+//
+// Per device:
+//  • screen   — logical points (what a browser viewport reports). The shell sizes the live screen to this.
+//  • art.file — the SVG's own name inside `./art/`, used AS-IS → attribution only (art.credit).
+//               A bare filename, NOT a URL: the art is bundled with this package and resolved by
+//               `artUrl()` (see art.ts), so a consumer needs nothing served at a public path.
+//  • art.inset— screen-area insets as % of the SVG viewBox (measured in-browser via getBoundingClientRect).
+//  • art.clip — the screen outline normalised 0..1 over its own bbox, applied as an objectBoundingBox
+//               clip-path so corners match the SVG exactly (Apple squircle). Absent → use radiusPct
+//               (Pixel screens are plain rounded rects; the SE LCD has square corners).
+//
+// Frames discovered + specced by a parallel research workflow; sizes cross-checked on ios-resolution /
+// useyourloaf / GSMArena. Devices with no Commons SVG (iPads, most Samsung/OnePlus/Nothing, Zebra
+// rugged) were skipped — they have no vector render on Commons.
+
+export type Cutout = 'island' | 'notch' | 'punch-hole' | 'home' | 'none';
+
+export interface DeviceModel {
+  id: string;
+  brand: string;
+  name: string;
+  /** Logical points (CSS px) — the true-to-spec screen size. */
+  screen: { w: number; h: number };
+  scaleFactor: number;
+  diagonalIn: number;
+  cutout: Cutout;
+  /** Simulated safe-area insets (pt) — status-bar / home-indicator clearance. */
+  safe: { top: number; bottom: number };
+  art: {
+    /** Filename inside `./art/` — resolve to a URL with `artUrl()`, never render it directly. */
+    file: string;
+    /** SVG height ÷ width (viewBox aspect). */
+    aspect: number;
+    /** Screen-area insets as % of the SVG viewBox. */
+    inset: { top: number; right: number; bottom: number; left: number };
+    /** Screen outline normalised 0..1 over its bbox (objectBoundingBox clip). */
+    clip?: string;
+    /** Fallback screen corner radius as % of screen width (when no clip). */
+    radiusPct?: number;
+    /** Attribution — MUST be displayed (CC BY-SA 4.0). */
+    credit: string;
+  };
+}
+
+const GOLDENBOX = 'Rafael Fernandez · CC BY-SA 4.0';
+const MLIU = 'Mliu92 · CC BY-SA 4.0';
+const DM115 = 'DM115Wiki · CC BY-SA 4.0';
+
+// Canonical Apple squircle (extracted from the iPhone 17 Pro Max screen path) — reused for iPhone
+// models whose SVG rounds the screen via a clipPath rather than an addressable path.
+const APPLE_SQUIRCLE =
+  'M 0.14184 0 C 0.06268 0 0 0.02898 0 0.06559 L 0 0.93441 C 0 0.97102 0.06268 1 0.14184 1 L 0.85816 1 C 0.93732 1 1 0.97102 1 0.93441 L 1 0.06559 C 1 0.02898 0.93732 0 0.85816 0 Z';
+
+export const DEVICES: DeviceModel[] = [
+  {
+    id: 'iphone-se-3',
+    brand: 'Apple',
+    name: 'iPhone SE (3rd gen)',
+    screen: { w: 375, h: 667 },
+    scaleFactor: 2,
+    diagonalIn: 4.7,
+    cutout: 'home',
+    safe: { top: 20, bottom: 0 },
+    art: {
+      file: 'iphone-se-3.svg',
+      aspect: 2.00101,
+      inset: { top: 11.434, right: 6.411, bottom: 11.429, left: 6.482 },
+      radiusPct: 0, // SE LCD has square screen corners
+      credit: `Hajoon0102 · CC BY-SA 4.0`,
+    },
+  },
+  {
+    id: 'iphone-11',
+    brand: 'Apple',
+    name: 'iPhone 11',
+    screen: { w: 414, h: 896 },
+    scaleFactor: 2,
+    diagonalIn: 6.1,
+    cutout: 'notch',
+    safe: { top: 48, bottom: 34 },
+    art: {
+      file: 'iphone-11.svg',
+      aspect: 2.00556,
+      inset: { top: 3.075, right: 6.5853, bottom: 3.1107, left: 6.5853 },
+      // the SVG's own screen path (arcs converted to béziers) — smooth corners + notch
+      clip: 'M 0.1026 0.0 C 0.04576 0.0 0.0 0.02112 0.0 0.04735 L 0.0 0.95265 C 0.0 0.97888 0.04576 1.0 0.1026 1.0 L 0.8974 1.0 C 0.95424 1.0 1.0 0.97888 1.0 0.95265 L 1.0 0.04735 C 1.0 0.02112 0.95424 0.0 0.8974 0.0 L 0.79703 0.0 C 0.78757 0.0 0.77989 0.00354 0.77989 0.00791 L 0.77989 0.01155 C 0.77989 0.0258 0.75503 0.03728 0.72415 0.03728 L 0.27585 0.03728 C 0.24497 0.03728 0.22011 0.0258 0.22011 0.01155 L 0.22011 0.00791 C 0.22011 0.00354 0.21243 0.0 0.20297 0.0 Z',
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'iphone-14',
+    brand: 'Apple',
+    name: 'iPhone 14',
+    screen: { w: 390, h: 844 },
+    scaleFactor: 3,
+    diagonalIn: 6.1,
+    cutout: 'notch',
+    safe: { top: 47, bottom: 34 },
+    art: {
+      file: 'iphone-14.svg',
+      aspect: 2.01102,
+      inset: { top: 2.3242, right: 5.7243, bottom: 2.3242, left: 5.7243 },
+      // the SVG's own screen path (béziers, notch included) — smooth corners, no hand-rolled overlay
+      clip: 'M 0.1185 0.0 C 0.05306 0 0.0 0.0245 0.0 0.05472 L 0.0 0.94528 C 0 0.9755 0.05305 1.0 0.1185 1.0 L 0.5 1.0 L 0.8815 1.0 C 0.94695 1.0 1.0 0.9755 1.0 0.94528 L 1.0 0.05472 C 1.0 0.0245 0.94694 0 0.8815 0.0 L 0.72939 0.0 C 0.71554 0.0 0.70838 0.00066 0.70838 0.01081 C 0.70838 0.02095 0.69476 0.03804 0.64605 0.03804 L 0.61135 0.03804 L 0.38864 0.03804 L 0.35395 0.03804 C 0.30524 0.03804 0.29162 0.02095 0.29162 0.01081 C 0.29162 0.00066 0.28446 0.0 0.27061 0.0 Z',
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'iphone-15',
+    brand: 'Apple',
+    name: 'iPhone 15',
+    screen: { w: 393, h: 852 },
+    scaleFactor: 3,
+    diagonalIn: 6.1,
+    cutout: 'island',
+    safe: { top: 59, bottom: 34 },
+    art: {
+      file: 'iphone-15.svg',
+      aspect: 2.02778,
+      inset: { top: 2.245, right: 5.29, bottom: 2.245, left: 5.29 },
+      clip: APPLE_SQUIRCLE,
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'iphone-16-pro',
+    brand: 'Apple',
+    name: 'iPhone 16 Pro',
+    screen: { w: 402, h: 874 },
+    scaleFactor: 3,
+    diagonalIn: 6.3,
+    cutout: 'island',
+    safe: { top: 59, bottom: 34 },
+    art: {
+      file: 'iphone-16-pro.svg',
+      aspect: 2.05056,
+      inset: { top: 1.62, right: 4.373, bottom: 1.62, left: 4.373 },
+      clip: APPLE_SQUIRCLE,
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'iphone-air',
+    brand: 'Apple',
+    name: 'iPhone Air',
+    screen: { w: 420, h: 912 },
+    scaleFactor: 3,
+    diagonalIn: 6.5,
+    cutout: 'island',
+    safe: { top: 59, bottom: 34 },
+    art: {
+      file: 'iphone-air.svg',
+      aspect: 2.06077,
+      inset: { top: 1.763, right: 4.42, bottom: 1.763, left: 4.42 },
+      clip: APPLE_SQUIRCLE,
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'iphone-17-pro-max',
+    brand: 'Apple',
+    name: 'iPhone 17 Pro Max',
+    screen: { w: 440, h: 956 },
+    scaleFactor: 3,
+    diagonalIn: 6.9,
+    cutout: 'island',
+    safe: { top: 62, bottom: 34 },
+    art: {
+      file: 'iphone-17-pro-max.svg',
+      aspect: 2.06439,
+      inset: { top: 1.508, right: 3.711, bottom: 1.508, left: 3.71 },
+      clip: APPLE_SQUIRCLE,
+      credit: GOLDENBOX,
+    },
+  },
+  {
+    id: 'pixel-8',
+    brand: 'Google',
+    name: 'Pixel 8',
+    screen: { w: 412, h: 915 },
+    scaleFactor: 2.625,
+    diagonalIn: 6.2,
+    cutout: 'punch-hole',
+    safe: { top: 28, bottom: 24 },
+    art: {
+      // cropped from the dual "Pixel 8 and 8 Pro front" SVG (left phone) via viewBox
+      file: 'pixel-8.svg',
+      aspect: 2.12739,
+      inset: { top: 2.1926, right: 4.9207, bottom: 2.3207, left: 4.373 },
+      clip: 'M 0.9028 0.0 L 0.0972 0.0 C 0.04352 0.0 0.0 0.01943 0.0 0.0434 L 0.0 0.9566 C 0.0 0.98057 0.04352 1.0 0.0972 1.0 L 0.9028 1.0 C 0.95648 1.0 1.0 0.98057 1.0 0.9566 L 1.0 0.0434 C 1.0 0.01943 0.95648 0.0 0.9028 0.0 Z',
+      credit: MLIU,
+    },
+  },
+  {
+    id: 'pixel-8-pro',
+    brand: 'Google',
+    name: 'Pixel 8 Pro',
+    screen: { w: 448, h: 998 },
+    scaleFactor: 3,
+    diagonalIn: 6.7,
+    cutout: 'punch-hole',
+    safe: { top: 28, bottom: 24 },
+    art: {
+      // cropped from the dual "Pixel 8 and 8 Pro front" SVG (right phone) via viewBox
+      file: 'pixel-8-pro.svg',
+      aspect: 2.11437,
+      inset: { top: 1.8568, right: 4.6413, bottom: 1.7515, left: 4.3672 },
+      clip: 'M 0.08243 0.0 L 0.91757 0.0 C 0.96309 0.0 1.0 0.01648 1.0 0.0368 L 1.0 0.9632 C 1.0 0.98352 0.96309 1.0 0.91757 1.0 L 0.08243 1.0 C 0.03691 1.0 0.0 0.98352 0.0 0.9632 L 0.0 0.0368 C 0.0 0.01648 0.03691 0.0 0.08243 0.0 Z',
+      credit: MLIU,
+    },
+  },
+  {
+    id: 'pixel-9-pro',
+    brand: 'Google',
+    name: 'Pixel 9 Pro',
+    screen: { w: 427, h: 952 },
+    scaleFactor: 3,
+    diagonalIn: 6.3,
+    cutout: 'punch-hole',
+    safe: { top: 28, bottom: 24 },
+    art: {
+      file: 'pixel-9-pro.svg',
+      aspect: 2.10759,
+      inset: { top: 2.209, right: 5.345, bottom: 2.209, left: 4.655 },
+      radiusPct: 13.793,
+      credit: MLIU,
+    },
+  },
+
+  // ── added: more iPhones ──
+  {
+    id: 'iphone-x', brand: 'Apple', name: 'iPhone X',
+    screen: { w: 375, h: 812 }, scaleFactor: 3, diagonalIn: 5.8, cutout: 'notch', safe: { top: 44, bottom: 34 },
+    art: { file: 'iphone-x.svg', aspect: 2.00556, inset: { top: 3.075, right: 6.5853, bottom: 3.1107, left: 6.5853 },
+      clip: 'M 0.1026 0.0 C 0.04576 0.0 0.0 0.02112 0.0 0.04735 L 0.0 0.95265 C 0.0 0.97888 0.04576 1.0 0.1026 1.0 L 0.8974 1.0 C 0.95424 1.0 1.0 0.97888 1.0 0.95265 L 1.0 0.04735 C 1.0 0.02112 0.95424 0.0 0.8974 0.0 L 0.79703 0.0 C 0.78757 0.0 0.77989 0.00354 0.77989 0.00791 L 0.77989 0.01155 C 0.77989 0.0258 0.75503 0.03728 0.72415 0.03728 L 0.27585 0.03728 C 0.24497 0.03728 0.22011 0.0258 0.22011 0.01155 L 0.22011 0.00791 C 0.22011 0.00354 0.21243 0.0 0.20297 0.0 L 0.1026 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-12', brand: 'Apple', name: 'iPhone 12',
+    screen: { w: 390, h: 844 }, scaleFactor: 3, diagonalIn: 6.1, cutout: 'notch', safe: { top: 47, bottom: 34 },
+    art: { file: 'iphone-12.svg', aspect: 2.01102, inset: { top: 2.3241, right: 5.7243, bottom: 2.3241, left: 5.7243 },
+      clip: 'M 0.1185 0.0 C 0.05306 0 0.0 0.0245 0.0 0.05472 L 0.0 0.94528 C 0 0.9755 0.05305 1.0 0.1185 1.0 L 0.8815 1.0 C 0.94695 1.0 1.0 0.9755 1.0 0.94528 L 1.0 0.05472 C 1.0 0.0245 0.94694 0 0.8815 0.0 L 0.79107 0.0 C 0.77722 0.0 0.77006 0.00066 0.77006 0.01081 C 0.77006 0.02095 0.75645 0.03804 0.70774 0.03804 L 0.29226 0.03804 C 0.24355 0.03804 0.22994 0.02095 0.22994 0.01081 C 0.22994 0.00066 0.22278 0.0 0.20893 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-13', brand: 'Apple', name: 'iPhone 13',
+    screen: { w: 390, h: 844 }, scaleFactor: 3, diagonalIn: 6.1, cutout: 'notch', safe: { top: 47, bottom: 34 },
+    art: { file: 'iphone-13.svg', aspect: 2.01102, inset: { top: 2.3242, right: 5.7243, bottom: 2.3242, left: 5.7243 },
+      clip: 'M 0.1185 0.0 C 0.05306 0 0.0 0.0245 0.0 0.05472 L 0.0 0.94528 C 0 0.9755 0.05305 1.0 0.1185 1.0 L 0.5 1.0 L 0.8815 1.0 C 0.94695 1.0 1.0 0.9755 1.0 0.94528 L 1.0 0.05472 C 1.0 0.0245 0.94694 0 0.8815 0.0 L 0.72939 0.0 C 0.71554 0.0 0.70838 0.00066 0.70838 0.01081 C 0.70838 0.02095 0.69476 0.03804 0.64605 0.03804 L 0.61135 0.03804 L 0.38864 0.03804 L 0.35395 0.03804 C 0.30524 0.03804 0.29162 0.02095 0.29162 0.01081 C 0.29162 0.00066 0.28446 0.0 0.27061 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-13-pro', brand: 'Apple', name: 'iPhone 13 Pro',
+    screen: { w: 390, h: 844 }, scaleFactor: 3, diagonalIn: 6.1, cutout: 'notch', safe: { top: 47, bottom: 34 },
+    art: { file: 'iphone-13-pro.svg', aspect: 2.02216, inset: { top: 2.3242, right: 5.4666, bottom: 2.3242, left: 5.4915 },
+      clip: 'M 0.1185 0.0 C 0.05306 0 0.0 0.0245 0.0 0.05472 L 0.0 0.94528 C 0 0.9755 0.05305 1.0 0.1185 1.0 L 0.5 1.0 L 0.8815 1.0 C 0.94695 1.0 1.0 0.9755 1.0 0.94528 L 1.0 0.05472 C 1.0 0.0245 0.94694 0 0.8815 0.0 L 0.72953 0.0 C 0.71568 0.0 0.70852 0.00066 0.70852 0.01081 C 0.70852 0.02095 0.69491 0.03804 0.6462 0.03804 L 0.3538 0.03804 C 0.30509 0.03804 0.29148 0.02095 0.29148 0.01081 C 0.29148 0.00066 0.28432 0.0 0.27047 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-15-pro', brand: 'Apple', name: 'iPhone 15 Pro',
+    screen: { w: 393, h: 852 }, scaleFactor: 3, diagonalIn: 6.1, cutout: 'island', safe: { top: 59, bottom: 34 },
+    art: { file: 'iphone-15-pro.svg', aspect: 2.05056, inset: { top: 1.97, right: 4.373, bottom: 1.97, left: 4.373 },
+      clip: APPLE_SQUIRCLE, credit: GOLDENBOX } },
+  {
+    id: 'iphone-16', brand: 'Apple', name: 'iPhone 16',
+    screen: { w: 393, h: 852 }, scaleFactor: 3, diagonalIn: 6.1, cutout: 'island', safe: { top: 59, bottom: 34 },
+    art: { file: 'iphone-16.svg', aspect: 2.02778, inset: { top: 2.245, right: 5.29, bottom: 2.245, left: 5.29 },
+      clip: APPLE_SQUIRCLE, credit: GOLDENBOX } },
+  {
+    id: 'iphone-16-plus', brand: 'Apple', name: 'iPhone 16 Plus',
+    screen: { w: 430, h: 932 }, scaleFactor: 3, diagonalIn: 6.7, cutout: 'island', safe: { top: 59, bottom: 34 },
+    art: { file: 'iphone-16-plus.svg', aspect: 2.04103, inset: { top: 2.0185, right: 4.7627, bottom: 2.0185, left: 4.7627 },
+      clip: 'M 0.13026 0.0 L 0.86974 0.0 C 0.9419 0.0 1.0 0.02684 1.0 0.06017 L 1.0 0.93983 C 1.0 0.97316 0.9419 1.0 0.86974 1.0 L 0.13026 1.0 C 0.0581 1.0 0.0 0.97316 0.0 0.93983 L 0.0 0.06017 C 0.0 0.02684 0.0581 0.0 0.13026 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-16-pro-max', brand: 'Apple', name: 'iPhone 16 Pro Max',
+    screen: { w: 440, h: 956 }, scaleFactor: 3, diagonalIn: 6.9, cutout: 'island', safe: { top: 62, bottom: 34 },
+    art: { file: 'iphone-16-pro-max.svg', aspect: 2.05641, inset: { top: 1.6257, right: 3.8819, bottom: 1.6257, left: 3.8819 },
+      clip: 'M 0.13021 0.0 L 0.86979 0.0 C 0.94192 0.0 1.0 0.02692 1.0 0.06037 L 1.0 0.93963 C 1.0 0.97308 0.94192 1.0 0.86979 1.0 L 0.13021 1.0 C 0.05808 1.0 0.0 0.97308 0.0 0.93963 L 0.0 0.06037 C 0.0 0.02692 0.05808 0.0 0.13021 0.0 Z',
+      credit: GOLDENBOX } },
+  {
+    id: 'iphone-17', brand: 'Apple', name: 'iPhone 17',
+    screen: { w: 402, h: 874 }, scaleFactor: 3, diagonalIn: 6.3, cutout: 'island', safe: { top: 59, bottom: 34 },
+    art: { file: 'iphone-17.svg', aspect: 2.06897, inset: { top: 1.6433, right: 4.0166, bottom: 1.6433, left: 4.0172 },
+      clip: 'M 0.15599 0.0 C 0.06893 0.0 0.0 0.03168 0.0 0.07169 L 0.0 0.92831 C 0.0 0.96832 0.06893 1.0 0.15599 1.0 L 0.84401 1.0 C 0.93107 1.0 1.0 0.96832 1.0 0.92831 L 1.0 0.07169 C 1.0 0.03168 0.93107 0.0 0.84401 0.0 Z',
+      credit: GOLDENBOX } },
+
+  // ── added: more Pixels (a-series, 9 Pro XL, 10 family) ──
+  {
+    id: 'pixel-8a', brand: 'Google', name: 'Pixel 8a',
+    screen: { w: 412, h: 916 }, scaleFactor: 2.625, diagonalIn: 6.1, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-8a.svg', aspect: 2.12625, inset: { top: 2.0245, right: 5.6875, bottom: 3.6154, left: 4.8125 },
+      clip: 'M 0.07961 4e-05 C 0.3594 -6e-05 0.6392 4e-05 0.91899 0.00035 C 0.9663 0.00526 0.99307 0.01844 0.9993 0.03991 C 1.00023 0.34665 1.00023 0.65339 0.9993 0.96012 C 0.99307 0.98159 0.9663 0.99478 0.91899 0.99969 C 0.63966 1.0001 0.36034 1.0001 0.08101 0.99969 C 0.03748 0.99522 0.01071 0.98328 0.0007 0.96386 C -0.00023 0.65464 -0.00023 0.3454 0.0007 0.03617 C 0.01082 0.01702 0.03712 0.00497 0.07961 4e-05 Z',
+      credit: DM115 } },
+  {
+    id: 'pixel-9a', brand: 'Google', name: 'Pixel 9a',
+    screen: { w: 412, h: 923 }, scaleFactor: 2.625, diagonalIn: 6.3, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-9a.svg', aspect: 2.10875, inset: { top: 2.7527, right: 6.1875, bottom: 2.9933, left: 5.1875 },
+      clip: 'M 0.11989 4e-05 C 0.37236 -7e-05 0.62482 4e-05 0.87729 0.00035 C 0.93964 0.00488 0.97937 0.02071 0.99647 0.04784 C 0.99779 0.05117 0.99873 0.05452 0.99929 0.0579 C 1.00024 0.35265 1.00024 0.64739 0.99929 0.94214 C 0.99394 0.96674 0.96644 0.98445 0.91678 0.99528 C 0.90449 0.99744 0.8918 0.9989 0.8787 0.99968 C 0.62623 1.00011 0.37377 1.00011 0.1213 0.99968 C 0.06649 0.996 0.02864 0.98269 0.00776 0.95975 C 0.00452 0.95523 0.00217 0.95061 0.00071 0.94591 C -0.00024 0.64865 -0.00024 0.35139 0.00071 0.05413 C 0.00903 0.03086 0.037 0.0142 0.08463 0.00413 C 0.09644 0.00254 0.1082 0.00118 0.11989 4e-05 Z',
+      credit: DM115 } },
+  {
+    id: 'pixel-9-pro-xl', brand: 'Google', name: 'Pixel 9 Pro XL',
+    screen: { w: 384, h: 854 }, scaleFactor: 3.5, diagonalIn: 6.8, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-9-pro-xl.svg', aspect: 2.11154, inset: { top: 1.612, right: 4.507, bottom: 2.073, left: 4.053 },
+      radiusPct: 12.77, credit: MLIU } },
+  {
+    id: 'pixel-10', brand: 'Google', name: 'Pixel 10',
+    screen: { w: 411, h: 923 }, scaleFactor: 2.625, diagonalIn: 6.3, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-10.svg', aspect: 2.10927, inset: { top: 2.033, right: 4.795, bottom: 1.902, left: 4.611 },
+      radiusPct: 14.12, credit: MLIU } },
+  {
+    id: 'pixel-10-pro', brand: 'Google', name: 'Pixel 10 Pro',
+    screen: { w: 427, h: 952 }, scaleFactor: 3, diagonalIn: 6.3, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-10-pro.svg', aspect: 2.10927, inset: { top: 1.967, right: 5.083, bottom: 1.967, left: 4.323 },
+      radiusPct: 14.12, credit: MLIU } },
+  {
+    id: 'pixel-10-pro-xl', brand: 'Google', name: 'Pixel 10 Pro XL',
+    screen: { w: 448, h: 997 }, scaleFactor: 3, diagonalIn: 6.8, cutout: 'punch-hole', safe: { top: 28, bottom: 24 },
+    art: { file: 'pixel-10-pro-xl.svg', aspect: 2.10691, inset: { top: 1.733, right: 4.238, bottom: 1.702, left: 3.586 },
+      radiusPct: 14.5, credit: MLIU } },
+];
+
+export const DEFAULT_DEVICE = 'iphone-17-pro-max';
+
+/**
+ * ⚠ THE FALLBACK IS THE NAMED DEFAULT, NOT THE LAST ROW. It was `DEVICES[DEVICES.length - 1]`, which
+ * made "unknown id" mean "whatever happens to sit at the end of the array" — a Pixel, after the
+ * Pixels were appended. Measured in the deck: three frames asked for `iphone-17-pro` (no such id —
+ * the Pro Max is the one that exists) and rendered three Pixel 10 Pro XLs, punch-hole and all, with
+ * nothing anywhere saying so. Jose caught it as "why do the devices have no notch?".
+ *
+ * It still falls back rather than throwing, because a frame with no phone is worse than a frame with
+ * the wrong one — but a caller that cares (scripts/deckSpecimen.ts does) compares the id it asked for
+ * against the one it got.
+ */
+export function findDevice(id: string): DeviceModel {
+  return DEVICES.find((d) => d.id === id) ?? DEVICES.find((d) => d.id === DEFAULT_DEVICE) ?? DEVICES[0];
+}

package/packages/frames/src/index.ts

@@ -0,0 +1,15 @@
+// Presentation frames — the hardware a prototype is staged inside, not part of the brand surface.
+//
+// Nothing here renders in a shipped product: a rider app runs on a real phone and a console runs in a
+// real browser, so neither ever draws a bezel or a traffic light. These exist so a specimen can be
+// shown at TRUE scale — a 402pt screen laid out at 402pt, a console laid out at its real desktop
+// width — which is the only way a reflow decision can be judged before it ships.
+//
+// They are still F-prefixed and still a package rather than app-local files: docs and the playground
+// both stage prototypes, and the two copies that predated this package had already drifted apart.
+export { default as FDeviceFrame } from './FDeviceFrame.vue';
+export { default as FBrowserFrame } from './FBrowserFrame.vue';
+export { default as FFitFrame } from './FFitFrame.vue';
+
+export { DEVICES, DEFAULT_DEVICE, findDevice, type DeviceModel, type Cutout } from './devices';
+export { artUrl, ART_CREDITS } from './art';