@make-pictures/kits 0.0.0-stage → 2.0.0

package/dist/paper-diorama-3d/index.d.ts

@@ -0,0 +1,4 @@
+export * from './PaperCutout3D';
+export * from './ImageCutout3D';
+export * from './PaperPopUpBook3D';
+export * from './PaperStageLighting3D';

package/dist/paper-diorama-3d/index.mjs

@@ -0,0 +1,34 @@
+import {
+  ImageCutout3D,
+  PaperBookPageTurn3D,
+  PaperCameraRig3D,
+  PaperCloudCutout3D,
+  PaperCutout3D,
+  PaperMountainBackdrop3D,
+  PaperPineTree3D,
+  PaperStageLighting3D,
+  PopUpBookBase3D,
+  PopUpHinge3D,
+  buildPaperCutoutCompositeKey,
+  getFloorTexture,
+  getPaperTextureCacheStats,
+  prunePaperTextureCache,
+  serializePaperCutoutDeps
+} from "../chunk-NNA7XXQB.mjs";
+export {
+  ImageCutout3D,
+  PaperBookPageTurn3D,
+  PaperCameraRig3D,
+  PaperCloudCutout3D,
+  PaperCutout3D,
+  PaperMountainBackdrop3D,
+  PaperPineTree3D,
+  PaperStageLighting3D,
+  PopUpBookBase3D,
+  PopUpHinge3D,
+  buildPaperCutoutCompositeKey,
+  getFloorTexture,
+  getPaperTextureCacheStats,
+  prunePaperTextureCache,
+  serializePaperCutoutDeps
+};

package/dist/product-frames/BrowserFrame.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type FrameMediaProps } from './frameMedia';
+export interface BrowserFrameProps extends FrameMediaProps {
+    /** Address bar text, e.g. `'app.make.pictures/studio'` */
+    url?: string;
+    /** Optional tab / window title */
+    title?: string;
+    /** Window chrome style (default `'macos'`) */
+    variant?: 'macos' | 'arc' | 'minimal';
+    /** Chrome theme (default `'dark'`) */
+    theme?: 'dark' | 'light';
+    /** Outer window width in px (default `1360`) */
+    width?: number;
+    /** Viewport aspect ratio below the toolbar (default `'16 / 10'`, ignored when `height` is set) */
+    aspectRatio?: string | number;
+    /** Explicit outer window height in px (overrides `aspectRatio`) */
+    height?: number;
+    /** Entrance frame (default `2`, so `frame === 0` renders `opacity: 0`) */
+    enterFrame?: number;
+    /** Accent used for the secure-lock dot & focus ring (default `'#38bdf8'`) */
+    accentColor?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Desktop / SaaS browser window chrome wrapping an `.mp4` screencast (`<OffthreadVideo />`),
+ * a screenshot (`<Img />`) or arbitrary children. Deterministic 60 FPS spring entrance.
+ */
+export declare const BrowserFrame: React.FC<BrowserFrameProps>;

package/dist/product-frames/PhoneFrame.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type FrameMediaProps } from './frameMedia';
+export interface PhoneFrameProps extends FrameMediaProps {
+    /** Bezel style (default `'dynamic-island'`) */
+    variant?: 'dynamic-island' | 'minimal';
+    /** Bezel theme (default `'dark'` titanium) */
+    theme?: 'dark' | 'light';
+    /** Outer device width in px (default `520` — fits the 9:16 Golden Safe Box `x ∈ [40, 910]`) */
+    width?: number;
+    /** Device aspect ratio (default `'9 / 19.5'`, ignored when `height` is set) */
+    aspectRatio?: string | number;
+    /** Explicit outer device height in px */
+    height?: number;
+    /** Entrance frame (default `2`, so `frame === 0` renders `opacity: 0`) */
+    enterFrame?: number;
+    style?: React.CSSProperties;
+}
+/**
+ * Mobile 9:16 device bezel (titanium frame, Dynamic Island, home indicator) wrapping
+ * an `.mp4` screencast, screenshot or children. Default `520×1127` fits inside the
+ * vertical Golden Safe Box (`y ∈ [220, 1380]` → 1160 px tall).
+ */
+export declare const PhoneFrame: React.FC<PhoneFrameProps>;

