@ledgerhq/device-mockserver-react 0.0.0-develop-20261102000856 → 0.0.0-develop-20261105000842

package/lib/cjs/src/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/index.ts"],
-  "sourcesContent": ["export { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nexport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nexport {\n  MockServerDevice,\n  type MockServerDeviceProps,\n} from \"./MockServerDevice\";\nexport { mockServerScreenApi } from \"./mockServerScreenApi\";\nexport type { DeviceScreenState, MockServerClient, ScreenApi } from \"./types\";\nexport { useMockServerDevice } from \"./useMockServerDevice\";\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wOAAAE,EAAAF,GAAA,IAAAG,EAA8D,0BAC9DC,EAAqD,0BACrDC,EAGO,8BACPC,EAAoC,iCAEpCC,EAAoC",
-  "names": ["src_exports", "__export", "__toCommonJS", "import_deviceModels", "import_DeviceScreen", "import_MockServerDevice", "import_mockServerScreenApi", "import_useMockServerDevice"]
+  "sourcesContent": ["export { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nexport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nexport {\n  MockServerDevice,\n  type MockServerDeviceProps,\n} from \"./MockServerDevice\";\nexport {\n  type DeviceScreenState,\n  type MockServerClient,\n  mockServerScreenApi,\n  type ScreenApi,\n  useMockServerDevice,\n} from \"@ledgerhq/device-mockserver-react-core\";\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wOAAAE,EAAAF,GAAA,IAAAG,EAA8D,0BAC9DC,EAAqD,0BACrDC,EAGO,8BACPC,EAMO",
+  "names": ["src_exports", "__export", "__toCommonJS", "import_deviceModels", "import_DeviceScreen", "import_MockServerDevice", "import_device_mockserver_react_core"]
 }

package/lib/cjs/src/webScreenPlatform.js

@@ -0,0 +1,2 @@
+"use strict";var c=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var i=(e,r)=>{for(var t in r)c(e,t,{get:r[t],enumerable:!0})},l=(e,r,t,m)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of n(r))!d.call(e,o)&&o!==t&&c(e,o,{get:()=>r[o],enumerable:!(m=a(r,o))||m.enumerable});return e};var s=e=>l(c({},"__esModule",{value:!0}),e);var f={};i(f,{webScreenPlatform:()=>S});module.exports=s(f);const S={toImageSource:e=>Promise.resolve(URL.createObjectURL(e)),releaseImageSource:e=>URL.revokeObjectURL(e),isHidden:()=>document.hidden};0&&(module.exports={webScreenPlatform});
+//# sourceMappingURL=webScreenPlatform.js.map

package/lib/cjs/src/webScreenPlatform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/webScreenPlatform.ts"],
+  "sourcesContent": ["import { type ScreenPlatform } from \"@ledgerhq/device-mockserver-react-core\";\n\nexport const webScreenPlatform: ScreenPlatform = {\n  toImageSource: (screenshot) =>\n    Promise.resolve(URL.createObjectURL(screenshot)),\n  releaseImageSource: (source) => URL.revokeObjectURL(source),\n  isHidden: () => document.hidden,\n};\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAEO,MAAME,EAAoC,CAC/C,cAAgBE,GACd,QAAQ,QAAQ,IAAI,gBAAgBA,CAAU,CAAC,EACjD,mBAAqBC,GAAW,IAAI,gBAAgBA,CAAM,EAC1D,SAAU,IAAM,SAAS,MAC3B",
+  "names": ["webScreenPlatform_exports", "__export", "webScreenPlatform", "__toCommonJS", "screenshot", "source"]
+}

package/lib/esm/package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "@ledgerhq/device-mockserver-client": "workspace:*"
+    "@ledgerhq/device-mockserver-client": "workspace:*",
+    "@ledgerhq/device-mockserver-react-core": "workspace:*"
   },
   "devDependencies": {
     "@ledgerhq/device-management-kit": "workspace:*",
@@ -63,5 +64,5 @@
     "watch:types": "concurrently \"tsc --watch -p tsconfig.prod.json\" \"tsc-alias --watch -p tsconfig.prod.json\""
   },
   "types": "lib/index.d.ts",
-  "version": "0.0.0-develop-20261102000856"
+  "version": "0.0.0-develop-20261105000842"
 }

package/lib/esm/src/DeviceOsInfo.js

@@ -1,2 +1,2 @@
-import e,{useEffect as w,useRef as v,useState as u}from"react";import{ScreenFrame as x}from"./ScreenFrame";const h="BOLOS",y=1e4,k="[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",q=n=>`https://cdn.live.ledger.com/icons/${n.toLowerCase().replaceAll(" ","_")}.png`,f=({name:n})=>{const[r,i]=u(!1);return r?e.createElement("span",{className:"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold"},n.charAt(0)):e.createElement("img",{src:q(n),alt:"",draggable:!1,className:"size-[12.5cqw] rounded-full",onError:()=>i(!0)})},S=({device:n,model:r,onOpenApp:i})=>{const p=(n.apps??[]).filter(({name:t})=>t!==h),[o,c]=u(),[b,a]=u(),s=r.lightScreen?{background:"bg-white",text:"text-black",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-black/30",overlay:"bg-white/70"}:{background:"bg-black",text:"text-white",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-white/30",overlay:"bg-black/70"},l=r.touch?{scroll:"overflow-y-auto",list:"grid grid-cols-3 gap-[1.5cqw]",tile:"min-w-0 py-[3cqw]",opening:"flex-col"}:{scroll:"flex items-center overflow-x-auto",list:"flex gap-[2.5cqw]",tile:"w-[28cqw] shrink-0 py-[1.5cqw]",opening:"flex-row"},m=v(void 0);w(()=>()=>clearTimeout(m.current),[]);const g=t=>{!i||o||(c(t),a(void 0),i(t).then(()=>{m.current=setTimeout(()=>{c(void 0),a(`${t} opened but its screen never showed up`)},y)},d=>{c(void 0),a(d instanceof Error?d.message:String(d))}))};return e.createElement("div",{className:"flex flex-col gap-8","data-testid":"container_device-os-info"},e.createElement(x,null,e.createElement("div",{className:`${s.background} ${l.scroll} ${k} ${s.scrollbar} p-[3cqw]`,style:{aspectRatio:r.screenWidth/r.screenHeight},"data-testid":"list_device-apps"},p.length===0?e.createElement("p",{className:`text-[length:5.5cqw] ${s.text} flex h-full w-full items-center justify-center opacity-60`},"No apps installed"):e.createElement("div",{className:l.list},p.map(t=>e.createElement("button",{key:t.name,type:"button",title:`${t.name} ${t.version}`,disabled:!i||o!==void 0,onClick:()=>g(t.name),className:`${s.text} ${l.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`,"data-testid":`button_open-app-${t.name}`},e.createElement(f,{name:t.name}),e.createElement("span",{className:"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]"},t.name))))),o!==void 0?e.createElement("div",{className:`${s.text} ${s.overlay} ${l.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`,"data-testid":"spinner_opening-app-screen"},e.createElement("div",{className:"relative flex size-[18cqw] shrink-0 items-center justify-center"},e.createElement("span",{className:"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15"}),e.createElement("span",{className:"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current"}),e.createElement(f,{name:o})),e.createElement("span",{className:"animate-pulse text-[length:4.7cqw] font-semibold"},"Opening ",o)):null),b?e.createElement("p",{className:"body-4 text-error text-center"},b):null)};export{S as DeviceOsInfo};
+import e,{useState as b}from"react";import{appIconUrl as u,openableApps as m,useOpenApp as f}from"@ledgerhq/device-mockserver-react-core";import{ScreenFrame as g}from"./ScreenFrame";const w="[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",p=({name:s})=>{const[n,l]=b(!1);return n?e.createElement("span",{className:"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold"},s.charAt(0)):e.createElement("img",{src:u(s),alt:"",draggable:!1,className:"size-[12.5cqw] rounded-full",onError:()=>l(!0)})},h=({device:s,model:n,onOpenApp:l})=>{const a=m(s),{opening:o,error:c,open:d}=f(l),r=n.lightScreen?{background:"bg-white",text:"text-black",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-black/30",overlay:"bg-white/70"}:{background:"bg-black",text:"text-white",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-white/30",overlay:"bg-black/70"},i=n.touch?{scroll:"overflow-y-auto",list:"grid grid-cols-3 gap-[1.5cqw]",tile:"min-w-0 py-[3cqw]",opening:"flex-col"}:{scroll:"flex items-center overflow-x-auto",list:"flex gap-[2.5cqw]",tile:"w-[28cqw] shrink-0 py-[1.5cqw]",opening:"flex-row"};return e.createElement("div",{className:"flex flex-col gap-8","data-testid":"container_device-os-info"},e.createElement(g,null,e.createElement("div",{className:`${r.background} ${i.scroll} ${w} ${r.scrollbar} p-[3cqw]`,style:{aspectRatio:n.screenWidth/n.screenHeight},"data-testid":"list_device-apps"},a.length===0?e.createElement("p",{className:`text-[length:5.5cqw] ${r.text} flex h-full w-full items-center justify-center opacity-60`},"No apps installed"):e.createElement("div",{className:i.list},a.map(t=>e.createElement("button",{key:t.name,type:"button",title:`${t.name} ${t.version}`,disabled:!l||o!==void 0,onClick:()=>d(t.name),className:`${r.text} ${i.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`,"data-testid":`button_open-app-${t.name}`},e.createElement(p,{name:t.name}),e.createElement("span",{className:"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]"},t.name))))),o!==void 0?e.createElement("div",{className:`${r.text} ${r.overlay} ${i.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`,"data-testid":"spinner_opening-app-screen"},e.createElement("div",{className:"relative flex size-[18cqw] shrink-0 items-center justify-center"},e.createElement("span",{className:"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15"}),e.createElement("span",{className:"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current"}),e.createElement(p,{name:o})),e.createElement("span",{className:"animate-pulse text-[length:4.7cqw] font-semibold"},"Opening ",o)):null),c?e.createElement("p",{className:"body-4 text-error text-center"},c):null)};export{h as DeviceOsInfo};
 //# sourceMappingURL=DeviceOsInfo.js.map

