@sonordev/agency-site-kit 0.3.0 → 0.4.0

package/dist/portfolio/primitives/BeforeAfterSlider.js

@@ -0,0 +1,292 @@
+'use client';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
+
+// src/portfolio/components/primitives/BeforeAfterSlider.tsx
+import { useRef, useEffect, useState, useCallback } from "react";
+import Image from "next/image";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BeforeAfterSlider({
+  beforeSrc,
+  afterSrc,
+  beforeAlt = "Before",
+  afterAlt = "After",
+  defaultPosition = 50,
+  className = ""
+}) {
+  const containerRef = useRef(null);
+  const dividerRef = useRef(null);
+  const clipRef = useRef(null);
+  const [position, setPosition] = useState(defaultPosition);
+  const isDragging = useRef(false);
+  const hasAnimated = useRef(false);
+  const updatePosition = useCallback((pct) => {
+    const clamped = Math.max(0, Math.min(100, pct));
+    setPosition(clamped);
+    if (clipRef.current) {
+      clipRef.current.style.clipPath = `inset(0 ${100 - clamped}% 0 0)`;
+    }
+    if (dividerRef.current) {
+      dividerRef.current.style.left = `${clamped}%`;
+    }
+  }, []);
+  const getPositionFromEvent = useCallback((e) => {
+    const container = containerRef.current;
+    if (!container) return defaultPosition;
+    const rect = container.getBoundingClientRect();
+    return (e.clientX - rect.left) / rect.width * 100;
+  }, [defaultPosition]);
+  const handlePointerDown = useCallback((e) => {
+    isDragging.current = true;
+    e.target.setPointerCapture(e.pointerId);
+    updatePosition(getPositionFromEvent(e));
+  }, [getPositionFromEvent, updatePosition]);
+  const handlePointerMove = useCallback((e) => {
+    if (!isDragging.current) return;
+    updatePosition(getPositionFromEvent(e));
+  }, [getPositionFromEvent, updatePosition]);
+  const handlePointerUp = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const step = e.shiftKey ? 10 : 5;
+      if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        updatePosition(position - step);
+      } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        updatePosition(position + step);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        updatePosition(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        updatePosition(100);
+      }
+    },
+    [position, updatePosition]
+  );
+  useEffect(() => {
+    updatePosition(defaultPosition);
+  }, [defaultPosition, updatePosition]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const easeInOut = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    const easeOut = (t) => 1 - Math.pow(1 - t, 2);
+    const segments = [
+      { to: 80, duration: 0.6, ease: easeInOut },
+      { to: 20, duration: 0.8, ease: easeInOut },
+      { to: 50, duration: 0.6, ease: easeOut }
+    ];
+    let raf = 0;
+    const play = () => {
+      let index = 0;
+      let from = defaultPosition;
+      let start = performance.now();
+      const tick = (now) => {
+        const seg = segments[index];
+        const p = Math.min(1, (now - start) / (seg.duration * 1e3));
+        updatePosition(from + (seg.to - from) * seg.ease(p));
+        if (p >= 1) {
+          from = seg.to;
+          index += 1;
+          if (index >= segments.length) return;
+          start = now;
+        }
+        raf = requestAnimationFrame(tick);
+      };
+      raf = requestAnimationFrame(tick);
+    };
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        if (hasAnimated.current) return;
+        hasAnimated.current = true;
+        play();
+      },
+      { rootMargin: "0px 0px -20% 0px" }
+      // ≈ 'top 80%' trigger start
+    );
+    io.observe(container);
+    return () => {
+      io.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [defaultPosition, updatePosition]);
+  const before = resolvePortfolioImage(beforeSrc);
+  const after = resolvePortfolioImage(afterSrc);
+  if (!before || !after) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Before and after comparison",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(position),
+      "aria-valuetext": `${Math.round(position)}% before, ${100 - Math.round(position)}% after`,
+      className: `relative select-none overflow-hidden ${className}`,
+      style: { touchAction: "pan-y", cursor: "ew-resize" },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      children: [
+        after.width && after.height ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: after.url,
+            alt: afterAlt,
+            width: after.width,
+            height: after.height,
+            sizes: "(max-width: 1280px) 100vw, 1200px",
+            draggable: false,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "auto",
+              objectFit: "cover"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: after.url,
+            alt: afterAlt,
+            draggable: false,
+            loading: "lazy",
+            decoding: "async",
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: clipRef,
+            style: {
+              position: "absolute",
+              inset: 0,
+              clipPath: `inset(0 ${100 - position}% 0 0)`
+            },
+            children: /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: before.url,
+                alt: beforeAlt,
+                fill: true,
+                sizes: "(max-width: 1280px) 100vw, 1200px",
+                draggable: false,
+                style: { objectFit: "cover" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: dividerRef,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: `${position}%`,
+              width: "3px",
+              background: "var(--sk-primary, #6366f1)",
+              transform: "translateX(-50%)",
+              zIndex: 10
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "40px",
+                  height: "40px",
+                  borderRadius: "9999px",
+                  background: "var(--sk-primary, #6366f1)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+                },
+                children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "4", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "4", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "8", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "8", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.5", fill: "white" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "12", r: "1.5", fill: "white" })
+                ] })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "12px",
+              left: "12px",
+              padding: "4px 10px",
+              borderRadius: "6px",
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(4px)",
+              color: "white",
+              fontSize: "12px",
+              fontWeight: 600,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              pointerEvents: "none",
+              zIndex: 5
+            },
+            children: "Before"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "12px",
+              right: "12px",
+              padding: "4px 10px",
+              borderRadius: "6px",
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(4px)",
+              color: "white",
+              fontSize: "12px",
+              fontWeight: 600,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+              pointerEvents: "none",
+              zIndex: 5
+            },
+            children: "After"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BeforeAfterSlider as default
+};
+//# sourceMappingURL=BeforeAfterSlider.js.map

