@sonordev/agency-site-kit 0.3.1 → 0.4.0

package/dist/portfolio/primitives/DeviceTrifolio.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/DeviceTrifolio.tsx","../../../src/shared/images.ts"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport Image from 'next/image';\nimport { resolvePortfolioImage } from '../../../shared/images';\n\n/**\n * Screenshot layer inside a device frame. Sits above the live iframe and\n * fades out once the iframe verifies. The desktop shot is a likely LCP\n * element on desktop viewports, so it loads with priority.\n */\nfunction ScreenshotOverlay({\n  src,\n  alt,\n  sizes,\n  priority = false,\n  hidden,\n}: {\n  src?: string;\n  alt: string;\n  sizes: string;\n  priority?: boolean;\n  hidden: boolean;\n}) {\n  const resolved = resolvePortfolioImage(src);\n  if (!resolved) return null;\n  return (\n    <Image\n      src={resolved.url}\n      alt={alt}\n      fill\n      sizes={sizes}\n      priority={priority}\n      fetchPriority={priority ? 'high' : undefined}\n      style={{\n        objectFit: 'cover',\n        objectPosition: 'top center',\n        zIndex: 2,\n        opacity: hidden ? 0 : 1,\n        transition: 'opacity 0.8s ease',\n        pointerEvents: 'none' as const,\n      }}\n    />\n  );\n}\n\ninterface DeviceTrifolioProps {\n  url?: string;\n  screenshots?: {\n    desktop?: string;\n    tablet?: string;\n    mobile?: string;\n  };\n  className?: string;\n}\n\n// ─── Hooks ───────────────────────────────────────────────────────────────────\n\nfunction useScaledIframe(viewportWidth: number) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const updateScale = () => {\n      const containerWidth = container.offsetWidth;\n      setScale(containerWidth / viewportWidth);\n    };\n\n    updateScale();\n    const resizeObserver = new ResizeObserver(updateScale);\n    resizeObserver.observe(container);\n    return () => resizeObserver.disconnect();\n  }, [viewportWidth]);\n\n  return { containerRef, scale };\n}\n\nfunction useScrollSafeIframe() {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [iframeFailed, setIframeFailed] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const loadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleLoad = useCallback(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return;\n\n    // Wait for iframe to paint, then verify it rendered real content\n    loadTimerRef.current = setTimeout(() => {\n      let isCrossOrigin = false;\n\n      try {\n        // Try accessing contentDocument — cross-origin sites throw here\n        const doc = iframe.contentDocument;\n        if (!doc || !doc.body) {\n          setIframeFailed(true);\n          return;\n        }\n\n        // Same-origin access succeeded. This means either:\n        // 1. A same-origin site loaded (e.g., our own site in dev)\n        // 2. Browser rendered its own error page (X-Frame-Options block, connection refused, etc.)\n        //\n        // Browser error pages are same-origin and have short/generic content.\n        // Real sites have <title>, many DOM nodes, scripts, styles, etc.\n        const title = doc.title || '';\n        const bodyText = doc.body?.innerText?.trim() || '';\n        const numElements = doc.querySelectorAll('*').length;\n\n        // Heuristic: real sites have a meaningful title AND many DOM elements\n        // Browser error pages have very few elements and generic/empty titles\n        if (numElements > 20 && title.length > 0 && bodyText.length > 50) {\n          setIsLoaded(true);\n        } else {\n          setIframeFailed(true);\n        }\n      } catch {\n        isCrossOrigin = true;\n      }\n\n      if (isCrossOrigin) {\n        // Cross-origin: the real remote site loaded (can't be a browser error page\n        // since those are always same-origin). This is the success case.\n        setIsLoaded(true);\n      }\n    }, 2000);\n  }, []);\n\n  const handleError = useCallback(() => {\n    setIframeFailed(true);\n    if (loadTimerRef.current) clearTimeout(loadTimerRef.current);\n  }, []);\n\n  // Cleanup timer on unmount\n  useEffect(() => {\n    return () => {\n      if (loadTimerRef.current) clearTimeout(loadTimerRef.current);\n    };\n  }, []);\n\n  const wrapperStyle: React.CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    zIndex: 1,\n    overflow: 'hidden',\n    width: '100%',\n    height: '100%',\n  };\n\n  const iframeStyle: React.CSSProperties = {};\n\n  return { iframeRef, handleLoad, handleError, wrapperStyle, iframeStyle, isLoaded, iframeFailed };\n}\n\n// ─── Device Frames ───────────────────────────────────────────────────────────\n\n/**\n * Hook that detects if an iframe successfully loaded real content.\n * Cross-origin = success (real site loaded). Same-origin with minimal DOM = blocked/error.\n */\nfunction useIframeLoadDetection() {\n  const [loaded, setLoaded] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  const onLoad = useCallback(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return;\n\n    // Delay check to let the iframe paint\n    setTimeout(() => {\n      try {\n        // If we can access contentDocument, it's same-origin.\n        // Real sites are cross-origin and throw here → catch block → success.\n        const doc = iframe.contentDocument;\n        if (!doc?.body) { return; } // blocked\n        const numElements = doc.querySelectorAll('*').length;\n        // Browser error pages have very few elements. Real same-origin sites have many.\n        if (numElements > 20) setLoaded(true);\n      } catch {\n        // Cross-origin error = the real remote site loaded successfully\n        setLoaded(true);\n      }\n    }, 1500);\n  }, []);\n\n  return { iframeRef, loaded, onLoad };\n}\n\nfunction MacBookFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 1440;\n  const viewportHeight = 900;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <div className=\"w-full\">\n      <div\n        className=\"relative rounded-t-[10px] p-[4px] pb-0\"\n        style={{\n          background: 'linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)',\n          boxShadow: '0 -4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9)',\n        }}\n      >\n        <div\n          className=\"relative rounded-t-[7px] px-[8px] pt-[8px] pb-0\"\n          style={{ background: '#0a0a0a' }}\n        >\n          <div\n            className=\"absolute top-0 left-1/2 -translate-x-1/2 w-[70px] h-[18px] flex items-center justify-center z-10\"\n            style={{ background: '#0a0a0a', borderRadius: '0 0 10px 10px' }}\n          >\n            <div className=\"w-[5px] h-[5px] rounded-full\" style={{ background: '#2a3a2a', boxShadow: '0 0 0 1px #1a1a1a' }} />\n          </div>\n\n          <div ref={containerRef} className=\"relative overflow-hidden rounded-t-[3px]\" style={{ aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n            <ScreenshotOverlay src={screenshot} alt=\"Desktop preview\" sizes=\"(max-width: 1024px) 90vw, 640px\" priority hidden={iframeLoaded} />\n            {url && <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})` }} />}\n          </div>\n        </div>\n      </div>\n\n      {/* Black chin */}\n      <div className=\"h-[8px]\" style={{ background: '#0a0a0a', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />\n\n      {/* Silver base */}\n      <div\n        className=\"relative h-[12px] rounded-b-[10px]\"\n        style={{\n          background: 'linear-gradient(to bottom, #e0e0e5, #c8c8cd 20%, #b0b0b5 80%, #a0a0a5)',\n          boxShadow: '0 4px 15px rgba(0,0,0,0.3)',\n        }}\n      >\n        <div\n          className=\"absolute top-0 left-1/2 -translate-x-1/2 w-[25%] h-[4px] rounded-b-[4px]\"\n          style={{ background: 'linear-gradient(to bottom, #909095, #a8a8ad)' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction IPadFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 768;\n  const viewportHeight = 1024;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <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)' }}>\n      <div className=\"relative p-[2%]\" style={{ background: '#0a0a0a', borderRadius: '6% / 4.5%' }}>\n        <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' }} />\n        <div ref={containerRef} className=\"relative overflow-hidden\" style={{ borderRadius: '2%', aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n          <ScreenshotOverlay src={screenshot} alt=\"Tablet preview\" sizes=\"(max-width: 1024px) 40vw, 240px\" hidden={iframeLoaded} />\n          {url && <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})` }} />}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction IPhoneFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 393;\n  const viewportHeight = 852;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <div\n      className=\"relative p-[2.5%]\"\n      style={{\n        background: 'linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)',\n        borderRadius: '18% / 8%',\n        boxShadow:\n          '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)',\n      }}\n    >\n      {/* Side buttons */}\n      <div className=\"absolute left-0 top-[18%] w-[1%] h-[6%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute left-0 top-[26%] w-[1%] h-[10%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute left-0 top-[38%] w-[1%] h-[10%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute right-0 top-[22%] w-[1%] h-[12%] rounded-r-sm\" style={{ background: '#c8c8cd' }} />\n\n      {/* Black bezel */}\n      <div\n        className=\"relative p-[3%]\"\n        style={{ background: '#0a0a0a', borderRadius: '14% / 6%' }}\n      >\n        {/* Dynamic Island */}\n        <div\n          className=\"absolute top-[2.5%] left-1/2 -translate-x-1/2 w-[28%] h-[3.5%] rounded-full z-10\"\n          style={{ background: '#1a1a1a' }}\n        />\n\n        <div ref={containerRef} className=\"relative overflow-hidden\" style={{ borderRadius: '8% / 4%', aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n          <ScreenshotOverlay src={screenshot} alt=\"Mobile preview\" sizes=\"(max-width: 1024px) 25vw, 150px\" hidden={iframeLoaded} />\n          {url && <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})` }} />}\n        </div>\n\n        {/* Home indicator */}\n        <div\n          className=\"absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[34%] h-[1%] rounded-full\"\n          style={{ background: 'rgba(255,255,255,0.25)' }}\n        />\n      </div>\n    </div>\n  );\n}\n\n// ─── Main Component ──────────────────────────────────────────────────────────\n\nexport default function DeviceTrifolio({\n  url,\n  screenshots,\n  className = '',\n}: DeviceTrifolioProps) {\n  // Pass URL directly — iframes render immediately\n  const frameUrl = url || '';\n\n  // No entrance animation: the trifolio sits above the fold in the hero, and\n  // hiding it post-hydration re-hides the desktop LCP candidate (house LCP\n  // rule: above-fold content renders fully static).\n\n  return (\n    <div\n      data-screenshot-target=\"device-trifolio\"\n      className={`relative w-full min-w-0 max-w-full overflow-x-clip ${className}`}\n      style={{ aspectRatio: '11/5', minHeight: '200px' }}\n    >\n      {/* MacBook Pro - Center Back */}\n      <div\n        data-device=\"macbook\"\n        className=\"absolute left-1/2 -translate-x-1/2 bottom-0 w-[65%] z-10\"\n      >\n        <MacBookFrame url={frameUrl} screenshot={screenshots?.desktop} />\n      </div>\n\n      {/* iPad - Front Left */}\n      <div\n        data-device=\"ipad\"\n        className=\"absolute left-[8%] bottom-0 w-[28%] z-20\"\n      >\n        <IPadFrame url={frameUrl} screenshot={screenshots?.tablet} />\n      </div>\n\n      {/* iPhone - Front Right */}\n      <div\n        data-device=\"iphone\"\n        className=\"absolute right-[10%] bottom-0 w-[14%] z-30\"\n      >\n        <IPhoneFrame url={frameUrl} screenshot={screenshots?.mobile} />\n      </div>\n    </div>\n  );\n}\n","/**\n * Portfolio image resolution — single source of truth for turning the mixed\n * image shapes the API sends (plain URL strings, Supabase Storage URLs,\n * Sanity image objects) into something safe to render.\n *\n * IMPORTANT: a raw Sanity asset _ref (`image-{id}-{W}x{H}-{fmt}`) is an asset\n * ID, NOT a URL. Rendering it as `src` issues a garbage relative request\n * against the agency site's origin. Resolving refs to cdn.sanity.io URLs is\n * the API's job (it owns the Sanity project config); this helper refuses refs\n * so a broken image can never render, and warns once so the gap is visible.\n *\n * When a URL carries `-{W}x{H}.{ext}` dimensions (Sanity CDN URLs always do),\n * they're parsed out so callers can give next/image exact intrinsic sizes.\n */\n\nexport interface ResolvedPortfolioImage {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\n/** Raw Sanity asset reference — an ID, not a URL. */\nconst SANITY_ASSET_REF = /^image-[A-Za-z0-9]+-\\d+x\\d+-[a-z0-9]+$/;\n\n/** `…-1200x800.png` (optionally with a query string) → intrinsic dimensions. */\nconst FILENAME_DIMS = /-(\\d{2,5})x(\\d{2,5})\\.[a-z0-9]+(?:\\?.*)?$/i;\n\ninterface SanityImageLike {\n  asset?: { _ref?: string };\n}\n\nlet warnedAboutRefs = false;\n\n/**\n * Resolve a portfolio image input into a renderable URL (+ intrinsic\n * dimensions when they can be derived). Returns null for empty values and\n * for unresolved Sanity refs — callers skip rendering in that case.\n */\nexport function resolvePortfolioImage(\n  input: string | SanityImageLike | null | undefined,\n): ResolvedPortfolioImage | null {\n  const raw =\n    typeof input === 'string' ? input : input?.asset?._ref ?? '';\n  const value = (raw || '').trim();\n  if (!value) return null;\n\n  if (SANITY_ASSET_REF.test(value)) {\n    if (!warnedAboutRefs && typeof console !== 'undefined') {\n      warnedAboutRefs = true;\n      console.warn(\n        '[@sonordev/agency-site-kit] Received a raw Sanity asset ref instead of an ' +\n          'image URL — skipping render. The Sonor API should resolve image refs to ' +\n          'cdn.sanity.io URLs before returning portfolio sections.',\n      );\n    }\n    return null;\n  }\n\n  // Only absolute http(s) URLs or site-rooted paths are renderable.\n  if (!/^https?:\\/\\//i.test(value) && !value.startsWith('/')) return null;\n\n  const dims = value.match(FILENAME_DIMS);\n  if (dims) {\n    const width = parseInt(dims[1], 10);\n    const height = parseInt(dims[2], 10);\n    if (width > 0 && height > 0) return { url: value, width, height };\n  }\n\n  return { url: value };\n}\n"],"mappings":"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","names":["Image"]}

