BLD - merge dev into Inter font branch

2026-08-28 17:01:18 +00:00 · 2026-08-19 15:34:49 +02:00
parent 05169acbfe 7644dec3a3
commit c0492a70cb
49 changed files with 446 additions and 301 deletions
@@ -15,6 +15,11 @@
    "test": "vitest run && pnpm test:browser-mocks",
    "test:browser-mocks": "node testserver/smoke.cjs"
  },
+  "pnpm": {
+    "overrides": {
+      "nanoid@<3.3.18": "3.3.18"
+    }
+  },
  "dependencies": {
    "@tiptap/core": "^3.29.2",
    "@tiptap/extension-placeholder": "^3.29.2",
@@ -4,6 +4,9 @@ settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

+overrides:
+  nanoid@<3.3.18: 3.3.18
+
 importers:

  .:
@@ -1940,8 +1943,8 @@ packages:
  muggle-string@0.4.1:
    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}

-  nanoid@3.3.17:
-    resolution: {integrity: sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==}
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true

@@ -4351,7 +4354,7 @@ snapshots:

  muggle-string@0.4.1: {}

-  nanoid@3.3.17: {}
+  nanoid@3.3.18: {}

  natural-compare@1.4.0: {}

@@ -4449,7 +4452,7 @@ snapshots:

  postcss@8.5.25:
    dependencies:
-      nanoid: 3.3.17
+      nanoid: 3.3.18
      picocolors: 1.1.1
      source-map-js: 1.2.1

@@ -268,8 +268,13 @@ const PHONE_BASE_SCALE = 0.69 * 1.2
 const PHONE_PORTRAIT_WIDTH = 390
 const PHONE_PORTRAIT_HEIGHT = 844
 const MIN_PRODUCTION_PHONE_ZOOM = 260 / PHONE_PORTRAIT_WIDTH
-const isDevelopment = import.meta.env.DEV
 const developmentParameters = new URLSearchParams(window.location.search)
+const isBrowserPreview =
+  developmentParameters.has('browserPreview') &&
+  developmentParameters.get('apiBase')?.startsWith('/') === true
+const isDevelopment =
+  import.meta.env.DEV ||
+  developmentParameters.get('apiBase')?.startsWith('/') === true
 const developmentLockScreenPreview =
  isDevelopment && developmentParameters.has('lockScreenPreview')

@@ -433,6 +438,14 @@ let simPickerClosePending = false

 function getViewportScale(): number {
  const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT
+  if (isBrowserPreview) {
+    const availableScale = Math.min(
+      window.innerWidth / PHONE_PORTRAIT_WIDTH,
+      window.innerHeight / PHONE_PORTRAIT_HEIGHT,
+    )
+
+    return (availableScale * 0.94) / PHONE_BASE_SCALE
+  }
  if (isDevelopment) return heightScale

  return Math.min(window.innerWidth / REFERENCE_VIEWPORT_WIDTH, heightScale)
@@ -1583,6 +1596,7 @@ onBeforeUnmount(() => {
      "
      class="phone-stage"
      :class="{
+        'phone-stage--browser-preview': isBrowserPreview,
        'phone-stage--landscape': phone.cameraLandscape,
        'phone-stage--peek': notifications.isPeeking,
      }"
@@ -84,4 +84,16 @@ describe('browser development preview contract', () => {
    )
    expect(mainCss).not.toContain('.phone-stage--dev')
  })
+
+  it('fills the dedicated browser embed without clipping the hardware controls', () => {
+    expect(source).toContain("developmentParameters.has('browserPreview')")
+    expect(source).toContain("'phone-stage--browser-preview': isBrowserPreview")
+    expect(source).toContain('return (availableScale * 0.94) / PHONE_BASE_SCALE')
+    expect(mainCss).toMatch(
+      /\.phone-stage--browser-preview\s*\{[^}]*place-items:\s*center;[^}]*padding:\s*0;/s,
+    )
+    expect(mainCss).toMatch(
+      /\.phone-stage--browser-preview \.phone-device\s*\{[^}]*filter:\s*none;/s,
+    )
+  })
 })
