@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/chunk-4Z3G6FPZ.mjs

@@ -0,0 +1,485 @@
+// packages/kits/src/product-frames/BrowserFrame.tsx
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { FONTS, SPRING_PRESETS, useStudioFontsReady } from "@make-pictures/core";
+
+// packages/kits/src/product-frames/frameMedia.tsx
+import { AbsoluteFill, Img, OffthreadVideo } from "remotion";
+import { jsx, jsxs } from "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__ */ jsxs(AbsoluteFill, { style: { overflow: "hidden" }, children: [
+    videoSrc ? /* @__PURE__ */ jsx(
+      OffthreadVideo,
+      {
+        src: videoSrc,
+        startFrom,
+        endAt,
+        playbackRate,
+        muted,
+        volume: muted ? 0 : volume,
+        style: mediaStyle
+      }
+    ) : imageSrc ? /* @__PURE__ */ jsx(Img, { src: imageSrc, style: mediaStyle }) : null,
+    children ? /* @__PURE__ */ jsx(AbsoluteFill, { style: { overflow: "hidden" }, children }) : null
+  ] });
+};
+
+// packages/kits/src/product-frames/BrowserFrame.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "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 = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  useStudioFontsReady();
+  const enter = spring({
+    frame: frame - Math.max(2, enterFrame),
+    fps,
+    config: 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 = interpolate(enter, [0, 1], [36, 0]);
+  const scale = interpolate(enter, [0, 1], [0.94, 1]);
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsxs2(
+          "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: FONTS.sans
+            },
+            children: [
+              variant !== "minimal" && /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 8, flexShrink: 0 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: mutedText,
+                    whiteSpace: "nowrap",
+                    maxWidth: 220,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { style: { flex: 1, display: "flex", justifyContent: "center" }, children: (url || variant !== "minimal") && /* @__PURE__ */ jsxs2(
+                "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: FONTS.mono,
+                    fontSize: variant === "minimal" ? 12 : 14,
+                    fontWeight: 500,
+                    color: textColor,
+                    justifyContent: "center",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          width: 8,
+                          height: 8,
+                          borderRadius: 9999,
+                          backgroundColor: accentColor,
+                          flexShrink: 0
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: url ?? title ?? "" })
+                  ]
+                }
+              ) }),
+              variant !== "minimal" && /* @__PURE__ */ jsx2("div", { style: { width: 55, flexShrink: 0 } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(FrameMedia, { ...media })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/product-frames/PhoneFrame.tsx
+import { interpolate as interpolate2, spring as spring2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { SPRING_PRESETS as SPRING_PRESETS2 } from "@make-pictures/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "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 = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
+  const enter = spring2({
+    frame: frame - Math.max(2, enterFrame),
+    fps,
+    config: SPRING_PRESETS2.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 = interpolate2(enter, [0, 1], [42, 0]);
+  const scale = interpolate2(enter, [0, 1], [0.93, 1]);
+  const islandW = Math.round(width * 0.3);
+  const islandH = Math.round(width * 0.068);
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsx3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: -3,
+              top: outerH * 0.2,
+              width: 4,
+              height: outerH * 0.06,
+              borderRadius: 4,
+              background: isDark ? "#2A2C33" : "#C9CCD2"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: -3,
+              top: outerH * 0.26,
+              width: 4,
+              height: outerH * 0.1,
+              borderRadius: 4,
+              background: isDark ? "#2A2C33" : "#C9CCD2"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              borderRadius: innerRadius,
+              overflow: "hidden",
+              backgroundColor: "#000000"
+            },
+            children: [
+              /* @__PURE__ */ jsx3(FrameMedia, { ...media }),
+              variant === "dynamic-island" && /* @__PURE__ */ jsx3(
+                "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__ */ jsx3(
+                "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
+import { interpolate as interpolate3, spring as spring3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
+import { FONTS as FONTS2, SPRING_PRESETS as SPRING_PRESETS3, useStudioFontsReady as useStudioFontsReady2 } from "@make-pictures/core";
+import { jsx as jsx4, jsxs as jsxs4 } from "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 = useCurrentFrame3();
+  const { fps } = useVideoConfig3();
+  useStudioFontsReady2();
+  const effectiveStart = Math.max(2, startFrame);
+  const enter = spring3({
+    frame: frame - effectiveStart,
+    fps,
+    config: SPRING_PRESETS3.smooth
+  });
+  const exit = typeof endFrame === "number" ? spring3({ frame: frame - endFrame, fps, config: SPRING_PRESETS3.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 = interpolate3(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 = spring3({
+    frame: frame - effectiveStart - 8,
+    fps,
+    config: SPRING_PRESETS3.snappy
+  });
+  const placeTop = labelPosition === "top" || labelPosition === "auto" && (unit === "percent" ? y > 18 : y > 90);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none",
+        zIndex: 10
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+          "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__ */ jsx4(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: "50%",
+                  ...placeTop ? { bottom: "100%", marginBottom: 12 } : { top: "100%", marginTop: 12 },
+                  transform: `translateX(-50%) translateY(${interpolate3(labelPop, [0, 1], [placeTop ? 8 : -8, 0]).toFixed(2)}px) scale(${interpolate3(labelPop, [0, 1], [0.85, 1]).toFixed(3)})`,
+                  opacity: labelPop * visibility,
+                  padding: "7px 16px",
+                  borderRadius: 9999,
+                  backgroundColor: accentColor,
+                  color: "#020617",
+                  fontFamily: FONTS2.sans,
+                  fontSize: 18,
+                  fontWeight: 800,
+                  letterSpacing: "-0.01em",
+                  whiteSpace: "nowrap",
+                  boxShadow: `0 10px 28px ${accentColor}66`
+                },
+                children: label
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  FrameMedia,
+  BrowserFrame,
+  PhoneFrame,
+  ScreenSpotlightOverlay
+};