package/dist/product-frames/ScreenSpotlightOverlay.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface ScreenSpotlightOverlayProps {
+    /** Highlight left edge (percent `0..100` of parent by default, or px with `unit="px"`) */
+    x: number;
+    /** Highlight top edge */
+    y: number;
+    /** Highlight width */
+    width: number;
+    /** Highlight height */
+    height: number;
+    /** Coordinate unit (default `'percent'` — resolution-independent over any `.mp4`) */
+    unit?: 'percent' | 'px';
+    /** Frame (local to parent `<Sequence>`) when the spotlight starts */
+    startFrame: number;
+    /** Optional frame when the spotlight dismisses */
+    endFrame?: number;
+    /** Short 2–3 word callout pill */
+    label?: string;
+    /** Ring & pill accent (default `'#38bdf8'`) */
+    accentColor?: string;
+    /** Darkening applied outside the highlight (default `0.45`) */
+    dimOpacity?: number;
+    /** Highlight corner radius in px (default `14`) */
+    borderRadius?: number;
+    /** Label placement relative to the highlight (default `'auto'`) */
+    labelPosition?: 'auto' | 'top' | 'bottom';
+}
+/**
+ * Screen-Studio-style deterministic spotlight callout. Place as a child of
+ * `<BrowserFrame>` / `<PhoneFrame>` over a `.mp4` screencast. Dims everything outside
+ * the target rect (CSS `box-shadow` spread inside the parent's `overflow: hidden`),
+ * draws a breathing accent ring, and pops a short label pill.
+ */
+export declare const ScreenSpotlightOverlay: React.FC<ScreenSpotlightOverlayProps>;

package/dist/product-frames/frameMedia.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface FrameMediaProps {
+    /** `.mp4` / `.webm` screen recording (rendered via Remotion `<OffthreadVideo />`) */
+    videoSrc?: string;
+    /** Static screenshot (rendered via Remotion `<Img />`) */
+    imageSrc?: string;
+    /** Trim start of `videoSrc` in frames */
+    startFrom?: number;
+    /** Trim end of `videoSrc` in frames */
+    endAt?: number;
+    playbackRate?: number;
+    /** Mute embedded video audio (default `true` — screencasts rarely carry useful audio) */
+    muted?: boolean;
+    volume?: number;
+    /** CSS `object-fit` for media (default `'cover'`) */
+    objectFit?: React.CSSProperties['objectFit'];
+    /** Optional overlays (e.g. `<ScreenSpotlightOverlay />`) layered above the media */
+    children?: React.ReactNode;
+}
+/**
+ * Shared media viewport for `BrowserFrame` & `PhoneFrame`: video OR image OR children,
+ * with `children` always layered on top so callouts can annotate a live `.mp4`.
+ */
+export declare const FrameMedia: React.FC<FrameMediaProps>;

package/dist/product-frames/index.cjs