package/lib/esm/src/DeviceOsInfo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceOsInfo.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { type DeviceScreenModel } from \"./deviceModels\";\nimport { ScreenFrame } from \"./ScreenFrame\";\n\n/** The OS reports itself as an app; it is not one the user can open. */\nconst OS_APP_NAME = \"BOLOS\";\n\nconst OPEN_TIMEOUT_MS = 10_000;\n\n/** A styled scrollbar stays visible where the OS would hide an overlay one. */\nconst SCROLLBAR =\n  \"[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full\";\n\n/** Ledger Live's app icons, keyed by the app's Manager API icon name. */\nconst iconUrl = (appName: string) =>\n  `https://cdn.live.ledger.com/icons/${appName.toLowerCase().replaceAll(\" \", \"_\")}.png`;\n\ntype AppIconProps = {\n  name: string;\n};\n\nconst AppIcon: React.FC<AppIconProps> = ({ name }) => {\n  const [missing, setMissing] = useState(false);\n\n  if (missing) {\n    return (\n      <span className=\"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold\">\n        {name.charAt(0)}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={iconUrl(name)}\n      alt=\"\"\n      draggable={false}\n      className=\"size-[12.5cqw] rounded-full\"\n      onError={() => setMissing(true)}\n    />\n  );\n};\n\ntype DeviceOsInfoProps = {\n  device: Device;\n  model: DeviceScreenModel;\n  /** Omitted, the apps are listed but cannot be opened. */\n  onOpenApp?: (appName: string) => Promise<void>;\n};\n\nexport const DeviceOsInfo: React.FC<DeviceOsInfoProps> = ({\n  device,\n  model,\n  onOpenApp,\n}) => {\n  const apps = (device.apps ?? []).filter(({ name }) => name !== OS_APP_NAME);\n  /** Kept on success, until the live screen replaces the grid or times out. */\n  const [opening, setOpening] = useState<string>();\n  const [error, setError] = useState<string>();\n  const screen = model.lightScreen\n    ? {\n        background: \"bg-white\",\n        text: \"text-black\",\n        scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-black/30\",\n        overlay: \"bg-white/70\",\n      }\n    : {\n        background: \"bg-black\",\n        text: \"text-white\",\n        scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-white/30\",\n        overlay: \"bg-black/70\",\n      };\n  const layout = model.touch\n    ? {\n        scroll: \"overflow-y-auto\",\n        list: \"grid grid-cols-3 gap-[1.5cqw]\",\n        tile: \"min-w-0 py-[3cqw]\",\n        opening: \"flex-col\",\n      }\n    : {\n        scroll: \"flex items-center overflow-x-auto\",\n        list: \"flex gap-[2.5cqw]\",\n        tile: \"w-[28cqw] shrink-0 py-[1.5cqw]\",\n        opening: \"flex-row\",\n      };\n\n  const openTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n    undefined,\n  );\n  useEffect(() => () => clearTimeout(openTimer.current), []);\n\n  const open = (appName: string) => {\n    if (!onOpenApp || opening) return;\n    setOpening(appName);\n    setError(undefined);\n    onOpenApp(appName).then(\n      () => {\n        openTimer.current = setTimeout(() => {\n          setOpening(undefined);\n          setError(`${appName} opened but its screen never showed up`);\n        }, OPEN_TIMEOUT_MS);\n      },\n      (cause: unknown) => {\n        setOpening(undefined);\n        setError(cause instanceof Error ? cause.message : String(cause));\n      },\n    );\n  };\n\n  return (\n    <div className=\"flex flex-col gap-8\" data-testid=\"container_device-os-info\">\n      <ScreenFrame>\n        <div\n          className={`${screen.background} ${layout.scroll} ${SCROLLBAR} ${screen.scrollbar} p-[3cqw]`}\n          style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n          data-testid=\"list_device-apps\"\n        >\n          {apps.length === 0 ? (\n            <p\n              className={`text-[length:5.5cqw] ${screen.text} flex h-full w-full items-center justify-center opacity-60`}\n            >\n              No apps installed\n            </p>\n          ) : (\n            <div className={layout.list}>\n              {apps.map((app) => (\n                <button\n                  key={app.name}\n                  type=\"button\"\n                  title={`${app.name} ${app.version}`}\n                  disabled={!onOpenApp || opening !== undefined}\n                  onClick={() => open(app.name)}\n                  className={`${screen.text} ${layout.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`}\n                  data-testid={`button_open-app-${app.name}`}\n                >\n                  <AppIcon name={app.name} />\n                  <span className=\"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]\">\n                    {app.name}\n                  </span>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n        {opening !== undefined ? (\n          <div\n            className={`${screen.text} ${screen.overlay} ${layout.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`}\n            data-testid=\"spinner_opening-app-screen\"\n          >\n            <div className=\"relative flex size-[18cqw] shrink-0 items-center justify-center\">\n              <span className=\"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15\" />\n              <span className=\"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current\" />\n              <AppIcon name={opening} />\n            </div>\n            <span className=\"animate-pulse text-[length:4.7cqw] font-semibold\">\n              Opening {opening}\n            </span>\n          </div>\n        ) : null}\n      </ScreenFrame>\n      {error ? <p className=\"body-4 text-error text-center\">{error}</p> : null}\n    </div>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "useEffect", "useRef", "useState", "ScreenFrame", "OS_APP_NAME", "OPEN_TIMEOUT_MS", "SCROLLBAR", "iconUrl", "appName", "AppIcon", "name", "missing", "setMissing", "DeviceOsInfo", "device", "model", "onOpenApp", "apps", "opening", "setOpening", "error", "setError", "screen", "layout", "openTimer", "open", "cause", "app"]
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\nimport {\n  appIconUrl,\n  openableApps,\n  useOpenApp,\n} from \"@ledgerhq/device-mockserver-react-core\";\n\nimport { type DeviceScreenModel } from \"./deviceModels\";\nimport { ScreenFrame } from \"./ScreenFrame\";\n\n/** A styled scrollbar stays visible where the OS would hide an overlay one. */\nconst SCROLLBAR =\n  \"[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full\";\n\ntype AppIconProps = {\n  name: string;\n};\n\nconst AppIcon: React.FC<AppIconProps> = ({ name }) => {\n  const [missing, setMissing] = useState(false);\n\n  if (missing) {\n    return (\n      <span className=\"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold\">\n        {name.charAt(0)}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={appIconUrl(name)}\n      alt=\"\"\n      draggable={false}\n      className=\"size-[12.5cqw] rounded-full\"\n      onError={() => setMissing(true)}\n    />\n  );\n};\n\ntype DeviceOsInfoProps = {\n  device: Device;\n  model: DeviceScreenModel;\n  /** Omitted, the apps are listed but cannot be opened. */\n  onOpenApp?: (appName: string) => Promise<void>;\n};\n\nexport const DeviceOsInfo: React.FC<DeviceOsInfoProps> = ({\n  device,\n  model,\n  onOpenApp,\n}) => {\n  const apps = openableApps(device);\n  const { opening, error, open } = useOpenApp(onOpenApp);\n  const screen = model.lightScreen\n    ? {\n        background: \"bg-white\",\n        text: \"text-black\",\n        scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-black/30\",\n        overlay: \"bg-white/70\",\n      }\n    : {\n        background: \"bg-black\",\n        text: \"text-white\",\n        scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-white/30\",\n        overlay: \"bg-black/70\",\n      };\n  const layout = model.touch\n    ? {\n        scroll: \"overflow-y-auto\",\n        list: \"grid grid-cols-3 gap-[1.5cqw]\",\n        tile: \"min-w-0 py-[3cqw]\",\n        opening: \"flex-col\",\n      }\n    : {\n        scroll: \"flex items-center overflow-x-auto\",\n        list: \"flex gap-[2.5cqw]\",\n        tile: \"w-[28cqw] shrink-0 py-[1.5cqw]\",\n        opening: \"flex-row\",\n      };\n\n  return (\n    <div className=\"flex flex-col gap-8\" data-testid=\"container_device-os-info\">\n      <ScreenFrame>\n        <div\n          className={`${screen.background} ${layout.scroll} ${SCROLLBAR} ${screen.scrollbar} p-[3cqw]`}\n          style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n          data-testid=\"list_device-apps\"\n        >\n          {apps.length === 0 ? (\n            <p\n              className={`text-[length:5.5cqw] ${screen.text} flex h-full w-full items-center justify-center opacity-60`}\n            >\n              No apps installed\n            </p>\n          ) : (\n            <div className={layout.list}>\n              {apps.map((app) => (\n                <button\n                  key={app.name}\n                  type=\"button\"\n                  title={`${app.name} ${app.version}`}\n                  disabled={!onOpenApp || opening !== undefined}\n                  onClick={() => open(app.name)}\n                  className={`${screen.text} ${layout.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`}\n                  data-testid={`button_open-app-${app.name}`}\n                >\n                  <AppIcon name={app.name} />\n                  <span className=\"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]\">\n                    {app.name}\n                  </span>\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n        {opening !== undefined ? (\n          <div\n            className={`${screen.text} ${screen.overlay} ${layout.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`}\n            data-testid=\"spinner_opening-app-screen\"\n          >\n            <div className=\"relative flex size-[18cqw] shrink-0 items-center justify-center\">\n              <span className=\"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15\" />\n              <span className=\"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current\" />\n              <AppIcon name={opening} />\n            </div>\n            <span className=\"animate-pulse text-[length:4.7cqw] font-semibold\">\n              Opening {opening}\n            </span>\n          </div>\n        ) : null}\n      </ScreenFrame>\n      {error ? <p className=\"body-4 text-error text-center\">{error}</p> : null}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,OAAOA,GAAS,YAAAC,MAAgB,QAEhC,OACE,cAAAC,EACA,gBAAAC,EACA,cAAAC,MACK,yCAGP,OAAS,eAAAC,MAAmB,gBAG5B,MAAMC,EACJ,0HAMIC,EAAkC,CAAC,CAAE,KAAAC,CAAK,IAAM,CACpD,KAAM,CAACC,EAASC,CAAU,EAAIT,EAAS,EAAK,EAE5C,OAAIQ,EAEAT,EAAA,cAAC,QAAK,UAAU,qHACbQ,EAAK,OAAO,CAAC,CAChB,EAKFR,EAAA,cAAC,OACC,IAAKE,EAAWM,CAAI,EACpB,IAAI,GACJ,UAAW,GACX,UAAU,8BACV,QAAS,IAAME,EAAW,EAAI,EAChC,CAEJ,EASaC,EAA4C,CAAC,CACxD,OAAAC,EACA,MAAAC,EACA,UAAAC,CACF,IAAM,CACJ,MAAMC,EAAOZ,EAAaS,CAAM,EAC1B,CAAE,QAAAI,EAAS,MAAAC,EAAO,KAAAC,CAAK,EAAId,EAAWU,CAAS,EAC/CK,EAASN,EAAM,YACjB,CACE,WAAY,WACZ,KAAM,aACN,UAAW,2CACX,QAAS,aACX,EACA,CACE,WAAY,WACZ,KAAM,aACN,UAAW,2CACX,QAAS,aACX,EACEO,EAASP,EAAM,MACjB,CACE,OAAQ,kBACR,KAAM,gCACN,KAAM,oBACN,QAAS,UACX,EACA,CACE,OAAQ,oCACR,KAAM,oBACN,KAAM,iCACN,QAAS,UACX,EAEJ,OACEb,EAAA,cAAC,OAAI,UAAU,sBAAsB,cAAY,4BAC/CA,EAAA,cAACK,EAAA,KACCL,EAAA,cAAC,OACC,UAAW,GAAGmB,EAAO,UAAU,IAAIC,EAAO,MAAM,IAAId,CAAS,IAAIa,EAAO,SAAS,YACjF,MAAO,CAAE,YAAaN,EAAM,YAAcA,EAAM,YAAa,EAC7D,cAAY,oBAEXE,EAAK,SAAW,EACff,EAAA,cAAC,KACC,UAAW,wBAAwBmB,EAAO,IAAI,8DAC/C,mBAED,EAEAnB,EAAA,cAAC,OAAI,UAAWoB,EAAO,MACpBL,EAAK,IAAKM,GACTrB,EAAA,cAAC,UACC,IAAKqB,EAAI,KACT,KAAK,SACL,MAAO,GAAGA,EAAI,IAAI,IAAIA,EAAI,OAAO,GACjC,SAAU,CAACP,GAAaE,IAAY,OACpC,QAAS,IAAME,EAAKG,EAAI,IAAI,EAC5B,UAAW,GAAGF,EAAO,IAAI,IAAIC,EAAO,IAAI,8HACxC,cAAa,mBAAmBC,EAAI,IAAI,IAExCrB,EAAA,cAACO,EAAA,CAAQ,KAAMc,EAAI,KAAM,EACzBrB,EAAA,cAAC,QAAK,UAAU,kEACbqB,EAAI,IACP,CACF,CACD,CACH,CAEJ,EACCL,IAAY,OACXhB,EAAA,cAAC,OACC,UAAW,GAAGmB,EAAO,IAAI,IAAIA,EAAO,OAAO,IAAIC,EAAO,OAAO,yGAC7D,cAAY,8BAEZpB,EAAA,cAAC,OAAI,UAAU,mEACbA,EAAA,cAAC,QAAK,UAAU,0EAA0E,EAC1FA,EAAA,cAAC,QAAK,UAAU,iGAAiG,EACjHA,EAAA,cAACO,EAAA,CAAQ,KAAMS,EAAS,CAC1B,EACAhB,EAAA,cAAC,QAAK,UAAU,oDAAmD,WACxDgB,CACX,CACF,EACE,IACN,EACCC,EAAQjB,EAAA,cAAC,KAAE,UAAU,iCAAiCiB,CAAM,EAAO,IACtE,CAEJ",
+  "names": ["React", "useState", "appIconUrl", "openableApps", "useOpenApp", "ScreenFrame", "SCROLLBAR", "AppIcon", "name", "missing", "setMissing", "DeviceOsInfo", "device", "model", "onOpenApp", "apps", "opening", "error", "open", "screen", "layout", "app"]
 }

package/lib/esm/src/DeviceScreen.js

@@ -1,2 +1,2 @@
-import e,{useEffect as z,useRef as h,useState as b}from"react";import{Banner as P,IconButton as N}from"@ledgerhq/lumen-ui-react";import{ChevronDown as _,ChevronUp as H}from"@ledgerhq/lumen-ui-react/symbols";import{findDeviceScreenModel as I}from"./deviceModels";import{DeviceOsInfo as W}from"./DeviceOsInfo";import{DeviceScreenButtons as A}from"./DeviceScreenButtons";import{DeviceScreenImage as B}from"./DeviceScreenImage";import{ScreenFrame as F}from"./ScreenFrame";import{useScreenPolling as L}from"./useScreenPolling";const v=16,X=224,k=200,D=(o,n,c)=>{const s=(l,i)=>Math.min(Math.max(l,0),Math.max(i,0));return{left:s(o,window.innerWidth-c.width),top:s(n,window.innerHeight-c.height)}},U=(o,n)=>n?`${o} - ${n}`:o,Z=({api:o,deviceType:n,firmwareVersion:c,floating:s=!1,defaultCollapsed:l=!1})=>{const i=I(n),[m,a]=b(l),g=L(o,!s||!m);return s?e.createElement($,{title:U(i.label,c),model:i,collapsed:m,onToggle:()=>a(f=>!f)},S(g,i,o)):e.createElement("div",{className:"mx-auto flex w-full max-w-[420px] flex-col gap-8","data-testid":"container_device-screen"},S(g,i,o))},$=({title:o,model:n,collapsed:c,onToggle:s,children:l})=>{const i=h(null),[m,a]=b(),[g,f]=b(X),d=h(null),u=h(null);z(()=>{const t=()=>{const r=i.current?.getBoundingClientRect();r&&a(p=>p&&D(p.left,p.top,r))};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const M=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||t.target.closest("button")||(t.currentTarget.setPointerCapture(t.pointerId),d.current={dx:t.clientX-r.left,dy:t.clientY-r.top})},y=t=>{const r=i.current?.getBoundingClientRect();!d.current||!r||a(D(t.clientX-d.current.dx,t.clientY-d.current.dy,r))},w=()=>{d.current=null},C=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||(t.currentTarget.setPointerCapture(t.pointerId),a({left:r.left,top:r.top}),u.current={x:t.clientX,width:r.width})},E=t=>{const r=i.current?.getBoundingClientRect();if(!u.current||!r)return;const p=u.current.width+t.clientX-u.current.x,T=window.innerWidth-r.left-v;f(Math.max(k,Math.min(p,T)))},x=()=>{u.current=null};return e.createElement("div",{ref:i,className:"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg",style:{zIndex:1e3,width:g,...m??{right:v,bottom:v}},"data-testid":"container_device-screen"},e.createElement("div",{className:"flex cursor-move items-center gap-8 px-12 py-8 select-none",style:{touchAction:"none"},onPointerDown:M,onPointerMove:y,onPointerUp:w,onPointerCancel:w},e.createElement(n.icon,{size:16}),e.createElement("span",{className:"body-3-semi-bold text-base flex-1"},o),e.createElement(N,{appearance:"no-background",size:"xs",icon:c?H:_,"aria-label":c?"Expand device screen":"Collapse device screen",onClick:s,"data-testid":"button_toggle-device-screen"})),c?null:e.createElement(e.Fragment,null,e.createElement("div",{className:"flex flex-col gap-8 px-12 pb-12"},l),e.createElement("div",{className:"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center",style:{touchAction:"none"},onPointerDown:C,onPointerMove:E,onPointerUp:x,onPointerCancel:x,"aria-hidden":!0,"data-testid":"handle_resize-device-screen"},e.createElement("span",{className:"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors"}))))};function S(o,n,c){switch(o.kind){case"loading":return e.createElement(F,null,e.createElement("div",{className:`${n.lightScreen?"bg-white text-black":"bg-black text-white"} flex items-center justify-center`,style:{aspectRatio:n.screenWidth/n.screenHeight},"data-testid":"placeholder_device-screen-loading"},e.createElement("span",{className:"animate-pulse opacity-60"},e.createElement(n.icon,{size:32}))));case"error":return e.createElement(P,{appearance:"error",title:"Screen unavailable",description:o.message});case"os-info":return e.createElement(e.Fragment,null,e.createElement(W,{device:o.device,model:n,onOpenApp:n.speculos?c.openApp:void 0}),n.speculos?null:e.createElement(P,{appearance:"info",title:"No screen to capture",description:`Speculos has no emulator for the ${n.label}, so this device is mocked all the way through and has no screen.`,"data-testid":"banner_device-screen-no-emulator"}));case"image":return e.createElement(e.Fragment,null,e.createElement(B,{src:o.src,onTouch:n.touch?o.input.touch:void 0}),n.touch?null:e.createElement(A,{onPress:o.input.pressButton}))}}export{Z as DeviceScreen};
+import e,{useEffect as z,useRef as h,useState as b}from"react";import{useScreenPolling as N}from"@ledgerhq/device-mockserver-react-core";import{Banner as P,IconButton as _}from"@ledgerhq/lumen-ui-react";import{ChevronDown as H,ChevronUp as I}from"@ledgerhq/lumen-ui-react/symbols";import{findDeviceScreenModel as W}from"./deviceModels";import{DeviceOsInfo as A}from"./DeviceOsInfo";import{DeviceScreenButtons as B}from"./DeviceScreenButtons";import{DeviceScreenImage as F}from"./DeviceScreenImage";import{ScreenFrame as L}from"./ScreenFrame";import{webScreenPlatform as X}from"./webScreenPlatform";const v=16,k=224,U=200,D=(o,n,c)=>{const s=(l,i)=>Math.min(Math.max(l,0),Math.max(i,0));return{left:s(o,window.innerWidth-c.width),top:s(n,window.innerHeight-c.height)}},$=(o,n)=>n?`${o} - ${n}`:o,ee=({api:o,deviceType:n,firmwareVersion:c,floating:s=!1,defaultCollapsed:l=!1})=>{const i=W(n),[m,a]=b(l),g=N(o,!s||!m,X);return s?e.createElement(O,{title:$(i.label,c),model:i,collapsed:m,onToggle:()=>a(f=>!f)},S(g,i,o)):e.createElement("div",{className:"mx-auto flex w-full max-w-[420px] flex-col gap-8","data-testid":"container_device-screen"},S(g,i,o))},O=({title:o,model:n,collapsed:c,onToggle:s,children:l})=>{const i=h(null),[m,a]=b(),[g,f]=b(k),d=h(null),u=h(null);z(()=>{const t=()=>{const r=i.current?.getBoundingClientRect();r&&a(p=>p&&D(p.left,p.top,r))};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const M=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||t.target.closest("button")||(t.currentTarget.setPointerCapture(t.pointerId),d.current={dx:t.clientX-r.left,dy:t.clientY-r.top})},y=t=>{const r=i.current?.getBoundingClientRect();!d.current||!r||a(D(t.clientX-d.current.dx,t.clientY-d.current.dy,r))},w=()=>{d.current=null},C=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||(t.currentTarget.setPointerCapture(t.pointerId),a({left:r.left,top:r.top}),u.current={x:t.clientX,width:r.width})},E=t=>{const r=i.current?.getBoundingClientRect();if(!u.current||!r)return;const p=u.current.width+t.clientX-u.current.x,T=window.innerWidth-r.left-v;f(Math.max(U,Math.min(p,T)))},x=()=>{u.current=null};return e.createElement("div",{ref:i,className:"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg",style:{zIndex:1e3,width:g,...m??{right:v,bottom:v}},"data-testid":"container_device-screen"},e.createElement("div",{className:"flex cursor-move items-center gap-8 px-12 py-8 select-none",style:{touchAction:"none"},onPointerDown:M,onPointerMove:y,onPointerUp:w,onPointerCancel:w},e.createElement(n.icon,{size:16}),e.createElement("span",{className:"body-3-semi-bold text-base flex-1"},o),e.createElement(_,{appearance:"no-background",size:"xs",icon:c?I:H,"aria-label":c?"Expand device screen":"Collapse device screen",onClick:s,"data-testid":"button_toggle-device-screen"})),c?null:e.createElement(e.Fragment,null,e.createElement("div",{className:"flex flex-col gap-8 px-12 pb-12"},l),e.createElement("div",{className:"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center",style:{touchAction:"none"},onPointerDown:C,onPointerMove:E,onPointerUp:x,onPointerCancel:x,"aria-hidden":!0,"data-testid":"handle_resize-device-screen"},e.createElement("span",{className:"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors"}))))};function S(o,n,c){switch(o.kind){case"loading":return e.createElement(L,null,e.createElement("div",{className:`${n.lightScreen?"bg-white text-black":"bg-black text-white"} flex items-center justify-center`,style:{aspectRatio:n.screenWidth/n.screenHeight},"data-testid":"placeholder_device-screen-loading"},e.createElement("span",{className:"animate-pulse opacity-60"},e.createElement(n.icon,{size:32}))));case"error":return e.createElement(P,{appearance:"error",title:"Screen unavailable",description:o.message});case"os-info":return e.createElement(e.Fragment,null,e.createElement(A,{device:o.device,model:n,onOpenApp:n.speculos?c.openApp:void 0}),n.speculos?null:e.createElement(P,{appearance:"info",title:"No screen to capture",description:`Speculos has no emulator for the ${n.label}, so this device is mocked all the way through and has no screen.`,"data-testid":"banner_device-screen-no-emulator"}));case"image":return e.createElement(e.Fragment,null,e.createElement(F,{src:o.src,onTouch:n.touch?o.input.touch:void 0}),n.touch?null:e.createElement(B,{onPress:o.input.pressButton}))}}export{ee as DeviceScreen};
 //# sourceMappingURL=DeviceScreen.js.map

