@mmtitanl/tablets-core 0.2.0 → 0.3.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,
@@ -680,7 +714,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,
@@ -762,9 +798,6 @@ function DeviceFrame({
   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})`;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -803,6 +836,29 @@ function DeviceFrame({
                   transition: "transform 400ms cubic-bezier(0.4, 0, 0.2, 1)"
                 },
                 children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                    "div",
+                    {
+                      className: "bielaframe-content",
+                      style: {
+                        position: "absolute",
+                        left: `${contentBezelLeft / scalerW * 100}%`,
+                        top: `${contentBezelTop / scalerH * 100}%`,
+                        width: `${contentScreenW / scalerW * 100}%`,
+                        height: `${contentScreenH / scalerH * 100}%`,
+                        overflow: "hidden",
+                        zIndex: 0,
+                        background: colorScheme === "dark" ? "#000" : "#fff",
+                        borderRadius: activeFrame?.screenRadius ?? 0,
+                        ...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 })
+                      ]
+                    }
+                  ),
                   SVGComponent && portraitFrame && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     "div",
                     {
@@ -850,38 +906,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 +1220,8 @@ var CustomSVGStore = class {
       },
       void 0,
       sr,
-      landscape
+      landscape,
+      { dieCutScreen: entry.dieCutScreen ?? false }
     );
   }
   persist(all) {