@@ -0,0 +1,507 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/kits/src/product-frames/index.ts
+var product_frames_exports = {};
+__export(product_frames_exports, {
+  BrowserFrame: () => BrowserFrame,
+  FrameMedia: () => FrameMedia,
+  PhoneFrame: () => PhoneFrame,
+  ScreenSpotlightOverlay: () => ScreenSpotlightOverlay
+});
+module.exports = __toCommonJS(product_frames_exports);
+
+// packages/kits/src/product-frames/BrowserFrame.tsx
+var import_remotion2 = require("remotion");
+var import_core = require("@make-pictures/core");
+
+// packages/kits/src/product-frames/frameMedia.tsx
+var import_remotion = require("remotion");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FrameMedia = ({
+  videoSrc,
+  imageSrc,
+  startFrom,
+  endAt,
+  playbackRate = 1,
+  muted = true,
+  volume = 1,
+  objectFit = "cover",
+  children
+}) => {
+  const mediaStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit,
+    display: "block"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_remotion.AbsoluteFill, { style: { overflow: "hidden" }, children: [
+    videoSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_remotion.OffthreadVideo,
+      {
+        src: videoSrc,
+        startFrom,
+        endAt,
+        playbackRate,
+        muted,
+        volume: muted ? 0 : volume,
+        style: mediaStyle
+      }
+    ) : imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.Img, { src: imageSrc, style: mediaStyle }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remotion.AbsoluteFill, { style: { overflow: "hidden" }, children }) : null
+  ] });
+};
+
+// packages/kits/src/product-frames/BrowserFrame.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TOOLBAR_HEIGHT = {
+  macos: 52,
+  arc: 46,
+  minimal: 36
+};
+function parseAspectRatio(ar) {
+  if (typeof ar === "number") return ar > 0 ? ar : 1.6;
+  const parts = ar.split("/").map((p) => parseFloat(p.trim()));
+  if (parts.length === 2 && parts[0] > 0 && parts[1] > 0) {
+    return parts[0] / parts[1];
+  }
+  const single = parseFloat(ar);
+  return single > 0 ? single : 1.6;
+}
+var BrowserFrame = ({
+  url,
+  title,
+  variant = "macos",
+  theme = "dark",
+  width = 1360,
+  aspectRatio = "16 / 10",
+  height,
+  enterFrame = 2,
+  accentColor = "#38bdf8",
+  style,
+  ...media
+}) => {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { fps } = (0, import_remotion2.useVideoConfig)();
+  (0, import_core.useStudioFontsReady)();
+  const enter = (0, import_remotion2.spring)({
+    frame: frame - Math.max(2, enterFrame),
+    fps,
+    config: import_core.SPRING_PRESETS.snappy
+  });
+  const isDark = theme === "dark";
+  const toolbarH = TOOLBAR_HEIGHT[variant];
+  const viewportH = typeof height === "number" ? Math.max(40, height - toolbarH) : Math.round(width / parseAspectRatio(aspectRatio));
+  const outerH = viewportH + toolbarH;
+  const chromeBg = isDark ? "#14161F" : "#F1F5F9";
+  const chromeBorder = isDark ? "rgba(255,255,255,0.08)" : "rgba(15,23,42,0.08)";
+  const pillBg = isDark ? "rgba(255,255,255,0.06)" : "#FFFFFF";
+  const textColor = isDark ? "#CBD5E1" : "#334155";
+  const mutedText = isDark ? "#64748B" : "#94A3B8";
+  const radius = variant === "arc" ? 22 : variant === "minimal" ? 14 : 18;
+  const translateY = (0, import_remotion2.interpolate)(enter, [0, 1], [36, 0]);
+  const scale = (0, import_remotion2.interpolate)(enter, [0, 1], [0.94, 1]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width,
+        height: outerH,
+        borderRadius: radius,
+        overflow: "hidden",
+        boxSizing: "border-box",
+        backgroundColor: isDark ? "#0B0D14" : "#FFFFFF",
+        border: `1px solid ${chromeBorder}`,
+        boxShadow: isDark ? "0 50px 120px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04) inset" : "0 40px 100px -20px rgba(15,23,42,0.28), 0 8px 24px -8px rgba(15,23,42,0.12)",
+        opacity: enter,
+        transform: `translate3d(0, ${translateY.toFixed(2)}px, 0) scale(${scale.toFixed(4)})`,
+        transformOrigin: "center center",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              height: toolbarH,
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              padding: "0 18px",
+              boxSizing: "border-box",
+              backgroundColor: variant === "arc" ? "transparent" : chromeBg,
+              borderBottom: variant === "arc" ? "none" : `1px solid ${chromeBorder}`,
+              fontFamily: import_core.FONTS.sans
+            },
+            children: [
+              variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 8, flexShrink: 0 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 13,
+                    height: 13,
+                    borderRadius: 9999,
+                    backgroundColor: c,
+                    boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,0.25)"
+                  }
+                },
+                c
+              )) }),
+              title && variant === "macos" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: mutedText,
+                    whiteSpace: "nowrap",
+                    maxWidth: 220,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, display: "flex", justifyContent: "center" }, children: (url || variant !== "minimal") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    height: variant === "minimal" ? 22 : 30,
+                    minWidth: Math.min(520, width * 0.42),
+                    maxWidth: width * 0.6,
+                    padding: "0 16px",
+                    borderRadius: 9999,
+                    backgroundColor: pillBg,
+                    border: `1px solid ${chromeBorder}`,
+                    boxSizing: "border-box",
+                    fontFamily: import_core.FONTS.mono,
+                    fontSize: variant === "minimal" ? 12 : 14,
+                    fontWeight: 500,
+                    color: textColor,
+                    justifyContent: "center",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: 9999,
+                          backgroundColor: accentColor,
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: url ?? title ?? "" })
+                  ]
+                }
+              ) }),
+              variant !== "minimal" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { width: 55, flexShrink: 0 } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: variant === "arc" ? 8 : 0,
+              right: variant === "arc" ? 8 : 0,
+              bottom: variant === "arc" ? 8 : 0,
+              top: toolbarH,
+              borderRadius: variant === "arc" ? 14 : 0,
+              overflow: "hidden",
+              backgroundColor: isDark ? "#05060A" : "#F8FAFC"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FrameMedia, { ...media })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/product-frames/PhoneFrame.tsx
+var import_remotion3 = require("remotion");
+var import_core2 = require("@make-pictures/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function parseAspectRatio2(ar) {
+  if (typeof ar === "number") return ar > 0 ? ar : 9 / 19.5;
+  const parts = ar.split("/").map((p) => parseFloat(p.trim()));
+  if (parts.length === 2 && parts[0] > 0 && parts[1] > 0) {
+    return parts[0] / parts[1];
+  }
+  const single = parseFloat(ar);
+  return single > 0 ? single : 9 / 19.5;
+}
+var PhoneFrame = ({
+  variant = "dynamic-island",
+  theme = "dark",
+  width = 520,
+  aspectRatio = "9 / 19.5",
+  height,
+  enterFrame = 2,
+  style,
+  ...media
+}) => {
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps } = (0, import_remotion3.useVideoConfig)();
+  const enter = (0, import_remotion3.spring)({
+    frame: frame - Math.max(2, enterFrame),
+    fps,
+    config: import_core2.SPRING_PRESETS.snappy
+  });
+  const isDark = theme === "dark";
+  const outerH = typeof height === "number" ? height : Math.round(width / parseAspectRatio2(aspectRatio));
+  const bezel = Math.max(10, Math.round(width * 0.03));
+  const outerRadius = Math.round(width * 0.135);
+  const innerRadius = Math.max(8, outerRadius - bezel);
+  const titanium = isDark ? "linear-gradient(145deg, #3A3D46 0%, #1C1E24 40%, #2A2C33 70%, #45484F 100%)" : "linear-gradient(145deg, #F1F2F4 0%, #C9CCD2 45%, #E4E6EA 75%, #FFFFFF 100%)";
+  const translateY = (0, import_remotion3.interpolate)(enter, [0, 1], [42, 0]);
+  const scale = (0, import_remotion3.interpolate)(enter, [0, 1], [0.93, 1]);
+  const islandW = Math.round(width * 0.3);
+  const islandH = Math.round(width * 0.068);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width,
+        height: outerH,
+        borderRadius: outerRadius,
+        padding: bezel,
+        boxSizing: "border-box",
+        background: titanium,
+        boxShadow: isDark ? "0 60px 120px -24px rgba(0,0,0,0.75), inset 0 0 0 1.5px rgba(255,255,255,0.12)" : "0 50px 110px -24px rgba(15,23,42,0.32), inset 0 0 0 1.5px rgba(255,255,255,0.8)",
+        opacity: enter,
+        transform: `translate3d(0, ${translateY.toFixed(2)}px, 0) scale(${scale.toFixed(4)})`,
+        transformOrigin: "center center",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: -3,
+              top: outerH * 0.2,
+              width: 4,
+              height: outerH * 0.06,
+              borderRadius: 4,
+              background: isDark ? "#2A2C33" : "#C9CCD2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: -3,
+              top: outerH * 0.26,
+              width: 4,
+              height: outerH * 0.1,
+              borderRadius: 4,
+              background: isDark ? "#2A2C33" : "#C9CCD2"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              borderRadius: innerRadius,
+              overflow: "hidden",
+              backgroundColor: "#000000"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FrameMedia, { ...media }),
+              variant === "dynamic-island" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: Math.round(width * 0.03),
+                    left: "50%",
+                    width: islandW,
+                    height: islandH,
+                    marginLeft: -islandW / 2,
+                    borderRadius: 9999,
+                    backgroundColor: "#000000",
+                    boxShadow: "0 0 0 1px rgba(255,255,255,0.04)",
+                    zIndex: 5
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: Math.round(width * 0.022),
+                    left: "50%",
+                    width: Math.round(width * 0.34),
+                    height: Math.max(4, Math.round(width * 0.011)),
+                    marginLeft: -Math.round(width * 0.17),
+                    borderRadius: 9999,
+                    backgroundColor: "rgba(255,255,255,0.82)",
+                    boxShadow: "0 0 0 0.5px rgba(0,0,0,0.3)",
+                    zIndex: 5
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/product-frames/ScreenSpotlightOverlay.tsx
+var import_remotion4 = require("remotion");
+var import_core3 = require("@make-pictures/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ScreenSpotlightOverlay = ({
+  x,
+  y,
+  width,
+  height,
+  unit = "percent",
+  startFrame,
+  endFrame,
+  label,
+  accentColor = "#38bdf8",
+  dimOpacity = 0.45,
+  borderRadius = 14,
+  labelPosition = "auto"
+}) => {
+  const frame = (0, import_remotion4.useCurrentFrame)();
+  const { fps } = (0, import_remotion4.useVideoConfig)();
+  (0, import_core3.useStudioFontsReady)();
+  const effectiveStart = Math.max(2, startFrame);
+  const enter = (0, import_remotion4.spring)({
+    frame: frame - effectiveStart,
+    fps,
+    config: import_core3.SPRING_PRESETS.smooth
+  });
+  const exit = typeof endFrame === "number" ? (0, import_remotion4.spring)({ frame: frame - endFrame, fps, config: import_core3.SPRING_PRESETS.smooth }) : 0;
+  const visibility = Math.max(0, Math.min(1, enter * (1 - exit)));
+  if (visibility <= 5e-3) {
+    return null;
+  }
+  const u = unit === "percent" ? "%" : "px";
+  const grow = (0, import_remotion4.interpolate)(enter, [0, 1], [unit === "percent" ? 3 : 24, 0]);
+  const left = x - grow;
+  const top = y - grow;
+  const w = width + grow * 2;
+  const h = height + grow * 2;
+  const f60 = frame * (60 / Math.max(1, fps));
+  const breathe = 0.5 + 0.5 * Math.sin(f60 * 0.045);
+  const ringGlow = 14 + breathe * 10;
+  const labelPop = (0, import_remotion4.spring)({
+    frame: frame - effectiveStart - 8,
+    fps,
+    config: import_core3.SPRING_PRESETS.snappy
+  });
+  const placeTop = labelPosition === "top" || labelPosition === "auto" && (unit === "percent" ? y > 18 : y > 90);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none",
+        zIndex: 10
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${left}${u}`,
+              top: `${top}${u}`,
+              width: `${w}${u}`,
+              height: `${h}${u}`,
+              borderRadius,
+              boxShadow: `0 0 0 9999px rgba(2, 6, 23, ${(dimOpacity * visibility).toFixed(3)})`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${left}${u}`,
+              top: `${top}${u}`,
+              width: `${w}${u}`,
+              height: `${h}${u}`,
+              borderRadius,
+              border: `3px solid ${accentColor}`,
+              boxSizing: "border-box",
+              boxShadow: `0 0 ${ringGlow.toFixed(1)}px ${accentColor}AA, inset 0 0 ${(ringGlow * 0.6).toFixed(1)}px ${accentColor}55`,
+              opacity: visibility
+            },
+            children: label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: "50%",
+                  ...placeTop ? { bottom: "100%", marginBottom: 12 } : { top: "100%", marginTop: 12 },
+                  transform: `translateX(-50%) translateY(${(0, import_remotion4.interpolate)(labelPop, [0, 1], [placeTop ? 8 : -8, 0]).toFixed(2)}px) scale(${(0, import_remotion4.interpolate)(labelPop, [0, 1], [0.85, 1]).toFixed(3)})`,
+                  opacity: labelPop * visibility,
+                  padding: "7px 16px",
+                  borderRadius: 9999,
+                  backgroundColor: accentColor,
+                  color: "#020617",
+                  fontFamily: import_core3.FONTS.sans,
+                  fontSize: 18,
+                  fontWeight: 800,
+                  letterSpacing: "-0.01em",
+                  whiteSpace: "nowrap",
+                  boxShadow: `0 10px 28px ${accentColor}66`
+                },
+                children: label
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};

package/dist/product-frames/index.d.ts

@@ -0,0 +1,8 @@
+export { BrowserFrame } from './BrowserFrame';
+export type { BrowserFrameProps } from './BrowserFrame';
+export { PhoneFrame } from './PhoneFrame';
+export type { PhoneFrameProps } from './PhoneFrame';
+export { ScreenSpotlightOverlay } from './ScreenSpotlightOverlay';
+export type { ScreenSpotlightOverlayProps } from './ScreenSpotlightOverlay';
+export { FrameMedia } from './frameMedia';
+export type { FrameMediaProps } from './frameMedia';

package/dist/product-frames/index.mjs

@@ -0,0 +1,12 @@
+import {
+  BrowserFrame,
+  FrameMedia,
+  PhoneFrame,
+  ScreenSpotlightOverlay
+} from "../chunk-4Z3G6FPZ.mjs";
+export {
+  BrowserFrame,
+  FrameMedia,
+  PhoneFrame,
+  ScreenSpotlightOverlay
+};