@@ -1,12 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Billing">
-  <defs>
-    <linearGradient id="bg" x1="18" y1="14" x2="108" y2="116" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ff856f"/>
-      <stop offset="1" stop-color="#ff4f64"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="29" fill="url(#bg)"/>
-  <path d="M38 26h52v76l-7-5-7 5-7-5-7 5-7-5-7 5-10-7V26Z" fill="#fff"/>
-  <path d="M49 45h30M49 58h30M49 71h18" fill="none" stroke="#ff6370" stroke-linecap="round" stroke-width="7"/>
-  <circle cx="80" cy="75" r="8" fill="#ff6370"/>
-</svg>
@@ -1,26 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-label="Calendar">
-  <defs>
-    <linearGradient id="bg" x1="32" y1="20" x2="224" y2="236" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ff765f"/>
-      <stop offset="1" stop-color="#e93147"/>
-    </linearGradient>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="150%">
-      <feDropShadow dx="0" dy="10" stdDeviation="10" flood-color="#8c1021" flood-opacity=".32"/>
-    </filter>
-  </defs>
-  <rect width="256" height="256" rx="58" fill="url(#bg)"/>
-  <g filter="url(#shadow)">
-    <rect x="42" y="50" width="172" height="164" rx="28" fill="#fff"/>
-    <path d="M42 78c0-15.5 12.5-28 28-28h116c15.5 0 28 12.5 28 28v26H42V78Z" fill="#f8e9eb"/>
-    <rect x="77" y="36" width="14" height="42" rx="7" fill="#fff"/>
-    <rect x="165" y="36" width="14" height="42" rx="7" fill="#fff"/>
-    <g fill="#d5d8df">
-      <rect x="67" y="124" width="26" height="21" rx="7"/><rect x="104" y="124" width="26" height="21" rx="7"/><rect x="141" y="124" width="26" height="21" rx="7"/>
-      <rect x="67" y="157" width="26" height="21" rx="7"/><rect x="141" y="157" width="26" height="21" rx="7"/>
-    </g>
-    <rect x="101" y="153" width="32" height="29" rx="9" fill="#ff4259"/>
-    <path d="m109 167 7 7 11-14" fill="none" stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-  <circle cx="201" cy="198" r="27" fill="#272b36" stroke="#fff" stroke-width="6"/>
-  <path d="M201 183v16l10 7" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
@@ -1,29 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" role="img">
-  <defs>
-    <linearGradient id="companies-bg" x1="18" y1="12" x2="104" y2="110" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#38BDF8"/>
-      <stop offset="1" stop-color="#2563EB"/>
-    </linearGradient>
-    <linearGradient id="companies-glass" x1="42" y1="31" x2="86" y2="101" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FFFFFF" stop-opacity=".96"/>
-      <stop offset="1" stop-color="#DBEAFE" stop-opacity=".82"/>
-    </linearGradient>
-  </defs>
-  <rect width="120" height="120" rx="27" fill="url(#companies-bg)"/>
-  <path d="M26 96V45c0-5 4-9 9-9h26c5 0 9 4 9 9v51H26Z" fill="url(#companies-glass)"/>
-  <path d="M60 96V28c0-5 4-9 9-9h18c5 0 9 4 9 9v68H60Z" fill="#EFF6FF" fill-opacity=".9"/>
-  <g fill="#3B82F6" fill-opacity=".82">
-    <rect x="36" y="48" width="9" height="9" rx="2"/>
-    <rect x="51" y="48" width="9" height="9" rx="2"/>
-    <rect x="36" y="64" width="9" height="9" rx="2"/>
-    <rect x="51" y="64" width="9" height="9" rx="2"/>
-    <rect x="70" y="33" width="8" height="8" rx="2"/>
-    <rect x="83" y="33" width="8" height="8" rx="2"/>
-    <rect x="70" y="48" width="8" height="8" rx="2"/>
-    <rect x="83" y="48" width="8" height="8" rx="2"/>
-    <rect x="70" y="63" width="8" height="8" rx="2"/>
-    <rect x="83" y="63" width="8" height="8" rx="2"/>
-  </g>
-  <path d="M18 96h84" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round"/>
-  <circle cx="96" cy="25" r="10" fill="#22C55E" stroke="#FFFFFF" stroke-width="4"/>
-</svg>
@@ -1,21 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="CrewLink">
-  <defs>
-    <linearGradient id="crewlink-bg" x1="16" y1="12" x2="112" y2="118" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#24e2f2"/>
-      <stop offset="0.52" stop-color="#0a9bf5"/>
-      <stop offset="1" stop-color="#5746e8"/>
-    </linearGradient>
-    <filter id="crewlink-glow" x="-30%" y="-30%" width="160%" height="160%">
-      <feGaussianBlur stdDeviation="3.5" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <rect width="128" height="128" rx="29" fill="url(#crewlink-bg)"/>
-  <path d="M20 78c8-29 24-44 44-44s36 15 44 44" fill="none" stroke="#fff" stroke-opacity=".25" stroke-width="7" stroke-linecap="round"/>
-  <path d="M31 84c7-21 18-31 33-31s26 10 33 31" fill="none" stroke="#fff" stroke-opacity=".45" stroke-width="7" stroke-linecap="round"/>
-  <circle cx="64" cy="78" r="13" fill="#fff" filter="url(#crewlink-glow)"/>
-  <circle cx="34" cy="86" r="10" fill="#d8fbff"/>
-  <circle cx="94" cy="86" r="10" fill="#d8fbff"/>
-  <path d="M64 102c-11-11-18-20-18-31a18 18 0 1 1 36 0c0 11-7 20-18 31Z" fill="#fff" fill-opacity=".18" stroke="#fff" stroke-width="3"/>
-  <circle cx="64" cy="71" r="5" fill="#fff"/>
-</svg>
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Feather">
-  <defs>
-    <linearGradient id="sky" x1="18" y1="14" x2="108" y2="116" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#71C8FF"/>
-      <stop offset="0.48" stop-color="#438CF5"/>
-      <stop offset="1" stop-color="#2757D8"/>
-    </linearGradient>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="0" dy="5" stdDeviation="5" flood-color="#0B2F82" flood-opacity=".25"/>
-    </filter>
-  </defs>
-  <rect width="128" height="128" rx="30" fill="url(#sky)"/>
-  <path d="M96.7 28.3C79.9 28 59.4 38.6 48.2 55.8c-8.7 13.3-9.8 27.7-6 36.7l-10 10.2a5 5 0 0 0 7.1 7l10.1-10.3c9 3.2 21.3 1.3 31.7-6.4 14.8-11 22.9-31.9 20.8-59.9-.2-2.7-2.5-4.8-5.2-4.8Z" fill="#fff" filter="url(#shadow)"/>
-  <path d="M45.5 97.7c12.7-15.3 25.9-28.6 42.4-42.3M54.5 85.8l21.8-.7M66 72.6l1.4-20" fill="none" stroke="#347BE7" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-  <defs>
-    <linearGradient id="g" x1="18" y1="112" x2="108" y2="10" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ff2d78"/>
-      <stop offset="1" stop-color="#ff6847"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="29" fill="url(#g)"/>
-  <path fill="#fff" d="M67 18c3 19-13 25-13 41 0 8 5 13 10 16-1-13 8-19 17-29 1 15 19 22 19 41 0 17-15 29-36 29S28 103 28 84c0-20 13-31 26-43 6-6 10-13 13-23Z"/>
-  <path fill="#ff4e63" d="M66 105c-11 0-19-7-19-17 0-9 7-14 13-20 0 8 7 10 7 17 4-4 7-8 8-13 6 6 10 11 10 18 0 9-8 15-19 15Z"/>
-</svg>
@@ -1,17 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="House">
-  <defs>
-    <linearGradient id="house-bg" x1="18" y1="12" x2="108" y2="118" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ffb84d"/>
-      <stop offset="1" stop-color="#f06b35"/>
-    </linearGradient>
-    <filter id="house-shadow" x="-20%" y="-20%" width="140%" height="150%">
-      <feDropShadow dx="0" dy="5" stdDeviation="5" flood-color="#8f351c" flood-opacity=".28"/>
-    </filter>
-  </defs>
-  <rect width="128" height="128" rx="29" fill="url(#house-bg)"/>
-  <circle cx="101" cy="25" r="23" fill="#fff" opacity=".13"/>
-  <path d="M27 61.5 64 31l37 30.5v36a9 9 0 0 1-9 9H36a9 9 0 0 1-9-9z" fill="#fff" filter="url(#house-shadow)"/>
-  <path d="M19 64.5 64 27l45 37.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
-  <rect x="53" y="73" width="22" height="33.5" rx="5" fill="#f4823c"/>
-  <circle cx="69" cy="90" r="2.4" fill="#fff"/>
-</svg>
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Music">
-  <defs>
-    <linearGradient id="music-gradient" x1="16" y1="8" x2="112" y2="120" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ff5c78"/>
-      <stop offset=".52" stop-color="#fa2d63"/>
-      <stop offset="1" stop-color="#d5117b"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="28" fill="url(#music-gradient)"/>
-  <path fill="#fff" d="M91.5 24.5v57.3c0 11.8-8.8 20.7-20.4 20.7-9.3 0-16.7-5.7-16.7-13.6 0-8.2 7.8-14.5 17.9-14.5 4.1 0 7.4.9 9.8 2.2V45.4L50 52.1v38.1c0 11.8-8.8 20.7-20.4 20.7-9.3 0-16.7-5.7-16.7-13.6 0-8.2 7.8-14.5 17.9-14.5 4 0 7.4.9 9.8 2.2V36.8c0-3.2 2.2-5.9 5.3-6.5l38.2-8c3.8-.8 7.4 2.1 7.4 6.2Z"/>
-</svg>
@@ -1,52 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="sky" x1="256" y1="0" x2="256" y2="512" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#55c9ec"/>
-      <stop offset="0.58" stop-color="#7f91e4"/>
-      <stop offset="1" stop-color="#5b4da6"/>
-    </linearGradient>
-    <linearGradient id="tower" x1="330" y1="0" x2="488" y2="0" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#8276e4"/>
-      <stop offset="0.48" stop-color="#6559ca"/>
-      <stop offset="1" stop-color="#433a9c"/>
-    </linearGradient>
-    <linearGradient id="bird" x1="20" y1="24" x2="90" y2="52" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#5fc1d1"/>
-      <stop offset="0.58" stop-color="#287d99"/>
-      <stop offset="1" stop-color="#16546f"/>
-    </linearGradient>
-  </defs>
-
-  <rect width="512" height="512" fill="url(#sky)"/>
-  <circle cx="112" cy="105" r="46" fill="#ffe6a5" opacity=".78"/>
-  <path d="M-18 155c20-25 55-28 78-8 15-29 61-27 75 5 26-9 55 7 59 32H-18Z" fill="#fff" opacity=".3"/>
-  <path d="M2 405c25-29 66-30 88-4 19-16 50-9 58 17H2Z" fill="#fff" opacity=".2"/>
-
-  <g stroke="#312b78" stroke-width="9" stroke-linejoin="round">
-    <path d="M357-12h112v171H357Z" fill="url(#tower)"/>
-    <path d="M329 148h168v52H329Z" fill="url(#tower)"/>
-    <path d="M329 323h168v52H329Z" fill="url(#tower)"/>
-    <path d="M357 364h112v160H357Z" fill="url(#tower)"/>
-  </g>
-  <path d="M373 0v145M345 164h132M345 339h132M373 379v133" fill="none" stroke="#aaa2ff" stroke-width="10" stroke-linecap="round" opacity=".62"/>
-
-  <g fill="none" stroke="#e9fbff" stroke-linecap="round" opacity=".7">
-    <path d="M24 257h63" stroke-width="12"/>
-    <path d="M39 288h38" stroke-width="8"/>
-    <path d="M52 224h52" stroke-width="7"/>
-  </g>
-
-  <g transform="translate(70 202) scale(2.15)" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M50 38C39 29 30 15 34 5c10 4 22 16 29 31Z" fill="#2d7188" stroke="#123f57" stroke-width="2"/>
-    <path d="M29 36 5 25l12 15L3 49l29-4Z" fill="#285e78" stroke="#123f57" stroke-width="2"/>
-    <path d="M20 40c8-12 24-17 45-14 12 1 20 7 25 14-8 10-21 13-36 12-15-1-27-4-34-12Z" fill="url(#bird)" stroke="#123f57" stroke-width="2"/>
-    <path d="M24 43c13 4 31 5 45 1 7-2 12-5 16-9 2 2 4 4 5 6-8 10-21 13-36 12-13-1-24-4-30-10Z" fill="#b7e5df"/>
-    <path d="M67 27c7-8 18-9 24-2 4 4 4 10 1 16-8 1-16-3-23-9Z" fill="#377f98"/>
-    <path d="M52 38C42 31 35 18 40 6c10 5 20 16 27 29-1 8-7 17-19 25 2-8 3-15 4-22Z" fill="#77b6c2" stroke="#123f57" stroke-width="2"/>
-    <path d="M44 16c8 7 14 15 18 23M46 27c7 5 11 11 13 18M48 39c4 3 7 6 8 10" fill="none" stroke="#d4f0ed" stroke-width="1.5"/>
-    <path d="M76 26c5-5 12-4 16 1-4 1-7 4-9 8-4-1-7-4-7-9Z" fill="#d8f0e9"/>
-    <circle cx="86" cy="27" r="3.1" fill="#f5fbf7"/>
-    <circle cx="86.7" cy="27" r="1.45" fill="#102d3d"/>
-    <path d="m91 31 12 5-12 4c2-3 2-6 0-9Z" fill="#f2a84b" stroke="#6f4727" stroke-width="1.5"/>
-  </g>
-</svg>
@@ -1,34 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <defs>
-    <linearGradient id="skyride-bg" x1="62" y1="26" x2="446" y2="488" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FFE66A"/>
-      <stop offset="0.48" stop-color="#FFC62E"/>
-      <stop offset="1" stop-color="#FF9500"/>
-    </linearGradient>
-    <linearGradient id="skyride-car" x1="154" y1="192" x2="352" y2="388" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#FFFFFF"/>
-      <stop offset="1" stop-color="#ECEEF2"/>
-    </linearGradient>
-    <filter id="skyride-shadow" x="88" y="102" width="346" height="340" filterUnits="userSpaceOnUse">
-      <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#402400" flood-opacity="0.3"/>
-    </filter>
-  </defs>
-
-  <rect width="512" height="512" rx="112" fill="url(#skyride-bg)"/>
-  <path d="M63 128C146 88 218 112 251 169C285 226 362 224 452 163" fill="none" stroke="#171717" stroke-opacity="0.15" stroke-width="20" stroke-linecap="round" stroke-dasharray="2 40"/>
-  <path d="M75 405C145 347 191 354 242 389C292 424 357 435 441 389" fill="none" stroke="#171717" stroke-opacity="0.12" stroke-width="18" stroke-linecap="round" stroke-dasharray="2 38"/>
-
-  <g filter="url(#skyride-shadow)">
-    <path d="M370 104C329 104 296 137 296 178C296 236 370 293 370 293C370 293 444 236 444 178C444 137 411 104 370 104Z" fill="#171717"/>
-    <circle cx="370" cy="178" r="28" fill="#FFD137"/>
-
-    <path d="M183 199C190 181 207 169 226 169H286C305 169 322 181 329 199L350 251C371 260 385 281 385 305V371C385 384 375 394 362 394H342C329 394 319 384 319 371V360H193V371C193 384 183 394 170 394H150C137 394 127 384 127 371V305C127 281 141 260 162 251L183 199Z" fill="url(#skyride-car)"/>
-    <path d="M207 205C211 196 220 190 230 190H282C292 190 301 196 305 205L320 244H192L207 205Z" fill="#20232A"/>
-    <path d="M238 151H274C282 151 289 157 289 166V179H223V166C223 157 230 151 238 151Z" fill="#171717"/>
-    <rect x="235" y="158" width="42" height="13" rx="6.5" fill="#FFD137"/>
-    <path d="M155 279H357C364 279 370 285 370 292V335C370 342 364 348 357 348H155C148 348 142 342 142 335V292C142 285 148 279 155 279Z" fill="#FFFFFF"/>
-    <path d="M158 291L205 300L188 325H156C150 325 146 321 146 315V301C146 294 151 290 158 291Z" fill="#171717"/>
-    <path d="M354 291L307 300L324 325H356C362 325 366 321 366 315V301C366 294 361 290 354 291Z" fill="#171717"/>
-    <rect x="224" y="312" width="64" height="12" rx="6" fill="#171717"/>
-  </g>
-</svg>
@@ -1,19 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" role="img" aria-label="Weazel News">
-  <defs>
-    <linearGradient id="weazel-news-background" x1="18" y1="10" x2="112" y2="122" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717"/>
-      <stop offset="1" stop-color="#050505"/>
-    </linearGradient>
-    <linearGradient id="weazel-news-accent" x1="26" y1="24" x2="103" y2="105" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#ff4a50"/>
-      <stop offset="1" stop-color="#c9101c"/>
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="28" fill="url(#weazel-news-background)"/>
-  <path d="M28 31h72a8 8 0 0 1 8 8v58a8 8 0 0 1-8 8H28a8 8 0 0 1-8-8V39a8 8 0 0 1 8-8Z" fill="#f4f4f1"/>
-  <path d="M20 46h88v-7a8 8 0 0 0-8-8H28a8 8 0 0 0-8 8v7Z" fill="url(#weazel-news-accent)"/>
-  <path d="M31 58h34v26H31z" fill="#181818"/>
-  <path d="M72 59h25M72 68h25M72 77h20M31 92h66" fill="none" stroke="#747474" stroke-width="5" stroke-linecap="round"/>
-  <path d="m38 63 6 16 5-12 5 12 6-16" fill="none" stroke="#f4f4f1" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <circle cx="96" cy="38" r="3" fill="#fff"/>
-</svg>
@@ -252,6 +252,13 @@ button {
  padding: 0 var(--phone-edge-gap, 24px) var(--phone-edge-gap, 24px) 0;
  pointer-events: none;
 }