package/lib/esm/src/DeviceScreen.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceScreen.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport { Banner, IconButton } from \"@ledgerhq/lumen-ui-react\";\nimport { ChevronDown, ChevronUp } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nimport { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nimport { DeviceOsInfo } from \"./DeviceOsInfo\";\nimport { DeviceScreenButtons } from \"./DeviceScreenButtons\";\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\nimport { ScreenFrame } from \"./ScreenFrame\";\nimport { type DeviceScreenState, type ScreenApi } from \"./types\";\nimport { useScreenPolling } from \"./useScreenPolling\";\n\nexport type DeviceScreenProps = {\n  api: ScreenApi;\n  /** The mock server's `device_type`, a DMK `DeviceModelId`. */\n  deviceType: string;\n  /** Shown next to the model name in the floating window's header. */\n  firmwareVersion?: string;\n  /**\n   * Render as a window over the page that can be dragged by its header and\n   * collapsed to it, rather than inline where it is placed.\n   */\n  floating?: boolean;\n  defaultCollapsed?: boolean;\n};\n\ninterface Position {\n  readonly left: number;\n  readonly top: number;\n}\n\nconst EDGE_MARGIN_PX = 16;\nconst DEFAULT_WIDTH_PX = 224;\nconst MIN_WIDTH_PX = 200;\n\n/** Keeps the whole window, header included, where it can be dragged back. */\nconst clampToViewport = (\n  left: number,\n  top: number,\n  rect: DOMRect,\n): Position => {\n  const clamp = (value: number, max: number) =>\n    Math.min(Math.max(value, 0), Math.max(max, 0));\n  return {\n    left: clamp(left, window.innerWidth - rect.width),\n    top: clamp(top, window.innerHeight - rect.height),\n  };\n};\n\nconst deviceScreenTitle = (label: string, firmwareVersion?: string) =>\n  firmwareVersion ? `${label} - ${firmwareVersion}` : label;\n\nexport const DeviceScreen: React.FC<DeviceScreenProps> = ({\n  api,\n  deviceType,\n  firmwareVersion,\n  floating = false,\n  defaultCollapsed = false,\n}) => {\n  const model = findDeviceScreenModel(deviceType);\n  const [collapsed, setCollapsed] = useState(defaultCollapsed);\n  const state = useScreenPolling(api, !floating || !collapsed);\n\n  if (!floating) {\n    return (\n      <div\n        className=\"mx-auto flex w-full max-w-[420px] flex-col gap-8\"\n        data-testid=\"container_device-screen\"\n      >\n        {renderScreen(state, model, api)}\n      </div>\n    );\n  }\n\n  return (\n    <FloatingWindow\n      title={deviceScreenTitle(model.label, firmwareVersion)}\n      model={model}\n      collapsed={collapsed}\n      onToggle={() => setCollapsed((value) => !value)}\n    >\n      {renderScreen(state, model, api)}\n    </FloatingWindow>\n  );\n};\n\ntype FloatingWindowProps = {\n  title: string;\n  model: DeviceScreenModel;\n  collapsed: boolean;\n  onToggle: () => void;\n  children: React.ReactNode;\n};\n\nconst FloatingWindow: React.FC<FloatingWindowProps> = ({\n  title,\n  model,\n  collapsed,\n  onToggle,\n  children,\n}) => {\n  const windowRef = useRef<HTMLDivElement>(null);\n  /** Unset until first dragged: the window starts in the bottom right corner. */\n  const [position, setPosition] = useState<Position>();\n  const [width, setWidth] = useState(DEFAULT_WIDTH_PX);\n  const drag = useRef<{ dx: number; dy: number } | null>(null);\n  const resize = useRef<{ x: number; width: number } | null>(null);\n\n  // Once moved, the window holds fixed coordinates that a shrinking viewport\n  // could leave off-screen.\n  useEffect(() => {\n    const handleViewportResize = () => {\n      const rect = windowRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      setPosition(\n        (current) =>\n          current && clampToViewport(current.left, current.top, rect),\n      );\n    };\n    window.addEventListener(\"resize\", handleViewportResize);\n    return () => window.removeEventListener(\"resize\", handleViewportResize);\n  }, []);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    // A drag captures the pointer, which would steal the button's click.\n    if (\n      !rect ||\n      event.button !== 0 ||\n      (event.target as HTMLElement).closest(\"button\")\n    ) {\n      return;\n    }\n    event.currentTarget.setPointerCapture(event.pointerId);\n    drag.current = {\n      dx: event.clientX - rect.left,\n      dy: event.clientY - rect.top,\n    };\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!drag.current || !rect) return;\n    setPosition(\n      clampToViewport(\n        event.clientX - drag.current.dx,\n        event.clientY - drag.current.dy,\n        rect,\n      ),\n    );\n  };\n\n  const handlePointerUp = () => {\n    drag.current = null;\n  };\n\n  const handleResizeDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!rect || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    // Pin the top left corner, or growing would push the window leftwards\n    // while it is still anchored to the bottom right.\n    setPosition({ left: rect.left, top: rect.top });\n    resize.current = { x: event.clientX, width: rect.width };\n  };\n\n  const handleResizeMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!resize.current || !rect) return;\n    const next = resize.current.width + event.clientX - resize.current.x;\n    const max = window.innerWidth - rect.left - EDGE_MARGIN_PX;\n    setWidth(Math.max(MIN_WIDTH_PX, Math.min(next, max)));\n  };\n\n  const handleResizeUp = () => {\n    resize.current = null;\n  };\n\n  return (\n    <div\n      ref={windowRef}\n      className=\"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg\"\n      style={{\n        zIndex: 1000,\n        width,\n        ...(position ?? { right: EDGE_MARGIN_PX, bottom: EDGE_MARGIN_PX }),\n      }}\n      data-testid=\"container_device-screen\"\n    >\n      <div\n        className=\"flex cursor-move items-center gap-8 px-12 py-8 select-none\"\n        style={{ touchAction: \"none\" }}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n      >\n        <model.icon size={16} />\n        <span className=\"body-3-semi-bold text-base flex-1\">{title}</span>\n        <IconButton\n          appearance=\"no-background\"\n          size=\"xs\"\n          icon={collapsed ? ChevronUp : ChevronDown}\n          aria-label={\n            collapsed ? \"Expand device screen\" : \"Collapse device screen\"\n          }\n          onClick={onToggle}\n          data-testid=\"button_toggle-device-screen\"\n        />\n      </div>\n      {collapsed ? null : (\n        <>\n          <div className=\"flex flex-col gap-8 px-12 pb-12\">{children}</div>\n          <div\n            className=\"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center\"\n            style={{ touchAction: \"none\" }}\n            onPointerDown={handleResizeDown}\n            onPointerMove={handleResizeMove}\n            onPointerUp={handleResizeUp}\n            onPointerCancel={handleResizeUp}\n            aria-hidden\n            data-testid=\"handle_resize-device-screen\"\n          >\n            <span className=\"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors\" />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nfunction renderScreen(\n  state: DeviceScreenState,\n  model: DeviceScreenModel,\n  api: ScreenApi,\n) {\n  switch (state.kind) {\n    case \"loading\":\n      return (\n        <ScreenFrame>\n          <div\n            className={`${model.lightScreen ? \"bg-white text-black\" : \"bg-black text-white\"} flex items-center justify-center`}\n            style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n            data-testid=\"placeholder_device-screen-loading\"\n          >\n            <span className=\"animate-pulse opacity-60\">\n              <model.icon size={32} />\n            </span>\n          </div>\n        </ScreenFrame>\n      );\n    case \"error\":\n      return (\n        <Banner\n          appearance=\"error\"\n          title=\"Screen unavailable\"\n          description={state.message}\n        />\n      );\n    case \"os-info\":\n      return (\n        <>\n          <DeviceOsInfo\n            device={state.device}\n            model={model}\n            onOpenApp={model.speculos ? api.openApp : undefined}\n          />\n          {model.speculos ? null : (\n            <Banner\n              appearance=\"info\"\n              title=\"No screen to capture\"\n              description={`Speculos has no emulator for the ${model.label}, so this device is mocked all the way through and has no screen.`}\n              data-testid=\"banner_device-screen-no-emulator\"\n            />\n          )}\n        </>\n      );\n    case \"image\":\n      return (\n        <>\n          <DeviceScreenImage\n            src={state.src}\n            onTouch={model.touch ? state.input.touch : undefined}\n          />\n          {model.touch ? null : (\n            <DeviceScreenButtons onPress={state.input.pressButton} />\n          )}\n        </>\n      );\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["React", "useEffect", "useRef", "useState", "Banner", "IconButton", "ChevronDown", "ChevronUp", "findDeviceScreenModel", "DeviceOsInfo", "DeviceScreenButtons", "DeviceScreenImage", "ScreenFrame", "useScreenPolling", "EDGE_MARGIN_PX", "DEFAULT_WIDTH_PX", "MIN_WIDTH_PX", "clampToViewport", "left", "top", "rect", "clamp", "value", "max", "deviceScreenTitle", "label", "firmwareVersion", "DeviceScreen", "api", "deviceType", "floating", "defaultCollapsed", "model", "collapsed", "setCollapsed", "state", "FloatingWindow", "renderScreen", "title", "onToggle", "children", "windowRef", "position", "setPosition", "width", "setWidth", "drag", "resize", "handleViewportResize", "current", "handlePointerDown", "event", "handlePointerMove", "handlePointerUp", "handleResizeDown", "handleResizeMove", "next", "handleResizeUp"]
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport {\n  type DeviceScreenState,\n  type ScreenApi,\n  useScreenPolling,\n} from \"@ledgerhq/device-mockserver-react-core\";\nimport { Banner, IconButton } from \"@ledgerhq/lumen-ui-react\";\nimport { ChevronDown, ChevronUp } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nimport { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nimport { DeviceOsInfo } from \"./DeviceOsInfo\";\nimport { DeviceScreenButtons } from \"./DeviceScreenButtons\";\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\nimport { ScreenFrame } from \"./ScreenFrame\";\nimport { webScreenPlatform } from \"./webScreenPlatform\";\n\nexport type DeviceScreenProps = {\n  api: ScreenApi;\n  /** The mock server's `device_type`, a DMK `DeviceModelId`. */\n  deviceType: string;\n  /** Shown next to the model name in the floating window's header. */\n  firmwareVersion?: string;\n  /**\n   * Render as a window over the page that can be dragged by its header and\n   * collapsed to it, rather than inline where it is placed.\n   */\n  floating?: boolean;\n  defaultCollapsed?: boolean;\n};\n\ninterface Position {\n  readonly left: number;\n  readonly top: number;\n}\n\nconst EDGE_MARGIN_PX = 16;\nconst DEFAULT_WIDTH_PX = 224;\nconst MIN_WIDTH_PX = 200;\n\n/** Keeps the whole window, header included, where it can be dragged back. */\nconst clampToViewport = (\n  left: number,\n  top: number,\n  rect: DOMRect,\n): Position => {\n  const clamp = (value: number, max: number) =>\n    Math.min(Math.max(value, 0), Math.max(max, 0));\n  return {\n    left: clamp(left, window.innerWidth - rect.width),\n    top: clamp(top, window.innerHeight - rect.height),\n  };\n};\n\nconst deviceScreenTitle = (label: string, firmwareVersion?: string) =>\n  firmwareVersion ? `${label} - ${firmwareVersion}` : label;\n\nexport const DeviceScreen: React.FC<DeviceScreenProps> = ({\n  api,\n  deviceType,\n  firmwareVersion,\n  floating = false,\n  defaultCollapsed = false,\n}) => {\n  const model = findDeviceScreenModel(deviceType);\n  const [collapsed, setCollapsed] = useState(defaultCollapsed);\n  const state = useScreenPolling(\n    api,\n    !floating || !collapsed,\n    webScreenPlatform,\n  );\n\n  if (!floating) {\n    return (\n      <div\n        className=\"mx-auto flex w-full max-w-[420px] flex-col gap-8\"\n        data-testid=\"container_device-screen\"\n      >\n        {renderScreen(state, model, api)}\n      </div>\n    );\n  }\n\n  return (\n    <FloatingWindow\n      title={deviceScreenTitle(model.label, firmwareVersion)}\n      model={model}\n      collapsed={collapsed}\n      onToggle={() => setCollapsed((value) => !value)}\n    >\n      {renderScreen(state, model, api)}\n    </FloatingWindow>\n  );\n};\n\ntype FloatingWindowProps = {\n  title: string;\n  model: DeviceScreenModel;\n  collapsed: boolean;\n  onToggle: () => void;\n  children: React.ReactNode;\n};\n\nconst FloatingWindow: React.FC<FloatingWindowProps> = ({\n  title,\n  model,\n  collapsed,\n  onToggle,\n  children,\n}) => {\n  const windowRef = useRef<HTMLDivElement>(null);\n  /** Unset until first dragged: the window starts in the bottom right corner. */\n  const [position, setPosition] = useState<Position>();\n  const [width, setWidth] = useState(DEFAULT_WIDTH_PX);\n  const drag = useRef<{ dx: number; dy: number } | null>(null);\n  const resize = useRef<{ x: number; width: number } | null>(null);\n\n  // Once moved, the window holds fixed coordinates that a shrinking viewport\n  // could leave off-screen.\n  useEffect(() => {\n    const handleViewportResize = () => {\n      const rect = windowRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      setPosition(\n        (current) =>\n          current && clampToViewport(current.left, current.top, rect),\n      );\n    };\n    window.addEventListener(\"resize\", handleViewportResize);\n    return () => window.removeEventListener(\"resize\", handleViewportResize);\n  }, []);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    // A drag captures the pointer, which would steal the button's click.\n    if (\n      !rect ||\n      event.button !== 0 ||\n      (event.target as HTMLElement).closest(\"button\")\n    ) {\n      return;\n    }\n    event.currentTarget.setPointerCapture(event.pointerId);\n    drag.current = {\n      dx: event.clientX - rect.left,\n      dy: event.clientY - rect.top,\n    };\n  };\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!drag.current || !rect) return;\n    setPosition(\n      clampToViewport(\n        event.clientX - drag.current.dx,\n        event.clientY - drag.current.dy,\n        rect,\n      ),\n    );\n  };\n\n  const handlePointerUp = () => {\n    drag.current = null;\n  };\n\n  const handleResizeDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!rect || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    // Pin the top left corner, or growing would push the window leftwards\n    // while it is still anchored to the bottom right.\n    setPosition({ left: rect.left, top: rect.top });\n    resize.current = { x: event.clientX, width: rect.width };\n  };\n\n  const handleResizeMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    const rect = windowRef.current?.getBoundingClientRect();\n    if (!resize.current || !rect) return;\n    const next = resize.current.width + event.clientX - resize.current.x;\n    const max = window.innerWidth - rect.left - EDGE_MARGIN_PX;\n    setWidth(Math.max(MIN_WIDTH_PX, Math.min(next, max)));\n  };\n\n  const handleResizeUp = () => {\n    resize.current = null;\n  };\n\n  return (\n    <div\n      ref={windowRef}\n      className=\"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg\"\n      style={{\n        zIndex: 1000,\n        width,\n        ...(position ?? { right: EDGE_MARGIN_PX, bottom: EDGE_MARGIN_PX }),\n      }}\n      data-testid=\"container_device-screen\"\n    >\n      <div\n        className=\"flex cursor-move items-center gap-8 px-12 py-8 select-none\"\n        style={{ touchAction: \"none\" }}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n      >\n        <model.icon size={16} />\n        <span className=\"body-3-semi-bold text-base flex-1\">{title}</span>\n        <IconButton\n          appearance=\"no-background\"\n          size=\"xs\"\n          icon={collapsed ? ChevronUp : ChevronDown}\n          aria-label={\n            collapsed ? \"Expand device screen\" : \"Collapse device screen\"\n          }\n          onClick={onToggle}\n          data-testid=\"button_toggle-device-screen\"\n        />\n      </div>\n      {collapsed ? null : (\n        <>\n          <div className=\"flex flex-col gap-8 px-12 pb-12\">{children}</div>\n          <div\n            className=\"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center\"\n            style={{ touchAction: \"none\" }}\n            onPointerDown={handleResizeDown}\n            onPointerMove={handleResizeMove}\n            onPointerUp={handleResizeUp}\n            onPointerCancel={handleResizeUp}\n            aria-hidden\n            data-testid=\"handle_resize-device-screen\"\n          >\n            <span className=\"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors\" />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nfunction renderScreen(\n  state: DeviceScreenState,\n  model: DeviceScreenModel,\n  api: ScreenApi,\n) {\n  switch (state.kind) {\n    case \"loading\":\n      return (\n        <ScreenFrame>\n          <div\n            className={`${model.lightScreen ? \"bg-white text-black\" : \"bg-black text-white\"} flex items-center justify-center`}\n            style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n            data-testid=\"placeholder_device-screen-loading\"\n          >\n            <span className=\"animate-pulse opacity-60\">\n              <model.icon size={32} />\n            </span>\n          </div>\n        </ScreenFrame>\n      );\n    case \"error\":\n      return (\n        <Banner\n          appearance=\"error\"\n          title=\"Screen unavailable\"\n          description={state.message}\n        />\n      );\n    case \"os-info\":\n      return (\n        <>\n          <DeviceOsInfo\n            device={state.device}\n            model={model}\n            onOpenApp={model.speculos ? api.openApp : undefined}\n          />\n          {model.speculos ? null : (\n            <Banner\n              appearance=\"info\"\n              title=\"No screen to capture\"\n              description={`Speculos has no emulator for the ${model.label}, so this device is mocked all the way through and has no screen.`}\n              data-testid=\"banner_device-screen-no-emulator\"\n            />\n          )}\n        </>\n      );\n    case \"image\":\n      return (\n        <>\n          <DeviceScreenImage\n            src={state.src}\n            onTouch={model.touch ? state.input.touch : undefined}\n          />\n          {model.touch ? null : (\n            <DeviceScreenButtons onPress={state.input.pressButton} />\n          )}\n        </>\n      );\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useEffect", "useRef", "useState", "useScreenPolling", "Banner", "IconButton", "ChevronDown", "ChevronUp", "findDeviceScreenModel", "DeviceOsInfo", "DeviceScreenButtons", "DeviceScreenImage", "ScreenFrame", "webScreenPlatform", "EDGE_MARGIN_PX", "DEFAULT_WIDTH_PX", "MIN_WIDTH_PX", "clampToViewport", "left", "top", "rect", "clamp", "value", "max", "deviceScreenTitle", "label", "firmwareVersion", "DeviceScreen", "api", "deviceType", "floating", "defaultCollapsed", "model", "collapsed", "setCollapsed", "state", "FloatingWindow", "renderScreen", "title", "onToggle", "children", "windowRef", "position", "setPosition", "width", "setWidth", "drag", "resize", "handleViewportResize", "current", "handlePointerDown", "event", "handlePointerMove", "handlePointerUp", "handleResizeDown", "handleResizeMove", "next", "handleResizeUp"]
 }