package/dist/portfolio/primitives/DeviceTrifolio.d.cts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface DeviceTrifolioProps {
+    url?: string;
+    screenshots?: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    className?: string;
+}
+declare function DeviceTrifolio({ url, screenshots, className, }: DeviceTrifolioProps): React.JSX.Element;
+
+export { DeviceTrifolio as default };

package/dist/portfolio/primitives/DeviceTrifolio.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface DeviceTrifolioProps {
+    url?: string;
+    screenshots?: {
+        desktop?: string;
+        tablet?: string;
+        mobile?: string;
+    };
+    className?: string;
+}
+declare function DeviceTrifolio({ url, screenshots, className, }: DeviceTrifolioProps): React.JSX.Element;
+
+export { DeviceTrifolio as default };

package/dist/portfolio/primitives/DeviceTrifolio.js

@@ -0,0 +1,242 @@
+'use client';
+"use client";
+import {
+  resolvePortfolioImage
+} from "../../chunk-QDXZ27R7.js";
+
+// src/portfolio/components/primitives/DeviceTrifolio.tsx
+import { useRef, useEffect, useState, useCallback } from "react";
+import Image from "next/image";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScreenshotOverlay({
+  src,
+  alt,
+  sizes,
+  priority = false,
+  hidden
+}) {
+  const resolved = resolvePortfolioImage(src);
+  if (!resolved) return null;
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      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 = useRef(null);
+  const [scale, setScale] = useState(1);
+  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] = useState(false);
+  const iframeRef = useRef(null);
+  const onLoad = 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__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ 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__ */ jsxs(
+          "div",
+          {
+            className: "relative rounded-t-[7px] px-[8px] pt-[8px] pb-0",
+            style: { background: "#0a0a0a" },
+            children: [
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "w-[5px] h-[5px] rounded-full", style: { background: "#2a3a2a", boxShadow: "0 0 0 1px #1a1a1a" } })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative overflow-hidden rounded-t-[3px]", style: { aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+                /* @__PURE__ */ jsx(ScreenshotOverlay, { src: screenshot, alt: "Desktop preview", sizes: "(max-width: 1024px) 90vw, 640px", priority: true, hidden: iframeLoaded }),
+                url && /* @__PURE__ */ 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__ */ jsx("div", { className: "h-[8px]", style: { background: "#0a0a0a", boxShadow: "0 1px 4px rgba(0,0,0,0.3)" } }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "relative p-[2%]", style: { background: "#0a0a0a", borderRadius: "6% / 4.5%" }, children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "2%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+      /* @__PURE__ */ jsx(ScreenshotOverlay, { src: screenshot, alt: "Tablet preview", sizes: "(max-width: 1024px) 40vw, 240px", hidden: iframeLoaded }),
+      url && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "absolute left-0 top-[18%] w-[1%] h-[6%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-[26%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-[38%] w-[1%] h-[10%] rounded-l-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[22%] w-[1%] h-[12%] rounded-r-sm", style: { background: "#c8c8cd" } }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative p-[3%]",
+            style: { background: "#0a0a0a", borderRadius: "14% / 6%" },
+            children: [
+              /* @__PURE__ */ 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__ */ jsxs("div", { ref: containerRef, className: "relative overflow-hidden", style: { borderRadius: "8% / 4%", aspectRatio: `${viewportWidth}/${viewportHeight}`, background: "#0a0a0a" }, children: [
+                /* @__PURE__ */ jsx(ScreenshotOverlay, { src: screenshot, alt: "Mobile preview", sizes: "(max-width: 1024px) 25vw, 150px", hidden: iframeLoaded }),
+                url && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+          "div",
+          {
+            "data-device": "macbook",
+            className: "absolute left-1/2 -translate-x-1/2 bottom-0 w-[65%] z-10",
+            children: /* @__PURE__ */ jsx(MacBookFrame, { url: frameUrl, screenshot: screenshots?.desktop })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-device": "ipad",
+            className: "absolute left-[8%] bottom-0 w-[28%] z-20",
+            children: /* @__PURE__ */ jsx(IPadFrame, { url: frameUrl, screenshot: screenshots?.tablet })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-device": "iphone",
+            className: "absolute right-[10%] bottom-0 w-[14%] z-30",
+            children: /* @__PURE__ */ jsx(IPhoneFrame, { url: frameUrl, screenshot: screenshots?.mobile })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DeviceTrifolio as default
+};
+//# sourceMappingURL=DeviceTrifolio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/DeviceTrifolio.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useEffect, useState, useCallback } from 'react';\nimport Image from 'next/image';\nimport { resolvePortfolioImage } from '../../../shared/images';\n\n/**\n * Screenshot layer inside a device frame. Sits above the live iframe and\n * fades out once the iframe verifies. The desktop shot is a likely LCP\n * element on desktop viewports, so it loads with priority.\n */\nfunction ScreenshotOverlay({\n  src,\n  alt,\n  sizes,\n  priority = false,\n  hidden,\n}: {\n  src?: string;\n  alt: string;\n  sizes: string;\n  priority?: boolean;\n  hidden: boolean;\n}) {\n  const resolved = resolvePortfolioImage(src);\n  if (!resolved) return null;\n  return (\n    <Image\n      src={resolved.url}\n      alt={alt}\n      fill\n      sizes={sizes}\n      priority={priority}\n      fetchPriority={priority ? 'high' : undefined}\n      style={{\n        objectFit: 'cover',\n        objectPosition: 'top center',\n        zIndex: 2,\n        opacity: hidden ? 0 : 1,\n        transition: 'opacity 0.8s ease',\n        pointerEvents: 'none' as const,\n      }}\n    />\n  );\n}\n\ninterface DeviceTrifolioProps {\n  url?: string;\n  screenshots?: {\n    desktop?: string;\n    tablet?: string;\n    mobile?: string;\n  };\n  className?: string;\n}\n\n// ─── Hooks ───────────────────────────────────────────────────────────────────\n\nfunction useScaledIframe(viewportWidth: number) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const updateScale = () => {\n      const containerWidth = container.offsetWidth;\n      setScale(containerWidth / viewportWidth);\n    };\n\n    updateScale();\n    const resizeObserver = new ResizeObserver(updateScale);\n    resizeObserver.observe(container);\n    return () => resizeObserver.disconnect();\n  }, [viewportWidth]);\n\n  return { containerRef, scale };\n}\n\nfunction useScrollSafeIframe() {\n  const [isLoaded, setIsLoaded] = useState(false);\n  const [iframeFailed, setIframeFailed] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const loadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleLoad = useCallback(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return;\n\n    // Wait for iframe to paint, then verify it rendered real content\n    loadTimerRef.current = setTimeout(() => {\n      let isCrossOrigin = false;\n\n      try {\n        // Try accessing contentDocument — cross-origin sites throw here\n        const doc = iframe.contentDocument;\n        if (!doc || !doc.body) {\n          setIframeFailed(true);\n          return;\n        }\n\n        // Same-origin access succeeded. This means either:\n        // 1. A same-origin site loaded (e.g., our own site in dev)\n        // 2. Browser rendered its own error page (X-Frame-Options block, connection refused, etc.)\n        //\n        // Browser error pages are same-origin and have short/generic content.\n        // Real sites have <title>, many DOM nodes, scripts, styles, etc.\n        const title = doc.title || '';\n        const bodyText = doc.body?.innerText?.trim() || '';\n        const numElements = doc.querySelectorAll('*').length;\n\n        // Heuristic: real sites have a meaningful title AND many DOM elements\n        // Browser error pages have very few elements and generic/empty titles\n        if (numElements > 20 && title.length > 0 && bodyText.length > 50) {\n          setIsLoaded(true);\n        } else {\n          setIframeFailed(true);\n        }\n      } catch {\n        isCrossOrigin = true;\n      }\n\n      if (isCrossOrigin) {\n        // Cross-origin: the real remote site loaded (can't be a browser error page\n        // since those are always same-origin). This is the success case.\n        setIsLoaded(true);\n      }\n    }, 2000);\n  }, []);\n\n  const handleError = useCallback(() => {\n    setIframeFailed(true);\n    if (loadTimerRef.current) clearTimeout(loadTimerRef.current);\n  }, []);\n\n  // Cleanup timer on unmount\n  useEffect(() => {\n    return () => {\n      if (loadTimerRef.current) clearTimeout(loadTimerRef.current);\n    };\n  }, []);\n\n  const wrapperStyle: React.CSSProperties = {\n    position: 'absolute',\n    left: 0,\n    top: 0,\n    zIndex: 1,\n    overflow: 'hidden',\n    width: '100%',\n    height: '100%',\n  };\n\n  const iframeStyle: React.CSSProperties = {};\n\n  return { iframeRef, handleLoad, handleError, wrapperStyle, iframeStyle, isLoaded, iframeFailed };\n}\n\n// ─── Device Frames ───────────────────────────────────────────────────────────\n\n/**\n * Hook that detects if an iframe successfully loaded real content.\n * Cross-origin = success (real site loaded). Same-origin with minimal DOM = blocked/error.\n */\nfunction useIframeLoadDetection() {\n  const [loaded, setLoaded] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  const onLoad = useCallback(() => {\n    const iframe = iframeRef.current;\n    if (!iframe) return;\n\n    // Delay check to let the iframe paint\n    setTimeout(() => {\n      try {\n        // If we can access contentDocument, it's same-origin.\n        // Real sites are cross-origin and throw here → catch block → success.\n        const doc = iframe.contentDocument;\n        if (!doc?.body) { return; } // blocked\n        const numElements = doc.querySelectorAll('*').length;\n        // Browser error pages have very few elements. Real same-origin sites have many.\n        if (numElements > 20) setLoaded(true);\n      } catch {\n        // Cross-origin error = the real remote site loaded successfully\n        setLoaded(true);\n      }\n    }, 1500);\n  }, []);\n\n  return { iframeRef, loaded, onLoad };\n}\n\nfunction MacBookFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 1440;\n  const viewportHeight = 900;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <div className=\"w-full\">\n      <div\n        className=\"relative rounded-t-[10px] p-[4px] pb-0\"\n        style={{\n          background: 'linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)',\n          boxShadow: '0 -4px 30px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.9)',\n        }}\n      >\n        <div\n          className=\"relative rounded-t-[7px] px-[8px] pt-[8px] pb-0\"\n          style={{ background: '#0a0a0a' }}\n        >\n          <div\n            className=\"absolute top-0 left-1/2 -translate-x-1/2 w-[70px] h-[18px] flex items-center justify-center z-10\"\n            style={{ background: '#0a0a0a', borderRadius: '0 0 10px 10px' }}\n          >\n            <div className=\"w-[5px] h-[5px] rounded-full\" style={{ background: '#2a3a2a', boxShadow: '0 0 0 1px #1a1a1a' }} />\n          </div>\n\n          <div ref={containerRef} className=\"relative overflow-hidden rounded-t-[3px]\" style={{ aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n            <ScreenshotOverlay src={screenshot} alt=\"Desktop preview\" sizes=\"(max-width: 1024px) 90vw, 640px\" priority hidden={iframeLoaded} />\n            {url && <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})` }} />}\n          </div>\n        </div>\n      </div>\n\n      {/* Black chin */}\n      <div className=\"h-[8px]\" style={{ background: '#0a0a0a', boxShadow: '0 1px 4px rgba(0,0,0,0.3)' }} />\n\n      {/* Silver base */}\n      <div\n        className=\"relative h-[12px] rounded-b-[10px]\"\n        style={{\n          background: 'linear-gradient(to bottom, #e0e0e5, #c8c8cd 20%, #b0b0b5 80%, #a0a0a5)',\n          boxShadow: '0 4px 15px rgba(0,0,0,0.3)',\n        }}\n      >\n        <div\n          className=\"absolute top-0 left-1/2 -translate-x-1/2 w-[25%] h-[4px] rounded-b-[4px]\"\n          style={{ background: 'linear-gradient(to bottom, #909095, #a8a8ad)' }}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction IPadFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 768;\n  const viewportHeight = 1024;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <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)' }}>\n      <div className=\"relative p-[2%]\" style={{ background: '#0a0a0a', borderRadius: '6% / 4.5%' }}>\n        <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' }} />\n        <div ref={containerRef} className=\"relative overflow-hidden\" style={{ borderRadius: '2%', aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n          <ScreenshotOverlay src={screenshot} alt=\"Tablet preview\" sizes=\"(max-width: 1024px) 40vw, 240px\" hidden={iframeLoaded} />\n          {url && <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})` }} />}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction IPhoneFrame({ url, screenshot }: { url: string; screenshot?: string }) {\n  const viewportWidth = 393;\n  const viewportHeight = 852;\n  const { containerRef, scale } = useScaledIframe(viewportWidth);\n  const { iframeRef, loaded: iframeLoaded, onLoad: onIframeLoad } = useIframeLoadDetection();\n\n  return (\n    <div\n      className=\"relative p-[2.5%]\"\n      style={{\n        background: 'linear-gradient(135deg, #e8e8ed 0%, #d1d1d6 100%)',\n        borderRadius: '18% / 8%',\n        boxShadow:\n          '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)',\n      }}\n    >\n      {/* Side buttons */}\n      <div className=\"absolute left-0 top-[18%] w-[1%] h-[6%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute left-0 top-[26%] w-[1%] h-[10%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute left-0 top-[38%] w-[1%] h-[10%] rounded-l-sm\" style={{ background: '#c8c8cd' }} />\n      <div className=\"absolute right-0 top-[22%] w-[1%] h-[12%] rounded-r-sm\" style={{ background: '#c8c8cd' }} />\n\n      {/* Black bezel */}\n      <div\n        className=\"relative p-[3%]\"\n        style={{ background: '#0a0a0a', borderRadius: '14% / 6%' }}\n      >\n        {/* Dynamic Island */}\n        <div\n          className=\"absolute top-[2.5%] left-1/2 -translate-x-1/2 w-[28%] h-[3.5%] rounded-full z-10\"\n          style={{ background: '#1a1a1a' }}\n        />\n\n        <div ref={containerRef} className=\"relative overflow-hidden\" style={{ borderRadius: '8% / 4%', aspectRatio: `${viewportWidth}/${viewportHeight}`, background: '#0a0a0a' }}>\n          <ScreenshotOverlay src={screenshot} alt=\"Mobile preview\" sizes=\"(max-width: 1024px) 25vw, 150px\" hidden={iframeLoaded} />\n          {url && <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})` }} />}\n        </div>\n\n        {/* Home indicator */}\n        <div\n          className=\"absolute bottom-[2%] left-1/2 -translate-x-1/2 w-[34%] h-[1%] rounded-full\"\n          style={{ background: 'rgba(255,255,255,0.25)' }}\n        />\n      </div>\n    </div>\n  );\n}\n\n// ─── Main Component ──────────────────────────────────────────────────────────\n\nexport default function DeviceTrifolio({\n  url,\n  screenshots,\n  className = '',\n}: DeviceTrifolioProps) {\n  // Pass URL directly — iframes render immediately\n  const frameUrl = url || '';\n\n  // No entrance animation: the trifolio sits above the fold in the hero, and\n  // hiding it post-hydration re-hides the desktop LCP candidate (house LCP\n  // rule: above-fold content renders fully static).\n\n  return (\n    <div\n      data-screenshot-target=\"device-trifolio\"\n      className={`relative w-full min-w-0 max-w-full overflow-x-clip ${className}`}\n      style={{ aspectRatio: '11/5', minHeight: '200px' }}\n    >\n      {/* MacBook Pro - Center Back */}\n      <div\n        data-device=\"macbook\"\n        className=\"absolute left-1/2 -translate-x-1/2 bottom-0 w-[65%] z-10\"\n      >\n        <MacBookFrame url={frameUrl} screenshot={screenshots?.desktop} />\n      </div>\n\n      {/* iPad - Front Left */}\n      <div\n        data-device=\"ipad\"\n        className=\"absolute left-[8%] bottom-0 w-[28%] z-20\"\n      >\n        <IPadFrame url={frameUrl} screenshot={screenshots?.tablet} />\n      </div>\n\n      {/* iPhone - Front Right */}\n      <div\n        data-device=\"iphone\"\n        className=\"absolute right-[10%] bottom-0 w-[14%] z-30\"\n      >\n        <IPhoneFrame url={frameUrl} screenshot={screenshots?.mobile} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/portfolio/primitives/FrequencyBarSkeleton.cjs

@@ -0,0 +1,88 @@
+'use client';
+"use strict";
+"use client";
+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);
+
+// src/portfolio/components/primitives/FrequencyBarSkeleton.tsx
+var FrequencyBarSkeleton_exports = {};
+__export(FrequencyBarSkeleton_exports, {
+  default: () => FrequencyBarSkeleton
+});
+module.exports = __toCommonJS(FrequencyBarSkeleton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var FREQ_BAR_CSS = `
+@keyframes sk-freq-bounce{0%,100%{transform:scaleY(var(--sk-freq-min,.3))}50%{transform:scaleY(var(--sk-freq-max,.8))}}
+.sk-freq-bar{transform:scaleY(var(--sk-freq-min,.3));animation:sk-freq-bounce var(--sk-freq-dur,1.2s) ease-in-out var(--sk-freq-delay,0s) infinite}
+@media (prefers-reduced-motion:reduce){.sk-freq-bar{animation:none;transform:scaleY(var(--sk-freq-max,.8))}}
+`;
+function pseudoRandom(index, salt) {
+  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+function FrequencyBarSkeleton({
+  className = "",
+  barCount = 5,
+  height = 40
+}) {
+  const opacities = Array.from({ length: barCount }, (_, i) => {
+    const center = (barCount - 1) / 2;
+    const distance = Math.abs(i - center) / center;
+    return 1 - distance * 0.5;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        gap: "3px",
+        height: `${height}px`
+      },
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { href: "sk-freq-bar", precedence: "default", children: FREQ_BAR_CSS }),
+        Array.from({ length: barCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "sk-freq-bar",
+            style: {
+              width: `${Math.max(3, Math.round(28 / barCount))}px`,
+              height: "100%",
+              borderRadius: "2px",
+              background: "var(--sk-primary, #6366f1)",
+              opacity: opacities[i],
+              transformOrigin: "bottom",
+              // Bounce range 0.2-0.4 → 0.6-1.0, full cycle 0.8-1.6s, 0.1s
+              // per-bar stagger — the same envelope as the old loop.
+              "--sk-freq-min": (0.2 + pseudoRandom(i, 1) * 0.2).toFixed(3),
+              "--sk-freq-max": (0.6 + pseudoRandom(i, 2) * 0.4).toFixed(3),
+              "--sk-freq-dur": `${((0.4 + pseudoRandom(i, 3) * 0.4) * 2).toFixed(3)}s`,
+              "--sk-freq-delay": `${(i * 0.1).toFixed(1)}s`
+            }
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+//# sourceMappingURL=FrequencyBarSkeleton.cjs.map

package/dist/portfolio/primitives/FrequencyBarSkeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/FrequencyBarSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\ninterface FrequencyBarSkeletonProps {\n  className?: string;\n  barCount?: number;\n  height?: number;\n}\n\n// EQ bounce loop — pure CSS keyframes. Each bar oscillates between its own\n// min/max scaleY (set via custom properties) on its own duration and delay,\n// so the bars stay out of phase. The base transform holds each bar at its\n// min scale while its stagger delay elapses; ease-in-out ≈ the old sine\n// wave. Reduced motion freezes the EQ at the bars' max scales.\nconst FREQ_BAR_CSS = `\n@keyframes sk-freq-bounce{0%,100%{transform:scaleY(var(--sk-freq-min,.3))}50%{transform:scaleY(var(--sk-freq-max,.8))}}\n.sk-freq-bar{transform:scaleY(var(--sk-freq-min,.3));animation:sk-freq-bounce var(--sk-freq-dur,1.2s) ease-in-out var(--sk-freq-delay,0s) infinite}\n@media (prefers-reduced-motion:reduce){.sk-freq-bar{animation:none;transform:scaleY(var(--sk-freq-max,.8))}}\n`;\n\n// Deterministic per-bar \"random\" — SSR and client must render identical\n// style attributes, so a real Math.random() in render would cause\n// hydration mismatches.\nfunction pseudoRandom(index: number, salt: number): number {\n  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;\n  return x - Math.floor(x);\n}\n\nexport default function FrequencyBarSkeleton({\n  className = '',\n  barCount = 5,\n  height = 40,\n}: FrequencyBarSkeletonProps) {\n  const opacities = Array.from({ length: barCount }, (_, i) => {\n    // Create a bell curve of opacities, highest in center\n    const center = (barCount - 1) / 2;\n    const distance = Math.abs(i - center) / center;\n    return 1 - distance * 0.5;\n  });\n\n  return (\n    <div\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        gap: '3px',\n        height: `${height}px`,\n      }}\n      role=\"status\"\n      aria-label=\"Loading\"\n    >\n      {/* React 19 hoists + dedupes via href/precedence; React 18 renders it\n          inline per skeleton (harmless duplication). */}\n      <style href=\"sk-freq-bar\" precedence=\"default\">\n        {FREQ_BAR_CSS}\n      </style>\n      {Array.from({ length: barCount }, (_, i) => (\n        <div\n          key={i}\n          className=\"sk-freq-bar\"\n          style={\n            {\n              width: `${Math.max(3, Math.round(28 / barCount))}px`,\n              height: '100%',\n              borderRadius: '2px',\n              background: 'var(--sk-primary, #6366f1)',\n              opacity: opacities[i],\n              transformOrigin: 'bottom',\n              // Bounce range 0.2-0.4 → 0.6-1.0, full cycle 0.8-1.6s, 0.1s\n              // per-bar stagger — the same envelope as the old loop.\n              '--sk-freq-min': (0.2 + pseudoRandom(i, 1) * 0.2).toFixed(3),\n              '--sk-freq-max': (0.6 + pseudoRandom(i, 2) * 0.4).toFixed(3),\n              '--sk-freq-dur': `${((0.4 + pseudoRandom(i, 3) * 0.4) * 2).toFixed(3)}s`,\n              '--sk-freq-delay': `${(i * 0.1).toFixed(1)}s`,\n            } as React.CSSProperties\n          }\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AA3BJ,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AASrB,SAAS,aAAa,OAAe,MAAsB;AACzD,QAAM,IAAI,KAAK,IAAI,QAAQ,QAAQ,OAAO,KAAK,IAAI;AACnD,SAAO,IAAI,KAAK,MAAM,CAAC;AACzB;AAEe,SAAR,qBAAsC;AAAA,EAC3C,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AACX,GAA8B;AAC5B,QAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM;AAE3D,UAAM,UAAU,WAAW,KAAK;AAChC,UAAM,WAAW,KAAK,IAAI,IAAI,MAAM,IAAI;AACxC,WAAO,IAAI,WAAW;AAAA,EACxB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MAIX;AAAA,oDAAC,WAAM,MAAK,eAAc,YAAW,WAClC,wBACH;AAAA,QACC,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MACpC;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,OACE;AAAA,cACE,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,QAAQ,CAAC,CAAC;AAAA,cAChD,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,SAAS,UAAU,CAAC;AAAA,cACpB,iBAAiB;AAAA;AAAA;AAAA,cAGjB,kBAAkB,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC;AAAA,cAC3D,kBAAkB,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC;AAAA,cAC3D,iBAAiB,KAAK,MAAM,aAAa,GAAG,CAAC,IAAI,OAAO,GAAG,QAAQ,CAAC,CAAC;AAAA,cACrE,mBAAmB,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC;AAAA,YAC5C;AAAA;AAAA,UAhBG;AAAA,QAkBP,CACD;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/portfolio/primitives/FrequencyBarSkeleton.d.cts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface FrequencyBarSkeletonProps {
+    className?: string;
+    barCount?: number;
+    height?: number;
+}
+declare function FrequencyBarSkeleton({ className, barCount, height, }: FrequencyBarSkeletonProps): React.JSX.Element;
+
+export { FrequencyBarSkeleton as default };

package/dist/portfolio/primitives/FrequencyBarSkeleton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface FrequencyBarSkeletonProps {
+    className?: string;
+    barCount?: number;
+    height?: number;
+}
+declare function FrequencyBarSkeleton({ className, barCount, height, }: FrequencyBarSkeletonProps): React.JSX.Element;
+
+export { FrequencyBarSkeleton as default };

package/dist/portfolio/primitives/FrequencyBarSkeleton.js

@@ -0,0 +1,68 @@
+'use client';
+"use client";
+
+// src/portfolio/components/primitives/FrequencyBarSkeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FREQ_BAR_CSS = `
+@keyframes sk-freq-bounce{0%,100%{transform:scaleY(var(--sk-freq-min,.3))}50%{transform:scaleY(var(--sk-freq-max,.8))}}
+.sk-freq-bar{transform:scaleY(var(--sk-freq-min,.3));animation:sk-freq-bounce var(--sk-freq-dur,1.2s) ease-in-out var(--sk-freq-delay,0s) infinite}
+@media (prefers-reduced-motion:reduce){.sk-freq-bar{animation:none;transform:scaleY(var(--sk-freq-max,.8))}}
+`;
+function pseudoRandom(index, salt) {
+  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+function FrequencyBarSkeleton({
+  className = "",
+  barCount = 5,
+  height = 40
+}) {
+  const opacities = Array.from({ length: barCount }, (_, i) => {
+    const center = (barCount - 1) / 2;
+    const distance = Math.abs(i - center) / center;
+    return 1 - distance * 0.5;
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        justifyContent: "center",
+        gap: "3px",
+        height: `${height}px`
+      },
+      role: "status",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ jsx("style", { href: "sk-freq-bar", precedence: "default", children: FREQ_BAR_CSS }),
+        Array.from({ length: barCount }, (_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sk-freq-bar",
+            style: {
+              width: `${Math.max(3, Math.round(28 / barCount))}px`,
+              height: "100%",
+              borderRadius: "2px",
+              background: "var(--sk-primary, #6366f1)",
+              opacity: opacities[i],
+              transformOrigin: "bottom",
+              // Bounce range 0.2-0.4 → 0.6-1.0, full cycle 0.8-1.6s, 0.1s
+              // per-bar stagger — the same envelope as the old loop.
+              "--sk-freq-min": (0.2 + pseudoRandom(i, 1) * 0.2).toFixed(3),
+              "--sk-freq-max": (0.6 + pseudoRandom(i, 2) * 0.4).toFixed(3),
+              "--sk-freq-dur": `${((0.4 + pseudoRandom(i, 3) * 0.4) * 2).toFixed(3)}s`,
+              "--sk-freq-delay": `${(i * 0.1).toFixed(1)}s`
+            }
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+export {
+  FrequencyBarSkeleton as default
+};
+//# sourceMappingURL=FrequencyBarSkeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/FrequencyBarSkeleton.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\ninterface FrequencyBarSkeletonProps {\n  className?: string;\n  barCount?: number;\n  height?: number;\n}\n\n// EQ bounce loop — pure CSS keyframes. Each bar oscillates between its own\n// min/max scaleY (set via custom properties) on its own duration and delay,\n// so the bars stay out of phase. The base transform holds each bar at its\n// min scale while its stagger delay elapses; ease-in-out ≈ the old sine\n// wave. Reduced motion freezes the EQ at the bars' max scales.\nconst FREQ_BAR_CSS = `\n@keyframes sk-freq-bounce{0%,100%{transform:scaleY(var(--sk-freq-min,.3))}50%{transform:scaleY(var(--sk-freq-max,.8))}}\n.sk-freq-bar{transform:scaleY(var(--sk-freq-min,.3));animation:sk-freq-bounce var(--sk-freq-dur,1.2s) ease-in-out var(--sk-freq-delay,0s) infinite}\n@media (prefers-reduced-motion:reduce){.sk-freq-bar{animation:none;transform:scaleY(var(--sk-freq-max,.8))}}\n`;\n\n// Deterministic per-bar \"random\" — SSR and client must render identical\n// style attributes, so a real Math.random() in render would cause\n// hydration mismatches.\nfunction pseudoRandom(index: number, salt: number): number {\n  const x = Math.sin(index * 127.1 + salt * 311.7) * 43758.5453;\n  return x - Math.floor(x);\n}\n\nexport default function FrequencyBarSkeleton({\n  className = '',\n  barCount = 5,\n  height = 40,\n}: FrequencyBarSkeletonProps) {\n  const opacities = Array.from({ length: barCount }, (_, i) => {\n    // Create a bell curve of opacities, highest in center\n    const center = (barCount - 1) / 2;\n    const distance = Math.abs(i - center) / center;\n    return 1 - distance * 0.5;\n  });\n\n  return (\n    <div\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'flex-end',\n        justifyContent: 'center',\n        gap: '3px',\n        height: `${height}px`,\n      }}\n      role=\"status\"\n      aria-label=\"Loading\"\n    >\n      {/* React 19 hoists + dedupes via href/precedence; React 18 renders it\n          inline per skeleton (harmless duplication). */}\n      <style href=\"sk-freq-bar\" precedence=\"default\">\n        {FREQ_BAR_CSS}\n      </style>\n      {Array.from({ length: barCount }, (_, i) => (\n        <div\n          key={i}\n          className=\"sk-freq-bar\"\n          style={\n            {\n              width: `${Math.max(3, Math.round(28 / barCount))}px`,\n              height: '100%',\n              borderRadius: '2px',\n              background: 'var(--sk-primary, #6366f1)',\n              opacity: opacities[i],\n              transformOrigin: 'bottom',\n              // Bounce range 0.2-0.4 → 0.6-1.0, full cycle 0.8-1.6s, 0.1s\n              // per-bar stagger — the same envelope as the old loop.\n              '--sk-freq-min': (0.2 + pseudoRandom(i, 1) * 0.2).toFixed(3),\n              '--sk-freq-max': (0.6 + pseudoRandom(i, 2) * 0.4).toFixed(3),\n              '--sk-freq-dur': `${((0.4 + pseudoRandom(i, 3) * 0.4) * 2).toFixed(3)}s`,\n              '--sk-freq-delay': `${(i * 0.1).toFixed(1)}s`,\n            } as React.CSSProperties\n          }\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AA0CI,SAcE,KAdF;AA3BJ,IAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AASrB,SAAS,aAAa,OAAe,MAAsB;AACzD,QAAM,IAAI,KAAK,IAAI,QAAQ,QAAQ,OAAO,KAAK,IAAI;AACnD,SAAO,IAAI,KAAK,MAAM,CAAC;AACzB;AAEe,SAAR,qBAAsC;AAAA,EAC3C,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AACX,GAA8B;AAC5B,QAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MAAM;AAE3D,UAAM,UAAU,WAAW,KAAK;AAChC,UAAM,WAAW,KAAK,IAAI,IAAI,MAAM,IAAI;AACxC,WAAO,IAAI,WAAW;AAAA,EACxB,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,MACnB;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MAIX;AAAA,4BAAC,WAAM,MAAK,eAAc,YAAW,WAClC,wBACH;AAAA,QACC,MAAM,KAAK,EAAE,QAAQ,SAAS,GAAG,CAAC,GAAG,MACpC;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,OACE;AAAA,cACE,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,QAAQ,CAAC,CAAC;AAAA,cAChD,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,YAAY;AAAA,cACZ,SAAS,UAAU,CAAC;AAAA,cACpB,iBAAiB;AAAA;AAAA;AAAA,cAGjB,kBAAkB,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC;AAAA,cAC3D,kBAAkB,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK,QAAQ,CAAC;AAAA,cAC3D,iBAAiB,KAAK,MAAM,aAAa,GAAG,CAAC,IAAI,OAAO,GAAG,QAAQ,CAAC,CAAC;AAAA,cACrE,mBAAmB,IAAI,IAAI,KAAK,QAAQ,CAAC,CAAC;AAAA,YAC5C;AAAA;AAAA,UAhBG;AAAA,QAkBP,CACD;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/portfolio/primitives/GlassCard.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/portfolio/components/primitives/GlassCard.tsx
+var paddingMap = {
+  sm: "16px",
+  md: "24px",
+  lg: "32px"
+};
+var HOVER_CSS = `
+.sk-glass-card{transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s cubic-bezier(.25,.46,.45,.94)}
+.sk-glass-card--hover:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 20px 40px -12px rgba(0,0,0,.25),0 0 0 1px var(--sk-primary,#6366f1)}
+@media (prefers-reduced-motion:reduce){.sk-glass-card{transition:none}.sk-glass-card--hover:hover{transform:none}}
+`;
+function GlassCard({
+  children,
+  className = "",
+  hover = true,
+  padding = "md"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `sk-glass-card ${hover ? "sk-glass-card--hover" : ""} ${className}`,
+      style: {
+        padding: paddingMap[padding],
+        background: "var(--sk-surface, rgba(255,255,255,0.05))",
+        backdropFilter: "blur(16px)",
+        WebkitBackdropFilter: "blur(16px)",
+        border: "1px solid var(--sk-border, rgba(255,255,255,0.1))",
+        borderRadius: "16px",
+        boxShadow: "0 4px 16px -4px rgba(0,0,0,0.1), 0 0 0 1px var(--sk-border, rgba(255,255,255,0.1))"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sk-glass-card", precedence: "default", children: HOVER_CSS }),
+        children
+      ]
+    }
+  );
+}
+
+module.exports = GlassCard;
+//# sourceMappingURL=GlassCard.cjs.map
+//# sourceMappingURL=GlassCard.cjs.map

package/dist/portfolio/primitives/GlassCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/portfolio/components/primitives/GlassCard.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAeA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI,MAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,SAAA,GAAY;AAAA;AAAA;AAAA;AAAA,CAAA;AAMH,SAAR,SAAA,CAA2B;AAAA,EAChC,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA,GAAQ,IAAA;AAAA,EACR,OAAA,GAAU;AACZ,CAAA,EAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,CAAA,cAAA,EAAiB,KAAA,GAAQ,sBAAA,GAAyB,EAAE,IAAI,SAAS,CAAA,CAAA;AAAA,MAC5E,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,WAAW,OAAO,CAAA;AAAA,QAC3B,UAAA,EAAY,2CAAA;AAAA,QACZ,cAAA,EAAgB,YAAA;AAAA,QAChB,oBAAA,EAAsB,YAAA;AAAA,QACtB,MAAA,EAAQ,mDAAA;AAAA,QACR,YAAA,EAAc,MAAA;AAAA,QACd,SAAA,EAAW;AAAA,OACb;AAAA,MAIA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,OAAA,EAAA,EAAM,IAAA,EAAK,eAAA,EAAgB,UAAA,EAAW,WACpC,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","file":"GlassCard.cjs","sourcesContent":["// Shared component — NO 'use client' directive on purpose: GlassCard has no\n// hooks, handlers, or browser APIs, so it renders in BOTH graphs. Server\n// sections use it server-side (zero JS); client sections pull it into their\n// graph. The hover lift is pure CSS. Keep it dependency-free — adding a hook\n// here would force every server section that uses it back to the client.\n\nimport React from 'react';\n\ninterface GlassCardProps {\n  children: React.ReactNode;\n  className?: string;\n  hover?: boolean;\n  padding?: 'sm' | 'md' | 'lg';\n}\n\nconst paddingMap = {\n  sm: '16px',\n  md: '24px',\n  lg: '32px',\n} as const;\n\nconst HOVER_CSS = `\n.sk-glass-card{transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s cubic-bezier(.25,.46,.45,.94)}\n.sk-glass-card--hover:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 20px 40px -12px rgba(0,0,0,.25),0 0 0 1px var(--sk-primary,#6366f1)}\n@media (prefers-reduced-motion:reduce){.sk-glass-card{transition:none}.sk-glass-card--hover:hover{transform:none}}\n`;\n\nexport default function GlassCard({\n  children,\n  className = '',\n  hover = true,\n  padding = 'md',\n}: GlassCardProps) {\n  return (\n    <div\n      className={`sk-glass-card ${hover ? 'sk-glass-card--hover' : ''} ${className}`}\n      style={{\n        padding: paddingMap[padding],\n        background: 'var(--sk-surface, rgba(255,255,255,0.05))',\n        backdropFilter: 'blur(16px)',\n        WebkitBackdropFilter: 'blur(16px)',\n        border: '1px solid var(--sk-border, rgba(255,255,255,0.1))',\n        borderRadius: '16px',\n        boxShadow: '0 4px 16px -4px rgba(0,0,0,0.1), 0 0 0 1px var(--sk-border, rgba(255,255,255,0.1))',\n      }}\n    >\n      {/* React 19 hoists + dedupes via href/precedence; React 18 renders it\n          inline per card (harmless duplication). */}\n      <style href=\"sk-glass-card\" precedence=\"default\">\n        {HOVER_CSS}\n      </style>\n      {children}\n    </div>\n  );\n}\n"]}