+.phone-stage--browser-preview {
+  place-items: center;
+  padding: 0;
+}
+.phone-stage--browser-preview .phone-device {
+  filter: none;
+}
 .phone-stage--peek .phone-resolution-wrapper--primary .phone-device {
  transform: translateY(calc(100% - 190px));
  transform-origin: right bottom;
@@ -45,7 +45,7 @@ import appStoreIcon from '@/assets/img/app-icons/apps.webp'
 import calculatorIcon from '@/assets/img/app-icons/calculator.webp'
 import cameraIcon from '@/assets/img/app-icons/camera.webp'
 import clockIcon from '@/assets/img/app-icons/clock.webp'
-import calendarIcon from '@/assets/img/app-icons/calendar.svg'
+import calendarIcon from '@/assets/img/app-icons/calendar.webp'
 import mailIcon from '@/assets/img/app-icons/mail.webp'
 import mapIcon from '@/assets/img/app-icons/map.webp'
 import messagesIcon from '@/assets/img/app-icons/sms.webp'
@@ -67,20 +67,20 @@ import weatherIcon from '@/assets/img/app-icons/weather.webp'
 import healthIcon from '@/assets/img/app-icons/health.webp'
 import bankingIcon from '@/assets/img/app-icons/banking.webp'
 import cryptoIcon from '@/assets/img/app-icons/crypto.webp'
-import billingIcon from '@/assets/img/app-icons/billing.svg'
+import billingIcon from '@/assets/img/app-icons/billing.webp'
 import garageIcon from '@/assets/img/app-icons/garage.webp'
-import houseIcon from '@/assets/img/app-icons/house.svg'
+import houseIcon from '@/assets/img/app-icons/house.webp'
 import citymarktIcon from '@/assets/img/app-icons/citymarkt.webp'
 import localPagesIcon from '@/assets/img/app-icons/local-pages.webp'
-import flareIcon from '@/assets/img/app-icons/flare.svg'
+import flareIcon from '@/assets/img/app-icons/flare.webp'
 import flipTokIcon from '@/assets/img/app-icons/fliptok.webp'
 import picstagramIcon from '@/assets/img/app-icons/picstagram.webp'
-import skyRideIcon from '@/assets/img/app-icons/skyride.svg'
-import musicIcon from '@/assets/img/app-icons/music.svg'
-import featherIcon from '@/assets/img/app-icons/feather.svg'
-import crewLinkIcon from '@/assets/img/app-icons/crewlink.svg'
-import companiesIcon from '@/assets/img/app-icons/companies.svg'
-import weazelNewsIcon from '@/assets/img/app-icons/weazel-news.svg'
+import skyRideIcon from '@/assets/img/app-icons/skyride.webp'
+import musicIcon from '@/assets/img/app-icons/music.webp'
+import featherIcon from '@/assets/img/app-icons/feather.webp'
+import crewLinkIcon from '@/assets/img/app-icons/crewlink.webp'
+import companiesIcon from '@/assets/img/app-icons/companies.webp'
+import weazelNewsIcon from '@/assets/img/app-icons/weazel-news.webp'
 import cityWarnIcon from '@/assets/img/app-icons/citywarn.webp'
 import type {
  BuiltinPhoneAppDefinition,
@@ -11,18 +11,21 @@ export async function nuiCall<T = unknown>(
  endpoint: string,
  data: Record<string, unknown> = {},
 ): Promise<NuiResponse<T>> {
-  const developmentPort = new URLSearchParams(window.location.search).get(
-    'apiPort',
-  )
-  const baseUrl = import.meta.env.DEV
-    ? `http://localhost:${developmentPort ?? '3002'}/api`
-    : `https://${resourceName}`
-  const requestData = import.meta.env.DEV
+  const developmentParameters = new URLSearchParams(window.location.search)
+  const developmentPort = developmentParameters.get('apiPort')
+  const configuredApiBase = developmentParameters.get('apiBase')
+  const browserApiBase = configuredApiBase?.startsWith('/')
+    ? configuredApiBase.replace(/\/$/, '')
+    : null
+  const baseUrl = browserApiBase
+    ?? (import.meta.env.DEV
+      ? `http://localhost:${developmentPort ?? '3002'}/api`
+      : `https://${resourceName}`)
+  const requestData = browserApiBase || import.meta.env.DEV
    ? {
        ...data,
        _testScenario:
-          new URLSearchParams(window.location.search).get('testScenario') ??
-          undefined,
+          developmentParameters.get('testScenario') ?? undefined,
      }
    : data
  const controller = new AbortController()
@@ -25,7 +25,7 @@ import {
  WalletCards,
 } from 'lucide-vue-next'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import cryptoHeaderLogo from '@/assets/img/app-icons/crypto-header-logo.png'
+import cryptoHeaderLogo from '@/assets/img/app-icons/crypto-header-logo.webp'
 import CryptoLogo from '@/components/crypto/CryptoLogo.vue'
 import { useAccountStore } from '@/stores/account'
 import { useCryptoStore } from '@/stores/crypto'
@@ -2906,6 +2906,50 @@ let calendarEvents = [
    title: 'Beach cruise',
  },
 ]
+const demoInstalledAppIds = [
+  'citywarn',
+  'crypto',
+  'health',
+  'weazel-news',
+  'companies',
+  'music',
+  'picstagram',
+  'feather',
+  'fliptok',
+  'flare',
+  'calendar',
+  'radio',
+  'local-pages',
+  'crewlink',
+  'phone',
+  'messages',
+  'darkchat',
+  'garage',
+  'house',
+  'map',
+  'skyride',
+  'banking',
+  'billing',
+  'mail',
+  'notes',
+  'memos',
+  'calculator',
+  'camera',
+  'clock',
+  'weather',
+  'photos',
+  'app-store',
+  'settings',
+  'snake',
+  'memory',
+  'number-merge',
+  'minesweeper',
+  'tower-stack',
+  'sky-flappy',
+  'citymarkt',
+  'neon-drop',
+]
+const demoWallpaperUrl = '/img/wallpapers/sky-phone-demo-gradient.png'
 const deviceData = {
  appAuth: {
    payload: {
@@ -2949,7 +2993,7 @@ const deviceData = {
  },
  apps: {
    payload: {
-      claimedApps: [],
+      claimedApps: [...demoInstalledAppIds],
    },
    revision: 2,
  },
@@ -3042,6 +3086,8 @@ const deviceData = {
        airplaneMode: false,
        appearanceMode: 'automatic',
        frame: 'black',
+        lockWallpaper: 'custom',
+        lockWallpaperImageUrl: demoWallpaperUrl,
        notificationDurationSeconds: 10,
        notificationSound: 'chime',
        notificationVolume: 70,
@@ -3049,7 +3095,11 @@ const deviceData = {
        ringtone: 'skyline',
        ringtoneVolume: 80,
        streamerMode: false,
-        wallpaper: 'midnight',
+        wallpaper: 'custom',
+        wallpaperHistory: [
+          { imageUrl: demoWallpaperUrl, wallpaper: 'custom' },
+        ],
+        wallpaperImageUrl: demoWallpaperUrl,
      },
      version: 1,
    },
@@ -9716,7 +9766,33 @@ app.post('/api/:endpoint', (request, response) => {
              },
            },
          }
-        : deviceData
+        : testScenario === ''
+          ? {
+              ...deviceData,
+              apps: {
+                ...deviceData.apps,
+                payload: {
+                  claimedApps: [...demoInstalledAppIds],
+                },
+              },
+              settings: {
+                ...deviceData.settings,
+                payload: {
+                  ...deviceData.settings.payload,
+                  settings: {
+                    ...deviceData.settings.payload.settings,
+                    lockWallpaper: 'custom',
+                    lockWallpaperImageUrl: demoWallpaperUrl,
+                    wallpaper: 'custom',
+                    wallpaperHistory: [
+                      { imageUrl: demoWallpaperUrl, wallpaper: 'custom' },
+                    ],
+                    wallpaperImageUrl: demoWallpaperUrl,
+                  },
+                },
+              },
+            }
+          : deviceData
    response.json({
      success: true,
      data: {
@@ -109,6 +109,31 @@ function verifyBrowserTestData(dataByEndpoint) {
    'camera captures',
    2,
  )
+  expectItems(
+    development.device.data.apps.payload.claimedApps,
+    'installed demo apps',
+    41,
+  )
+  assert.equal(
+    new Set(development.device.data.apps.payload.claimedApps).size,
+    41,
+    'browser demo apps were not uniquely installed',
+  )
+  assert.equal(
+    development.device.data.settings.payload.settings.wallpaper,
+    'custom',
+    'browser demo home wallpaper was not configured',
+  )
+  assert.equal(
+    development.device.data.settings.payload.settings.lockWallpaper,
+    'custom',
+    'browser demo Lock Screen wallpaper was not configured',
+  )
+  assert.match(
+    development.device.data.settings.payload.settings.wallpaperImageUrl,
+    /sky-phone-demo-gradient\.png$/,
+    'browser demo wallpaper image was not configured',
+  )
  expectItems(development.memos, 'memos', 3)
  expectItems(development.notes, 'notes', 4)
  assert(