package/lib/esm/src/DeviceScreen.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceScreen.test.tsx"],
-  "sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nimport { type ScreenApi } from \"./types\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nconst DEVICE = {\n  id: \"device-1\",\n  device_type: \"stax\",\n  apps: [{ name: \"Bitcoin\", version: \"2.5.0\" }],\n} as unknown as Device;\n\nconst anApi = (overrides: Partial<ScreenApi> = {}): ScreenApi => ({\n  screenshot: vi.fn(() => Promise.resolve(null)),\n  idle: vi.fn(() =>\n    Promise.resolve({ kind: \"os-info\" as const, device: DEVICE }),\n  ),\n  pressButton: vi.fn(() => Promise.resolve()),\n  touch: vi.fn(() => Promise.resolve()),\n  openApp: vi.fn(() => Promise.resolve()),\n  ...overrides,\n});\n\ndescribe(\"DeviceScreen\", () => {\n  let container: HTMLDivElement;\n  let root: Root;\n\n  const query = (testId: string) =>\n    container.querySelector<HTMLElement>(`[data-testid=\"${testId}\"]`);\n  const render = (props: Partial<DeviceScreenProps> & { api: ScreenApi }) =>\n    act(() => root.render(<DeviceScreen deviceType=\"stax\" {...props} />));\n  const wait = (ms = 0) => act(() => vi.advanceTimersByTimeAsync(ms));\n  const pointer = (target: Element, type: string, init: MouseEventInit = {}) =>\n    act(() => {\n      target.dispatchEvent(\n        new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n      );\n    });\n\n  beforeEach(() => {\n    vi.useFakeTimers();\n    URL.createObjectURL = vi.fn(() => \"blob:frame\");\n    URL.revokeObjectURL = vi.fn();\n    HTMLElement.prototype.setPointerCapture = vi.fn();\n    HTMLElement.prototype.releasePointerCapture = vi.fn();\n    container = document.createElement(\"div\");\n    document.body.append(container);\n    root = createRoot(container);\n  });\n\n  afterEach(() => {\n    act(() => root.unmount());\n    container.remove();\n    vi.useRealTimers();\n  });\n\n  describe(\"inline\", () => {\n    it(\"shows a placeholder until the screen answers\", () => {\n      render({ api: anApi({ screenshot: () => new Promise(() => {}) }) });\n\n      expect(query(\"placeholder_device-screen-loading\")).not.toBeNull();\n    });\n\n    it(\"shows the live screen of a running app\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n      });\n      await wait();\n\n      expect(query(\"image_device-screen\")?.getAttribute(\"src\")).toBe(\n        \"blob:frame\",\n      );\n    });\n\n    it(\"shows the installed apps while no app runs\", async () => {\n      render({ api: anApi() });\n      await wait();\n\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n    });\n\n    it(\"says why a device without an emulator has no screen\", async () => {\n      render({ api: anApi(), deviceType: \"nanoS\" });\n      await wait();\n\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n      expect(container.textContent).toContain(\n        \"Speculos has no emulator for the Nano S\",\n      );\n    });\n\n    it(\"says nothing about emulators for a device that has one\", async () => {\n      render({ api: anApi() });\n      await wait();\n\n      expect(container.textContent).not.toContain(\"has no emulator\");\n    });\n\n    it(\"says there is no screen when the api has nothing to show instead\", async () => {\n      render({ api: anApi({ idle: undefined }) });\n      await wait();\n\n      expect(container.textContent).toContain(\"No screen to capture\");\n    });\n\n    it(\"shows why the screen is unavailable\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.reject(new Error(\"offline\")) }),\n      });\n      await wait();\n\n      expect(container.textContent).toContain(\"Screen unavailable\");\n      expect(container.textContent).toContain(\"offline\");\n    });\n\n    it(\"keeps the last frame through a few failures while live\", async () => {\n      const screenshot = vi\n        .fn<() => Promise<Blob | null>>()\n        .mockResolvedValueOnce(new Blob([\"png\"]))\n        .mockRejectedValue(new Error(\"app quitting\"));\n      const failures = () => screenshot.mock.calls.length - 1;\n      render({ api: anApi({ screenshot }) });\n      await wait();\n\n      while (failures() < 3) await wait(500);\n      expect(query(\"image_device-screen\")).not.toBeNull();\n\n      while (failures() < 4) await wait(500);\n      expect(query(\"image_device-screen\")).toBeNull();\n      expect(container.textContent).toContain(\"app quitting\");\n    });\n\n    it(\"drives a Nano with its buttons and refreshes after\", async () => {\n      const api = anApi({\n        screenshot: vi.fn(() => Promise.resolve(new Blob([\"png\"]))),\n      });\n      render({ api, deviceType: \"nanoX\" });\n      await wait();\n\n      pointer(query(\"button_device-screen-left\")!, \"pointerdown\");\n      pointer(query(\"button_device-screen-left\")!, \"pointerup\");\n      await wait();\n\n      expect(api.pressButton).toHaveBeenCalledWith(\"left\", \"press-and-release\");\n      expect(api.screenshot).toHaveBeenCalledTimes(2);\n    });\n\n    it(\"drives a touch device by its screen, without buttons\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n      });\n      await wait();\n\n      expect(query(\"image_device-screen\")).not.toBeNull();\n      expect(query(\"button_device-screen-left\")).toBeNull();\n    });\n  });\n\n  describe(\"floating\", () => {\n    const windowElement = () => query(\"container_device-screen\")!;\n    const header = () => windowElement().firstElementChild!;\n\n    it(\"titles the window with the model and firmware\", async () => {\n      render({ api: anApi(), floating: true, firmwareVersion: \"1.10.1\" });\n      await wait();\n\n      expect(windowElement().textContent).toContain(\"Stax - 1.10.1\");\n      expect(windowElement().style.width).toBe(\"224px\");\n    });\n\n    it(\"stops polling while collapsed\", async () => {\n      const api = anApi();\n      render({ api, floating: true, defaultCollapsed: true });\n      await wait(5000);\n\n      expect(api.screenshot).not.toHaveBeenCalled();\n      expect(query(\"button_open-app-Bitcoin\")).toBeNull();\n\n      act(() => query(\"button_toggle-device-screen\")!.click());\n      await wait();\n\n      expect(api.screenshot).toHaveBeenCalled();\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n    });\n\n    it(\"is dragged by its header\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n\n      pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n      pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n      pointer(header(), \"pointerup\");\n      pointer(header(), \"pointermove\", { clientX: 500, clientY: 500 });\n\n      expect(windowElement().style.left).toBe(\"100px\");\n      expect(windowElement().style.top).toBe(\"50px\");\n    });\n\n    describe(\"when the viewport shrinks\", () => {\n      const viewport = { width: window.innerWidth, height: window.innerHeight };\n      const resizeViewport = (width: number, height: number) =>\n        act(() => {\n          Object.assign(window, { innerWidth: width, innerHeight: height });\n          window.dispatchEvent(new Event(\"resize\"));\n        });\n\n      afterEach(() => {\n        Object.assign(window, {\n          innerWidth: viewport.width,\n          innerHeight: viewport.height,\n        });\n      });\n\n      it(\"pulls a dragged window back on screen\", async () => {\n        render({ api: anApi(), floating: true });\n        await wait();\n        windowElement().getBoundingClientRect = () =>\n          ({ left: 0, top: 0, width: 224, height: 300 }) as DOMRect;\n        pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n        pointer(header(), \"pointermove\", { clientX: 610, clientY: 410 });\n        pointer(header(), \"pointerup\");\n        expect(windowElement().style.left).toBe(\"600px\");\n\n        resizeViewport(500, 500);\n\n        expect(windowElement().style.left).toBe(\"276px\");\n        expect(windowElement().style.top).toBe(\"200px\");\n      });\n\n      it(\"leaves a window that was never moved in its corner\", async () => {\n        render({ api: anApi(), floating: true });\n        await wait();\n\n        resizeViewport(500, 500);\n\n        expect(windowElement().style.left).toBe(\"\");\n        expect(windowElement().style.right).toBe(\"16px\");\n      });\n    });\n\n    it(\"is not dragged from its button or with another mouse button\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n\n      pointer(query(\"button_toggle-device-screen\")!, \"pointerdown\");\n      pointer(header(), \"pointerdown\", { button: 2 });\n      pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n\n      expect(windowElement().style.left).toBe(\"\");\n    });\n\n    it(\"is resized from its edge, down to a minimum width\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n      windowElement().getBoundingClientRect = () =>\n        ({ left: 100, top: 80, width: 224, height: 300 }) as DOMRect;\n      const handle = query(\"handle_resize-device-screen\")!;\n\n      pointer(handle, \"pointerdown\", { clientX: 324 });\n      pointer(handle, \"pointermove\", { clientX: 424 });\n      expect(windowElement().style.width).toBe(\"324px\");\n      expect(windowElement().style.left).toBe(\"100px\");\n\n      pointer(handle, \"pointermove\", { clientX: 0 });\n      pointer(handle, \"pointerup\");\n      pointer(handle, \"pointermove\", { clientX: 600 });\n      expect(windowElement().style.width).toBe(\"200px\");\n    });\n  });\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\nimport { type ScreenApi } from \"@ledgerhq/device-mockserver-react-core\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nconst DEVICE = {\n  id: \"device-1\",\n  device_type: \"stax\",\n  apps: [{ name: \"Bitcoin\", version: \"2.5.0\" }],\n} as unknown as Device;\n\nconst anApi = (overrides: Partial<ScreenApi> = {}): ScreenApi => ({\n  screenshot: vi.fn(() => Promise.resolve(null)),\n  idle: vi.fn(() =>\n    Promise.resolve({ kind: \"os-info\" as const, device: DEVICE }),\n  ),\n  pressButton: vi.fn(() => Promise.resolve()),\n  touch: vi.fn(() => Promise.resolve()),\n  openApp: vi.fn(() => Promise.resolve()),\n  ...overrides,\n});\n\ndescribe(\"DeviceScreen\", () => {\n  let container: HTMLDivElement;\n  let root: Root;\n\n  const query = (testId: string) =>\n    container.querySelector<HTMLElement>(`[data-testid=\"${testId}\"]`);\n  const render = (props: Partial<DeviceScreenProps> & { api: ScreenApi }) =>\n    act(() => root.render(<DeviceScreen deviceType=\"stax\" {...props} />));\n  const wait = (ms = 0) => act(() => vi.advanceTimersByTimeAsync(ms));\n  const pointer = (target: Element, type: string, init: MouseEventInit = {}) =>\n    act(() => {\n      target.dispatchEvent(\n        new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n      );\n    });\n\n  beforeEach(() => {\n    vi.useFakeTimers();\n    URL.createObjectURL = vi.fn(() => \"blob:frame\");\n    URL.revokeObjectURL = vi.fn();\n    HTMLElement.prototype.setPointerCapture = vi.fn();\n    HTMLElement.prototype.releasePointerCapture = vi.fn();\n    container = document.createElement(\"div\");\n    document.body.append(container);\n    root = createRoot(container);\n  });\n\n  afterEach(() => {\n    act(() => root.unmount());\n    container.remove();\n    vi.useRealTimers();\n  });\n\n  describe(\"inline\", () => {\n    it(\"shows a placeholder until the screen answers\", () => {\n      render({ api: anApi({ screenshot: () => new Promise(() => {}) }) });\n\n      expect(query(\"placeholder_device-screen-loading\")).not.toBeNull();\n    });\n\n    it(\"shows the live screen of a running app\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n      });\n      await wait();\n\n      expect(query(\"image_device-screen\")?.getAttribute(\"src\")).toBe(\n        \"blob:frame\",\n      );\n    });\n\n    it(\"shows the installed apps while no app runs\", async () => {\n      render({ api: anApi() });\n      await wait();\n\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n    });\n\n    it(\"says why a device without an emulator has no screen\", async () => {\n      render({ api: anApi(), deviceType: \"nanoS\" });\n      await wait();\n\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n      expect(container.textContent).toContain(\n        \"Speculos has no emulator for the Nano S\",\n      );\n    });\n\n    it(\"says nothing about emulators for a device that has one\", async () => {\n      render({ api: anApi() });\n      await wait();\n\n      expect(container.textContent).not.toContain(\"has no emulator\");\n    });\n\n    it(\"says there is no screen when the api has nothing to show instead\", async () => {\n      render({ api: anApi({ idle: undefined }) });\n      await wait();\n\n      expect(container.textContent).toContain(\"No screen to capture\");\n    });\n\n    it(\"shows why the screen is unavailable\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.reject(new Error(\"offline\")) }),\n      });\n      await wait();\n\n      expect(container.textContent).toContain(\"Screen unavailable\");\n      expect(container.textContent).toContain(\"offline\");\n    });\n\n    it(\"keeps the last frame through a few failures while live\", async () => {\n      const screenshot = vi\n        .fn<() => Promise<Blob | null>>()\n        .mockResolvedValueOnce(new Blob([\"png\"]))\n        .mockRejectedValue(new Error(\"app quitting\"));\n      const failures = () => screenshot.mock.calls.length - 1;\n      render({ api: anApi({ screenshot }) });\n      await wait();\n\n      while (failures() < 3) await wait(500);\n      expect(query(\"image_device-screen\")).not.toBeNull();\n\n      while (failures() < 4) await wait(500);\n      expect(query(\"image_device-screen\")).toBeNull();\n      expect(container.textContent).toContain(\"app quitting\");\n    });\n\n    it(\"drives a Nano with its buttons and refreshes after\", async () => {\n      const api = anApi({\n        screenshot: vi.fn(() => Promise.resolve(new Blob([\"png\"]))),\n      });\n      render({ api, deviceType: \"nanoX\" });\n      await wait();\n\n      pointer(query(\"button_device-screen-left\")!, \"pointerdown\");\n      pointer(query(\"button_device-screen-left\")!, \"pointerup\");\n      await wait();\n\n      expect(api.pressButton).toHaveBeenCalledWith(\"left\", \"press-and-release\");\n      expect(api.screenshot).toHaveBeenCalledTimes(2);\n    });\n\n    it(\"drives a touch device by its screen, without buttons\", async () => {\n      render({\n        api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n      });\n      await wait();\n\n      expect(query(\"image_device-screen\")).not.toBeNull();\n      expect(query(\"button_device-screen-left\")).toBeNull();\n    });\n  });\n\n  describe(\"floating\", () => {\n    const windowElement = () => query(\"container_device-screen\")!;\n    const header = () => windowElement().firstElementChild!;\n\n    it(\"titles the window with the model and firmware\", async () => {\n      render({ api: anApi(), floating: true, firmwareVersion: \"1.10.1\" });\n      await wait();\n\n      expect(windowElement().textContent).toContain(\"Stax - 1.10.1\");\n      expect(windowElement().style.width).toBe(\"224px\");\n    });\n\n    it(\"stops polling while collapsed\", async () => {\n      const api = anApi();\n      render({ api, floating: true, defaultCollapsed: true });\n      await wait(5000);\n\n      expect(api.screenshot).not.toHaveBeenCalled();\n      expect(query(\"button_open-app-Bitcoin\")).toBeNull();\n\n      act(() => query(\"button_toggle-device-screen\")!.click());\n      await wait();\n\n      expect(api.screenshot).toHaveBeenCalled();\n      expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n    });\n\n    it(\"is dragged by its header\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n\n      pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n      pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n      pointer(header(), \"pointerup\");\n      pointer(header(), \"pointermove\", { clientX: 500, clientY: 500 });\n\n      expect(windowElement().style.left).toBe(\"100px\");\n      expect(windowElement().style.top).toBe(\"50px\");\n    });\n\n    describe(\"when the viewport shrinks\", () => {\n      const viewport = { width: window.innerWidth, height: window.innerHeight };\n      const resizeViewport = (width: number, height: number) =>\n        act(() => {\n          Object.assign(window, { innerWidth: width, innerHeight: height });\n          window.dispatchEvent(new Event(\"resize\"));\n        });\n\n      afterEach(() => {\n        Object.assign(window, {\n          innerWidth: viewport.width,\n          innerHeight: viewport.height,\n        });\n      });\n\n      it(\"pulls a dragged window back on screen\", async () => {\n        render({ api: anApi(), floating: true });\n        await wait();\n        windowElement().getBoundingClientRect = () =>\n          ({ left: 0, top: 0, width: 224, height: 300 }) as DOMRect;\n        pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n        pointer(header(), \"pointermove\", { clientX: 610, clientY: 410 });\n        pointer(header(), \"pointerup\");\n        expect(windowElement().style.left).toBe(\"600px\");\n\n        resizeViewport(500, 500);\n\n        expect(windowElement().style.left).toBe(\"276px\");\n        expect(windowElement().style.top).toBe(\"200px\");\n      });\n\n      it(\"leaves a window that was never moved in its corner\", async () => {\n        render({ api: anApi(), floating: true });\n        await wait();\n\n        resizeViewport(500, 500);\n\n        expect(windowElement().style.left).toBe(\"\");\n        expect(windowElement().style.right).toBe(\"16px\");\n      });\n    });\n\n    it(\"is not dragged from its button or with another mouse button\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n\n      pointer(query(\"button_toggle-device-screen\")!, \"pointerdown\");\n      pointer(header(), \"pointerdown\", { button: 2 });\n      pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n\n      expect(windowElement().style.left).toBe(\"\");\n    });\n\n    it(\"is resized from its edge, down to a minimum width\", async () => {\n      render({ api: anApi(), floating: true });\n      await wait();\n      windowElement().getBoundingClientRect = () =>\n        ({ left: 100, top: 80, width: 224, height: 300 }) as DOMRect;\n      const handle = query(\"handle_resize-device-screen\")!;\n\n      pointer(handle, \"pointerdown\", { clientX: 324 });\n      pointer(handle, \"pointermove\", { clientX: 424 });\n      expect(windowElement().style.width).toBe(\"324px\");\n      expect(windowElement().style.left).toBe(\"100px\");\n\n      pointer(handle, \"pointermove\", { clientX: 0 });\n      pointer(handle, \"pointerup\");\n      pointer(handle, \"pointermove\", { clientX: 600 });\n      expect(windowElement().style.width).toBe(\"200px\");\n    });\n  });\n});\n"],
+  "mappings": "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",
   "names": ["React", "act", "createRoot", "DeviceScreen", "DEVICE", "anApi", "overrides", "container", "root", "query", "testId", "render", "props", "wait", "ms", "pointer", "target", "type", "init", "screenshot", "failures", "api", "windowElement", "header", "viewport", "resizeViewport", "width", "height", "handle"]
 }

