@mmtitanl/tablets-core 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -691,6 +691,14 @@ function ensureBuiltinsRegistered() {
   }
   didAutoRegister = true;
 }
+var ROTATE_MS = 450;
+var EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+var SVG_FADE_MS = 240;
+var SVG_FADE_DELAY_MS = 100;
+var CONTENT_FADE_OUT_MS = 140;
+var CONTENT_SWAP_MS = 180;
+var CONTENT_FADE_IN_DELAY_MS = 220;
+var CONTENT_FADE_IN_MS = 230;
 function sendDeviceInfo(iframe, contract, orientation) {
   if (!iframe?.contentWindow) return;
   iframe.contentWindow.postMessage(
@@ -728,7 +736,24 @@ function DeviceFrame({
   const resolvedId = device ?? deviceId;
   if (!resolvedId) throw new Error("DeviceFrame requires `device` or `deviceId`");
   const meta = (0, import_tablets3.getDeviceMetadata)(resolvedId);
-  const contract = (0, import_react11.useMemo)(() => (0, import_tablets3.getDeviceContract)(resolvedId, orientation), [resolvedId, orientation]);
+  const [contentOrientation, setContentOrientation] = (0, import_react11.useState)(orientation);
+  const [contentVisible, setContentVisible] = (0, import_react11.useState)(true);
+  const animTimers = (0, import_react11.useRef)([]);
+  const prevOrientation = (0, import_react11.useRef)(orientation);
+  (0, import_react11.useEffect)(() => {
+    if (prevOrientation.current === orientation) return;
+    prevOrientation.current = orientation;
+    for (const t of animTimers.current) window.clearTimeout(t);
+    setContentVisible(false);
+    animTimers.current = [
+      window.setTimeout(() => setContentOrientation(orientation), CONTENT_SWAP_MS),
+      window.setTimeout(() => setContentVisible(true), CONTENT_FADE_IN_DELAY_MS)
+    ];
+  }, [orientation]);
+  (0, import_react11.useEffect)(() => () => {
+    for (const t of animTimers.current) window.clearTimeout(t);
+  }, []);
+  const contract = (0, import_react11.useMemo)(() => (0, import_tablets3.getDeviceContract)(resolvedId, contentOrientation), [resolvedId, contentOrientation]);
   const portW = meta.screen.width;
   const portH = meta.screen.height;
   const rotateFrame = orientation === "landscape";
@@ -737,12 +762,36 @@ function DeviceFrame({
   const sentinelRef = (0, import_react11.useRef)(null);
   const frameContainerRef = (0, import_react11.useRef)(null);
   const containerSize = useContainerSize(sentinelRef);
-  const svgEntryEarly = getDeviceSVG(resolvedId);
-  const portraitFrameEarly = svgEntryEarly?.frame;
-  const landscapeFrameEarly = svgEntryEarly?.landscapeFrame;
-  const hasLandscapeSVGEarly = !!svgEntryEarly?.landscapeComponent && !!landscapeFrameEarly;
-  const fitW = portraitFrameEarly ? rotateFrame ? hasLandscapeSVGEarly ? landscapeFrameEarly.totalWidth : portraitFrameEarly.totalHeight : portraitFrameEarly.totalWidth : rotateFrame ? portH : portW;
-  const fitH = portraitFrameEarly ? rotateFrame ? hasLandscapeSVGEarly ? landscapeFrameEarly.totalHeight : portraitFrameEarly.totalWidth : portraitFrameEarly.totalHeight : rotateFrame ? portW : portH;
+  const svgEntry = getDeviceSVG(resolvedId);
+  const SVGComponent = svgEntry?.component ?? null;
+  const LandscapeSVGComponent = svgEntry?.landscapeComponent ?? null;
+  const registeredLandscapeFrame = svgEntry?.landscapeFrame;
+  const hasLandscapeSVG = !!LandscapeSVGComponent && !!registeredLandscapeFrame;
+  const portFrame = svgEntry?.frame ?? {
+    bezelTop: 0,
+    bezelBottom: 0,
+    bezelLeft: 0,
+    bezelRight: 0,
+    totalWidth: portW,
+    totalHeight: portH,
+    screenWidth: portW,
+    screenHeight: portH,
+    screenRadius: 0
+  };
+  const landFrame = hasLandscapeSVG && registeredLandscapeFrame ? registeredLandscapeFrame : {
+    bezelTop: portFrame.totalWidth - portFrame.bezelLeft - portFrame.screenWidth,
+    bezelBottom: portFrame.bezelLeft,
+    bezelLeft: portFrame.bezelTop,
+    bezelRight: portFrame.totalHeight - portFrame.bezelTop - portFrame.screenHeight,
+    totalWidth: portFrame.totalHeight,
+    totalHeight: portFrame.totalWidth,
+    screenWidth: portFrame.screenHeight,
+    screenHeight: portFrame.screenWidth,
+    screenRadius: portFrame.screenRadius
+  };
+  const activeFrame = rotateFrame ? landFrame : portFrame;
+  const fitW = activeFrame.totalWidth;
+  const fitH = activeFrame.totalHeight;
   const fitResult = (0, import_react11.useMemo)(
     () => computeFullScale(fitW, fitH, containerSize.width, containerSize.height, {
       snapToSteps: scaleMode === "steps"
@@ -765,41 +814,32 @@ function DeviceFrame({
   }, [scale, onScaleChange]);
   (0, import_react11.useEffect)(() => {
     if (!iframeRef?.current) return;
-    sendDeviceInfo(iframeRef.current, contract, orientation);
-    const onLoad = () => sendDeviceInfo(iframeRef.current, contract, orientation);
+    sendDeviceInfo(iframeRef.current, contract, contentOrientation);
+    const onLoad = () => sendDeviceInfo(iframeRef.current, contract, contentOrientation);
     iframeRef.current.addEventListener("load", onLoad);
     return () => iframeRef.current?.removeEventListener("load", onLoad);
-  }, [iframeRef, contract, orientation]);
+  }, [iframeRef, contract, contentOrientation]);
   (0, import_react11.useEffect)(() => {
     if (!iframeRef) return;
     const handler = (event) => {
       const data = event.data;
       if (!data || typeof data !== "object") return;
       if (data.type === "biela:requestDeviceInfo") {
-        sendDeviceInfo(iframeRef.current, contract, orientation);
+        sendDeviceInfo(iframeRef.current, contract, contentOrientation);
       } else if (data.type === "biela:colorScheme" && data.payload?.scheme) {
         onColorSchemeChange?.(data.payload.scheme);
       }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [iframeRef, contract, orientation, onColorSchemeChange]);
-  const svgEntry = getDeviceSVG(resolvedId);
-  const SVGComponent = svgEntry?.component ?? null;
-  const portraitFrame = svgEntry?.frame;
-  const LandscapeSVGComponent = svgEntry?.landscapeComponent ?? null;
-  const landscapeFrame = svgEntry?.landscapeFrame;
-  const hasLandscapeSVG = !!LandscapeSVGComponent && !!landscapeFrame;
+  }, [iframeRef, contract, contentOrientation, onColorSchemeChange]);
   const cssVarsStyle = contract.cssVariables;
-  const activeFrame = hasLandscapeSVG && rotateFrame ? landscapeFrame : portraitFrame;
-  const scalerW = hasLandscapeSVG ? Math.max(portraitFrame?.totalWidth ?? dw, landscapeFrame?.totalWidth ?? dh) : activeFrame?.totalWidth ?? (rotateFrame ? portW : dw);
-  const scalerH = hasLandscapeSVG ? Math.max(portraitFrame?.totalHeight ?? dh, landscapeFrame?.totalHeight ?? dw) : activeFrame?.totalHeight ?? (rotateFrame ? portH : dh);
-  const contentBezelLeft = activeFrame?.bezelLeft ?? 0;
-  const contentBezelTop = activeFrame?.bezelTop ?? 0;
-  const contentScreenW = activeFrame?.screenWidth ?? dw;
-  const contentScreenH = activeFrame?.screenHeight ?? dh;
-  const useRotationFallback = rotateFrame && !hasLandscapeSVG;
-  const scalerTransform = useRotationFallback ? `scale(${scale}) translate(0px, ${scalerW}px) rotate(-90deg)` : `scale(${scale})`;
+  const scalerW = portFrame.totalWidth;
+  const scalerH = portFrame.totalHeight;
+  const scalerTransform = rotateFrame ? `scale(${scale}) translate(0px, ${landFrame.totalHeight}px) rotate(-90deg)` : `scale(${scale})`;
+  const contentLandscape = contentOrientation === "landscape";
+  const contentBox = contentLandscape ? { left: landFrame.totalHeight - landFrame.bezelTop, top: landFrame.bezelLeft, width: landFrame.screenWidth, height: landFrame.screenHeight } : { left: portFrame.bezelLeft, top: portFrame.bezelTop, width: portFrame.screenWidth, height: portFrame.screenHeight };
+  const contentRadius = contentLandscape ? landFrame.screenRadius : portFrame.screenRadius;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
@@ -816,8 +856,10 @@ function DeviceFrame({
               height: hostHeight,
               position: "relative",
               flexShrink: 0,
-              overflow: "hidden",
-              transition: "width 400ms cubic-bezier(0.4, 0, 0.2, 1), height 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+              // No overflow clipping: at rest the frame fits the host exactly; while
+              // rotating, the corners sweep outside and clipping them flat looks bad.
+              // The sentinel still clips at the component boundary.
+              transition: `width ${ROTATE_MS}ms ${EASE}, height ${ROTATE_MS}ms ${EASE}`
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "div",
@@ -833,7 +875,7 @@ function DeviceFrame({
                   transform: scalerTransform,
                   transformOrigin: "top left",
                   willChange: "transform",
-                  transition: "transform 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                  transition: `transform ${ROTATE_MS}ms ${EASE}`
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -842,24 +884,27 @@ function DeviceFrame({
                       className: "bielaframe-content",
                       style: {
                         position: "absolute",
-                        left: `${contentBezelLeft / scalerW * 100}%`,
-                        top: `${contentBezelTop / scalerH * 100}%`,
-                        width: `${contentScreenW / scalerW * 100}%`,
-                        height: `${contentScreenH / scalerH * 100}%`,
+                        left: contentBox.left,
+                        top: contentBox.top,
+                        width: contentBox.width,
+                        height: contentBox.height,
+                        ...contentLandscape ? { transform: "rotate(90deg)", transformOrigin: "top left" } : null,
                         overflow: "hidden",
                         zIndex: 0,
                         background: colorScheme === "dark" ? "#000" : "#fff",
-                        borderRadius: activeFrame?.screenRadius ?? 0,
+                        borderRadius: contentRadius,
+                        opacity: contentVisible ? 1 : 0,
+                        transition: `opacity ${contentVisible ? CONTENT_FADE_IN_MS : CONTENT_FADE_OUT_MS}ms ${EASE}`,
                         ...cssVarsStyle
                       },
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeviceErrorBoundary, { children }),
-                        showStatusBar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DynamicStatusBar, { contract, orientation, colorScheme }),
-                        showSafeAreaOverlay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaOverlay, { contract, orientation })
+                        showStatusBar && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DynamicStatusBar, { contract, orientation: contentOrientation, colorScheme }),
+                        showSafeAreaOverlay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaOverlay, { contract, orientation: contentOrientation })
                       ]
                     }
                   ),
-                  SVGComponent && portraitFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  SVGComponent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "div",
                     {
                       "aria-hidden": true,
@@ -867,12 +912,12 @@ function DeviceFrame({
                         position: "absolute",
                         top: 0,
                         left: 0,
-                        width: portraitFrame.totalWidth,
-                        height: portraitFrame.totalHeight,
+                        width: portFrame.totalWidth,
+                        height: portFrame.totalHeight,
                         pointerEvents: "none",
                         zIndex: 1,
                         opacity: hasLandscapeSVG && rotateFrame ? 0 : 1,
-                        transition: "opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                        transition: `opacity ${SVG_FADE_MS}ms ${EASE} ${SVG_FADE_DELAY_MS}ms`
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         SVGComponent,
@@ -883,20 +928,22 @@ function DeviceFrame({
                       )
                     }
                   ),
-                  hasLandscapeSVG && LandscapeSVGComponent && landscapeFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  hasLandscapeSVG && LandscapeSVGComponent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "div",
                     {
                       "aria-hidden": true,
                       style: {
                         position: "absolute",
+                        left: landFrame.totalHeight,
                         top: 0,
-                        left: 0,
-                        width: landscapeFrame.totalWidth,
-                        height: landscapeFrame.totalHeight,
+                        width: landFrame.totalWidth,
+                        height: landFrame.totalHeight,
+                        transform: "rotate(90deg)",
+                        transformOrigin: "top left",
                         pointerEvents: "none",
                         zIndex: 1,
                         opacity: rotateFrame ? 1 : 0,
-                        transition: "opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)"
+                        transition: `opacity ${SVG_FADE_MS}ms ${EASE} ${SVG_FADE_DELAY_MS}ms`
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         LandscapeSVGComponent,