package/dist/portfolio/primitives/BeforeAfterSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/BeforeAfterSlider.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport Image from 'next/image';\nimport { resolvePortfolioImage } from '../../../shared/images';\n\ninterface BeforeAfterSliderProps {\n  beforeSrc: string;\n  afterSrc: string;\n  beforeAlt?: string;\n  afterAlt?: string;\n  defaultPosition?: number;\n  className?: string;\n}\n\nexport default function BeforeAfterSlider({\n  beforeSrc,\n  afterSrc,\n  beforeAlt = 'Before',\n  afterAlt = 'After',\n  defaultPosition = 50,\n  className = '',\n}: BeforeAfterSliderProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const dividerRef = useRef<HTMLDivElement>(null);\n  const clipRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState(defaultPosition);\n  const isDragging = useRef(false);\n  const hasAnimated = useRef(false);\n\n  // Update clip path\n  const updatePosition = useCallback((pct: number) => {\n    const clamped = Math.max(0, Math.min(100, pct));\n    setPosition(clamped);\n    if (clipRef.current) {\n      clipRef.current.style.clipPath = `inset(0 ${100 - clamped}% 0 0)`;\n    }\n    if (dividerRef.current) {\n      dividerRef.current.style.left = `${clamped}%`;\n    }\n  }, []);\n\n  // Pointer event handlers\n  const getPositionFromEvent = useCallback((e: PointerEvent | React.PointerEvent) => {\n    const container = containerRef.current;\n    if (!container) return defaultPosition;\n    const rect = container.getBoundingClientRect();\n    return ((e.clientX - rect.left) / rect.width) * 100;\n  }, [defaultPosition]);\n\n  const handlePointerDown = useCallback((e: React.PointerEvent) => {\n    isDragging.current = true;\n    (e.target as HTMLElement).setPointerCapture(e.pointerId);\n    updatePosition(getPositionFromEvent(e));\n  }, [getPositionFromEvent, updatePosition]);\n\n  const handlePointerMove = useCallback((e: React.PointerEvent) => {\n    if (!isDragging.current) return;\n    updatePosition(getPositionFromEvent(e));\n  }, [getPositionFromEvent, updatePosition]);\n\n  const handlePointerUp = useCallback(() => {\n    isDragging.current = false;\n  }, []);\n\n  // Keyboard operation — arrows nudge, Home/End jump (WAI-ARIA slider)\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const step = e.shiftKey ? 10 : 5;\n      if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault();\n        updatePosition(position - step);\n      } else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        updatePosition(position + step);\n      } else if (e.key === 'Home') {\n        e.preventDefault();\n        updatePosition(0);\n      } else if (e.key === 'End') {\n        e.preventDefault();\n        updatePosition(100);\n      }\n    },\n    [position, updatePosition],\n  );\n\n  // Initial clip position\n  useEffect(() => {\n    updatePosition(defaultPosition);\n  }, [defaultPosition, updatePosition]);\n\n  // Entry auto-demo: IntersectionObserver + a rAF tween chain that wiggles\n  // the divider 80 -> 20 -> 50 once, so visitors see the slider is draggable.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n\n    const easeInOut = (t: number) =>\n      t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // ≈ power2.inOut\n    const easeOut = (t: number) => 1 - Math.pow(1 - t, 2); // ≈ power2.out\n\n    // Same waypoints, segment durations, and eases as the old timeline.\n    const segments = [\n      { to: 80, duration: 0.6, ease: easeInOut },\n      { to: 20, duration: 0.8, ease: easeInOut },\n      { to: 50, duration: 0.6, ease: easeOut },\n    ];\n\n    let raf = 0;\n\n    const play = () => {\n      let index = 0;\n      let from = defaultPosition;\n      let start = performance.now();\n      const tick = (now: number) => {\n        const seg = segments[index];\n        const p = Math.min(1, (now - start) / (seg.duration * 1000));\n        updatePosition(from + (seg.to - from) * seg.ease(p));\n        if (p >= 1) {\n          from = seg.to;\n          index += 1;\n          if (index >= segments.length) return;\n          start = now;\n        }\n        raf = requestAnimationFrame(tick);\n      };\n      raf = requestAnimationFrame(tick);\n    };\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry.isIntersecting) return;\n        io.disconnect();\n        if (hasAnimated.current) return;\n        hasAnimated.current = true;\n        play();\n      },\n      { rootMargin: '0px 0px -20% 0px' }, // ≈ 'top 80%' trigger start\n    );\n    io.observe(container);\n\n    return () => {\n      io.disconnect();\n      cancelAnimationFrame(raf);\n    };\n  }, [defaultPosition, updatePosition]);\n\n  const before = resolvePortfolioImage(beforeSrc);\n  const after = resolvePortfolioImage(afterSrc);\n  // Without both images the comparison is meaningless.\n  if (!before || !after) return null;\n\n  return (\n    <div\n      ref={containerRef}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label=\"Before and after comparison\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={Math.round(position)}\n      aria-valuetext={`${Math.round(position)}% before, ${100 - Math.round(position)}% after`}\n      className={`relative select-none overflow-hidden ${className}`}\n      style={{ touchAction: 'pan-y', cursor: 'ew-resize' }}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      onKeyDown={handleKeyDown}\n    >\n      {/* After image (background — establishes the container's height) */}\n      {after.width && after.height ? (\n        <Image\n          src={after.url}\n          alt={afterAlt}\n          width={after.width}\n          height={after.height}\n          sizes=\"(max-width: 1280px) 100vw, 1200px\"\n          draggable={false}\n          style={{\n            display: 'block',\n            width: '100%',\n            height: 'auto',\n            objectFit: 'cover',\n          }}\n        />\n      ) : (\n        <img\n          src={after.url}\n          alt={afterAlt}\n          draggable={false}\n          loading=\"lazy\"\n          decoding=\"async\"\n          style={{\n            display: 'block',\n            width: '100%',\n            height: '100%',\n            objectFit: 'cover',\n          }}\n        />\n      )}\n\n      {/* Before image (clipped overlay) */}\n      <div\n        ref={clipRef}\n        style={{\n          position: 'absolute',\n          inset: 0,\n          clipPath: `inset(0 ${100 - position}% 0 0)`,\n        }}\n      >\n        <Image\n          src={before.url}\n          alt={beforeAlt}\n          fill\n          sizes=\"(max-width: 1280px) 100vw, 1200px\"\n          draggable={false}\n          style={{ objectFit: 'cover' }}\n        />\n      </div>\n\n      {/* Divider line */}\n      <div\n        ref={dividerRef}\n        style={{\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          left: `${position}%`,\n          width: '3px',\n          background: 'var(--sk-primary, #6366f1)',\n          transform: 'translateX(-50%)',\n          zIndex: 10,\n        }}\n      >\n        {/* Handle */}\n        <div\n          style={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n            width: '40px',\n            height: '40px',\n            borderRadius: '9999px',\n            background: 'var(--sk-primary, #6366f1)',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',\n          }}\n        >\n          {/* Grip dots */}\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <circle cx=\"5\" cy=\"4\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"4\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"5\" cy=\"8\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"8\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"white\" />\n            <circle cx=\"11\" cy=\"12\" r=\"1.5\" fill=\"white\" />\n          </svg>\n        </div>\n      </div>\n\n      {/* Labels */}\n      <div\n        style={{\n          position: 'absolute',\n          top: '12px',\n          left: '12px',\n          padding: '4px 10px',\n          borderRadius: '6px',\n          background: 'rgba(0,0,0,0.6)',\n          backdropFilter: 'blur(4px)',\n          color: 'white',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.05em',\n          textTransform: 'uppercase',\n          pointerEvents: 'none',\n          zIndex: 5,\n        }}\n      >\n        Before\n      </div>\n      <div\n        style={{\n          position: 'absolute',\n          top: '12px',\n          right: '12px',\n          padding: '4px 10px',\n          borderRadius: '6px',\n          background: 'rgba(0,0,0,0.6)',\n          backdropFilter: 'blur(4px)',\n          color: 'white',\n          fontSize: '12px',\n          fontWeight: 600,\n          letterSpacing: '0.05em',\n          textTransform: 'uppercase',\n          pointerEvents: 'none',\n          zIndex: 5,\n        }}\n      >\n        After\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/portfolio/primitives/DeviceTrifolio.cjs

@@ -0,0 +1,298 @@
+'use client';
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/portfolio/components/primitives/DeviceTrifolio.tsx
+var DeviceTrifolio_exports = {};
+__export(DeviceTrifolio_exports, {
+  default: () => DeviceTrifolio
+});
+module.exports = __toCommonJS(DeviceTrifolio_exports);
+var import_react = require("react");
+var import_image = __toESM(require("next/image"), 1);
+
+// src/shared/images.ts
+var SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\d+x\d+-[a-z0-9]+$/;
+var FILENAME_DIMS = /-(\d{2,5})x(\d{2,5})\.[a-z0-9]+(?:\?.*)?$/i;
+var warnedAboutRefs = false;
+function resolvePortfolioImage(input) {
+  const raw = typeof input === "string" ? input : input?.asset?._ref ?? "";
+  const value = (raw || "").trim();
+  if (!value) return null;
+  if (SANITY_ASSET_REF.test(value)) {
+    if (!warnedAboutRefs && typeof console !== "undefined") {
+      warnedAboutRefs = true;
+      console.warn(
+        "[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an image URL \u2014 skipping render. The Sonor API should resolve image refs to cdn.sanity.io URLs before returning portfolio sections."
+      );
+    }
+    return null;
+  }
+  if (!/^https?:\/\//i.test(value) && !value.startsWith("/")) return null;
+  const dims = value.match(FILENAME_DIMS);
+  if (dims) {
+    const width = parseInt(dims[1], 10);
+    const height = parseInt(dims[2], 10);
+    if (width > 0 && height > 0) return { url: value, width, height };
+  }
+  return { url: value };
+}
+
+// src/portfolio/components/primitives/DeviceTrifolio.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function ScreenshotOverlay({
+  src,
+  alt,
+  sizes,
+  priority = false,
+  hidden
+}) {
+  const resolved = resolvePortfolioImage(src);
+  if (!resolved) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_image.default,
+    {
+      src: resolved.url,
+      alt,
+      fill: true,
+      sizes,
+      priority,
+      fetchPriority: priority ? "high" : void 0,
+      style: {
+        objectFit: "cover",
+        objectPosition: "top center",
+        zIndex: 2,
+        opacity: hidden ? 0 : 1,
+        transition: "opacity 0.8s ease",
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+function useScaledIframe(viewportWidth) {
+  const containerRef = (0, import_react.useRef)(null);
+  const [scale, setScale] = (0, import_react.useState)(1);
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateScale = () => {
+      const containerWidth = container.offsetWidth;
+      setScale(containerWidth / viewportWidth);
+    };
+    updateScale();
+    const resizeObserver = new ResizeObserver(updateScale);
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [viewportWidth]);
+  return { containerRef, scale };
+}
+function useIframeLoadDetection() {
+  const [loaded, setLoaded] = (0, import_react.useState)(false);
+  const iframeRef = (0, import_react.useRef)(null);
+  const onLoad = (0, import_react.useCallback)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    setTimeout(() => {
+      try {
+        const doc = iframe.contentDocument;
+        if (!doc?.body) {
+          return;
+        }
+        const numElements = doc.querySelectorAll("*").length;
+        if (numElements > 20) setLoaded(true);
+      } catch {
+        setLoaded(true);
+      }
+    }, 1500);
+  }, []);
+  return { iframeRef, loaded, onLoad };
+}
+function MacBookFrame({ url, screenshot }) {
+  const viewportWidth = 1440;
+  const viewportHeight = 900;
+  const { containerRef, scale } = useScaledIframe(viewportWidth);
+  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "relative rounded-t-[10px] p-[4px] pb-0",
+        style: {
+          background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)",
+          boxShadow: "0 -4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "relative rounded-t-[7px] px-[8px] pt-[8px] pb-0",
+            style: { background: "#0a0a0a" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute top-0 left-1/2 -translate-x-1/2 w-[70px] h-[18px] flex items-center justify-center z-10",
+                  style: { background: "#0a0a0a", borderRadius: "0 0 10px 10px" },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[5px] h-[5px] rounded-full", style: { background: "#2a3a2a", boxShadow: "0 0 0 1px #1a1a1a" } })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "relative overflow-hidden rounded-t-[3px]", style: { aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenshotOverlay, { src: screenshot, alt: "Desktop preview", sizes: "(max-width: 1024px) 90vw, 640px", priority: true, hidden: iframeLoaded }),
+                url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { src: url, title: "Desktop", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[8px]", style: { background: "#0a0a0a", boxShadow: "0 1px 4px rgba(0,0,0,0.3)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "relative h-[12px] rounded-b-[10px]",
+        style: {
+          background: "linear-gradient(to bottom, #e0e0e5, #c8c8cd 20%, #b0b0b5 80%, #a0a0a5)",
+          boxShadow: "0 4px 15px rgba(0,0,0,0.3)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "absolute top-0 left-1/2 -translate-x-1/2 w-[25%] h-[4px] rounded-b-[4px]",
+            style: { background: "linear-gradient(to bottom, #909095, #a8a8ad)" }
+          }
+        )
+      }
+    )
+  ] });
+}
+function IPadFrame({ url, screenshot }) {
+  const viewportWidth = 768;
+  const viewportHeight = 1024;
+  const { containerRef, scale } = useScaledIframe(viewportWidth);
+  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative p-[1.5%]", style: { background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)", borderRadius: "8% / 6%", boxShadow: "0 30px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.9) inset, inset 0 1px 0 rgba(255,255,255,0.8)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative p-[2%]", style: { background: "#0a0a0a", borderRadius: "6% / 4.5%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-[1.2%] left-1/2 -translate-x-1/2 w-[1.8%] aspect-square rounded-full z-10", style: { background: "#1a1a1f" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "2%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenshotOverlay, { src: screenshot, alt: "Tablet preview", sizes: "(max-width: 1024px) 40vw, 240px", hidden: iframeLoaded }),
+      url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { src: url, title: "Tablet", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
+    ] })
+  ] }) });
+}
+function IPhoneFrame({ url, screenshot }) {
+  const viewportWidth = 393;
+  const viewportHeight = 852;
+  const { containerRef, scale } = useScaledIframe(viewportWidth);
+  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "relative p-[2.5%]",
+      style: {
+        background: "linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)",
+        borderRadius: "18% / 8%",
+        boxShadow: "0 30px 60px -15px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.9) inset, inset 0 1px 0 rgba(255,255,255,0.8)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-0 top-[18%] w-[1%] h-[6%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-0 top-[26%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-0 top-[38%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-0 top-[22%] w-[1%] h-[12%] rounded-r-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "relative p-[3%]",
+            style: { background: "#0a0a0a", borderRadius: "14% / 6%" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute top-[2.5%] left-1/2 -translate-x-1/2 w-[28%] h-[3.5%] rounded-full z-10",
+                  style: { background: "#1a1a1a" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "8% / 4%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScreenshotOverlay, { src: screenshot, alt: "Mobile preview", sizes: "(max-width: 1024px) 25vw, 150px", hidden: iframeLoaded }),
+                url && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { src: url, title: "Mobile", loading: "eager", scrolling: "no", tabIndex: -1, sandbox: "allow-scripts allow-same-origin", ref: iframeRef, onLoad: onIframeLoad, className: "border-0 pointer-events-none", style: { position: "absolute", top: 0, left: 0, width: `${viewportWidth}px`, height: `${viewportHeight}px`, transformOrigin: "top left", transform: `scale(${scale})` } })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: "absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[34%] h-[1%] rounded-full",
+                  style: { background: "rgba(255,255,255,0.25)" }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DeviceTrifolio({
+  url,
+  screenshots,
+  className = ""
+}) {
+  const frameUrl = url || "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      "data-screenshot-target": "device-trifolio",
+      className: `relative w-full min-w-0 max-w-full overflow-x-clip ${className}`,
+      style: { aspectRatio: "11/5", minHeight: "200px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-device": "macbook",
+            className: "absolute left-1/2 -translate-x-1/2 bottom-0 w-[65%] z-10",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MacBookFrame, { url: frameUrl, screenshot: screenshots?.desktop })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-device": "ipad",
+            className: "absolute left-[8%] bottom-0 w-[28%] z-20",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IPadFrame, { url: frameUrl, screenshot: screenshots?.tablet })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-device": "iphone",
+            className: "absolute right-[10%] bottom-0 w-[14%] z-30",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IPhoneFrame, { url: frameUrl, screenshot: screenshots?.mobile })
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=DeviceTrifolio.cjs.map