package/lib/esm/src/DeviceScreenButtons.js

@@ -1,2 +1,2 @@
-import d,{useCallback as i,useEffect as f,useRef as a}from"react";const y=[{button:"left",label:"Left"},{button:"both",label:"Both"},{button:"right",label:"Right"}],b=r=>r===" "||r==="Enter",m=150,v=({onPress:r})=>{const n=a(null),s=a(null),u=a(r);u.current=r;const c=i(()=>{s.current&&(clearTimeout(s.current),s.current=null)},[]),p=i(e=>{if(n.current)return;const o={button:e,pressed:!1};n.current=o,s.current=setTimeout(()=>{o.pressed=!0,u.current(e,"press")},m)},[]),l=i(()=>{const e=n.current;e&&(n.current=null,c(),u.current(e.button,e.pressed?"release":"press-and-release"))},[c]);return f(()=>()=>{const e=n.current;n.current=null,c(),e?.pressed&&u.current(e.button,"release")},[c]),d.createElement("div",{className:"flex gap-8"},y.map(({button:e,label:o})=>d.createElement("button",{key:e,type:"button","aria-label":`${o} button`,onPointerDown:t=>{t.button===0&&(t.currentTarget.setPointerCapture(t.pointerId),p(e))},onPointerUp:l,onPointerCancel:l,onKeyDown:t=>{b(t.key)&&(t.preventDefault(),p(e))},onKeyUp:t=>b(t.key)&&l(),className:"border-muted body-3 text-base bg-muted hover:bg-muted-pressed active:bg-active flex-1 rounded-md border py-8 select-none",style:{touchAction:"none"},"data-testid":`button_device-screen-${e}`},o)))};export{v as DeviceScreenButtons};
+import s from"react";import{useButtonHold as c}from"@ledgerhq/device-mockserver-react-core";const a=[{button:"left",label:"Left"},{button:"both",label:"Both"},{button:"right",label:"Right"}],u=e=>e===" "||e==="Enter",b=({onPress:e})=>{const{hold:r,release:n}=c(e);return s.createElement("div",{className:"flex gap-8"},a.map(({button:o,label:i})=>s.createElement("button",{key:o,type:"button","aria-label":`${i} button`,onPointerDown:t=>{t.button===0&&(t.currentTarget.setPointerCapture(t.pointerId),r(o))},onPointerUp:n,onPointerCancel:n,onKeyDown:t=>{u(t.key)&&(t.preventDefault(),r(o))},onKeyUp:t=>u(t.key)&&n(),className:"border-muted body-3 text-base bg-muted hover:bg-muted-pressed active:bg-active flex-1 rounded-md border py-8 select-none",style:{touchAction:"none"},"data-testid":`button_device-screen-${o}`},i)))};export{b as DeviceScreenButtons};
 //# sourceMappingURL=DeviceScreenButtons.js.map

package/lib/esm/src/DeviceScreenButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceScreenButtons.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef } from \"react\";\nimport {\n  type SpeculosAction,\n  type SpeculosButton,\n} from \"@ledgerhq/device-mockserver-client\";\n\nconst BUTTONS: { button: SpeculosButton; label: string }[] = [\n  { button: \"left\", label: \"Left\" },\n  { button: \"both\", label: \"Both\" },\n  { button: \"right\", label: \"Right\" },\n];\n\nconst isActivationKey = (key: string) => key === \" \" || key === \"Enter\";\n\n/**\n * How long the pointer stays down before the interaction counts as a hold.\n * A click sent as a separate press and release is two requests the device can\n * receive in either order, and a chord of both buttons is only seen when they\n * are down together as its event loop samples them, so a click that beats the\n * loop is dropped. One press-and-release leaves the timing to the emulator.\n */\nconst HOLD_THRESHOLD_MS = 150;\n\ninterface Held {\n  button: SpeculosButton;\n  pressed: boolean;\n}\n\ntype DeviceScreenButtonsProps = {\n  onPress: (button: SpeculosButton, action: SpeculosAction) => void;\n};\n\nexport const DeviceScreenButtons: React.FC<DeviceScreenButtonsProps> = ({\n  onPress,\n}) => {\n  const held = useRef<Held | null>(null);\n  const holdTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pressRef = useRef(onPress);\n  pressRef.current = onPress;\n\n  const clearHoldTimer = useCallback(() => {\n    if (!holdTimer.current) return;\n    clearTimeout(holdTimer.current);\n    holdTimer.current = null;\n  }, []);\n\n  const hold = useCallback((button: SpeculosButton) => {\n    if (held.current) return;\n    const entry: Held = { button, pressed: false };\n    held.current = entry;\n    holdTimer.current = setTimeout(() => {\n      entry.pressed = true;\n      pressRef.current(button, \"press\");\n    }, HOLD_THRESHOLD_MS);\n  }, []);\n\n  const release = useCallback(() => {\n    const entry = held.current;\n    if (!entry) return;\n    held.current = null;\n    clearHoldTimer();\n    pressRef.current(\n      entry.button,\n      entry.pressed ? \"release\" : \"press-and-release\",\n    );\n  }, [clearHoldTimer]);\n\n  useEffect(\n    () => () => {\n      const entry = held.current;\n      held.current = null;\n      clearHoldTimer();\n      if (entry?.pressed) pressRef.current(entry.button, \"release\");\n    },\n    [clearHoldTimer],\n  );\n\n  // Plain buttons: Lumen's Button does not report press and release apart,\n  // and a hold needs both.\n  return (\n    <div className=\"flex gap-8\">\n      {BUTTONS.map(({ button, label }) => (\n        <button\n          key={button}\n          type=\"button\"\n          aria-label={`${label} button`}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return;\n            // Capture so the release still arrives if the pointer wanders off.\n            event.currentTarget.setPointerCapture(event.pointerId);\n            hold(button);\n          }}\n          onPointerUp={release}\n          onPointerCancel={release}\n          // Keyboard activation fires no pointer events.\n          onKeyDown={(event) => {\n            if (!isActivationKey(event.key)) return;\n            event.preventDefault();\n            hold(button);\n          }}\n          onKeyUp={(event) => isActivationKey(event.key) && release()}\n          className=\"border-muted body-3 text-base bg-muted hover:bg-muted-pressed active:bg-active flex-1 rounded-md border py-8 select-none\"\n          style={{ touchAction: \"none\" }}\n          data-testid={`button_device-screen-${button}`}\n        >\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],
-  "mappings": "AAAA,OAAOA,GAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,MAAc,QAMtD,MAAMC,EAAuD,CAC3D,CAAE,OAAQ,OAAQ,MAAO,MAAO,EAChC,CAAE,OAAQ,OAAQ,MAAO,MAAO,EAChC,CAAE,OAAQ,QAAS,MAAO,OAAQ,CACpC,EAEMC,EAAmBC,GAAgBA,IAAQ,KAAOA,IAAQ,QAS1DC,EAAoB,IAWbC,EAA0D,CAAC,CACtE,QAAAC,CACF,IAAM,CACJ,MAAMC,EAAOP,EAAoB,IAAI,EAC/BQ,EAAYR,EAA6C,IAAI,EAC7DS,EAAWT,EAAOM,CAAO,EAC/BG,EAAS,QAAUH,EAEnB,MAAMI,EAAiBZ,EAAY,IAAM,CAClCU,EAAU,UACf,aAAaA,EAAU,OAAO,EAC9BA,EAAU,QAAU,KACtB,EAAG,CAAC,CAAC,EAECG,EAAOb,EAAac,GAA2B,CACnD,GAAIL,EAAK,QAAS,OAClB,MAAMM,EAAc,CAAE,OAAAD,EAAQ,QAAS,EAAM,EAC7CL,EAAK,QAAUM,EACfL,EAAU,QAAU,WAAW,IAAM,CACnCK,EAAM,QAAU,GAChBJ,EAAS,QAAQG,EAAQ,OAAO,CAClC,EAAGR,CAAiB,CACtB,EAAG,CAAC,CAAC,EAECU,EAAUhB,EAAY,IAAM,CAChC,MAAMe,EAAQN,EAAK,QACdM,IACLN,EAAK,QAAU,KACfG,EAAe,EACfD,EAAS,QACPI,EAAM,OACNA,EAAM,QAAU,UAAY,mBAC9B,EACF,EAAG,CAACH,CAAc,CAAC,EAEnB,OAAAX,EACE,IAAM,IAAM,CACV,MAAMc,EAAQN,EAAK,QACnBA,EAAK,QAAU,KACfG,EAAe,EACXG,GAAO,SAASJ,EAAS,QAAQI,EAAM,OAAQ,SAAS,CAC9D,EACA,CAACH,CAAc,CACjB,EAKEb,EAAA,cAAC,OAAI,UAAU,cACZI,EAAQ,IAAI,CAAC,CAAE,OAAAW,EAAQ,MAAAG,CAAM,IAC5BlB,EAAA,cAAC,UACC,IAAKe,EACL,KAAK,SACL,aAAY,GAAGG,CAAK,UACpB,cAAgBC,GAAU,CACpBA,EAAM,SAAW,IAErBA,EAAM,cAAc,kBAAkBA,EAAM,SAAS,EACrDL,EAAKC,CAAM,EACb,EACA,YAAaE,EACb,gBAAiBA,EAEjB,UAAYE,GAAU,CACfd,EAAgBc,EAAM,GAAG,IAC9BA,EAAM,eAAe,EACrBL,EAAKC,CAAM,EACb,EACA,QAAUI,GAAUd,EAAgBc,EAAM,GAAG,GAAKF,EAAQ,EAC1D,UAAU,2HACV,MAAO,CAAE,YAAa,MAAO,EAC7B,cAAa,wBAAwBF,CAAM,IAE1CG,CACH,CACD,CACH,CAEJ",
-  "names": ["React", "useCallback", "useEffect", "useRef", "BUTTONS", "isActivationKey", "key", "HOLD_THRESHOLD_MS", "DeviceScreenButtons", "onPress", "held", "holdTimer", "pressRef", "clearHoldTimer", "hold", "button", "entry", "release", "label", "event"]
+  "sourcesContent": ["import React from \"react\";\nimport {\n  type SpeculosAction,\n  type SpeculosButton,\n} from \"@ledgerhq/device-mockserver-client\";\nimport { useButtonHold } from \"@ledgerhq/device-mockserver-react-core\";\n\nconst BUTTONS: { button: SpeculosButton; label: string }[] = [\n  { button: \"left\", label: \"Left\" },\n  { button: \"both\", label: \"Both\" },\n  { button: \"right\", label: \"Right\" },\n];\n\nconst isActivationKey = (key: string) => key === \" \" || key === \"Enter\";\n\ntype DeviceScreenButtonsProps = {\n  onPress: (button: SpeculosButton, action: SpeculosAction) => void;\n};\n\nexport const DeviceScreenButtons: React.FC<DeviceScreenButtonsProps> = ({\n  onPress,\n}) => {\n  const { hold, release } = useButtonHold(onPress);\n\n  // Plain buttons: Lumen's Button does not report press and release apart,\n  // and a hold needs both.\n  return (\n    <div className=\"flex gap-8\">\n      {BUTTONS.map(({ button, label }) => (\n        <button\n          key={button}\n          type=\"button\"\n          aria-label={`${label} button`}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return;\n            // Capture so the release still arrives if the pointer wanders off.\n            event.currentTarget.setPointerCapture(event.pointerId);\n            hold(button);\n          }}\n          onPointerUp={release}\n          onPointerCancel={release}\n          // Keyboard activation fires no pointer events.\n          onKeyDown={(event) => {\n            if (!isActivationKey(event.key)) return;\n            event.preventDefault();\n            hold(button);\n          }}\n          onKeyUp={(event) => isActivationKey(event.key) && release()}\n          className=\"border-muted body-3 text-base bg-muted hover:bg-muted-pressed active:bg-active flex-1 rounded-md border py-8 select-none\"\n          style={{ touchAction: \"none\" }}\n          data-testid={`button_device-screen-${button}`}\n        >\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA,OAAOA,MAAW,QAKlB,OAAS,iBAAAC,MAAqB,yCAE9B,MAAMC,EAAuD,CAC3D,CAAE,OAAQ,OAAQ,MAAO,MAAO,EAChC,CAAE,OAAQ,OAAQ,MAAO,MAAO,EAChC,CAAE,OAAQ,QAAS,MAAO,OAAQ,CACpC,EAEMC,EAAmBC,GAAgBA,IAAQ,KAAOA,IAAQ,QAMnDC,EAA0D,CAAC,CACtE,QAAAC,CACF,IAAM,CACJ,KAAM,CAAE,KAAAC,EAAM,QAAAC,CAAQ,EAAIP,EAAcK,CAAO,EAI/C,OACEN,EAAA,cAAC,OAAI,UAAU,cACZE,EAAQ,IAAI,CAAC,CAAE,OAAAO,EAAQ,MAAAC,CAAM,IAC5BV,EAAA,cAAC,UACC,IAAKS,EACL,KAAK,SACL,aAAY,GAAGC,CAAK,UACpB,cAAgBC,GAAU,CACpBA,EAAM,SAAW,IAErBA,EAAM,cAAc,kBAAkBA,EAAM,SAAS,EACrDJ,EAAKE,CAAM,EACb,EACA,YAAaD,EACb,gBAAiBA,EAEjB,UAAYG,GAAU,CACfR,EAAgBQ,EAAM,GAAG,IAC9BA,EAAM,eAAe,EACrBJ,EAAKE,CAAM,EACb,EACA,QAAUE,GAAUR,EAAgBQ,EAAM,GAAG,GAAKH,EAAQ,EAC1D,UAAU,2HACV,MAAO,CAAE,YAAa,MAAO,EAC7B,cAAa,wBAAwBC,CAAM,IAE1CC,CACH,CACD,CACH,CAEJ",
+  "names": ["React", "useButtonHold", "BUTTONS", "isActivationKey", "key", "DeviceScreenButtons", "onPress", "hold", "release", "button", "label", "event"]
 }

