@mmtitanl/tablets-core 0.2.1 → 0.4.0

package/dist/index.cjs

@@ -329,7 +329,40 @@ function registerDeviceSVG(deviceId, component, frame, screenRect, landscape) {
 function getDeviceSVG(deviceId) {
   return SVG_REGISTRY.get(deviceId);
 }
-function buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, suffix) {
+function readSVGViewBox(svg) {
+  const vb = svg.match(/viewBox\s*=\s*["']([^"']+)["']/i);
+  if (vb) {
+    const parts = vb[1].split(/[\s,]+/).map(Number);
+    if (parts.length === 4 && parts.every((n) => Number.isFinite(n))) {
+      return { x: parts[0], y: parts[1], w: parts[2], h: parts[3] };
+    }
+  }
+  const wm = svg.match(/<svg\b[^>]*\swidth\s*=\s*["']([\d.]+)/i);
+  const hm = svg.match(/<svg\b[^>]*\sheight\s*=\s*["']([\d.]+)/i);
+  if (wm && hm) return { x: 0, y: 0, w: parseFloat(wm[1]), h: parseFloat(hm[1]) };
+  return null;
+}
+function injectScreenMask(svg, frame, suffix) {
+  if (frame.totalWidth <= 0 || frame.totalHeight <= 0) return svg;
+  if (frame.screenWidth <= 0 || frame.screenHeight <= 0) return svg;
+  const vb = readSVGViewBox(svg);
+  if (!vb) return svg;
+  const sx = vb.w / frame.totalWidth;
+  const sy = vb.h / frame.totalHeight;
+  const x = vb.x + frame.bezelLeft * sx;
+  const y = vb.y + frame.bezelTop * sy;
+  const w = frame.screenWidth * sx;
+  const h = frame.screenHeight * sy;
+  const rt = Math.max(0, frame.screenRadiusTop ?? frame.screenRadius) * Math.min(sx, sy);
+  const rb = Math.max(0, frame.screenRadiusBottom ?? frame.screenRadius) * Math.min(sx, sy);
+  const maskId = `biela-screen-mask-${suffix || "default"}`;
+  const innerPath = `M${x + rt},${y} H${x + w - rt} a${rt},${rt} 0 0 1 ${rt},${rt} V${y + h - rb} a${rb},${rb} 0 0 1 ${-rb},${rb} H${x + rb} a${rb},${rb} 0 0 1 ${-rb},${-rb} V${y + rt} a${rt},${rt} 0 0 1 ${rt},${-rt} Z`;
+  const maskDef = `<defs><mask id="${maskId}" maskUnits="userSpaceOnUse" x="${vb.x}" y="${vb.y}" width="${vb.w}" height="${vb.h}"><rect x="${vb.x}" y="${vb.y}" width="${vb.w}" height="${vb.h}" fill="white"/><path d="${innerPath}" fill="black"/></mask></defs>`;
+  let result = svg.replace(/(<svg\b[^>]*>)/i, (m) => `${m}${maskDef}<g mask="url(#${maskId})">`);
+  result = result.replace(/<\/svg\s*>/i, `</g></svg>`);
+  return result;
+}
+function buildCustomComponent(deviceId, svgString, cropViewBox, suffix, frame, dieCut = false) {
   const scopeKey = suffix ? `${deviceId}${suffix}` : deviceId;
   let svg = (0, import_tablets2.scopeSVGIds)(svgString, scopeKey);
   if (cropViewBox) {
@@ -349,7 +382,7 @@ function buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, suff
       }
     );
   }
-  void screenRect;
+  if (frame && dieCut) svg = injectScreenMask(svg, frame, scopeKey);
   const Component2 = ({ style }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     {
@@ -360,9 +393,10 @@ function buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, suff
   Component2.displayName = `CustomDeviceSVG(${scopeKey})`;
   return Component2;
 }
-function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screenRect, landscape) {
-  const portraitComponent = buildCustomComponent(deviceId, svgString, cropViewBox, screenRect, "");
-  const landscapeComponent = landscape ? buildCustomComponent(deviceId, landscape.svgString, landscape.cropViewBox, landscape.screenRect, "-landscape") : void 0;
+function registerCustomDeviceSVG(deviceId, svgString, frame, cropViewBox, screenRect, landscape, options) {
+  const dieCut = options?.dieCutScreen ?? false;
+  const portraitComponent = buildCustomComponent(deviceId, svgString, cropViewBox, "", frame, dieCut);
+  const landscapeComponent = landscape ? buildCustomComponent(deviceId, landscape.svgString, landscape.cropViewBox, "-landscape", landscape.frame, dieCut) : void 0;
   SVG_REGISTRY.set(deviceId, {
     component: portraitComponent,
     frame,
@@ -657,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(
@@ -680,7 +722,9 @@ function DeviceFrame({
   manualScale = 1,
   showSafeAreaOverlay = false,
   showScaleBar = true,
-  showStatusBar = true,
+  // Implicit oprit: SVG-urile device-urilor au status bar-ul desenat în ramă
+  // (ceas, semnal, baterie); cel sintetic ar apărea dublat peste conținut.
+  showStatusBar = false,
   colorScheme = "light",
   iframeRef,
   onColorSchemeChange,
@@ -692,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";
@@ -701,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"
@@ -729,44 +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 baseRadius = activeFrame?.screenRadius ?? meta.screen.cornerRadius ?? 0;
-  const radiusTop = activeFrame?.screenRadiusTop ?? baseRadius;
-  const radiusBottom = activeFrame?.screenRadiusBottom ?? baseRadius;
-  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",
     {
@@ -783,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",
@@ -800,10 +875,36 @@ 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: [
-                  SVGComponent && portraitFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "div",
+                    {
+                      className: "bielaframe-content",
+                      style: {
+                        position: "absolute",
+                        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: 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: contentOrientation, colorScheme }),
+                        showSafeAreaOverlay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeAreaOverlay, { contract, orientation: contentOrientation })
+                      ]
+                    }
+                  ),
+                  SVGComponent && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "div",
                     {
                       "aria-hidden": true,
@@ -811,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,
@@ -827,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,
@@ -850,38 +953,6 @@ function DeviceFrame({
                         }
                       )
                     }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                    "div",
-                    {
-                      className: "bielaframe-content",
-                      style: {
-                        position: "absolute",
-                        left: contentBezelLeft,
-                        top: contentBezelTop,
-                        width: contentScreenW,
-                        height: contentScreenH,
-                        // `border-radius + overflow:hidden` clips the <iframe> child
-                        // in every browser. clip-path is kept as belt-and-braces — some
-                        // engines apply it to the iframe, some don't. Per-edge radii
-                        // (top vs bottom) let devices with asymmetric corners — e.g.
-                        // flat-bottom — clip correctly.
-                        borderRadius: `${radiusTop}px ${radiusTop}px ${radiusBottom}px ${radiusBottom}px`,
-                        clipPath: `inset(0 round ${radiusTop}px ${radiusTop}px ${radiusBottom}px ${radiusBottom}px)`,
-                        overflow: "hidden",
-                        isolation: "isolate",
-                        backfaceVisibility: "hidden",
-                        transform: "translateZ(0)",
-                        background: colorScheme === "dark" ? "#000" : "#fff",
-                        zIndex: 5,
-                        ...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 })
-                      ]
-                    }
                   )
                 ]
               }
@@ -1196,7 +1267,8 @@ var CustomSVGStore = class {
       },
       void 0,
       sr,
-      landscape
+      landscape,
+      { dieCutScreen: entry.dieCutScreen ?? false }
     );
   }
   persist(all) {