package/lib/esm/src/DeviceScreenImage.js

@@ -1,2 +1,2 @@
-import i,{useCallback as y,useEffect as g,useRef as c,useState as v}from"react";import{ScreenFrame as E}from"./ScreenFrame";const D=({src:l,onTouch:n})=>{const a=c(null),[p,u]=v(!1),r=c(null),s=c(n);s.current=n,g(()=>u(!1),[l]);const f=t=>{const e=a.current;if(!e?.naturalWidth||!e.naturalHeight)return null;const o=e.getBoundingClientRect();if(!o.width||!o.height)return null;const d=(P,x)=>Math.min(Math.max(Math.round(P),0),x-1);return{x:d((t.clientX-o.left)/o.width*e.naturalWidth,e.naturalWidth),y:d((t.clientY-o.top)/o.height*e.naturalHeight,e.naturalHeight)}},h=t=>{if(!n||r.current||t.button!==0)return;const e=f(t);e&&(a.current?.setPointerCapture(t.pointerId),r.current=e,n(e.x,e.y,"press"))},m=t=>{const e=r.current;!n||!e||(r.current=null,a.current?.releasePointerCapture(t.pointerId),n(e.x,e.y,"release"))};g(()=>()=>{const t=r.current;t&&(r.current=null,s.current?.(t.x,t.y,"release"))},[]);const b=y(()=>u(!0),[]);return p?i.createElement("p",{className:"body-4 text-error text-center","data-testid":"text_device-screen-undecodable"},"Screenshot could not be decoded"):i.createElement(E,null,i.createElement("img",{ref:a,src:l,alt:"Device screen",draggable:!1,onError:b,onPointerDown:h,onPointerUp:m,onPointerCancel:m,className:`block w-full bg-black select-none ${n?"cursor-pointer":""}`,style:{imageRendering:"pixelated",touchAction:"none"},"data-testid":"image_device-screen"}))};export{D as DeviceScreenImage};
+import c,{useCallback as p,useEffect as f,useRef as h,useState as b}from"react";import{toScreenPoint as P,useTouchHold as S}from"@ledgerhq/device-mockserver-react-core";import{ScreenFrame as v}from"./ScreenFrame";const D=({src:a,onTouch:n})=>{const r=h(null),[m,i]=b(!1),s=S(n);f(()=>i(!1),[a]);const u=e=>{const t=r.current;if(!n||!t||e.button!==0)return;const o=t.getBoundingClientRect(),d=P(e.clientX-o.left,e.clientY-o.top,o,{width:t.naturalWidth,height:t.naturalHeight});d&&s.hold(d)&&t.setPointerCapture(e.pointerId)},l=e=>{s.release()&&r.current?.releasePointerCapture(e.pointerId)},g=p(()=>i(!0),[]);return m?c.createElement("p",{className:"body-4 text-error text-center","data-testid":"text_device-screen-undecodable"},"Screenshot could not be decoded"):c.createElement(v,null,c.createElement("img",{ref:r,src:a,alt:"Device screen",draggable:!1,onError:g,onPointerDown:u,onPointerUp:l,onPointerCancel:l,className:`block w-full bg-black select-none ${n?"cursor-pointer":""}`,style:{imageRendering:"pixelated",touchAction:"none"},"data-testid":"image_device-screen"}))};export{D as DeviceScreenImage};
 //# sourceMappingURL=DeviceScreenImage.js.map

package/lib/esm/src/DeviceScreenImage.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceScreenImage.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { type SpeculosAction } from \"@ledgerhq/device-mockserver-client\";\n\nimport { ScreenFrame } from \"./ScreenFrame\";\n\ninterface Point {\n  readonly x: number;\n  readonly y: number;\n}\n\ntype DeviceScreenImageProps = {\n  src: string;\n  /** Omitted for a button-driven device. */\n  onTouch?: (x: number, y: number, action: SpeculosAction) => void;\n};\n\nexport const DeviceScreenImage: React.FC<DeviceScreenImageProps> = ({\n  src,\n  onTouch,\n}) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [undecodable, setUndecodable] = useState(false);\n  /** Where the finger went down, so the release lands on the same spot. */\n  const held = useRef<Point | null>(null);\n  const touchRef = useRef(onTouch);\n  touchRef.current = onTouch;\n\n  useEffect(() => setUndecodable(false), [src]);\n\n  const toDevicePoint = (\n    event: React.PointerEvent<HTMLImageElement>,\n  ): Point | null => {\n    const image = imageRef.current;\n    if (!image?.naturalWidth || !image.naturalHeight) return null;\n    const rect = image.getBoundingClientRect();\n    if (!rect.width || !rect.height) return null;\n    // The far edge maps to the pixel count itself, one past the last pixel.\n    const clamp = (value: number, size: number) =>\n      Math.min(Math.max(Math.round(value), 0), size - 1);\n    return {\n      x: clamp(\n        ((event.clientX - rect.left) / rect.width) * image.naturalWidth,\n        image.naturalWidth,\n      ),\n      y: clamp(\n        ((event.clientY - rect.top) / rect.height) * image.naturalHeight,\n        image.naturalHeight,\n      ),\n    };\n  };\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLImageElement>) => {\n    if (!onTouch || held.current || event.button !== 0) return;\n    const point = toDevicePoint(event);\n    if (!point) return;\n    // Capture so the release still arrives if the pointer wanders off the\n    // image mid-hold; without it the device would stay pressed forever.\n    imageRef.current?.setPointerCapture(event.pointerId);\n    held.current = point;\n    onTouch(point.x, point.y, \"press\");\n  };\n\n  const handlePointerUp = (event: React.PointerEvent<HTMLImageElement>) => {\n    const point = held.current;\n    if (!onTouch || !point) return;\n    held.current = null;\n    imageRef.current?.releasePointerCapture(event.pointerId);\n    onTouch(point.x, point.y, \"release\");\n  };\n\n  useEffect(\n    () => () => {\n      const point = held.current;\n      if (!point) return;\n      held.current = null;\n      touchRef.current?.(point.x, point.y, \"release\");\n    },\n    [],\n  );\n\n  const handleError = useCallback(() => setUndecodable(true), []);\n\n  if (undecodable) {\n    return (\n      <p\n        className=\"body-4 text-error text-center\"\n        data-testid=\"text_device-screen-undecodable\"\n      >\n        Screenshot could not be decoded\n      </p>\n    );\n  }\n\n  return (\n    <ScreenFrame>\n      <img\n        ref={imageRef}\n        src={src}\n        alt=\"Device screen\"\n        draggable={false}\n        onError={handleError}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n        className={`block w-full bg-black select-none ${\n          onTouch ? \"cursor-pointer\" : \"\"\n        }`}\n        // Device screens are tiny; smoothing them turns text to mush, and a\n        // hold must not start a native image drag.\n        style={{ imageRendering: \"pixelated\", touchAction: \"none\" }}\n        data-testid=\"image_device-screen\"\n      />\n    </ScreenFrame>\n  );\n};\n"],
-  "mappings": "AAAA,OAAOA,GAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAGhE,OAAS,eAAAC,MAAmB,gBAarB,MAAMC,EAAsD,CAAC,CAClE,IAAAC,EACA,QAAAC,CACF,IAAM,CACJ,MAAMC,EAAWN,EAAyB,IAAI,EACxC,CAACO,EAAaC,CAAc,EAAIP,EAAS,EAAK,EAE9CQ,EAAOT,EAAqB,IAAI,EAChCU,EAAWV,EAAOK,CAAO,EAC/BK,EAAS,QAAUL,EAEnBN,EAAU,IAAMS,EAAe,EAAK,EAAG,CAACJ,CAAG,CAAC,EAE5C,MAAMO,EACJC,GACiB,CACjB,MAAMC,EAAQP,EAAS,QACvB,GAAI,CAACO,GAAO,cAAgB,CAACA,EAAM,cAAe,OAAO,KACzD,MAAMC,EAAOD,EAAM,sBAAsB,EACzC,GAAI,CAACC,EAAK,OAAS,CAACA,EAAK,OAAQ,OAAO,KAExC,MAAMC,EAAQ,CAACC,EAAeC,IAC5B,KAAK,IAAI,KAAK,IAAI,KAAK,MAAMD,CAAK,EAAG,CAAC,EAAGC,EAAO,CAAC,EACnD,MAAO,CACL,EAAGF,GACCH,EAAM,QAAUE,EAAK,MAAQA,EAAK,MAASD,EAAM,aACnDA,EAAM,YACR,EACA,EAAGE,GACCH,EAAM,QAAUE,EAAK,KAAOA,EAAK,OAAUD,EAAM,cACnDA,EAAM,aACR,CACF,CACF,EAEMK,EAAqBN,GAAgD,CACzE,GAAI,CAACP,GAAWI,EAAK,SAAWG,EAAM,SAAW,EAAG,OACpD,MAAMO,EAAQR,EAAcC,CAAK,EAC5BO,IAGLb,EAAS,SAAS,kBAAkBM,EAAM,SAAS,EACnDH,EAAK,QAAUU,EACfd,EAAQc,EAAM,EAAGA,EAAM,EAAG,OAAO,EACnC,EAEMC,EAAmBR,GAAgD,CACvE,MAAMO,EAAQV,EAAK,QACf,CAACJ,GAAW,CAACc,IACjBV,EAAK,QAAU,KACfH,EAAS,SAAS,sBAAsBM,EAAM,SAAS,EACvDP,EAAQc,EAAM,EAAGA,EAAM,EAAG,SAAS,EACrC,EAEApB,EACE,IAAM,IAAM,CACV,MAAMoB,EAAQV,EAAK,QACdU,IACLV,EAAK,QAAU,KACfC,EAAS,UAAUS,EAAM,EAAGA,EAAM,EAAG,SAAS,EAChD,EACA,CAAC,CACH,EAEA,MAAME,EAAcvB,EAAY,IAAMU,EAAe,EAAI,EAAG,CAAC,CAAC,EAE9D,OAAID,EAEAV,EAAA,cAAC,KACC,UAAU,gCACV,cAAY,kCACb,iCAED,EAKFA,EAAA,cAACK,EAAA,KACCL,EAAA,cAAC,OACC,IAAKS,EACL,IAAKF,EACL,IAAI,gBACJ,UAAW,GACX,QAASiB,EACT,cAAeH,EACf,YAAaE,EACb,gBAAiBA,EACjB,UAAW,qCACTf,EAAU,iBAAmB,EAC/B,GAGA,MAAO,CAAE,eAAgB,YAAa,YAAa,MAAO,EAC1D,cAAY,sBACd,CACF,CAEJ",
-  "names": ["React", "useCallback", "useEffect", "useRef", "useState", "ScreenFrame", "DeviceScreenImage", "src", "onTouch", "imageRef", "undecodable", "setUndecodable", "held", "touchRef", "toDevicePoint", "event", "image", "rect", "clamp", "value", "size", "handlePointerDown", "point", "handlePointerUp", "handleError"]
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { type SpeculosAction } from \"@ledgerhq/device-mockserver-client\";\nimport {\n  toScreenPoint,\n  useTouchHold,\n} from \"@ledgerhq/device-mockserver-react-core\";\n\nimport { ScreenFrame } from \"./ScreenFrame\";\n\ntype DeviceScreenImageProps = {\n  src: string;\n  /** Omitted for a button-driven device. */\n  onTouch?: (x: number, y: number, action: SpeculosAction) => void;\n};\n\nexport const DeviceScreenImage: React.FC<DeviceScreenImageProps> = ({\n  src,\n  onTouch,\n}) => {\n  const imageRef = useRef<HTMLImageElement>(null);\n  const [undecodable, setUndecodable] = useState(false);\n  const touch = useTouchHold(onTouch);\n\n  useEffect(() => setUndecodable(false), [src]);\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLImageElement>) => {\n    const image = imageRef.current;\n    if (!onTouch || !image || event.button !== 0) return;\n    const rect = image.getBoundingClientRect();\n    const point = toScreenPoint(\n      event.clientX - rect.left,\n      event.clientY - rect.top,\n      rect,\n      { width: image.naturalWidth, height: image.naturalHeight },\n    );\n    // Capture so the release still arrives if the pointer wanders off the\n    // image mid-hold; without it the device would stay pressed forever.\n    if (point && touch.hold(point)) {\n      image.setPointerCapture(event.pointerId);\n    }\n  };\n\n  const handlePointerUp = (event: React.PointerEvent<HTMLImageElement>) => {\n    if (touch.release()) {\n      imageRef.current?.releasePointerCapture(event.pointerId);\n    }\n  };\n\n  const handleError = useCallback(() => setUndecodable(true), []);\n\n  if (undecodable) {\n    return (\n      <p\n        className=\"body-4 text-error text-center\"\n        data-testid=\"text_device-screen-undecodable\"\n      >\n        Screenshot could not be decoded\n      </p>\n    );\n  }\n\n  return (\n    <ScreenFrame>\n      <img\n        ref={imageRef}\n        src={src}\n        alt=\"Device screen\"\n        draggable={false}\n        onError={handleError}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n        onPointerCancel={handlePointerUp}\n        className={`block w-full bg-black select-none ${\n          onTouch ? \"cursor-pointer\" : \"\"\n        }`}\n        // Device screens are tiny; smoothing them turns text to mush, and a\n        // hold must not start a native image drag.\n        style={{ imageRendering: \"pixelated\", touchAction: \"none\" }}\n        data-testid=\"image_device-screen\"\n      />\n    </ScreenFrame>\n  );\n};\n"],
+  "mappings": "AAAA,OAAOA,GAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAEhE,OACE,iBAAAC,EACA,gBAAAC,MACK,yCAEP,OAAS,eAAAC,MAAmB,gBAQrB,MAAMC,EAAsD,CAAC,CAClE,IAAAC,EACA,QAAAC,CACF,IAAM,CACJ,MAAMC,EAAWR,EAAyB,IAAI,EACxC,CAACS,EAAaC,CAAc,EAAIT,EAAS,EAAK,EAC9CU,EAAQR,EAAaI,CAAO,EAElCR,EAAU,IAAMW,EAAe,EAAK,EAAG,CAACJ,CAAG,CAAC,EAE5C,MAAMM,EAAqBC,GAAgD,CACzE,MAAMC,EAAQN,EAAS,QACvB,GAAI,CAACD,GAAW,CAACO,GAASD,EAAM,SAAW,EAAG,OAC9C,MAAME,EAAOD,EAAM,sBAAsB,EACnCE,EAAQd,EACZW,EAAM,QAAUE,EAAK,KACrBF,EAAM,QAAUE,EAAK,IACrBA,EACA,CAAE,MAAOD,EAAM,aAAc,OAAQA,EAAM,aAAc,CAC3D,EAGIE,GAASL,EAAM,KAAKK,CAAK,GAC3BF,EAAM,kBAAkBD,EAAM,SAAS,CAE3C,EAEMI,EAAmBJ,GAAgD,CACnEF,EAAM,QAAQ,GAChBH,EAAS,SAAS,sBAAsBK,EAAM,SAAS,CAE3D,EAEMK,EAAcpB,EAAY,IAAMY,EAAe,EAAI,EAAG,CAAC,CAAC,EAE9D,OAAID,EAEAZ,EAAA,cAAC,KACC,UAAU,gCACV,cAAY,kCACb,iCAED,EAKFA,EAAA,cAACO,EAAA,KACCP,EAAA,cAAC,OACC,IAAKW,EACL,IAAKF,EACL,IAAI,gBACJ,UAAW,GACX,QAASY,EACT,cAAeN,EACf,YAAaK,EACb,gBAAiBA,EACjB,UAAW,qCACTV,EAAU,iBAAmB,EAC/B,GAGA,MAAO,CAAE,eAAgB,YAAa,YAAa,MAAO,EAC1D,cAAY,sBACd,CACF,CAEJ",
+  "names": ["React", "useCallback", "useEffect", "useRef", "useState", "toScreenPoint", "useTouchHold", "ScreenFrame", "DeviceScreenImage", "src", "onTouch", "imageRef", "undecodable", "setUndecodable", "touch", "handlePointerDown", "event", "image", "rect", "point", "handlePointerUp", "handleError"]
 }

package/lib/esm/src/DeviceScreenImage.test.js

@@ -1,2 +1,2 @@
-import s,{act as r}from"react";import{createRoot as p}from"react-dom/client";import{DeviceScreenImage as u}from"./DeviceScreenImage";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});describe("DeviceScreenImage",()=>{let n,c;const e=vi.fn(),i=()=>n.querySelector('[data-testid="image_device-screen"]'),o=l=>r(()=>c.render(s.createElement(u,{src:"blob:1",onTouch:l}))),t=(l,d={})=>r(()=>{i().dispatchEvent(new MouseEvent(l,{bubbles:!0,button:0,...d}))}),a=()=>{Object.defineProperty(i(),"naturalWidth",{value:400}),Object.defineProperty(i(),"naturalHeight",{value:600}),i().getBoundingClientRect=()=>({left:0,top:0,width:200,height:300})};beforeEach(()=>{e.mockReset(),HTMLElement.prototype.setPointerCapture=vi.fn(),HTMLElement.prototype.releasePointerCapture=vi.fn(),n=document.createElement("div"),document.body.append(n),c=p(n)}),afterEach(()=>{r(()=>c.unmount()),n.remove()}),it("maps a touch to device pixels and releases it where it went down",()=>{o(e),a(),t("pointerdown",{clientX:50,clientY:150}),t("pointerup",{clientX:190,clientY:10}),expect(e.mock.calls).toEqual([[100,300,"press"],[100,300,"release"]])}),it("clamps a touch on the far edge to the last pixel",()=>{o(e),a(),t("pointerdown",{clientX:200,clientY:300}),expect(e).toHaveBeenCalledWith(399,599,"press")}),it("ignores touches before the image has a size",()=>{o(e),t("pointerdown",{clientX:10,clientY:10}),t("pointerup"),expect(e).not.toHaveBeenCalled()}),it("ignores touches on a button-driven device",()=>{o(),a(),t("pointerdown",{clientX:10,clientY:10}),expect(e).not.toHaveBeenCalled()}),it("releases a held touch when unmounted",()=>{o(e),a(),t("pointerdown",{clientX:50,clientY:150}),r(()=>c.render(s.createElement(s.Fragment,null))),expect(e).toHaveBeenLastCalledWith(100,300,"release")}),it("says so when the screenshot cannot be decoded",()=>{o(e),r(()=>{i().dispatchEvent(new Event("error"))}),expect(n.querySelector('[data-testid="text_device-screen-undecodable"]')).not.toBeNull()})});
+import s,{act as o}from"react";import{createRoot as u}from"react-dom/client";import{HOLD_THRESHOLD_MS as d}from"@ledgerhq/device-mockserver-react-core";import{DeviceScreenImage as m}from"./DeviceScreenImage";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});describe("DeviceScreenImage",()=>{let i,c;const e=vi.fn(),r=()=>i.querySelector('[data-testid="image_device-screen"]'),n=l=>o(()=>c.render(s.createElement(m,{src:"blob:1",onTouch:l}))),t=(l,p={})=>o(()=>{r().dispatchEvent(new MouseEvent(l,{bubbles:!0,button:0,...p}))}),a=()=>{Object.defineProperty(r(),"naturalWidth",{value:400}),Object.defineProperty(r(),"naturalHeight",{value:600}),r().getBoundingClientRect=()=>({left:0,top:0,width:200,height:300})};beforeEach(()=>{vi.useFakeTimers(),e.mockReset(),HTMLElement.prototype.setPointerCapture=vi.fn(),HTMLElement.prototype.releasePointerCapture=vi.fn(),i=document.createElement("div"),document.body.append(i),c=u(i)}),afterEach(()=>{o(()=>c.unmount()),i.remove(),vi.useRealTimers()}),it("maps a tap to device pixels",()=>{n(e),a(),t("pointerdown",{clientX:50,clientY:150}),t("pointerup",{clientX:190,clientY:10}),expect(e).toHaveBeenCalledExactlyOnceWith(100,300,"press-and-release")}),it("releases a hold where it went down",()=>{n(e),a(),t("pointerdown",{clientX:50,clientY:150}),o(()=>{vi.advanceTimersByTime(d)}),t("pointerup",{clientX:190,clientY:10}),expect(e.mock.calls).toEqual([[100,300,"press"],[100,300,"release"]])}),it("clamps a touch on the far edge to the last pixel",()=>{n(e),a(),t("pointerdown",{clientX:200,clientY:300}),t("pointerup"),expect(e).toHaveBeenCalledWith(399,599,"press-and-release")}),it("ignores touches before the image has a size",()=>{n(e),t("pointerdown",{clientX:10,clientY:10}),t("pointerup"),expect(e).not.toHaveBeenCalled()}),it("ignores touches on a button-driven device",()=>{n(),a(),t("pointerdown",{clientX:10,clientY:10}),expect(e).not.toHaveBeenCalled()}),it("releases a held touch when unmounted",()=>{n(e),a(),t("pointerdown",{clientX:50,clientY:150}),o(()=>{vi.advanceTimersByTime(d)}),o(()=>c.render(s.createElement(s.Fragment,null))),expect(e).toHaveBeenLastCalledWith(100,300,"release")}),it("says so when the screenshot cannot be decoded",()=>{n(e),o(()=>{r().dispatchEvent(new Event("error"))}),expect(i.querySelector('[data-testid="text_device-screen-undecodable"]')).not.toBeNull()})});
 //# sourceMappingURL=DeviceScreenImage.test.js.map

package/lib/esm/src/DeviceScreenImage.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/DeviceScreenImage.test.tsx"],
-  "sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\ndescribe(\"DeviceScreenImage\", () => {\n  let container: HTMLDivElement;\n  let root: Root;\n  const onTouch = vi.fn();\n\n  const image = () =>\n    container.querySelector<HTMLImageElement>(\n      '[data-testid=\"image_device-screen\"]',\n    )!;\n  const render = (touch?: typeof onTouch) =>\n    act(() => root.render(<DeviceScreenImage src=\"blob:1\" onTouch={touch} />));\n  const pointer = (type: string, init: MouseEventInit = {}) =>\n    act(() => {\n      image().dispatchEvent(\n        new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n      );\n    });\n  /** A 400x600 screen drawn at 200x300 from the page's top left corner. */\n  const sizeImage = () => {\n    Object.defineProperty(image(), \"naturalWidth\", { value: 400 });\n    Object.defineProperty(image(), \"naturalHeight\", { value: 600 });\n    image().getBoundingClientRect = () =>\n      ({ left: 0, top: 0, width: 200, height: 300 }) as DOMRect;\n  };\n\n  beforeEach(() => {\n    onTouch.mockReset();\n    HTMLElement.prototype.setPointerCapture = vi.fn();\n    HTMLElement.prototype.releasePointerCapture = vi.fn();\n    container = document.createElement(\"div\");\n    document.body.append(container);\n    root = createRoot(container);\n  });\n\n  afterEach(() => {\n    act(() => root.unmount());\n    container.remove();\n  });\n\n  it(\"maps a touch to device pixels and releases it where it went down\", () => {\n    render(onTouch);\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n    pointer(\"pointerup\", { clientX: 190, clientY: 10 });\n\n    expect(onTouch.mock.calls).toEqual([\n      [100, 300, \"press\"],\n      [100, 300, \"release\"],\n    ]);\n  });\n\n  it(\"clamps a touch on the far edge to the last pixel\", () => {\n    render(onTouch);\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 200, clientY: 300 });\n\n    expect(onTouch).toHaveBeenCalledWith(399, 599, \"press\");\n  });\n\n  it(\"ignores touches before the image has a size\", () => {\n    render(onTouch);\n\n    pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n    pointer(\"pointerup\");\n\n    expect(onTouch).not.toHaveBeenCalled();\n  });\n\n  it(\"ignores touches on a button-driven device\", () => {\n    render();\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n\n    expect(onTouch).not.toHaveBeenCalled();\n  });\n\n  it(\"releases a held touch when unmounted\", () => {\n    render(onTouch);\n    sizeImage();\n    pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n\n    act(() => root.render(<></>));\n\n    expect(onTouch).toHaveBeenLastCalledWith(100, 300, \"release\");\n  });\n\n  it(\"says so when the screenshot cannot be decoded\", () => {\n    render(onTouch);\n\n    act(() => {\n      image().dispatchEvent(new Event(\"error\"));\n    });\n\n    expect(\n      container.querySelector('[data-testid=\"text_device-screen-undecodable\"]'),\n    ).not.toBeNull();\n  });\n});\n"],
-  "mappings": "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",
-  "names": ["React", "act", "createRoot", "DeviceScreenImage", "container", "root", "onTouch", "image", "render", "touch", "pointer", "type", "init", "sizeImage"]
+  "sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { HOLD_THRESHOLD_MS } from \"@ledgerhq/device-mockserver-react-core\";\n\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\ndescribe(\"DeviceScreenImage\", () => {\n  let container: HTMLDivElement;\n  let root: Root;\n  const onTouch = vi.fn();\n\n  const image = () =>\n    container.querySelector<HTMLImageElement>(\n      '[data-testid=\"image_device-screen\"]',\n    )!;\n  const render = (touch?: typeof onTouch) =>\n    act(() => root.render(<DeviceScreenImage src=\"blob:1\" onTouch={touch} />));\n  const pointer = (type: string, init: MouseEventInit = {}) =>\n    act(() => {\n      image().dispatchEvent(\n        new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n      );\n    });\n  /** A 400x600 screen drawn at 200x300 from the page's top left corner. */\n  const sizeImage = () => {\n    Object.defineProperty(image(), \"naturalWidth\", { value: 400 });\n    Object.defineProperty(image(), \"naturalHeight\", { value: 600 });\n    image().getBoundingClientRect = () =>\n      ({ left: 0, top: 0, width: 200, height: 300 }) as DOMRect;\n  };\n\n  beforeEach(() => {\n    vi.useFakeTimers();\n    onTouch.mockReset();\n    HTMLElement.prototype.setPointerCapture = vi.fn();\n    HTMLElement.prototype.releasePointerCapture = vi.fn();\n    container = document.createElement(\"div\");\n    document.body.append(container);\n    root = createRoot(container);\n  });\n\n  afterEach(() => {\n    act(() => root.unmount());\n    container.remove();\n    vi.useRealTimers();\n  });\n\n  it(\"maps a tap to device pixels\", () => {\n    render(onTouch);\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n    pointer(\"pointerup\", { clientX: 190, clientY: 10 });\n\n    expect(onTouch).toHaveBeenCalledExactlyOnceWith(\n      100,\n      300,\n      \"press-and-release\",\n    );\n  });\n\n  it(\"releases a hold where it went down\", () => {\n    render(onTouch);\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n    act(() => {\n      vi.advanceTimersByTime(HOLD_THRESHOLD_MS);\n    });\n    pointer(\"pointerup\", { clientX: 190, clientY: 10 });\n\n    expect(onTouch.mock.calls).toEqual([\n      [100, 300, \"press\"],\n      [100, 300, \"release\"],\n    ]);\n  });\n\n  it(\"clamps a touch on the far edge to the last pixel\", () => {\n    render(onTouch);\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 200, clientY: 300 });\n    pointer(\"pointerup\");\n\n    expect(onTouch).toHaveBeenCalledWith(399, 599, \"press-and-release\");\n  });\n\n  it(\"ignores touches before the image has a size\", () => {\n    render(onTouch);\n\n    pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n    pointer(\"pointerup\");\n\n    expect(onTouch).not.toHaveBeenCalled();\n  });\n\n  it(\"ignores touches on a button-driven device\", () => {\n    render();\n    sizeImage();\n\n    pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n\n    expect(onTouch).not.toHaveBeenCalled();\n  });\n\n  it(\"releases a held touch when unmounted\", () => {\n    render(onTouch);\n    sizeImage();\n    pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n    act(() => {\n      vi.advanceTimersByTime(HOLD_THRESHOLD_MS);\n    });\n\n    act(() => root.render(<></>));\n\n    expect(onTouch).toHaveBeenLastCalledWith(100, 300, \"release\");\n  });\n\n  it(\"says so when the screenshot cannot be decoded\", () => {\n    render(onTouch);\n\n    act(() => {\n      image().dispatchEvent(new Event(\"error\"));\n    });\n\n    expect(\n      container.querySelector('[data-testid=\"text_device-screen-undecodable\"]'),\n    ).not.toBeNull();\n  });\n});\n"],
+  "mappings": "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",
+  "names": ["React", "act", "createRoot", "HOLD_THRESHOLD_MS", "DeviceScreenImage", "container", "root", "onTouch", "image", "render", "touch", "pointer", "type", "init", "sizeImage"]
 }

package/lib/esm/src/MockServerDevice.js

@@ -1,2 +1,2 @@
-import s,{useMemo as t}from"react";import{MockClient as v}from"@ledgerhq/device-mockserver-client";import{DeviceScreen as m}from"./DeviceScreen";import{mockServerScreenApi as f}from"./mockServerScreenApi";import{useMockServerDevice as S}from"./useMockServerDevice";const M=({url:i,token:c,deviceId:e,...n})=>{const r=t(()=>new v(i,{token:c}),[i,c]),p=t(()=>f(r,e),[r,e]),o=S(r,e);return o===void 0?null:s.createElement(m,{api:p,deviceType:o?.device_type??"",firmwareVersion:o?.firmware_version,...n})};export{M as MockServerDevice};
+import s,{useMemo as t}from"react";import{MockClient as v}from"@ledgerhq/device-mockserver-client";import{mockServerScreenApi as m,useMockServerDevice as f}from"@ledgerhq/device-mockserver-react-core";import{DeviceScreen as S}from"./DeviceScreen";const D=({url:o,token:c,deviceId:e,...n})=>{const r=t(()=>new v(o,{token:c}),[o,c]),p=t(()=>m(r,e),[r,e]),i=f(r,e);return i===void 0?null:s.createElement(S,{api:p,deviceType:i?.device_type??"",firmwareVersion:i?.firmware_version,...n})};export{D as MockServerDevice};
 //# sourceMappingURL=MockServerDevice.js.map

package/lib/esm/src/MockServerDevice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MockServerDevice.tsx"],
-  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { MockClient } from \"@ledgerhq/device-mockserver-client\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nimport { mockServerScreenApi } from \"./mockServerScreenApi\";\nimport { useMockServerDevice } from \"./useMockServerDevice\";\n\nexport type MockServerDeviceProps = Pick<\n  DeviceScreenProps,\n  \"floating\" | \"defaultCollapsed\"\n> & {\n  url: string;\n  /** Of the session owning the device: devices are scoped to their session. */\n  token: string;\n  deviceId: string;\n};\n\nexport const MockServerDevice: React.FC<MockServerDeviceProps> = ({\n  url,\n  token,\n  deviceId,\n  ...props\n}) => {\n  const client = useMemo(() => new MockClient(url, { token }), [url, token]);\n  const api = useMemo(\n    () => mockServerScreenApi(client, deviceId),\n    [client, deviceId],\n  );\n  const device = useMockServerDevice(client, deviceId);\n\n  // Decides touch or buttons, so nothing renders until it is known. An\n  // unreadable record still shows the screen, and its errors.\n  if (device === undefined) return null;\n\n  return (\n    <DeviceScreen\n      api={api}\n      deviceType={device?.device_type ?? \"\"}\n      firmwareVersion={device?.firmware_version}\n      {...props}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,OAAOA,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,qCAE3B,OAAS,gBAAAC,MAA4C,iBACrD,OAAS,uBAAAC,MAA2B,wBACpC,OAAS,uBAAAC,MAA2B,wBAY7B,MAAMC,EAAoD,CAAC,CAChE,IAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAASV,EAAQ,IAAM,IAAIC,EAAWK,EAAK,CAAE,MAAAC,CAAM,CAAC,EAAG,CAACD,EAAKC,CAAK,CAAC,EACnEI,EAAMX,EACV,IAAMG,EAAoBO,EAAQF,CAAQ,EAC1C,CAACE,EAAQF,CAAQ,CACnB,EACMI,EAASR,EAAoBM,EAAQF,CAAQ,EAInD,OAAII,IAAW,OAAkB,KAG/Bb,EAAA,cAACG,EAAA,CACC,IAAKS,EACL,WAAYC,GAAQ,aAAe,GACnC,gBAAiBA,GAAQ,iBACxB,GAAGH,EACN,CAEJ",
-  "names": ["React", "useMemo", "MockClient", "DeviceScreen", "mockServerScreenApi", "useMockServerDevice", "MockServerDevice", "url", "token", "deviceId", "props", "client", "api", "device"]
+  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { MockClient } from \"@ledgerhq/device-mockserver-client\";\nimport {\n  mockServerScreenApi,\n  useMockServerDevice,\n} from \"@ledgerhq/device-mockserver-react-core\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\n\nexport type MockServerDeviceProps = Pick<\n  DeviceScreenProps,\n  \"floating\" | \"defaultCollapsed\"\n> & {\n  url: string;\n  /** Of the session owning the device: devices are scoped to their session. */\n  token: string;\n  deviceId: string;\n};\n\nexport const MockServerDevice: React.FC<MockServerDeviceProps> = ({\n  url,\n  token,\n  deviceId,\n  ...props\n}) => {\n  const client = useMemo(() => new MockClient(url, { token }), [url, token]);\n  const api = useMemo(\n    () => mockServerScreenApi(client, deviceId),\n    [client, deviceId],\n  );\n  const device = useMockServerDevice(client, deviceId);\n\n  // Decides touch or buttons, so nothing renders until it is known. An\n  // unreadable record still shows the screen, and its errors.\n  if (device === undefined) return null;\n\n  return (\n    <DeviceScreen\n      api={api}\n      deviceType={device?.device_type ?? \"\"}\n      firmwareVersion={device?.firmware_version}\n      {...props}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,OAAOA,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,qCAC3B,OACE,uBAAAC,EACA,uBAAAC,MACK,yCAEP,OAAS,gBAAAC,MAA4C,iBAY9C,MAAMC,EAAoD,CAAC,CAChE,IAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAASV,EAAQ,IAAM,IAAIC,EAAWK,EAAK,CAAE,MAAAC,CAAM,CAAC,EAAG,CAACD,EAAKC,CAAK,CAAC,EACnEI,EAAMX,EACV,IAAME,EAAoBQ,EAAQF,CAAQ,EAC1C,CAACE,EAAQF,CAAQ,CACnB,EACMI,EAAST,EAAoBO,EAAQF,CAAQ,EAInD,OAAII,IAAW,OAAkB,KAG/Bb,EAAA,cAACK,EAAA,CACC,IAAKO,EACL,WAAYC,GAAQ,aAAe,GACnC,gBAAiBA,GAAQ,iBACxB,GAAGH,EACN,CAEJ",
+  "names": ["React", "useMemo", "MockClient", "mockServerScreenApi", "useMockServerDevice", "DeviceScreen", "MockServerDevice", "url", "token", "deviceId", "props", "client", "api", "device"]
 }

package/lib/esm/src/deviceModels.js

@@ -1,2 +1,2 @@
-import{Flex as r,Nano as c,NanoGen5 as t,Stax as l}from"@ledgerhq/lumen-ui-react/symbols";const e=(n,o)=>({label:n,icon:c,touch:!1,speculos:!0,screenWidth:128,screenHeight:o,lightScreen:!1}),s={nanoS:{...e("Nano S",32),speculos:!1},nanoSP:e("Nano S Plus",64),nanoX:e("Nano X",64),stax:{label:"Stax",icon:l,touch:!0,speculos:!0,screenWidth:400,screenHeight:672,lightScreen:!0},flex:{label:"Flex",icon:r,touch:!0,speculos:!0,screenWidth:480,screenHeight:600,lightScreen:!0},apexp:{label:"Apex",icon:t,touch:!0,speculos:!0,screenWidth:300,screenHeight:400,lightScreen:!0}},i=e("Device",64),u=n=>s[n]??i;export{u as findDeviceScreenModel};
+import{findDeviceScreenModel as o}from"@ledgerhq/device-mockserver-react-core";import{Flex as n,Nano as c,NanoGen5 as r,Stax as i}from"@ledgerhq/lumen-ui-react/symbols";const t={stax:i,flex:n,apexp:r},l=e=>({...o(e),icon:t[e]??c});export{l as findDeviceScreenModel};
 //# sourceMappingURL=deviceModels.js.map

package/lib/esm/src/deviceModels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/deviceModels.ts"],
-  "sourcesContent": ["import { Flex, Nano, NanoGen5, Stax } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nexport interface DeviceScreenModel {\n  readonly label: string;\n  readonly icon: typeof Nano;\n  readonly touch: boolean;\n  /** Whether Speculos has an emulator for it, so it can have a screen. */\n  readonly speculos: boolean;\n  /** In device pixels. */\n  readonly screenWidth: number;\n  readonly screenHeight: number;\n  readonly lightScreen: boolean;\n}\n\nconst nano = (label: string, screenHeight: number): DeviceScreenModel => ({\n  label,\n  icon: Nano,\n  touch: false,\n  speculos: true,\n  screenWidth: 128,\n  screenHeight,\n  lightScreen: false,\n});\n\n/** Keyed by the mock server's `device_type`, a DMK `DeviceModelId`. */\nconst MODELS: Record<string, DeviceScreenModel> = {\n  nanoS: { ...nano(\"Nano S\", 32), speculos: false },\n  nanoSP: nano(\"Nano S Plus\", 64),\n  nanoX: nano(\"Nano X\", 64),\n  stax: {\n    label: \"Stax\",\n    icon: Stax,\n    touch: true,\n    speculos: true,\n    screenWidth: 400,\n    screenHeight: 672,\n    lightScreen: true,\n  },\n  flex: {\n    label: \"Flex\",\n    icon: Flex,\n    touch: true,\n    speculos: true,\n    screenWidth: 480,\n    screenHeight: 600,\n    lightScreen: true,\n  },\n  apexp: {\n    label: \"Apex\",\n    icon: NanoGen5,\n    touch: true,\n    speculos: true,\n    screenWidth: 300,\n    screenHeight: 400,\n    lightScreen: true,\n  },\n};\n\nconst UNKNOWN: DeviceScreenModel = nano(\"Device\", 64);\n\nexport const findDeviceScreenModel = (deviceType: string): DeviceScreenModel =>\n  MODELS[deviceType] ?? UNKNOWN;\n"],
-  "mappings": "AAAA,OAAS,QAAAA,EAAM,QAAAC,EAAM,YAAAC,EAAU,QAAAC,MAAY,mCAc3C,MAAMC,EAAO,CAACC,EAAeC,KAA6C,CACxE,MAAAD,EACA,KAAMJ,EACN,MAAO,GACP,SAAU,GACV,YAAa,IACb,aAAAK,EACA,YAAa,EACf,GAGMC,EAA4C,CAChD,MAAO,CAAE,GAAGH,EAAK,SAAU,EAAE,EAAG,SAAU,EAAM,EAChD,OAAQA,EAAK,cAAe,EAAE,EAC9B,MAAOA,EAAK,SAAU,EAAE,EACxB,KAAM,CACJ,MAAO,OACP,KAAMD,EACN,MAAO,GACP,SAAU,GACV,YAAa,IACb,aAAc,IACd,YAAa,EACf,EACA,KAAM,CACJ,MAAO,OACP,KAAMH,EACN,MAAO,GACP,SAAU,GACV,YAAa,IACb,aAAc,IACd,YAAa,EACf,EACA,MAAO,CACL,MAAO,OACP,KAAME,EACN,MAAO,GACP,SAAU,GACV,YAAa,IACb,aAAc,IACd,YAAa,EACf,CACF,EAEMM,EAA6BJ,EAAK,SAAU,EAAE,EAEvCK,EAAyBC,GACpCH,EAAOG,CAAU,GAAKF",
-  "names": ["Flex", "Nano", "NanoGen5", "Stax", "nano", "label", "screenHeight", "MODELS", "UNKNOWN", "findDeviceScreenModel", "deviceType"]
+  "sourcesContent": ["import {\n  type DeviceScreenModel as BaseDeviceScreenModel,\n  findDeviceScreenModel as findBaseDeviceScreenModel,\n} from \"@ledgerhq/device-mockserver-react-core\";\nimport { Flex, Nano, NanoGen5, Stax } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nexport interface DeviceScreenModel extends BaseDeviceScreenModel {\n  readonly icon: typeof Nano;\n}\n\n/** Keyed by the mock server's `device_type`; every Nano draws as one. */\nconst ICONS: Record<string, typeof Nano> = {\n  stax: Stax,\n  flex: Flex,\n  apexp: NanoGen5,\n};\n\nexport const findDeviceScreenModel = (\n  deviceType: string,\n): DeviceScreenModel => ({\n  ...findBaseDeviceScreenModel(deviceType),\n  icon: ICONS[deviceType] ?? Nano,\n});\n"],
+  "mappings": "AAAA,OAEE,yBAAyBA,MACpB,yCACP,OAAS,QAAAC,EAAM,QAAAC,EAAM,YAAAC,EAAU,QAAAC,MAAY,mCAO3C,MAAMC,EAAqC,CACzC,KAAMD,EACN,KAAMH,EACN,MAAOE,CACT,EAEaG,EACXC,IACuB,CACvB,GAAGP,EAA0BO,CAAU,EACvC,KAAMF,EAAME,CAAU,GAAKL,CAC7B",
+  "names": ["findBaseDeviceScreenModel", "Flex", "Nano", "NanoGen5", "Stax", "ICONS", "findDeviceScreenModel", "deviceType"]
 }

package/lib/esm/src/index.js

@@ -1,2 +1,2 @@
-import{findDeviceScreenModel as o}from"./deviceModels";import{DeviceScreen as p}from"./DeviceScreen";import{MockServerDevice as v}from"./MockServerDevice";import{mockServerScreenApi as i}from"./mockServerScreenApi";import{useMockServerDevice as D}from"./useMockServerDevice";export{p as DeviceScreen,v as MockServerDevice,o as findDeviceScreenModel,i as mockServerScreenApi,D as useMockServerDevice};
+import{findDeviceScreenModel as c}from"./deviceModels";import{DeviceScreen as p}from"./DeviceScreen";import{MockServerDevice as v}from"./MockServerDevice";import{mockServerScreenApi as i,useMockServerDevice as n}from"@ledgerhq/device-mockserver-react-core";export{p as DeviceScreen,v as MockServerDevice,c as findDeviceScreenModel,i as mockServerScreenApi,n as useMockServerDevice};
 //# sourceMappingURL=index.js.map

package/lib/esm/src/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/index.ts"],
-  "sourcesContent": ["export { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nexport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nexport {\n  MockServerDevice,\n  type MockServerDeviceProps,\n} from \"./MockServerDevice\";\nexport { mockServerScreenApi } from \"./mockServerScreenApi\";\nexport type { DeviceScreenState, MockServerClient, ScreenApi } from \"./types\";\nexport { useMockServerDevice } from \"./useMockServerDevice\";\n"],
-  "mappings": "AAAA,OAAiC,yBAAAA,MAA6B,iBAC9D,OAAS,gBAAAC,MAA4C,iBACrD,OACE,oBAAAC,MAEK,qBACP,OAAS,uBAAAC,MAA2B,wBAEpC,OAAS,uBAAAC,MAA2B",
+  "sourcesContent": ["export { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nexport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nexport {\n  MockServerDevice,\n  type MockServerDeviceProps,\n} from \"./MockServerDevice\";\nexport {\n  type DeviceScreenState,\n  type MockServerClient,\n  mockServerScreenApi,\n  type ScreenApi,\n  useMockServerDevice,\n} from \"@ledgerhq/device-mockserver-react-core\";\n"],
+  "mappings": "AAAA,OAAiC,yBAAAA,MAA6B,iBAC9D,OAAS,gBAAAC,MAA4C,iBACrD,OACE,oBAAAC,MAEK,qBACP,OAGE,uBAAAC,EAEA,uBAAAC,MACK",
   "names": ["findDeviceScreenModel", "DeviceScreen", "MockServerDevice", "mockServerScreenApi", "useMockServerDevice"]
 }

package/lib/esm/src/webScreenPlatform.js

@@ -0,0 +1,2 @@
+const r={toImageSource:e=>Promise.resolve(URL.createObjectURL(e)),releaseImageSource:e=>URL.revokeObjectURL(e),isHidden:()=>document.hidden};export{r as webScreenPlatform};
+//# sourceMappingURL=webScreenPlatform.js.map